/* ===================================================================
   Trường Tiểu học Phú Long — Design tokens
   Nguồn DUY NHẤT cho màu, chữ, khoảng cách, bo góc, bóng đổ.
   KHÔNG hard-code mã màu ở file khác; luôn dùng biến ở đây.

   Bảng màu lấy từ bản thiết kế trang chủ (yeucau-tieuhocphulong/home-ui.jpg):
   xanh dương nhà trường + vàng nhấn + đỏ cho tiêu đề tin nổi bật, nền trời xanh nhạt.

   Tên biến là hợp đồng với các file CSS còn lại: ĐỔI GIÁ TRỊ, đừng đổi tên.
   =================================================================== */

:root {
    /* ---- Màu thương hiệu ---- */
    --c-primary: #0745C1;          /* xanh đậm: tiêu đề, link, chữ nhấn */
    --c-primary-dark: #082f86;     /* đậm hơn: hover nút, nền tối */
    --c-primary-darker: #062366;   /* đậm nhất */
    --c-primary-soft: #1a8cf0;     /* xanh sáng: gradient, icon, viền nhấn */
    --c-primary-mist: #e8f3ff;     /* rất nhạt: nền thẻ, ô ảnh trống */
    --c-accent: #ffc928;           /* vàng: mục menu đang chọn, gạch dưới tiêu đề */
    --c-accent-dark: #e6a800;      /* vàng đậm: hover */
    --c-accent-soft: #fff4cc;      /* vàng nhạt: nền huy hiệu */

    /* ---- Màu riêng của giao diện trường học ---- */
    --c-sky: #3aa8ff;              /* đầu gradient thanh menu / nút */
    --c-sky-deep: #0a72e8;         /* cuối gradient thanh menu / nút */
    --c-sky-bg: #e9f5ff;           /* nền trời nhạt các section */
    --c-footer: #047ce8;           /* nền chân trang (khớp bg-chantrang.png) */
    --c-red: #e11d2a;              /* tiêu đề tin nổi bật, câu khẩu hiệu */
    --c-orange: #f7a21b;           /* chuông thông báo, tiêu đề khung thông báo */
    --c-orange-soft: #fff1d6;      /* nền thẻ thông báo */
    --c-orange-mist: #fde6b8;      /* nền khung thông báo */
    --c-leaf: #3cb64a;             /* xanh lá: điểm nhấn thiếu nhi */

    /* ---- Màu trung tính ---- */
    --c-ink: #14213d;              /* chữ tiêu đề */
    --c-body: #3a4658;             /* chữ thân bài */
    --c-muted: #6b7686;            /* chữ phụ, chú thích */
    --c-line: #dbe6f3;             /* viền */
    --c-line-soft: #edf3fa;        /* viền rất nhạt, kẻ bảng */
    --c-bg: #ffffff;
    --c-bg-soft: #f3f8fe;          /* nền section xen kẽ */
    --c-bg-page-main: transparent;  /* nền chung của phần nội dung chính các trang con (.page-main) — đổi 1 chỗ này */
    --c-white: #ffffff;

    /* ---- Trạng thái ---- */
    --c-success: #1a7f4b;
    --c-danger: #b3261e;
    --c-star: #e0a82e;

    /* Nen nhat cua ba mau trang thai — dung cho huy hieu, khoi thong bao (giỏ hàng, đơn hàng). */
    --c-success-soft: #e3f3ea;
    --c-danger-soft: #fbe6e5;
    --c-info: #0b43b4;
    --c-info-soft: #e7f0fd;
    /* ---- Chữ ----
       Baloo 2: tiêu đề + menu (tròn, thân thiện với thiếu nhi), Inter: nội dung,
       Dancing Script: câu khẩu hiệu. Font nạp ở Frontend/MasterPage.master. */
    --font-display: "Baloo 2", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-base: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-script: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
    --fs-hero: clamp(2.5rem, 6vw, 4rem);
    --fs-statement: clamp(1.875rem, 3.4vw, 2.875rem);
    --fs-h1: clamp(1.75rem, 3.4vw, 2.5rem);
    --fs-h2: clamp(1.5rem, 2.6vw, 2rem);
    --fs-h3: clamp(1.0625rem, 1.4vw, 1.25rem);
    --fs-lead: clamp(1.0625rem, 1.3vw, 1.1875rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-kicker: 0.75rem;

    /* ---- Khoảng cách ---- */
    --sp-section: clamp(30px, 6vw, 50px);
    --sp-block: clamp(20px, 3.4vw, 30px);
    --container: 1220px;
    --container-narrow: 880px;
    /* ---- Hình khối: bo tròn lớn, thân thiện với thiếu nhi ---- */
    --radius: 10px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --rule: 4px;                   /* độ dày gạch vàng dưới tiêu đề */
    --shadow-sm: 0 2px 10px rgba(11, 67, 180, .08);
    --shadow: 0 10px 28px rgba(11, 67, 180, .12);
    --shadow-lg: 0 24px 60px rgba(11, 67, 180, .2);

    /* Chiều cao header cố định đã bỏ (header là khối thường + thanh menu dính).
       Biến còn lại cho các rule cũ dùng làm khoảng đệm khi dính (sidebar). */
    --header-h: 64px;
    --header-h-sm: 56px;
    --ease: cubic-bezier(.2, .7, .3, 1);
    --t-fast: .18s var(--ease);
    --t: .28s var(--ease);
}