.shopee-variation-wrapper {
    margin-bottom: 20px;
}

.shopee-variation-title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 15px;
}

.shopee-variation-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.shopee-variation-item {
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 6px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: 0.2s;
}

/* Hover không đổi màu */
.shopee-variation-item:hover {
    /* để trống */
}

/* Chỉ active mới đổi màu */
.shopee-variation-item.active {
    border-color: #ee4d2d;
    background: #ffe9e4;
    color: #ee4d2d;
}

.shopee-variation-item.disabled {
    background: #eee;
    color: #aaa;
    border-color: #ddd;
    cursor: not-allowed;
    opacity: 0.6;
}








/* ========================
   FOOTER BAR SHOPEE MOBILE
   ======================== */
@media (max-width: 768px) {

    .storefront-handheld-footer-bar .footer-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
    }

    .footer-chat { background: #007aff; }
    .footer-add-to-cart { background: #f57224; }
    .footer-buy-now { background: #d0021b; }
}

/* ========================
   POPUP CHỌN BIẾN THỂ SHOPEE
   ======================== */
.variant-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    font-family: inherit;
}

.variant-popup.active {
    display: block;
}

.vp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.vp-box {
    position: absolute;
    bottom: 50px;
    width: 100%;
    background: #fff;
    border-radius: 14px 14px 0 0;
    padding: 15px;
    animation: popupSlideUp .25s ease-out;
}

@keyframes popupSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.vp-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
}

.vp-close {
    position: absolute;
    right: 10px;
    top: 8px;
    font-size: 26px;
    cursor: pointer;
}

.vp-content {
    margin-top: 10px;
}

/* Ẩn bảng biến thể WooCommerce gốc trong popup */
.vp-content table.variations {
    width: 100%;
    margin-bottom: 10px;
}

/* Nút thêm vào giỏ trong popup */
.vp-content .single_add_to_cart_button {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    border-radius: 6px;
}










/* --- CSS Cho Popup Biến Thể --- */

/* 1. Đảm bảo Giá và Số lượng nằm trên cùng một hàng */
.vp-options-footer {
    display: flex; /* Bật Flexbox cho container chứa giá và số lượng */
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: space-between; /* Đẩy giá sang trái, số lượng sang phải */
    padding: 10px 0; /* Thêm padding trên dưới */
    border-top: 1px solid #eee; /* Đường kẻ phân cách */
    margin-top: 15px;
}

/* 2. Thiết lập hiển thị cho khu vực Giá */
.vp-price-display {
    display: flex;
    align-items: center;
    font-size: 1.1em; /* Tăng kích thước chữ cho dễ nhìn */
}

/* 3. Định dạng nhãn 'Giá:' */
.vp-price-display .vp-label {
    margin-right: 8px; /* Khoảng cách giữa nhãn và giá trị */
    font-weight: normal;
    color: #333; /* Màu tối hơn cho nhãn */
}

/* 4. Định dạng giá trị giá (IN ĐẬM, MÀU ĐỎ) */
.vp-price-display .price,
.vp-price-display .price ins .amount {
    font-weight: bold !important; /* In đậm giá trị */
    color: #e30000 !important; /* Màu đỏ nổi bật */
    font-size: 1.2em; /* Tăng kích thước chữ cho giá trị */
}

/* 5. Thiết lập hiển thị cho khu vực Số lượng */
.vp-quantity-input {
    display: flex;
    align-items: center;
    font-size: 1.1em;
}

/* 6. Định dạng nhãn 'Số lượng:' */
.vp-quantity-input .vp-label {
    margin-right: 8px; /* Khoảng cách giữa nhãn và input */
    font-weight: normal;
    color: #333;
}

/* 7. Định dạng khung nhập số lượng */
.vp-quantity-input .quantity input.qty {
    width: 60px; /* Chiều rộng khung nhập nhỏ lại */
    text-align: center;
    padding: 5px 8px;
    height: auto;
}






/* --- CSS Cho Nút Giỏ Hàng trên Mobile Bottom Bar --- */

.mobile-bottom-bar .mbb-cart {
    position: relative; /* Thiết lập vị trí cho badge */
}

.mobile-bottom-bar .mbb-cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #FFEB3B;
    color: #000000;
    font-size: 18px;
    font-weight: 700;
    border-radius: 50%;
    padding: 3px 8px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    z-index: 10;
}

/* Ẩn badge nếu giỏ hàng rỗng (số lượng = 0) */
.mobile-bottom-bar .mbb-cart-count:empty, 
.mobile-bottom-bar .mbb-cart-count:contains("0") {
    display: none;
}