/* ==========================================================================
   PRODUCT GALLERY COMPONENT - PURE CLASS SELECTORS
   ========================================================================== */

.product-gallery { 
    width: 45%; 
    flex: 0 0 45%; 
}

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

.product-gallery-main-img { 
    width: 100%; 
    max-height: 450px; /* <--- Thêm giới hạn chiều cao tối đa cho ảnh */
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    display: block; 
    border-radius: var(--radius-card); 
}

/* Nút mũi tên chuyển ảnh */
.product-gallery-arrow { 
    font-family: var(--font-sans); 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(0, 0, 0, 0.3); 
    color: var(--text-white); 
    border: none; 
    font-size: 20px; 
    width: 36px; 
    height: 36px; 
    cursor: pointer; 
    z-index: 10; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: var(--transition-base); 
    padding: 0; 
}

.product-gallery-arrow:hover { 
    background: rgba(0, 0, 0, 0.6); 
}

.product-gallery-prev { 
    left: 15px; 
}

.product-gallery-next { 
    right: 15px; 
}

/* Khung ảnh nhỏ (Thumbnails) dạng lưới 4 cột */
.product-gallery-thumbs { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; 
}

.product-gallery-thumb { 
    width: 100%; 
    height: auto; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    cursor: pointer; 
    opacity: 0.6; 
    transition: var(--transition-base); 
    border-radius: var(--radius-atom); 
}

.product-gallery-thumb.is-active, 
.product-gallery-thumb.active, 
.product-gallery-thumb:hover { 
    opacity: 1; 
}