/* =========================================================================
   VinUni Design System — Design Tokens
   Trích xuất từ theme vinuni2023 (main.css) + đối chiếu ảnh chụp giao diện
   Import file này TRƯỚC mọi stylesheet khác:  @import "tokens.css";
   ========================================================================= */

:root {
  /* ---- Màu thương hiệu (core) ---------------------------------------- */
  --vu-red:            #C72127;   /* Đỏ VinUni — CTA, từ nhấn, thanh viền  */
  --vu-navy:           #134D8B;   /* Xanh navy — màu chủ đạo, heading, link */
  --vu-navy-dark:      #0A2848;   /* Navy đậm — footer, overlay ảnh         */
  --vu-navy-deep:      #003366;   /* Navy trầm — nền section tối            */

  /* ---- Accent -------------------------------------------------------- */
  --vu-gold:           #FFC107;   /* Vàng — badge QS 5 sao, huy hiệu        */

  /* ---- Chữ ----------------------------------------------------------- */
  --vu-text:           #2E2E2E;   /* Body text chính                        */
  --vu-text-strong:    #212529;   /* Tiêu đề đậm                            */
  --vu-text-muted:     #818181;   /* Chú thích, caption stat                */
  --vu-white:          #FFFFFF;

  /* ---- Nền ----------------------------------------------------------- */
  --vu-bg:             #FFFFFF;
  --vu-bg-tint:        #F2F6F9;   /* Nền section nhạt xanh                   */
  --vu-bg-gray:        #F4F4F4;   /* Nền xám phân section                   */
  --vu-border:         #DEE2E6;   /* Đường viền, divider                    */

  /* ---- Lớp phủ ảnh (overlay) ----------------------------------------- */
  --vu-overlay-navy:   rgba(19, 77, 139, 0.72);  /* Phủ navy trên ảnh nền  */
  --vu-overlay-dark:   rgba(10, 40, 72, 0.55);   /* Phủ tối hero            */

  /* ---- Typography ---------------------------------------------------- */
  --vu-font-heading:   "Montserrat", sans-serif;
  --vu-font-body:      "Mulish", sans-serif;

  --vu-fw-light:       300;
  --vu-fw-regular:     400;
  --vu-fw-medium:      500;
  --vu-fw-semibold:    600;
  --vu-fw-bold:        700;

  /* Thang cỡ chữ (rem, gốc 16px) */
  --vu-fs-stat:        3.5rem;    /* Số thống kê cỡ lớn (#1, 1140)          */
  --vu-fs-h1:          2.5rem;    /* Hero title                             */
  --vu-fs-h2:          2rem;      /* Section title                          */
  --vu-fs-h3:          1.5rem;
  --vu-fs-h4:          1.25rem;
  --vu-fs-body:        1rem;
  --vu-fs-small:       0.875rem;
  --vu-fs-caption:     0.75rem;

  --vu-lh-tight:       1.2;
  --vu-lh-normal:      1.6;

  /* ---- Spacing (thang 4px) ------------------------------------------- */
  --vu-space-1:        0.25rem;
  --vu-space-2:        0.5rem;
  --vu-space-3:        1rem;
  --vu-space-4:        1.5rem;
  --vu-space-5:        2rem;
  --vu-space-6:        3rem;
  --vu-space-7:        4rem;
  --vu-space-8:        6rem;      /* Padding dọc giữa các section           */

  /* ---- Bo góc & đổ bóng ---------------------------------------------- */
  --vu-radius-sm:      4px;
  --vu-radius:         8px;
  --vu-radius-lg:      12px;
  --vu-shadow-card:    0 4px 16px rgba(0, 0, 0, 0.08);
  --vu-shadow-hover:   0 8px 28px rgba(0, 0, 0, 0.14);

  /* ---- Nét nhấn (accent bar dưới section-title) ---------------------- */
  --vu-accent-bar-w:   48px;
  --vu-accent-bar-h:   3px;

  /* ---- Container & breakpoints --------------------------------------- */
  --vu-container-max:  1200px;
  --vu-bp-sm:          576px;
  --vu-bp-md:          768px;
  --vu-bp-lg:          992px;
  --vu-bp-xl:          1200px;
  --vu-bp-xxl:         1700px;

  /* ---- Chuyển động --------------------------------------------------- */
  --vu-transition:     0.25s ease;
}