/* Design tokens — suy từ Home.png (viewport tham chiếu 1280, container 1230) */
:root {
  /* màu */
  --c-navy: #003a85;        /* thanh menu */
  --c-navy-900: #012b52;    /* chân trang */
  --c-brand: #0066b3;       /* xanh logo, tiêu đề widget */
  --c-blue: #0b5ed7;        /* nút, gạch đầu dòng */
  --c-blue-dark: #0a4db0;   /* nút khi rê */
  --c-royal: #1a2ea6;       /* tiêu đề khối, link nhấn */
  --c-red: #f22e32;         /* nhãn Tin nóng, thứ hạng */
  --c-orange: #f7931e;      /* nhãn cập nhật */
  --c-gold: #fdc22e;        /* nút vàng */
  --c-text: #1f2a44;
  --c-text-soft: #3a455f;
  --c-muted: #6b7488;
  --c-line: #e4eaf5;
  --c-bg: #ffffff;
  --c-bg-soft: #f2f8fe;     /* thanh trên cùng */
  --c-bg-blue: #eaf2ff;
  --c-focus: #ffb400;

  /* bố cục */
  --container-max: 1230px;  /* đo từ lề trái/phải của mockup: ≈ 1230 (±8) */
  --container-gutter: 24px;
  --side-w: 277px;          /* cột phải trang chủ */
  --sidebar-w: 300px;       /* cột bên trang trong */
  --gap: 22px;

  /* chữ */
  --font-heading: 'Be Vietnam Pro', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text-body: 15px;
  --text-nav: 14.5px;
  --text-meta: 12.5px;
  --text-block-title: 18px;
  --text-hero-title: 24px;

  /* hình khối */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(16, 40, 100, .08);
  --shadow-md: 0 3px 14px rgba(16, 40, 100, .10);
  --shadow-lg: 0 10px 28px rgba(16, 40, 100, .16);

  /* chuyển động */
  --t-fast: .18s;
  --t-base: .3s;
  --t-slow: .6s;
  --ease: cubic-bezier(.22, .61, .36, 1);
}