/* ==============================================================
   TEENCARE — DESIGN TOKENS + THÀNH PHẦN NỀN
   v1.0 · Công ty TNHH TeenUp
   --------------------------------------------------------------
   Toàn bộ mã màu dưới đây lấy bằng cách đo pixel trực tiếp trên 84
   slide Canva gốc, không phải ước lượng.

     Cam chủ đạo   #FFAC08     nút, khối, biểu đồ, số thứ tự
     Cam vừa       #FFC75A     gradient, tầng giữa
     Cam nhạt      #FFE5B2     viền nhấn
     Kem thẻ       #FFF8E9     nền thẻ nội dung
     Mực           #18181B     chữ tiêu đề

   MỘT ĐIỀU CHỈNH CÓ CHỦ ĐÍCH — đọc kỹ:
   #FFAC08 trên nền trắng chỉ đạt tương phản 1.9:1. Chữ nhỏ màu này
   gần như không đọc được trên điện thoại ngoài trời. Nên:

       KHỐI / HÌNH  →  var(--brand)        giữ nguyên #FFAC08
       CHỮ          →  var(--brand-text)   cam sẫm hơn, đạt WCAG AA

   Nhìn tổng thể vẫn đúng nhận diện, nhưng đọc được. Đây là luật,
   không phải gợi ý.

   CÁCH DÙNG
   1. Nạp font:
      <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   2. Dán file này vào <style>.
   3. Đặt <html data-theme="light"> hoặc "dark". Không đặt thì mặc
      định là light (xem khối :root ở dưới).
   ============================================================== */

