/**
 * Trang chủ (module trang-chu) — bố cục riêng của module trên nền hệ thống thiết kế "mn-" (css/mn.css).
 * Chỉ gồm lớp mang tiền tố "tc-"; màu, khoảng cách, bo góc lấy từ biến --mn-*.
 * Tệp được lõi nạp ở các trang của module; block của module đặt ở trang khác tự nạp qua mn75_block_css().
 */

/* ==========================================================================
   1. Nội dung trang chủ do module in: khối giới thiệu, số liệu, truy cập nhanh
   ========================================================================== */

.tc-home > * + * {
    margin-top: var(--mn-space-6);
}

.tc-hero__note {
    max-width: 62ch;
    margin: 18px 0 0;
    padding-left: 14px;
    border-left: 4px solid var(--mn-yellow-400);
    color: var(--mn-ink-700);
    font-size: var(--mn-text-sm);
    line-height: 1.55;
}

.tc-quick__desc {
    display: block;
    margin-top: -4px;
    color: var(--mn-ink-600);
    font-size: var(--mn-text-xs);
    font-weight: 400;
    line-height: 1.4;
}

/* Lưới số liệu: các hàng được chia đều (4 ô = 2 + 2 trên máy tính bảng, 6 ô = 3 + 3 trên màn hình rộng); số cột do
   theme.php tính. Điện thoại giữ mặc định của giao diện (mỗi hàng một ô) */
