::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #aaa;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

@font-face {
    src: url("../fonts/Be_Vietnam_Pro/BeVietnamPro-ExtraBold.ttf");
    font-family: "Quicksand";
    font-weight: 900;
}

@font-face {
    src: url("../fonts/Be_Vietnam_Pro/BeVietnamPro-Bold.ttf");
    font-family: "Quicksand";
    font-weight: 700;
}

@font-face {
    src: url("../fonts/Be_Vietnam_Pro/BeVietnamPro-SemiBold.ttf");
    font-family: "Quicksand";
    font-weight: 600;
}

@font-face {
    src: url("../fonts/Be_Vietnam_Pro/BeVietnamPro-Medium.ttf");
    font-family: "Quicksand";
    font-weight: 500;
}

@font-face {
    src: url("../fonts/Be_Vietnam_Pro/BeVietnamPro-Regular.ttf");
    font-family: "Quicksand";
    font-weight: 300;
}

@font-face {
    src: url("../fonts/Be_Vietnam_Pro/BeVietnamPro-Light.ttf");
    font-family: "Quicksand";
    font-weight: 200;
}

:root {
    --font-primary: 'Quicksand';
    --primary-color-2: #EF005B;
    --color-gray: #000;
    --color-2: rgba(91, 91, 91, 1);
}

h1, h2, h3, h4, h5, h6, strong, b {
    font-family: var(--font-primary) !important;
    font-weight: 700 !important;
}

body {
    font-family: var(--font-primary) !important;
    font-weight: 200 !important;
}

.absolute-footer {
    background: var(--primary-color) !important;
    padding: 10px 0 !important;
}

html {
    background-color: #fff !important;
}

#wrapper, #main {
    background: #fff !important;
}

ul, li {
    margin-bottom: 0px !important;
}

.row-0 {
    padding: 0px 15px !important;
}

.pd-0 {
    padding: 0px !important;
}

.row-5 {
    padding: 0px 10px !important;
}

.pd-5 {
    padding: 0px 5px 8px 5px !important;
}

.row-20 {
    padding: 0px 0px !important;
}

.pd-20 {
    padding: 0px 20px 20px 20px !important;
}

.pd-35 {
    padding: 0px 35px 20px 35px !important;
}

.row-7 {
    padding: 0px 7px !important;
}

.pd-7 {
    padding: 0px 7px 7px 7px !important;
}

.noPadding {
    padding-bottom: 0px !important;
}

.mr-1 {
    margin-right: 10px !important;
}

.mr-2 {
    margin-right: 20px;
}

.mr-3 {
    margin-right: 30px;
}

.mr-4 {
    margin-right: 40px;
}

.mr-4 {
    margin-right: 50px;
}

.ml-1 {
    margin-left: 10px;
}

.ml-2 {
    margin-left: 20px;
}

.ml-3 {
    margin-left: 30px;
}

.ml-4 {
    margin-left: 40px;
}

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 20px;
}

.mt-3 {
    margin-top: 30px;
}

.mt-4 {
    margin-top: 40px;
}

.mt-5 {
    margin-top: 50px;
}

.mb-1 {
    margin-bottom: 10px !important;
}

.mb-2 {
    margin-bottom: 20px !important;
}

.mb-3 {
    margin-bottom: 30px;
}

.mb-4 {
    margin-bottom: 40px;
}

.mb-5 {
    margin-bottom: 50px;
}

.button_style {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    text-align: center;
    padding: 8px 33px !important;
    font-size: 15px !important;
    display: inline-block !important;
    position: relative;
    text-transform: unset !important;
    overflow: hidden !important;
    z-index: 9 !important;
    border-radius: 99px !important;
    transition: 0.3s all !important;
    line-height: 24px !important;
    box-shadow: unset !important;
}


.button_style:hover {
    box-shadow: 0px 4px 19.2px 0px rgba(0, 0, 0, 0.09) !important;
    background: #fff !important;
    color: var(--primary-color-2) !important;
}

/**menu**/
div#mega-menu-wrap-primary ul li a {
    color: #000000 !important;
    padding: 0 10px !important;
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    text-transform: unset !important;
    font-size: 16px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center;
}
#mega-menu-wrap-primary {
    display: flex;
	left:43%;
    justify-content: center; /* hoặc space-between tùy ý */
    align-items: center;
}
#mega-menu-wrap-primary > ul {
    display: flex;
}
#mega-menu-wrap-primary > ul > li {
    white-space: nowrap; /* tránh xuống dòng */
}
@media (max-width: 850px) {
    #mega-menu-wrap-primary {
        display: none !important;
    }
}
/* bổ sung*/

.padding-0{
	    padding: 0 !important;
}/* bổ sung*/
.searchform-wrapper {
	right: 400px;
}/* bổ sung*/
.left--x {
	left: -10px;
}/* bổ sung*/
.border-radius-tr-30 {
	border-radius: 0 30px 0 0;
}/* bổ sung*/
.border-radius-20{
	border-radius: 20px;
}/* bổ sung*/
.button-brown{
	background-color: #ea7b23 !important;
}/* bổ sung*/
.border-radius-tr-30 img {
    border-radius: 0 30px 0 0;
}/* bổ sung*/
.border-radius-30 img {
    border-radius: 30px;
}/* bổ sung*/
.tab-panels {
    padding-top: 1em;
    padding-left: 50px;
}/* bổ sung*/
li#tab-title-description
 {
    display: none;
}/* bổ sung*/

.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item){
        margin: 6px;
    border-radius: 0;
border: 0,1px solid #d7d7d7 !important;
}/* bổ sung*/
div#mega-menu-wrap-primary ul li a:before {
    content: '' !important;
    background: #fff !important;
    width: 0% !important;
    height: 3px !important;
    position: absolute !important;
    left: 0;
    top: 0 !important;
    opacity: 0;
    transition: all .3s;
}

div#mega-menu-wrap-primary ul li a:hover:before {
    transition: all .3s;
    opacity: 1 !important;
    width: 100% !important;
}

.header-button a {
    background: rgba(255, 255, 255, 0.2);
}

#mega-menu-wrap-primary #mega-menu-primary[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu, #mega-menu-wrap-primary #mega-menu-primary[data-effect="fade_up"] li.mega-menu-item.mega-menu-flyout ul.mega-sub-menu {
    text-align: center !important;
    display: flex;
    justify-content: center;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
    width: 1270px;
}

div#mega-menu-wrap-primary ul li a:hover {
    color: #ff8500 !important;
   background: rgba(255,255,255,0.2) !important;
}

div#mega-menu-wrap-primary ul li.mega-current-menu-item a {
    color: #ff8500 !important;
    background: rgba(255,255,255,0.2) !important;
}

