/* Phông chữ tự phục vụ (không gọi Google Fonts): Nunito cho chữ thường, Baloo 2 cho tiêu đề. Chỉ gồm bộ ký tự Việt và Latin cơ bản (đủ cho tiếng Việt); trình duyệt chỉ tải bộ nào cần dùng. */
/* nunito-vietnamese-wght-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/static/fonts/nunito-vietnamese-wght-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* nunito-latin-wght-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/static/fonts/nunito-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* baloo-2-vietnamese-wght-normal */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/static/fonts/baloo-2-vietnamese-wght-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* baloo-2-latin-wght-normal */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/static/fonts/baloo-2-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* UI kit Măng Non: biến thiết kế dùng chung cho website công khai và trang quản trị.
   Phong cách Claymorphism (bo góc lớn, viền dày nhạt, bóng đôi), tông xanh lá "măng" và vàng nắng.
   Bảng màu và cặp phông chọn theo skill ui-ux-pro-max (Baloo 2 + Nunito, có chữ tiếng Việt).
   Quy ước: màu chữ trên nền màu luôn dùng --on-*, độ tương phản chữ thường tối thiểu 4.5:1. */
:root {
  --font-display: "Baloo 2", "Nunito", ui-rounded, system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Nền và chữ */
  --bg: #f0fdf4; --band: #e3f7e9; --surface: #ffffff; --surface-2: #f6fbf7;
  --ink: #0f172a; --ink-2: #475569; --line: #cfe8d8; --line-soft: #e3f1e8;

  /* Thương hiệu */
  --primary: #15803d; --primary-deep: #166534; --on-primary: #ffffff; --primary-soft: #dcfce7; --link: #166534;
  --accent: #d97706; --accent-deep: #b45309; --on-accent: #1c1100; --accent-soft: #fef3c7; --accent-ink: #92400e;

  /* Trạng thái */
  --info: #1d4ed8; --info-soft: #dbeafe;
  --danger: #b91c1c; --danger-deep: #7f1d1d; --on-danger: #ffffff; --danger-soft: #fee2e2;
  --warn-soft: #fef3c7; --warn-ink: #92400e;

  /* Hiệu ứng */
  --shadow: rgba(21, 128, 61, .22); --hi: rgba(255, 255, 255, .95); --shade: rgba(21, 128, 61, .08);
  --focus: #1d4ed8;

  /* Chuyển động: nhẹ, ngắn, chỉ dùng transform/opacity (không làm xô lệch bố cục) */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 160ms; --dur: 240ms; --dur-img: 320ms;
  --zoom-img: 1.05; --zoom-card: 1.02; --zoom-kb: 1.05; --press: .97;
  --lift-sm: -2px; --lift: -4px; --nudge: 3px;
  --clay-hover: 0 20px 30px -14px var(--shadow), inset 0 -3px 0 var(--shade), inset 0 2px 0 var(--hi);

  /* Hình khối */
  --r-lg: 26px; --r-md: 18px; --r-sm: 12px;
  --clay: 0 12px 24px -14px var(--shadow), inset 0 -3px 0 var(--shade), inset 0 2px 0 var(--hi);
}

/* Người dùng chọn "giảm chuyển động": mọi mức phóng to, nâng, dịch đều về 0 (chỉ còn đổi màu và bóng, không có chuyển động) */
@media (prefers-reduced-motion: reduce) {
  :root { --zoom-img: 1; --zoom-card: 1; --zoom-kb: 1; --press: 1; --lift-sm: 0px; --lift: 0px; --nudge: 0px; }
}

html[data-contrast="high"] {
  --bg: #000; --band: #000; --surface: #000; --surface-2: #000; --ink: #fff; --ink-2: #fff; --line: #fff; --line-soft: #fff;
  --primary: #ffeb3b; --primary-deep: #ffeb3b; --on-primary: #000; --primary-soft: #000; --link: #ffeb3b;
  --accent: #ffeb3b; --accent-deep: #fff; --on-accent: #000; --accent-soft: #000; --accent-ink: #ffeb3b;
  --info: #9fd0ff; --info-soft: #000; --danger: #ff8a80; --danger-deep: #fff; --on-danger: #000; --danger-soft: #000; --warn-soft: #000; --warn-ink: #ffeb3b;
  --shadow: transparent; --hi: transparent; --shade: transparent; --focus: #fff;
}