:root {
    --primary-color: #2c3e50;
    --background-color: #ffffff;
    --light-gray: #f0f0f0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; background-color: var(--background-color); color: var(--primary-color); opacity: 0; transition: opacity 0.5s ease-in-out; }
body.is-visible { opacity: 1; }
.page-transition-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background-color); z-index: 9999; transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1); }
.is-exiting .page-transition-overlay { transform: translateY(0); }
.gallery-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--light-gray); flex-shrink: 0; background: #fff; z-index: 10; }
.gallery-header h1 { font-size: 1.1rem; font-weight: 600; text-transform: uppercase; text-align: center; flex-grow: 1; }
.back-button, .placeholder { font-size: 1.2rem; width: 40px; }
.gallery-wrapper { display: flex; flex-direction: column; height: 100vh; width: 100%; padding: 0; background-color: var(--light-gray); }
.gallery-main { flex-grow: 1; display: flex; gap: 20px; max-width: 1400px; width: 100%; margin: 0 auto; background: #ffffff; padding: 20px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.1); min-height: 0; }
.main-gallery-container { width: 65%; flex-shrink: 0; position: relative; border-radius: 8px; overflow: hidden; }
.main-gallery { width: 100%; height: 100%; }
.main-gallery .gallery-cell { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.main-gallery .gallery-cell img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; cursor: pointer; }
.flickity-button { background: rgba(0, 0, 0, 0.4); transition: background-color 0.3s; }
.flickity-button:hover { background: rgba(0, 0, 0, 0.7); }
.flickity-button-icon { fill: white; }

/* === CSS THUMBNAIL DESKTOP === */
.thumbs-gallery-container { flex-grow: 1; height: 100%; position: relative; padding: 55px 0; box-sizing: border-box; }
.thumbs-gallery { height: 100%; }
.thumbs-gallery .flickity-viewport { height: 100% !important; }
.thumbs-gallery .flickity-slider { width: 100%; height: 100%; }
.thumbs-gallery .gallery-cell { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 15px; }
.thumb-item {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.6;
    aspect-ratio: 1 / 1; /* Thêm tỉ lệ khung hình 1:1 cho ô thumbnail */
}
.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Quan trọng: crop ảnh để vừa khung */
}
.thumb-item:hover { opacity: 1; }
.thumb-item.is-active { opacity: 1; border-color: var(--primary-color); transform: scale(1.05); }

/* Nút điều khiển thumbnail */
.thumb-button-prev, .thumb-button-next { position: absolute; left: 0; width: 100%; height: 45px; background-color: rgba(255, 255, 255, 0.9); color: var(--primary-color); display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 10; transition: background-color 0.3s ease; user-select: none; border: none; }
.thumb-button-prev:hover, .thumb-button-next:hover { background-color: #fff; }
.thumb-button-prev { top: 0; border-radius: 8px 8px 0 0; }
.thumb-button-next { bottom: 0; border-radius: 0 0 8px 8px; }
.thumb-button-prev:disabled, .thumb-button-next:disabled { opacity: 0.3; cursor: auto; }

.caption-container { display: none; }
.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; z-index: 1000; padding: 20px; overflow: hidden; }
#popup-image { display: block; max-width: 95%; max-height: 95%; object-fit: contain; cursor: grab; transition: transform 0.2s ease-out; }
#popup-image.is-zoomed { cursor: grabbing; }
.close-button { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; z-index: 1001; }
.close-button:hover, .close-button:focus { color: #bbb; text-decoration: none; cursor: pointer; }

/* === CẤU HÌNH CHO ĐIỆN THOẠI === */
@media (max-width: 768px) {
    .gallery-main { flex-direction: column; padding: 0; gap: 0; box-shadow: none; border-radius: 0; }
    .main-gallery-container { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; order: 1; }
    .thumbs-gallery-container { order: 3; padding: 10px; height: auto; }
    
    .thumbs-gallery .gallery-cell {
        grid-template-columns: repeat(3, 1fr);
        /* Bỏ grid-template-rows để chiều cao tự động theo chiều rộng */
        gap: 10px;
    }
    
    /* Bắt buộc ô thumbnail trên mobile phải là hình vuông */
    .thumb-item {
        aspect-ratio: 1 / 1;
    }
    .thumb-item.is-active { transform: none; }
    .thumb-button-prev, .thumb-button-next { display: none; }

    .caption-container { display: block; padding: 1rem; text-align: center; border-top: 1px solid var(--light-gray); border-bottom: 1px solid var(--light-gray); background-color: #fff; order: 2; }
    #image-caption { font-size: 0.9rem; color: #555; }
}

/* === CSS CHO ALBUM CON (SỬA LẠI TỈ LỆ) === */
.sub-album-nav { flex-shrink: 0; width: 100%; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 10px 0; box-shadow: 0 -5px 15px rgba(0,0,0,0.1); }
.sub-album-container { display: flex; justify-content: flex-start; align-items: center; gap: 15px; max-width: 1400px; margin: 0 auto; padding: 0 20px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--light-gray) var(--primary-color); }
.sub-album-container::-webkit-scrollbar { height: 8px; }
.sub-album-container::-webkit-scrollbar-track { background: #4a617a; }
.sub-album-container::-webkit-scrollbar-thumb { background-color: var(--light-gray); border-radius: 10px; border: 2px solid #4a617a; }
.sub-album-button { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100px; padding: 8px; border: 2px solid transparent; border-radius: 12px; background-color: rgba(0, 0, 0, 0.2); color: var(--light-gray); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background-color 0.3s, border-color 0.3s; white-space: normal; text-align: center; }
.sub-album-button:hover { background-color: rgba(0, 0, 0, 0.4); }
.sub-album-button.active { background-color: rgba(255, 255, 255, 0.9); color: var(--primary-color); font-weight: 600; border-color: var(--primary-color); }
.sub-album-thumbnail {
    width: 100%;
    aspect-ratio: 1 / 1; /* Bắt buộc là hình vuông */
    object-fit: cover;   /* Crop ảnh để vừa khung */
    border-radius: 8px;
    pointer-events: none;
}
.sub-album-name { pointer-events: none; line-height: 1.3; }

/* === GÓI TÙY CHỈNH GIẢM CHIỀU CAO ALBUM CON === */

/* 1. Giảm chiều ngang của nút để ảnh tự thu nhỏ theo */
.sub-album-button {
    width: 75px;         /* Đặt chiều ngang hẹp hơn (ví dụ: 75px) */
    gap: 4px;            /* Giảm khoảng cách giữa ảnh và chữ */
    padding: 6px;        /* Giảm khoảng đệm bao quanh bên trong nút */
}

/* 2. Thu nhỏ chữ để không bị ngắt dòng */
.sub-album-name {
    font-size: 0.7rem;  /* Làm chữ nhỏ lại đáng kể */
    line-height: 1.2;    /* Giảm khoảng cách giữa các dòng chữ (nếu có) */
}

/* 3. Giảm khoảng đệm của cả thanh nav chứa các nút */
.sub-album-nav {
    padding: 8px 0; /* Giảm khoảng đệm trên và dưới của toàn bộ thanh */
}