div#mega-menu-wrap-primary ul li.mega-current-menu-item a:before {
    opacity: 1 !important;
    width: 100% !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 10px 20px, rgba(0, 0, 0, 0.04) 0px 2px 6px, rgba(0, 0, 0, 0.04) 0px 0px 1px !important;
    display: block !important;
    padding: 8px 20px !important;
    background: #fff !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li {
    padding: 0 !important;
    border: 0px !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    height: unset !important;
    padding: 12px 16px !important;
    display: block !important;
    -webkit-transition: .4s;
    transition: .4s;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--color-gray) !important;
    text-transform: unset !important;
    background: #fff !important;
    text-align: left !important;
    font-weight: 300 !important;
    border-color: transparent !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover {
    background-color: rgb(244, 244, 246) !important;
    box-shadow: none;
    border-bottom: none !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover:before {
    display: none !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li a.mega-menu-link:before {
    display: none !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    color: var(--color-gray) !important;
    margin-bottom: 10px !important;
    text-align: left !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
    color: var(--color-gray) !important;
    text-transform: unset !important;
    font-size: 14px !important;
    text-align: left !important;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    padding: 0px !important;
    text-align: left !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link:hover {
    color: var(--primary-color) !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
    background: #fff !important;
    box-shadow: 0px 0px 16px rgb(0 0 0 / 10%);
    padding: 15px !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li {
    padding: 0 !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
   color: var(--primary-color) !important;
    font-weight: 700 !important;
    text-align: left !important;
    border-bottom: 0 !important;
    text-transform: uppercase !important;
    border-left: 2px solid var(--primary-color);
    padding: 0 0 0 15px !important;
    margin-bottom: 15px !important;
}

/**widget**/
.widget {
    width: 100%;
}

.widget-title, span.widget-title, h4.filter-title, .widgettitle {
    font-size: 24px !important;
    line-height: 32px !important;
    position: relative !important;
    margin: 0 0 15px 0 !important;
    text-transform: unset !important;
    width: 100% !important;
    display: block;
    font-weight: 500 !important;
}

.is-divider.small {
    display: none;
}

.widget-title:after, span.widget-title:after, h4.filter-title:after, .widgettitle:after {
    content: '';
    height: 2px;
    background: var(--primary-color);
    width: 100px;
    display: block;
    margin-top: 10px;
}

.widget-category ul li a {
    color: #333;
    font-size: 15px;
}

.widget-category ul li a:hover {
    color: var(--primary-color)
}

.widget-post-list .widget-post-item {
    width: 100%;
    margin-bottom: 25px;
}

.widget-post-list .widget-post-item:last-child {
    margin: 0;
}

.widget-post-list .widget-post-item {
    display: flex;
    flex-flow: wrap;
}


.widget-post-list .widget-post-item .widget-post-thumbnail {
    width: 100px;
    height: 80px;
}

.widget-post-list .widget-post-item .widget-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.widget-post-list .widget-post-item .widget-post-content {
    width: calc(100% - 120px);
    padding: 0 0 0 10px;
}

.widget-post-list .widget-post-item .widget-post-content .widget-post-title a {
    display: inline-block;
    color: #000;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.widget-post-list .widget-post-item .widget-post-content .widget-post-title a:hover {
    color: var(--primary-color-2);
}

.widget-post-list .widget-post-item .widget-post-content .product-price {
    font-size: 13px;
}

.widget-post-list .widget-post-item .widget-post-content .product-price ins span {
    color: var(--primary-color) !important;
}

.widget-post-list .widget-post-desc {
    color: rgba(151, 149, 143);
    font-size: 0.75rem;
    line-height: 1rem;
    margin: 10px 0 0 0;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.widget-post-list .widget-post-meta {
    font-size: 14px;
    color: #848382;
    line-height: 22px;
}

.widget_nav_menu ul li {
    border: 0px !important;
}

.widget_nav_menu ul li a {
    position: relative;
    padding: 0 0 0 15px !important;
    margin-bottom: 8px !important;
}

.widget_nav_menu ul li a:before {
    content: '';
    width: 5px;
    height: 5px;
    background: #000;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/**post item**/
.post-item {
    width: 100%;
    background: #fff;
    box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.11);
    transition: 0.3s all;
}

.post-item:hover {
    box-shadow: 0px 4px 28.9px 0px rgba(0, 0, 0, 0.21);
}

.post-item .post-thumbnail {
    padding-top: 64.9572649573%;
    position: relative;
    overflow: hidden;
}

.post-item .post-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.post-item .post-content {
    padding: 15px;
}

.post-item .post-content .post-title a {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--color-gray);
    height: 53px;
}

.post-item .post-content .post-title a:hover {
    color: var(--primary-color-2);
}

.post-item .post-content .post-desc {
    font-size: 14px;
    line-height: 20px;
    font-weight: 200;
    color: rgba(0, 0, 0, .6);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 8px 0 5px 0;
}

.post-item .post-content .post-more a {
    font-size: 15px;
    line-height: 25px;
    font-weight: 700;
    color: rgba(31, 31, 31, 1);
    display: flex;
    gap: 5px;
    align-items: center;
}

.post-item .post-content .post-more a i {
    background: var(--primary-color-2);
    color: #fff;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 99px;
    text-align: center;
    line-height: 20px;
    font-size: 13px;
}

/**post large**/
.post-large {
    width: 100%;
    border-radius: 6px;
    background: #fff;
    transition: 0.3s ease-in-out;
}

.post-large .post-thumbnail {
    width: 100%;
    height: 320px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    transition: 0.3s ease-in-out;
}

.post-large .post-thumbnail img {
    width: 100%;
    height: 100%;
    transition: 0.3s ease-in-out;
    object-fit: cover;
    border-radius: 16px;
}

.post-large:hover .post-thumbnail img {
    transition: 0.3s ease-in-out;
    transform: scale(1.1);
}

.post-large .post-content {
    padding: 15px 0 0 0;
}

.post-large .post-content .post-title a {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #000;
}

.post-large .post-content .post-title a:hover {
    text-decoration: underline;
}

.post-large .post-content .post-desc {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, .6);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 10px 0 0 0;
}

/**post small**/
.post-small {
    width: 100%;
    border-radius: 6px;
    background: #fff;
    display: flex;
    transition: 0.3s ease-in-out;
}

.post-small:not(:last-child) {
    margin-bottom: 20px;
}

.post-small .post-thumbnail {
    width: 200px;
    height: 150px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    transition: 0.3s ease-in-out;
}

.post-small .post-thumbnail img {
    width: 100%;
    height: 100%;
    transition: 0.3s ease-in-out;
    object-fit: cover;
    border-radius: 16px;
}

.post-small:hover .post-thumbnail img {
    transition: 0.3s ease-in-out;
    transform: scale(1.1);
}

.post-small .post-content {
    width: calc(100% - 200px);
    padding: 0 0 0 15px;
}

.post-small .post-content .post-title a {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #000;
}

.post-small .post-content .post-title a:hover {
    text-decoration: underline;
}

.post-small .post-content .post-desc {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, .6);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 10px 0 0 0;
}

/**pagination**/
.pagination {
    width: 100%;
    display: inline-block;
}

.pagination ul li {
    margin: 0 8px !important;
}

.pagination ul li a, .pagination ul li span {
    color: var(--color-gray);
    display: block;
    border: 0;
    max-width: 15px !important;
    height: 25px;
    padding: 0px;
    line-height: 15px;
    font-weight: normal;
    position: relative;
    text-align: center;
    width: 15px !important;
    min-width: 15px;
}

.pagination ul li a:before, .pagination ul li span:before {
    display: none;
    content: '';
    width: 100%;
    position: absolute;
    bottom: 0px;
    height: 2px;
    background: var(--primary-color-2);
    left: 0;
}

.pagination ul li a:hover, .pagination ul li span:hover {
    color: var(--color-gray);
    font-weight: normal !important;
    background: transparent !important;
}

.pagination ul li a:hover:before, .pagination ul li span:hover:before {
    display: block;
}

.wp-pagenavi {
    width: 100%;
    display: inline-block;
    margin: 20px 0 0 0;
    text-align: center;
}

.wp-pagenavi a, .wp-pagenavi span {
    background: transparent !important;
    border: 0;
    width: 15px;
    height: 15px;
    padding: 0px;
    line-height: 15px;
    font-weight: normal;
    display: inline-block;
    text-align: center;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current, .pagination span.current {
    color: var(--color-gray) !important;
    font-weight: normal !important;
    background: transparent !important;
}

.pagination span.current:before, .wp-pagenavi span.current:before {
    display: block;
}

/**alert**/
.alert {
    position: relative;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.alert-primary {
    color: #084298;
    background-color: #cfe2ff;
    border-color: #b6d4fe;
}

.alert-secondary {
    color: #41464b;
    background-color: #e2e3e5;
    border-color: #d3d6d8;
}

.alert-success {
    color: #0f5132 !important;
    background-color: #d1e7dd !important;;
    border-color: #badbcc !important;;
}

.alert-danger {
    color: #842029 !important;
    background-color: #f8d7da !important;
    border-color: #f5c2c7 !important;
}

.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

.alert-light {
    color: #636464;
    background-color: #fefefe;
    border-color: #fdfdfe;
}

.alert-dark {
    color: #141619;
    background-color: #d3d3d4;
    border-color: #bcbebf;
}

/**slide**/
.swiper-container {
    position: relative;
}

body .swiper-button-next, body .swiper-button-prev {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: 1px solid var(--primary-color);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: .3s;
    transition: .3s;
    transform: translateY(-50%) !important;
    top: 50% !important;
    border-radius: 50% !important;
    color: var(--primary-color) !important;
    margin: 0;
    background: #fff;
}

body .swiper-button-prev.swiper-button-disabled,
body .swiper-button-next.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none;
}

body .swiper-button-next:after, body .swiper-button-prev:after {
    content: '' !important;
    font-size: 18px;
    color: var(--primary-color);
}

body .swiper-button-next {
    right: -50px;
}

body .swiper-button-prev {
    left: -50px;
}

body .swiper-button-next:after, body .swiper-button-prev:after {
    display: none !important;
}

body .swiper-button-next i, body .swiper-button-prev i {
    color: var(--primary-color) !important;
}

body .swiper-button-next img, body .swiper-button-prev img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

/**category**/
.category-description {
    font-size: 16px;
}

.entry-content {
    padding: 0 !important;
    font-size: 16px;
    color: rgba(0, 0, 0, 1);
}

.category-description p
.category-description ul li,
.category-description ol li,
.entry-content p,
.entry-content ul li,
.entry-content ol li {
    margin: 0 0 10px 0 !important;
}

.category-description ul,
.category-description ol,
.entry-content ul,
.entry-content ol {
    margin-left: 15px !important;
}

.category-description table,
.category-description table tr td,
.entry-content table,
.entry-content tr td {
    border-collapse: collapse;
    border: 1px solid #3333;
}

.category-description table tr td,
.category-description table tr th,
.entry-content tr td,
.entry-content tr th {
    padding: 10px;
    color: #333 !important;
}

.entry-content a, .category-description a {
    color: var(--primary-color-2) !important;
}

/**header**/
input#woocommerce-product-search-field-0 {
    height: 40px;
    box-shadow: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 15px;
    width: 400px;
    margin-left: 35px;
	border-radius: 99px;
}

button.ux-search-submit.submit-button.secondary.button.icon.mb-0 {
    width: 50px;
    height: 40px;
    box-shadow: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #fff;
	right: 12px;
}

/**icon sale**/
.icon-sale h4 {
    color: #fff;
    font-size: 16px !important;
    line-height: 24px !important;
    margin: 0 0 10px 0;
}

.icon-sale p {
    font-size: 15px;
    line-height: 24px;
    margin: 0;
    color: #fff;
}

/**product-item**/
.product-slide .product-small.col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.product-small .product-small.box {
    box-shadow: 0 1px 3px -2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    padding-bottom: 0;
    border-radius: 6px 6px 0 0;
    transition: 0.3s ease-in-out;
}

.product-small .product-small.box:hover {
    transition: 0.3s ease-in-out;
    box-shadow: 0 1px 3px -2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
}

.swiper-product-pdf .swiper-wrapper {
    padding: 20px 0;
}

p.name.product-title.woocommerce-loop-product__title a {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #000;
    height: 50px;
}

.product-small .box-image {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    height: 285px;
}

.product-small .box-image .image-fade_in_back,
.product-small .box-image .image-fade_in_back a {
    width: 100%;
    height: 100%;
}

.product-small .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-small .price-wrapper {
    margin: 10px 0 0 0;
}

p.name.product-title.woocommerce-loop-product__title {
    margin: 0;
}

p.name.product-title.woocommerce-loop-product__title a:hover {
    text-decoration: underline;
}

.product-small.col .box-text {
    padding: 15px;
}

.product-small .price ins bdi {
    color: #d80000;
    font-size: 16px
}

.product-small .price del {
    font-size: 16px;
    margin-left: 5px;
}

.product-small .box-image::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

.product-small .box-image:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

.product-small .badge-container.absolute.left.top.z-1 .onsale {
    background: #0000 radial-gradient(circle, red, red,red,#fea914) repeat scroll 0 0 !important;
    border-radius: 0 10px 10px 0;
    padding: 0 15px 0 10px;
    margin: 0;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    font-size: 110%;
    font-weight: 500;
    color: #fff;
}

.product-small .button_counter {
    font-size: 15px;
    height: 36px;
    line-height: 35px;
    text-align: center;
    width: 100%;
    background: #0c673c;
    border-radius: 0 0 0 6px;
    color: #fff;
}

.product-small .button_store a {
    font-size: 15px;
    height: 36px;
    line-height: 35px;
    text-align: center;
    width: 100%;
    background: var(--primary-color);
    border-radius: 0 0 6px 0;
    color: #fff;
    display: block;
    font-weight: 500;
}

/**home title**/
.home-title h3, .home-title h1 {
    color: #000;
    font-size: 35px;
    line-height: 45px;
    margin: 0;
    width: auto;
    display: inline-block;
    position: relative;
}

.home-title.title-featured h3:before {
    content: "";
    position: absolute;
    background-size: auto 40px !important;
    width: 37px !important;
    height: 40px !important;
    left: -45px !important;
    top: 50%;
    transform: translateY(-50%);
    background: url(../images/icon-hot.jpg) no-repeat;
}

.home-title.title-new h3:before {
    content: "";
    position: absolute;
    background-size: auto 30px !important;
    width: 30px;
    height: 30px;
    left: -44px;
    top: 50%;
    transform: translateY(-50%);
    background: url(../images/icon-hot.png) no-repeat;
}

.home-title.title-sale h3:before {
    content: "";
    position: absolute;
    background-size: auto 40px !important;
    width: 37px;
    height: 40px;
    left: -45px;
    top: 50%;
    transform: translateY(-50%);
    background: url(../images/icon-mn.png) no-repeat;
}

/**partner**/
.partner-item {
    width: 100%;
    height: 120px;
    padding: 10px;
}

.partner-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/**footer**/
.absolute-footer.dark{
	display:none;
}
.social-footer a {
    margin: 0 5px !important;
}

.footer-primary {
    float: none;
    color: #fff;
}

/* #footer {
    color: rgba(255,255,255,0.6);
    font-size: 15px;
}

#footer p {
    color: rgba(255,255,255,0.6);
    font-size: 15px;
    margin: 0 0 10px 0;
} */

#footer .footer-top .footer-title {
    font-size: 18px;
    color: #000000;
    font-weight: 700;
    line-height: 24px
}

#footer .footer-copyright {
    color: #fff;
    font-size: 15px;
    border-top: 1px dashed rgba(255, 255, 255, .4);
    padding: 15px 0
}
/*bổ sung*/
.footer-col  {
    
    padding: 0 15px 0px !important ;
    
}/*bổ sung*/
/* Đảm bảo sản phẩm hiện ra bất kể animation */
#product-grid .product-item,
#product-grid .col {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}
.border-radius-30{
	border-radius: 30px;
}/*bổ sung*/
table.variations .label {
	font-size: 20px;
}/*bổ sung*/
span.woo-selected-variation-item-name{
	display:none !important;
}/*bổ sung*/
.button, button{
	
}/*bổ sung*/
.woocommerce-variation-add-to-cart .ux-quantity,
.woocommerce-variation-add-to-cart .single_add_to_cart_button,
.woocommerce-variation-add-to-cart .ux-buy-now-button,
form.cart .ux-quantity,
form.cart .single_add_to_cart_button,
form.cart .ux-buy-now-button {
    flex: unset !important; /* hoặc flex: initial, hoặc flex: 1 1 auto tùy mục đích */
}/*bổ sung*/


