/* ==========================================================================
   PRODUCT GALLERY COMPONENT (TỰ ĐỘNG BUNG FULL TRÊN MOBILE)
   ========================================================================== */

/* Trên máy tính: Chiếm 48% chia đôi 2 cột */
.product-gallery { 
    width: 48%; 
    flex: 0 0 48%; 
    box-sizing: border-box;
}

.product-gallery-main { 
    position: relative; 
    width: 100%; 
    margin-bottom: 15px; 
    overflow: hidden; 
    border-radius: 8px; 
}

.product-gallery-main img { 
    width: 100%; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    display: block; 
    border-radius: 8px; 
}

/* NÚT MŨI TÊN CHUYỂN ẢNH */
.product-gallery-main button.prev,
.product-gallery-main button.next { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(255, 255, 255, 0.85); 
    color: var(--text-heading); 
    border: none; 
    font-size: 20px; 
    width: 36px;
    height: 36px;
    border-radius: 50%; 
    cursor: pointer; 
    z-index: 10; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base); 
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.product-gallery-main button.prev:hover,
.product-gallery-main button.next:hover { 
    background: var(--color-accent-2); 
    color: #ffffff; 
}

.product-gallery-main button.prev { left: 10px; }
.product-gallery-main button.next { right: 10px; }

/* KHUNG ẢNH NHỎ THUMBNAILS (4 CỘT) */
.product-gallery-thumbs { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 12px; 
}

.product-gallery-thumbs img { 
    width: 100%; 
    height: auto; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    cursor: pointer; 
    opacity: 0.5; 
    transition: var(--transition-base); 
    border-radius: 8px; 
}

.product-gallery-thumbs img.is-active, 
.product-gallery-thumbs img:hover { 
    opacity: 1; 
    box-shadow: 0 0 0 2px var(--color-accent-2); 
}

/* ==========================================================================
   RESPONSIVE: ÉP FULL 100% KÍCH THƯỚC TRÊN TABLET VÀ MOBILE
   ========================================================================== */
@media (max-width: 1024px) {
    .product-gallery { 
        width: 100% !important; 
        flex: 0 0 100% !important; 
        max-width: 100% !important;
    }
    
    .product-gallery-main button.prev,
    .product-gallery-main button.next {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }
    
    .product-gallery-thumbs {
        gap: 8px;
    }
}