/* Khaisanfood Custom Theme Styling */
/* Batch 04: text-only contrast fixes (homepage) — no layout/button shape changes */
body.home .vertical-navigation .vertical-navigation-header .vertical-navigation-title {
	color: #0a472e !important;
}

body.home .product-block .price .amount,
body.home .product-block .price .amount bdi,
body.home .product-block .price ins .amount bdi {
	color: #1a1a1a !important;
}

body.home .product-block .price .uom {
	color: #3d3d3d !important;
}

body.home .elementor-tabs-wrapper .elementor-tab-title {
	color: #2e2e2e !important;
}

body.home .elementor-tabs-wrapper .elementor-tab-title.elementor-active {
	color: #0d923c !important;
}

/* Cream product-tab sections: dark text on light background (not white on cream) */
body.home .elementor-element-5a860a6 .elementor-button .elementor-button-text,
body.home .elementor-element-0382df1 .elementor-button .elementor-button-text,
body.home .elementor-element-162acd7 .elementor-button .elementor-button-text {
	color: #0a472e !important;
}

body.home .elementor-post__title a {
	color: #1a1a1a !important;
}

body.home .elementor-post__excerpt p {
	color: #3d3d3d !important;
}

body.home .elementor-post__read-more {
	color: #0a472e !important;
}

body.home .elementor-post-date,
body.home .elementor-post-avatar {
	color: #5c5c5c !important;
}

body.home .elementor-widget-icon-list .elementor-icon-list-text {
	color: #2e2e2e !important;
}

body.home .elementor-icon-box-description,
body.home .elementor-icon-box-description a {
	color: #1a1a1a !important;
}

body.home a[href^="mailto:"] {
	color: #0a472e !important;
}

body.home .details .name,
body.home .testimonial .name {
	color: #1a1a1a !important;
}

body.home .details .job,
body.home .testimonial .job {
	color: #4a4a4a !important;
}

body.home h2.elementor-heading-title.elementor-size-default {
	color: #1a1a1a !important;
}

/* Batch 04: h4→h3 for heading order — preserve former h4 look */
body.home h3.elementor-heading-title.khaisanfood-a11y-h4-visual,
body.home h3.elementor-heading-title.khaisanfood-a11y-h4-visual a {
	font-family: "Mulish", Sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #1a1a1a !important;
	margin: 0;
}


