/*
Theme Name: M4H FURNITURE NEW
Description: Made4home template
Author: UX Themes
Template: flatsome
Version: 3.5
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.woocommerce-notices-wrapper,
.woocommerce-message,
a.button.open-video.is-outline.circle.icon.button.product-video-popup.tip-top.tooltipstered {
    display: none !important;
}

.product-footer .woocommerce-tabs,
.product-main {
    padding: 0 !important;
}

/*
 * Flatsome can output its typography CSS after the child stylesheet (notably
 * when its Google Fonts request is disabled).  `html body` is deliberately
 * more specific than Flatsome's `body` rule so the locally hosted font stays
 * the site's default in either configuration.
 */
/* html body {
    font-family: 'Be Vietnam Pro', Tahoma, sans-serif !important;
    font-size: 14px;
    line-height: 1.4;
} */

html body :is(button, input, select, textarea) {
    font-family: inherit;
}

.nav-center {
    justify-content: space-between !important;
}

.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    font-size: 14px;
}

.ux-menu-link__link {
    font-size: 14.5px;
    display: contents;
}

.nav-size-medium>li>a {
    font-size: 15px;
    font-weight: 500;
}

.icon-box-img.testimonial-image.circle>img {
    border-radius: 0 !important;
}

/* Đảm bảo rằng các trường Full Name và Phone nằm trên cùng một hàng */
.woocommerce-billing-fields .form-row-first,
.woocommerce-billing-fields .form-row-last {
    width: 48%;
    /* Chỉnh kích thước phù hợp, để lại khoảng trống giữa các trường */
    float: left;
    margin-right: 4%;
    /* Khoảng cách giữa hai trường */
}

.woocommerce-billing-fields .form-row-last {
    margin-right: 0;
    /* Xóa khoảng cách bên phải của trường cuối cùng */
}

/* Tùy chỉnh form mã giảm giá trên trang thanh toán */
.woocommerce-form-coupon {
    margin-bottom: 20px;
}

.woocommerce-form-coupon input[name="coupon_code"] {
    width: 90%;
    /* Chiều rộng cho ô nhập mã giảm giá */
    margin-right: 10px;
}

.woocommerce-form-coupon button {
    width: 25%;
    /* Chiều rộng cho nút áp dụng mã giảm giá */
    background-color: #e0e0e0;
    /* Màu nền của nút */
    color: #555;
    /* Màu chữ của nút */
    border-radius: 3px;
    padding: 10px 0;
}

