/* ==========================================================================
   0. DYNAMIC THEME SETTING CONTAINER CENTERING & RESPONSIVE ALIGNMENT
   ========================================================================== */
.container,
.container-width,
.full-width .container {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {

    .container,
    .container-width {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ==========================================================================
   1. PC HEADER GLASSMORPHISM, PILL SEARCH & STRICT SINGLE-LINE MENU
   ========================================================================== */
.sticky-add-to-cart__product .product-title-small {
    line-height: 1;
    margin-right: 1em;
    max-width: 180px;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 30px !important;
}

/* Glassmorphic Header khi cuộn trang */
@media not all {

    #header.stuck,
    .header-wrapper.stuck {
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    }

    /* Rounded Pill Search Bar 30px */
    .header-search input[type="search"],
    .header-search-form input[type="search"],
    form.searchform input[type="search"],
    .search-wrapper input {
        height: 40px !important;
        border-radius: 30px !important;
        border: 1.5px solid #cbd5e1 !important;
        background: #f8fafc !important;
        padding: 0 20px 0 42px !important;
        font-size: 13px !important;
        color: #1e293b !important;
        transition: all 0.25s ease !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    }

    .header-search input[type="search"]:focus,
    form.searchform input[type="search"]:focus {
        background: #ffffff !important;
        border-color: #f0683a !important;
        box-shadow: 0 0 0 3px rgba(240, 104, 58, 0.15) !important;
    }

    /* Positioning Search Icon inside search bar */
    .header-search button[type="submit"],
    form.searchform button[type="submit"] {
        left: 8px !important;
        right: auto !important;
        background: transparent !important;
        border: none !important;
        color: #64748b !important;
    }

    /* Header Navigation Menu Container - Ép KHÔNG ĐƯỢC NHẢY HÀNG (flex-wrap: nowrap) */
    .header-nav .nav,
    .nav-line-bottom,
    .header-bottom .nav,
    #header .nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    .header-nav .nav>li,
    .nav-line-bottom>li,
    .header-bottom .nav>li {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .header-nav .nav>li>a,
    .nav-line-bottom>li>a,
    .header-bottom .nav>li>a {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        padding: 6px 6px !important;
        letter-spacing: 0px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        position: relative;
        transition: color 0.25s ease !important;
    }

    .nav>li>a:hover {
        color: #f0683a !important;
    }

    /* Menu Item Hover Underline Indicator */
    .nav>li>a::after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 5px;
        right: 5px;
        height: 2px;
        background: #f0683a;
        border-radius: 2px;
        transform: scaleX(0);
        transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    }


    .nav>li:hover>a::after,
    .nav>li.current-menu-item>a::after {
        transform: scaleX(1);
    }


    /* Header Cart & Account Elevated Buttons */
    .header-nav .cart-item a.header-cart-link,
    .header-nav .account-item a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 14px !important;
        border-radius: 20px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        transition: all 0.25s ease !important;
    }

    .header-nav .cart-item a.header-cart-link:hover,
    .header-nav .account-item a:hover {
        border-color: #f0683a !important;
        box-shadow: 0 4px 12px rgba(240, 104, 58, 0.15) !important;
        transform: translateY(-1px) !important;
    }

}

/* ===========================================================================
   2. HOMEPAGE SECTIONS OVERHAUL (16px Elevation & Clean Layout)
   ========================================================================== */

/* Section Outer Spacing & Clean Typography */
/* .section {
    padding: 35px 0 !important;
}

.section-title {
    margin-bottom: 25px !important;
} */

.section-title b {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.4px !important;
}

/* Section Header "Xem Tất Cả" Button */
.section-title-right a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.section-title-right a:hover {
    background: #f0683a !important;
    color: #ffffff !important;
}

/* Homepage Category Boxes & Banners */
.box-category,
.banner-grid,
.banner-box,
.img-has-hover {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.box-category:hover,
.banner-grid:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1) !important;
}

/* Homepage Product Cards 16px Elevation */
.product-card,
.product-box,
.col-inner>.box {
    border-radius: 16px !important;
    /* border: 1px solid #f1f5f9 !important; */
    background: #ffffff !important;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important; */
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.product-card:hover,
.product-box:hover {
    transform: translateY(-6px) !important;
    /* box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08) !important; */
    border-color: #cbd5e1 !important;
}

/* Product Card Title Giới Hạn Tối Đa 2 Dòng */
.product-title,
.product-title a,
.product-name,
.product-name a,
.m4h-fs-product-card .product-title,
.m4h-fs-product-card .product-title a,
.products .product-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: 2.6em !important;
    max-height: 2.6em !important;
    line-height: 1.3em !important;
    word-break: break-word !important;
    font-size: 18.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 4px !important;
    transition: color 0.2s ease !important;
}

.product-title a:hover {
    color: #c2410c !important;
}

/* Sale Price / Default Amount */
ins .amount,
ins bdi,
.price>.amount,
.price>bdi {
    font-weight: 800 !important;
    color: #d9261c !important;
}

/* Regular Price before discount (gạch ngang màu xám #888888, nét mảnh 400) */
del,
del .amount,
del bdi,
.price del,
.price del .amount,
.price del bdi {
    font-weight: 400 !important;
    color: #888888 !important;
    text-decoration: line-through !important;
    font-size: 0.75em !important;
    opacity: 0.9 !important;
}

/* Homepage Service / Commitment Feature Bar */
.icon-box,
.feature-box {
    border-radius: 14px !important;
    background: #ffffff !important;
    padding: 16px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease !important;
}

.icon-box:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
    border-color: #cbd5e1 !important;
}