/* ==========================================================================
   KSF Mobile Cart Cards Layout (Giao diện thẻ Giỏ hàng chuẩn Mobile)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Triệt tiêu hoàn toàn cuộn ngang */
    .woocommerce-cart .woocommerce,
    .woocommerce-cart-form,
    .woocommerce-cart-form__contents,
    .woocommerce table.shop_table_responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: hidden !important;
        border: none !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Ẩn thead của bảng trên mobile */
    .woocommerce-cart table.shop_table_responsive thead {
        display: none !important;
    }

    .woocommerce-cart table.shop_table_responsive tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
        border: none !important;
    }

    /* 2. CHUYỂN MỖI SẢN PHẨM (TR.CART_ITEM) THÀNH 1 CARD CHUYÊN NGHIỆP */
    .woocommerce-cart table.shop_table_responsive tr.cart_item {
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 12px !important;
        row-gap: 6px !important;
        background: #ffffff !important;
        border: 1.5px solid #e8f0eb !important;
        border-radius: 16px !important;
        padding: 14px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
        position: relative !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Tắt tất cả nhãn attr(data-title) cũ của WooCommerce (GIÁ:, SỐ LƯỢNG:, TẠM TÍNH:) */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td::before {
        display: none !important;
    }

    /* 3. Nút Xóa (Dấu x) ở góc trên bên phải Card */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove a.remove {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: #f3f4f6 !important;
        color: #6b7280 !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove a.remove:hover {
        background: #fee2e2 !important;
        color: #ef4444 !important;
        transform: scale(1.08) !important;
    }

    /* 4. Ảnh sản phẩm (Thumbnail) nằm trọn bên trái */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        width: 80px !important;
        height: 80px !important;
        padding: 0 !important;
        border: 1px solid #edf2ef !important;
        border-radius: 12px !important;
        background: #fbfdfb !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        padding: 4px !important;
        border-radius: 8px !important;
    }

    /* 5. Tên sản phẩm & Chi nhánh */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding: 0 28px 0 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        text-align: left !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name a {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-decoration: none !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name a:hover {
        color: #1a7a3c !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name p,
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name .wcmlim_location_details {
        font-size: 11px !important;
        color: #15803d !important;
        background: #f0fdf4 !important;
        border: 1px solid #bbf7d0 !important;
        border-radius: 6px !important;
        padding: 2px 8px !important;
        margin: 2px 0 0 0 !important;
        width: fit-content !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
    }

    /* 6. Đơn giá */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price {
        grid-column: 2 !important;
        grid-row: 2 !important;
        padding: 2px 0 0 0 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 13px !important;
        color: #64748b !important;
        text-align: left !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price::before {
        content: "Đơn giá: " !important;
        display: inline !important;
        font-size: 12px !important;
        color: #94a3b8 !important;
        font-weight: 500 !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price bdi {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #334155 !important;
    }

    /* 7. Hàng dưới cùng của Card: Bộ nút số lượng (trái) + Tạm tính (phải) */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity {
        grid-column: 1 !important;
        grid-row: 3 !important;
        padding: 10px 0 0 0 !important;
        border: none !important;
        border-top: 1px dashed #e6efe8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity .quantity {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        height: 34px !important;
        min-height: 34px !important;
        width: 100px !important;
        border: 1.5px solid #d0e7d5 !important;
        border-radius: 8px !important;
        background: #f7faf8 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity .quantity button.minus,
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity .quantity button.plus {
        width: 28px !important;
        height: 34px !important;
        line-height: 34px !important;
        background: transparent !important;
        border: none !important;
        font-size: 16px !important;
        color: #1a7a3c !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        cursor: pointer !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity .quantity input.qty {
        width: 44px !important;
        height: 34px !important;
        border: none !important;
        border-left: 1px solid #e0ece3 !important;
        border-right: 1px solid #e0ece3 !important;
        text-align: center !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        -moz-appearance: textfield !important;
    }

    /* 8. Tạm tính (Subtotal) căn sát lề phải */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal {
        grid-column: 2 !important;
        grid-row: 3 !important;
        padding: 10px 0 0 0 !important;
        border: none !important;
        border-top: 1px dashed #e6efe8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        text-align: right !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal::before {
        content: "Tạm tính: " !important;
        display: inline !important;
        font-size: 12px !important;
        color: #64748b !important;
        font-weight: 500 !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal bdi,
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal .amount {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #1a7a3c !important;
    }

    /* 9. Dòng Cập nhật giỏ hàng (Actions) - Ẩn hoàn toàn coupon ở bên trái */
    .woocommerce-cart table.shop_table_responsive tr:not(.cart_item) td.actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
        background: #ffffff !important;
        border: 1px solid #e8f0eb !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        margin-top: 4px !important;
        box-sizing: border-box !important;
    }
    .woocommerce-cart table.shop_table_responsive tr:not(.cart_item) td.actions .coupon,
    .woocommerce-cart table.cart td.actions .coupon,
    .woocommerce-cart .actions .coupon,
    form.woocommerce-cart-form div.coupon {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .woocommerce-cart table.shop_table_responsive tr:not(.cart_item) td.actions button[name="update_cart"] {
        width: 100% !important;
        height: 44px !important;
        border-radius: 10px !important;
        background: #f4f9f5 !important;
        color: #1a7a3c !important;
        border: 1.5px solid #28a745 !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        float: none !important;
    }

    /* 10. Khối tổng tiền (Cart totals) - Trong suốt để hiển thị 2 card riêng biệt */
    .woocommerce-cart .cart-collaterals .cart_totals,
    .woocommerce-cart .cart_totals,
    .cart_totals {
        width: 100% !important;
        float: none !important;
        margin: 18px 0 0 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }
    .woocommerce-cart .cart-collaterals .cart_totals h2 {
        font-size: 18px !important;
        font-weight: 800 !important;
        color: #1a7a3c !important;
        margin: 0 0 14px 0 !important;
        padding-bottom: 8px !important;
        border-bottom: 2px solid #e8f0eb !important;
    }
    .woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
        width: 100% !important;
        border: none !important;
        margin-bottom: 14px !important;
    }
    .woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr th,
    .woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr td {
        padding: 8px 0 !important;
        border-bottom: 1px dashed #e8f0eb !important;
    }
    .woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total th,
    .woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total td {
        border-bottom: none !important;
        padding-top: 12px !important;
    }
    .woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total bdi {
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #e11d48 !important;
    }
    .woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
        width: 100% !important;
        height: 52px !important;
        line-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        background: #1a7a3c !important;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        letter-spacing: 0.3px !important;
        text-transform: uppercase !important;
        box-shadow: 0 6px 18px rgba(26, 122, 60, 0.35) !important;
        transition: all 0.25s ease !important;
        text-decoration: none !important;
    }
    .woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
        background: #156230 !important;
        box-shadow: 0 8px 22px rgba(26, 122, 60, 0.45) !important;
        transform: translateY(-1px) !important;
    }
}

/* Ẩn hoàn toàn khung quantity nếu input bên trong bị ẩn (type=hidden) để không bị ô viền trống rỗng */
.quantity:has(input[type="hidden"]),
.single-product div.quantity:has(input[type="hidden"]) {
    display: none !important;
}

/* ==========================================================================
   [DPS CUSTOM FIX] - 2026-10-12 - Dev: DPS
   Mục đích: Giao diện Bộ chọn số lượng chuẩn Kamereo (UI/UX Zero-CLS, Touch-optimized)
   ========================================================================== */
.ksf-qty-control {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 136px;
    height: 36px;
    background: #f3f4f6;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 2px;
    box-sizing: border-box;
    contain: layout style;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
    margin-top: 4px;
}

.ksf-qty-control.has-items {
    background: #ffffff;
    border-color: #0d923c;
    box-shadow: 0 2px 6px rgba(13, 146, 60, 0.12);
}

.ksf-qty-control.is-loading {
    opacity: 0.85;
}

/* Nút bấm cộng / trừ */
.ksf-qty-control .ksf-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    min-width: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.15s ease;
    outline: none;
    background: transparent;
}

.ksf-qty-control .ksf-qty-plus {
    background: #0d923c;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(13, 146, 60, 0.25);
}

.ksf-qty-control .ksf-qty-plus:hover {
    background: #0a7731;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(13, 146, 60, 0.35);
}

.ksf-qty-control .ksf-qty-plus:active {
    transform: translateY(1px);
    box-shadow: none;
}

.ksf-qty-control .ksf-qty-minus {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.ksf-qty-control .ksf-qty-minus:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
}

.ksf-qty-control .ksf-qty-minus:active {
    background: #e5e7eb;
}

.ksf-qty-control .ksf-qty-minus.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    background: transparent;
    border-color: transparent;
    color: #9ca3af;
    box-shadow: none;
}

