/**
 * Malloca WooCommerce CSS - MASTER STYLESHEET v1.1.0
 *
 * ARCHITECTURE:
 * 1. Single Product - Layout & Gallery
 * 2. Single Product - Price & Clearance Banner
 * 3. Single Product - Add to Cart & Buttons (Desktop)
 * 4. Single Product - B2B Quote Modal
 * 5. Single Product - Spec Table & Content Typography
 * 6. Single Product - Related Products Sidebar
 * 7. Cart Page - Full Responsive
 * 8. Checkout Page - Full Responsive
 * 9. Responsive Breakpoints (Mobile-first, one block each)
 *
 * RULE: Each selector appears ONCE only. Never append to end of file.
 * To fix a bug: edit the existing rule, do NOT add new block below.
 */

/* =============================================================
   1. SINGLE PRODUCT - LAYOUT & GALLERY
   ============================================================= */
.wc-single-product {
    padding-top: 24px;
    padding-bottom: 64px;
}
.product-single-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-border);
    padding: 32px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-sm);
}
.product-gallery-main {
    aspect-ratio: 4/3;
    background: #F9FAFB;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.product-gallery-main img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.product-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.product-thumb-item {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-gray-border);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition);
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.product-thumb-item.active,
.product-thumb-item:hover {
    border-color: var(--color-red);
}
.product-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =============================================================
   2. SINGLE PRODUCT - PRICE & INFO
   ============================================================= */
.product-breadcrumb {
    font-size: 12px;
    color: var(--color-gray-mid);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.product-breadcrumb a { color: var(--color-gray-mid); }
.product-breadcrumb a:hover { color: var(--color-red); }
.product-sku {
    font-size: 12px;
    color: var(--color-gray-mid);
    margin-bottom: 12px;
}
.product-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1.35;
    margin-bottom: 16px;
}
.price-box {
    background: #FFF8F8;
    border: 1px solid #fde8e8;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 16px;
}
.price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.main-price {
    font-size: 28px;
    font-weight: 900;
    color: var(--color-red);
}
.old-price {
    font-size: 16px;
    color: var(--color-gray-mid);
    text-decoration: line-through;
}
.badge-sale {
    background: var(--color-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}
.price-note {
    font-size: 12px;
    color: var(--color-gray-mid);
    margin-top: 4px;
}

/* Clearance Banner */
.clearance-banner {
    display: flex;
    background: linear-gradient(90deg, #3B82F6 0%, #1D4ED8 100%);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(29,78,216,0.2);
}
.cb-left {
    background: linear-gradient(135deg, #FDE047 0%, #F59E0B 100%);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 40%;
    flex-shrink: 0;
}
.cb-left::after {
    content: '';
    position: absolute;
    right: -15px;
    top: 0; bottom: 0;
    width: 30px;
    background: inherit;
    transform: skewX(-15deg);
    z-index: 1;
    border-radius: 0 8px 8px 0;
}
.cb-title {
    font-size: 15px;
    font-weight: 900;
    color: #1E3A8A;
    text-transform: uppercase;
    line-height: 1.2;
    position: relative;
    z-index: 2;
}
.cb-hotline {
    font-size: 11px;
    font-weight: 800;
    color: #1E3A8A;
    margin-top: 4px;
    position: relative;
    z-index: 2;
}
.cb-right {
    padding: 12px 16px 12px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    z-index: 2;
}
.cb-subtitle {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}
.cb-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.cb-price {
    font-size: 24px;
    font-weight: 900;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.cb-discount {
    font-size: 17px;
    font-weight: 900;
    color: #FDE047;
}

/* Short desc / highlights */
.gift-box {
    background: #F0FDF4;
    border: 1px solid #D1FAE5;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.gift-title {
    font-size: 14px;
    font-weight: 800;
    color: #166534;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.promo-content {
    font-size: 13px;
    color: var(--color-dark);
    line-height: 1.7;
}
.promo-content ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 0;
}
.gift-box.short-desc-box {
    border-color: var(--color-gray-border);
    background: #F9FAFB;
}
.gift-box.short-desc-box .gift-title { color: var(--color-dark); }

/* =============================================================
   3. SINGLE PRODUCT - ADD TO CART & BUTTONS
   Desktop: [Qty 110px] [Add to Cart flex-1] [Buy Now flex-1]
   Mobile:  Each button = 100% width, stacked vertically
   ============================================================= */

/* Quantity control (custom +/- buttons injected by JS) */
form.cart div.quantity {
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    height: 48px;
    width: 110px;
    margin: 0;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
}
form.cart div.quantity input.qty {
    flex: 1;
    width: 40px;
    height: 100%;
    border: none;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    -moz-appearance: textfield;
    background: transparent;
}
form.cart div.quantity input.qty::-webkit-outer-spin-button,
form.cart div.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
form.cart div.quantity .minus,
form.cart div.quantity .plus {
    width: 36px;
    height: 100%;
    background: #f1f5f9;
    border: none;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    flex-shrink: 0;
    transition: background 0.2s;
}
form.cart div.quantity .minus:hover,
form.cart div.quantity .plus:hover {
    background: #e2e8f0;
}

/* The Add-to-cart form row */
.woocommerce div.product form.cart {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
}

/* Button group: [Add to Cart] + [Buy Now] stacked */
.product-button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* Add to Cart button */
form.cart button.single_add_to_cart_button {
    width: 100%;
    height: 48px;
    background: #ffffff;
    color: var(--color-red);
    border: 2px solid var(--color-red);
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    text-transform: uppercase;
}
form.cart button.single_add_to_cart_button:hover {
    background: var(--color-red);
    color: #ffffff;
}

/* Buy Now button */
form.cart .btn-buy-now {
    width: 100%;
    height: 48px;
    background: var(--color-red);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    text-transform: uppercase;
    line-height: 1.2;
}
form.cart .btn-buy-now span.sub {
    font-size: 10.5px;
    font-weight: 400;
    text-transform: none;
    opacity: 0.9;
}
form.cart .btn-buy-now:hover { background: var(--color-red-dark); }

/* B2B Quote button */
.btn-b2b-quote {
    width: 100%;
    height: 46px;
    background: #1e293b;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
    margin-top: 4px;
}
.btn-b2b-quote:hover { background: #0f172a; }

/* Custom CTA (Hotline + Zalo row) */
.product-cta { display: flex; flex-direction: column; gap: 0; }
.custom-cta-buttons { margin-top: 16px; }
.cta-fast-order-text {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}
.btn-flatsome-row {
    display: flex;
    gap: 10px;
}
.btn-flatsome-hotline,
.btn-flatsome-zalo {
    flex: 1;
    height: 44px;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.btn-flatsome-hotline { background: #b91c1c; }
.btn-flatsome-zalo { background: #0284c7; }
.btn-flatsome-hotline:hover,
.btn-flatsome-zalo:hover { opacity: 0.9; color: #fff; }
.btn-flatsome-icon { font-size: 14px; }

/* =============================================================
   4. SINGLE PRODUCT - B2B QUOTE MODAL
   ============================================================= */
.b2b-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.b2b-modal-backdrop.active { display: flex; }
.b2b-modal-box {
    background: #fff;
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    position: relative;
    box-sizing: border-box;
    animation: b2bFadeIn 0.25s ease-out;
}
@keyframes b2bFadeIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
.b2b-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    background: #f1f5f9;
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}
.b2b-modal-close:hover { background: #e2e8f0; color: #0f172a; }
.b2b-modal-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
}
.b2b-modal-desc {
    font-size: 13px;
    color: #475569;
    margin-bottom: 20px;
    line-height: 1.5;
}
.b2b-form-group { margin-bottom: 14px; }
.b2b-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}
.b2b-form-group input,
.b2b-form-group textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.b2b-form-group input:focus,
.b2b-form-group textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.b2b-submit-btn {
    width: 100%;
    height: 46px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 10px;
}
.b2b-submit-btn:hover { background: #1d4ed8; }

/* =============================================================
   5. SPEC TABLE & CONTENT TYPOGRAPHY
   ============================================================= */
.product-bottom-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 48px;
    align-items: flex-start;
}
.product-bottom-left {
    width: calc(33.333% - 16px);
    position: sticky;
    top: 90px;
}
.product-bottom-right {
    width: calc(66.666% - 16px);
    min-width: 0;
}
.product-section-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-border);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 28px;
}
.section-title-box {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-dark);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-red);
    display: flex;
    align-items: center;
    gap: 8px;
}
.content-box {
    font-size: 15px;
    line-height: 1.85;
    color: #334155;
    max-width: 100%;
    overflow: hidden;
}
.content-box p { margin: 0 0 18px 0; }
.content-box h1 { font-size: 22px; font-weight: 800; color: #0f172a; margin: 28px 0 16px; }
.content-box h2 {
    font-size: 19px; font-weight: 800; color: #0f172a;
    margin: 28px 0 14px;
    padding-left: 12px;
    border-left: 4px solid var(--color-red);
}
.content-box h3 { font-size: 16.5px; font-weight: 700; color: #1e293b; margin: 22px 0 10px; }
.content-box h4 { font-size: 15px; font-weight: 700; color: #334155; margin: 18px 0 8px; }
.content-box ul, .content-box ol {
    margin: 0 0 18px 0;
    padding-left: 24px;
}
.content-box li { margin-bottom: 8px; line-height: 1.7; }
.content-box img {
    border-radius: 8px;
    margin: 18px auto;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Spec Table - Luxury Card Design */
.spec-table,
.product-specs-box table,
.content-box table,
table.shop_attributes,
.woocommerce-product-attributes {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin: 16px 0 24px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    word-break: break-word;
    table-layout: auto;
}
.spec-table th, .spec-table td,
.product-specs-box table th, .product-specs-box table td,
.content-box table th, .content-box table td,
table.shop_attributes th, table.shop_attributes td {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.6;
    border: none;
    border-bottom: 1px solid #edf2f7;
    word-break: break-word;
    vertical-align: top;
}
.spec-table tr:nth-child(even),
.product-specs-box table tr:nth-child(even),
.content-box table tr:nth-child(even),
table.shop_attributes tr:nth-child(even) {
    background: #f8fafc;
}
.spec-table tr:last-child td,
.product-specs-box table tr:last-child td,
.content-box table tr:last-child td,
table.shop_attributes tr:last-child td {
    border-bottom: none;
}
.spec-table td:first-child,
.product-specs-box table td:first-child,
table.shop_attributes th {
    font-weight: 600;
    color: #475569;
    width: 38%;
    border-right: 1px solid #edf2f7;
    background: rgba(241,245,249,0.5);
}

/* =============================================================
   6. RELATED PRODUCTS SIDEBAR
   ============================================================= */
.related-vertical-widget {
    background: #fff;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-md);
    padding: 20px;
}
.related-vertical-list { display: flex; flex-direction: column; gap: 16px; }
.rel-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-gray-light);
}
.rel-item:last-child { border-bottom: none; padding-bottom: 0; }
.rel-img {
    width: 70px; height: 70px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.rel-img img { width: 100%; height: 100%; object-fit: cover; }
.rel-info { flex: 1; min-width: 0; }
.rel-title {
    font-size: 13px; font-weight: 700;
    color: var(--color-dark);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.rel-title:hover { color: var(--color-red); }
.rel-price { font-size: 14px; font-weight: 900; color: var(--color-red); }

/* =============================================================
   7. CART PAGE - FULL RESPONSIVE
   ============================================================= */
.woocommerce-cart-form {
    width: 100%;
    overflow-x: auto;
}
.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
    font-size: 14px;
}
.woocommerce table.shop_table thead tr th {
    background: #f8fafc;
    font-weight: 700;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-gray-border);
    color: var(--color-dark);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.woocommerce table.shop_table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-gray-light);
    vertical-align: middle;
}
.woocommerce table.shop_table .product-thumbnail img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-border);
}
.woocommerce table.shop_table .product-name a {
    font-weight: 700;
    color: var(--color-dark);
    font-size: 14px;
}
.woocommerce table.shop_table .product-name a:hover { color: var(--color-red); }
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal {
    font-weight: 700;
    color: var(--color-red);
    white-space: nowrap;
}
.woocommerce .quantity input.qty {
    width: 60px;
    height: 38px;
    text-align: center;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
}
.woocommerce .button[name="update_cart"] {
    background: #f1f5f9;
    color: var(--color-dark);
    border: 1px solid var(--color-gray-border);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
}
.woocommerce-cart .wc-proceed-to-checkout {
    margin-top: 16px;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--color-red);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    padding: 16px;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
    background: var(--color-red-dark);
    color: #fff;
}
/* Cart totals box */
.cart_totals {
    background: #fff;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-md);
    padding: 24px;
}
.cart_totals h2 {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--color-dark);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-red);
}
.cart_totals table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
.cart_totals table th,
.cart_totals table td {
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--color-gray-light);
}
.cart_totals table th { font-weight: 600; color: var(--color-gray-dark); width: 40%; }
.cart_totals .order-total td { font-size: 18px; font-weight: 900; color: var(--color-red); }