/* ==========================================================================
   3. SINGLE PRODUCT PAGE: MODERN PRICE DISPLAY & LUXURY QUANTITY SELECTOR
   ========================================================================== */

/* Container giá bán sản phẩm */
.product-summary .price,
.product-page-price,
.product-info .price,
.single-product .price,
.single-product p.price,
p.price.product-page-price {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 14px 0 16px 0 !important;
}

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

/* 1. UNIFORM MAIN PRICE ON ALL PRODUCT CARDS (SALE PRICE & REGULAR NON-SALE PRICE - RED #d9261c, BOLD 800, 1.05rem) */
/* .price-wrapper .price,
.price-wrapper .amount,
.price-wrapper bdi,
.price-wrapper span.woocommerce-Price-amount,
.product-small .price,
.product-small .price .amount,
.product-small .price bdi,
.product-small .price span.woocommerce-Price-amount,
.box-text .price,
.box-text .price .amount,
.box-text .price bdi,
.box-text .price span.woocommerce-Price-amount,
.product-card .price,
.product-card .price .amount,
.product-card .price bdi,
.product-card .price span.woocommerce-Price-amount,
.product-box .price,
.product-box .price .amount,
.product-box .price bdi,
.products .price,
.products .price .amount,
.products .price bdi,
.products .price span.woocommerce-Price-amount,
.grid-style-3 .price,
.grid-style-3 .price .amount,
.grid-style-3 .price bdi,
.flash-sale .price,
.flash-sale .price .amount,
.flash-sale .price bdi,
.price ins,
.price ins *,
.price-wrapper ins,
.price-wrapper ins * {
    color: #d9261c !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    letter-spacing: -0.3px !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) */
del,
del *,
del .amount,
del bdi,
.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 *,
del span.amount {
    color: #888888 !important;
    font-size: 0.6rem !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    opacity: 0.85 !important;
    margin-left: 0px !important;
    display: inline-block !important;
}

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

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

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