/* Ô input số lượng */
.ksf-qty-control .ksf-qty-input {
    flex: 1;
    width: 36px;
    min-width: 28px;
    height: 100%;
    margin: 0;
    padding: 0 4px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    outline: none;
    box-shadow: none;
    -moz-appearance: textfield;
}

.ksf-qty-control .ksf-qty-input::-webkit-outer-spin-button,
.ksf-qty-control .ksf-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Nút biến thể Tùy chọn quy cách */
.ksf-qty-control.is-variable,
.ksf-qty-control.is-out-of-stock {
    background: transparent;
    border: none;
    padding: 0;
    max-width: 100%;
}

.ksf-qty-control .ksf-variable-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 12px !important;
    background: #edf7f0 !important;
    color: #0d923c !important;
    border: 1.5px solid #0d923c !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.ksf-qty-control .ksf-variable-btn:hover {
    background: #0d923c !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(13, 146, 60, 0.25) !important;
}

.ksf-qty-control .ksf-out-of-stock-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    background: #f3f4f6;
    color: #9ca3af;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

/* ==========================================================================
   KSF Product Cards Equal Height & Horizontal Baseline Alignment
   Đảm bảo tất cả khung chọn số lượng nằm trên cùng 1 hàng ngang (thẳng tắp)
   ========================================================================== */
