/* ==========================================================================
   CSS SINGLE PRODUCT (FIX Z-INDEX & DISPLAY)
   ========================================================================== */

:root {
    --primary-blue: #0B74E5;
    --primary-bg-light: #f0f7ff;
    --price-red: #ee4d2d;
}

body { background-color: #f5f5fa !important; }
.shopee-single-wrapper { padding-bottom: 50px; }

/* 1. SLIDER ẢNH */
.product-gallery-col { width: 450px; flex-shrink: 0; overflow: hidden; }

.swiper.mySwiper2 {
    width: 100%;
    height: 450px;
    border-radius: 4px;
    border: 1px solid #f2f2f2;
    margin-bottom: 10px;
    z-index: 1; /* Thấp thôi để không đè menu */
}
.swiper.mySwiper2 .swiper-slide { background: #fff; }
.swiper.mySwiper2 .swiper-slide img {
    width: 100%; height: 100%; object-fit: contain; cursor: zoom-in;
}

.swiper.mySwiper { height: 90px; padding: 2px 0; }
.swiper.mySwiper .swiper-slide {
    width: 25%; height: 100%; opacity: 0.6; cursor: pointer;
    border: 1px solid transparent; border-radius: 2px; overflow: hidden;
}
.swiper.mySwiper .swiper-slide-thumb-active {
    opacity: 1; border: 2px solid var(--primary-blue);
}
.swiper.mySwiper .swiper-slide img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Nút điều hướng Slider */
.swiper-button-next, .swiper-button-prev {
    color: #fff !important; width: 35px !important; height: 35px !important;
    background: rgba(0,0,0,0.3); border-radius: 50%;
}
.swiper-button-next:after, .swiper-button-prev:after { font-size: 14px !important; font-weight: bold; }

/* 2. FIX FANCYBOX (PHÓNG TO) */
/* Đẩy khung phóng to lên cao nhất vũ trụ */
.fancybox__container {
    z-index: 2147483647 !important; 
}
.fancybox__backdrop {
    background: rgba(0, 0, 0, 0.95) !important; /* Nền tối đen cho nổi bật */
}
/* Chỉnh lại dải thumbnails trong chế độ phóng to */
.fancybox__thumbs .carousel__slide {
    border: 2px solid transparent;
    opacity: 0.5;
}
.fancybox__thumbs .carousel__slide.is-nav-selected {
    border-color: var(--primary-blue);
    opacity: 1;
}

/* 3. THÔNG TIN & GIÁ */
.product-briefing { background: #fff; padding: 20px; border-radius: 4px; display: flex; gap: 30px; }
.product-info-col { flex-grow: 1; }
.p-title { font-size: 22px; font-weight: 500; line-height: 1.4; margin: 0 0 10px; color: #333; }

.p-meta { display: flex; align-items: center; font-size: 14px; color: #777; margin-bottom: 15px; }
.p-rating { border-right: 1px solid #ddd; padding-right: 15px; margin-right: 15px; color: var(--primary-blue); }
.p-rating .stars { color: #ffc107; margin-left: 5px; }

.p-price-box { background: #fafafa; padding: 15px 20px; margin-bottom: 25px; display: flex; align-items: center; gap: 15px; }
.current-price { font-size: 30px; color: var(--price-red); font-weight: 600; }
.old-price { text-decoration: line-through; color: #999; font-size: 16px; }
.discount-label { background: var(--price-red); color: #fff; font-size: 10px; padding: 2px 4px; font-weight: 700; border-radius: 2px; }

.quantity-row { display: flex; align-items: center; margin-bottom: 30px; }
.qty-input-group { display: flex; border: 1px solid #dbdbdb; }
.btn-qty { width: 32px; height: 32px; background: #fff; border: 0; cursor: pointer; border-right: 1px solid #dbdbdb; }
.btn-qty:last-child { border-right: 0; border-left: 1px solid #dbdbdb; }
.input-qty { width: 50px; text-align: center; border: 0; outline: 0; font-size: 16px; }
.label { width: 100px; color: #757575; }

.btn-actions-row { display: flex; gap: 15px; }
.btn-add-cart { background: var(--primary-bg-light); border: 1px solid var(--primary-blue); color: var(--primary-blue); height: 48px; padding: 0 20px; font-size: 16px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; gap: 8px; }
.btn-buy-now { background: var(--primary-blue); color: #fff; border: 0; height: 48px; padding: 0 40px; font-size: 16px; cursor: pointer; border-radius: 4px; }

/* 4. MÔ TẢ & BÌNH LUẬN */
.product-details-layout { margin-top: 20px; }
.product-desc-box, .product-reviews-box { background: #fff; padding: 25px; border-radius: 4px; margin-bottom: 20px; }
.box-title { background: #f5f5f5; padding: 14px; margin: -25px -25px 20px -25px; font-size: 18px; font-weight: 500; color: #333; }
/* --- FIX LỖI ẢNH PHÓNG TO (BẢN CHUẨN) --- */

/* 1. Đẩy khung phóng to lên lớp cao nhất (Trên cả Header) */
.fancybox__container {
    z-index: 2147483647 !important;
}

/* 2. Làm nền tối đen để nổi bật ảnh */
.fancybox__backdrop {
    background: rgba(0, 0, 0, 0.95) !important;
    z-index: 1 !important;
}

/* 3. SỬA LỖI ẢNH KHÔNG HIỆN */
/* Quan trọng: Không được dùng transform: none ở đây */
.fancybox__content {
    opacity: 1 !important;
    visibility: visible !important;
    /* Đảm bảo ảnh không bị đè bởi các thành phần khác */
    z-index: 10 !important; 
}

/* Ép ảnh phải hiện thị rõ ràng */
.fancybox__image {
    opacity: 1 !important;
    visibility: visible !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* 4. Dải ảnh nhỏ (Thumbnails) ở dưới */
.fancybox__thumbs {
    z-index: 20 !important;
    background: rgba(0,0,0,0.5) !important;
    padding: 10px 0 !important;
}

.fancybox__thumbs .carousel__slide {
    border: 2px solid transparent !important;
    opacity: 0.5 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    width: 60px !important;
    height: 60px !important;
}

/* Ảnh thumbnail đang chọn sáng lên */
.fancybox__thumbs .carousel__slide.is-nav-selected {
    opacity: 1 !important;
    border-color: #0B74E5 !important;
}
/* RESPONSIVE */
@media (max-width: 768px) {
    .product-briefing { flex-direction: column; }
    .product-gallery-col { width: 100%; }
    .swiper.mySwiper2 { height: 350px; }
}