/* Ẩn hoàn toàn khung giá biến thể bị trùng lặp ở dưới */
.single_variation_wrap .single_variation .price,
.single_variation .woocommerce-variation-price,
.woocommerce-variation-price,
.single_variation .price {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Tùy chỉnh Nút Tăng Giảm Số Lượng + - Sang Trọng */
.quantity,
.product-info .quantity,
form.cart .quantity {
    display: inline-flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 2px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    margin-right: 12px !important;
}

.quantity .minus,
.quantity .plus,
.quantity input.minus,
.quantity input.plus,
.quantity button.minus,
.quantity button.plus {
    width: 36px !important;
    height: 36px !important;
    line-height: 34px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    color: #1e293b !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.quantity .minus:hover,
.quantity .plus:hover,
.quantity input.minus:hover,
.quantity input.plus:hover,
.quantity button.minus:hover,
.quantity button.plus:hover {
    background: #f0683a !important;
    color: #ffffff !important;
    border-color: #f0683a !important;
    transform: scale(1.06) !important;
}

.quantity input.qty,
.quantity input[type="number"] {
    width: 44px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ==========================================================================
   4. LIGHTHOUSE ACCESSIBILITY & CONTRAST ENHANCEMENTS
   ========================================================================== */

/* Nút Đặt Hàng Trước Zalo: Viền xanh, chữ xanh, nền trắng */
.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;
}

.dattruoc .btn-dathang:hover,
.btn-dathang:hover {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border-color: #15803d !important;
}

/* Tiêu đề sản phẩm trên toàn trang */
.product-title a,
.product-card .product-title a {
    color: #0f172a !important;
    /* Đen đậm dễ đọc 100% */
}

/* Ẩn hoàn toàn phần tử lấy focus khi aria-hidden="true" */
[aria-hidden="true"] a,
[aria-hidden="true"] button,
[aria-hidden="true"] input {
    pointer-events: none !important;
}

/* Giá sale vs Giá trước khi giảm trên tất cả thẻ sản phẩm (FULL Flash Sale Red #d9261c & Bold 900) */
/* .m4h-fs-product-card .price-wrapper ins .amount,
.m4h-fs-product-card .price-wrapper ins bdi,
.product-card .price ins .amount,
.product-card .price ins bdi,
.products .price ins .amount,
.products .price ins bdi,
.box-text .price ins .amount,
.box-text .price ins bdi,
.price-wrapper ins .amount,
.price-wrapper ins bdi,
.product-small .price ins .amount,
.product-small .price ins bdi {
    color: #d9261c !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
} */

.m4h-fs-product-card .price-wrapper del,
.m4h-fs-product-card .price-wrapper del .amount,
.m4h-fs-product-card .price-wrapper del bdi,
.product-card .price del,
.product-card .price del .amount,
.product-card .price del bdi,
.products .price del,
.products .price del .amount,
.products .price del bdi,
.box-text .price del,
.box-text .price del .amount,
.box-text .price del bdi,
.price-wrapper del,
.price-wrapper del .amount,
.price-wrapper del bdi,
.product-small .price del,
.product-small .price del .amount,
.product-small .price del bdi {
    color: #64748b !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-decoration: line-through !important;
    opacity: 1 !important;
    /* margin-left: 6px !important; */
}

/* ==========================================================================
   PRODUCT CARD STOCK PROGRESS BAR & BADGE ("CÒN X SUẤT")
   ========================================================================== */
.m4h-flashsale-progress {
    margin-top: 8px !important;
    margin-bottom: 6px !important;
    font-family: inherit !important;
}

.m4h-flashsale-progress-bar {
    position: relative !important;
    width: 100% !important;
    height: 18px !important;
    background: #fff1f2 !important;
    /* Phông nền hồng nhạt */
    border: 1px solid #fecdd3 !important;
    /* Viền đỏ nhạt */
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.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;
}

.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;
    /* Màu đỏ sẫm sắc nét trên thanh */
    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;
}

/* ==========================================================================
   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;
}

.product-small:hover,
.product-card:hover,
.products .box:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03) !important;
    border-color: #cbd5e1 !important;
    border: none !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: 1.18rem !important;
    font-weight: 900 !important;
    color: #d9261c !important;
    letter-spacing: -0.3px !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: 0.85rem !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;
}

/* "Xem tất cả" links in the white homepage product sections. */
.title-selection .section-title>a {
    color: #d9261c !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   5. SINGLE PRODUCT BUY BOX 2-ROW LAYOUT & CHAMPAGNE NUDE BUTTONS (DESKTOP & MOBILE)
   ========================================================================== */

/* 1. Reset Form & Flexbox Containers */
form.cart,
form.cart .form-row,
.single_variation_wrap,
.woocommerce-variation-add-to-cart,
.single_variation_wrap .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    text-align: left !important;
}

/* Override text-center alignment from theme / tangtoc-shop.css */
.text-center form.cart,
.text-center .woocommerce-variation-add-to-cart,
.product-info.text-center form.cart,
.product-summary.text-center form.cart {
    justify-content: flex-start !important;
}

form.cart>*,
form.cart .form-row>*,
.woocommerce-variation-add-to-cart>* {
    margin: 0 !important;
}

/* 2. Row 1 Left: Quantity Picker */
.quantity,
form.cart .quantity,
form.cart .form-row .quantity,
.product-info .quantity,
.single-product .quantity,
.woocommerce-variation-add-to-cart .quantity,
form.cart> :where(.ux-quantity, .quantity),
form.cart .form-row> :where(.ux-quantity, .quantity) {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1.5px solid #dcdfe4 !important;
    border-radius: 10px !important;
    padding: 2px !important;
    box-shadow: none !important;
}

/* 3. Row 1 Right: "THÊM VÀO GIỎ" Button */
button.single_add_to_cart_button,
form.cart button.single_add_to_cart_button,
form.cart .form-row button.single_add_to_cart_button,
.product-info form.cart button.single_add_to_cart_button,
.single-product form.cart button.single_add_to_cart_button,
.woocommerce-variation-add-to-cart button.single_add_to_cart_button,
button#btn-add-to-cart,
form.cart> :where(.single_add_to_cart_button, #btn-add-to-cart),
form.cart .form-row> :where(.single_add_to_cart_button, #btn-add-to-cart) {
    flex: 1 1 0% !important;
    min-width: 90px !important;
    width: auto !important;
    height: 34px !important;
    line-height: 34px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    background: #ebd5b3 !important;
    color: #3d2314 !important;
    /* Chữ nâu Espresso đậm 100% dễ đọc */
    border: 1.5px solid #d4b88f !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(235, 213, 179, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
}

button.single_add_to_cart_button:hover,
button#btn-add-to-cart:hover {
    background: #dfbe96 !important;
    color: #231209 !important;
    transform: translateY(-1px) !important;
}

button.single_add_to_cart_button i,
form.cart button.single_add_to_cart_button i {
    display: none !important;
}

/* 4. Row 2 (Summary Page Only): "MUA NGAY" Button (Full Width 100%) */
.product-summary form.cart button.ux-buy-now-button:not(.m4h-sticky-buy-now-btn),
.product-info form.cart button.ux-buy-now-button:not(.m4h-sticky-buy-now-btn),
.single-product .summary form.cart button.ux-buy-now-button:not(.m4h-sticky-buy-now-btn),
.single-product .product-info form.cart button.ux-buy-now-button:not(.m4h-sticky-buy-now-btn) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    line-height: 44px !important;
    margin: 4px 0 0 0 !important;
    padding: 0 16px !important;
    background: #d9261c !important;
    /* Đỏ rực rỡ nổi bật tuyệt đối */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 14px rgba(217, 38, 28, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
}

button.ux-buy-now-button:hover,
form.cart a.ux-buy-now-button:hover {
    background: #c21a11 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* 5. Tắt các pseudo element gây lệch màu của Flatsome */
button.single_add_to_cart_button:before,
button.single_add_to_cart_button:after,
button.ux-buy-now-button:before,
button.ux-buy-now-button:after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   6. GIFT BOX, PROMOTION & VIDEO BUTTON ENHANCEMENTS
   ========================================================================== */

/* Nút Xem Video định vị badge tròn 42px ở góc dưới bên trái ảnh chính */
.image-tools .product-video-popup,
.imgvideo.product-video-popup,
a.mivideo.product-video-popup img {
    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 14px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.25s ease !important;
    display: inline-block !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

a.mivideo.product-video-popup:hover img,
.imgvideo.product-video-popup:hover {
    transform: scale(1.12) !important;
}

/* Khung Chốt Deal – Nhận Quà (.gift-box) High-Converting Gift Box */
.gift-box {
    background: linear-gradient(135deg, #fffcf7 0%, #fff7ed 100%) !important;
    border: 1.5px dashed #f59e0b !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    margin-top: 18px !important;
    margin-bottom: 18px !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.12) !important;
    position: relative !important;
}

.gift-box .title-gift-box {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.gift-badge-pulse {
    background: #d9261c !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.gift-main-heading {
    color: #9a3412 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

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

.gift-list li {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #fef3c7 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease !important;
}

.gift-list li:hover {
    border-color: #f59e0b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15) !important;
}

.gift-list .image-gift {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid #fed7aa !important;
}

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

.gift-zero-badge {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    background: #d9261c !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: 1px 5px !important;
    border-top-left-radius: 6px !important;
}

.gift-detail {
    flex: 1 !important;
}

.gift-list .title-gift {
    color: #1e293b !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    display: block !important;
    margin-bottom: 3px !important;
}

.gift-price-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.gift-old-price {
    color: #94a3b8 !important;
    font-size: 12px !important;
    text-decoration: line-through !important;
}

.gift-free-price {
    color: #16a34a !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !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;
}

/* ==========================================================================
   7. 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;
}

/* Header Tab Bar Container */
.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 {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Tab Title Link Style (Nền trong suốt, chữ 15px chuẩn, viền dưới 3px đỏ khi active) */
.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 {
    color: #0f172a !important;
    background: transparent !important;
}

/* Active State (Chữ màu Đỏ #d9261c, gạch chân 3px đỏ, KHÔNG viền vàng hay nút đỏ phình) */
.product-tabs .nav-tabs>li.active>a,
.woocommerce-tabs ul.tabs>li.active>a,
ul.nav-line-bottom>li.active>a {
    color: #d9261c !important;
    /* Đỏ M4H */
    border-bottom: 3px solid #d9261c !important;
    background: transparent !important;
    font-weight: 800 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Tắt các pseudo elements gạch chân cũ của Flatsome */
.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;
}

/* Khung nội dung bên trong Tab */
.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;
}

/* ==========================================================================
   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;
    /* Tỷ lệ 1:1 vuông vắn */
    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;
}

.badge-container .onsale,
.badge-container .badge-inner span,
.badge-container .badge span,
.badge-container span.onsale {
    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;
}

.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) & BADGE CONTAINER IN BOX IMAGE */
.box-image .badge-container,
.product-small .box-image .badge-container,
.product-card .box-image .badge-container {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    pointer-events: none !important;
}

.m4h-badge-gift {
    background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 7px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 6px 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;
    margin: 0 !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,
.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;
}

/* Ẩ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;
}

/* Unified search action and product-image labels across desktop, tablet and mobile. */
#header .header-search>a,
#header a.header-search-link,
#header .header-nav a:has(> .icon-search),
#header .header-nav a:has(> i.icon-search) {
    width: clamp(36px, 3.15vw, 44px) !important;
    height: clamp(36px, 3.15vw, 44px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

#header .header-search .icon-search,
#header .header-search i.icon-search,
#header .header-nav a:has(> .icon-search) .icon-search,
#header .header-nav a:has(> i.icon-search) i {
    font-size: clamp(16px, 1.45vw, 20px) !important;
    line-height: 1 !important;
}

.products .box-image .badge-container {
    top: clamp(5px, 0.65vw, 8px) !important;
    left: clamp(5px, 0.65vw, 8px) !important;
    right: clamp(5px, 0.65vw, 8px) !important;
}

.products .box-image .m4h-gift-badge-in-box,
.products .box-image .m4h-gift-badge-in-image {
    top: clamp(5px, 0.65vw, 8px) !important;
    left: clamp(5px, 0.65vw, 8px) !important;
}

.products .box-image .badge-container .onsale,
.products .box-image .m4h-badge-gift,
.products .box-image [class*="badge"]:not(.badge-container):not(.m4h-gift-badge-in-box):not(.m4h-gift-badge-in-image),
.products .box-image [class*="label"] {
    font-size: clamp(8px, 0.82vw, 11px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    padding: clamp(2px, 0.3vw, 4px) clamp(4px, 0.58vw, 7px) !important;
    border-radius: clamp(3px, 0.35vw, 5px) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16) !important;
}

.products .box-image .badge-container .badge-inner,
.products .box-image .badge-container .badge-inner span,
.products .box-image .badge-container .badge span {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Third-party FreeShip / delivery badges are often injected directly into the image. */
.products .box-image>span:not(.onsale),
.products .box-image [class*="free" i],
.products .box-image [class*="ship" i],
.products .box-image [class*="free"],
.products .box-image [class*="ship"] {
    font-size: clamp(7.5px, 0.74vw, 10px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    padding: clamp(2px, 0.24vw, 3px) clamp(4px, 0.48vw, 6px) !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
}

/* Final responsive overrides for product cards, search action and single-product mobile layout. */
#header a:has(.icon-search),
#header button:has(.icon-search) {
    width: clamp(26px, 3.15vw, 34px) !important;
    height: clamp(26px, 3.15vw, 34px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: none !important;
}

#header a:has(.icon-search) .icon-search,
#header button:has(.icon-search) .icon-search {
    font-size: clamp(16px, 1.45vw, 20px) !important;
    line-height: 1 !important;
}

@media (max-width: 849px) {

    body .products .box-text .price,
    body .products .box-text .price .amount,
    body .products .box-text .price bdi,
    body .products .box-text .price .woocommerce-Price-amount,
    body .product-card .price .amount,
    body .product-card .price bdi,
    body .price-wrapper .price .amount,
    body .price-wrapper .price bdi {
        font-size: clamp(11px, 4vw, 13px) !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    body .products .box-text .price del,
    body .products .box-text .price del .amount,
    body .products .box-text .price del bdi,
    body .product-card .price del .amount,
    body .product-card .price del bdi {
        font-size: clamp(9px, 2.35vw, 10px) !important;
    }

    .price-wrapper ins * {
        font-size: 0.6rem !important;
    }

    .single-product .product-main,
    .single-product .product-page,
    .single-product .product-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .single-product .product-gallery,
    .single-product .product-images,
    .single-product .product-info,
    .single-product .product-summary {
        margin-bottom: 14px !important;
    }

    .single-product .product-gallery img,
    .single-product .product-images img {
        border-radius: 10px !important;
    }

    .single-product .product-title,
    .single-product h1.product-title {
        margin: 4px 0 8px !important;
        font-size: clamp(20px, 5.8vw, 25px) !important;
        line-height: 1.22 !important;
    }

    .single-product .product-summary .price,
    .single-product .product-info .price {
        gap: 7px !important;
        margin: 8px 0 12px !important;
    }

    .single-product .product-summary .price .amount,
    .single-product .product-summary .price bdi,
    .single-product .product-info .price .amount,
    .single-product .product-info .price bdi {
        font-size: clamp(19px, 5.4vw, 23px) !important;
    }

    .single-product form.cart,
    .single-product .variations_form {
        margin: 14px 0 !important;
        padding: 12px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        background: #ffffff !important;
    }

    .single-product form.cart .button,
    .single-product form.cart button {
        min-height: 42px !important;
        font-size: clamp(12px, 3.4vw, 14px) !important;
    }

    .single-product .product_meta,
    .single-product .woocommerce-product-details__short-description,
    .single-product .product-footer {
        font-size: clamp(12px, 3.35vw, 14px) !important;
        line-height: 1.5 !important;
    }
}

/* Badge Quà Tặng (JS move vào .box-image) - .box-image có position:relative → badge nằm đúng góc trên */
.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;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !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;
}

/* Mobile type scale: consistent reading hierarchy from 320px phones to tablets. */
@media (max-width: 849px) {
    body {
        font-size: clamp(13px, 3.55vw, 15px);
        line-height: 1.45;
    }

    .section-title b,
    .section-title span,
    .section-title-main,
    .m4h-fs-title {
        font-size: clamp(17px, 5vw, 21px) !important;
        line-height: 1.25 !important;
    }

    .products .product-title,
    .products .product-title a,
    .product-card .product-title,
    .product-card .product-title a,
    .product-small .name,
    .product-small .name a {
        font-size: clamp(11.5px, 3.35vw, 13.5px) !important;
        line-height: 1.35 !important;
    }

    .products .price,
    .products .price .amount,
    .products .price bdi,
    .products .price .woocommerce-Price-amount,
    .product-card .price,
    .product-card .price .amount,
    .product-card .price bdi,
    .m4h-fs-product-card .price-wrapper ins .amount,
    .m4h-fs-product-card .price-wrapper ins bdi,
    .m4h-fs-product-card .price-wrapper ins {
        font-size: clamp(12px, 3.4vw, 13.5px) !important;
        line-height: 1.25 !important;
    }

    .products .price del,
    .products .price del .amount,
    .products .price del bdi,
    .product-card .price del,
    .product-card .price del .amount,
    .product-card .price del bdi,
    .m4h-fs-product-card .price-wrapper del,
    .m4h-fs-product-card .price-wrapper del .amount,
    .m4h-fs-product-card .price-wrapper del bdi {
        font-size: clamp(9.5px, 2.5vw, 10.5px) !important;
    }

    .products .box-text .category,
    .products .box-text .cat-label,
    .products .box-text .is-divider,
    .products .star-rating+span,
    .products .woocommerce-review-link,
    .products .da-ban,
    .m4h-fs-product-card .da-ban,
    .m4h-fs-product-card .m4h-rating-val,
    .m4h-fs-product-card .m4h-review-cnt {
        font-size: clamp(9px, 2.25vw, 10.5px) !important;
        margin: 0 auto !important;
    }

    .box-category .box-text h5,
    .box-category .box-text .uppercase,
    .box-category .box-text span {
        font-size: clamp(12px, 3.55vw, 14px) !important;
        line-height: 1.3 !important;
    }

    .single-product .product-title,
    .single-product h1.product-title,
    .product-main .product-title {
        font-size: clamp(21px, 6.2vw, 28px) !important;
        line-height: 1.22 !important;
    }

    .single-product .price,
    .single-product .price .amount,
    .single-product .price bdi,
    .single-product .woocommerce-Price-amount {
        font-size: clamp(19px, 5.7vw, 25px) !important;
        line-height: 1.2 !important;
    }

    .single-product .price del,
    .single-product .price del .amount,
    .single-product .price del bdi {
        font-size: clamp(12px, 3.5vw, 15px) !important;
    }

    .product-section-title,
    .related-products-wrapper .product-section-title,
    .upsells-wrapper .product-section-title,
    .shop-container .woocommerce-result-count {
        font-size: clamp(12px, 3.4vw, 14px) !important;
    }

    .m4h-fs-product-card .product-title,
    .m4h-fs-product-card .product-title a,
    .m4h-fs-progress-text,
    .m4h-buy-now-btn {
        font-size: clamp(10px, 3vw, 12px) !important;
    }
}

/* The cart remains accessible from the mobile bottom navigation. */
@media (max-width: 849px) {

    #header .header-nav .cart-item,
    #header .header-nav .header-cart,
    #header li.html.header-cart,
    #header li.cart-item {
        display: none !important;
    }
}

/* Compact desktop header: keep navigation on one line and leave Flatsome's
   layout rules in charge of the search field. */
@media (min-width: 850px) {
    #masthead .header-inner {
        align-items: center !important;
        min-height: 64px !important;
    }

    #masthead .header-nav-main.nav-left {
        align-items: center !important;
        justify-content: center !important;
    }

    #masthead .header-search-form {
        margin: 0 !important;
        width: 510px !important;
    }

    #masthead .header-search-form input[type="search"] {
        border: 1px solid #cbd5e1 !important;
        border-radius: 22px !important;
        box-shadow: none !important;
        height: 38px !important;
        padding-left: 15px !important;
    }

    #masthead .header-search-form .ux-search-submit {
        background: transparent !important;
        border: 0 !important;
        color: #172334 !important;
        height: 38px !important;
        padding: 0 12px !important;
    }

    #masthead .header-nav-main.nav-right {
        align-items: center !important;
        gap: 8px;
    }

    #masthead .header-nav-main.nav-right .header-button>a {
        align-items: center !important;
        border-radius: 50% !important;
        border: none !important;
        box-shadow: none !important;
        display: inline-flex !important;
        height: 36px !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        width: 36px !important;
        font-size: 0.9em !important;
    }

    #wide-nav {
        border: 0 !important;
        box-shadow: none !important;
        min-height: 43px !important;
    }

    #wide-nav>.flex-row.container {
        max-width: 1210px !important;
    }

    #wide-nav .flex-center {
        min-width: 0;
        width: 100%;
    }

    /* #wide-nav .header-bottom-nav {
        align-items: center !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        min-height: 43px !important;
        overflow: visible !important;
        width: 100% !important;
    }

    #wide-nav .header-bottom-nav>li {
        flex: 0 0 auto;
    }

    #wide-nav .header-bottom-nav>li.has-dropdown {
        position: relative;
    }

    #wide-nav .header-bottom-nav .nav-dropdown {
        z-index: 10010 !important;
    }

    #wide-nav .header-bottom-nav>li>a {
        font-size: 12px !important;
        line-height: 43px !important;
        padding: 0 3px !important;
        white-space: nowrap;
    }

    #wide-nav .header-bottom-nav .ux-menu-icon {
        height: 18px !important;
        margin-right: 4px !important;
        width: 18px !important;
    } */

    .m4h-fs-product-card .price-wrapper {
        align-items: baseline !important;
        display: flex !important;
        gap: 7px !important;
        justify-content: flex-start !important;
        white-space: nowrap;
    }

    .m4h-fs-product-card .price-wrapper ins,
    .m4h-fs-product-card .price-wrapper del {
        margin: 0 !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;
}

/* ==========================================================================
   QUICK VIEW FIX (SỬA NÚT XEM NHANH KHÔNG BỊ PHỦ HẾT ẢNH SẢN PHẨM)
   ========================================================================== */
.box-image a.quick-view,
.box-image .quick-view,
.product-small .box-image a.quick-view,
.grid-tools a.quick-view,
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;
}

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

/* ==========================================================================
   SKELETON SHIMMER LOADER SYSTEM (AJAX LOADMORE & FILTER SKELETON)
   ========================================================================== */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

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

html.m4h-skeleton-enabled .skeleton-shimmer,
html.m4h-skeleton-enabled .skeleton-box,
html.m4h-skeleton-enabled .skeleton-img,
html.m4h-skeleton-enabled .skeleton-thumb,
html.m4h-skeleton-enabled .skeleton-text,
html.m4h-skeleton-enabled .skeleton-title,
html.m4h-skeleton-enabled .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;
}

.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;
}

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

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

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