ul.products,
.woocommerce ul.products,
.woocommerce-carousel ul.products {
    display: flex !important;
}

ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-carousel ul.products li.product,
.slick-slide > div > li.product,
.slick-slide li.product {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

ul.products .slick-track,
.woocommerce-carousel .slick-track {
    display: flex !important;
    align-items: stretch !important;
}

ul.products .slick-slide,
.woocommerce-carousel .slick-slide {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

ul.products .slick-slide > div,
.woocommerce-carousel .slick-slide > div {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 1 auto !important;
}

ul.products li.product .product-block,
.woocommerce ul.products li.product .product-block,
.product-block {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    padding-bottom: 6px !important;
}

.product-block .product-transition {
    flex-shrink: 0 !important;
}

/* Chuẩn hóa chiều cao tiêu đề sản phẩm đồng nhất 44px (tương đương 2 dòng chữ) */
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product-block .woocommerce-loop-product__title {
    min-height: 44px !important;
    height: 44px !important;
    line-height: 22px !important;
    font-size: 14px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
    text-align: center !important;
}

/* Chuẩn hóa chiều cao khối giá sản phẩm (26px) */
ul.products li.product .price,
.woocommerce ul.products li.product .price,
.product-block .price {
    min-height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
}

/* Đẩy khung chọn số lượng xuống đáy card để TẤT CẢ các thẻ trên cùng hàng đều thẳng tắp */
.product-block .ksf-qty-control,
ul.products li.product .ksf-qty-control {
    margin-top: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
}

@media (max-width: 768px) {
    .ksf-qty-control {
        max-width: 100%;
        height: 36px;
    }
    .ksf-qty-control .ksf-qty-btn {
        width: 36px;
        min-width: 36px;
        height: 32px;
    }
}

/* ==========================================================================
   [DPS CUSTOM FIX] - 2026-10-12 - Dev: DPS
   Mục đích:
   1. Triệt tiêu hoàn toàn Side Cart Drawer (khắc phục lỗi sidebar trắng).
   2. Giao diện Voucher Box & Tóm tắt đơn hàng chuẩn Kamereo trên trang giỏ hàng.
   ========================================================================== */

/* 1. Triệt tiêu Side Cart drawer & Backdrop */
.site-header-cart-side,
.cart-side-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 2. Ẩn coupon cũ ở chân bảng sản phẩm bên trái */
.woocommerce-cart table.shop_table_responsive tr:not(.cart_item) td.actions .coupon,
.woocommerce-cart table.cart td.actions .coupon {
    display: none !important;
}

/* 3. Cấu trúc 2 Card bên cột phải: Khải San Voucher + Tóm tắt đơn hàng */
.woocommerce-cart .cart-collaterals .cart_totals {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    float: none !important;
    margin: 18px 0 0 0 !important;
}

/* Card 1: Khải San Voucher (Kamereo style) */
.ksf-cart-voucher-box {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}
.ksf-cart-voucher-box .ksf-voucher-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}
.ksf-cart-voucher-box .ksf-voucher-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.ksf-cart-voucher-box .ksf-voucher-icon {
    display: inline-flex !important;
    align-items: center !important;
    color: #e67e22 !important;
}
.ksf-cart-voucher-box .ksf-voucher-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    letter-spacing: -0.2px !important;
}
.ksf-cart-voucher-box .ksf-voucher-sub {
    font-size: 13px !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
}
.ksf-cart-voucher-box .ksf-voucher-input-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}
.ksf-cart-voucher-box input.ksf-voucher-input {
    flex: 1 !important;
    width: auto !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
    background: #f9fafb !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}
.ksf-cart-voucher-box input.ksf-voucher-input:focus {
    border-color: #0d923c !important;
    background: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(13, 146, 60, 0.15) !important;
}
.ksf-cart-voucher-box button.ksf-voucher-apply-btn {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: #0d923c !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    float: none !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ksf-cart-voucher-box button.ksf-voucher-apply-btn:hover {
    background: #09722e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(13, 146, 60, 0.25) !important;
}
.ksf-cart-voucher-box button.ksf-voucher-apply-btn:disabled,
.ksf-cart-voucher-box button.ksf-voucher-apply-btn.is-loading {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
}
.ksf-cart-voucher-box .ksf-applied-coupons-list {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.ksf-cart-voucher-box .ksf-applied-label {
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}
.ksf-cart-voucher-box .ksf-applied-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.ksf-cart-voucher-box .ksf-applied-coupon-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #065f46 !important;
}
.ksf-cart-voucher-box .ksf-applied-coupon-pill a.ksf-remove-coupon-link {
    color: #ef4444 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 2px !important;
}
.ksf-cart-voucher-box .ksf-applied-coupon-pill a.ksf-remove-coupon-link:hover {
    color: #b91c1c !important;
}

/* Card 2: Tóm tắt đơn hàng (Kamereo style) */
.ksf-cart-summary-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 20px 22px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}
.ksf-cart-summary-card h2 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-transform: none !important;
}
.ksf-cart-summary-card table.shop_table {
    width: 100% !important;
    border: none !important;
    margin-bottom: 16px !important;
}
.ksf-cart-summary-card table.shop_table tr th,
.ksf-cart-summary-card table.shop_table tr td {
    padding: 8px 0 !important;
    border: none !important;
    vertical-align: middle !important;
}
.ksf-cart-summary-card table.shop_table tr th {
    font-weight: 500 !important;
    color: #4b5563 !important;
    font-size: 14px !important;
    text-align: left !important;
}
.ksf-cart-summary-card table.shop_table tr td {
    text-align: right !important;
    font-weight: 600 !important;
    color: #111827 !important;
    font-size: 14.5px !important;
}
.ksf-cart-summary-card table.shop_table tr.order-total th,
.ksf-cart-summary-card table.shop_table tr.order-total td {
    border-top: 1px solid #f3f4f6 !important;
    padding-top: 14px !important;
    padding-bottom: 6px !important;
}
.ksf-cart-summary-card table.shop_table tr.order-total th {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}
.ksf-cart-summary-card table.shop_table tr.order-total td bdi,
.ksf-cart-summary-card table.shop_table tr.order-total td .amount {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0d923c !important;
}
.ksf-cart-summary-card .wc-proceed-to-checkout {
    padding: 0 !important;
    margin: 8px 0 16px 0 !important;
}
.ksf-cart-summary-card .wc-proceed-to-checkout a.checkout-button {
    width: 100% !important;
    height: 48px !important;
    line-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 10px !important;
    background: #0d923c !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    box-shadow: 0 4px 12px rgba(13, 146, 60, 0.25) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}
.ksf-cart-summary-card .wc-proceed-to-checkout a.checkout-button:hover {
    background: #09722e !important;
    box-shadow: 0 6px 16px rgba(13, 146, 60, 0.35) !important;
    transform: translateY(-1px) !important;
}
.ksf-cart-summary-card .wc-proceed-to-checkout a.checkout-button::after {
    content: " \2192" !important;
    font-size: 16px !important;
    display: inline-block !important;
}
.ksf-cart-benefits {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-top: 14px !important;
    border-top: 1px dashed #e2e8f0 !important;
}
.ksf-benefit-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    color: #475569 !important;
    line-height: 1.4 !important;
}
.ksf-benefit-check {
    color: #10b981 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
}

