/* ==========================================================================
   DZT DESIGN SYSTEM · v1
   Nguyên tắc: nền phẳng, viền mảnh, bóng nhẹ, nhiều khoảng trắng,
   phân cấp bằng cỡ chữ + màu chữ (không bằng gradient/hiệu ứng kính).
   Khối này giống hệt nhau ở cả 3 trang — sửa ở đây thì đồng bộ sang nơi khác.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root{
  /* Palette trung tính (hơi ngả lạnh, giống màu giấy in) */
  --n-0:#FFFFFF;  --n-25:#FBFCFC; --n-50:#F6F8F8; --n-100:#EFF2F2;
  --n-150:#E6EAEA; --n-200:#DBE0E0; --n-300:#C3CACB; --n-400:#98A2A4;
  --n-500:#656F72; --n-600:#4E585B; --n-700:#374144; --n-800:#212A2C;
  --n-900:#141A1B; --n-950:#0C1011;

  /* Accent — xanh mòng két đậm. Một màu nhấn duy nhất cho toàn hệ thống. */
  --a-50:#E8F4F5;  --a-100:#CFE8EA; --a-200:#9FD2D7; --a-300:#5CB4BC;
  --a-400:#2A959F; --a-500:#0F7A85; --a-600:#0C646D; --a-700:#0A5158;
  --a-800:#083E44; --a-900:#062E33;

  /* Màu trạng thái */
  --g-500:#126B34; --g-50:#E9F5EC; --g-200:#A8D5B5;
  --y-500:#8A5305; --y-50:#FBF3E4; --y-200:#E6CE9B;
  --r-500:#B4231F; --r-600:#98201C; --r-50:#FBECEB; --r-200:#EDB3B0;
  --v-500:#5B53B8;

  /* Nền & bề mặt */
  --bg:var(--n-0);
  --bg-subtle:var(--n-50);
  --bg-sunken:var(--n-100);
  --surface:var(--n-0);
  --surface-hover:var(--n-50);
  --surface-active:var(--n-100);
  --surface-raised:var(--n-0);

  /* Viền */
  --border:var(--n-150);
  --border-strong:var(--n-200);
  --border-stronger:var(--n-300);

  /* Chữ */
  --text:var(--n-900);
  --text-2:var(--n-600);
  --text-3:var(--n-500);
  --text-on-accent:#FFFFFF;
  --text-inverse:var(--n-0);

  /* Accent ngữ nghĩa */
  --accent:var(--a-500);
  --accent-hover:var(--a-600);
  --accent-active:var(--a-700);
  --accent-text:var(--a-600);
  --accent-bg:var(--a-50);
  --accent-border:var(--a-200);
  --ring:rgba(15,122,133,.32);

  --success:var(--g-500); --success-bg:var(--g-50); --success-border:var(--g-200);
  --warning:var(--y-500); --warning-bg:var(--y-50); --warning-border:var(--y-200);
  --danger:var(--r-500);  --danger-hover:var(--r-600);
  --danger-bg:var(--r-50); --danger-border:var(--r-200);
  --danger-line:var(--r-200);          /* alias tương thích */
  --ok:var(--g-500); --ok-bg:var(--g-50); --ok-line:var(--g-200);
  --muted:var(--text-3);               /* alias: JS còn dùng var(--muted) */
  --text-dim:var(--text-2);            /* alias: JS còn dùng var(--text-dim) */

  /* Bo góc */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;

  /* Lưới 8pt (4px cho tinh chỉnh nhỏ) */
  --sp-4:4px;  --sp-8:8px;  --sp-12:12px; --sp-16:16px; --sp-20:20px;
  --sp-24:24px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px;
  --sp-80:80px; --sp-96:96px;

  /* Cỡ chữ */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px;
  --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-30:30px;
  --fs-36:36px; --fs-44:44px;
  --lh-tight:1.15; --lh-snug:1.35; --lh-body:1.6; --lh-relaxed:1.7;
  --tr-tight:-.022em; --tr-snug:-.011em; --tr-wide:.06em;

  /* Bóng — rất nhẹ, chỉ để tách lớp nổi khỏi nền */
  --sh-xs:0 1px 2px rgba(16,24,28,.05);
  --sh-sm:0 1px 3px rgba(16,24,28,.06),0 1px 2px -1px rgba(16,24,28,.05);
  --sh-md:0 4px 12px -3px rgba(16,24,28,.09),0 2px 4px -2px rgba(16,24,28,.05);
  --sh-lg:0 12px 28px -10px rgba(16,24,28,.16),0 4px 10px -4px rgba(16,24,28,.06);
  --sh-xl:0 24px 56px -18px rgba(16,24,28,.22),0 8px 20px -10px rgba(16,24,28,.08);

  /* Chuyển động — chỉ fade / slide / scale */
  --dur-1:110ms; --dur-2:160ms; --dur-3:220ms; --dur-4:300ms;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);

  /* Kích thước bố cục */
  --sidebar-w:264px; --sidebar-w-collapsed:68px;
  --topbar-h:56px; --content-w:1240px;

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
  font-synthesis:none;
}