/*----------header - blog----------*/
/* --- A. ĐỊNH DẠNG CHUNG CHO CARD --- */

.article-card {
    border-radius: 12px;
/*     background-color: #fff9f0; /* Màu nền kem nhẹ */ 
    overflow: hidden; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    height: 100%; /* Đảm bảo chiều cao đồng đều */
}

.image-placeholder {
    height: 200px;
    background-color: #e5e5e5; /* Màu xám sáng cho phần giữ chỗ ảnh */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.content {
    padding: 20px;
    background-color: #ffffff; 
    padding-bottom: 30px; 
}

/* Style chữ */
.category { font-size: 1.1em; font-weight: bold; margin-top: 0; margin-bottom: 5px; color: #333; }
.title { font-size: 1.5em; font-weight: bold; margin-top: 0; margin-bottom: 15px; color: #383838; }
.description { font-size: 0.9em; line-height: 1.6; color: #555; }


/* --- B. ĐỊNH VỊ MŨI TÊN SLIDER --- */

/* Đảm bảo chiều rộng 3 cột hoạt động trên desktop, ghi đè CSS Flatsome nếu cần */
@media (min-width: 850px) { 
    .custom-blog-slider .flickity-slider .col.article-slide-item {
        width: 33.333333%;
    }
}

/* Định dạng các mũi tên điều hướng */
.custom-blog-slider .flickity-button {
    background-color: #d8d8d8; /* Màu nền xám cho nút */
    color: #555555;            /* Màu mũi tên */
    opacity: 1;                
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    border-radius: 50%;        /* Nút tròn */
    width: 30px;               
    height: 30px;
    margin: 0; 
}

/* Định vị nút Lùi (Previous) */
.custom-blog-slider .flickity-prev-next-button.previous {
    left: 0px; 
    transform: translateY(-50%) translateX(-50%); 
}

/* Định vị nút Tiến (Next) */
.custom-blog-slider .flickity-prev-next-button.next {
    right: 0px; 
    transform: translateY(-50%) translateX(50%);
}
/* Tắt hiệu ứng di chuyển nút khi hover */
.custom-blog-slider .flickity-button,
.custom-blog-slider .flickity-prev-next-button {
    transition: none !important; /* Không animate */
    transform: none !important;   /* Giữ nguyên vị trí */
}

/* Ghi đè luôn hover để không dịch chuyển */
.custom-blog-slider .flickity-button:hover,
.custom-blog-slider .flickity-prev-next-button:hover {
    transform: none !important;
}


/* --- C. ĐỊNH DẠNG DẤU CHẤM PHÂN TRANG (DOTS) --- */

.custom-blog-slider .flickity-page-dots .dot {
    width: 8px; 
    height: 8px;
    margin: 0 4px; 
    background: #cccccc; 
    border: none;
    opacity: 1;
}

/* Màu dot đang hoạt động (active dot) */
.custom-blog-slider .flickity-page-dots .dot.is-selected {
    background: #000000; 
}
/*E----------header - blog----------*/

/*-- filter Blog--*/
/* --- A. GIAO DIỆN CỘT LỌC (SIDEBAR) --- */

.blog-filter-sidebar .filter-wrapper {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #f0f0f0; /* Viền nhẹ */
}

.filter-title {
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0; /* Đường kẻ dưới tiêu đề */
}

.filter-heading {
    font-weight: bold;
    font-size: 1.1em;
    color: #cc6600; /* Màu cam đậm cho tiêu đề (ví dụ: ĐỘ TUỔI) */
    margin-top: 15px;
    margin-bottom: 10px;
}

.filter-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.filter-list li {
    padding: 5px 0;
}

.filter-item {
    text-decoration: none;
    color: #555;
    display: block;
    padding: 5px 0;
    font-size: 0.95em;
    transition: color 0.2s;
}

/* Style cho mục đang được chọn */
/* .filter-item.active {
    color: #000000;
    font-weight: bold;
    /* Tạo hiệu ứng màu cam ở lề trái (giống ảnh) */
/*    border-left: 3px solid #cc6600; 
    padding-left: 10px;
} */

.filter-item:hover {
    color: #cc6600;
}

/* --- B. CARD BÀI VIẾT (GIỮ NGUYÊN) --- */
/* (Bạn giữ lại CSS cho .article-card, .image-placeholder, v.v. từ câu trả lời trước) */

.post-card-item {
    /* Đảm bảo chiều rộng 33.33% và khoảng cách hoạt động trên desktop */
	flex-basis: unset !important;
    max-width: unset !important;
    width: 30% !important;
    padding: 0 10px !important;
    margin-bottom: 20px !important; /* Thêm khoảng cách giữa các hàng */
	margin-left: 10px !important;
	margin-right: 10px !important;
}

/* Điều chỉnh tiêu đề danh mục trong cột kết quả */
.blog-results-area .category-title {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 20px;
}
/*E-- filter Blog--*/

#footer .footer-menu a {
    line-height: 20px;
    font-size: 11px;
    color: #000000;
    padding: 0;
    margin: 0 0 4px 0 !important;
    min-height: unset;
    position: relative;
	padding-left: 21px;
}

#footer .footer-menu a span {
    position: relative;
}

#footer .footer-menu a:hover {
    color: var(--primary-color) !important;
}