/* ==========================================================================
   [DPS CUSTOM FIX] - 2026-10-12 - Dev: DPS
   Mục đích: Biểu tượng giỏ hàng trong Sticky Header & Triệt tiêu Side Cart Drawer
   ========================================================================== */
.ksf-sticky-header-cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    padding: 0 4px 0 14px !important;
    z-index: 99 !important;
    flex-shrink: 0 !important;
}

.ksf-sticky-cart-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    outline: none !important;
}

.ksf-sticky-cart-link:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.ksf-sticky-cart-icon-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
}

.ksf-sticky-cart-icon-wrap svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    stroke: #ffffff !important;
}

.ksf-sticky-cart-count {
    position: absolute !important;
    top: -7px !important;
    right: -9px !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    padding: 0 4px !important;
    border-radius: 9px !important;
    background: #e11d48 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-align: center !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease !important;
}

.ksf-sticky-cart-count.is-empty {
    display: none !important;
}

/* Triệt tiêu Side Cart Drawer và Popup giỏ hàng trắng của Elementor & Freshio */
.elementor-menu-cart__container,
.elementor-menu-cart__main,
.cart-side-overlay,
.site-header-cart-side,
.freshio-cart-side {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   [DPS CUSTOM FIX] - 2026-10-12 - Dev: DPS
   Mục đích: Hiển thị sản phẩm dạng Grid 3 Cột chuẩn Bách Hóa Xanh trên Mobile (<= 768px)
             - Áp dụng trên Toàn bộ Trang chủ (Homepage), Trang danh mục (Category)
               và Trang cửa hàng (Shop)
             - Compact Product Card: Thumbnail tỉ lệ vuông 1:1, Title clamp 2 dòng
             - Giá & Đơn vị tính gọn gàng, thanh lịch
             - Bộ nút chọn số lượng Kamereo (.ksf-qty-control) thu nhỏ chuẩn tỉ lệ
               vừa khít 96px, thẳng tắp trên cùng một đường chân hàng ngang
   ========================================================================== */
@media (max-width: 768px) {
    /* 0. Triệt tiêu hoàn toàn Header Elementor trên Mobile & Kích hoạt Native Mobile Header */
    header.elementor-location-header,
    .elementor-location-header {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .ksf-mobile-nav-root {
        display: block !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 99999 !important;
        width: 100% !important;
    }

    .ksf-mobile-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #0a773d !important;
        height: 52px !important;
        padding: 0 8px !important;
        gap: 6px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .ksf-mobile-logo {
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
    }

    .ksf-logo-badge {
        background: #ffffff !important;
        border-radius: 6px !important;
        padding: 2px 6px !important;
        height: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    .ksf-logo-badge img {
        width: 86px !important;
        height: auto !important;
        max-height: 24px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .ksf-mobile-search-form {
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ksf-search-input-wrap {
        position: relative !important;
        width: 100% !important;
        height: 34px !important;
        background: #ffffff !important;
        border-radius: 17px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 10px 0 30px !important;
        box-sizing: border-box !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    }

    .ksf-search-icon {
        position: absolute !important;
        left: 9px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        pointer-events: none !important;
        stroke: #64748b !important;
    }

    .ksf-mobile-search-input {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        background: transparent !important;
        font-size: 12px !important;
        color: #1e293b !important;
        outline: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .ksf-mobile-search-input::placeholder {
        color: #94a3b8 !important;
        font-size: 11.5px !important;
    }

    .ksf-mobile-actions {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
    }

    .ksf-mobile-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.18) !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        cursor: pointer !important;
        text-decoration: none !important;
        position: relative !important;
        padding: 0 !important;
        transition: background 0.15s ease !important;
        outline: none !important;
    }

    .ksf-mobile-btn:active {
        background: rgba(255, 255, 255, 0.3) !important;
    }

    .ksf-mobile-cart-badge {
        position: absolute !important;
        top: -5px !important;
        right: -6px !important;
        min-width: 17px !important;
        height: 17px !important;
        line-height: 17px !important;
        padding: 0 3px !important;
        border-radius: 9px !important;
        background: #e11d48 !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        text-align: center !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
        box-sizing: border-box !important;
        display: inline-block !important;
    }

    .ksf-mobile-cart-badge.is-empty {
        display: none !important;
    }

    /* 0.1 Slide Drawer Navigation */
    .ksf-mobile-drawer-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: blur(2px) !important;
        z-index: 999998 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease !important;
    }

    .ksf-mobile-drawer-overlay.is-open {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.ksf-drawer-active {
        overflow: hidden !important;
    }

    .ksf-mobile-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 310px !important;
        max-width: 85vw !important;
        background: #ffffff !important;
        z-index: 999999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18) !important;
        box-sizing: border-box !important;
    }

    .ksf-mobile-drawer.is-open {
        transform: translateX(0) !important;
    }

    .ksf-drawer-top {
        background: #0a773d !important;
        padding: 12px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .ksf-drawer-close-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.18) !important;
        border: none !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    .ksf-drawer-close-btn svg {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        stroke: #ffffff !important;
        stroke-width: 2.5px !important;
        fill: none !important;
    }

    .ksf-drawer-tabs {
        display: flex !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .ksf-tab-btn {
        flex: 1 !important;
        padding: 10px 8px !important;
        border: none !important;
        background: transparent !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        cursor: pointer !important;
        border-bottom: 2px solid transparent !important;
        transition: all 0.2s ease !important;
    }

    .ksf-tab-btn.active {
        color: #0a773d !important;
        border-bottom-color: #0a773d !important;
        background: #ffffff !important;
        font-weight: 700 !important;
    }

    .ksf-drawer-body {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .ksf-drawer-menu-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ksf-drawer-menu-list li {
        border-bottom: 1px solid #f1f5f9 !important;
        position: relative !important;
        margin: 0 !important;
    }

    .ksf-drawer-menu-list li a {
        display: flex !important;
        align-items: center !important;
        padding: 12px 16px !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        text-decoration: none !important;
    }

    .ksf-drawer-menu-list li a:active {
        background: #f0fdf4 !important;
        color: #0a773d !important;
    }

    .ksf-drawer-menu-list li ul.sub-menu {
        display: none !important;
        background: #f8fafc !important;
        list-style: none !important;
        padding: 0 0 0 16px !important;
        margin: 0 !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    .ksf-drawer-menu-list li.is-expanded > ul.sub-menu {
        display: block !important;
    }

    .ksf-sub-toggle-btn {
        position: absolute !important;
        right: 8px !important;
        top: 6px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 6px !important;
        border: none !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #64748b !important;
        cursor: pointer !important;
    }

    .ksf-drawer-menu-list li.is-expanded > .ksf-sub-toggle-btn svg {
        transform: rotate(180deg) !important;
    }

    .ksf-drawer-footer {
        padding: 12px 14px !important;
        background: #fafafa !important;
        border-top: 1px solid #e2e8f0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .ksf-drawer-contact-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
    }

    .ksf-contact-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ksf-icon-green {
        background: #dcfce7 !important;
        color: #15803d !important;
    }

    .ksf-icon-blue {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    .ksf-contact-label {
        font-size: 11px !important;
        color: #64748b !important;
    }

    .ksf-contact-value {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }

    /* 1. Giải phóng chiều ngang màn hình, triệt tiêu 2 dải lề vàng/trắng thừa */
    .col-full,
    #content .col-full,
    .site-content .col-full,
    .home .col-full,
    .archive .col-full,
    .woocommerce-page .col-full,
    .page-template-template-homepage .col-full {
        padding-left: 4px !important;
        padding-right: 4px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Mở rộng các container Elementor trên mobile, không bóp nghẹt nội dung */
    .elementor-element.e-con-boxed,
    .elementor-element.e-con,
    .e-con.e-parent,
    .e-con.e-child,
    .elementor-section.elementor-section-boxed > .elementor-container,
    .home .elementor-element.e-con-boxed,
    .home .elementor-element.e-con,
    .home .e-con.e-parent,
    .home .e-con.e-child,
    .home .elementor-section.elementor-section-boxed > .elementor-container {
        padding-left: 4px !important;
        padding-right: 4px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .home .e-con.e-parent,
    .e-con.e-parent {
        border-radius: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .content-area,
    #primary,
    #main,
    .woocommerce-page #primary,
    .woocommerce-page #main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .freshio-sorting {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .elementor-widget-freshio-products,
    .elementor-widget-freshio-products-tabs,
    .woocommerce-carousel {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    /* 3. Reset container danh sách sản phẩm thành CSS Grid 3 cột tràn ngang */
    .woocommerce ul.products,
    ul.products.elementor-grid,
    .woocommerce-carousel ul.products,
    .elementor-widget-freshio-products ul.products,
    ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 0 16px 0 !important;
        float: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        list-style: none !important;
    }

    /* 4. Thẻ sản phẩm chuẩn compact mobile card, rộng rãi */
    .woocommerce ul.products li.product,
    ul.products li.product,
    .woocommerce-carousel ul.products li.product,
    .elementor-widget-freshio-products ul.products li.product,
    .elementor-widget-freshio-products .slick-slide {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        padding: 6px 4px !important;
        float: none !important;
        box-sizing: border-box !important;
        border: 1px solid #f1f5f9 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }

    .woocommerce ul.products li.product:active,
    ul.products li.product:active {
        transform: scale(0.985) !important;
    }

    /* 5. Khối bao nội dung card */
    .product-block {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 6. Hình ảnh sản phẩm (Thumbnail) - Kích thước lớn, rõ nét */
    .product-block .product-transition {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fafbfa !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        margin-bottom: 2px !important;
    }

    .product-block .product-transition img {
        width: 100% !important;
        height: auto !important;
        max-height: 110px !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: contain !important;
        padding: 2px !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* 7. Tên sản phẩm - 2 dòng chuẩn mực, không lệch hàng */
    ul.products li.product .woocommerce-loop-product__title,
    .product-block .woocommerce-loop-product__title {
        font-size: 11.5px !important;
        line-height: 15px !important;
        height: 30px !important;
        min-height: 30px !important;
        margin: 4px 0 2px 0 !important;
        padding: 0 1px !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        word-break: break-word !important;
    }

    /* 8. Giá sản phẩm & Đơn vị tính (UOM) */
    ul.products li.product .price,
    .product-block .price {
        font-size: 12px !important;
        line-height: 1.2 !important;
        min-height: 20px !important;
        margin: 2px 0 4px 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        justify-content: center !important;
        gap: 3px !important;
        text-align: center !important;
    }

    ul.products li.product .price .amount,
    .product-block .price .amount,
    ul.products li.product .price ins .amount,
    .product-block .price ins .amount {
        font-size: 12.5px !important;
        font-weight: 800 !important;
        color: #0d923c !important;
    }

    ul.products li.product .price del,
    .product-block .price del {
        font-size: 10px !important;
        color: #94a3b8 !important;
    }

    ul.products li.product .price .uom,
    .product-block .price .uom {
        font-size: 10.5px !important;
        color: #4b5563 !important;
        font-weight: 500 !important;
    }

    /* 9. Bộ nút chọn số lượng Kamereo thu nhỏ gọn trên Grid 3 cột */
    .ksf-qty-control {
        width: 100% !important;
        max-width: 100px !important;
        height: 30px !important;
        padding: 1px !important;
        margin-top: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 6px !important;
        border-width: 1px !important;
        align-self: center !important;
    }

    .ksf-qty-control .ksf-qty-btn {
        width: 28px !important;
        min-width: 28px !important;
        height: 26px !important;
        font-size: 15px !important;
        border-radius: 4px !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .ksf-qty-control .ksf-qty-input {
        font-size: 13px !important;
        min-width: 20px !important;
        font-weight: 700 !important;
        height: 100% !important;
        padding: 0 !important;
    }

    .ksf-qty-control .ksf-variable-btn {
        height: 30px !important;
        line-height: 28px !important;
        font-size: 11px !important;
        padding: 0 4px !important;
        border-radius: 6px !important;
    }

    .ksf-qty-control .ksf-out-of-stock-link {
        height: 30px !important;
        line-height: 28px !important;
        font-size: 10.5px !important;
        padding: 0 2px !important;
    }

    /* 10. Ẩn hoàn toàn các nút điều hướng Slick Carousel trên mobile */
    .woocommerce-carousel .slick-arrow,
    .elementor-widget-freshio-products .slick-arrow,
    .woocommerce-carousel .slick-dots,
    .elementor-widget-freshio-products .slick-dots {
        display: none !important;
    }

    /* 11. Đảm bảo Slick track không ép layout theo chiều ngang nếu chưa kịp unslick */
    .woocommerce-carousel .slick-list,
    .elementor-widget-freshio-products .slick-list {
        overflow: visible !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .woocommerce-carousel .slick-track,
    .elementor-widget-freshio-products .slick-track {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }
    .woocommerce-carousel .slick-slide.slick-cloned,
    .elementor-widget-freshio-products .slick-slide.slick-cloned {
        display: none !important;
    }
}
@media (min-width: 769px) {
    .ksf-mobile-nav-root {
        display: none !important;
    }
}
/* ===================== END [DPS CUSTOM FIX] ===================== */