/* Biến chủ đề chung (hợp đồng biến, bộ thiết kế 21/10/2026). Nạp TRƯỚC app.css. app.css chỉ đọc các biến
   này (--ink, --accent, --surface... là bí danh tính từ đây), nên ĐỔI CHỦ ĐỀ = đổi khối [data-chu-de] trên
   <html>, không sửa app.css hay man-*.css. Ba chủ đề cùng tên biến:
     1  Văn phòng sáng   nền xám nhạt, xanh lam, Inter, chữ 14 px             (mặc định, khối :root)
     2  Giấy ấm          nền kem, xanh lam ngọc, Source Sans 3, chữ 15 px
     3  Số liệu dày      tương phản cao, bo nhỏ, IBM Plex Sans, chữ 13 px, khoảng cách 3..28 px
   Tên biến (BẮT BUỘC, mỗi chủ đề định nghĩa đủ):
   màu   --nen --be-mat --be-mat-2 --vien --chu --chu-phu --chinh --chinh-dam --chinh-nhat --tren-chinh
         --dat --dat-nhat --canh-bao --canh-bao-nhat --nguy --nguy-nhat --thong-tin --thong-tin-nhat
   hình  --bo-goc-nho --bo-goc --bo-goc-lon --bong-1 --bong-2 --vong-focus
   chữ   --phong-chu --phong-so --co-nho --co-vua --co-lon --co-tieu-de
   cách  --k1 .. --k6   (chủ đề 3 dùng nhịp 3, 6, 10, 14, 20, 28 px)
   động  --tg-nhanh --tg-vua --tg-cham --cong-ra --cong-vao --cong-nay
   Sắc phụ (--line, --row-hover, --danger-hover...) là màu TĨNH tính từ các biến trên, ghi giữa hai dấu
   sac-phu:bat-dau / sac-phu:ket-thuc bởi `uv run python scripts/sac_phu.py --ghi` (không dùng color-mix để
   chạy chắc trên máy phòng cũ); tests/web/test_chu_de.py báo lệch. Sửa màu một chủ đề thì chạy lại lệnh đó.
   Chỉ nền sáng, không chế độ tối. Phông: woff2 biến thiên Fontsource 5.3.x ba bộ vietnamese, latin-ext, latin
   trong static/fonts/ (SIL OFL 1.1, giấy phép OFL-*.txt cạnh tệp); trình duyệt chỉ tải bộ của chủ đề đang dùng. */