/* =============================================================
   8. CHECKOUT PAGE - FULL RESPONSIVE
   ============================================================= */
.woocommerce-checkout h1,
.woocommerce-checkout h2,
.woocommerce-checkout h3 {
    font-weight: 800;
    color: var(--color-dark);
}
.woocommerce-checkout #customer_details {
    float: none;
    width: 100%;
}
.woocommerce-billing-fields input,
.woocommerce-shipping-fields input,
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    width: 100%;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    box-sizing: border-box;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
/* Payment section */
.woocommerce-checkout #payment {
    background: #f8fafc;
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid var(--color-gray-border);
}
.woocommerce-checkout #payment ul.payment_methods li {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gray-light);
}
.woocommerce-checkout #payment ul.payment_methods li label {
    font-weight: 600;
    font-size: 14px;
}
.woocommerce-checkout #payment .payment_box {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #475569;
    border: 1px solid var(--color-gray-border);
    word-break: break-word;
}
/* Place order button */
#place_order {
    width: 100%;
    height: 54px;
    background: var(--color-red);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 16px;
}
#place_order:hover { background: var(--color-red-dark); }
/* Order review box */
#order_review {
    background: #fff;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-md);
    padding: 24px;
    box-sizing: border-box;
}
#order_review h3 {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-red);
}
#order_review table.shop_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    table-layout: fixed;
    word-break: break-word;
}
#order_review table.shop_table th,
#order_review table.shop_table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-gray-light);
    vertical-align: top;
    word-break: break-word;
}
#order_review table.shop_table tfoot .order-total th,
#order_review table.shop_table tfoot .order-total td {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-red);
}
#order_review .product-thumbnail img {
    width: 52px; height: 52px;
    object-fit: contain;
    border-radius: 4px;
}