/* ---------- 1 · TOKEN KHÔNG ĐỔI THEO THEME ---------- */
:root{
  /* màu nhận diện — giống nhau ở cả 2 theme */
  --brand:#FFAC08;   --brand-2:#FFC75A;  --brand-3:#FFE5B2;
  --leaf-1:#4C9A4A;  --leaf-2:#7BC043;   --leaf-3:#2F6B34;  --leaf-4:#A8D98B;
  --bark-1:#8A5A34;  --bark-2:#6B4423;   --bark-3:#A9743F;

  /* semantic — ý nghĩa trạng thái, không phải màu trang trí */
  --danger:#E5484D;  --success:#22A06B;  --info:#2C8FD4;  --violet:#7C5CD6;

  /* chuỗi dữ liệu cho biểu đồ nhiều series (xem references/bieu-do.md) */
  --s1:#FFAC08; --s2:#2C8FD4; --s3:#4C9A4A; --s4:#8A5A34;
  --s5:#7C5CD6; --s6:#71717A; --s7:#E5484D; --s8:#A9743F;

  /* bo góc */
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* nhịp lề — dùng bội số của 4 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  --pad:clamp(20px,5vw,60px);
  --maxw:760px;          /* khổ đọc: bài viết, slide */
  --maxw-wide:1180px;    /* khổ rộng: dashboard, bảng dữ liệu */

  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-num:'Be Vietnam Pro',ui-monospace,'SF Mono',Menlo,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2 · THEME SÁNG (mặc định) ---------- */
:root,
html[data-theme="light"]{
  --bg:#FFFFFF;      --bg-2:#FFFBF3;
  --surface:#FFFFFF; --surface-2:#FFF8E9;  --surface-3:#FFF3DC;
  --ink:#18181B;     --ink-2:#3F3F46;      --muted:#71717A;
  --line:rgba(24,24,27,.10);  --line-strong:rgba(24,24,27,.22);
  --brand-soft:#FFF6E4;   --brand-line:rgba(255,172,8,.35);
  --brand-text:#A35F00;      /* 4.6:1 trên nền trắng — chữ < 22px */
  --brand-text-lg:#C67B00;   /* 3.2:1 — chỉ dùng cho chữ >= 22px  */
  --on-brand:#3A2200;        /* chữ đặt TRÊN khối cam */
  --soil-1:#8A6039; --soil-2:#5E3F26; --soil-3:#7A5230; --root:#FFF6E4;
  --success-soft:#E7F6EF; --danger-soft:#FDECEC; --info-soft:#E8F2FB;
  /* Bản CHỮ của màu trạng thái. #22A06B trên nền nhạt của chính nó chỉ
     đạt 2.98:1 — nhãn 12px không đọc được. Khối/hình vẫn dùng --success,
     --danger, --info; chữ bắt buộc dùng ba token dưới đây. */
  --success-text:#15794F; --danger-text:#C0272D; --info-text:#1B6FA8;
  --shadow:0 1px 2px rgba(60,42,12,.05),0 8px 24px -14px rgba(60,42,12,.18);
  --shadow-lg:0 2px 6px rgba(60,42,12,.07),0 22px 50px -20px rgba(60,42,12,.26);
  --tab-track:#FFF3DC; --tab-on:#FFFFFF;
  color-scheme:light;
}

/* ---------- 3 · THEME TỐI ---------- */
html[data-theme="dark"]{
  --bg:#0F1113;      --bg-2:#0A0C0D;
  --surface:#17191D; --surface-2:#221D14;  --surface-3:#2A2317;
  --ink:#F4F4F5;     --ink-2:#D4D4D8;      --muted:#A1A1AA;
  --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.26);
  --brand-soft:#2A2114;  --brand-line:rgba(255,172,8,.42);
  --brand-text:#FFC75A;      /* 9.6:1 trên nền #0F1113 */
  --brand-text-lg:#FFC75A;
  --on-brand:#2A1800;
  --soil-1:#6B4A2C; --soil-2:#3D2917; --soil-3:#5A3D24; --root:#F3E4C8;
  /* lá sáng lên một nấc, nếu không thì chìm hẳn vào nền tối */
  --leaf-1:#5CAE58; --leaf-2:#84C94C; --leaf-3:#3B8040; --leaf-4:#B3DE97;
  --success:#3ECF8E; --danger:#F16A6F; --info:#5AAEE8; --violet:#9B85E4;
  --s2:#5AAEE8; --s3:#5CAE58; --s4:#A9743F; --s5:#9B85E4; --s7:#F16A6F;
  --success-soft:#13291F; --danger-soft:#2C1719; --info-soft:#122431;
  /* ở dark, bản sáng của màu trạng thái đã đủ tương phản — dùng luôn */
  --success-text:#3ECF8E; --danger-text:#F16A6F; --info-text:#5AAEE8;
  --shadow:0 1px 2px rgba(0,0,0,.36),0 8px 24px -14px rgba(0,0,0,.62);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 22px 50px -20px rgba(0,0,0,.72);
  /* trong dark, tab đang chọn phải SÁNG hơn rãnh nền, không phải tối hơn */
  --tab-track:#131518; --tab-on:#2E2A22;
  color-scheme:dark;
}

/* ---------- 4 · NỀN ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font);
  font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
}

/* ==============================================================
   NGẮT DÒNG TIẾNG VIỆT
   --------------------------------------------------------------
   Trình duyệt mặc định nhét chữ đầy dòng trên rồi vứt phần thừa
   xuống dòng dưới. Với tiếng Việt — từ ngắn, nhiều từ ghép hai
   tiếng — kiểu này hay đẻ ra dòng cuối trơ trọi một chữ, hoặc tách
   đôi một từ ghép ("TÌM HIỂU / CON:", "phương pháp / đúng").

   `balance` chia đều số chữ cho các dòng — tiêu đề và nhãn ngắn.
   `pretty`  cấm dòng cuối chỉ có một chữ — đoạn văn và gạch đầu dòng.
   Trình duyệt cũ bỏ qua hai giá trị này, chữ trở về như cũ, không vỡ.
   ============================================================== */
h1,h2,h3,h4,.kicker,.sub,.lead,.kpi .lbl,.tc-cap{text-wrap:balance}
p,li,.note,.footnote,.hint{text-wrap:pretty}
/* Tiếng Việt không dùng gạch nối cuối dòng. */
body{hyphens:none;-webkit-hyphens:none;overflow-wrap:break-word}

