/* ===================================================================
   Trường Tiểu học Thiện Nghiệp — 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ừ logo nhà trường (yeucau/logo.jpg): xanh biển đậm, vàng bình minh, đỏ ngọn đuốc,
   thêm xanh ngọc (biển) và màu cát (đồi cát Mũi Né) cho các mảng nền.

   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: #12479a;          /* xanh đậm: tiêu đề, link, chữ nhấn */
    --c-primary-dark: #0b3374;     /* đậm hơn: hover nút, nền tối */
    --c-primary-darker: #072457;   /* đậm nhất */
    --c-primary-soft: #2b86d8;     /* xanh sáng: gradient, icon, viền nhấn */
    --c-primary-mist: #e9f2fc;     /* rất nhạt: nền thẻ, ô ảnh trống */
    --c-accent: #f5b21b;           /* vàng: mục menu đang chọn, gạch dưới tiêu đề */
    --c-accent-dark: #d9980a;      /* vàng đậm: hover */
    --c-accent-soft: #fff1cc;      /* vàng nhạt: nền huy hiệu */

    /* ---- Màu riêng của giao diện trường học ---- */
    --c-sky: #2f8fdc;              /* đầu gradient thanh menu / nút */
    --c-sky-deep: #12479a;         /* cuối gradient thanh menu / nút */
    --c-sky-bg: #eaf5fc;           /* nền trời nhạt các section */
    --c-footer: #0a3274;           /* nền chân trang (khớp bg-footer.jpg) */
    --c-red: #d9232b;              /* tiêu đề tin nổi bật, câu khẩu hiệu */
    --c-orange: #f28a1f;           /* chuông thông báo, tiêu đề khung thông báo */
    --c-orange-soft: #fff0da;      /* nền thẻ thông báo */
    --c-orange-mist: #fde2b6;      /* nền khung thông báo */
    --c-leaf: #12a39b;             /* xanh ngọc (biển): điểm nhấn thiếu nhi */

    /* ---- Biển & đồi cát (giao diện Thiện Nghiệp) ---- */
    --c-sand: #fbf3e1;             /* nền cát nhạt các section xen kẽ */
    --c-sand-deep: #f3e3bd;        /* cát đậm: viền, chấm nhấn */
    --c-sea: #0c3a82;              /* xanh biển đậm: nền khối thông báo, phương châm */
    --c-sea-deep: #072457;
    --c-nav-from: #2f8fdc;         /* đầu gradient thanh menu */
    --c-nav-to: #12479a;           /* cuối gradient thanh menu */

    /* ---- Màu trung tính ---- */
    --c-ink: #112240;              /* chữ tiêu đề */
    --c-body: #3a4658;             /* chữ thân bài */
    --c-muted: #66758a;            /* chữ phụ, chú thích */
    --c-line: #d9e5f2;             /* viền */
    --c-line-soft: #edf3fa;        /* viền rất nhạt, kẻ bảng */
    --c-bg: #ffffff;
    --c-bg-soft: #f4f8fd;          /* 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: #12479a;
    --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: 12px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --rule: 4px;                   /* độ dày gạch vàng dưới tiêu đề */
    --shadow-sm: 0 2px 10px rgba(18, 71, 154, .09);
    --shadow: 0 10px 28px rgba(18, 71, 154, .14);
    --shadow-lg: 0 24px 60px rgba(18, 71, 154, .22);

    /* 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);
}