@media (min-width: 576px) and (max-width: 991.98px) {
    .tc-stats--t1 .mn-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .tc-stats--t2 .mn-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-stats--t3 .mn-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .tc-stats--d2 .mn-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-stats--d3 .mn-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tc-stats--d4 .mn-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tc-stats--d5 .mn-stats {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Màn hình rộng: các hàng ô truy cập nhanh được chia đều (8 ô = 4 + 4, 9 ô = 5 + 4…); số cột do theme.php tính */
@media (min-width: 992px) {
    .tc-quick--c3 .mn-quick__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tc-quick--c4 .mn-quick__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tc-quick--c5 .mn-quick__list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .tc-quick--c6 .mn-quick__list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* ==========================================================================
   2. Thẻ tin của các block (news_item.tpl)
   ========================================================================== */

/* Ảnh gốc nhỏ hơn ô ảnh: in đúng cỡ thật ở giữa ô, không kéo giãn cho nhoè */
.tc-news__media--small {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-news__media--small img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Hình trang trí của giao diện đặt vào ô hình của bài KHÔNG có ảnh trong một LƯỚI thẻ (nv_trang_chu_news_cards()):
   chỉ hiện ở nơi thẻ đứng cạnh thẻ khác trong lưới nhiều cột — các thẻ cùng hàng cao bằng nhau, thẻ chỉ có chữ sẽ bị
   kéo cao và để lại một khoảng trắng lớn. Ở bố cục một cột (điện thoại, vùng hẹp) và trong bản in, thẻ của bài không
   có ảnh chỉ còn phần chữ */
.tc-news__media--placeholder {
    display: none;
}

@media screen and (min-width: 576px) {
    /* lưới 2–3 thẻ bằng nhau của "Tin mới nhất": hai cột từ 576px */
    .tc-latest__grid .tc-news__media--placeholder {
        display: block;
    }
}

@media screen and (min-width: 624px) {
    /* lưới thẻ của "Tin theo cơ sở", "Tin theo chủ đề": nhiều cột từ 624px (dưới đó thẻ thu gọn thành hàng ngang) */
    .tc-grid .tc-news__media--placeholder {
        display: block;
    }
}

/* Lưới đặt trong vùng hẹp (cột bên 320px): chỉ còn một cột, không cần hình giữ chỗ */
.tc-theme,
.tc-sites__panel {
    container-type: inline-size;
}

@container (max-width: 583.98px) {
    .tc-grid .tc-news__media--placeholder {
        display: none;
    }
}

.tc-news--big .tc-news__title {
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
    line-height: 1.3;
}

/* Thẻ lớn của bài KHÔNG có ảnh (nv_trang_chu_news_lead()): một "tấm bảng tin" chỉ có chữ thay cho hình giữ chỗ cỡ lớn —
   nền xanh rất nhạt, vạch vàng bên trái, tóm tắt dài hơn */
.tc-news--textlead {
    background: linear-gradient(135deg, var(--mn-blue-50) 0%, var(--mn-surface) 72%);
    border-left: 6px solid var(--mn-yellow-400);
}

.tc-news--textlead > .tc-news__body {
    justify-content: center;
    gap: 10px;
}

.tc-news--textlead .mn-card__text {
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

.tc-news--compact {
    height: 100%;
    background: var(--mn-surface);
}

/* Thẻ gọn: ngày đăng và nhãn cơ sở nằm trên cùng một hàng */
.tc-news__meta {
    gap: 4px 10px;
}

/* Lưới thẻ tin của block "Tin theo cơ sở" và "Tin theo chủ đề": số cột theo bề rộng của VÙNG CHỨA (ba cột ở vùng rộng
   toàn trang, hai cột ở máy tính bảng, một cột trong cột bên 320px) — block dùng được ở mọi vị trí */
@media (min-width: 576px) {
    .tc-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    }
}

/* Thẻ trong lưới (tin theo cơ sở, tin theo chủ đề): trên điện thoại thu gọn thành hàng ngang — ảnh vuông nhỏ bên trái,
   không in tóm tắt — để một danh sách sáu bài không kéo dài cả trang (tới 623px: lưới còn một cột) */
@media (max-width: 623.98px) {
    .tc-grid {
        gap: var(--mn-space-3);
    }

    .tc-news--gcard {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
        border-radius: var(--mn-radius);
    }

    .tc-news--gcard > .tc-news__media {
        flex: 0 0 88px;
        aspect-ratio: 1 / 1;
        border-radius: var(--mn-radius-sm);
    }

    .tc-news--gcard > .tc-news__body {
        gap: 4px;
        padding: 0;
    }

    .tc-news--gcard .tc-news__title {
        font-size: 1rem;
    }

    .tc-news--gcard .mn-card__text {
        display: none;
    }
}

/* ==========================================================================
   3. Block "Tin mới nhất": một thẻ lớn + danh sách thẻ gọn
   ========================================================================== */

.tc-latest > * + * {
    margin-top: var(--mn-space-5);
}

.tc-latest__split {
    display: grid;
    gap: var(--mn-gap);
    grid-template-columns: minmax(0, 1fr);
}

.tc-latest__list {
    display: grid;
    align-content: start;
    gap: var(--mn-space-3);
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-latest__list > li {
    min-width: 0;
}

/* Máy tính bảng: danh sách thẻ gọn chia hai cột (dưới 768px mỗi thẻ cần cả hàng để tiêu đề và nhãn cơ sở không bị xén) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .tc-latest__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .tc-latest__split {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: stretch;
    }

    /* Hai cột cao bằng nhau: thẻ lớn nhường phần chênh lệch cho ảnh; khi danh sách ngắn hơn thẻ lớn thì các thẻ gọn
       chia đều chiều cao của cột */
    .tc-latest__lead {
        display: flex;
        min-width: 0;
    }

    .tc-latest__lead > .tc-news--big {
        flex: 1 1 auto;
    }

    .tc-latest__lead .tc-news__media {
        flex: 1 1 auto;
        min-height: 300px;
        aspect-ratio: auto;
    }

    .tc-latest__lead .tc-news__body {
        flex: 0 0 auto;
    }

    /* Thẻ lớn chỉ có chữ: phần chữ chiếm cả chiều cao của thẻ và nằm giữa */
    .tc-latest__lead > .tc-news--textlead > .tc-news__body {
        flex: 1 1 auto;
        padding: 32px 36px;
    }

    .tc-latest__lead > .tc-news--textlead .tc-news__title {
        font-size: clamp(1.5rem, 1.15rem + 1vw, 1.875rem);
    }

    .tc-latest__list {
        align-content: stretch;
        grid-auto-rows: minmax(min-content, 1fr);
    }

    .tc-latest__list .tc-news--compact {
        align-items: center;
    }

    .tc-latest__list .tc-news--compact > .tc-news__media {
        flex-basis: 72px;
    }
}

/* Chỉ có một bài: thẻ lớn nằm ngang (ảnh bên trái) từ máy tính bảng trở lên */
@media (min-width: 768px) {
    .tc-latest__single .tc-news--big {
        flex-direction: row;
        align-items: stretch;
    }

    .tc-latest__single .tc-news__media {
        flex: 0 0 52%;
        min-height: 300px;
        aspect-ratio: auto;
    }

    .tc-latest__single .tc-news__body {
        justify-content: center;
    }
}

/* ==========================================================================
   4. Phần "Tư liệu của các trường trước sắp xếp" trong các block tin
   ========================================================================== */

.tc-legacy {
    margin-top: var(--mn-space-5);
    padding: var(--mn-space-4) var(--mn-space-5) var(--mn-space-2);
    background: var(--mn-bg-soft);
    border: 1px dashed var(--mn-line-strong);
    border-radius: var(--mn-radius-lg);
}

.tc-legacy:first-child {
    margin-top: 0;
}

.tc-legacy__title {
    margin: 0 0 var(--mn-space-1);
    color: var(--mn-ink-700);
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.35;
}

.tc-legacy__title::before {
    content: '\f187';
    margin-right: 8px;
    font: normal normal normal 1em/1 FontAwesome;
}

@media (min-width: 768px) {
    .tc-legacy__list {
        column-count: 2;
        column-gap: var(--mn-space-6);
    }

    .tc-legacy__list > li {
        break-inside: avoid;
    }

    /* Hai cột: không kẻ đường giữa các dòng (đường kẻ sẽ lệch ở đầu cột thứ hai và lẻ loi khi chỉ có một dòng) */
    .tc-legacy__list > li + li {
        border-top: 0;
    }
}

@media (max-width: 575.98px) {
    .tc-legacy {
        padding: var(--mn-space-3) var(--mn-space-4) var(--mn-space-1);
    }
}

/* ==========================================================================
   5. Block "Tin theo cơ sở" (thẻ tab) và liên kết "Xem tất cả"
   ========================================================================== */

.tc-sites__name {
    margin: 0 0 var(--mn-space-4);
    color: var(--mn-blue-800);
    font-size: 1.1875rem;
    line-height: 1.3;
}

/* Có JavaScript: tên cơ sở đã nằm trên thẻ tab đang chọn, tiêu đề của bảng chỉ còn cho trình đọc màn hình */
.tc-sites[data-mn-tabs-ready] .tc-sites__name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tc-sites__panel > .mn-empty,
.tc-sites__panel > .mn-updating {
    margin-bottom: 0;
}

.tc-more {
    margin: var(--mn-space-4) 0 0;
}

/* ==========================================================================
   6. Dải "Thông báo quan trọng"
   ========================================================================== */

/* Mỗi thông báo là một liên kết đứng riêng: vùng chạm cao tối thiểu 44px */
.tc-pinned__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
}

.tc-pinned__item + .tc-pinned__item {
    margin-top: 0;
    border-top: 1px solid rgba(31, 41, 55, 0.14);
}

.tc-pinned__link {
    display: inline-block;
    padding: 10px 0;
}

/* ==========================================================================
   7. Trang "Sơ đồ website"
   ========================================================================== */

/* Nhóm đầu ("Chuyên mục chính", dài nhất) đứng một cột; các nhóm còn lại xếp lưới ở phần còn lại của bề rộng — bố cục
   xác định (không phụ thuộc cách trình duyệt cân các cột) và luôn dùng hết bề rộng trang */
.tc-map,
.tc-map__lead,
.tc-map__rest {
    display: grid;
    align-items: start;
    gap: var(--mn-gap);
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.tc-map__group {
    margin: 0;
}

@media (min-width: 768px) {
    .tc-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-map__lead:only-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 992px) {
    .tc-map {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .tc-map__rest {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tc-map__icon {
    margin-right: 4px;
    color: var(--mn-blue-600);
}

.tc-map__note {
    margin: -6px 0 8px;
    color: var(--mn-ink-600);
    font-size: var(--mn-text-xs);
    line-height: 1.4;
}

@media print {
    /* Sơ đồ website: một cột, các nhóm nối tiếp nhau và ĐƯỢC ngắt trang ở giữa (nhóm đầu dài hơn phần còn lại của
       trang thứ nhất: nếu cấm ngắt, trang đầu chỉ còn tiêu đề); từng dòng liên kết thì không bị cắt đôi */
    .tc-map,
    .tc-map__lead,
    .tc-map__rest {
        display: block;
    }

    .tc-map .tc-map__group {
        display: block;
        margin: 0 0 12pt;
        overflow: visible;
        break-inside: auto;
        page-break-inside: auto;
    }

    .tc-map .mn-card__head {
        break-after: avoid;
        page-break-after: avoid;
    }

    .tc-map .mn-cattree ul li,
    .tc-map .mn-cattree > li > a,
    .tc-map__note {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .tc-hero__note {
        border-left-color: currentColor;
    }

    .tc-news--textlead {
        background: none;
    }

    /* Bản in: mọi bảng của block "Tin theo cơ sở" đều hiện, kèm tên cơ sở */
    .tc-sites[data-mn-tabs-ready] .tc-sites__name {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 var(--mn-space-3);
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}