/*
 * trang-chu.css — Chỉ nạp ở trang chủ
 *
 * Bốn kiểu khối duy nhất, tất cả đều nhận chuyên mục từ Tuỳ biến:
 *   1. mo-dau     — khối mở đầu ba cột
 *   2. the-ngang-4 — bốn thẻ dọc xếp hàng
 *   3. cot-3      — ba cột chuyên mục
 *   4. thu-vien   — lưới ảnh
 * Muốn dựng trang chủ cho website mới thì chọn chuyên mục cho từng suất,
 * không cần viết thêm CSS.
 */

/* ============ 1. Thanh tin nóng ============ */
.tin-nong {
    display: flex;
    align-items: center;
    gap: var(--khoang-nho);
    margin-bottom: var(--khoang);
    padding: 8px 12px;
    overflow: hidden;
    background: var(--mau-nen-khoi);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong);
}

.tin-nong__nhan {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 5px 11px;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--mau-chu-dao);
    background: var(--mau-chinh);
    border-radius: var(--bo-goc-nho);
}
.tin-nong__nhan svg { width: 13px; height: 13px; }

.tin-nong__ds {
    display: flex;
    flex: 1;
    gap: 28px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.tin-nong__ds::-webkit-scrollbar { display: none; }

.tin-nong__ds li {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-size: .8125rem;
}
/* Chấm đỏ ngăn cách giữa các tin */
.tin-nong__ds li::before {
    content: "";
    width: 5px; height: 5px;
    flex: none;
    background: var(--mau-chinh);
    border-radius: 50%;
}

/* ============ 2. Khối mở đầu — ba cột ============ */
.mo-dau {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: var(--khoang);
    margin-bottom: var(--khoang);
}

/* Bốn tin phụ ở cột giữa */
.mo-dau__phu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: var(--mau-nen-khoi);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong);
}
.mo-dau__phu > * + * { padding-top: 12px; border-top: 1px solid var(--mau-vien); }

/* ============ 3. Khối bốn thẻ dọc ============ */
.khoi-luoi {
    margin-bottom: var(--khoang);
    padding: 16px;
    background: var(--mau-nen-khoi);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong);
}

.luoi-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--khoang);
}
.luoi-4 .khung-anh { aspect-ratio: 4 / 3; }

/* ============ 4. Khối ba cột chuyên mục ============ */
.cot-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--khoang);
    margin-bottom: var(--khoang);
}

/*
 * Hàng cuối thường không đủ ba khối. Khi đó các cột còn lại phải giãn ra chia
 * nhau hết bề rộng, chứ để nguyên lưới ba cột thì phần thiếu trống hoác giữa
 * trang, nhìn như giao diện bị hỏng.
 * Số cột thật của từng hàng do front-page.php đếm trước rồi gắn vào lớp CSS.
 */
.cot-3--so-1 { grid-template-columns: minmax(0, 1fr); }
.cot-3--so-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cot-3__muc {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--mau-nen-khoi);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong);
}

/* Bài nổi bật đầu mỗi cột */
.cot-3__noi-bat { margin-bottom: 14px; }
.cot-3__noi-bat .khung-anh { aspect-ratio: 16 / 10; margin-bottom: 9px; }
.cot-3__noi-bat .the-bai__ten { font-size: 1rem; }

/* ============ 5. Khối thư viện ảnh ============ */
/*
 * Đúng theo thiết kế mẫu: năm ảnh xếp thành 2 cột × 3 hàng,
 * ảnh thứ tư trong mã nguồn cao gấp đôi và nằm ở cột phải.
 *
 *   ┌─────┬─────┐
 *   │  1  │  2  │
 *   ├─────┼─────┤
 *   │  3  │     │
 *   ├─────┤  4  │
 *   │  5  │     │
 *   └─────┴─────┘
 */
.thu-vien {
    /* flex: 1 cho lưới nuốt hết chiều cao còn thừa, không để trống đáy cột */
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 10px;
    /* Chặn dưới phòng khi hai cột bên cạnh quá ngắn */
    min-height: 300px;
}

/*
 * Ô ảnh cao bằng đúng hàng chứa nó.
 *
 * TUYỆT ĐỐI KHÔNG thêm aspect-ratio cho ô trong lưới này. Chiều cao hàng đã do
 * grid-template-rows quyết định rồi; thêm aspect-ratio vào là trình duyệt lấy
 * chiều cao đó SUY NGƯỢC ra chiều rộng, cho ra con số gấp đôi bề rộng cột và
 * ảnh tràn hẳn ra ngoài thẻ. Muốn giữ khuôn ảnh thì đã có object-fit: cover.
 */
.thu-vien .khung-anh { height: 100%; }

/* Ô cao gấp đôi: chiếm trọn hai hàng cộng khoảng cách giữa chúng */
.thu-vien__lon { grid-row: span 2; }

/*
 * Mọi ảnh trong lưới đặt tuyệt đối. Nếu để ảnh nằm trong dòng chảy bình thường,
 * kích thước thật của nó sẽ đẩy hàng cao lên theo, làm vỡ tỉ lệ chia hàng.
 */
.thu-vien .khung-anh > img { position: absolute; inset: 0; }

/*
 * Lưới ảnh nằm trong hàng THIẾU CỘT.
 *
 * Hàng thiếu cột thì các cột còn lại giãn rộng ra. Giữ nguyên lưới hai cột trong
 * một thẻ rộng gấp ba sẽ cho ra những tấm ảnh to quá khổ, cao hơn cả màn hình.
 *
 * Nên trường hợp này bỏ hẳn kiểu lệch: các ảnh bằng nhau, giữ tỉ lệ 4/3 và tự
 * xuống dòng theo bề rộng thật. Đơn giản, không bao giờ vỡ, vẫn ra dáng thư viện.
 */
.cot-3--so-1 .thu-vien,
.cot-3--so-2 .thu-vien {
    flex: none;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    min-height: 0;
    /* Xếp sát lên trên, nếu để giãn thì hở một mảng trắng lớn giữa các hàng ảnh */
    align-content: start;
}

.cot-3--so-1 .thu-vien .khung-anh,
.cot-3--so-2 .thu-vien .khung-anh {
    aspect-ratio: 4 / 3;
    height: auto;
}

.cot-3--so-1 .thu-vien__lon,
.cot-3--so-2 .thu-vien__lon {
    grid-row: auto;
}

/* ============ 6. Điện thoại và máy tính bảng ============ */

@media (max-width: 1100px) {
    .luoi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    /* Khối mở đầu xếp dọc: bài chính trước, tin phụ sau */
    .mo-dau { grid-template-columns: minmax(0, 1fr); }

    /* Ba cột chuyên mục xuống còn một cột */
    .cot-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .luoi-4 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .khoi-luoi, .cot-3__muc, .mo-dau__phu { padding: 12px; }

    /* Thanh tin nóng trên điện thoại: cuộn ngang bằng ngón tay */
    .tin-nong { flex-direction: column; align-items: stretch; gap: 8px; }
    .tin-nong__nhan { align-self: flex-start; }
}