#footer .footer-menu a span:after {
    content: '';
    background: var(--primary-color);
    display: block;
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 1px;
    transition: 0.3s all;
}

#footer .footer-menu a:hover span:after {
    width: 100%
}

#footer .footer-top .footer-address p {
    line-height: 20px;
    font-size: 15px;
     color: rgba(255,255,255,0.6);
    margin: 0 0 15px 0;
    display: flex;
    gap: 10px;
}

#footer .footer-top .footer-address p i {
    color: var(--primary-color);
}

#footer .footer-top .footer-address a {
    line-height: 20px;
    font-size: 15px;
    color: #585e5f;
}

#footer .footer-top .footer-address a:hover {
    color: var(--primary-color)
}

/**category**/
.shop-page-title.category-page-title.page-title {
    display: none;
}

.product-small.col {
    padding: 0;
}

.breadcrumbs {
    padding: 15px 0 !important;
    color: #000;
}

.breadcrumbs p, .breadcrumbs a {
    font-weight: 600;
    font-size: 16px;
    color: #000 !important;
    margin: 0
}

.breadcrumbs span.last {
    color: var(--primary-color) !important;
}

article.breadcrumbs .col {
    padding-bottom: 0 !important
}

.category-entry {
    margin: 30px 0;
}

.category-list a {
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px
}

.category-list {
    overflow: hidden;
    padding-right: 10px;
    padding-left: 10px;
    height: 25px;
    background: var(--primary-color);
    display: inline-block;
    margin: auto;
    border-radius: 8px;
    color: #fff
}

.category-list span:last-child {
    display: none
}

article#header-single h1 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 32px;
    line-height: 1.2
}

article#header-single .post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    justify-content: center
}

article#header-single .post-meta span.time {
    padding-right: 8px;
    border-right: 3px solid #ffc714
}

#header-single .text-left h1 {
    text-align: left
}

#header-single .text-left .post-meta {
    justify-content: start
}

ul.dashboard-links li {
    margin: 0 0 10px 0 !important;
}

.header-support p, .header-support h4 {
    margin: 0;
}

div#masthead .flex-col.hide-for-medium.flex-right {
    width: 450px;
}

.header-support p {
    font-size: 15px;
    font-weight: 500;
    color: #000 !important;
}

.header-support h4 {
    font-size: 16px;
    line-height: 24px;
    color: var(--primary-color) !important;
}
/*==================================================================================*/

/* button product detail */
/* Sửa lỗi Flatsome (WooCommerce) - Buộc các nút nằm cùng hàng */

.woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap; /* cho phép các phần tử xuống dòng */
    gap: 10px;
}

.ux-quantity.quantity.buttons_added {
    flex-basis: 100% !important; /* chiếm toàn bộ chiều ngang */
    order: -1;                   /* đẩy lên đầu nếu cần */
}



/*==================================================================================*/
/**single**/
h1.product-title.product_title.entry-title {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 7px;
}

.product-short-description {
    margin: 20px 0;
}

.product-info .price ins bdi {
    color: #000000;
    font-size: 30px
}

.product-info .price del {
    font-size: 18px;
    margin-left: 5px;
}

.product-summary .woocommerce-Price-currencySymbol {
    font-size: unset !important;
    vertical-align: unset !important;
}

.single_add_to_cart_button {
    font-size: 16px !important;
    background: #fff !important;
    border-radius: 5px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    opacity: 1 !important;
    padding: 0px 30px;
    margin-right: 5px;
    margin-bottom: 0;
    color: #000000 !important;
border: 2px solid #000000 !important;
}

