/* =================================================================
 * My Product Layout - v2.1.0 Responsive Upgrade
 * ================================================================= */

/* === 1. BASE & MOBILE STYLES (< 1024px) === */

.mpl-widget-wrapper {
    display: flex;
    flex-direction: column; /* Bố cục 1 cột cho mobile/tablet */
    gap: 30px;
    padding: 0 15px; /* Thêm padding cho di động để không bị sát mép */
    box-sizing: border-box;
}

.mpl-media-column,
.mpl-info-column {
    flex: 1;
    min-width: 0;
}

/* --- Gallery Styles for Mobile --- */
.mpl-media-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mpl-main-slider {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    order: 1; /* Slider chính luôn ở trên */
    /* FIX 1: Đảm bảo slider (flex item) có thể co lại trong flex container, chống tràn layout */
    min-width: 0; 
}

/* Ẩn thumbnail và mũi tên của thumbnail trên mobile/tablet */
.mpl-thumbnail-slider,
.mpl-thumbnail-slider-container {
    display: none;
}

.mpl-main-slider .swiper-button-next,
.mpl-main-slider .swiper-button-prev {
    background-color: rgba(31, 31, 31, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    right: 15px;
    left: auto;
    color: white;
    transition: background-color 0.2s ease;
}

.mpl-main-slider .swiper-button-prev {
    right: auto;
    left: 15px;
}

.mpl-main-slider .swiper-button-next:hover,
.mpl-main-slider .swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.mpl-main-slider .swiper-button-next::after,
.mpl-main-slider .swiper-button-prev::after {
    font-size: 18px;
    font-weight: bold;
}

/* --- Common styles for elements --- */
/* (Các style chung cho swatches, info panels, cart form... giữ nguyên như trước) */

.mpl-main-slider .swiper-slide img,
.mpl-thumbnail-slider .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mpl-thumbnail-slider .swiper-slide {
    opacity: 0.6;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden; /* Thêm để bo tròn đẹp hơn */
}

.mpl-thumbnail-slider .swiper-slide.is-active-thumb {
    opacity: 1;
    border-color: #333;
}

/* --- Video Styles --- */
.mpl-main-slider .swiper-slide[data-type="video"] { cursor: pointer; }
.mpl-main-slider .play-icon-large { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; color: white; text-shadow: 0 0 15px rgba(0,0,0,0.5); pointer-events: none; line-height: 1; }
.mpl-main-slider .mpl-video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.mpl-main-slider .mpl-video-wrapper iframe { width: 100%; height: 100%; }
.mpl-thumbnail-slider .mpl-video-thumb .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 20px; background: rgba(0,0,0,0.5); border-radius: 50%; padding: 5px; pointer-events: none; line-height: 1; }