/* --- 2. DARK THEME -------------------------------------------------------- */
:root[data-theme="dark"]{
  --bg:var(--n-950);
  --bg-subtle:#101617;
  --bg-sunken:#0A0E0F;
  --surface:#13191A;
  --surface-hover:#181F20;
  --surface-active:#1D2526;
  --surface-raised:#171E1F;

  --border:#242D2E;
  --border-strong:#2F3A3B;
  --border-stronger:#3D4A4B;

  --text:#EDF0F0;
  --text-2:#A9B2B4;
  --text-3:#838E90;
  --text-on-accent:#04191B;

  --accent:#3AAFB9;
  --accent-hover:#54C0C8;
  --accent-active:#6FCED4;
  --accent-text:#5CC3CB;
  --accent-bg:rgba(58,175,185,.12);
  --accent-border:rgba(58,175,185,.30);
  --ring:rgba(58,175,185,.36);

  --success:#4ADE80; --success-bg:rgba(74,222,128,.12); --success-border:rgba(74,222,128,.30);
  --warning:#E8B84B; --warning-bg:rgba(232,184,75,.12); --warning-border:rgba(232,184,75,.30);
  --danger:#F0736C;  --danger-hover:#F58A84;
  --danger-bg:rgba(240,115,108,.12); --danger-border:rgba(240,115,108,.30);
  --danger-line:rgba(240,115,108,.30);
  --ok:#4ADE80; --ok-bg:rgba(74,222,128,.12); --ok-line:rgba(74,222,128,.30);
  --v-500:#8B84E8;

  --sh-xs:0 1px 2px rgba(0,0,0,.40);
  --sh-sm:0 1px 3px rgba(0,0,0,.45),0 1px 2px -1px rgba(0,0,0,.40);
  --sh-md:0 4px 12px -3px rgba(0,0,0,.55),0 2px 4px -2px rgba(0,0,0,.40);
  --sh-lg:0 12px 28px -10px rgba(0,0,0,.65),0 4px 10px -4px rgba(0,0,0,.45);
  --sh-xl:0 24px 56px -18px rgba(0,0,0,.75),0 8px 20px -10px rgba(0,0,0,.50);
  color-scheme:dark;
}

/* --- 3. RESET & NỀN TẢNG -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);
  font-size:var(--fs-14);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  touch-action:manipulation;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure{margin:0;}
h1,h2,h3,h4{font-weight:600;letter-spacing:var(--tr-tight);line-height:var(--lh-tight);color:var(--text);}
a{color:var(--accent-text);text-decoration:none;}
a:hover{text-decoration:underline;}
button,input,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
ul,ol{margin:0;padding:0;list-style:none;}
img{max-width:100%;}
::selection{background:var(--accent-bg);color:var(--text);}

/* Bộ icon thống nhất: nét 1.6, đầu bo tròn, viewBox 24. */
svg{flex:0 0 auto;display:block;}
svg[stroke]{stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
svg.ico-bold,.ico-bold svg[stroke]{stroke-width:2;}

/* Focus: một kiểu duy nhất cho mọi thứ có thể focus bằng bàn phím. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm);}
:focus:not(:focus-visible){outline:none;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Thanh cuộn mảnh */
*{scrollbar-width:thin;scrollbar-color:var(--border-stronger) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full);border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--border-stronger);background-clip:content-box;}

/* --- 4. TIỆN ÍCH CHỮ ------------------------------------------------------ */
.t-eyebrow{font-size:var(--fs-11);font-weight:600;letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--text-3);}
.t-num{font-variant-numeric:tabular-nums;}
.t-2{color:var(--text-2);}
.t-3{color:var(--text-3);}
.divider{height:1px;background:var(--border);border:0;margin:0;}

/* --- 19. ANIMATION -------------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes dzt-fade-in{from{opacity:0;}to{opacity:1;}}
.anim-rise{animation:rise var(--dur-3) var(--ease-out) both;}
.anim-fade{animation:dzt-fade-in var(--dur-3) var(--ease-out) both;}