/*
 * bien-mau.css — TOÀN BỘ BIẾN GIAO DIỆN CỦA ALOXOVN-NEWS
 * ---------------------------------------------------------------
 * Đây là tệp DUY NHẤT cần sửa khi dựng một website tin tức mới.
 * Đổi màu, đổi bề rộng, đổi bo góc ở đây là cả giao diện đổi theo.
 * Không viết quy tắc CSS nào khác vào tệp này.
 */

:root {
    /* ---------- Bề rộng khung ---------- */
    --rong-khung:      1280px;  /* Bề rộng tối đa của toàn trang */
    /*
     * Bề rộng cột nội dung bài viết.
     * Đại Ka chốt ngày 26/08/2026: cho chữ giãn gần sát mép thẻ bài,
     * không bó lại 700px nữa vì để thừa quá nhiều khoảng trắng hai bên.
     * Ở khung 1280px thì cột chữ thật rộng khoảng 876px nên con số 900px
     * dưới đây chỉ đóng vai trò chặn trên cho màn hình siêu rộng.
     *
     * KÈM THEO: ảnh trong bài phải lấy Cloudinary bản w_900 (không còn w_700),
     * nếu vẫn lấy w_700 mà kéo rộng ra 876px thì ảnh sẽ bị mờ.
     */
    --rong-noi-dung:    900px;
    --rong-cot-ben:     300px;  /* Bề rộng cột bên (sidebar) */

    /* ---------- Khoảng cách ---------- */
    --khoang:          24px;    /* Khoảng cách chuẩn giữa các khối */
    --khoang-nho:      12px;
    --khoang-lon:      40px;

    /* ---------- Bo góc ---------- */
    --bo-goc:           6px;
    --bo-goc-nho:       3px;

    /* ---------- Màu thương hiệu ---------- */
    --mau-chinh:       #D32027;  /* Đỏ — lấy từ logo, dùng cho menu, nhãn, gạch tiêu đề */
    --mau-chinh-dam:   #A8181E;  /* Đỏ đậm — trạng thái di chuột */
    --mau-phu:         #1B3A6B;  /* Xanh navy — lấy từ chữ trong logo */

    /* ---------- Màu chữ ---------- */
    --mau-chu:         #1A1A1A;  /* Chữ chính */
    --mau-chu-nhat:    #7A7F87;  /* Chữ phụ: ngày tháng, lượt xem */
    --mau-chu-dao:     #FFFFFF;  /* Chữ trên nền đậm */

    /* ---------- Màu nền ---------- */
    --mau-nen:         #F2F3F5;  /* Nền toàn trang */
    --mau-nen-khoi:    #FFFFFF;  /* Nền các khối nội dung */
    --mau-nen-nhat:    #F7F8F9;  /* Nền nhấn nhẹ */
    --mau-vien:        #E3E5E8;
    --mau-chan-trang:  #26282B;

    /* ---------- Chữ ---------- */
    /* Dùng phông hệ thống: không tải tệp phông, hiển thị tức thì, hỗ trợ tiếng Việt đầy đủ */
    --phong: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    --co-chu:          16px;   /* Cỡ chữ gốc */
    --cao-dong:        1.65;   /* Chiều cao dòng khi đọc dài */
    --cao-dong-tieu-de: 1.35;  /* Chiều cao dòng cho tiêu đề */

    /* ---------- Đổ bóng ---------- */
    --bong:      0 1px 3px rgba(0, 0, 0, .07);
    --bong-noi:  0 4px 14px rgba(0, 0, 0, .12);

    /* ---------- Chuyển động ---------- */
    --chuyen: .18s ease;
}

/* Tôn trọng người dùng đã tắt hiệu ứng chuyển động trong hệ điều hành */
@media (prefers-reduced-motion: reduce) {
    :root { --chuyen: 0s; }
    * { animation: none !important; scroll-behavior: auto !important; }
}