/*
 * Module Thư viện ảnh, video (thu-vien) — phần CSS riêng của module; các thành phần chung dùng hệ thống mn-* của
 * giao diện (mn.css): mn-card, mn-grid, mn-gallery, mn-video, mn-filter, mn-article... Tệp này chỉ có bố cục riêng của
 * thư viện: khung thay ảnh bìa, ô phát video YouTube (bấm mới tải), lưới video, dải ảnh của block.
 */

/* ----- Thẻ album (trang danh sách, block global.featured) ----- */
.tv-albums {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tv-card {
    height: 100%;
}

.tv-card .mn-card__title a {
    overflow-wrap: anywhere;
}

/* Album chưa có ảnh bìa (video không có ảnh minh hoạ): khung màu với biểu tượng, không dùng ảnh minh hoạ giả */
.tv-card__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mn-blue-50, #EEF5FE), var(--mn-blue-100, #DCEBFC));
    color: var(--mn-blue-700, #084C9E);
    font-size: 3.5rem;
}

/* ----- Trang album ----- */
.tv-album .mn-article__title {
    overflow-wrap: anywhere;
}

/* Phần ảnh, phần video cách nhau vừa phải bên trong khung bài (mặc định của mn-section dành cho các phần của cả trang) */
.tv-album > .mn-section {
    margin-bottom: var(--mn-space-6, 32px);
}

.tv-album .mn-section__lead {
    margin: 0;
    color: var(--mn-ink-600, #4B5563);
    font-size: var(--mn-text-sm, 0.9375rem);
}

.tv-videos {
    display: grid;
    gap: var(--mn-gap, 24px);
    grid-template-columns: minmax(0, 1fr);
    max-width: 860px;
}

@media (min-width: 768px) {
    .tv-videos--multi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }
}

.tv-video {
    min-width: 0;
}

.tv-video > .mn-video {
    margin-bottom: var(--mn-space-2, 8px);
}

/* Dòng chữ thay thế bên trong thẻ video (trình duyệt không phát được) nằm trên nền xanh đậm của khung */
.tv-video video {
    color: #fff;
}

.tv-video__caption {
    margin: 0;
    color: var(--mn-ink-700, #374151);
    font-size: var(--mn-text-sm, 0.9375rem);
}

/* ----- Ô phát video YouTube: chỉ là một liên kết cho tới khi người xem bấm (không tải gì từ YouTube trước đó) ----- */
.tv-yt__poster {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tv-yt__play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: rgba(10, 42, 94, 0.45);
    color: #fff;
    text-align: center;
    text-decoration: none;
}

.tv-yt__play:hover,
.tv-yt__play:focus {
    background: rgba(10, 42, 94, 0.6);
    color: #fff;
    text-decoration: none;
}

.tv-yt__play:focus-visible {
    outline: 3px solid var(--mn-yellow-400, #FFD60A);
    outline-offset: -6px;
}

.tv-yt__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    padding-left: 6px;
    background: var(--mn-yellow-400, #FFD60A);
    border-radius: 50%;
    box-shadow: var(--mn-shadow, 0 6px 18px rgba(0, 0, 0, 0.2));
    color: var(--mn-blue-900, #0A2A5E);
    font-size: 1.75rem;
}

.tv-yt__label {
    padding: 6px 16px;
    background: var(--mn-blue-900, #0A2A5E);
    border-radius: var(--mn-radius-pill, 999px);
    color: #fff;
    font-weight: 700;
}

.tv-yt__play:hover .tv-yt__label,
.tv-yt__play:focus .tv-yt__label {
    text-decoration: underline;
}

@media (max-width: 400px) {
    .tv-yt__icon {
        width: 56px;
        height: 56px;
        font-size: 1.375rem;
    }

    .tv-yt__play {
        gap: 8px;
        padding: 8px;
    }
}

/* ----- Block: tiêu đề phần tư liệu, dải ảnh ----- */
.tv-block__legacy {
    margin: var(--mn-space-6, 32px) 0 var(--mn-space-4, 16px);
    color: var(--mn-blue-800, #063F86);
    font-size: 1.125rem;
}

/*
 * Dải ảnh tự chia cột theo bề rộng của nơi đặt block (cả trang, cột bên, chân trang): mỗi ô rộng ít nhất 72px và các ô
 * chia đều hàng. --tv-n là số ảnh của dải (block_strip.tpl gán): bề rộng tối đa của dải giữ cho ô không quá 160px khi
 * dải chỉ có vài ảnh.
 */
.tv-strip {
    --tv-gap: 8px;
    display: grid;
    gap: var(--tv-gap);
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    max-width: calc(var(--tv-n, 8) * 160px + (var(--tv-n, 8) - 1) * var(--tv-gap));
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .tv-strip {
        --tv-gap: 12px;
    }
}

.tv-strip__item {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--mn-blue-50, #EEF5FE);
    border-radius: var(--mn-radius-sm, 8px);
    overflow: hidden;
}

.tv-strip__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tv-strip__item:focus-visible {
    outline: 3px solid var(--mn-focus, #084C9E);
    outline-offset: 2px;
}

/* ----- In ----- */
@media print {
    .tv-yt {
        aspect-ratio: auto;
        background: none;
    }

    .tv-yt__play {
        position: static;
        display: block;
        padding: 0;
        background: none;
        color: #000;
        text-align: left;
    }

    .tv-yt__icon,
    .tv-yt__poster {
        display: none;
    }

    .tv-yt__label {
        padding: 0;
        background: none;
        color: #000;
    }

    /* Bản in: địa chỉ của video đứng sau tên liên kết (giao diện tắt địa chỉ sau liên kết ở mọi nơi khác) */
    .tv-yt .tv-yt__play[href]::after {
        content: ' (' attr(href) ')' !important;
        font-size: 10pt;
        font-weight: 400;
        word-break: break-all;
    }

    .tv-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Bản in không có nền mờ dưới chú thích: chú thích đứng dưới ảnh thay vì đè lên ảnh */
    .tv-gallery .mn-gallery__item {
        aspect-ratio: auto;
        background: none;
        overflow: visible;
    }

    .tv-gallery .mn-gallery__item img {
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 8px;
    }

    .tv-gallery .mn-gallery__caption {
        position: static;
        display: block;
        padding: 4px 0 0;
        background: none;
        color: #000;
        font-weight: 400;
    }
}

/* Ảnh vuông (logo, bộ nhận diện): hiển thị trọn vẹn, không cắt xén trong ô 4:3 */
.tv-card .mn-card__media img.tv-img--fit,
.tv-strip__item img.tv-img--fit,
.tv-gallery .mn-gallery__item img[width="480"][height="480"] {
    object-fit: contain;
    background: #fff;
}