/* --- Swatches Styles --- */
.mpl-info-column form.variations_form .variations { display: none !important; }
.mpl-swatches-container { margin: 20px 0; display: flex; flex-direction: column; gap: 15px; }
.mpl-swatch-label { font-weight: bold; margin-bottom: 8px; display: block; }
.mpl-widget-wrapper .mpl-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); gap: 8px; }
.elementor-widget-my_product_layout .mpl-widget-wrapper .mpl-swatch { display: inline-flex; align-items: center; justify-content: center; border: 2px solid #ccc; cursor: pointer; background-color: #fff; transition: all 0.2s ease; border-radius: 4px; font-size: 14px; line-height: 1; margin: 0; aspect-ratio: 1 / 1; }
.elementor-widget-my_product_layout .mpl-widget-wrapper .mpl-swatch.text-only { width: auto; height: auto; padding: 5px; }
.elementor-widget-my_product_layout .mpl-widget-wrapper .mpl-swatch.has-image { width: auto; height: auto; padding: 2px; }
.elementor-widget-my_product_layout .mpl-widget-wrapper .mpl-swatch.has-image img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 2px; }
.elementor-widget-my_product_layout .mpl-widget-wrapper .mpl-swatch.selected { border-color: #000; }
.elementor-widget-my_product_layout .mpl-widget-wrapper .mpl-swatch.text-only.selected { background-color: #222; color: #fff; }
.elementor-widget-my_product_layout .mpl-widget-wrapper .mpl-swatch.has-image.selected { box-shadow: 0 0 0 1px #000; }
.mpl-widget-wrapper .mpl-swatch.disabled { opacity: 0.5; cursor: not-allowed; position: relative; background-color: #f0f0f0; color: #999; }
.mpl-widget-wrapper .mpl-swatch.disabled::after { content: ''; position: absolute; top: 50%; left: 4px; right: 4px; border-top: 2px solid #aaa; transform: rotate(-45deg); transform-origin: center; }
.mpl-widget-wrapper .mpl-swatch.has-image.disabled { filter: grayscale(100%); }

/* --- Info Panels Styles --- */
.mpl-info-panels {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px; 
    margin: 25px 0;
}
.mpl-info-panel-item { border: 1px solid #e0e0e0; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; border-radius: 4px; color: inherit; text-decoration: none; transition: all 0.2s ease; min-height: 110px; background-color: #fff; }
.mpl-info-panel-item:first-child { border: 2px solid #000; }
.mpl-info-panel-item:hover { border-color: #000; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transform: translateY(-2px); }
.mpl-info-panel-item .panel-icon { width: 32px; height: 32px; object-fit: contain; }
.panel-text-wrapper { display: flex; flex-direction: column; line-height: 1.4; }
.panel-title {
    font-weight: normal; 
    font-size: 13px;
    text-transform: lowercase;
    color: #111;
    display: block;
}
.panel-subtitle {
    font-size: 12px; 
    text-transform: lowercase; 
    color: #555;
    display: block;
}

/* --- Cart Form & Quantity Buttons --- */
.mpl-info-column form.cart { 
    display: flex; 
    align-items: center; /* Original alignment */
    gap: 15px; 
    flex-wrap: wrap; 
    margin-top: 25px; 
}

.mpl-info-column .quantity { 
    display: flex; 
    align-items: center; 
    border: 1px solid #ddd; 
    border-radius: 50px; 
    overflow: hidden; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.2s ease-in-out, visibility 0s 0.2s; 
}

.mpl-info-column form.cart .quantity.mpl-quantity-ready { 
    opacity: 1; 
    visibility: visible; 
    transition: opacity 0.2s ease-in-out, visibility 0s 0s; 
}

.mpl-info-column .quantity .mpl-qty-button { 
    width: 38px; 
    height: 48px; 
    border: none; 
    background-color: #f8f8f8; 
    cursor: pointer; 
    font-size: 22px; 
    color: #888; 
    font-weight: 300; 
    transition: background-color 0.2s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0; 
    line-height: 1; 
}

.mpl-info-column .quantity .mpl-qty-button:hover { 
    background-color: #f0f0f0; 
    color: #333; 
}

.mpl-info-column .quantity .minus { 
    border-right: 1px solid #ddd; 
}

.mpl-info-column .quantity .plus { 
    border-left: 1px solid #ddd; 
}

.mpl-info-column .quantity .input-text.qty { 
    width: 45px; 
    height: 48px; 
    border: none; 
    text-align: center; 
    font-weight: 600; 
    font-size: 16px; 
    color: #333; 
    padding: 0 5px; 
    background-color: #fff; 
    -moz-appearance: textfield; 
}

.mpl-info-column .quantity .input-text.qty::-webkit-outer-spin-button,
.mpl-info-column .quantity .input-text.qty::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

.mpl-info-column form.cart .single_add_to_cart_button { 
    flex-grow: 1; 
    background-color: #cc0000 !important; 
    color: #ffffff !important; 
    border: none; 
    border-radius: 50px; 
    padding: 0 30px; 
    font-size: 16px; 
    font-weight: bold; 
    text-transform: none; 
    transition: background-color 0.3s ease; 
    line-height: 50px; 
    height: 50px; 
    text-shadow: none; 
    flex-basis: 200px; 
}

.mpl-info-column form.cart .single_add_to_cart_button:hover { 
    background-color: #aa0000 !important; 
}

.mpl-info-column form.cart .single_add_to_cart_button.disabled,
.mpl-info-column form.cart .single_add_to_cart_button.wc-variation-selection-needed { 
    background-color: #000000 !important; 
    color: #ffffff !important; 
    cursor: not-allowed; 
}

/* === START: UPDATED WISHLIST CSS === */
.mpl-wishlist-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0;
}
.mpl-wishlist-container .mpl-wishlist-text {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}
.mpl-wishlist-container .single-product-wishlist-icon {
    margin: 0; 
    display: inline-flex;
    align-items: center;
}
/* === END: UPDATED WISHLIST CSS === */

.mpl-shortcode-list-container { 
    margin: 25px 0; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}
.mpl-shortcode-item { 
    padding: 20px; 
    border: 1px dashed #ddd; 
    border-radius: 4px; 
    background: #f9f9f9; 
}

/* =================================================================
 * DESKTOP BREAKPOINTS
 * ================================================================= */

@media (min-width: 1024px) {
    .mpl-widget-wrapper {
        flex-direction: row; /* Chuyển sang 2 cột */
        gap: 30px; /* Giảm gap mặc định */
    }
    
    .mpl-media-column {
        flex-direction: row-reverse; /* Đảo ngược để thumbnail bên trái */
        gap: 20px;
        align-items: flex-start;
        flex: 1 1 55%; /* Cho phép cột media chiếm nhiều không gian hơn một chút */
    }

    .mpl-info-column {
        flex: 1 1 45%;
    }

    .mpl-main-slider {
        flex-grow: 1;
    }

    /* Kích hoạt lại thumbnail trên desktop */
    .mpl-thumbnail-slider,
    .mpl-thumbnail-slider-container {
        display: block;
    }

    .mpl-thumbnail-slider-container {
        width: 80px; /* Giảm chiều rộng cột thumbnail */
        flex-shrink: 0;
        position: relative;
    }
    
    .mpl-thumbnail-slider {
        height: 590px;
    }

    .mpl-thumbnail-slider .swiper-wrapper {
        flex-direction: column; /* Thumbs chạy dọc */
    }

    .mpl-thumbnail-slider .swiper-slide {
        width: 80px;
        height: 80px !important;
        border-radius: 4px; /* Vuông đẹp hơn dọc */
    }
    
    /* Mũi tên điều hướng cho thumbnail dọc */
    .swiper-button-thumb {
        display: flex;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 30px;
        background-color: rgba(255, 255, 255, 0.9);
        border: 1px solid #ddd;
        border-radius: 50%;
        z-index: 10;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s;
    }
    .swiper-button-thumb:hover { background-color: #fff; }
    .swiper-button-thumb::after { font-size: 14px; font-weight: bold; color: #333; }
    .swiper-button-thumb-prev { top: -15px; }
    .swiper-button-thumb-prev::after { content: '▲'; }
    .swiper-button-thumb-next { bottom: -15px; }
    .swiper-button-thumb-next::after { content: '▼'; }
    .swiper-button-thumb.swiper-button-disabled { opacity: 0; cursor: auto; pointer-events: none; }
    
    .mpl-info-panels {
        grid-template-columns: repeat(4, 1fr); 
        gap: 15px;
    }
}

@media (min-width: 1024px) and (max-width: 1366px) {
    .mpl-widget-wrapper {
        gap: 20px; 
    }
    .mpl-media-column {
        gap: 15px;
    }
    .mpl-thumbnail-slider-container {
        width: 65px; 
    }
    .mpl-thumbnail-slider .swiper-slide {
        width: 65px;
        height: 65px !important;
    }
    .panel-title {
        font-size: 12px; 
    }
    .panel-subtitle {
        font-size: 11px;
    }
}

@media (min-width: 1600px) {
     .mpl-widget-wrapper {
        gap: 50px; 
    }
    .mpl-thumbnail-slider-container {
        width: 90px;
    }
    .mpl-thumbnail-slider .swiper-slide {
        width: 90px;
        height: 90px !important;
    }
}

/* CSS cho loader của nút wishlist */
.mpl-wishlist-placeholder {
    min-height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0;
}
.mpl-wishlist-loader {
    width: 20px;
    height: 20px;
    border: 2px solid #e0e0e0;
    border-top-color: #333;
    border-radius: 50%;
    animation: mpl-spin 1s linear infinite;
}
@keyframes mpl-spin {
    to { transform: rotate(360deg); }
}

/* =================================================================
 * PHẦN TÙY CHỈNH CUỐI CÙNG (v5 - Dùng chiều cao cố định)
 * ================================================================= */

/* 1. Tùy chỉnh tên sản phẩm (giữ lại từ trước) */
.mpl-widget-wrapper .product_title.entry-title {
    font-size: 23px !important;
    line-height: 1.2;
}

/* 2. Đưa layout của form về lại căn giữa theo chiều dọc */
.mpl-info-column form.cart {
    align-items: center !important;
}

/* 3. Set chiều cao CỐ ĐỊNH cho toàn bộ cụm số lượng và nút giỏ hàng */
.mpl-info-column .quantity,
.mpl-widget-wrapper button.single_add_to_cart_button {
    height: 42px !important; /* Chiều cao cố định cho cả hai */
}

/* 4. Tùy chỉnh nút "Thêm vào giỏ hàng" với chiều cao cố định */
.mpl-widget-wrapper button.single_add_to_cart_button {
    font-size: 13px !important;
    padding: 0 1.5em !important; /* Xóa padding dọc, để height kiểm soát */
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none;
    color: #ffffff !important;
}

.mpl-widget-wrapper button.single_add_to_cart_button:hover {
    background-color: #c82333 !important;
    border-color: #c82333 !important;
}

/* 5. Bắt buộc nút +/- và ô input phải lấp đầy chiều cao của container */
.mpl-info-column .quantity .mpl-qty-button,
.mpl-info-column .quantity .input-text.qty {
    height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mpl-info-column .quantity .mpl-qty-button {
    font-size: 18px;
    width: 40px;
}

.mpl-info-column .quantity .input-text.qty {
    font-size: 16px;
}
/* =================================================================
 * PHẦN TÙY CHỈNH CUỐI CÙNG (v6 - Fix nút cho sản phẩm đơn giản)
 * ================================================================= */

/* 1. Tùy chỉnh tên sản phẩm (giữ lại từ trước) */
.mpl-widget-wrapper .product_title.entry-title {
    font-size: 23px !important;
    line-height: 1.2;
}

/* 2. Style chung cho form giỏ hàng */
.mpl-info-column form.cart {
    align-items: center !important;
    /* Ngăn các item con bị kéo dài bất thường */
    justify-content: flex-start; 
}

/* 3. Set chiều cao CỐ ĐỊNH cho toàn bộ cụm số lượng và nút giỏ hàng */
.mpl-info-column .quantity,
.mpl-widget-wrapper button.single_add_to_cart_button {
    height: 42px !important; /* Chiều cao cố định cho cả hai */
}

/* 4. Tùy chỉnh nút "Thêm vào giỏ hàng" - QUAN TRỌNG */
.mpl-widget-wrapper button.single_add_to_cart_button {
    flex-grow: 0 !important; /* Ngăn nút tự động kéo dài ra */
    flex-basis: auto !important; /* Reset lại kích thước cơ bản */
    width: 180px !important; /* Đặt chiều rộng cố định */
    font-size: 13px !important;
    padding: 0 1em !important; /* Điều chỉnh padding ngang cho phù hợp */
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none;
    color: #ffffff !important;
    border-radius: 50px !important; /* Thêm lại bo tròn */
}

.mpl-widget-wrapper button.single_add_to_cart_button:hover {
    background-color: #c82333 !important;
    border-color: #c82333 !important;
}

/* 5. Bắt buộc nút +/- và ô input phải lấp đầy chiều cao của container */
.mpl-info-column .quantity .mpl-qty-button,
.mpl-info-column .quantity .input-text.qty {
    height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mpl-info-column .quantity .mpl-qty-button {
    font-size: 18px;
    width: 40px;
}

.mpl-info-column .quantity .input-text.qty {
    font-size: 16px;
}

/* =================================================================
 * PHẦN TÙY CHỈNH TỔNG HỢP CUỐI CÙNG
 * ================================================================= */

/* === SỬA MÀU SẮC CHO GIÁ VÀ TỒN KHO CỦA BIẾN THỂ === */
.mpl-info-column .price,
.mpl-info-column .price .woocommerce-Price-amount.amount,
.mpl-info-column p.stock {
    color: #000000 !important; 
}

/* === SỬA LỖI CĂN LỀ CHO GIÁ/TỒN KHO BIẾN THỂ === */
.mpl-info-column .single_variation_wrap {
    text-align: left !important;
    width: 100% !important;
}

/* === ĐIỀU CHỈNH KHOẢNG CÁCH DỌC (Bản sửa cuối) === */

/* 1. [SỬA LỖI MỚI] - Loại bỏ triệt để khoảng trống trên khối giá */
.mpl-info-column .single_variation_wrap {
    margin-top: 0px !important; /* Buộc khoảng đệm trên là 5px */
    padding-top: 0 !important;  /* Loại bỏ cả padding nếu có */
}

/* 2. Tăng khoảng cách giữa khối giá/tồn kho và cụm số lượng */
.mpl-info-column .single_variation {
    margin-bottom: 15px !important;
}

/* =================================================================
 * BẮT ĐẦU: SỬA LỖI XUNG ĐỘT CSS
 * ================================================================= */

/* 1. Sửa lỗi hiển thị viền cho nút chọn biến thể (swatch) */
.elementor-widget-my_product_layout .mpl-widget-wrapper .mpl-swatch.has-image {
    /* Buộc hiển thị viền và bo góc đúng chuẩn */
    border: 2px solid #ccc !important;
    border-radius: 4px !important;
    padding: 2px !important;
    overflow: hidden; /* Giúp ảnh bên trong không làm hỏng bo góc */
    box-shadow: none !important; /* Xóa bỏ các hiệu ứng đổ bóng có thể gây lỗi */
}

/* Đảm bảo swatch được chọn vẫn có viền đen */
.elementor-widget-my_product_layout .mpl-widget-wrapper .mpl-swatch.has-image.selected {
    border-color: #000 !important;
    box-shadow: 0 0 0 1px #000 !important; /* Thêm hiệu ứng để rõ ràng hơn */
}

/* 2. Sửa lỗi ẩn nút Yêu thích */
.mpl-widget-wrapper .mpl-wishlist-container,
.mpl-widget-wrapper .single-product-wishlist-icon {
    /* Buộc hiển thị khối chứa nút và chính nút đó */
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
}
/* =================================================================
 * KẾT THÚC: SỬA LỖI XUNG ĐỘT CSS
 * ================================================================= */

/* =================================================================
 * NÂNG CẤP: CSS CHO DANH MỤC SẢN PHẨM
 * ================================================================= */
.mpl-product-categories {
    margin-bottom: 8px; /* Khoảng cách với tên sản phẩm */
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase; /* Viết hoa giống ảnh mẫu */
    letter-spacing: 0.5px; /* Giãn cách ký tự một chút */
}

.mpl-product-categories a {
    color: #555; /* Màu chữ xám nhẹ */
    text-decoration: none; /* Bỏ gạch chân */
    transition: color 0.2s ease;
}

.mpl-product-categories a:hover {
    color: #000; /* Đổi màu đen khi rê chuột */
    text-decoration: underline; /* Thêm gạch chân khi rê chuột */
}
/* =================================================================
 * NÂNG CẤP: CSS CHO THẺ SẢN PHẨM (PRODUCT TAGS)
 * ================================================================= */
.mpl-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Khoảng cách giữa các thẻ */
    margin-top: 15px; /* Khoảng cách với phần tử phía trên (nút yêu thích) */
    margin-bottom: 15px; /* Khoảng cách với phần tử phía dưới (mô tả ngắn) */
}

.mpl-product-tag {
    display: inline-block;
    background-color: #000000; /* Nền đen */
    color: #ffffff; /* Chữ trắng */
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase; /* In hoa */
    border-radius: 4px; /* Bo góc nhẹ */
    text-decoration: none;
    line-height: 1.4;
    transition: background-color 0.2s ease;
}

.mpl-product-tag:hover {
    background-color: #333333; /* Màu nền khi rê chuột */
    color: #ffffff; /* Giữ nguyên màu chữ trắng */
}


/* =================================================================
 * BẮT ĐẦU NÂNG CẤP STICKY CART (GIAI ĐOẠN 1-4 + ĐIỀU CHỈNH CUỐI CÙNG)
 * ================================================================= */

/* 1. Khai báo biến chiều cao cho thanh mới */
:root {
    --mpl-sticky-cart-height: 75px; /* Chiều cao của thanh sticky cart */
}

/* 2. CSS cho Thanh Sticky Cart (Layout & Style) */
.mpl-sticky-cart-container {
    display: none; /* Mặc định ẩn trên desktop */
}

@media (max-width: 767px) {
    .mpl-sticky-cart-container {
        /* Hiển thị & Định dạng */
        display: flex;
        align-items: center;
        /* gap: 12px; */ /* ĐÃ XÓA (để fix khoảng trắng) */
        padding: 10px 15px;
        background-color: #ffffff;
        border-top: 1px solid #e0e0e0;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.05);

        /* Định vị Cố định */
        position: fixed;
        left: 0;
        right: 0;
        z-index: 2147483646; 
        height: var(--mpl-sticky-cart-height);
        
        /* Vị trí QUAN TRỌNG: Nằm BÊN TRÊN my-mbm */
        bottom: calc(var(--my-mbm-height, 60px) + var(--my-mbm-safe-area-bottom, 0px)); 
        
        /* Hiệu ứng (dùng cho Giai đoạn 3 & 4) */
        transform: translate3d(0, 0, 0);
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), visibility 0.3s;
    }

    /* Style cho Nút số lượng (ĐÃ ĐIỀU CHỈNH) */
    .mpl-sticky-qty {
        display: flex;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 25px; /* Bo tròn */
        overflow: hidden;
        margin-right: 10px; /* ĐÃ THÊM (để fix khoảng trắng) */
    }
    .mpl-sticky-qty .mpl-qty-button {
        border: none;
        background: #f5f5f5;
        width: 40px; 
        height: 45px; 
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        color: #000; /* Đổi màu nút +/- sang màu đen */
        font-weight: 600; 
    }
    .mpl-sticky-qty .input-text.qty {
        width: 40px;
        height: 45px; 
        border: none;
        text-align: center;
        font-weight: 600;
        background: transparent;
        padding: 0 5px;
        color: #000; 
        -moz-appearance: textfield;
    }
    .mpl-sticky-qty .input-text.qty::-webkit-outer-spin-button,
    .mpl-sticky-qty .input-text.qty::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Style cho Nút Add to Cart (ĐÃ ĐIỀU CHỈNH) */
    .mpl-sticky-add-to-cart {
        flex-grow: 1; /* Nút sẽ lấp đầy không gian còn lại */
    }
    .mpl-sticky-atc-button {
        width: 100%; /* Lấp đầy cha của nó (.mpl-sticky-add-to-cart) */
        background-color: #c82333 !important; /* Màu đỏ thẫm */
        color: #ffffff !important;
        border: none;
        
        /* === NÂNG CẤP THEO YÊU CẦU MỚI (Ảnh 8) === */
        border-radius: 50px !important; /* Đổi lại thành bo tròn (pill shape) */
        padding: 10px 25px !important; /* Tăng đệm ngang lên 25px */
        /* === KẾT THÚC NÂNG CẤP === */

        font-size: 12px; /* Giảm 2px */
        font-weight: 500; /* Giảm độ đậm */
        line-height: 1.2;
        height: 45px; /* Căn chỉnh chiều cao */
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease;
    }
    .mpl-sticky-atc-button:hover {
        background-color: #a70000 !important;
    }
}

/* * 3. Cập nhật Body Padding cho Mobile
 * Ghi đè lên rule của my-mbm khi cả 2 thanh cùng active.
 */
@media (max-width: 767px) {
    body.my-mbm-active {
        padding-bottom: calc(
            (var(--my-mbm-height, 60px) + var(--my-mbm-safe-area-bottom, 0px)) + /* Khoảng trống cho my-mbm */
            var(--mpl-sticky-cart-height) /* Khoảng trống cho thanh cart mới */
        ) !important; /* Dùng !important để đảm bảo ghi đè rule cũ */
    }
}
/* =================================================================
 * KẾT THÚC NÂNG CẤP GIAI ĐOẠN 1
 * ================================================================= */


/* =================================================================
 * BỔ SUNG GIAI ĐOẠN 3: CSS ẨN/HIỆN (GĐ 3)
 * ================================================================= */

@media (max-width: 767px) {
    /* * 4. CSS cho Giai đoạn 3: Ẩn thanh sticky khi có popup.
     * Class này được thêm/xóa bởi my-product-layout.js (Giai đoạn 3).
     */
    .mpl-sticky-cart-container.mpl-sticky-suppressed {
        /* * Ẩn bằng cách trượt nó xuống dưới.
         * Sử dụng !important để đảm bảo ghi đè, giống như my-mbm
         */
        transform: translate3d(0, 100%, 0) !important;
        visibility: hidden !important;
    }
}

/* Keyframes cho hiệu ứng "lắc" (Từ Giai đoạn 2) */
@keyframes mpl-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}


/* =================================================================
 * BỔ SUNG GIAI ĐOẠN 4: CSS ẨN/HIỆN THEO SCROLL (UX)
 * ================================================================= */

@media (max-width: 767px) {
    /* * 5. Ẩn thanh sticky khi nút "Add to Cart" chính vẫn còn
     * trong tầm nhìn (class được thêm bởi JS Giai đoạn 4).
     */
    .mpl-sticky-cart-container.mpl-sticky-hidden-initial {
        /* * Trượt nó xuống dưới đáy, cộng thêm cả chiều cao của my-mbm
         * để nó ẩn hoàn toàn sau cả 2 thanh.
         */
        transform: translate3d(0, calc(100% + var(--my-mbm-height, 60px) + var(--my-mbm-safe-area-bottom, 0px)), 0) !important;
        visibility: hidden !important;
    }
}