.woocommerce-checkout .coupon {
    border: 1px solid #ddd;
    /* Viền bao quanh form mã giảm giá */
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.coupon .button {
    background-color: #f0f0f0;
    border-color: #ccc;
    color: #333;
}

.coupon .button:hover {
    background-color: #e0e0e0;
    color: #111;
}

/* Tùy chỉnh cho đoạn thông báo (giống như Lưu ý bạn gửi kèm) */
.custom-discount-note {
    color: red;
    text-align: justify;
    margin-top: 10px;
    display: block;
    font-size: 13px;
}

form.checkout h3 {
    font-size: 1.1em;
    font-weight: bolder;
    overflow: hidden;
    padding-top: 10px;
    text-transform: math-auto !important;
}

.available-coupons p {
    margin-top: 10px;
    text-transform: capitalize;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.coupon-item {
    margin-bottom: 5px;
    padding: 8px;
    background-color: #fff;
    border-top: 1px dot #ddd;
    border-radius: 0px;
}

.coupon-item strong {
    color: #0073aa;
}

.coupon-item:hover {
    background-color: #f1f1f1;
}


.product-single {
    display: flex;
    flex-wrap: wrap;
}

.product-single .col-lg-6 {
    padding-right: 15px;
    padding-left: 15px;
}

.product-single-tabs {
    margin-top: 30px;
}

.product_meta {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
}

.sku_wrapper {
    display: block;
    margin-top: 10px;
}

/* Nút Add to Cart và Mua Ngay */
button.single_add_to_cart_button.button.alt,
button.ux-buy-now-button.button.primary.ml-half {
    position: relative;
    display: inline-block;
    line-height: 22px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
    background-color: transparent;
    -webkit-transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: 1;
    color: #fff;
    overflow: hidden;
    box-shadow: none;
    background-color: #fff;
    border-color: #27678f;
    /* Default border color for Add to Cart */
}

button.single_add_to_cart_button.button.alt:hover,
button.ux-buy-now-button.button.primary.ml-half:hover {
    color: #434343;
    background-color: #fff !important;
}

button.single_add_to_cart_button.button.alt:before,
button.ux-buy-now-button.button.primary.ml-half:before {
    position: absolute;
    content: '';
    display: block;
    left: -2px;
    top: 0;
    right: -2px;
    bottom: 0;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    z-index: -1;
    background-color: #27678f;
    /* Default background color for Add to Cart */
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: -webkit-transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* Custom styles for Mua Ngay button */
button.ux-buy-now-button.button.primary.ml-half {
    /* color: #444; */
    border-color: #f0683a !important;
}

button.ux-buy-now-button.button.primary.ml-half:before {
    background-color: #f0683a;
}

/* Hover effect for before pseudo-element */
button.single_add_to_cart_button.button.alt:hover:before,
button.ux-buy-now-button.button.primary.ml-half:hover:before {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
}

.description_tab li.active {
    background-color: #ccc;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 14px;
}

.nav-line-bottom>li>a:before,
.nav-line-grow>li>a:before,
.nav-line>li>a:before {
    background: none !important;
}

/* slide product  */

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/


}


@media only screen and (max-width: 450px) {

    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .products bdi,
    .product-card bdi {
        font-size: 12px !important;
    }

    p.da-ban {
        font-size: 12px !important;
        top: 38px ! important;
    }

    .star-rating {
        font-size: 13px !important;
    }
}

@media only screen and (max-width: 360px) {

    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    bdi {
        font-size: 10px !important;
    }

    p.da-ban {
        font-size: 10px !important;
        top: 35px ! important;
    }

    .star-rating {
        font-size: 11px !important;
    }
}

.owl-controls .owl-dots {
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: 100%;
}

.owl-controls .owl-dots .owl-dot {
    display: inline-block;
    vertical-align: middle;
}

.owl-controls .owl-dots .owl-dot span {
    width: 10px;
    background-color: #b9b9b9;
    height: 10px;
    border: 1px solid #fff;
    border-radius: 10px;
    margin: 0 3px;
    display: block;
    -webkit-transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.owl-controls .owl-dots .owl-dot.active span,
.owl-controls .owl-dots .owl-dot span:hover {
    background-color: #fff;
    border-color: #fff;
}

.banner_slider .owl-controls .owl-dots {
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: 100%;
}

.banner_slider .owl-controls .owl-dots .owl-dot {
    display: inline-block;
    vertical-align: middle;
}

.banner_slider .owl-controls .owl-dots .owl-dot span {
    width: 10px;
    background-color: #b9b9b9;
    height: 10px;
    border: 1px solid #fff;
    border-radius: 10px;
    margin: 0 3px;
    display: block;
    -webkit-transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.banner_slider .owl-controls .owl-dots .owl-dot.active span,
.banner_slider .owl-controls .owl-dots .owl-dot span:hover {
    background-color: #fff;
    border-color: #fff;
}

.carousel-index-owlnav #collection-slide .owl-controls .owl-nav div {
    top: 35%;
}

.carousel-index-owlnav {
    position: relative;
    padding-left: 0 !important;
}

@media (max-width: 767px) {
    .carousel-index-owlnav .owl-controls .owl-nav {
        display: none;
    }
}

.carousel-index-owlnav .owl-controls .owl-nav div {
    position: absolute;
    top: 45%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0;
    margin: 4px;
    opacity: 0;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    background: #ef683a;
    border: 1px solid #dddddd;
    border-radius: 50%;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}

.carousel-index-owlnav .owl-controls .owl-nav div svg {
    width: 14px;
    height: 38px;
    fill: #fff;
}

.carousel-index-owlnav .owl-controls .owl-nav div.owl-prev {
    left: 60px;
}

.carousel-index-owlnav .owl-controls .owl-nav div.owl-next {
    right: 60px;
}

.carousel-index-owlnav .owl-controls .owl-nav div:hover {
    background: #000;
}

.carousel-index-owlnav .owl-controls .owl-nav div:hover svg {
    fill: #fff;
}

.carousel-index-owlnav:hover .owl-controls .owl-nav div {
    opacity: 1;
}

.carousel-index-owlnav:hover .owl-controls .owl-nav div.owl-prev {
    left: 20px;
}

.carousel-index-owlnav:hover .owl-controls .owl-nav div.owl-next {
    right: 20px;
}

.review-item .article-item--post {
    border: 0;
}

.review-item .article-item--post .post-image {
    /*width: 240px;*/
    /*height: 240px;*/
    /*border-radius: 5%;*/
    margin: 0 auto;
    line-height: 240px;
}

.review-item .article-item--post:hover .post-image img {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    opacity: 1;
    object-fit: cover;
}

.review-item .article-item--post .post-body h3,
p.post-star {
    text-align: center;
    font-weight: 500 !important;
}

.review-item .article-item--post .post-body h3 a {
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    line-height: 1.3;
}

.article-item--post {
    margin-bottom: 10px;
    position: relative;
    border: 1px solid #eeeeee;
}

.article-item--post .post-image {
    display: block;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
    background: #000;
}

.article-item--post .post-image img {
    width: 100%;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
    -o-transition: all 1.5s;
}

.article-item--post .post-image .post--date {
    display: none;
    position: absolute;
    left: 15px;
    bottom: 0;
    margin: auto;
    background-color: #fff;
    padding: 6px 45px;
    text-align: center;
    font-weight: 600;
    font-size: 22px;
    color: #222;
}

.article-item--post .post-body {
    padding: 12px 15px 0px;
}

.article-item--post .post-body .post--comment.text-right {
    color: #666;
    font-size: 12px;
    font-weight: 500;
    margin: 0;
}

.article-item--post .post-body h3 {
    font-size: 20px;
    margin: 15px 0 0;
}

.article-item--post .post-body .post--desc {
    margin: 12px 0;
}

.article-item--post .post-body .post--action .link-more {
    font-size: 12px;
    color: #000;
    text-transform: uppercase;
    font-weight: 500 !important;
    padding: 0 2px 2px;
    position: relative;
    border-bottom: 1px solid #000;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}

.review-item .article-item--post .post-image {
    /*width: 240px;*/
    /*height: 240px;*/
    /*border-radius: 5%;*/
    margin: 0 auto;
    line-height: 240px;
}

.review-item .article-item--post:hover .post-image img {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    opacity: 1;
    object-fit: cover;
}

img.owl-lazy:not([src]) {
    visibility: hidden;
}

.fade-box .lazyload,
.fade-box .lazyloading {
    opacity: 0;
    transition: opacity 300ms;
}

.fade-box img.lazyloaded {
    opacity: 1;
}

.product-img picture {
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.product-img picture:nth-of-type(2) {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
}

.review-item .article-item--post .post-image a img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

article.review-item.article-item.col-post.site-animation {
    padding: 10px;
}

.post-body .post--desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    height: 60px;
    -webkit-line-clamp: 3;
}

.image-tools.is-small.top.right.show-on-hover .wishlist-icon {
    display: none;
}

h5.post-title.is-large,
h3.post-title.is-large {
    text-wrap: wrap;

}

h5.post-title>a,
h3.post-title>a {
    color: #222;
    font-weight: 600;
}

.col-watch-video {
    position: absolute !important;
    bottom: 16px !important;
    left: 16px !important;
    z-index: 25 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

.col-watch-video a.product-video-popup,
.imgvideo.product-video-popup {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
    margin: 0 !important;
}

.col-watch-video a.product-video-popup:hover img {
    transform: scale(1.1) !important;
}

.class-hiden {
    display: none !important;
}

.message-container {
    text-align: center !important;
}

a.account-link.account-login.icon.button.circle.is-outline.is-small {
    color: #5c5c5c !important;
}

a.button.checkout.wc-forward {
    background-color: #f0683a !important;
    color: #fff;
    margin: .5em 0px 0;
}

a.button.wc-forward {
    background-color: #27678E;
    color: #fff;
}

.button.alt {
    background-color: #f0683a !important;
}

/* ==========================================================================
   UNIVERSAL FLASH SALE PRICE STYLING (ÁP DỤNG CHO TẤT CẢ BOX PRODUCT CARD & TRANG CHI TIẾT)
   ========================================================================== */

/* 1. GIÁ BÁN KHUYẾN MÃI (MÀU ĐỎ RỰC RỠ #d9261c, SIÊU ĐẬM 800/900, SIZE LỚN NỔI BẬT) */
/* .price-wrapper,
.price-wrapper *,
.product-small .price,
.product-small .price *,
.box-text .price,
.box-text .price *,
.product-card .price,
.product-card .price *,
.product-box .price,
.product-box .price *,
.products .price,
.products .price *,
.grid-style-3 .price,
.grid-style-3 .price *,
.flash-sale .price,
.flash-sale .price *,
.badge-container+.box-text .price,
.badge-container+.box-text .price *,
.price,
.price ins,
.price ins *,
.price ins span.amount,
.price ins bdi,
.price>span.amount,
.price>span.amount bdi,
.price>bdi,
span.amount {
    color: #d9261c !important;
    font-weight: 800 !important;
    text-decoration: none !important;
} */

/* Kích thước chữ cho Giá Bán trên các Thẻ Sản Phẩm (Product Cards) ngoài Trang chủ & Danh mục */
/* .price-wrapper .price,
.price-wrapper .amount,
.price-wrapper bdi,
.product-small .price .amount,
.product-small .price bdi,
.box-text .price .amount,
.box-text .price bdi,
.product-card .price .amount,
.product-box .price .amount,
.products .price .amount,
.grid-style-3 .price .amount,
.flash-sale .price .amount {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #d9261c !important;
    letter-spacing: -0.2px !important;
} */

/* Đảm bảo ins luôn hiển thị màu đỏ */
/* .price ins,
.price ins *,
.price-wrapper ins,
.price-wrapper ins *,
.box-text .price ins,
.box-text .price ins * {
    color: #d9261c !important;
    font-weight: 900 !important;
    text-decoration: none !important;
} */

/* Kích thước chữ giá bán cho Trang Chi Tiết Sản Phẩm (26px font-weight 900) */
/* .product-summary .price ins,
.product-summary .price ins *,
.product-info .price ins,
.product-info .price ins *,
.single-product .price ins,
.single-product .price ins *,
.single-product .price>.amount,
.single-product .price>bdi {
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #d9261c !important;
} */

/* 2. GIÁ GỐC CHƯA GIẢM (GẠCH NGANG, MÀU XÁM #888888, NÉT MẢNH FONT-WEIGHT 400) */
.price del,
.price del *,
.price del .amount,
.price del bdi,
.price-wrapper del,
.price-wrapper del *,
.price-wrapper del .amount,
.price-wrapper del bdi,
.product-small .price del,
.product-small .price del *,
.product-small .price del .amount,
.box-text .price del,
.box-text .price del *,
.box-text .price del .amount,
.product-card .price del,
.product-card .price del *,
.product-box .price del,
.product-box .price del *,
.products .price del,
.products .price del *,
.grid-style-3 .price del,
.grid-style-3 .price del *,
.flash-sale .price del,
.flash-sale .price del *,
.product-summary .price del,
.product-summary .price del *,
.product-info .price del,
.product-info .price del *,
.single-product .price del,
.single-product .price del * {
    color: #888888 !important;
    font-size: clamp(8px, 2vw, 13px) !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    opacity: 1 !important;
    margin-left: 0px !important;
    display: inline-block !important;
}

/* Đặt layout giá bán trên Thẻ Sản Phẩm nằm ngang hàng đẹp mắt */
.price-wrapper .price,
.box-text .price,
.product-small .price,
.products .price {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 4px !important;
}

.product-thumbnails .col,
.product-thumbnails .col a,
.product-thumbnails .col img,
.vertical-thumbnails .col,
.vertical-thumbnails .col a,
.vertical-thumbnails .col img {
    cursor: pointer !important;
}

li#tab-title-description>a,
li#tab-title-additional_information>a {
    font-size: 15px;
    font-weight: 600;
    margin-left: 15px;
}



.quantity .minus,
.quantity .plus,
.ux-quantity__button {
    padding-left: .5em !important;
    padding-right: .5em !important;
    min-height: 44px !important;
    min-width: 44px !important;
    line-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.m4h-flashsale-progress-text {
    color: #991b1b !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.quantity input[type=number] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    border-radius: 0 !important;
    font-size: 0.8em;
    max-width: 3.5em;
    text-align: center;
    width: 3.5em;
}

.image-gift>img {
    width: 80px;
    height: 80px;
    border-radius: 5px;
}

/* Tối ưu giao diện Sticky Add To Cart gọn gàng (Ảnh, Tên, Số lượng, Mua Ngay) */
.sticky-add-to-cart-wrapper .promotion,
.sticky-add-to-cart .promotion {
    display: none !important;
}

.sticky-add-to-cart--active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 8px 15px !important;
    background: #ffffff !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08) !important;
}

.sticky-add-to-cart.sticky-add-to-cart--active .cart .form-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

.sticky-add-to-cart .single_add_to_cart_button.ux-buy-now-button,
.sticky-add-to-cart .ux-buy-now-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #d9261c !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 8px 20px !important;
    border-radius: 4px !important;
    margin: 0 !important;
    border: none !important;
    height: 40px !important;
}


span.custom-price>span>bdi {
    color: #646464;
}

p.custom-sale-price>span>bdi {
    color: #F0683A !important;
}

.gift-box {
    border-radius: 8px;
    padding: 5px;
    margin: 16px 0;
    background-color: #fff;
    box-shadow: 0px 0px 15px rgb(255 0 0 / 13%);
    padding: 10px;
}

.gift-list {
    list-style-type: disc;
    /* Kiểu danh sách */
    padding-left: 20px;
    /* Khoảng cách lề trái */
}

ul.gift-list>li {
    padding: 0;
    margin: 10px 0;
    display: flex;
    align-items: center;
}

.image-gift {
    margin-right: 10px;
}

.gift-content {
    margin-left: 10px;
}

.gift-price>span {
    text-decoration: line-through;
    color: #b6b6b6;
    font-weight: 400;
}

.image-gift>img {
    width: 70px !important;
    height: 70px !important;
    border-radius: 5px;
}

.gift-price {
    display: flex;
}

.badge-frame .badge-inner,
.badge-outline .badge-inner {
    color: #222;
    border: 1px solid;
}

div.wpcf7-mail-sent-ok {
    border: 2px solid #fef83e;
}

div.wpcf7-response-output {
    margin: 2em .5em 1em;
    padding: .2em 1em;
}

.wpcf7-display-none {
    display: none;
}

/* custom css của plugin vietqr */
.list-bank {
    max-width: 90px !important;
}

.list-bank-box {
    background: #fff !important;
    margin-bottom: 4px;
    margin-right: 4px;
    border: 1px solid #ccc;
}

.list-bank img {
    object-fit: contain;
    margin: 0px !important;
}

.vietqr-row {
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

a.nav-top-link.nav-top-not-logged-in.icon.button.circle.is-outline.is-small.icon.button.circle.is-outline.is-small {
    color: #666;
}



/* css review customer */

.nav-tabs li {
    width: 50% !important;
    text-align: center !important;
    margin: 0 !important;
}

.nav-tabs li a {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
}

.nav-tabs li a span {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.tabbed-content .nav {
    width: 100%;
    overflow: hidden;
    border: none !important;
    background-color: transparent !important;
}

.nav-tabs>li.active>a {
    border-top: none;
    background-color: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.nav-tabs>li>a {
    background-color: #f8f8f8;
    border-left: none;
    border-right: none;
    border-top: none;
    padding-left: 15px;
    padding-right: 15px;
    color: #000;
    font-size: 16px;
}

.woocommerce-photo-reviews-form-container.woocommerce-photo-reviews-form-popup .form-submit input[type="submit"] {
    margin: 0;
    width: 100%;
    background: transparent;
    border: solid 1px #000;
    color: #000;
}

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    width: 100%;
    background-color: #F0683A;
}


/* css quà tặng trang chủ */
/* .result-label {
    border-radius: 20px; 
    display: grid ;
    grid-template-columns: 2fr 8fr 2fr;
    font-size: 0;
    overflow: hidden;
    max-width: 100%;
    place-items: center; 
}
.result-label.temp {
    background: linear-gradient(to right, #faab08, #d42611);
}
 
.box-info .title-gift {
    color: #fff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 11px;
    line-height: 13px;
    overflow: hidden;
    padding: 4px 0 0 0px;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    text-transform: uppercase;
}
.price-gift span{
    color: #fff;
    font-size: 12px !important;
}
.result-label img {
    padding: 5px;
    border-radius: 20px;
}
.box-info { 
    display: inline-grid;
    padding: 2px 0px;
}  */



/* tuy chinh css  */
form.variations_form.cart.ux-swatches-js-attached.ux-variation-images-js-attached {
    display: block !important;
}

.woocommerce-variation-add-to-cart,
form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.woocommerce-variation-add-to-cart,
form.cart button {
    width: auto;
}

.promotion {
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
    border: 1px solid #e0e0e0
}

.promotion .title {
    background-color: #f6f6f6;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 10px;
    font-weight: 600;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

.promotion .content {
    padding: 8px 10px
}

.promotion .content ul {
    counter-reset: discount-counter;
}

.promotion .content ul li:before {
    content: counter(discount-counter);
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    float: left;
    height: 16px;
    line-height: 16px;
    margin-top: 2px;
    text-align: center;
    width: 16px;
}

.promotion .content ul li {
    margin-bottom: 10px;
    margin-left: 0;
    counter-increment: discount-counter;
    list-style: none;
}

.promotion .content ul li .nb_dis {
    background-color: #4a90e2;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    float: left;
    height: 16px;
    line-height: 16px;
    margin-top: 2px;
    text-align: center;
    width: 16px
}

.promotion .content ul li .content_dis {
    padding-left: 23px;
    display: block;
    line-height: 20px
}

.promotion .content ul li:last-child {
    margin-bottom: 5px
}

.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled,
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled button,
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled button {
    text-align: center;
    width: 100%;
}

.icon-queen {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: -5px;
    background: url('/wp-content/uploads/2025/07/queen1.svg') no-repeat center center;
    background-size: contain;
    transform: rotate(18deg);
    margin-bottom: 6px;
    /* animation: wiggle 1.5s ease-in-out infinite; */
    /* /* Hoặc thử bounce: */
    animation: bounce 1.2s ease-in-out infinite;
}

@keyframes wiggle {

    0%,
    100% {
        transform: rotate(18deg);
    }

    25% {
        transform: rotate(23deg);
    }

    50% {
        transform: rotate(13deg);
    }

    75% {
        transform: rotate(20deg);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0) rotate(18deg);
    }

    50% {
        transform: translateY(-4px) rotate(18deg);
    }
}

/* css dem qua tang con lai  */

.crazy-deal-details.pc {
    margin: 25px auto;
    height: 29px;
    overflow: hidden;
    background-image: url('../../themes/m4h/assets/images/flashsale-pc.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.crazy-deal-details-right {
    position: relative;
    margin-left: 140px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

time.crazy-deal-details-countdown {
    text-align: left;
    font-size: 14px;
}

span#isures-sale-fl {
    color: #ff3d00;
    font-size: 14px;
}

span.crazy-deal-details-soldtext {
    color: #999;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
}

.crazy-deal-details.pc .crazy-deal-details-process {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    color: #999;
    font-weight: 700;
}

.crazy-deal-details.pc .crazy-deal-details-procressbar {
    width: 90px;
    height: 8px;
    background: #ffd1c2;
    border-radius: 4px;
    display: inline-block;
    margin-right: 6px;
    margin-left: 6px;
}

.crazy-deal-details.pc .crazy-deal-details-procressbar-inner {
    background: linear-gradient(90deg, #ff8763, #ff330c);
    border-radius: 4px;
    width: 0;
    height: 100%;
}

@media screen and (max-width: 1024px) {
    .crazy-deal-details.pc {
        height: 50px;
        background-image: url('../../themes/m4h/assets/images/flashsale-mobile.png');
    }

    .crazy-deal-details-right {
        position: relative;
        display: flex;
        color: #fff;
        margin-right: 10px;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }

    .crazy-deal-details-procressbar {
        background: hsla(0, 0%, 100%, .5);
    }

    .crazy-deal-details.pc .crazy-deal-details-procressbar-inner {
        background: #fff;
    }

    .isures-sale-fl,
    span.crazy-deal-details-soldtext {
        color: #fff !important
    }
}

/* css đếm ngược  */
.m4h-flashsale-countdown {
    margin-bottom: 15px;
    text-align: center;
    font-weight: bold;
    color: #75695b;
    font-size: 20px;
    display: grid;
}

span.cicler {
    padding: 6px 8px;
    background-color: #f9c6ba70;
    border-radius: 5px;
    font-weight: bold;
    color: #222;
}

/* css process  */
.m4h-flashsale-progress {
    margin-top: 8px !important;
    margin-bottom: 6px !important;
    font-family: inherit !important;
}

/* Thanh nền */
.m4h-flashsale-progress-bar {
    position: relative !important;
    width: 100% !important;
    height: 18px !important;
    background: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

/* Thanh màu chạy */
.m4h-flashsale-progress-inner {
    background: linear-gradient(90deg, #ff8c00 0%, #e53935 100%) !important;
    height: 100% !important;
    border-radius: 12px !important;
    transition: width 0.8s ease !important;
}

/* Text nằm trên thanh */
.m4h-flashsale-progress-text,
.m4h-fs-progress-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #991b1b !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    z-index: 2 !important;
}

.stock-count,
.remain-stock,
.box-text .stock-count,
.product-card .stock-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #d9261c !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    margin-top: 4px !important;
}


/* css tab  */
.sales-tab {
    display: flex !important;
}

.sales-tab .tab-panels {
    border: none !important;
    background: #fff;
    /* max-height: fit-content; */
    border-radius: 20px;
    margin-top: -2px;
    box-shadow: rgb(250 194 182 / 50%) 0px 0px 15px 5px, rgb(250 194 182 / 20%) 1px 1px 1px;
}

.product-flatsales {
    padding: 0 2px !important;
}

.product-flatsales .product-small .col-inner {
    background-color: #fff;
    max-width: 380px !important;
    border-radius: 10px;
}

.product-flatsales .box-text-products {
    padding: 10px;
}

.product-flatsales .box-image {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.sales-tab ul,
.sales-tab li {
    overflow: visible !important;
}

.sales-tab .nav {
    gap: 20px;
}

.sales-tab ul {
    position: relative;
    background-image: url('../../themes/m4h/assets/images/fs-head-8-1.webp');
    min-height: 50px;
    margin: 0 auto;
    width: calc(100% - 60px) !important;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    overflow: visible;
    /* cho phép con trồi ra */
}

#tab-flash-sales {
    position: relative;
    z-index: 2;
    /* nổi lên trên ul */
}

.sales-tab .nav-outline>li>a {
    background-image: url('../../themes/m4h/assets/images/fs-tab-title-8-1.webp');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    min-width: 125px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 17px;
    color: #fff;
    /* chữ đen */
    filter: brightness(0.8);
    /* làm tối khi không active */
    transition: all 0.3s;
    top: -20px;
    border: none;
    border-radius: 0;

}

.sales-tab .nav-outline>li.active>a {
    color: #fff;
    filter: brightness(1);
    /* sáng lên */
    top: -20px;
    z-index: 3;
    font-weight: bold;
}

/* Khung Chốt Deal – Nhận Quà (.gift-box) */
.gift-box {
    background: #fffdfa !important;
    border: 1.5px solid #fde68a !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08) !important;
}

.gift-box .title-gift-box {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #9a3412 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
}

.gift-box .title-gift-box img {
    width: 26px !important;
    height: 26px !important;
}

.gift-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gift-list li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
    border: 1px solid #fef3c7 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

.gift-list li:hover {
    border-color: #fde68a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.gift-list .image-gift {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid #f1f5f9 !important;
}

.gift-list .image-gift img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.gift-list .title-gift {
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Khung Ưu Đãi Đặc Biệt (.promotion) */
.promotion {
    background: #fff8f6 !important;
    border: 1.5px solid #ffedd5 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.06) !important;
}

.promotion .title {
    color: #c2410c !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.promotion .content ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.promotion .content ul li {
    position: relative !important;
    padding-left: 24px !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
    color: #334155 !important;
    line-height: 1.45 !important;
}

.promotion .content ul li:last-child {
    margin-bottom: 0 !important;
}

.promotion .content ul li:before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #16a34a !important;
    font-weight: 900 !important;
    font-size: 14px !important;
}

/* ==========================================================================
   PRODUCT TABS ENHANCEMENTS (TỐI ƯU TAB MÔ TẢ SẢN PHẨM MINIMALIST LUXE)
   ========================================================================== */
.product-tabs,
.woocommerce-tabs,
.tabbed-content,
.product-footer .product-tabs {
    /* margin-top: 32px !important; */
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
}

.product-tabs .nav-tabs,
.woocommerce-tabs ul.tabs,
ul.nav-line-bottom,
.nav-tabs-normal {
    background: #ffffff !important;
    border: none !important;
    /* border-bottom: 1px solid #e2e8f0 !important; */
    margin: 0 !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    list-style: none !important;
}

.product-tabs .nav-tabs>li,
.woocommerce-tabs ul.tabs>li,
ul.nav-line-bottom>li,
ul.nav-uppercase>li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.product-tabs .nav-tabs>li>a,
.woocommerce-tabs ul.tabs>li>a,
ul.nav-line-bottom>li>a {
    display: inline-block !important;
    padding: 16px 8px !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.product-tabs .nav-tabs>li>a:hover,
.woocommerce-tabs ul.tabs>li>a:hover,
ul.nav-line-bottom>li>a:hover,
ul.nav-uppercase>li>a:hover {
    color: #0f172a !important;
    background: transparent !important;
}

.product-tabs .nav-tabs>li.active>a,
.woocommerce-tabs ul.tabs>li.active>a,
ul.nav-line-bottom>li.active>a,
ul.nav-uppercase>li.active>a {
    color: #d9261c !important;
    border-bottom: 3px solid #d9261c !important;
    background: transparent !important;
    font-weight: 800 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.product-tabs .nav-tabs>li>a:after,
.product-tabs .nav-tabs>li>a:before,
ul.nav-line-bottom>li>a:after,
ul.nav-line-bottom>li>a:before {
    display: none !important;
    content: none !important;
}

.tab-panels,
.woocommerce-tabs .panel,
.product-tabs .tab-panels .panel {
    padding: 24px 28px !important;
    color: #334155 !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    background: #ffffff !important;
}

.tab-panels h2,
.woocommerce-tabs .panel h2 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 16px !important;
}

/* Đảm bảo thumbnail luôn có thể nhấp chuột không bị che khuất */
.vertical-thumbnails,
.vertical-thumbnails *,
.product-thumbnails,
.product-thumbnails * {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ==========================================================================
   MASTER DESKTOP & SITE-WIDE PRODUCT CARD OPTIMIZATION (PC & ALL SCREENS)
   ========================================================================== */

/* 1. Seamless Card Elevation & Modern Luxe Radius */
.product-small,
.product-card,
.products .box,
.products .col-inner .box {
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    /* border: 1px solid #f1f5f9 !important; */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
}


/* 2. Image Hover Zoom & Micro-animation */
.products .box-image {
    border-radius: 14px 14px 0 0 !important;
    overflow: hidden !important;
}

.products .box-image img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.products .box:hover .box-image img {
    transform: scale(1.05) !important;
}

/* 3. Title Perfect Line-Clamp & Balance Across All Rows */
.products .product-title a,
.product-small .title-wrapper a,
.box-text .product-title a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 39px !important;
    margin-bottom: 6px !important;
    transition: color 0.2s ease !important;
}

.products .box:hover .product-title a {
    color: #d9261c !important;
}

/* 4. High Impact Flash Sale Price Row */
.products .price-wrapper,
.products .price,
.product-small .price,
.box-text .price {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
}

.products .price ins .amount,
.products .price ins bdi,
.products .price-wrapper ins .amount,
.products .price-wrapper ins bdi,
.box-text .price ins .amount,
.box-text .price ins bdi,
.product-small .price ins .amount,
.product-small .price ins bdi {
    font-size: clamp(12px, 3vw, 18px) !important;
    font-weight: 900 !important;
    color: #d9261c !important;
    letter-spacing: -0.3px !important;
    text-decoration: none !important;
}

.products .price del,
.products .price del .amount,
.products .price del bdi,
.products .price-wrapper del,
.products .price-wrapper del .amount,
.products .price-wrapper del bdi,
.box-text .price del,
.box-text .price del .amount,
.box-text .price del bdi,
.product-small .price del,
.product-small .price del .amount,
.product-small .price del bdi {
    font-size: clamp(8px, 2vw, 12px) !important;
    font-weight: 500 !important;
    color: #64748b !important;
    text-decoration: line-through !important;
    opacity: 1 !important;
}

/* 5. Stock Progress Bar & Badges */
.products .m4h-flashsale-progress {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
}

.products .m4h-flashsale-progress-bar {
    height: 18px !important;
    background: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 12px !important;
}

.products .m4h-flashsale-progress-inner {
    background: linear-gradient(90deg, #ff8c00 0%, #d9261c 100%) !important;
    border-radius: 12px !important;
}

.products .m4h-flashsale-progress-text {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #991b1b !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* 6. Badges & Labels Alignment */
.badge-container .badge {
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 3px 7px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.badge-container .badge-circle {
    background: #d9261c !important;
    color: #ffffff !important;
}

/* ==========================================================================
   PERFECT UNIFORM PRODUCT CARD EQUALIZATION & ALIGNMENT (100% BALANCED)
   ========================================================================== */
.products.row,
.products.grid,
.woocommerce .products {
    display: flex !important;
    flex-wrap: wrap !important;
}

.products.row>.col,
.products.grid>.col {
    display: flex !important;
    flex-direction: column !important;
}

.products .col-inner,
.products .product-small,
.products .product-card,
.products .box {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    /* border: 1px solid #f1f5f9 !important; */
    overflow: hidden !important;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; */
}

.products .box:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
}

.products .box-text {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    justify-content: space-between !important;
    padding: 12px 10px !important;
    text-align: left !important;
}

.products .product-title,
.products .product-title a,
.box-text .product-title a {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #0f172a !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 37px !important;
    margin-bottom: 8px !important;
    text-align: left !important;
}

/* 1. Khung Ảnh Sản Phẩm Tỷ Lệ 1:1 Chuẩn 100% (Khắc phục ảnh ngang bị hở khoảng trắng ở trên) */
.products .box-image {
    position: relative !important;
    width: 100% !important;
    padding-top: 100% !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    border-radius: 14px 14px 0 0 !important;
}

.products .box-image a,
.products .box-image img,
.products .box-image .image-tools,
.products .box-image .box-image-inner {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.products .box-image img {
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.5s ease !important;
}

.products .box:hover .box-image img {
    transform: scale(1.05) !important;
}

/* 2. FULL SOLID BACKGROUND BADGES OVERHAUL (TẤT CẢ NỀN ĐỎ & NỀN TRẮNG ĐẦY ĐỦ 100%) */

/* Reset Flatsome circle/oval badge limits */
.badge-container,
.badge-container *,
.badge-circle,
.badge-inner,
.callout,
.badge,
.onsale,
.post-date {
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    min-height: unset !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Badge Container Overlay Position */
.badge-container,
.box-image .badge-container {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: calc(100% - 16px) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    pointer-events: none !important;
    z-index: 30 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FULL SOLID RED BACKGROUND FOR SALE BADGE (-31%, -34%, -40%) */
.badge-container .callout,
.badge-container .badge,
.badge-container .badge-circle,
.badge-container .badge-inner,
.badge-container .badge-inner.secondary.on-sale,
.badge-container .badge-inner.on-sale,
.badge-container .onsale,
.badge-container .badge-sale,
.badge-container .badge-discount,
.products .badge-container .onsale {
    background: #d9261c !important;
    /* Full Solid Red 100% Fill */
    background-color: #d9261c !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    border: none !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 6px rgba(217, 38, 28, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Text con bên trong badge (không để override background container) */
.badge-container .badge-inner span,
.badge-container .badge span {
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FULL SOLID WHITE BACKGROUND FOR "MỚI" BADGE */
.badge-container .badge-new,
.badge-container .post-date,
.badge-container .badge-inner.new-bubble-auto,
.badge-container .badge-inner.new-badge,
.box-image .badge-inner.new-bubble-auto,
.box-image .post-date {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: #ffffff !important;
    /* Full Solid White 100% Fill */
    background-color: #ffffff !important;
    color: #d9261c !important;
    border: 1.5px solid #fecdd3 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    z-index: 31 !important;
    margin-left: auto !important;
}

/* Ẩn badge rỗng (không có nội dung) - CSS :empty */
.badge-container .badge:empty,
.badge-container .badge-new:empty,
.badge-container .post-date:empty,
.badge-container .badge-inner:empty,
.badge-container .badge-circle:empty,
.badge-container .callout:empty,
.badge-container .onsale:empty,
.badge-container-left:empty {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Keep Flatsome callout/frame wrappers transparent. Only a numeric discount gets a colour. */
.badge-container .callout,
.badge-container .badge,
.badge-container .badge-frame,
.badge-container .badge-inner,
.badge-container .badge-inner.on-sale {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.badge-container .onsale:not(.m4h-discount-percent) {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    color: inherit !important;
    padding: 0 !important;
}

.badge-container .onsale.m4h-discount-percent {
    background: #d9261c !important;
    color: #ffffff !important;
    padding: 3.5px 8px !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 6px rgba(217, 38, 28, 0.4) !important;
}

.badge-container .badge-inner.new-bubble-auto span,
.box-image .badge-inner.new-bubble-auto span {
    color: #d9261c !important;
    background: transparent !important;
}

/* 3. KHẮC PHỤC GIÁ VÀ ĐÃ BÁN (CHUẨN BỐ CỤC 2 DÒNG GỌN GÀNG 100%, KHÔNG BỂ LAYOUT) */

/* 4. HÀNG ĐÁNH GIÁ 1 SAO VÀ ĐÃ BÁN (DÒNG 2 DƯỚI GIÁ) */

/* Master Badge Container Position (Top Left & Top Right of Image Canvas) */
.badge-container,
.products .badge-container,
.box-image .badge-container {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: calc(100% - 16px) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    pointer-events: none !important;
    z-index: 40 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.badge-container-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
}

/* 1. SALE DISCOUNT BADGE (-39%, -13%, -31%) */
.badge-container .callout,
.badge-container .badge,
.badge-container .badge-circle,
.badge-container .badge-inner,
.badge-container .badge-inner.secondary.on-sale,
.badge-container .badge-inner.on-sale,
.badge-container .onsale,
.badge-container .badge-sale,
.badge-container .badge-discount,
.m4h-badge-discount {
    background: #d9261c !important;
    background-color: #d9261c !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 3.5px 8px !important;
    border-radius: 5px !important;
    border: none !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 6px rgba(217, 38, 28, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Text con bên trong các badge (không để override background của container) */
.badge-container .badge-inner span,
.badge-container .badge span {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. GIFT BADGE (🎁 QUÀ TẶNG) */
.m4h-badge-gift {
    background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    padding: 3.5px 8px !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 8px rgba(255, 65, 108, 0.4) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 3. NEW BADGE (MỚI) - Góc Trên Bên Phải */
.badge-container .badge-new,
.badge-container .post-date,
.badge-container .badge-inner.new-bubble-auto,
.badge-container .badge-inner.new-badge,
.badge-container .badge:nth-child(2),
.box-image .badge-inner.new-bubble-auto,
.box-image .post-date {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #d9261c !important;
    border: 1.5px solid #fecdd3 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    padding: 2.5px 8px !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    z-index: 31 !important;
    margin-left: auto !important;
}

/* Badge Quà Tặng (từ woocommerce_before_shop_loop_item_title) - anchor vào .box của Flatsome */
/* .box trong Flatsome có position:relative → badge absolute sẽ nằm ở góc trên trái của card */
.m4h-gift-badge-in-box,
.m4h-gift-badge-in-image {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 50 !important;
    pointer-events: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    float: none !important;
    clear: both !important;
}


/* Ẩn các chuỗi 5 ngôi sao cũ của WooCommerce nếu có */
.star-rating:not(.m4h-custom-rating) {
    display: none !important;
}

.m4h-flashsale-progress {
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 6px !important;
}

/* Final badge override: frames stay transparent; red is reserved for a numeric discount. */
.badge-container .callout,
.badge-container .badge,
.badge-container .badge-frame,
.badge-container .badge-inner,
.badge-container .badge-inner.on-sale {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.badge-container .onsale:not(.m4h-discount-percent) {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    color: inherit !important;
    padding: 0 !important;
}

.badge-container .onsale.m4h-discount-percent {
    background: #d9261c !important;
    color: #ffffff !important;
    padding: 3.5px 8px !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 6px rgba(217, 38, 28, 0.4) !important;
}

/* ==========================================================================
   ULTIMATE OVERRIDES: GIÁ CHƯA GIẢM & STICKY ADD TO CART
   ========================================================================== */

/* 1. Giá trước giảm (màu xám #888888, nét mảnh 400, không đậm, không đỏ) */
html body del,
html body del *,
html body del .amount,
html body del bdi,
html body del span,
html body .price del,
html body .price del *,
html body .price del .amount,
html body .price del bdi,
html body .price del span,
html body .product-info .price del,
html body .product-info .price del *,
html body .product-info .price del .amount,
html body .product-info .price del bdi,
html body .product-summary .price del,
html body .product-summary .price del *,
html body .single-product .price del,
html body .single-product .price del * {
    color: #888888 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    opacity: 0.9 !important;
    margin-left: 0px !important;
}

/* 2. STICKY ADD TO CART: BỐ CỤC 1 HÀNG, HÌNH VUÔNG, GIÁ + GIẢM GIÁ, SỐ LƯỢNG NHỎ GỌN, MUA NGAY */

/* Ẩn hoàn toàn khung ưu đãi đặc biệt & nút thừa */
html body .sticky-add-to-cart-wrapper .promotion,
html body .sticky-add-to-cart .promotion,
html body .sticky-add-to-cart--active .promotion,
html body .sticky-add-to-cart .single_add_to_cart_button:not(.ux-buy-now-button) {
    display: none !important;
}

/* Container chính của thanh Sticky Bar */
html body .sticky-add-to-cart--active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    background: #ffffff !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12) !important;
    padding: 6px 12px !important;
    min-height: 54px !important;
    z-index: 99999 !important;
}

/* Hàng chứa duy nhất 1 row */
html body .m4h-sticky-row-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

/* 1. Hình vuông sản phẩm (Square Thumbnail) */
html body img.m4h-sticky-square-img,
html body .sticky-add-to-cart__product .m4h-sticky-square-img {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    border: 1px solid #eeeeee !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* 2. Khối Tên + Giá & Giảm giá */
html body .m4h-sticky-title-price-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: 320px !important;
}

html body .m4h-sticky-title-text {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin: 0 !important;
    max-height: 32px !important;
}

/* Giá tiền + giảm giá */
html body .m4h-sticky-price-html {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    line-height: 1 !important;
    font-size: 13px !important;
}

html body .m4h-sticky-price-html ins,
html body .m4h-sticky-price-html ins .amount,
html body .m4h-sticky-price-html ins bdi {
    color: #d9261c !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

html body .m4h-sticky-price-html del,
html body .m4h-sticky-price-html del .amount,
html body .m4h-sticky-price-html del bdi {
    color: #888888 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    text-decoration: line-through !important;
    opacity: 0.85 !important;
    margin-left: 2px !important;
}

/* 3. Form chứa Nút Số lượng & Mua Ngay */
html body .m4h-sticky-action-box {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

html body .m4h-sticky-cart-form {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
}

html body .m4h-sticky-cart-form,
html body .sticky-add-to-cart form.cart {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
}

html body .m4h-sticky-form-inline,
html body .sticky-add-to-cart .form-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* Tối ưu ô số lượng (- 1 +) Nhỏ Gọn */
html body .sticky-add-to-cart .quantity,
html body .m4h-sticky-form-inline .quantity {
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
    border: 1px solid #dddddd !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 82px !important;
    max-width: 82px !important;
    min-width: 82px !important;
    flex: 0 0 82px !important;
    background: #ffffff !important;
}

html body .sticky-add-to-cart .quantity input.minus,
html body .sticky-add-to-cart .quantity input.plus,
html body .m4h-sticky-form-inline .quantity input.minus,
html body .m4h-sticky-form-inline .quantity input.plus {
    width: 24px !important;
    height: 34px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    line-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #333333 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

html body .sticky-add-to-cart .quantity input.qty,
html body .m4h-sticky-form-inline .quantity input.qty {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-left: 1px solid #eeeeee !important;
    border-right: 1px solid #eeeeee !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* 4. Nút MUA NGAY (Auto Width, Flex 0 0 auto, nằm trên cùng 1 hàng) */
html body button.m4h-sticky-buy-now-btn,
html body .m4h-sticky-buy-now-btn,
html body .sticky-add-to-cart-wrapper button.ux-buy-now-button,
html body .sticky-add-to-cart button.ux-buy-now-button,
html body .sticky-add-to-cart .single_add_to_cart_button.ux-buy-now-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    height: 34px !important;
    padding: 0 16px !important;
    background-color: #d9261c !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    border-radius: 4px !important;
    margin: 0 !important;
    border: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(217, 38, 28, 0.3) !important;
}

html body button.m4h-sticky-buy-now-btn:hover,
html body .m4h-sticky-buy-now-btn:hover {
    background-color: #b81c13 !important;
    color: #ffffff !important;
}

/* Responsive Mobile (< 600px) */
@media screen and (max-width: 600px) {
    html body .sticky-add-to-cart--active {
        bottom: 62px !important;
        /* Không bị đè Mobile App Bar */
        padding: 4px 8px !important;
    }

    html body .m4h-sticky-row-container {
        gap: 6px !important;
    }

    html body img.m4h-sticky-square-img {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    html body .m4h-sticky-title-text {
        font-size: 11px !important;
        max-width: 110px !important;
        line-height: 1.2 !important;
        max-height: 27px !important;
        -webkit-line-clamp: 2 !important;
        white-space: normal !important;
    }

    html body .m4h-sticky-price-html ins .amount,
    html body .m4h-sticky-price-html ins bdi {
        font-size: 12px !important;
    }

    html body .m4h-sticky-price-html del .amount,
    html body .m4h-sticky-price-html del bdi {
        font-size: 10px !important;
    }

    html body .sticky-add-to-cart .quantity,
    html body .m4h-sticky-form-inline .quantity {
        width: 68px !important;
        min-width: 68px !important;
        height: 30px !important;
    }

    html body .sticky-add-to-cart .quantity input.minus,
    html body .sticky-add-to-cart .quantity input.plus,
    html body .m4h-sticky-form-inline .quantity input.minus,
    html body .m4h-sticky-form-inline .quantity input.plus {
        width: 20px !important;
        height: 30px !important;
        min-width: 20px !important;
        font-size: 12px !important;
    }

    html body .sticky-add-to-cart .quantity input.qty,
    html body .m4h-sticky-form-inline .quantity input.qty {
        width: 28px !important;
        height: 30px !important;
        min-width: 28px !important;
        font-size: 12px !important;
    }

    html body button.m4h-sticky-buy-now-btn,
    html body .m4h-sticky-buy-now-btn {
        height: 30px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================================
   TIGHT PRODUCT CARD PRICE GAP (MATCHING FLASHSALES STYLE)
   ========================================================================== */
html body .products .price-wrapper,
html body .products .product-card .price-wrapper,
html body .product-card .price-wrapper,
html body .box-text .price,
html body .price-wrapper {
    display: flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    column-gap: 3px !important;
}

html body .products .price del,
html body .products .price-wrapper del,
html body .product-card .price del,
html body .box-text .price del,
html body .price-wrapper del {
    margin-left: 2px !important;
    margin-right: 0 !important;
    color: #888888 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

/* Single Product Summary Old Price Override */
html body.single-product .product-summary .price del,
html body.single-product .product-summary .price del *,
html body.single-product .product-summary .price del .amount,
html body.single-product .product-summary .price del bdi,
html body.single-product .product-summary .price del span,
html body.single-product .product-info .price del,
html body.single-product .product-info .price del *,
html body.single-product .product-info .price del .amount,
html body.single-product .product-info .price del bdi,
html body.single-product .product-info .price del span {
    color: #888888 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    text-decoration: line-through !important;
    opacity: 0.85 !important;
}

/* Single Product Main Summary Price Display Container */
html body .m4h-main-price-display {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
}

html body .m4h-main-price-display ins,
html body .m4h-main-price-display ins *,
html body .m4h-main-price-display>.amount,
html body .m4h-main-price-display>bdi {
    color: #d9261c !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

html body .m4h-main-price-display del,
html body .m4h-main-price-display del *,
html body .m4h-main-price-display del .amount,
html body .m4h-main-price-display del bdi {
    color: #888888 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    opacity: 0.85 !important;
}

/* Force Red Sale Price (ins) on the LEFT (order 1) & Gray Regular Price (del) on the RIGHT (order 2) */
html body .price ins,
html body .price-wrapper ins,
html body .product-summary .price ins,
html body .product-info .price ins,
html body .m4h-main-price-display ins,
html body .product-card .price ins,
html body .products .price ins {
    order: 1 !important;
}

html body .price del,
html body .price-wrapper del,
html body .product-summary .price del,
html body .product-info .price del,
html body .m4h-main-price-display del,
html body .product-card .price del,
html body .products .price del {
    order: 2 !important;
    margin-left: 4px !important;
}

/* UNIFORM MAIN PRICE ON ALL PRODUCT CARDS (SALE & REGULAR NON-SALE PRICES) */

/* html body .price-wrapper .price,
html body .price-wrapper .amount,
html body .price-wrapper bdi,
html body .product-small .price,
html body .product-small .price .amount,
html body .product-small .price bdi,
html body .box-text .price,
html body .box-text .price .amount,
html body .box-text .price bdi,
html body .product-card .price,
html body .product-card .price .amount,
html body .product-card .price bdi,
html body .products .price,
html body .products .price .amount,
html body .products .price bdi {
    color: #d9261c !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
} */

/* Quick View Overlay Fix */
html body .box-image a.quick-view,
html body .box-image .quick-view,
html body .product-small .box-image a.quick-view,
html body .grid-tools a.quick-view,
html body a.quick-view.quick-view-added {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    padding: 0 10px !important;
    background: rgba(30, 41, 59, 0.9) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-radius: 0 0 10px 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.25s ease-in-out !important;
    z-index: 25 !important;
    margin: 0 !important;
    inset: auto 0 0 0 !important;
    box-shadow: none !important;
    transform: translateY(100%) !important;
}

html body .box-image:hover a.quick-view,
html body .box-image:hover .quick-view,
html body .box:hover a.quick-view,
html body .product-small:hover a.quick-view,
html body .grid-tools:hover a.quick-view {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Skeleton Loading Animation */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes skeleton-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.65;
    }
}

html.m4h-skeleton-enabled body .skeleton-shimmer,
html.m4h-skeleton-enabled body .skeleton-box,
html.m4h-skeleton-enabled body .skeleton-img,
html.m4h-skeleton-enabled body .skeleton-thumb,
html.m4h-skeleton-enabled body .skeleton-text,
html.m4h-skeleton-enabled body .skeleton-title,
html.m4h-skeleton-enabled body .skeleton-btn {
    background: #e2e8f0 linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 20%, #ffffff 50%, #cbd5e1 80%, #e2e8f0 100%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite, skeleton-pulse 1.8s ease-in-out infinite !important;
    color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    user-select: none !important;
    pointer-events: none !important;
    border-radius: 8px !important;
}

html.m4h-skeleton-enabled body .skeleton-product-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

html.m4h-skeleton-enabled body .skeleton-product-card .skeleton-thumb {
    width: 100% !important;
    height: 200px !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
}

html.m4h-skeleton-enabled body .skeleton-product-card .skeleton-title {
    height: 18px !important;
    width: 85% !important;
    margin-bottom: 10px !important;
}

html.m4h-skeleton-enabled body .skeleton-product-card .skeleton-text {
    height: 14px !important;
    width: 50% !important;
}

/* Product detail: keep sales quantity aligned with the price. */
html body.single-product .product-summary .m4h-price-sales-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    /* gap: 8px 14px !important; */
    margin: 10px 0;
}

/* html body.single-product .product-summary .m4h-price-sales-row .m4h-main-price-display {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    margin: 0 !important;
} */

html body.single-product .product-summary .m4h-price-sales-row .all-sales {
    display: inline-block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    color: #d9261c !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}


.section-title-normal,
.section-title-main {
    border: none !important;
    font-size: clamp(14px, 3vw, 18px) !important;
}


/* CUSTOM LABEL RATING IN PRODUCT CART  */
.products .m4h-rating-sold-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2px 4px !important;
    width: 100% !important;
    margin: 3px 0 !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
}

.dattruoc .btn-dathang,
.btn-dathang {
    background: #ffffff !important;
    color: #16a34a !important;
    border: 1.5px solid #16a34a !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.1) !important;
    transition: all 0.2s ease !important;
}