/* =============================================================
   9. RESPONSIVE BREAKPOINTS
   Each breakpoint appears ONCE below. Never duplicate.
   ============================================================= */

/* --- Tablet: 768px - 1024px --- */
@media (max-width: 1024px) {
    .product-bottom-left { width: 100%; position: static; }
    .product-bottom-right { width: 100%; }
    .product-bottom-layout { flex-direction: column; gap: 24px; }
}

/* --- Below 768px: Mobile-first adjustments --- */
@media (max-width: 768px) {
    /* Single Product */
    .product-single-layout {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 20px;
    }
    .product-title { font-size: 18px; }
    .main-price { font-size: 22px; }
    .product-section-card { padding: 18px 14px; }

    /* Clearance Banner stacks */
    .clearance-banner { flex-direction: column; }
    .cb-left { width: 100%; text-align: center; }
    .cb-left::after { display: none; }
    .cb-right { padding: 12px 16px; align-items: center; }
    .cb-price { font-size: clamp(20px, 6vw, 26px); }

    /* Buttons: ALL 100% width, stacked */
    .woocommerce div.product form.cart {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
    }
    form.cart div.quantity {
        width: 120px; /* stays compact at top */
    }
    .product-button-group {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }
    form.cart button.single_add_to_cart_button,
    form.cart .btn-buy-now {
        width: 100%;
        height: 46px;
        font-size: 14px;
        box-sizing: border-box;
    }
    .btn-b2b-quote { height: 46px; }
    .btn-flatsome-row { flex-direction: column; gap: 8px; }
    .btn-flatsome-hotline, .btn-flatsome-zalo { width: 100%; }

    /* Cart table: compact for mobile */
    .woocommerce table.shop_table thead { display: none; }
    .woocommerce table.shop_table tbody td {
        display: block;
        padding: 8px 12px;
        text-align: left;
        border: none;
        border-bottom: 1px solid var(--color-gray-light);
    }
    .woocommerce table.shop_table .product-remove { text-align: right; }
    .woocommerce table.shop_table .product-thumbnail img { width: 56px; height: 56px; }

    /* Checkout: single column */
    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2 {
        float: none;
        width: 100%;
    }
    #order_review {
        margin-top: 24px;
    }
    #order_review table.shop_table td,
    #order_review table.shop_table th {
        font-size: 12px;
        padding: 8px 4px;
    }
    /* Payment method text overflow */
    .woocommerce-checkout #payment .payment_box {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Cart: stick checkout button above mobile bottom bar */
    .woocommerce-cart .wc-proceed-to-checkout .checkout-button {
        margin-bottom: 12px;
    }
}

