/* =======================================
   1. MÁY TÍNH (DESKTOP)
   ======================================= */
.custom-album-wrapper {
    display: flex;
    width: 100%;
    height: 420px; /* Chiều cao ngắn lại (bạn có thể đổi thành 400px hoặc 450px tùy thích) */
    overflow: hidden;
    position: relative;
    background-color: transparent;
    gap: 5px; /* Khoảng cách 5px giữa các ảnh */
}

.custom-album-item {
    position: relative;
    flex: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    overflow: hidden;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ĐÃ XÓA HOÀN TOÀN LỚP PHỦ ĐEN ::before ĐỂ ẢNH HOÀN TOÀN TỰ NHIÊN */

/* Chữ dọc thu gọn trên PC */
.album-title-vertical {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.album-title-vertical h4 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    /* Đổ bóng chữ để không cần lớp phủ đen mà chữ vẫn đọc được trên nền ảnh */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Chữ mở rộng */
.album-title-expanded {
    position: absolute;
    top: 25px;
    left: 25px;
    right: 25px;
    z-index: 2;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease;
}

.album-title-expanded h3 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    /* Đổ bóng chữ sắc nét */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Khi rê chuột trên PC */
@media (min-width: 769px) {
    .custom-album-item:hover,
    .custom-album-item.active {
        flex: 5;
    }
    .custom-album-item:hover .album-title-vertical,
    .custom-album-item.active .album-title-vertical {
        opacity: 0;
    }
    .custom-album-item:hover .album-title-expanded,
    .custom-album-item.active .album-title-expanded {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }
}

/* =======================================
   2. MOBILE (TRƯỢT NGANG LÒI MÉP THẺ KẾ TIẾP)
   ======================================= */
@media (max-width: 768px) {
    .custom-album-wrapper {
        height: 380px; /* Chiều cao ngắn lại trên mobile */
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 5px; /* Khoảng cách 5px giữa các ảnh trên mobile */
        padding: 0 10px;
        scrollbar-width: none;
    }

    .custom-album-wrapper::-webkit-scrollbar {
        display: none;
    }

    .custom-album-item {
        /* Chiều rộng 80% để lộ mép thẻ tiếp theo ở mép phải */
        flex: 0 0 80% !important;
        height: 100%;
        scroll-snap-align: start;
        border-radius: 4px;
    }

    /* Ẩn chữ dọc */
    .album-title-vertical {
        display: none;
    }

    /* Luôn hiện chữ tiêu đề nằm trên góc */
    .album-title-expanded {
        opacity: 1 !important;
        transform: none !important;
        top: 20px;
        left: 15px;
        right: 15px;
    }

    .album-title-expanded h3 {
        font-size: 18px;
    }
}