/* ---------- 5 · THANG CHỮ ---------- */
h1{font-size:clamp(1.95rem,5.4vw,3.15rem);line-height:1.1;font-weight:800;margin:0 0 16px;letter-spacing:-.03em}
h2{font-size:clamp(1.38rem,3.7vw,2.02rem);line-height:1.26;font-weight:700;margin:0 0 14px;letter-spacing:-.02em}
h3{font-size:1.03rem;font-weight:700;margin:0 0 6px;letter-spacing:-.01em}
h4{font-size:.92rem;font-weight:700;margin:0 0 4px;letter-spacing:-.005em}
p{margin:0 0 13px;color:var(--ink-2)}
small{font-size:.86rem}
a{color:var(--brand-text);text-underline-offset:3px}
a:hover{color:var(--brand-text-lg)}
strong,b{color:var(--ink);font-weight:700}
.muted{color:var(--muted)}
.lead{font-size:1.1rem}
.sub{font-size:1.03rem;color:var(--muted);margin:-4px 0 22px}
.note{font-size:.87rem;color:var(--muted);margin-top:16px}
.hl{color:var(--brand-text-lg);font-weight:700}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.footnote{margin-top:24px;padding-top:15px;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--muted);font-style:italic}

.kicker{display:inline-flex;align-items:center;gap:7px;
  font-size:.95rem;font-weight:700;color:var(--brand-text);
  margin:0 0 10px;letter-spacing:-.005em}
.kicker.pill{font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  background:var(--brand-soft);border:1px solid var(--brand-line);
  padding:5px 13px;border-radius:var(--r-pill);margin-bottom:16px}

/* ---------- 6 · LOGO ---------- */
.tc-logo{display:inline-flex;align-items:center;gap:8px}
.tc-mark{display:block;flex:0 0 auto}
.tc-word{font-weight:700;letter-spacing:-.025em;color:var(--ink);line-height:1}
.tc-logo-img{display:block;height:auto;flex:0 0 auto}
.tc-on-dark{display:none}
html[data-theme="dark"] .tc-on-light{display:none}
html[data-theme="dark"] .tc-on-dark{display:block}

/* ---------- 7 · BỐ CỤC ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap.wide{max-width:var(--maxw-wide)}
.grid{display:grid;gap:var(--sp-4)}
@media(min-width:660px){
  .grid.c2{grid-template-columns:repeat(2,1fr)}
  .grid.c3{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:980px){
  .grid.c4{grid-template-columns:repeat(4,1fr)}
}
.row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:var(--sp-3);align-items:center;justify-content:space-between;flex-wrap:wrap}

/* ---------- 8 · THẺ ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow)}
.card.soft{background:var(--surface-2);border-color:var(--brand-line);box-shadow:none}
.card.flat{box-shadow:none}
.card h3{margin-bottom:10px}
.card .cardhd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.card .cardhd h3{margin:0}

/* ---------- 9 · NÚT ---------- */
button{font-family:inherit}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:14px;padding:15px 24px;
  font-size:1rem;font-weight:700;cursor:pointer;letter-spacing:-.01em;
  background:var(--ink);color:var(--bg);
  transition:transform .13s,filter .2s,box-shadow .2s;box-shadow:var(--shadow);
}
.btn:active{transform:scale(.975)}
/* Dùng filter chứ không dùng opacity: nút nằm trong khối có animation
   fadeUp thì opacity bị animation ghi đè (animation thắng khai báo
   thường), nút vô hiệu vẫn sáng nguyên như nút bấm được. filter không
   bị animation đụng tới nên luôn ăn. */
.btn:disabled{filter:grayscale(.9) opacity(.42);cursor:not-allowed;box-shadow:none}
.btn.accent{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:var(--on-brand);
  box-shadow:0 6px 20px -8px rgba(255,172,8,.8)}
.btn.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line);
  padding:15px 18px;box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line-strong)}
.btn.sm{padding:9px 15px;font-size:.88rem;border-radius:11px}
.btn.wide{width:100%}

/* nút tròn đổi theme */
.iconbtn{width:35px;height:35px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  transition:background .2s,transform .15s,border-color .2s;flex:0 0 auto}
.iconbtn:hover{background:var(--surface-2);border-color:var(--line-strong)}
.iconbtn:active{transform:scale(.9)}
.iconbtn svg{width:17px;height:17px;display:block}