/* --- Mobile 390px: extra polish --- */
@media (max-width: 480px) {
    .wc-single-product { padding-top: 12px; padding-bottom: 80px; }
    .product-single-layout { padding: 12px; }
    .product-section-card { padding: 14px 12px; }
    .price-box { padding: 12px; }
    .b2b-modal-box { padding: 20px 16px; }
    #order_review { padding: 16px 12px; }
    .cart_totals { padding: 16px 12px; }
}

/* ================================================================
   CART & CHECKOUT RESPONSIVENESS FIXES (v1.1.1)
   ================================================================ */

/* Cart Layout */
.cart-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}
.cart-collaterals-wrap {
    position: sticky;
    top: 90px;
}

@media (max-width: 991px) {
    .cart-layout-grid {
        grid-template-columns: 1fr;
    }
    .cart-collaterals-wrap {
        position: static;
    }
    
    /* Cart Mobile Table (Force block layout overrides) */
    .woocommerce table.shop_table_responsive,
    .woocommerce table.shop_table_responsive tbody,
    .woocommerce table.shop_table_responsive tr,
    .woocommerce table.shop_table_responsive td {
        display: block !important;
        width: 100% !important;
    }
    .woocommerce table.shop_table_responsive thead { 
        display: none !important; 
    }
    .woocommerce table.shop_table_responsive tbody tr {
        margin-bottom: 16px;
        border: 1px solid var(--color-gray-border);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }
    .woocommerce table.shop_table_responsive tbody td {
        text-align: right !important;
        padding: 10px 14px !important;
        border-bottom: 1px solid var(--color-gray-light) !important;
        position: relative;
    }
    .woocommerce table.shop_table_responsive tbody td::before {
        content: attr(data-title) ': ';
        font-weight: 700;
        float: left;
        color: var(--color-dark);
    }
    .woocommerce table.shop_table_responsive tbody td.product-remove,
    .woocommerce table.shop_table_responsive tbody td.product-thumbnail {
        text-align: center !important;
    }
    .woocommerce table.shop_table_responsive tbody td.product-remove::before,
    .woocommerce table.shop_table_responsive tbody td.product-thumbnail::before {
        display: none !important;
    }
    .woocommerce table.shop_table_responsive tbody td.product-remove {
        position: absolute;
        top: 0;
        right: 0;
        border-bottom: none !important;
        width: auto !important;
        z-index: 2;
    }
    .woocommerce table.shop_table_responsive tbody td.product-remove a {
        background: #f1f5f9;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 0 0 8px;
    }
}