button.button.buy_now_button {
    display: inline-block;
    overflow: hidden;
    clear: both;
    padding: 9px 0;
    border-radius: 4px;
    font-size: 18px;
    line-height: normal;
    text-transform: uppercase;
    
    text-align: center;
    background: #fff !important;
color: #000000 !important;
border: 2px solid #000000 !important;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fd6e1d), to(#f59000));
    background: -webkit-linear-gradient(top, #f59000, #fd6e1d);
    background: -moz-linear-gradient(top, #f59000, #fd6e1d);
    background: -ms-linear-gradient(top, #f59000, #fd6e1d);
    background: -o-linear-gradient(top, #f59000, #fd6e1d);
/*     margin: 0 0 20px; */
    text-decoration: none;
/*     border-bottom: 0 !important; */
    max-width: 40%;
    width: 100%;
}

button.button.buy_now_button span {
    font-size: 14px;
    width: 100%;
    text-transform: none;
    font-weight: normal;
}

p#billing_last_name_field {
    width: 100%;
}

.woocommerce-input-wrapper input, .woocommerce-input-wrapper .select2-selection, .woocommerce-input-wrapper textarea {
    border-radius: 5px !important;
    box-shadow: none !important;
    font-size: 15px !important;
}

p#billing_address_1_field {
    width: 100%;
}

.product-section {
    border: 0px !important;
}

.product-section.description ul {
    margin-left: 25px;
}

.dark .breadcrumbs a {
    color: #fff !important;
}

/**category**/
.category-item {
    transition: 0.3s ease-in-out;
}

.category-item .category-thumbnail {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    width: 100%;
    overflow: hidden;
    height: 240px;
}

.category-item .category-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease-in-out;
}

.category-item:hover .category-thumbnail img {
    transition: 0.3s ease-in-out;
    transform: scale(1.1);
}

.category-item .category-title {
    margin: 20px 0 0;
    text-align: center;
}

.category-item .category-title a {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #000;
    text-transform: uppercase;
}

.category-item .category-title a:hover {
    color: var(--primary-color)
}

span.irs.irs--round.js-irs-0 {
    width: 81% !important;
    left: 20px;
}

.price-slider.slider {
    overflow: unset;
}

.product-info .price-wrapper {
    margin: 30px 0;
}

.product-images .onsale {
    background: #0000 radial-gradient(circle, #fb7a01, #fea914) repeat scroll 0 0 !important;
    border-radius: 0 10px 10px 0;
    padding: 0 15px 0 10px;
    margin: 0;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    font-size: 110%;
    font-weight: 500;
    color: #fff;
}

form.cart {
    margin: 30px 0 0 0;
}

.product-info {
    padding-top: 0 !important;
}

.input-object, .textarea-object {
    border-radius: 5px !important;
    box-shadow: none !important;
    font-size: 15px !important;
}

.btnObject {
    border-radius: 5px !important;
    box-shadow: none !important;
}

.phoicanh {
    margin: 0 !important;
}

.form-register {
    position: relative;
}

.input_footer {
    background: transparent !important;
    border: 1px solid #242424 !important;
    box-shadow: unset !important;
    margin: 0;
	height:45px !important;
	padding-left:35px !important
}

.register-icon p {
    margin: 0 !important;
}

.register-icon i {
    color: #fff;
}

.register-icon {
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}

.button_form {
    border-radius: 0 !important;
    margin: 0px !important;
    position: absolute;
    top: 0;
    right: 0;
    height: 45px;
}

form.wpcf7-form.init {
    margin: 0 !important;
}
/* ========================= */
/* LIVE SEARCH – GIAO DIỆN  */
/* ========================= */

/* Container chính */
.dtlp-ajax-search-results {
    position: absolute;
    top: 100%;
    left: 35px;
    right: 0;
    z-index: 9999;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: none;
    max-height: 420px;
/*     overflow-y: auto; */
	width:400px;
    padding: 12px 15px;
}

/* Trạng thái loading */
.dtlp-ajax-search-results.loading {
    opacity: 0.6;
    pointer-events: none;
}
.dtlp-ajax-search-results.loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 28px; height: 28px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Keyframe loading */
@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Không tìm thấy kết quả */
.dtlp-no-results {
    padding: 10px;
    text-align: center;
    color: #666;
    font-style: italic;
}

/* ========================= */
/* TỪNG SẢN PHẨM KẾT QUẢ     */
/* ========================= */
.dtlp-search-item-wrapper.dtlp-item-link-flex {
    display: flex;
    align-items: center;
    gap: 14px; /* tăng khoảng cách giữa ảnh và phần thông tin */
    background: #fff;
/*     border: 1px solid #eee;
    border-radius: 10px; */
    padding: 10px 12px;
    margin-top: 12px; /* tăng khoảng cách giữa các sản phẩm */
    transition: all 0.25s ease;
}
.dtlp-search-item-wrapper.dtlp-item-link-flex:hover {
    background: #f9f9f9;
    border-color: #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Ảnh sản phẩm */
.dtlp-product-thumb-col {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 8px;
}
.dtlp-product-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Thông tin sản phẩm */
.dtlp-product-info-col {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Tên và giá */
.dtlp-item-details {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
}
.dtlp-item-title {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dtlp-item-price {
    color: #555;
    font-size: 13px;
}
.dtlp-item-price ins {
    text-decoration: none;
    color: #c00;
    font-weight: bold;
}
.dtlp-item-price del {
    color: #aaa;
    font-size: 12px;
    margin-left: 5px;
}

/* Trạng thái còn/hết hàng */
.dtlp-item-stock-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.dtlp-item-stock-status.out-of-stock {
    color: #c00;
    background: #ffeaea;
}

/* Nút hành động */
.dtlp-item-actions {
    margin-left: 10px;
}
.dtlp-add-to-cart-btn,
.dtlp-view-details-btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s;
    border: 1px solid transparent;
}

/* Nút mua hàng */
.dtlp-add-to-cart-btn {
    background: #00874c;
    border-color: #006b3d;
    color: #fff;
}
.dtlp-add-to-cart-btn:hover {
    background: #00a05a;
}

/* Nút xem */
.dtlp-view-details-btn {
    background: #f0f0f0;
    border-color: #ccc;
    color: #333;
}
.dtlp-view-details-btn:hover {
    background: #e5e5e5;
}

/* footer bên trái - trên */
/* CONTAINER CHUNG */
.lala-club-container {
    display: flex; /* Bật Flexbox để tạo bố cục 2 cột */
    gap: 40px; /* Khoảng cách giữa 2 cột */
    padding: 40px;
    background-color: #fff; /* Nền trắng */
    max-width: 1200px;
    margin: 0 auto;
}

/*********footer bên - CỘT BÊN TRÁI -trên *********/
.lala-club-left-col {
    flex: 1; /* Chiếm phần lớn không gian */
}

/* PHẦN CHỮ GIỚI THIỆU */
.lala-club-intro-text p {
    font-size: 1.4em;
    line-height: 1.5;
    margin-bottom: 20px;
}

.lala-club-intro-text .privilege-summary {
    font-size: 1.7em;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 40px;
}
/* Thiết lập mặc định cho tất cả các màn hình (Có thể đã có) */


/* ---------------------------------------------------- */
/* CSS CHO MOBILE (Màn hình nhỏ hơn hoặc bằng 767px) */
/* ---------------------------------------------------- */
@media (max-width: 767px) {
    /* Điều chỉnh kích thước chữ và khoảng cách trong khối chung */
    .lala-club-intro-text p {
        font-size: 14px; /* Giảm kích thước chữ để vừa vặn hơn */
        line-height: 1.4; /* Điều chỉnh khoảng cách dòng */
        margin-bottom: 5px; /* Giảm khoảng cách giữa 2 đoạn p */
    }

    /* Điều chỉnh cụ thể cho tiêu đề đầu tiên */
    .lala-club-intro-text .privilege-summary:first-child strong {
        font-size: 16px; /* Giữ tiêu đề nổi bật hơn một chút */
    }

    /* Đảm bảo nội dung căn giữa trên mobile */
    .lala-club-intro-text {
        text-align: center !important;
        padding: 5px 14px; /* Thêm padding ngang để nội dung không chạm mép màn hình */
    }
}
/* KHỐI ƯU ĐÃI (MÀU CAM) */
.privilege-block {
    color: #fff;
    padding: 15px 25px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 36px; /* Bo tròn góc */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Tạo bóng nhẹ */
}

.orange-bg {
    /* Sử dụng màu cam từ ảnh (ví dụ) */
    background-color: #e97b23; 
}

/********footer bên phải - trên ********/
/* ========================================= */
/* 2. CỘT BÊN PHẢI (FORM ĐĂNG KÝ) */
/* ========================================= */

.lala-club-right-col {
    flex: 0 0 350px; /* Cố định chiều rộng cột phải */
    padding: 0; /* Loại bỏ padding ở đây */
}

/* KHỐI BAO BỌC MÀU TRẮNG LỚN */
.right-content-wrapper {
    background-color: #fff; /* Nền trắng lớn */
    padding: 30px 25px; /* Padding bên trong khối trắng */
    border-radius: 12px; /* Bo tròn góc lớn */
    /* Bóng đổ nhẹ nhàng, nổi bật trên nền xám nhạt */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); 
    border: 1px solid #eee; /* Viền mỏng để tạo cảm giác khối */
    height: 100%; /* Đảm bảo chiều cao bằng với cột bên trái nếu cần */
	width: 605px;
	white-space: nowrap;
    overflow-x: auto;
}

/* KHỐI HOẠT ĐỘNG GẦN ĐÂY (SOCIAL PROOF) */
.recent-activity-block {
    /* Loại bỏ nền trắng, padding và bóng đổ cũ */
    background-color: transparent; 
    padding: 0; 
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin-bottom: 25px; /* Giữ khoảng cách giữa 2 phần */
}

.activity-title {
    /* Giữ nguyên style này */
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 1px dashed #eee; 
    padding-bottom: 10px;
}

/* KHỐI FORM ĐĂNG KÝ CHÍNH */
.form-register-block {
    /* Loại bỏ style nền trắng cũ */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
/* NÚT SUBMIT */
.submit-button {
    width: 100%;
    padding: 15px;
    background-color: #000; /* Nền Đen */
    color: #fff;
    
    /* 🛠️ BỔ SUNG VIỀN ĐEN */
     width: 30%;
    padding: 0px;
    background-color: #000;
    color: #fff;
    border: 3px solid #000;
    border-radius: 40px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.2s;
}

.submit-button:hover {
    /* Đổi màu nền khi hover, nhưng giữ nguyên viền đen */
    background-color: #333; 
}

/******** Thanh ngang 2 màu cam xen kẽ **********/
.color-bar {
    width: 100%;
    height: 12px;
    margin: 0;
    padding: 0;

    /* Tạo hiệu ứng 2 màu lặp lại liên tục */
    background-image: repeating-linear-gradient(
        to right,
        #ff8500,           /* Màu 1 */
        #ff8500 116px,      /* Độ rộng 1 khối màu */
        #ea7b23 116px,      /* Màu 2 bắt đầu */
        #ea7b23 232px       /* Độ rộng tổng của 2 khối = chu kỳ lặp */
    );
}


/*+++++++++++++++++++++++++ paging ++++++++++++++++++++++++++++++*/
/* CONTAINER PHÂN TRANG */
.pagination {
    text-align: center;
    margin: 30px 0;
}

.pagination .page-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 8px; /* Khoảng cách giữa các nút */
}

.pagination .page-numbers li {
    display: inline-block;
}

/* KIỂU DÁNG NÚT (HÌNH OVAL/VIÊN THUỐC) */
.pagination .page-number,
.pagination .page-number.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: auto; /* Chiều rộng tự động theo nội dung */
    min-width: 38px; /* Đảm bảo chiều rộng tối thiểu */
    height: 38px; /* Chiều cao */
    padding: 0 10px; /* Padding ngang để tạo độ dài oval */
    
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    
    border-radius: 9999px; /* Tạo hình oval (viên thuốc) */
    
    background-color: #f7f7f7; /* Nền xám nhạt */
    border: 3px solid #f7f7f7; /* Viền trùng màu nền */
    transition: all 0.2s ease;
    box-shadow: none; 
}

/* NÚT HIỆN TẠI (CURRENT) */
.pagination .page-number.current {
    /* Giữ nguyên màu nền xám nhạt */
    background-color: #f7f7f7; 
    
    /* Chỉ thêm viền đen/xám đậm */
    border-color: #333; 
    color: #333; 
    font-weight: 700;
    box-shadow: none;
}

/* NÚT HOVER */
.pagination .page-number:hover:not(.current) {
    background-color: #e0e0e0; /* Nền xám đậm hơn khi hover */
    border-color: #e0e0e0;
}

/* DẤU ... (nếu có) */
.pagination .page-number.dots {
    background: none;
    border: none;
    cursor: default;
    font-size: 20px;
    font-weight: 400;
    padding: 0 5px; 
}


/*+++++++++++++++++++++++++ my_custom_registration_form ++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++ my_custom_registration_form ++++++++++++++++++++++++++++++*/
/* Custom CSS cho Biểu mẫu Đăng ký */
.custom-registration-wrapper input[type="email"],
.custom-registration-wrapper input[type="password"],
.custom-registration-wrapper input[type="text"] {
    /* Thiết lập kiểu dáng cho các ô nhập liệu */
    width: 100%; /* Chiếm toàn bộ chiều rộng */
    padding: 15px 20px; /* Đệm bên trong */
    border: 1px solid #e0e0e0; /* Đường viền mỏng, xám nhạt */
    border-radius: 30px; /* Góc bo tròn lớn */
    background-color: #ffffff; /* Nền trắng */
    font-size: 16px; /* Kích thước chữ */
    outline: none; /* Bỏ viền khi focus mặc định */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); /* Bóng mờ nhẹ để tạo chiều sâu */
    transition: border-color 0.3s ease;
    
    /* Đảm bảo chiều cao đồng nhất như trong ảnh */
    height: 50px; 
    line-height: 20px;
}