/* ---------- 10 · NHÃN TRẠNG THÁI ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;
  font-size:.76rem;font-weight:700;letter-spacing:.01em;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.badge.ok{background:var(--success-soft);color:var(--success-text);border-color:transparent}
.badge.bad{background:var(--danger-soft);color:var(--danger-text);border-color:transparent}
.badge.warn{background:var(--brand-soft);color:var(--brand-text);border-color:var(--brand-line)}
.badge.info{background:var(--info-soft);color:var(--info-text);border-color:transparent}
.badge.solid{background:var(--brand);color:var(--on-brand);border-color:transparent;font-weight:800}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}

.chip{font-size:.73rem;font-weight:700;letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px;white-space:nowrap}

/* ---------- 11 · THẺ SỐ LIỆU (KPI) ---------- */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px}
.kpi .lbl{font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.02em;
  text-transform:uppercase}
.kpi .val{font-size:clamp(1.6rem,4vw,2.15rem);font-weight:800;line-height:1.05;
  letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi .val.brand{background:linear-gradient(135deg,var(--brand-2),var(--brand));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .dlt{font-size:.82rem;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.kpi .dlt.up{color:var(--success-text)} .kpi .dlt.down{color:var(--danger-text)}
.kpi .dlt.flat{color:var(--muted)}
.kpi .sub2{font-size:.8rem;color:var(--muted);margin-top:2px}

.stat-big{font-size:clamp(4rem,16vw,8rem);font-weight:800;line-height:.9;letter-spacing:-.05em;
  margin-bottom:18px;background:linear-gradient(135deg,var(--brand-2),var(--brand));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat-big.danger{background:linear-gradient(135deg,#F2777B,var(--danger));
  -webkit-background-clip:text;background-clip:text}

/* ---------- 12 · BẢNG ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:left;font-weight:700;font-size:.76rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);padding:10px 12px;
  border-bottom:1.5px solid var(--line-strong);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface)}
.tblwrap .tbl th:first-child,.tblwrap .tbl td:first-child{padding-left:18px}
.tblwrap .tbl th:last-child,.tblwrap .tbl td:last-child{padding-right:18px}

/* ---------- 13 · Ô NHẬP ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:6px}
.field label .req{color:var(--danger)}
input,textarea,select{
  width:100%;background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:13px 15px;color:var(--ink);font-size:1rem;
  font-family:inherit;transition:border-color .18s,box-shadow .18s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.6}
textarea{min-height:104px;resize:vertical}

/* ---------- 14 · GẠCH ĐẦU DÒNG ---------- */
.blist{list-style:none;padding:0;margin:0 0 6px;text-align:left}
.blist li{position:relative;padding-left:26px;margin-bottom:13px;font-size:1rem;color:var(--ink-2)}
.blist li:before{content:'';position:absolute;left:3px;top:.6em;width:8px;height:8px;
  border-radius:50%;background:var(--brand)}
.blist.check li:before{content:'✓';width:auto;height:auto;background:none;border-radius:0;
  left:0;top:0;color:var(--brand-text);font-weight:800;font-size:.95rem}

/* ---------- 15 · THẺ SỐ CÓ CỜ CAM (mẫu lặp xuyên suốt deck) ---------- */
.numcard{position:relative}
.numcard .flag{display:flex;align-items:center;height:34px;margin-bottom:-6px;position:relative;z-index:2}
.numcard .flag .n{min-width:34px;height:34px;padding:0 10px;border-radius:17px;
  background:var(--brand);color:var(--on-brand);display:grid;place-items:center;
  font-weight:800;font-size:.95rem;flex:0 0 auto;box-shadow:0 4px 12px -5px rgba(255,172,8,.9)}
.numcard .flag .tail{height:6px;flex:1 1 auto;max-width:36px;background:var(--brand);
  border-radius:0 3px 3px 0;margin-left:-3px}
.numcard .body{background:var(--surface-2);border:1px solid var(--brand-line);
  border-radius:var(--r-md);padding:20px 18px 18px;min-height:92px;
  display:flex;flex-direction:column;justify-content:center;
  font-size:.95rem;color:var(--ink-2);line-height:1.5}
.numcard .body strong{display:block;margin-bottom:3px;color:var(--ink)}

/* ---------- 16 · HÌNH VECTOR & CHỮ TRONG SVG ---------- */
.tc-art{width:100%;height:auto;display:block;margin:4px auto 20px;max-width:360px}
.tc-art.wide{max-width:470px}
.tc-art.full{max-width:100%}
.tc-gauge{width:100%;max-width:300px;margin:0 auto;display:block;overflow:visible}
/* Cỡ chữ khai báo bằng đơn vị của viewBox nên tự co giãn theo bề rộng —
   không cần media query. */
.tc-gscore{font:800 54px var(--font);letter-spacing:-.04em}
.tc-gcap{font:600 12px var(--font);fill:var(--muted)}
.tc-cap{font:800 10.5px var(--font);fill:var(--muted);letter-spacing:.1em}
.tc-mid{font:800 13px var(--font);fill:var(--ink)}
.tc-mid2{font:600 11.5px var(--font);fill:var(--muted)}
.tc-axis{font:700 10.5px var(--font);fill:var(--muted)}
.tc-plbl{font:800 12.5px var(--font);fill:var(--on-brand)}
.tc-ptitle{font:800 12.5px var(--font);fill:var(--ink)}
.tc-pdesc{font:500 11px var(--font);fill:var(--muted)}
.tc-val{font:800 12.5px var(--font);fill:var(--ink);font-variant-numeric:tabular-nums}
.tc-node circle{fill:var(--surface);stroke:var(--brand);stroke-width:2.5}
.tc-node.on circle{fill:var(--brand)}
.tc-node text{font:800 14px var(--font);fill:var(--brand-text)}
.tc-node.on text{fill:var(--on-brand)}
.tc-nodelbl text{font:700 11.5px var(--font);fill:var(--ink)}
.tc-tag rect{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1.5}
.tc-tag text{font:600 11.5px var(--font);fill:var(--muted)}
.tc-tag.on rect{fill:var(--brand);stroke:var(--brand)}
.tc-tag.on text{fill:var(--on-brand);font-weight:800}
.tc-dash{stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:3 4;fill:none}
.tc-ico{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tc-icoW{fill:none;stroke:var(--on-brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* bố cục chữ | hình */
.figrow{display:grid;gap:18px;grid-template-columns:1fr;align-items:center;text-align:left}
@media(min-width:720px){.figrow{grid-template-columns:1fr 1fr}.figrow .tc-art{margin:0}}
.figrow.rev .txt{order:2}

/* ---------- 17 · DẢI CỜ THỊ TRƯỜNG ---------- */
.tc-pills{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 4px}
.tc-pill{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;
  padding:6px 14px 6px 7px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.tc-pill svg{width:22px;height:15px;border-radius:2px;display:block;flex:0 0 auto}
.tc-pill.on{background:var(--brand-soft);color:var(--brand-text);border-color:var(--brand);font-weight:800}

/* ---------- 18 · KHUNG ĐIỆN THOẠI ---------- */
.phones{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.phone{width:min(160px,42vw)}
.phone svg{width:100%;height:auto;display:block}
.phonecap{font-size:.8rem;color:var(--muted);text-align:center;margin-top:8px}

/* ---------- 19 · ANIMATION ---------- */
@keyframes tcFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tcSweep{to{stroke-dashoffset:var(--to)}}
@keyframes tcBarGrow{from{transform:scaleX(0)}to{transform:none}}
@keyframes tcGrowUp{from{transform:scaleY(.02);opacity:0}to{transform:none;opacity:1}}
@keyframes tcPop{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}

.stagger>*{animation:tcFadeUp .5s var(--ease) both}
.stagger>*:nth-child(1){animation-delay:.03s} .stagger>*:nth-child(2){animation-delay:.09s}
.stagger>*:nth-child(3){animation-delay:.15s} .stagger>*:nth-child(4){animation-delay:.21s}
.stagger>*:nth-child(5){animation-delay:.27s} .stagger>*:nth-child(6){animation-delay:.33s}
.stagger>*:nth-child(7){animation-delay:.39s} .stagger>*:nth-child(8){animation-delay:.45s}

/* Thanh biểu đồ chạy ra từ mép trái. Dùng scaleX + transform-box:fill-box
   thay vì animate thuộc tính width — width dạng CSS trên <rect> chỉ có ở
   SVG2 và Safari cũ không hiểu. */
.tc-barfill{transform-box:fill-box;transform-origin:left center;
  animation:tcBarGrow .85s var(--ease) both;animation-delay:var(--d,0s)}
/* Thanh không được nhấn. Mức mờ khác nhau ở hai theme: ở dark, cam 62%
   chồng lên nền nâu #221D14 cho ra màu ô liu đục, phải nhẹ tay hơn. */
.tc-barfill.dim{opacity:.62}
html[data-theme="dark"] .tc-barfill.dim{opacity:.8}
/* Cột mọc lên từ chân, không phóng to từ tâm khung — nếu không, giữa chừng
   animation cột sẽ vượt ra ngoài mép SVG. */
.tc-rung{transform-box:fill-box;transform-origin:50% 100%;
  animation:tcGrowUp .5s var(--ease) both;animation-delay:var(--d,0s)}
.tc-pop{transform-box:fill-box;transform-origin:center;
  animation:tcPop .5s cubic-bezier(.34,1.55,.5,1) both;animation-delay:var(--d,0s)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  /* cung gauge vẽ bằng dashoffset — tắt animation thì phải đặt thẳng
     giá trị cuối, nếu không cung biến mất hoàn toàn */
  .tc-gauge .arc{stroke-dashoffset:var(--to)!important}
  .tc-barfill{transform:none!important}
}

/* ---------- 20 · IN GIẤY / XUẤT PDF ---------- */
@media print{
  html{--bg:#fff}
  body{background:#fff}
  .card,.kpi,.tblwrap{box-shadow:none;border-color:#ddd;break-inside:avoid}
  .iconbtn,.btn{display:none}
  a{text-decoration:none;color:inherit}
}

/* Theo hệ điều hành khi chưa chọn tay */
@media (prefers-color-scheme: dark){
html:not([data-theme="light"]){
  --bg:#0F1113;      --bg-2:#0A0C0D;
  --surface:#17191D; --surface-2:#221D14;  --surface-3:#2A2317;
  --ink:#F4F4F5;     --ink-2:#D4D4D8;      --muted:#A1A1AA;
  --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.26);
  --brand-soft:#2A2114;  --brand-line:rgba(255,172,8,.42);
  --brand-text:#FFC75A;      /* 9.6:1 trên nền #0F1113 */
  --brand-text-lg:#FFC75A;
  --on-brand:#2A1800;
  --soil-1:#6B4A2C; --soil-2:#3D2917; --soil-3:#5A3D24; --root:#F3E4C8;
  /* lá sáng lên một nấc, nếu không thì chìm hẳn vào nền tối */
  --leaf-1:#5CAE58; --leaf-2:#84C94C; --leaf-3:#3B8040; --leaf-4:#B3DE97;
  --success:#3ECF8E; --danger:#F16A6F; --info:#5AAEE8; --violet:#9B85E4;
  --s2:#5AAEE8; --s3:#5CAE58; --s4:#A9743F; --s5:#9B85E4; --s7:#F16A6F;
  --success-soft:#13291F; --danger-soft:#2C1719; --info-soft:#122431;
  /* ở dark, bản sáng của màu trạng thái đã đủ tương phản — dùng luôn */
  --success-text:#3ECF8E; --danger-text:#F16A6F; --info-text:#5AAEE8;
  --shadow:0 1px 2px rgba(0,0,0,.36),0 8px 24px -14px rgba(0,0,0,.62);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 22px 50px -20px rgba(0,0,0,.72);
  /* trong dark, tab đang chọn phải SÁNG hơn rãnh nền, không phải tối hơn */
  --tab-track:#131518; --tab-on:#2E2A22;
  color-scheme:dark;
}
html:not([data-theme="light"]) .tc-on-light{display:none}
html:not([data-theme="light"]) .tc-on-dark{display:block}
html:not([data-theme="light"]) .tc-barfill.dim{opacity:.8}
}