/* Checkout Long Text Wrap */
.woocommerce-checkout #payment .payment_box, 
.woocommerce-checkout #payment ul.payment_methods li,
.checkout-right-col {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* ================================================================
   FIX TRIET DE WOOCOMMERCE BLOCKS (CART & CHECKOUT) v1.1.2
   ================================================================ */

/* 1. EP ROT 1 COT HOAN TOAN TREN TABLET & MOBILE (Duoi 1024px) */
@media (max-width: 1024px) {
    .wc-block-components-sidebar-layout,
    .wp-block-woocommerce-checkout,
    .wp-block-woocommerce-cart,
    .wc-block-checkout,
    .wc-block-cart {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 24px !important;
    }
    .wc-block-components-main,
    .wc-block-components-sidebar,
    .wc-block-checkout__main,
    .wc-block-checkout__sidebar,
    .wc-block-cart__main,
    .wc-block-cart__sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
    }
    .wc-block-components-main, .wc-block-checkout__main, .wc-block-cart__main { 
        order: 1 !important; 
    }
    .wc-block-components-sidebar, .wc-block-checkout__sidebar, .wc-block-cart__sidebar { 
        order: 2 !important; 
    }
}

/* 2. CHONG DAM THUNG MEP PHAI TREN MOBILE */
.wc-block-checkout,
.wc-block-cart,
.wc-block-components-radio-control,
.wc-block-components-radio-control-accordion-content,
.wc-block-components-payment-method-icons,
.wc-block-checkout__payment-method,
.wc-block-components-sidebar-layout * {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}

/* ================================================================
   FIX TRIET DE WOOCOMMERCE CART BLOCK (v1.1.3)
   ================================================================ */