.custom-registration-wrapper input:focus {
    /* Hiệu ứng khi người dùng click vào */
    border-color: #a0a0a0;
}

/* Kiểu dáng cho Nút Đăng Ký (giống như ảnh) */
.custom-registration-wrapper .button-register {
   /* Loại bỏ kiểu dáng nút Flatsome mặc định nếu cần và áp dụng kiểu mới */
    display: block;
    width: 30%; /* Chiều rộng 30% */
    
    /* 💥 PHẦN SỬA ĐỔI QUAN TRỌNG: Căn giữa khối */
    /* Đặt margin trên/dưới là 20px và margin trái/phải là 'auto' để căn giữa */
    margin: 20px auto 0 auto; 
    /* Hoặc đơn giản hơn: margin: 20px auto; (nếu không cần margin dưới) */

    padding: 0px 20px; /* Thêm lại padding dọc để nút có chiều cao */
    
    /* Các thuộc tính khác (giữ nguyên hoặc tối ưu) */
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-radius: 99px; /* Đặt lại thành 99px để có hình bầu dục hoàn hảo */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-registration-wrapper .button-register:hover {
    background-color: #333333; /* Hơi xám khi di chuột qua */
}

/* Khoảng cách giữa các trường */
.custom-registration-wrapper p {
    margin-bottom: 15px;
}




/* ---------------------------------------------------- */
/* CSS CHO MOBILE (Màn hình nhỏ hơn hoặc bằng 767px) */
/* ---------------------------------------------------- */
@media (max-width: 767px) {
    /* 1. Đảm bảo Form đăng ký và Box thông tin chiếm toàn bộ chiều rộng (tránh bị nhỏ quá) */
    .custom-registration-wrapper,
    .user-info-box {
        max-width: 100%;
        padding: 0 15px; /* Thêm padding ngang để nội dung không chạm mép màn hình */
        box-sizing: border-box;
    }
    
    /* 2. Cải thiện hiển thị các trường Input trong Form đăng ký */
    .custom-registration-wrapper form p {
        margin-bottom: 15px; /* Giảm khoảng cách giữa các trường */
    }

    /* Đảm bảo Label và Input luôn chiếm toàn bộ chiều rộng 100% */
    .custom-registration-wrapper form label {
        display: block; /* Đảm bảo label chiếm hết dòng */
        margin-bottom: 5px; /* Khoảng cách giữa label và input */
        font-size: 14px; /* Giảm kích thước font label */
    }

    .custom-registration-wrapper form input[type="email"],
    .custom-registration-wrapper form input[type="password"],
    .custom-registration-wrapper form input[type="text"],
    .custom-registration-wrapper form input[type="date"] {
        width: 100%; /* Chiếm toàn bộ chiều rộng */
        padding: 10px;
        font-size: 16px; /* Giữ font size lớn hơn để dễ thao tác trên mobile */
        height: auto;
        box-sizing: border-box; /* Quan trọng để padding không làm Input tràn ra ngoài */
    }

    /* 3. Nút Đăng ký (Submit) */
    .custom-registration-wrapper .button-register {
        width: 100%; /* Nút đăng ký chiếm hết chiều rộng màn hình */
        padding: 12px;
        font-size: 16px;
        margin-top: 10px; /* Thêm khoảng cách phía trên nút */
    }

    /* 4. Box Thông tin tài khoản (Khi đã đăng nhập) */
    .user-info-box h3 {
        font-size: 18px; /* Điều chỉnh kích thước tiêu đề */
        margin-bottom: 15px;
    }
    .user-info-box p {
        font-size: 15px; /* Kích thước font chữ thông tin */
        line-height: 1.6;
    }
.register-title {
        text-align: center; /* Căn giữa tiêu đề */
        font-size: 20px;     /* Giảm kích thước chữ để vừa với màn hình nhỏ */
        margin-top: 20px;    /* Khoảng cách trên */
        margin-bottom: 20px; /* Khoảng cách dưới */
        padding: 0 15px;     /* Thêm padding ngang để tiêu đề không dính vào mép màn hình */
    }
.right-content-wrapper {

	width: 380px;

}
.lala-club-right-col {
        width: 100%; /* Đảm bảo khối chiếm toàn bộ chiều rộng có sẵn */
        /* Nếu khối này bị float hoặc có width cố định ở CSS desktop,
           cần thêm các lệnh sau để nó hiển thị đúng trên mobile */
        float: none;
        margin: 0 auto; 
    }

    /* 2. Xử lý DIV con bên trong */
    .lala-club-right-col > div[style] {
        /* Ghi đè các thuộc tính cố định width và padding */
        width: 100% !important; /* Quan trọng: Đặt width về 100% */
        height: auto !important; /* Đặt height về auto */
        padding: 20px 15px !important; /* Giảm padding trên dưới và đặt padding ngang 15px */
        
        /* Đảm bảo border-radius vẫn giữ nguyên */
        border-radius: 12px;
        box-sizing: border-box; /* Quan trọng để padding được tính vào trong width 100% */
    }

    /* 3. Đảm bảo Tiêu đề đăng ký được căn chỉnh (như đề xuất trước đó) */
    .form-register-block .register-title {
        font-size: 20px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
p[style*="background-color: #ff8500"] {
        /* Ghi đè các thuộc tính cố định */
        width: 90% !important; /* Đặt chiều rộng khoảng 90% màn hình để có đệm hai bên */
        max-width: 90% !important; 
        
        font-size: 1.2rem !important; /* Giảm kích thước chữ để vừa vặn hơn */
        height: auto !important; /* Để chiều cao tự động co giãn theo nội dung mới */
        line-height: 1.2; /* Tăng line-height nhẹ để văn bản không bị dính */
        padding: 8px 15px !important; /* Tăng padding trên dưới để tạo không gian */
        margin: 10px auto 10px !important; /* Đảm bảo căn giữa và tạo khoảng cách */
        
        /* Các thuộc tính khác (nếu cần thiết) */
        display: block !important; /* Thay vì inline-block, dùng block để margin auto hoạt động tốt hơn */
    }
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*=========================================================================
    GALLERY SẢN PHẨM - FLATSOME CHILD
  ========================================================================*/

/* Wrapper chính */
.variant-gallery-wrapper {
    margin-bottom: 20px;
}

/*==================== BỐ CỤC 2 CỘT ====================*/
.variant-gallery-layout {
    display: flex;
    gap: 20px;
}

/*------- CỘT TRÁI: THUMBNAILS -------*/
.variant-gallery-thumbs-col {
    width: 110px;
    flex-shrink: 0;
}

.variant-gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.variant-gallery-thumbs .thumb-item {
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
}

.variant-gallery-thumbs .thumb-item img {
    width: 100%;
    display: block;
    border-radius: 6px;
}

/* ACTIVE hoặc hover thumbnail */
.variant-gallery-thumbs .thumb-item.active,
.variant-gallery-thumbs .thumb-item:hover {
    border-color: #ff5b5b;
}

/*------- CỘT PHẢI: BIG IMAGES -------*/
.variant-gallery-big-col {
    flex: 1;
    position: relative;
}

.variant-gallery-images {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.variant-gallery-images .image-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/*==================== SWATCH ATTRIBUTE BUTTONS ====================*/
.variant-swatches {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.variant-swatch {
    padding: 6px 14px;
    border: 1px solid #ddd;
    cursor: pointer;
    background: #fff;
    border-radius: 6px;
    transition: all 0.2s;
}

.variant-swatch:hover {
    border-color: #999;
}

.variant-swatch.active {
    border-color: #000;
    background: #f3f3f3;
}

/*+++++++++++################# bổ sung ALL SP #################++++++++++++++++++++*/
/* ============================
   BỘ LỌC – STYLE GIỐNG ẢNH
   ============================ */
.filter-bar {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

/* Tiêu đề "BỘ LỌC" */
.filter-bar h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    margin-right: 50px;
    white-space: nowrap;
}

/* Hàng chứa Tuổi / Khoảng giá / Nhóm SP */
.filter-row {
    display: flex;
    align-items: center;
    gap: 60px; /* Giống khoảng cách trong ảnh */
    white-space: nowrap;
}

/* Từng nhóm */
.filter-group {
    position: relative;
	right: 150%;
}

/* Label chính */
.filter-group > h4,
.filter-group > h4 a {
    font-size: 20px;
    font-weight: 400;
    color: #7c7c7c;
    text-decoration: underline;
    text-underline-offset: 4px;
    margin: 0;
    cursor: pointer;
    transition: 0.2s;
}

/* Hover đổi màu sang đen */
.filter-group:hover > h4 a,
.filter-group:hover > h4 {
    color: #000;
}

/* ================================
   MENU CON – ẨN mặc định
   ================================ */
.filter-group .filter-list {
    display: none;
    position: absolute;
    top: 32px;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    z-index: 10;
}

/* Hiện khi hover */
.filter-group:hover .filter-list {
    display: block;
}

/* Item */
.filter-list li a {
    display: block;
    padding: 0px 15px;
    font-size: 16px;
    color: #555;
    transition: 0.2s;
}

.filter-list li a:hover {
    background: #f3f3f3;
    color: #000;
}

/* Active */
.filter-list li a.active {
    font-weight: 600;
    color: #000;
}


/*+++++++++++##################################++++++++++++++++++++*/

/* Ghi đè padding cho các cột (col, columns, gallery-item) chỉ trên trang có ID là 12537 */
.page-id-12537 .col.padding-0,
.page-id-12537 .columns.padding-0,
.page-id-12537 .gallery-item.padding-0, {
    /* Đặt tất cả padding về 0 */
    padding: 0 !important; 
}
/*+++++++++++##################################++++++++++++++++++++*/
/*+++++++++++################## sản phẩm slide ################++++++++++++++++++++*/
/* Container cha (Quan trọng: Phải có position: relative) */
.best-seller-section {
    position: relative; 
    /* Các thuộc tính khác (nền, padding...) */
    /* background-color: #f7f7f7; */
    /* padding-top: 40px; */ 
    /* Đảm bảo có đủ padding phía trên để header không bị cắt */
}

/* Kiểu dáng cho phần BEST SELLER */
.best-seller-header {
    /* 1. Vị trí */
    position: absolute;
    top: 0px; /* Đẩy lên trên container cha một chút */
    left: 0;

    /* 2. Màu sắc và Chữ */
    background-color: #ff8c00; /* Màu cam đậm */
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase; /* Đảm bảo chữ viết hoa */

    /* 3. Kích thước và Padding */
    padding: 10px 20px;
    display: inline-block; /* Chỉ chiếm không gian nội dung */

    /* 4. Góc bo và Hiệu ứng */
    border-top-left-radius: 20px; /* Bo góc trên trái */
    /* Bo góc dưới phải để tạo hiệu ứng "kéo dài" ra ngoài */
    border-bottom-right-radius: 30px; 

    /* Tạo đổ bóng nhẹ để trông nổi bật hơn */
/*     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;  */
/* Đảm bảo nó nằm trên các thành phần khác */
}
/**********************************************************************/
.custom-registration-wrapper input[type="email"], .custom-registration-wrapper input[type="password"], .custom-registration-wrapper input[type="text"],.custom-registration-wrapper input[type="date"]{
	width: 100%;
    padding: 15px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 30px;
    background-color: #ffffff;
    font-size: 16px;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s 
ease;
    height: 50px;
    line-height: 20px;
}
/**********************************************************************/
/* ============================================== */
/* 1. HIỂN THỊ TẤT CẢ CÁC CẤP MENU CON KHI HOVER */
/* ============================================== */

/* Cấp 1: Hiển thị mega-sub-menu của mục cha khi hover */
.mega-menu-item:hover > .mega-sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Cấp 2, 3, v.v.: Buộc menu con cấp sâu hơn hiển thị khi di chuột vào mục menu con */
.mega-sub-menu .mega-menu-item:hover > .mega-sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* ============================================== */
/* 2. LOẠI BỎ DẤU MŨI TÊN (INDICATOR) */
/* ============================================== */

.mega-indicator {
    display: none !important;
}

.mega-menu-link strong.has-dropdown:after {
    content: none !important;
}

.mega-menu-link strong.has-dropdown {
    padding-right: 0 !important;
}


/* ============================================== */
/* 3. BỔ SUNG BORDER-RADIUS (ĐÃ SỬA LỖI OVERFLOW) */
/* ============================================== */

/* Áp dụng border-radius cho khung bao ngoài của menu con */
.mega-menu-item > .mega-sub-menu {
    /* Đặt bo góc cho khung chứa tổng thể */
    border-radius: 20px !important;
    /* KHÔNG sử dụng overflow: hidden tại đây */
}

/* Quan trọng: Áp dụng bo góc cho các phần tử bên trong */
/* Nếu Mega Menu sử dụng một panel/div bên trong để tạo màu nền */
/* Hoặc áp dụng cho menu con cấp 2 (ví dụ: khung 'Tuổi', 'Nhóm sản phẩm') */
.mega-sub-menu > .mega-menu-item > .mega-sub-menu,
.mega-sub-menu > .mega-menu-item {
    border-radius: 20px !important;
}

/* Nếu plugin Mega Menu của bạn sử dụng một phần tử wrapper bên trong, hãy nhắm vào nó */
/* Đây là selector phổ biến để áp dụng border-radius cho panel Mega Menu */
.mega-sub-menu, 
.mega-sub-menu .mega-sub-menu {
    border-radius: 20px !important;
}

/* Cắt góc menu con cấp sâu hơn */
.mega-sub-menu .mega-sub-menu {
    border-radius: 20px !important;
}
/**********************************************************************/

.excerpt-content, .description {
    /* Quan trọng: Bắt buộc để sử dụng các thuộc tính cắt văn bản dưới đây */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* GIỚI HẠN VĂN BẢN ĐÚNG .. DÒNG */
    -webkit-box-orient: vertical;
    
    /* Thuộc tính chung để ẩn văn bản thừa và hiển thị dấu ba chấm */
    overflow: hidden;
    text-overflow: ellipsis; 
}
/************************voucher - cart***********************/
.wc-voucher-box {
    padding: 20px;
    background: #fafafa;
    border-radius: 12px;
    margin-bottom: 25px;
}

.wc-voucher-title {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
}

.wc-voucher-list {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.wc-voucher-item {
    min-width: 260px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e2e2e2;
    padding: 15px;
    line-height: 1.6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.wc-voucher-code {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
}

.wc-voucher-desc,
.wc-voucher-exp {
    font-size: 14px;
    color: #555;
}

.wc-apply-voucher {
    margin-top: 10px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: black;
    color: white;
    cursor: pointer;
}

/***************************************Bổ sung mobile *********************************************************************/
/* Custom CSS cho phần khám phá độ tuổi trên Mobile */
@media (max-width: 549px) { /* 549px thường là breakpoint cho mobile của Flatsome */
    .mobile-age-boxes .row {
        /* Đảm bảo row sử dụng Flexbox hoặc tương tự để các cột có thể nằm cạnh nhau */
        display: flex;
        flex-wrap: wrap;
        margin: 0 -5px; /* Giảm khoảng cách để bù đắp padding/margin cho các cột */
    }

    .mobile-age-boxes .row > [class*="col"] {
        /* Thiết lập chiều rộng 50% cho mỗi cột trên màn hình nhỏ */
        flex: 0 0 50%; /* Không co, không giãn, chiếm 50% */
        max-width: 50%;
        padding-left: 5px; /* Thêm padding/margin nhỏ để tạo khoảng cách giữa 2 cột */
        padding-right: 5px;
    }

    /* Tùy chọn: Điều chỉnh kích thước văn bản hoặc khoảng cách nếu cần */
    .mobile-age-boxes .ux-image-box {
        margin-bottom: 20px; /* Thêm khoảng cách giữa các hàng trên mobile */
    }
.mobile-review-section .row {
        /* Đảm bảo row sử dụng Flexbox để kiểm soát bố cục */
        display: flex;
        flex-wrap: wrap;
        margin-left: -5px; /* Điều chỉnh margin để tạo khoảng cách phù hợp */
        margin-right: -5px;
    }

    /* CSS cho Cột Video (span=6) */
    .mobile-review-section .row > .col:nth-child(2) {
        /* Cột thứ 2 là video, giữ nguyên 100% chiều rộng */
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* CSS cho Cột Feedback/Review (span=3) */
    /* Chúng ta nhắm mục tiêu từ cột thứ 3 trở đi (.col:nth-child(n+3)) */
    .mobile-review-section .row > .col:nth-child(n+3) {
        /* Thiết lập chiều rộng 50% cho mỗi cột feedback trên màn hình nhỏ */
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 5px; /* Thêm padding/margin nhỏ để tạo khoảng cách */
        padding-right: 5px;
        margin-bottom: 15px; /* Thêm khoảng cách giữa các hàng feedback */
    }

    /* Tùy chọn: Điều chỉnh kích thước font chữ trong feedback để vừa hơn */
    .mobile-review-section .row > .col:nth-child(n+3) .ux_html {
        font-size: 0.85em;
    }



/* === 1. Tối ưu Cột Liên hệ & Số điện thoại === */
    
    /* Căn giữa nội dung văn bản và tạo khoảng cách giữa hai cột chính khi chúng xếp chồng */
    .mobile-footer-icons {
        text-align: center;
        margin-bottom: 20px; 
    }

    /* Ghi đè cấu trúc cột lồng nhau (span="1" và span="10") */
    .mobile-footer-icons .row_inner {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .mobile-footer-icons .footer-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Tối ưu kích thước font chữ cho các đoạn văn bản trong cột liên hệ */
    .mobile-footer-icons .footer-col p, 
    .mobile-footer-icons .footer-col div {
        font-size: 1em; 
        line-height: 1.5; 
    }
/* Sử dụng !important để đảm bảo ghi đè width: 100% của theme */
  .col.medium-4.large-4 {
    width: 22% !important;
    max-width: 22% !important;
    flex: 0 0 22% !important;
}
  .col.medium-4.large-4.small-12 {
    width: 100% !important;
 max-width: 100% !important;
    flex: 0 0 100% !important;

}
.product-small .box-image {
    
    height: 145px;
}
.product-filter-block .product-small .box-image {
        height: 169px;
    }
    /* Hoặc tốt hơn là nhắm mục tiêu chính xác: */
    .mobile-footer-icons .row_inner > .col_inner {
        flex: 0 0 25% !important; /* Dùng 25% để dễ tính toán hơn */
        max-width: 25% !important;
    }
    /* === 2. Gộp 6 Icon Mạng xã hội vào 1 Hàng Lớn === */

    /* Bắt đầu nhắm mục tiêu vào cột lớn thứ 2 (chứa icon) */
    .mobile-footer-icons:nth-of-type(2) {
        display: flex; /* Biến cột lớn thành Flex Container */
        flex-wrap: wrap;
        padding: 0 !important; 
        margin: 0 !important; 
    }

    /* Buộc 2 hàng icon (row_inner) phải nằm cạnh nhau, mỗi hàng chiếm 50% */
    .mobile-footer-icons:nth-of-type(2) > .row_inner {
        flex: 0 0 50%; /* Mỗi row_inner chiếm 50% chiều rộng của cột lớn */
        max-width: 50%;
        margin: 0 !important; 
        padding: 0 5px; 
        
        display: flex; /* Đảm bảo nội dung trong row_inner vẫn là flex */
        flex-wrap: wrap;
        justify-content: space-around; /* Căn đều 3 icon */
    }

    /* Ẩn khoảng cách giữa hai hàng icon (nếu có) */
    .mobile-footer-icons:nth-of-type(2) > .gap {
        display: none !important;
    }

    /* Buộc mỗi icon chiếm 33.33% chiều rộng để hiển thị 3 icon/hàng trong không gian 50% */
    .mobile-footer-icons .row_inner.collapse > .col_inner {
        flex: 0 0 33.33%;
        max-width: 33.33%;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center; 
        margin-bottom: 10px; 
    }
    
    /* === 3. Sửa lỗi Icon Bị Phóng To (Ghi đè .box-image img) === */
    
    /* Ghi đè quy tắc .box-image img và giới hạn kích thước ảnh tối đa */
    .mobile-footer-icons .ux_image_box img,
    .mobile-footer-icons .box-image img { 
        width: auto !important; 
        max-width: 80px !important; /* Giới hạn kích thước tối đa (dùng !important để ghi đè) */
        height: auto;
        display: block;
        margin: 0 auto; 
    }

    /* Ghi đè thêm cho khung chứa ảnh */
    .mobile-footer-icons .ux_image_box,
    .mobile-footer-icons .box-image {
        width: auto !important;
        max-width: 80px;
        margin: 0 auto;
    }

/* Nhắm mục tiêu chính xác vào class chứa tiêu đề */
    .footer-title {
        /* Ghi đè kích thước font chữ 35px trên màn hình nhỏ */
        font-size: 24px !important; /* Hoặc 1.5rem, tùy theo sở thích của bạn */
        
        /* Đảm bảo tiêu đề được căn giữa trên mobile */
       
        
        /* Thêm khoảng cách nếu cần (tùy chọn) */
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* Đảm bảo phần tử chứa (.footer-top) không có lề ngang quá lớn */
    .footer-top {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 20px;
    }
/* Nhắm mục tiêu vào div chứa nội dung văn bản */
    .footer-top > div {
        /* Ghi đè kích thước font chữ 21px trên màn hình nhỏ */
        font-size: 16px !important; /* Đặt kích thước font hợp lý hơn cho mobile */
        line-height: 1.5; /* Giữ khoảng cách dòng dễ đọc */
    }
}
/* 1. CSS mặc định (Desktop/Màn hình lớn) */
.trust-header-box {
    text-align: center;
    color: black;
    font-size: 2rem; /* Kích thước font chữ lớn */
    background-color: #ffffff;
    width: 600px; /* Chiều rộng cố định cho desktop */
    height: 60px;
    font-weight: bold;
    padding: 0px 0px; /* Lưu ý: Padding 0px 0px có thể cần điều chỉnh nếu bạn muốn chữ cách lề trên/dưới */
    border-radius: 99px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block; /* Nên dùng display: block khi dùng margin: auto */
    margin: 20px auto; /* Thêm margin trên dưới cho dễ nhìn */
    line-height: 60px; /* Thêm line-height bằng height để căn giữa theo chiều dọc */


}

/* 2. CSS Responsive cho Mobile */
@media (max-width: 650px) { /* Áp dụng khi màn hình nhỏ hơn 650px */
    .trust-header-box {
        /* Ghi đè các thuộc tính để tối ưu cho mobile */
        
        /* Thay đổi chiều rộng: chiếm gần hết màn hình, có khoảng cách lề */
        width: 90%;
        max-width: 90%; /* Đảm bảo không vượt quá 90% */
        
        /* Giảm kích thước font chữ */
        font-size: 1.2rem; 
        
        /* Giảm chiều cao của box */
        height: 45px;
        line-height: 45px; /* Cập nhật căn giữa dọc */
        
        /* Điều chỉnh margin để có khoảng cách tốt hơn trên mobile */
        margin: 15px auto;
        
        /* Giảm box-shadow để trông nhẹ nhàng hơn trên mobile (tùy chọn) */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}