/* ---- phông chủ đề 1: Văn phòng sáng (Inter) */
@font-face { font-family: "Inter Var"; font-style: normal; font-weight: 100 900; font-display: swap; 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; src: url("fonts/inter-vietnamese-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Inter Var"; font-style: normal; font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Inter Var"; font-style: normal; font-weight: 100 900; font-display: swap; 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; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); }

/* ---- phông chủ đề 2: Giấy ấm (Source Sans 3) */
@font-face { font-family: "Source Sans Var"; font-style: normal; font-weight: 200 900; font-display: swap; 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; src: url("fonts/source-sans-3-vietnamese-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Source Sans Var"; font-style: normal; font-weight: 200 900; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src: url("fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Source Sans Var"; font-style: normal; font-weight: 200 900; font-display: swap; 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; src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations"); }

/* ---- phông chủ đề 3: Số liệu dày (IBM Plex Sans) */
@font-face { font-family: "Plex Sans Var"; font-style: normal; font-weight: 100 700; font-display: swap; 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; src: url("fonts/ibm-plex-sans-vietnamese-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Plex Sans Var"; font-style: normal; font-weight: 100 700; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src: url("fonts/ibm-plex-sans-latin-ext-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Plex Sans Var"; font-style: normal; font-weight: 100 700; font-display: swap; 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; src: url("fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations"); }

/* ---- chủ đề 1: Văn phòng sáng (Inter) (mặc định) */
:root, :root[data-chu-de="1"] {
  --nen: #f5f6f8;
  --be-mat: #ffffff;
  --be-mat-2: #eceff3;
  --vien: #d3d9e1;
  --chu: #1b2230;
  --chu-phu: #546072;
  --chinh: #2851c4;
  --chinh-dam: #1e3f9e;
  --chinh-nhat: #e5ebfa;
  --tren-chinh: #ffffff;
  --dat: #167445;
  --dat-nhat: #e2f4ea;
  --canh-bao: #9a5b00;
  --canh-bao-nhat: #fdf1d8;
  --nguy: #bf2f26;
  --nguy-nhat: #fbe6e4;
  --thong-tin: #226ba3;
  --thong-tin-nhat: #e3eff8;

  --bo-goc-nho: 4px;
  --bo-goc: 6px;
  --bo-goc-lon: 10px;
  --bong-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --bong-2: 0 8px 24px rgba(16, 24, 40, 0.12);
  --vong-focus: 0 0 0 2px #ffffff, 0 0 0 4px #2851c4;

  --phong-chu: "Inter Var", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --phong-so: "Inter Var", "Segoe UI", system-ui, sans-serif;
  --co-nho: 12px;
  --co-vua: 14px;
  --co-lon: 16px;
  --co-tieu-de: 20px;

  --k1: 4px;
  --k2: 8px;
  --k3: 12px;
  --k4: 16px;
  --k5: 24px;
  --k6: 32px;

  --tg-nhanh: 120ms;
  --tg-vua: 200ms;
  --tg-cham: 320ms;
  --cong-ra: cubic-bezier(0.2, 0, 0, 1);
  --cong-vao: cubic-bezier(0.3, 0, 1, 1);
  --cong-nay: cubic-bezier(0.34, 1.56, 0.64, 1);

  --so-tinh-nang: "tnum", "zero";
  /* sac-phu:bat-dau */
  --ink-2: #444a55;
  --faint: #959ca8;
  --surface-3: #dee3e9;
  --line: #dfe4e9;
  --line-strong: #bcc3cd;
  --hdr-top: #f5f6f8;
  --rowno: #f2f4f7;
  --row-hover: #f3f6fd;
  --danger-hover: #a02720;
  --danger-line: #edc5c2;
  --warn-row: #fef7ea;
  --warn-line: #dfcbad;
  --ok-line: #b4d3c3;
  --mark: #e9dbc7;
  --backdrop: rgba(27, 34, 48, 0.4);
  --accent-line: #becbed;
  --accent-hi: #9eb1e4;
  --accent-glow: rgba(40, 81, 196, 0.45);
  --viec-may-hover: #dde3f6;
  --btn-an: #b7bec9;
  --chinh-an: #1d3988;
  --nguy-an: #852623;
  --kinh: rgba(255, 255, 255, 0.55);
  --vien-o: #7f8895;
  --cho-o: #677182;
  --chip-hover: #cbced4;
  --chip-an: #bec2c8;
  --lo-chon: #eff3fc;
  --bong-dinh: rgba(27, 34, 48, 0.16);
  /* sac-phu:ket-thuc */
}

/* ---- chủ đề 2: Giấy ấm (Source Sans 3) */
:root[data-chu-de="2"] {
  --nen: #f6f2ea;
  --be-mat: #fffdf9;
  --be-mat-2: #efe9de;
  --vien: #d9d0c1;
  --chu: #2a2420;
  --chu-phu: #66594e;
  --chinh: #1b5b66;
  --chinh-dam: #124750;
  --chinh-nhat: #dff0f1;
  --tren-chinh: #ffffff;
  --dat: #3d7424;
  --dat-nhat: #e7f1de;
  --canh-bao: #94540a;
  --canh-bao-nhat: #fbeed2;
  --nguy: #b02a1f;
  --nguy-nhat: #f9e3df;
  --thong-tin: #2d6693;
  --thong-tin-nhat: #e1ecf5;

  --bo-goc-nho: 5px;
  --bo-goc: 8px;
  --bo-goc-lon: 14px;
  --bong-1: 0 1px 2px rgba(72, 48, 24, 0.07), 0 1px 4px rgba(72, 48, 24, 0.09);
  --bong-2: 0 10px 28px rgba(72, 48, 24, 0.16);
  --vong-focus: 0 0 0 2px #fffdf9, 0 0 0 4px #1b5b66;

  --phong-chu: "Source Sans Var", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --phong-so: "Source Sans Var", "Segoe UI", system-ui, sans-serif;
  --co-nho: 13px;
  --co-vua: 15px;
  --co-lon: 17px;
  --co-tieu-de: 22px;

  --k1: 4px;
  --k2: 8px;
  --k3: 12px;
  --k4: 16px;
  --k5: 24px;
  --k6: 32px;

  --tg-nhanh: 140ms;
  --tg-vua: 240ms;
  --tg-cham: 380ms;
  --cong-ra: cubic-bezier(0.22, 0.8, 0.3, 1);
  --cong-vao: cubic-bezier(0.4, 0, 1, 1);
  --cong-nay: cubic-bezier(0.34, 1.3, 0.64, 1);

  --so-tinh-nang: "tnum", "zero";
  /* sac-phu:bat-dau */
  --ink-2: #504b47;
  --faint: #a0978f;
  --surface-3: #e3dbce;
  --line: #e4ddd1;
  --line-strong: #c4bbac;
  --hdr-top: #f6f2ea;
  --rowno: #f4efe6;
  --row-hover: #f1f7f5;
  --danger-hover: #94231a;
  --danger-line: #e9c2bc;
  --warn-row: #fdf5e4;
  --warn-line: #ddc7ad;
  --ok-line: #c1d1b5;
  --mark: #e7d8c4;
  --backdrop: rgba(42, 36, 32, 0.4);
  --accent-line: #bbcccd;
  --accent-hi: #98b5ba;
  --accent-glow: rgba(27, 91, 102, 0.45);
  --viec-may-hover: #dbe3e1;
  --btn-an: #c0b6a8;
  --chinh-an: #174046;
  --nguy-an: #7f231b;
  --kinh: rgba(255, 253, 249, 0.55);
  --vien-o: #8c8279;
  --cho-o: #776b61;
  --chip-hover: #cfc9c0;
  --chip-an: #c4beb4;
  --lo-chon: #ecf5f4;
  --bong-dinh: rgba(42, 36, 32, 0.16);
  /* sac-phu:ket-thuc */
}

/* ---- chủ đề 3: Số liệu dày (IBM Plex Sans) */
:root[data-chu-de="3"] {
  --nen: #e8ebef;
  --be-mat: #ffffff;
  --be-mat-2: #dfe3e9;
  --vien: #8792a2;
  --chu: #0a0e14;
  --chu-phu: #384352;
  --chinh: #10389a;
  --chinh-dam: #0a2874;
  --chinh-nhat: #d8e3fb;
  --tren-chinh: #ffffff;
  --dat: #0b6634;
  --dat-nhat: #d6efe0;
  --canh-bao: #7d4300;
  --canh-bao-nhat: #fbe9bd;
  --nguy: #a3120a;
  --nguy-nhat: #fbdad6;
  --thong-tin: #0a5486;
  --thong-tin-nhat: #d6e8f6;

  --bo-goc-nho: 2px;
  --bo-goc: 3px;
  --bo-goc-lon: 5px;
  --bong-1: 0 0 0 1px rgba(10, 14, 20, 0.12);
  --bong-2: 0 4px 12px rgba(10, 14, 20, 0.22), 0 0 0 1px rgba(10, 14, 20, 0.16);
  --vong-focus: 0 0 0 2px #ffffff, 0 0 0 4px #0a0e14;

  --phong-chu: "Plex Sans Var", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --phong-so: "Plex Sans Var", "Segoe UI", system-ui, sans-serif;
  --co-nho: 12px;
  --co-vua: 13px;
  --co-lon: 15px;
  --co-tieu-de: 18px;

  --k1: 3px;
  --k2: 6px;
  --k3: 10px;
  --k4: 14px;
  --k5: 20px;
  --k6: 28px;

  --tg-nhanh: 80ms;
  --tg-vua: 140ms;
  --tg-cham: 220ms;
  --cong-ra: cubic-bezier(0.2, 0, 0, 1);
  --cong-vao: cubic-bezier(0.4, 0, 1, 1);
  --cong-nay: cubic-bezier(0.3, 1.15, 0.6, 1);

  --so-tinh-nang: "tnum", "zero";
  /* sac-phu:bat-dau */
  --ink-2: #36393e;
  --faint: #848a94;
  --surface-3: #afb6c2;
  --line: #a9b1bc;
  --line-strong: #798494;
  --hdr-top: #edf0f3;
  --rowno: #e9ebf0;
  --row-hover: #edf2fd;
  --danger-hover: #890f08;
  --danger-line: #e5bdba;
  --warn-row: #fdf3db;
  --warn-line: #d5c3ad;
  --ok-line: #b1cebe;
  --mark: #e2d6c7;
  --backdrop: rgba(10, 14, 20, 0.4);
  --accent-line: #b7c3e1;
  --accent-hi: #93a5d2;
  --accent-glow: rgba(16, 56, 154, 0.45);
  --viec-may-hover: #d9dfef;
  --btn-an: #768190;
  --chinh-an: #0a2361;
  --nguy-an: #700f0a;
  --kinh: rgba(255, 255, 255, 0.55);
  --vien-o: #6a727d;
  --cho-o: #4e5865;
  --chip-hover: #bdc1c7;
  --chip-an: #b0b4ba;
  --lo-chon: #e8eefd;
  --bong-dinh: rgba(10, 14, 20, 0.16);
  /* sac-phu:ket-thuc */
}