/* 1. Layout 2 cot tren Desktop, 1 cot tren Tablet & Mobile */
.wc-block-cart {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    .wc-block-cart.wp-block-woocommerce-cart,
    .wc-block-cart .wc-block-components-sidebar-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 24px !important;
    }
    .wc-block-cart .wc-block-cart__main,
    .wc-block-cart .wc-block-cart__sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
}

/* 2. CHONG TRAN VA DAP TAN BANG SAN PHAM TREN MOBILE (< 768px) */
@media (max-width: 768px) {
    .wc-block-cart,
    .wc-block-cart__main,
    .wc-block-cart-items,
    .wp-block-woocommerce-cart {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .wc-block-cart-items thead,
    .wc-block-cart-items__header {
        display: none !important;
    }

    .wc-block-cart-items tbody,
    .wc-block-cart-items__body,
    .wc-block-cart-items tr,
    .wc-block-cart-items__row,
    .wc-block-cart-item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 8px !important;
        gap: 10px !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    .wc-block-cart-item__image,
    td.wc-block-cart-item__image {
        width: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
        height: auto !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }
    .wc-block-cart-item__image img {
        width: 100% !important;
        height: 65px !important;
        object-fit: contain !important;
        border-radius: 6px !important;
    }

    .wc-block-cart-item__product,
    td.wc-block-cart-item__product,
    .wc-block-cart-item__description {
        flex: 1 1 calc(100% - 80px) !important;
        min-width: 0 !important;
        padding: 0 !important;
        word-break: break-word !important;
    }

    .wc-block-cart-item__product-name,
    .wc-block-components-product-name {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        display: block !important;
        margin-bottom: 4px !important;
    }

    .wc-block-cart-item__prices,
    .wc-block-components-product-price {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .wc-block-cart-item__quantity,
    td.wc-block-cart-item__quantity {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 4px 0 !important;
        width: auto !important;
    }

    .wc-block-cart-item__total,
    td.wc-block-cart-item__total {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #d41b2c !important;
        padding: 4px 0 0 0 !important;
        margin-top: 4px !important;
        border-top: 1px dashed #f1f5f9 !important;
    }

    .wc-block-cart__submit,
    .wc-block-cart__submit-container {
        margin-top: 16px !important;
        width: 100% !important;
    }
    .wc-block-cart__submit-button {
        width: 100% !important;
        height: 48px !important;
        font-size: 16px !important;
        font-weight: 800 !important;
    }
}

/* ================================================================
   PRECISION BUTTON & CTA LAYOUT (v1.1.4)
   ================================================================ */

/* Container form.cart */
.woocommerce div.product form.cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
}

/* Row 1: Quantity + Add to Cart */
.cart-top-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Quantity */
.cart-top-row div.quantity,
form.cart div.quantity {
    display: flex !important;
    align-items: center !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    height: 48px !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    margin: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

form.cart div.quantity input.qty {
    flex: 1 !important;
    width: 38px !important;
    height: 100% !important;
    border: none !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    background: transparent !important;
    padding: 0 !important;
}

form.cart div.quantity .minus,
form.cart div.quantity .plus {
    width: 36px !important;
    height: 100% !important;
    background: #f1f5f9 !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #374151 !important;
    flex-shrink: 0 !important;
}

/* Add to Cart button (Row 1 right) */
form.cart button.single_add_to_cart_button {
    flex: 1 1 auto !important;
    width: calc(100% - 120px) !important;
    height: 48px !important;
    background: #ffffff !important;
    color: #D41B2C !important;
    border: 2px solid #D41B2C !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

form.cart button.single_add_to_cart_button:hover {
    background: #D41B2C !important;
    color: #ffffff !important;
}

/* Row 2: Buy Now button */
form.cart .btn-buy-now {
    width: 100% !important;
    height: 48px !important;
    background: #D41B2C !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
    transition: background 0.2s ease !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

form.cart .btn-buy-now span.sub {
    font-size: 10.5px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    opacity: 0.95 !important;
    margin-top: 1px !important;
}

form.cart .btn-buy-now:hover {
    background: #A81020 !important;
}

/* Row 3: B2B Quote button */
.btn-b2b-quote {
    width: 100% !important;
    height: 46px !important;
    background: #1E293B !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background 0.2s ease !important;
    margin-top: 6px !important;
    box-sizing: border-box !important;
}

.btn-b2b-quote:hover {
    background: #0F172A !important;
}

/* Row 4: Hotline & Zalo (2 columns 50% - 50%) */
.btn-flatsome-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 6px !important;
}

.btn-flatsome-hotline,
.btn-flatsome-zalo {
    flex: 1 1 50% !important;
    width: 50% !important;
    height: 42px !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.btn-flatsome-hotline { background: #B91C1C !important; }
.btn-flatsome-zalo { background: #0284C7 !important; }

/* Mobile Bottom padding to prevent bottom bar overlap */
@media (max-width: 768px) {
    body.single-product,
    .wc-single-product {
        padding-bottom: 100px !important;
    }
}

/* ================================================================
   DIEN MAY CHO LON STYLE CLEARANCE BANNER & SPACED BUTTONS (v1.1.5)
   ================================================================ */

/* --- 1. CLEARANCE BANNER (CHỢ LỚN STYLE) --- */
.clearance-banner {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.25) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    min-height: 64px !important;
    position: relative !important;
    background: #0284c7 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Left part: Glossy Gold/Yellow Banner */
.clearance-banner .cb-left {
    background: linear-gradient(135deg, #FFF000 0%, #FFCC00 50%, #FFA800 100%) !important;
    padding: 10px 16px 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
    width: 44% !important;
    flex-shrink: 0 !important;
    z-index: 2 !important;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) !important;
}

.clearance-banner .cb-title {
    font-size: 14.5px !important;
    font-weight: 900 !important;
    color: #0A387E !important;
    text-transform: uppercase !important;
    line-height: 1.15 !important;
    letter-spacing: -0.2px !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8) !important;
}

.clearance-banner .cb-hotline {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #D41B2C !important;
    background: #FFFFFF !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 5px !important;
    width: fit-content !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
}

/* Right part: Deep Ocean Blue 3D Gradient */
.clearance-banner .cb-right {
    background: linear-gradient(135deg, #0284C7 0%, #0369A1 50%, #075985 100%) !important;
    padding: 8px 16px 8px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 !important;
    z-index: 1 !important;
}

.clearance-banner .cb-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.clearance-banner .cb-subtitle {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #BAE6FD !important;
    margin-bottom: 2px !important;
}

.clearance-banner .cb-price {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
}

.clearance-banner .cb-discount-tag {
    background: #FFE600 !important;
    color: #0A387E !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    transform: rotate(-3deg) !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

/* Responsive for Mobile */
@media (max-width: 480px) {
    .clearance-banner .cb-left {
        width: 46% !important;
        padding: 8px 10px !important;
        clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%) !important;
    }
    .clearance-banner .cb-title {
        font-size: 12.5px !important;
    }
    .clearance-banner .cb-hotline {
        font-size: 9.5px !important;
        padding: 1px 6px !important;
    }
    .clearance-banner .cb-right {
        padding: 6px 10px !important;
    }
    .clearance-banner .cb-price {
        font-size: 18px !important;
    }
    .clearance-banner .cb-discount-tag {
        font-size: 14px !important;
        padding: 3px 6px !important;
    }
}

/* --- 2. RÕ RÀNG KHOẢNG CÁCH TỪNG HÀNG NÚT (SPACING & BREATHING ROOM) --- */

.product-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-top: 18px !important;
}

/* HÀNG 1: Số lượng + Thêm vào giỏ */
.cart-top-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* HÀNG 2: Mua Ngay */
form.cart .btn-buy-now {
    margin-top: 14px !important;
    width: 100% !important;
    height: 50px !important;
    background: #D41B2C !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 15.5px !important;
    box-shadow: 0 4px 12px rgba(212, 27, 44, 0.25) !important;
}

form.cart .btn-buy-now:hover {
    background: #A81020 !important;
}

/* HÀNG 3: Báo giá B2B */
.btn-b2b-quote {
    width: 100% !important;
    height: 48px !important;
    background: #1E293B !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-top: 0 !important;
    box-shadow: 0 3px 10px rgba(30, 41, 59, 0.2) !important;
}

.btn-b2b-quote:hover {
    background: #0F172A !important;
}

/* HÀNG 4: Hotline & Zalo */
.custom-cta-buttons {
    margin-top: 0 !important;
}

.cta-fast-order-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
}

.btn-flatsome-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: 100% !important;
}

.btn-flatsome-hotline,
.btn-flatsome-zalo {
    flex: 1 1 50% !important;
    width: 50% !important;
    height: 44px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* ================================================================
   REORDER RELATED PRODUCTS ON TABLET & MOBILE (v1.1.6)
   ================================================================ */

@media (max-width: 1024px) {
    .product-bottom-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    /* Cột nội dung chính (Mô tả chi tiết + Thông số + FAQ) lên ĐẦU TIÊN */
    .product-bottom-right {
        order: 1 !important;
        width: 100% !important;
    }
    
    /* Khối 'Sản phẩm cùng loại' (Related Products) xuống CUỐI CÙNG sau FAQ */
    .product-bottom-left {
        order: 2 !important;
        width: 100% !important;
        position: static !important;
        margin-top: 24px !important;
    }
}

/* ================================================================
   EQUAL 4-COLUMN FOOTER RESPONSIVE GRID (v1.1.7)
   ================================================================ */

.footer-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
    align-items: start !important;
    padding-bottom: 36px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.footer-col {
    min-width: 0 !important;
}

.footer-support-menu a {
    color: #D1D5DB !important;
    text-decoration: none !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.2s ease !important;
}

.footer-support-menu a:hover {
    color: #FFFFFF !important;
}

/* Tablet (iPad): 2 cột cân đối */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px 24px !important;
    }
}

/* Mobile: 1 cột từ trên xuống */
@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

/* ==========================================================================
   BỘ TỨ COLOR NHẬN DIỆN THƯƠNG HIỆU MALLOCA (BRAND PALETTE v1.1.8)
   Bạn có thể chỉnh sửa các mã màu chính dưới đây bất cứ lúc nào:
   ========================================================================== */
:root {
  --color-red: #D41B2C;          /* 1. ĐỎ MALLOCA: Nút Mua, Giá, Điểm nhấn, Icon chính */
  --color-red-dark: #A81020;     /* 1.1 Đỏ đậm khi Hover chuột */
  --color-white: #FFFFFF;        /* 2. TRẮNG: Nền card, Chữ trên nền tối, Box nội dung */
  --color-dark: #1E293B;         /* 3. XÁM ĐEN (Slate): Tiêu đề, Chữ chính, Nút phụ B2B */
  --color-gray-light: #F8FAFC;   /* 4. XÁM NHẸ: Nền khối, Bảng biểu, Khung sản phẩm */
  
  /* Bảng màu bổ trợ hài hòa: */
  --color-footer-bg: #2A303C;    /* Nền Footer Xám Slate nhẹ nhàng, thanh thoát */
  --color-footer-border: #3E4758;/* Viền chia khung Footer */
  --color-gray-border: #E2E8F0;  /* Viền chia nội dung */
  --color-gray-mid: #64748B;     /* Chữ phụ, mô tả ngắn */
  --color-gold: #F59E0B;         /* Vàng cam điểm xuyết */
}

#site-footer {
  background: var(--color-footer-bg) !important;
  color: #E2E8F0 !important;
  border-top: 1px solid var(--color-footer-border) !important;
}

/* ================================================================
   LUXURY RELATED PRODUCTS & SMART FILTER SIDEBAR (v1.2.0)
   ================================================================ */

/* 1. Nổi bật khối 'Sản Phẩm Cùng Loại' */
.related-vertical-widget {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 20px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
    position: relative !important;
    overflow: hidden !important;
}

.related-vertical-widget::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #D41B2C 0%, #F59E0B 100%) !important;
}

.rel-item {
    transition: all 0.25s ease !important;
    border-radius: 6px !important;
    padding: 8px !important;
    margin: -8px !important;
    margin-bottom: 8px !important;
}

.rel-item:hover {
    background: #FFF8F8 !important;
    transform: translateX(4px) !important;
}

.rel-img {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
}

.rel-item:hover .rel-img {
    border-color: #D41B2C !important;
}

.rel-item:hover .rel-title {
    color: #D41B2C !important;
}

/* 2. Menu chính Desktop trên thanh đen */
#desktop-nav {
    background: #111111 !important;
    border-bottom: 2px solid #D41B2C !important;
}

#desktop-nav ul {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 4px !important;
}

#desktop-nav ul li a {
    color: #F1F5F9 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    letter-spacing: 0.3px !important;
    transition: all 0.2s ease !important;
}

#desktop-nav ul li a:hover {
    color: #FFFFFF !important;
    background: #D41B2C !important;
}

#desktop-nav ul li a i {
    font-size: 12px !important;
    opacity: 0.8 !important;
}