.gallery-container {
    display: flex;
    flex-direction: row-reverse; /* Đảo ngược HTML: Đưa ảnh chính sang PHẢI, list nhỏ sang TRÁI */
    max-width: 100%; /* Tăng độ rộng tổng để chứa đủ 2 cột */
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    gap: 20px; /* Khoảng cách giữa 2 cột */
}

/* =========================================
           2. CỘT BÊN PHẢI: HIỂN THỊ CHÍNH
           ========================================= */
.main-media-wrapper {
    flex: 1; /* Chiếm toàn bộ phần không gian còn lại */
    position: relative;
    height: 500px; /* Chiều cao cố định trên máy tính */
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    user-select: none;
    cursor: grab;
}

    .main-media-wrapper:active {
        cursor: grabbing;
    }

.main-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .main-content img, .main-content video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }

    .main-content video {
        pointer-events: auto;
    }

/* Nút Prev & Next */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    z-index: 10;
}

    .nav-btn:hover {
        background-color: rgba(0,0,0,0.8);
    }

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* =========================================
           3. CỘT BÊN TRÁI: DANH SÁCH THUMBNAIL
           ========================================= */
.thumbnail-grid {
    width: 270px;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* chia thành 2 cột */
    gap: 10px;
    align-content: start; /* dồn ảnh lên trên */
    overflow-y: auto; /* cuộn dọc nếu nhiều ảnh */
    padding-right: 5px;
}

    /* Tuỳ chỉnh thanh cuộn dọc cho máy tính nhìn tinh tế hơn */
    .thumbnail-grid::-webkit-scrollbar {
        width: 6px;
    }

    .thumbnail-grid::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .thumbnail-grid::-webkit-scrollbar-thumb {
        background: #bbb;
        border-radius: 4px;
    }

        .thumbnail-grid::-webkit-scrollbar-thumb:hover {
            background: #888;
        }

.thumbnail-item {
    break-inside: avoid; /* Quan trọng: Ngăn không cho một ảnh bị cắt nửa văng sang cột bên kia */
    width: 100%;
    height: auto; /* Bỏ chiều cao cố định để lấy đúng tỷ lệ ảnh */
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    opacity: 0.6;
    transition: all 0.3s ease;
    background: #000;
    display: inline-block; /* Hỗ trợ hiển thị Masonry tốt hơn */
}

    .thumbnail-item img, .thumbnail-item video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
    }

    .thumbnail-item:hover, .thumbnail-item.active {
        opacity: 1;
        border-color: #007bff;
    }

/* =========================================
           4. RESPONSIVE CHO ĐIỆN THOẠI (< 768px)
           ========================================= */
@media (max-width: 769px) {
    body {
        padding: 0;
    }

    .gallery-container {
        flex-direction: column; /* Hủy 2 cột, trả về xếp DỌC: Khung to nằm trên, list nằm dưới */
        padding: 0;
        border-radius: 0;
        gap: 0;
    }

    .main-media-wrapper {
        width: 100%;
        height: 300px;
        border-radius: 0;
        margin-bottom: 10px; /* Tạo khoảng cách với hàng ảnh nhỏ bên dưới */
    }

    .thumbnail-grid {
        width: 100%;
        height: auto; /* Hủy giới hạn chiều cao 500px */
        flex-wrap: nowrap; /* Ép thành 1 hàng ngang */
        overflow-x: auto; /* Kích hoạt cuộn NGANG */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0 10px 10px 10px;
        display:flex;
    }

    .thumbnail-item {
        flex: 0 0 auto;
        width: 65px;
        height: 65px;
    }

    /* Ẩn thanh cuộn ngang trên mobile cho gọn gàng */
    .thumbnail-grid::-webkit-scrollbar {
        display: none;
    }

    .thumbnail-grid {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}