/* ============================================================
   NetRace Design System — tokens
   Light là mặc định. Dark chỉ bật khi người xem tự chọn,
   không ghi nhớ, không theo theme hệ điều hành.
   Ngôn ngữ: VN mặc định, EN khi người xem chọn (có ghi nhớ).
   Token đặt theo [data-theme] (không chỉ :root) để một section
   tự mang theme riêng (hai dải tối: bảng thành tích, vạch đích).
   Concept: "Sự nghiệp như một giải chạy" — thẻ BIB, lộ trình
   5 chặng, bảng split, danh sách xuất phát, vạch đích.
   ============================================================ */
:root, [data-theme="light"] {
  --canvas:#F3F3F1; --canvas-alt:#F5F6F4; --surface-1:#E4E5E1; --surface-2:#FFFFFF;
  --ink:#050505; --ink-muted:rgba(65,57,96,0.8); --ink-subtle:rgba(5,5,5,0.7); --ink-utility:#4F6367;
  --hairline:rgba(5,5,5,0.08); --hairline-strong:rgba(5,5,5,0.2);
  --accent-cyan-edge:#0B86A3; --accent-violet:#5B45D6;
  --neutral-btn:#ECEDE9; --neutral-btn-edge:#DDDFD8;
  --focus-ring:#1F1E27; --ghost-ink:#050505;
  --cyan-soft:#E3FAFF; --cyan-ink:#0A6E87;
  --lime-soft:#EDFCA0; --lime-ink:#56650A;
  --mint-soft:#DBFBD3; --mint-ink:#1E6B34;
  --sky-soft:#BEE7FC; --sky-ink:#0B5C80;
  --orchid-soft:#EBB0FA; --orchid-ink:#7B2B8F;
  --periwinkle-soft:#CDCEFB; --periwinkle-ink:#3F43A6;
  --success-ink:var(--mint-ink); --success-soft:var(--mint-soft);
  /* light: logo và số liệu dùng ink (cyan chỉ 1.3:1 trên nền sáng) */
  --brand-text:#050505;
  color-scheme: light;
}
[data-theme="dark"] {
  --canvas:#161F21; --canvas-alt:#141D1F; --surface-1:#1B2628; --surface-2:#1E2B2E;
  --ink:#DAE4E5; --ink-muted:rgba(225,224,239,0.6); --ink-subtle:#829599; --ink-utility:#7B989D;
  --hairline:rgba(130,149,153,0.2); --hairline-strong:rgba(130,149,153,0.5);
  --accent-cyan-edge:#31CAE8; --accent-violet:#9580FF;
  --neutral-btn:#223033; --neutral-btn-edge:#2C3B3F;
  --focus-ring:#73E8FF; --ghost-ink:#FFFFFF;
  --cyan-soft:#233B40; --cyan-ink:#73E8FF;
  --lime-soft:#343E33; --lime-ink:#EDFCA0;
  --mint-soft:#323E3A; --mint-ink:#DBFBD3;
  --sky-soft:#2E3B40; --sky-ink:#BEE7FC;
  --orchid-soft:#34333F; --orchid-ink:#EBB0FA;
  --periwinkle-soft:#303840; --periwinkle-ink:#CDCEFB;
  --success-ink:var(--mint-ink); --success-soft:var(--mint-soft);
  --brand-text:#73E8FF;
  color-scheme: dark;
}
:root {
  /* giống nhau ở hai theme */
  --accent-cyan:#73E8FF; --accent-cyan-hover:#8CEDFF; --accent-cyan-active:#5FD9F2;
  --on-accent:#1F1E27;
  --lime:#EDFCA0; --mint:#DBFBD3; --sky:#BEE7FC; --orchid:#EBB0FA; --periwinkle:#CDCEFB;
  --grad-finish:linear-gradient(120deg,#73E8FF 0%,#EDFCA0 100%);
  --grad-bloom:linear-gradient(120deg,#EBB0FA 0%,#CDCEFB 100%);
  --grad-podium:linear-gradient(120deg,#EDFCA0 0%,#DBFBD3 100%);
  --grad-recovery:linear-gradient(120deg,#DBFBD3 0%,#BEE7FC 100%);
  --grad-night:linear-gradient(180deg,#1E2B2E 0%,#161F21 100%);
  --grad-glow-cyan:radial-gradient(60% 80% at 80% 0%,rgba(115,232,255,0.22) 0%,rgba(115,232,255,0) 100%);

  --font-display:"Hubot Sans","Archivo",sans-serif;
  --font-text:"Mona Sans","Be Vietnam Pro",sans-serif;

  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px;
  --space-5:40px; --space-6:56px; --space-7:80px; --space-8:120px;

  --rounded-badge:6px; --rounded-btn:8px; --rounded-sm:6px; --rounded-card:12px;
  --rounded-raised:12px; --rounded-panel:12px; --rounded-pill:100px;

  --container:1120px; --content-inset:62px; --nav-height:62px; --section-pad-mobile:64px;
  --control-height:56px; --control-height-sm:44px; --control-height-xs:36px;
  --gutter:var(--content-inset);
}
@media (max-width: 720px) { :root { --gutter:16px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-height) + 8px); }
body { margin:0; font-family:var(--font-text); font-size:16px; line-height:24px; background:var(--canvas); color:var(--ink); -webkit-font-smoothing:antialiased; transition:background-color .2s ease, color .2s ease; overflow-x:clip; }
a { color:inherit; }
p { margin:0; }
.wrap { max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.ico { width:20px; height:20px; flex:none; }
.ico-sm { width:16px; height:16px; flex:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:var(--space-3); top:-100px; z-index:20; background:var(--accent-cyan); color:var(--on-accent); padding:var(--space-2) var(--space-3); border-radius:var(--rounded-btn); font-weight:500; text-decoration:none; }
.skip:focus { top:var(--space-2); }

/* ---------- Type ---------- */
.display { font-family:var(--font-display); font-stretch:125%; font-weight:800; letter-spacing:-0.02em; color:var(--ink); margin:0; }
.display-xl { font-size:48px; line-height:1.12; letter-spacing:-0.025em; }
.display-md { font-size:28px; line-height:1.2; }
.headline { font-family:var(--font-display); font-stretch:110%; font-weight:700; font-size:18px; line-height:1.33; letter-spacing:-0.01em; margin:0; }
.data-lg { font-family:var(--font-display); font-stretch:75%; font-weight:700; font-size:48px; line-height:1.05; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.data { font-family:var(--font-display); font-stretch:90%; font-weight:700; font-variant-numeric:tabular-nums; }
.lead { font-size:18px; line-height:28px; color:var(--ink-muted); }
.muted { color:var(--ink-muted); }
.eyebrow { display:flex; align-items:center; gap:var(--space-2); font-size:14px; line-height:20px; color:var(--ink-subtle); margin:0 0 var(--space-2); }
/* nhãn kỹ thuật: mã, chặng, split — caption tabular */
.code { font:500 12px/18px var(--font-text); font-variant-numeric:tabular-nums; letter-spacing:.04em; color:var(--ink-subtle); }
@media (max-width:640px) { .display-xl { font-size:34px; } .display-md { font-size:24px; } .data-lg { font-size:40px; } }

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--rounded-btn); }

/* ---------- Buttons ---------- */
.btn { font:500 16px/24px var(--font-text); height:var(--control-height); padding:0 var(--space-4); border-radius:var(--rounded-btn); border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); text-decoration:none; transition:background-color .15s ease, border-color .15s ease; }
.btn-primary { background:var(--accent-cyan); color:var(--on-accent); min-width:160px; }
.btn-primary:hover { background:var(--accent-cyan-hover); border-color:var(--accent-cyan-edge); }
.btn-primary:active { background:var(--accent-cyan-active); }
.btn-secondary { background:transparent; color:var(--ghost-ink); border-color:var(--hairline-strong); }
.btn-secondary:hover { border-color:var(--ink-subtle); background:rgba(128,128,128,0.06); }
.btn-secondary:active { background:rgba(128,128,128,0.12); }
.btn-icon { width:var(--control-height-sm); height:var(--control-height-sm); padding:0; background:var(--neutral-btn); border-color:var(--neutral-btn-edge); color:var(--ink); }
.btn-icon:hover { background:var(--surface-1); }
.btn-row { display:flex; flex-wrap:wrap; gap:var(--space-3); }

/* ---------- Badge / chip ---------- */
.badge { display:inline-flex; align-items:center; gap:var(--space-1); font-size:12px; line-height:18px; font-weight:500; padding:2px 6px; border-radius:var(--rounded-badge); white-space:nowrap; background:var(--cyan-soft); color:var(--cyan-ink); }
.badge-mint { background:var(--mint-soft); color:var(--mint-ink); }
.badge-neutral { background:var(--neutral-btn); color:var(--ink); }
.chips { display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; margin:0; padding:0; }
.chips li { display:inline-flex; align-items:center; min-height:32px; padding:4px 12px; border-radius:var(--rounded-pill); border:1px solid var(--hairline-strong); font:500 14px/20px var(--font-text); color:var(--ink); }

/* ---------- Tiles ---------- */
.tile { width:48px; height:48px; border-radius:var(--rounded-card); display:grid; place-items:center; color:var(--on-accent); flex:none; }
.tile svg { width:24px; height:24px; }
.t-lime { background:var(--lime); } .t-mint { background:var(--mint); } .t-sky { background:var(--sky); }
.t-orchid { background:var(--orchid); } .t-peri { background:var(--periwinkle); }

/* ---------- Sections ---------- */
section { padding:96px 0; }
section.alt { background:var(--canvas-alt); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.sec-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-5); align-items:end; margin-bottom:var(--space-6); }
.sec-head .lead { max-width:520px; }
.sec-no { font-variant-numeric:tabular-nums; color:var(--ink); font-weight:500; }
.sec-no::after { content:""; display:inline-block; width:24px; height:1px; background:var(--hairline-strong); vertical-align:middle; margin-left:var(--space-2); }
@media (max-width:820px) { section { padding:var(--section-pad-mobile) 0; } .sec-head { grid-template-columns:1fr; gap:var(--space-3); margin-bottom:var(--space-5); } }

/* ---- Lộ trình 5 chặng (Stepper) — độ dài chặng tỉ lệ theo số tháng ---- */
.course { margin-top:var(--space-7); padding-top:var(--space-4); border-top:1px solid var(--hairline); }
.course-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2) var(--space-4); align-items:baseline; }
.course-head .eyebrow { margin:0; color:var(--ink); font-weight:500; }
.cp-list { list-style:none; margin:var(--space-3) 0 0; padding:0; display:flex; gap:var(--space-1); }
.cp { flex:var(--w) 1 0; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:14px; line-height:20px; }
.cp-bar { height:4px; border-radius:var(--rounded-pill); background:var(--neutral-btn); margin-bottom:var(--space-2); }
.cp.is-done .cp-bar { background:var(--mint); }
.cp.is-current .cp-bar { background:var(--grad-finish); }
.cp-meta { display:flex; align-items:center; gap:var(--space-1); }
.cp.is-done .cp-meta .ico-sm { color:var(--success-ink); }
.cp.is-current .cp-meta .ico-sm { color:var(--cyan-ink); }
.cp b { font-family:var(--font-display); font-stretch:110%; font-weight:700; font-size:16px; line-height:22px; overflow-wrap:anywhere; }
.cp small { font-size:14px; line-height:20px; color:var(--ink-muted); }
@media (max-width:720px) {
  .course { margin-top:var(--space-5); }
  .cp-list { flex-direction:column-reverse; gap:var(--space-3); }
  .cp { flex:none; display:grid; grid-template-columns:96px minmax(0,1fr); column-gap:var(--space-3); }
  .cp-bar { grid-column:1 / -1; }
  .cp-meta { grid-row:2 / span 2; align-self:start; }
}

/* ============ CÁCH LÀM (chiến thuật) ============ */
.tactics { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-4); }
.tactic { background:var(--surface-1); border-radius:var(--rounded-card); padding:var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); }
.tactic.lg { grid-row:span 2; background:var(--surface-2); border:1px solid var(--hairline); padding:var(--space-5); gap:var(--space-3); }
.tactic-top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3); margin-bottom:var(--space-2); }
.tactic p { color:var(--ink-muted); }
.pivot { list-style:none; margin:var(--space-2) 0 0; padding:0; border-top:1px solid var(--hairline); }
.pivot li { display:grid; grid-template-columns:104px minmax(0,1fr); gap:var(--space-3); align-items:baseline; padding:var(--space-3) 0; border-bottom:1px solid var(--hairline); }
.pivot .badge { justify-self:start; }
@media (max-width:900px) { .tactics { grid-template-columns:1fr; } .tactic.lg { grid-row:auto; } }
@media (max-width:640px) { .tactic, .tactic.lg { padding:var(--space-4); } .pivot li { grid-template-columns:1fr; gap:var(--space-1); } }

/* ============ BẢNG THÀNH TÍCH (dải tối nhấn, Leaderboard) ============ */
.band { background:var(--canvas); color:var(--ink); position:relative; overflow:hidden; }
.band:not(.closing)::before { content:""; position:absolute; inset:0; background:var(--grad-glow-cyan); pointer-events:none; }
.band .wrap { position:relative; }
.board-wrap { background:var(--surface-1); border-radius:var(--rounded-card); position:relative; overflow:hidden; padding:var(--space-3) var(--space-4) var(--space-2); }
.board-bar { position:absolute; left:0; right:0; top:0; height:4px; background:var(--grad-finish); }
.board { width:100%; border-collapse:collapse; }
.board th { text-align:left; font:500 12px/18px var(--font-text); color:var(--ink-subtle); text-transform:uppercase; letter-spacing:.06em; padding:var(--space-3) var(--space-3) var(--space-2); border-bottom:1px solid var(--hairline); }
.board th.r, .board td.r { text-align:right; }
.board td { padding:var(--space-4) var(--space-3); border-bottom:1px solid var(--hairline); vertical-align:middle; }
.board tbody tr:last-child td { border-bottom:0; }
.rank { width:40px; height:32px; border-radius:var(--rounded-btn); display:inline-grid; place-items:center; font-family:var(--font-display); font-stretch:90%; font-weight:700; font-size:14px; background:var(--neutral-btn); color:var(--ink); font-variant-numeric:tabular-nums; }
.prod-name { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2); }
.board td p { font-size:14px; line-height:20px; color:var(--ink-muted); margin-top:var(--space-1); max-width:480px; }
.big { display:block; font-family:var(--font-display); font-stretch:75%; font-weight:700; font-size:48px; line-height:1.05; letter-spacing:-0.01em; color:var(--brand-text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.unit { display:block; font-size:12px; line-height:18px; color:var(--ink-subtle); margin-top:2px; }
.board-foot { display:flex; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-3); font-size:12px; line-height:18px; color:var(--ink-subtle); }
@media (max-width:640px) {
  .board-wrap { padding:var(--space-2) var(--space-3) var(--space-1); }
  .board th, .board td { padding-left:var(--space-2); padding-right:var(--space-2); }
  .board th:first-child, .board td:first-child { padding-left:0; width:44px; }
  .board th:last-child, .board td:last-child { padding-right:0; }
  .big { font-size:30px; }
  .rank { width:36px; }
}

/* ============ DANH MỤC (danh sách xuất phát) ============ */
.pf { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--space-6); align-items:start; }
.pf-intro { position:sticky; top:calc(var(--nav-height) + var(--space-5)); }
.pf-intro .lead { margin-top:var(--space-3); }
.pf-note { margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--hairline); font-size:12px; line-height:18px; color:var(--ink-subtle); }
.pf-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.area { background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--rounded-card); padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); }
.area-head { display:flex; align-items:center; gap:var(--space-3); }
.area-head p { font-size:14px; line-height:20px; color:var(--ink-subtle); }
.prods { list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline); }
.prods li { display:grid; grid-template-columns:52px minmax(0,1fr); gap:var(--space-2); padding:10px 0; border-bottom:1px solid var(--hairline); align-items:baseline; }
.prods li:last-child { border-bottom:0; }
.prods b { font-weight:500; }
.prods small { display:block; font-size:13px; line-height:18px; color:var(--ink-muted); }
.prods .badge { margin-top:var(--space-1); }
@media (max-width:980px) { .pf { grid-template-columns:1fr; gap:var(--space-5); } .pf-intro { position:static; } }
@media (max-width:640px) { .pf-grid { grid-template-columns:1fr; } }

/* ============ KINH NGHIỆM (các chặng, có đường tiến độ) ============ */
.timeline { padding-left:40px; position:relative; }
.jobs { list-style:none; margin:0; padding:0; }
.track, .track-fill { position:absolute; left:7px; top:12px; bottom:12px; width:2px; border-radius:var(--rounded-pill); }
.track { background:var(--hairline-strong); }
.track-fill { background:var(--cyan-ink); transform-origin:top center; }
.job { position:relative; display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--space-5); padding:var(--space-5) 0; border-bottom:1px solid var(--hairline); }
.job:first-child { padding-top:0; }
.job:last-child { border-bottom:0; padding-bottom:0; }
.job::before { content:""; position:absolute; left:-40px; top:calc(var(--space-5) + 4px); width:16px; height:16px; border-radius:50%; background:var(--mint); border:2px solid var(--canvas-alt); }
.job:first-child::before { top:4px; }
.job.is-current::before { background:var(--accent-cyan); }
.job-no { display:block; color:var(--ink); line-height:1; }
.job-when .data { font-size:18px; line-height:1.3; display:block; margin-top:var(--space-2); }
.job-when small { display:block; font-size:14px; line-height:20px; color:var(--ink-subtle); margin-top:2px; }
.job-when .badge { margin-top:var(--space-2); }
.job-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-1) var(--space-3); }
.job-title .display-md { font-size:24px; }
.job-title span { color:var(--ink-muted); font-size:16px; }
.job ul { margin:var(--space-3) 0 0; padding:0; list-style:none; display:grid; gap:var(--space-2); }
.job li { position:relative; padding-left:20px; color:var(--ink-muted); }
.job li::before { content:""; position:absolute; left:2px; top:10px; width:8px; height:2px; border-radius:1px; background:var(--cyan-ink); }
.job li b { color:var(--ink); font-weight:600; }
.win { display:flex; gap:var(--space-3); align-items:center; margin-top:var(--space-3); padding:var(--space-3); border-radius:var(--rounded-btn); background:var(--mint-soft); color:var(--ink); font-size:14px; line-height:20px; }
.win .ico { color:var(--mint-ink); }
.win .data { font-size:18px; }
.win .code { color:var(--ink); margin-right:var(--space-1); }
@media (max-width:760px) {
  .timeline { padding-left:32px; }
  .track, .track-fill { left:5px; }
  .job { grid-template-columns:1fr; gap:var(--space-3); padding:var(--space-4) 0; }
  .job::before { left:-32px; top:calc(var(--space-4) + 4px); width:12px; height:12px; }
  .job-no { font-size:32px; }
}

/* ============ KỸ NĂNG (bộ trang bị) ============ */
.kit { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--space-6); border-top:1px solid var(--hairline); }
.skill { display:grid; grid-template-columns:180px minmax(0,1fr); gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--hairline); align-items:start; }
.skill h3 { font-size:16px; }
.skill .code { display:block; margin-bottom:2px; }
.sk-meter { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--space-2); margin-top:var(--space-2); max-width:170px; }
.sk-bar { height:6px; border-radius:var(--rounded-pill); background:var(--neutral-btn); overflow:hidden; }
.sk-bar i { display:block; height:100%; border-radius:inherit; background:var(--accent-cyan); transform-origin:left center; transform:scaleX(var(--p)); }
.sk-val { font-family:var(--font-display); font-stretch:90%; font-weight:700; font-size:15px; line-height:1; font-variant-numeric:tabular-nums; min-width:3ch; text-align:right; }
.kit-note { margin-top:var(--space-3); font-size:12px; line-height:18px; color:var(--ink-subtle); }
@media (max-width:900px) { .kit { grid-template-columns:1fr; } }
@media (max-width:520px) { .skill { grid-template-columns:1fr; gap:var(--space-2); } .sk-meter { max-width:none; } }

/* ============ NGOÀI GIỜ + HỌC VẤN ============ */
.two-col { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-4); }
.side-card { background:var(--surface-1); border-radius:var(--rounded-panel); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); }
.side-card.paper { background:var(--surface-2); border:1px solid var(--hairline); }
.side-top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3); }
.side-card .data-lg { color:var(--ink); }
.edu { list-style:none; margin:0; padding:0; }
.edu li { display:flex; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--hairline); }
.edu li:last-child { border-bottom:0; padding-bottom:0; }
.edu b { font-weight:600; display:block; }
.edu small { color:var(--ink-subtle); font-size:14px; line-height:20px; }
.edu .data { font-size:16px; color:var(--ink-subtle); white-space:nowrap; }
@media (max-width:820px) { .two-col { grid-template-columns:1fr; } .side-card { padding:var(--space-4); } }

/* ============ VẠCH ĐÍCH (dải tối nhấn) ============ */
.closing { padding-top:0; }
.finish-line { display:block; width:100%; height:24px; color:var(--ink); opacity:.16; transform-origin:left center; }
.closing .inner { padding-top:var(--space-7); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--space-5); align-items:end; }
.closing .grad-text { background:var(--grad-finish); -webkit-background-clip:text; background-clip:text; color:transparent; }
.closing .lead { margin-top:var(--space-3); max-width:520px; }
.closing .btn-row { margin-top:var(--space-5); }
.contact-cards { display:grid; gap:var(--space-2); }
.contact-cards a { display:grid; grid-template-columns:20px minmax(0,1fr) 16px; align-items:center; gap:var(--space-3); padding:14px var(--space-3); border-radius:var(--rounded-btn); background:var(--surface-2); border:1px solid var(--hairline); text-decoration:none; transition:border-color .15s ease, background-color .15s ease; }
.contact-cards a:hover { border-color:var(--hairline-strong); background:var(--neutral-btn); }
.contact-cards a:active { background:var(--surface-1); }
.contact-cards .ico { color:var(--cyan-ink); }
.contact-cards .go { color:var(--ink-subtle); transition:transform .15s ease; }
.contact-cards a:hover .go { transform:translate(2px,-2px); }
.contact-cards span { display:flex; flex-direction:column; min-width:0; }
.contact-cards small { color:var(--ink-subtle); font-size:12px; line-height:18px; }
.contact-cards b { font-weight:500; overflow-wrap:anywhere; }
@media (max-width:820px) { .closing .inner { grid-template-columns:1fr; padding-top:var(--space-6); } }

/* ---------- Footer ---------- */
footer { background:var(--canvas-alt); border-top:1px solid var(--hairline); padding:var(--space-5) 0; font-size:14px; line-height:20px; color:var(--ink-subtle); }
footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-3); }
footer .wordmark { font-size:18px; }
.stripe { height:4px; width:120px; border-radius:var(--rounded-pill); background:var(--grad-finish); margin-top:var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ============ HEADER ============ */
.nav { position:sticky; top:0; z-index:30; background:var(--canvas); border-bottom:1px solid var(--hairline); transition:background-color .2s ease; }
.nav .wrap { height:var(--nav-height); display:flex; align-items:center; gap:var(--space-5); }
.wordmark { font-family:var(--font-display); font-stretch:125%; font-weight:800; font-size:22px; line-height:28px; letter-spacing:-0.02em; color:var(--brand-text); text-decoration:none; margin-right:auto; white-space:nowrap; }
.nav-links { display:flex; gap:var(--space-5); list-style:none; margin:0; padding:0; }
.nav-links a { position:relative; font-size:14px; line-height:20px; text-decoration:none; color:var(--ink); display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; padding:var(--space-2) 0; }
.nav-links a span[aria-hidden] { font-size:11px; color:var(--ink-subtle); font-variant-numeric:tabular-nums; }
.nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:1px; background:var(--cyan-ink); transform:scaleX(0); transform-origin:left center; transition:transform .2s ease; }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform:scaleX(1); }
.nav-tools { display:flex; align-items:center; gap:var(--space-2); }
/* Segmented VN / EN */
.lang { display:inline-flex; padding:3px; gap:2px; background:var(--neutral-btn); border:1px solid var(--neutral-btn-edge); border-radius:var(--rounded-btn); }
.lang button { height:34px; min-width:38px; padding:0 10px; border:0; border-radius:var(--rounded-sm); background:transparent; color:var(--ink-subtle); font:500 13px/20px var(--font-text); letter-spacing:.04em; cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.lang button:hover { color:var(--ink); }
.lang button[aria-pressed="true"] { background:var(--surface-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hairline); }
.theme-toggle .moon { display:none; }
[data-theme="dark"] .theme-toggle .sun { display:none; }
[data-theme="dark"] .theme-toggle .moon { display:block; }
.menu-btn { display:none; }
.menu-btn .x { display:none; }
.nav.is-open .menu-btn .bars { display:none; }
.nav.is-open .menu-btn .x { display:block; }
.mobile-menu { display:none; position:absolute; left:0; right:0; top:100%; background:var(--canvas); border-bottom:1px solid var(--hairline); padding:var(--space-2) var(--gutter) var(--space-4); }
.nav.is-open .mobile-menu { display:block; }
.mobile-menu ul { list-style:none; margin:0; padding:0; }
.mobile-menu a { display:flex; align-items:baseline; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--hairline); text-decoration:none; font-family:var(--font-display); font-stretch:110%; font-weight:700; font-size:20px; line-height:28px; }
.mobile-menu a span[aria-hidden] { font:500 12px/18px var(--font-text); color:var(--ink-subtle); font-variant-numeric:tabular-nums; }
.mobile-menu a[aria-current] { color:var(--cyan-ink); }
@media (max-width:1060px) { .nav-links { gap:var(--space-4); } }
@media (max-width:980px) { .nav-links { display:none; } .menu-btn { display:inline-flex; } .nav .wrap { gap:var(--space-3); } }
@media (max-width:480px) {
  .nav .wrap { gap:var(--space-2); }
  .wordmark { font-size:18px; }
  .nav-tools { gap:6px; }
  .lang button { min-width:32px; height:30px; padding:0 8px; font-size:12px; }
  .nav-tools .btn-icon { width:40px; height:40px; }
}

/* ============ HERO — Race 3D ============ */
.hero { padding:var(--space-6) 0; }
/* Cột trái hero: lời chào kiểu code → tên → title → giới thiệu */
.hero .hello { font:500 20px/28px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color:var(--ink-subtle); margin:0 0 var(--space-3); }
.hero-name { position:relative; margin:0; font-family:var(--font-display); font-stretch:110%; font-weight:800; font-size:clamp(36px, 3.8vw, 56px); line-height:1.12; letter-spacing:-0.03em; color:var(--ink); }
.hero-name .l1, .hero-name .l2 { display:block; white-space:nowrap; }
/* "Xuân Quỳnh": grad-finish của DS (cyan → bơ chanh) */
.hero-name .l1, .hero-name .l2 { position:relative; }
.hero-name .l2 { background:var(--grad-finish); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Glitch tốc độ: 2 bóng màu DS (cyan / bơ chanh) lệch hai bên, cắt lát ngang — chỉ hiện trong nhịp giật */
.hero-name .l1::before, .hero-name .l1::after, .hero-name .l2::before, .hero-name .l2::after {
  content:attr(data-text); position:absolute; inset:0; pointer-events:none; opacity:0; -webkit-background-clip:border-box; background:none; }
.hero-name .l1::before, .hero-name .l2::before { color:#73E8FF; }
.hero-name .l1::after, .hero-name .l2::after { color:#EDFCA0; }
/* vạch tốc độ bên trái tên */
.hero-name .speed { position:absolute; right:calc(100% + 20px); top:18%; width:56px; height:64%; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.hero-name .speed i { display:block; height:3px; border-radius:2px; background:var(--accent-cyan); opacity:.0; transform-origin:right center; }
.hero-name .speed i:nth-child(2) { width:70%; align-self:flex-end; }
.hero-name .speed i:nth-child(3) { width:45%; align-self:flex-end; }
@media (prefers-reduced-motion: no-preference) {
  .hero-name { animation:race-jolt 3.2s steps(1) infinite; transform-origin:left center; }
  .hero-name .l1::before, .hero-name .l2::before { animation:race-slice-a 3.2s steps(1) infinite; }
  .hero-name .l1::after, .hero-name .l2::after { animation:race-slice-b 3.2s steps(1) infinite; }
  .hero-name .speed i { animation:race-streak 1.2s cubic-bezier(.3,0,.2,1) infinite; }
  .hero-name .speed i:nth-child(2) { animation-delay:.18s; }
  .hero-name .speed i:nth-child(3) { animation-delay:.36s; }
}
/* cả khối tên: đứng yên ~85% thời gian, rồi giật ngang + nghiêng + chớp vài nhịp */
@keyframes race-jolt {
  0%, 84%, 100% { transform:none; opacity:1; }
  85% { transform:translateX(-10px) skewX(-14deg); }
  86% { transform:translateX(12px) skewX(8deg); opacity:.55; }
  87% { transform:translateX(-4px) skewX(-6deg); opacity:1; }
  88% { transform:translateX(18px) skewX(-18deg); opacity:.35; }
  89% { transform:translateX(0) skewX(0); opacity:1; }
  91% { opacity:.6; }
  92% { opacity:1; }
}
@keyframes race-slice-a {
  0%, 84%, 93%, 100% { opacity:0; transform:none; clip-path:inset(0 0 0 0); }
  85% { opacity:.9; transform:translateX(-8px); clip-path:inset(10% 0 62% 0); }
  86% { opacity:.9; transform:translateX(10px); clip-path:inset(55% 0 20% 0); }
  87% { opacity:.8; transform:translateX(-14px); clip-path:inset(30% 0 45% 0); }
  88% { opacity:.9; transform:translateX(6px); clip-path:inset(70% 0 5% 0); }
  90% { opacity:.6; transform:translateX(-4px); clip-path:inset(0 0 80% 0); }
}
@keyframes race-slice-b {
  0%, 84%, 93%, 100% { opacity:0; transform:none; clip-path:inset(0 0 0 0); }
  85% { opacity:.85; transform:translateX(9px); clip-path:inset(60% 0 15% 0); }
  86% { opacity:.85; transform:translateX(-12px); clip-path:inset(15% 0 60% 0); }
  87% { opacity:.7; transform:translateX(16px); clip-path:inset(40% 0 35% 0); }
  89% { opacity:.85; transform:translateX(-6px); clip-path:inset(5% 0 75% 0); }
  91% { opacity:.5; transform:translateX(3px); clip-path:inset(80% 0 0 0); }
}
@keyframes race-streak { 0% { transform:translateX(0) scaleX(.2); opacity:0; } 30% { opacity:.9; } 100% { transform:translateX(-56px) scaleX(1); opacity:0; } }
[data-theme="light"] .hero-name .l2 { background:none; color:var(--ink); }
@media (max-width:1280px) { .hero-name .speed { display:none; } }
.hero-role .caret { flex:none; }
.hero-role { display:flex; align-items:center; gap:10px; margin:var(--space-4) 0 0; white-space:nowrap; font:500 clamp(16px, 1.5vw, 21px)/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color:var(--cyan-ink); }
.hero-role .prompt { color:var(--periwinkle-ink); }
.hero-role .caret { width:10px; height:1.05em; background:var(--accent-cyan); border-radius:1px; animation:caret 1s steps(1) infinite; }
.hero .lead-strong b { color:var(--ink); font-weight:600; }

.hero .lead-strong .hl { font-weight:600; background:var(--grad-finish); -webkit-background-clip:text; background-clip:text; color:transparent; }   /* grad-finish của DS */
[data-theme="light"] .hero .lead-strong .hl { background:none; color:var(--cyan-ink); }
@media (max-width:640px) { .hero .hello { font-size:16px; } }

/* hero đủ cao cho bản đồ lộ trình (card 360px → bản đồ ~800px) */
@media (min-width:981px) { .hero-grid { min-height:760px; } }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:var(--space-6); align-items:center; }
.hero-kicker { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); margin-bottom:var(--space-4); }
.hero-kicker .headline { font-size:18px; }
.hero-kicker .code { padding-left:var(--space-3); border-left:1px solid var(--hairline-strong); }
.hero h1 { max-width:600px; }
.hero .lead-strong { font-size:19px; line-height:30px; color:var(--ink-muted); margin:var(--space-5) 0 var(--space-5); max-width:560px; }
.hero .lead { max-width:560px; margin-bottom:var(--space-5); }
.splits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:var(--space-5); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.split { padding:var(--space-3) var(--space-3) var(--space-3) 0; }
.split + .split { padding-left:var(--space-3); border-left:1px solid var(--hairline); }
.num { font-family:var(--font-display); font-stretch:125%; font-weight:800; font-size:28px; line-height:1.2; letter-spacing:-0.02em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.split p { font-size:14px; line-height:20px; color:var(--ink-muted); margin-top:2px; }
.contact-line { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin:var(--space-4) 0 0; font-size:14px; line-height:20px; color:var(--ink-subtle); list-style:none; padding:0; }
.contact-line li { display:inline-flex; align-items:center; gap:6px; }
.contact-line a { text-decoration:none; }
.contact-line a:hover { color:var(--ink); text-decoration:underline; }

/* Nền hero: lưới chấm + đường đua sân vận động nét mảnh + vệt sáng chạy qua 5 mốc.
   Chỉ nét và chấm theo token (hai theme), không ảnh nền, không shadow. */
.hero { position:relative; overflow:hidden; isolation:isolate; }
.hero > .wrap { position:relative; z-index:1; }
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-dots { position:absolute; inset:0;
  background-image:radial-gradient(var(--hairline-strong) 1px, transparent 1.6px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(60% 75% at 74% 42%, #000 0%, transparent 78%); mask-image:radial-gradient(60% 75% at 74% 42%, #000 0%, transparent 78%); }
.hero-track { position:absolute; left:50%; top:50%; width:152%; height:auto; transform:translate(-50%, -50%); z-index:-1; overflow:visible; pointer-events:none; }
.hero-track .lane { stroke:var(--hairline-strong); stroke-width:1.5; }
.hero-track .lane-mid { stroke-dasharray:10 14; stroke-width:1.2; }
.hero-track .start-line { color:var(--ink); opacity:.35; }
.hero-track .trail { stroke:var(--accent-cyan); stroke-width:4; stroke-linecap:round; opacity:0; }
.hero-track.ready .trail { opacity:1; }
.hero-track .trail-head { fill:var(--accent-cyan); stroke:var(--canvas); stroke-width:3; opacity:0; }
.hero-track.ready .trail-head { opacity:1; }
.cp-mark circle { fill:var(--canvas); stroke:var(--ink-subtle); stroke-width:2; transition:fill .3s ease, stroke .3s ease; }
.cp-mark text { font:600 15px var(--font-text); letter-spacing:.06em; fill:var(--ink-subtle); }
.cp-mark text.n { font:700 20px var(--font-display); font-stretch:110%; fill:var(--ink); letter-spacing:0; }
.cp-mark.is-hit circle { fill:var(--accent-cyan); stroke:var(--accent-cyan-edge); }
.cp-mark.is-hit text:not(.n) { fill:var(--cyan-ink); }

/* CP6 — chặng chưa tới: vòng nét đứt + nhịp đập */
.cp-mark.is-next circle { fill:var(--canvas); stroke:var(--accent-cyan); stroke-dasharray:4 4; stroke-width:2.5; }
.cp-mark.is-next .ring { fill:none; stroke:var(--accent-cyan); stroke-width:1.5; transform-box:fill-box; transform-origin:center; animation:cp-pulse 1.8s ease-out infinite; }
.cp-mark.is-next text.n { fill:var(--cyan-ink); }
@keyframes cp-pulse { 0% { transform:scale(.6); opacity:.9; } 100% { transform:scale(2.2); opacity:0; } }

/* Card ảnh VĐV */
.avatar-stage { position:relative; z-index:0; isolation:isolate; justify-self:center; width:min(400px, 100%); margin:0; perspective:1000px; }
.runner-card { position:relative; border-radius:var(--rounded-raised); overflow:hidden; background:var(--surface-2); border:1px solid var(--hairline-strong); transform-origin:50% 60%; }
.runner-card img { display:block; width:100%; height:auto; aspect-ratio:528 / 656; object-fit:cover; object-position:50% 20%; }
.live { position:absolute; left:var(--space-3); top:var(--space-3); display:inline-flex; align-items:center; gap:var(--space-2); max-width:calc(100% - 32px);
  padding:6px 10px; border-radius:var(--rounded-pill); background:var(--surface-2); border:1px solid var(--hairline); font:500 12px/18px var(--font-text); color:var(--ink); }
.live .dot { position:relative; width:8px; height:8px; border-radius:50%; background:var(--cyan-ink); flex:none; }
.live .dot::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--cyan-ink); opacity:0; animation:ping 1.6s ease-out infinite; }
@keyframes ping { 0% { transform:scale(.5); opacity:.9; } 100% { transform:scale(1.6); opacity:0; } }
.live b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plate { position:absolute; left:12px; right:12px; bottom:12px; background:var(--surface-2); border-radius:12px; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; padding:14px 14px 12px; }
.plate::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--grad-finish); }
.plate-bib { font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:32px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; padding-right:var(--space-3); border-right:1px solid var(--hairline-strong); }
.plate-bib small { display:block; font:500 10px/14px var(--font-text); letter-spacing:.06em; color:var(--ink-subtle); text-transform:uppercase; margin-bottom:2px; }
.plate > div:last-child { min-width:0; }
.plate .headline { font-size:18px; line-height:24px; overflow-wrap:anywhere; }
.plate .plate-role { display:flex; align-items:center; gap:2px; white-space:nowrap; overflow:hidden; min-height:20px; margin-top:2px;
  font:600 14px/20px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.plate .plate-role .role-type { background:var(--grad-finish); -webkit-background-clip:text; background-clip:text; color:transparent; }
.plate .plate-role .role-type::before { content:"> "; }
.plate .plate-role .caret { width:8px; height:16px; background:var(--accent-cyan); border-radius:1px; animation:caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity:0; } }
.plate p:not(.headline):not(.plate-role) { font-size:12px; line-height:18px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:980px) {
  .hero { padding:var(--space-5) 0; }
  .hero-grid { grid-template-columns:1fr; gap:var(--space-5); }
  .avatar-stage { order:-1; margin:var(--space-7) auto var(--space-7); }   /* mobile/tablet: ảnh lên trước nội dung */
  .hero-dots { -webkit-mask-image:radial-gradient(90% 50% at 50% 70%, #000 0%, transparent 80%); mask-image:radial-gradient(90% 50% at 50% 70%, #000 0%, transparent 80%); }
}
@media (max-width:640px) {
  .avatar-stage { width:min(300px, 78%); }
  .cp-mark text { display:none; }
  .plate-bib { font-size:26px; padding-right:10px; }
  .plate .headline { font-size:15px; line-height:20px; }
  .plate .plate-role { font-size:12px; }
  .plate { gap:10px; padding:12px 10px 10px; }
  .splits { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .num { font-size:24px; }
}

/* ============ GIỚI THIỆU ============ */
.about { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-6); align-items:start; margin-bottom:var(--space-6); }
.about-text { display:grid; gap:var(--space-3); color:var(--ink-muted); font-size:18px; line-height:28px; }
.about-text b { color:var(--ink); font-weight:600; white-space:nowrap; }
.about-cta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-top:var(--space-2); }
@media (max-width:900px) { .about { grid-template-columns:1fr; gap:var(--space-4); margin-bottom:var(--space-5); } .about-text { font-size:16px; line-height:24px; } }

/* ============ TRANG DỰ ÁN ============ */
.page-head { padding:var(--space-7) 0 var(--space-6); border-bottom:1px solid var(--hairline); }
.page-head .wrap { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-6); align-items:end; }
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); font-size:14px; line-height:20px; color:var(--ink-subtle); list-style:none; margin:0 0 var(--space-4); padding:0; }
.crumbs a { color:var(--ink-subtle); text-decoration:none; }
.crumbs a:hover { color:var(--ink); text-decoration:underline; }
.crumbs [aria-current] { color:var(--ink); }
.page-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--hairline); }
.page-stats > div { padding:var(--space-3) var(--space-3) 0 0; }
.page-stats > div + div { padding-left:var(--space-3); border-left:1px solid var(--hairline); }
.page-stats p { font-size:13px; line-height:18px; color:var(--ink-muted); margin-top:2px; }
.seg { display:inline-flex; flex-wrap:wrap; padding:4px; gap:4px; background:var(--neutral-btn); border:1px solid var(--neutral-btn-edge); border-radius:var(--rounded-btn); margin-bottom:var(--space-4); }
.seg button { height:var(--control-height-xs); padding:0 var(--space-3); border:0; border-radius:var(--rounded-sm); background:transparent; color:var(--ink-subtle); font:500 14px/20px var(--font-text); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.seg button:hover { color:var(--ink); }
.seg button[aria-pressed="true"] { background:var(--surface-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hairline); }
.seg .n { font-size:12px; color:var(--ink-subtle); font-variant-numeric:tabular-nums; }
.area[hidden] { display:none; }
@media (max-width:900px) { .page-head { padding:var(--space-5) 0; } .page-head .wrap { grid-template-columns:1fr; gap:var(--space-5); } }

/* số liệu dùng chung (ô thống kê đầu trang Dự án) */
.num { font-family:var(--font-display); font-stretch:125%; font-weight:800; font-size:26px; line-height:1.2; letter-spacing:-0.02em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ============ CASE STUDY — lưới ảnh bìa kiểu Behance ============ */
#case-study { padding-top:var(--space-6); }
.works-head { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); margin-bottom:var(--space-5); }
.works-head .display { max-width:720px; }
.works-head .lead { margin-top:var(--space-2); max-width:560px; }
.works-tools { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); justify-content:space-between; padding-top:var(--space-4); border-top:1px solid var(--hairline); }
.works-tools .seg { margin:0; }
.btn-sm { height:var(--control-height-sm); padding:0 var(--space-3); font-size:14px; min-width:0; }
.works { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-5) var(--space-4); }
.work[hidden] { display:none; }
.work-link { display:flex; flex-direction:column; gap:var(--space-3); text-decoration:none; color:inherit; border-radius:var(--rounded-card); }
.work-link:focus-visible { outline:2px solid var(--focus-ring); outline-offset:4px; }
.work-media { position:relative; display:block; border-radius:var(--rounded-card); overflow:hidden; background:var(--surface-1); border:1px solid var(--hairline); aspect-ratio:808 / 632; }
.work-media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.work-code { position:absolute; left:12px; top:12px; font:600 11px/18px var(--font-text); letter-spacing:.06em; padding:2px 8px; border-radius:var(--rounded-badge); background:var(--surface-2); color:var(--ink); border:1px solid var(--hairline); }
.work-hover { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-end; padding:var(--space-3);
  background:linear-gradient(to top, rgba(22,31,33,0.72) 0%, rgba(22,31,33,0) 55%); opacity:0; transition:opacity .2s ease; }
.work-open { display:inline-flex; align-items:center; gap:var(--space-2); height:40px; padding:0 14px; border-radius:var(--rounded-btn); background:var(--accent-cyan); color:var(--on-accent); font:500 14px/20px var(--font-text); transform:translateY(8px); transition:transform .2s ease; }
.work-open svg { width:16px; height:16px; }
.work-link:hover .work-media img, .work-link:focus-visible .work-media img { transform:scale(1.04); }
.work-link:hover .work-hover, .work-link:focus-visible .work-hover { opacity:1; }
.work-link:hover .work-open, .work-link:focus-visible .work-open { transform:none; }
.work-body { display:flex; flex-direction:column; gap:4px; padding:0 2px; }
.work-title { font-family:var(--font-display); font-stretch:110%; font-weight:700; font-size:20px; line-height:1.3; }
.work-sub { color:var(--ink-muted); font-size:14px; line-height:20px; }
.work-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--space-2); }
.work-stat { display:inline-flex; align-items:center; gap:6px; margin-top:var(--space-2); font:500 13px/18px var(--font-text); color:var(--success-ink); }
.work-stat svg { width:16px; height:16px; }
.works-note { margin-top:var(--space-5); font-size:12px; line-height:18px; color:var(--ink-subtle); }
@media (max-width:1100px) { .works { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) { .works { grid-template-columns:minmax(0,1fr); gap:var(--space-5); } .work-hover { opacity:1; background:none; } .work-open { display:none; } }

/* ---- Trình xem dự án (dialog, luôn tối) ---- */
.viewer { width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--canvas); color:var(--ink); overflow:hidden; }
.viewer[open] { display:grid; grid-template-columns:minmax(0,1fr) 72px; grid-template-rows:auto minmax(0,1fr); }
.viewer::backdrop { background:var(--scrim, rgba(5,10,11,0.72)); }
.vw-bar { grid-column:1 / -1; display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--gutter); border-bottom:1px solid var(--hairline); background:var(--canvas); }
.vw-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 15%; flex:none; }
.vw-titles { min-width:0; margin-right:auto; }
.vw-titles h2 { font-family:var(--font-display); font-stretch:110%; font-weight:700; font-size:18px; line-height:24px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vw-owner { font-size:13px; line-height:18px; color:var(--ink-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vw-code { margin:0; color:var(--cyan-ink); }
.vw-scroll { overflow-y:auto; overscroll-behavior:contain; padding:var(--space-4) var(--gutter) var(--space-7); }
.vw-col { max-width:1200px; margin:0 auto; display:grid; gap:0; background:var(--surface-1); border-radius:var(--rounded-raised); overflow:hidden; }
.vw-col img { display:block; width:100%; height:auto; min-height:120px; background:var(--surface-1); }
.vw-end { max-width:1200px; margin:var(--space-5) auto 0; display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); padding-top:var(--space-4); border-top:1px solid var(--hairline); }
.vw-rail { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding-top:var(--space-5); border-left:1px solid var(--hairline); }
@media (max-width:760px) {
  .viewer[open] { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; }
  .vw-ext span { display:none; }
  .vw-ext { width:var(--control-height-sm); padding:0; }
  .vw-rail { flex-direction:row; justify-content:center; padding:var(--space-2); border-left:0; border-top:1px solid var(--hairline); }
  .vw-scroll { padding:var(--space-3) var(--space-3) var(--space-6); }
  .vw-col { border-radius:var(--rounded-card); }
}
body.vw-lock { overflow:hidden; }

/* ============ NHỊP NỀN — dải sáng/tối xen kẽ + chất liệu ============
   Section có data-theme riêng giữ theme đó dù trang đang Dark hay Light. */
section[data-theme] { background:var(--canvas); color:var(--ink); }
.band-light { background:var(--canvas); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.band-light.alt, section.band-light { background:var(--canvas); }
/* lưới chấm mảnh trên dải sáng */
.band-dots { background-image:radial-gradient(var(--hairline-strong) 1px, transparent 1.4px); background-size:28px 28px; background-position:center top; }
/* làn chạy: vạch dọc rất mảnh trên nền tối một bậc */
.band-lanes { background-color:var(--surface-1);
  background-image:repeating-linear-gradient(90deg, transparent 0 159px, var(--hairline) 159px 160px); background-position:center top; }
/* quầng sáng cyan (chỉ trên nền tối) */
.hero::before, .band-glow::before, .closing::after { content:""; position:absolute; pointer-events:none; z-index:0; }
.hero::before { inset:0; background:radial-gradient(42% 60% at 72% 48%, rgba(115,232,255,0.14) 0%, rgba(115,232,255,0) 70%); }
.band-glow { position:relative; overflow:hidden; }
.band-glow > * { position:relative; z-index:1; }
.band-glow::before { inset:0; background:var(--grad-glow-cyan); }
.closing { position:relative; }
.closing::after { inset:0; background:radial-gradient(50% 70% at 20% 100%, rgba(235,176,250,0.10) 0%, rgba(235,176,250,0) 70%); }
.closing > * { position:relative; z-index:1; }
[data-theme="light"] .hero::before { display:none; }
/* thẻ trên dải sáng: nền trắng nổi trên giấy ngà */

.band-light .tactic.lg, .band-light .area, .band-light .work-media { background:var(--surface-2); }

/* ---- Thẻ Cách làm: câu chuyện + kết quả, hai thẻ phải nền pastel ---- */
.pivot { counter-reset:none; }
.tactic-result { margin-top:auto; padding-top:var(--space-4); display:grid; gap:var(--space-2); }
.tactic-nums { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-3); }
.tactic-nums div, .tactic-stat { display:flex; flex-direction:column; gap:2px; }
.tactic-nums b, .tactic-stat b { font-size:36px; line-height:1.05; font-stretch:75%; font-weight:800; color:var(--ink); }
.tactic-nums small, .tactic-stat span { font-size:14px; line-height:20px; color:var(--ink-muted); }
.tactic-stat { margin-top:auto; padding-top:var(--space-3); border-top:1px solid rgba(31,30,39,0.16); }
.tactic.t-card-peri { background:var(--periwinkle); color:var(--on-accent); }
.tactic.t-card-orchid { background:var(--orchid); color:var(--on-accent); }
.tactic.t-card-peri p, .tactic.t-card-orchid p, .tactic.t-card-peri .tactic-stat span, .tactic.t-card-orchid .tactic-stat span { color:rgba(31,30,39,0.82); }
.tactic.t-card-peri .code, .tactic.t-card-orchid .code { color:rgba(31,30,39,0.75); }
.tactic.t-card-peri .tile, .tactic.t-card-orchid .tile { background:rgba(255,255,255,0.65); color:var(--on-accent); }
.tactic.t-card-peri b, .tactic.t-card-orchid b, .tactic.t-card-peri .headline, .tactic.t-card-orchid .headline { color:var(--on-accent); }

/* ---- Chữ đầu dòng luôn viết hoa (nhãn ngắn dưới số liệu, mô tả phụ) — áp cho cả VN và EN ---- */
.split p, .page-stats p, .unit, .tactic-nums small, .tactic-stat span, .side-card .headline,
.work-sub, .prods small, .area-head p, .edu small, .job-when small, .board td p, .kit-note, .pf-note, .works-note,
.contact-cards small, .board-foot span { display:block; }
.split p::first-letter, .page-stats p::first-letter, .unit::first-letter, .tactic-nums small::first-letter,
.tactic-stat span::first-letter, .side-card .headline::first-letter, .work-sub::first-letter, .prods small::first-letter,
.area-head p::first-letter, .edu small::first-letter, .job-when small::first-letter, .board td p::first-letter,
.kit-note::first-letter, .pf-note::first-letter, .works-note::first-letter, .contact-cards small::first-letter,
.board-foot span::first-letter, .lead::first-letter, .lead-strong::first-letter { text-transform:uppercase; }

/* cân dòng: tiêu đề không còn chữ rớt lẻ, đoạn văn tránh dòng cuối một chữ */
h1, h2, h3, .headline, .display { text-wrap:balance; }
p, li, small { text-wrap:pretty; }
.about { align-items:end; }
.about-text { font-size:20px; line-height:30px; }
/* 3 thẻ ngang bằng nhau (nội dung đã gọn, bỏ bento) */
.tactics { grid-template-columns:repeat(3, minmax(0,1fr)); }
.tactic.lg { grid-row:auto; padding:var(--space-4) var(--space-5); }
.tactic-nums { grid-template-columns:minmax(0,1fr); gap:var(--space-2); }
.tactic-result { padding-top:var(--space-3); border-top:1px solid var(--hairline); }
@media (max-width:980px) { .tactics { grid-template-columns:minmax(0,1fr); } }

.work-media .ns-cover { display:block; width:100%; height:100%; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.work-link.is-static { cursor:default; }
.work-link.is-static:hover .ns-cover { transform:scale(1.03); }
.work-stat > span { display:inline; }

/* ============ HỒ SƠ (Giới thiệu) — code window + thẻ năng lực ============ */
.band-deep { background-color:var(--surface-1); background-image:radial-gradient(var(--hairline-strong) 1px, transparent 1.4px); background-size:28px 28px; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.pill-code { display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:var(--rounded-pill); border:1px solid var(--hairline-strong); background:var(--surface-2);
  font:600 13px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan-ink); }
.profile-title { font-size:clamp(32px, 3.6vw, 52px); line-height:1.12; letter-spacing:-0.025em; margin:var(--space-4) 0 var(--space-6); }
.grad-text { background:var(--grad-finish); -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-theme="light"] .grad-text { background:none; color:var(--cyan-ink); }
.profile-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--space-4); align-items:start; }
.codewin { background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--rounded-card); overflow:hidden; }
.codewin-bar { display:flex; align-items:center; gap:8px; height:52px; padding:0 20px; border-bottom:1px solid var(--hairline); background:var(--neutral-btn); }
.codewin-bar i { width:12px; height:12px; border-radius:50%; background:var(--danger, #FBC4C4); }
.codewin-bar i:nth-child(2) { background:var(--lime); } .codewin-bar i:nth-child(3) { background:var(--mint); }
.codewin-bar span { margin-left:12px; font:500 14px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color:var(--ink-subtle); }
.codewin-body { padding:var(--space-5); display:grid; gap:var(--space-4); }
.codewin-body p { font-size:17px; line-height:30px; color:var(--ink-muted); }
.codewin-body b { color:var(--ink); font-weight:600; }
.codewin-body code { font:500 15px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color:var(--ink); background:var(--neutral-btn); border:1px solid var(--neutral-btn-edge); border-radius:var(--rounded-badge); padding:3px 7px; white-space:nowrap; }
.caps { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-3); }
.cap { background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--rounded-card); padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); transition:border-color .15s ease, background-color .15s ease; }
.cap:hover { border-color:var(--hairline-strong); }
.cap-ico { width:44px; height:44px; border-radius:var(--rounded-btn); display:grid; place-items:center; background:var(--neutral-btn); border:1px solid var(--neutral-btn-edge); color:var(--cyan-ink); margin-bottom:var(--space-2); }
.cap-ico svg { width:20px; height:20px; }
.cap .headline { font-size:17px; }
.cap p { font-size:14px; line-height:22px; color:var(--ink-muted); }
.cap.is-ai { border-color:var(--accent-cyan-edge); background:var(--cyan-soft); }
.cap.is-ai .cap-ico { background:var(--grad-finish); border-color:transparent; color:var(--on-accent); }
.band-lanes-light { background-image:repeating-linear-gradient(90deg, transparent 0 159px, var(--hairline) 159px 160px); background-position:center top; }
@media (max-width:980px) { .profile-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:520px) { .caps { grid-template-columns:minmax(0,1fr); } .codewin-body { padding:var(--space-4); } .codewin-body p { font-size:16px; line-height:27px; } }

/* cột phải: pet-tech + The Voice xếp chồng */
.side-stack { display:flex; flex-direction:column; gap:var(--space-4); min-width:0; }
.side-stack .side-card { flex:1; }
.side-stack .side-card { padding:var(--space-4) var(--space-5); gap:var(--space-2); }
.side-title { font-size:24px; line-height:1.2; font-stretch:125%; font-weight:800; }
.voice .chips li { font-size:13px; min-height:28px; padding:2px 10px; color:var(--orchid-ink); border-color:var(--orchid-ink); }

/* thẻ năng lực: mỗi thẻ một pastel DS (một màu/thẻ), thẻ AI nền than + icon grad-finish */
.cap.c-sky { background:var(--sky); } .cap.c-mint { background:var(--mint); } .cap.c-peri { background:var(--periwinkle); }
.cap.c-lime { background:var(--lime); } .cap.c-orchid { background:var(--orchid); }
.cap.c-sky, .cap.c-mint, .cap.c-peri, .cap.c-lime, .cap.c-orchid { border-color:transparent; color:var(--on-accent); }
.cap.c-sky .headline, .cap.c-mint .headline, .cap.c-peri .headline, .cap.c-lime .headline, .cap.c-orchid .headline { color:var(--on-accent); }
.cap.c-sky p, .cap.c-mint p, .cap.c-peri p, .cap.c-lime p, .cap.c-orchid p { color:rgba(31,30,39,0.8); }
.cap.c-sky .cap-ico, .cap.c-mint .cap-ico, .cap.c-peri .cap-ico, .cap.c-lime .cap-ico, .cap.c-orchid .cap-ico { background:rgba(255,255,255,0.6); border-color:transparent; color:var(--on-accent); }
.cap.c-ai { background:var(--canvas); border-color:var(--accent-cyan-edge); color:var(--ink); }
.cap.c-ai .cap-ico { background:var(--grad-finish); border-color:transparent; color:var(--on-accent); }
.cap.c-ai p { color:var(--ink-muted); }

/* Hồ sơ: hai cột cao bằng nhau, 3 hàng thẻ đều nhau */
.profile-grid { align-items:stretch; }
.codewin { display:flex; flex-direction:column; }
.codewin-body { flex:1; align-content:center; }
.caps { grid-auto-rows:1fr; gap:12px; }
.cap { padding:18px 20px; gap:6px; }
.cap-ico { width:38px; height:38px; margin-bottom:4px; }
.cap-ico svg { width:18px; height:18px; }
.cap .headline { font-size:16px; line-height:22px; text-wrap:nowrap; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cap p { font-size:13.5px; line-height:20px; }
@media (max-width:1100px) { .cap .headline { white-space:normal; } }

/* Thẻ năng lực — hover: nhấc lên, vệt sáng lướt, icon nghiêng (chỉ transform, không shadow) */
.cap { position:relative; overflow:hidden; isolation:isolate; transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .2s ease; }
.cap > * { position:relative; z-index:1; }
.cap::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.5) 50%, transparent 65%); transform:translateX(-130%); }
.cap .cap-ico { transition:transform .28s cubic-bezier(.2,.7,.2,1); }
.cap:hover { transform:translateY(-4px); border-color:rgba(31,30,39,0.18); }
.cap:hover::after { transform:translateX(130%); transition:transform .75s cubic-bezier(.3,.6,.2,1); }
.cap:hover .cap-ico { transform:rotate(-8deg) scale(1.1); }

/* Thẻ AI: viền gradient xoay + quầng sáng trôi + icon xoay */
@property --ai-a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.cap.c-ai { border-color:transparent;
  background:radial-gradient(60% 70% at var(--ai-x, 20%) 0%, rgba(115,232,255,0.20) 0%, rgba(115,232,255,0) 70%), var(--canvas); }
.cap.c-ai::before { content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--ai-a), #73E8FF, #EDFCA0, #EBB0FA, #73E8FF);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.cap.c-ai::after { background:linear-gradient(115deg, transparent 35%, rgba(115,232,255,0.18) 50%, transparent 65%); }
.cap.c-ai .cap-ico { background:linear-gradient(120deg, #73E8FF 0%, #EDFCA0 50%, #73E8FF 100%); background-size:200% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .cap.c-ai::before { animation:ai-spin 4s linear infinite; }
  .cap.c-ai { animation:ai-drift 6s ease-in-out infinite alternate; }
  .cap.c-ai .cap-ico { animation:ai-flow 3s linear infinite; }
  .cap.c-ai .cap-ico svg { animation:ai-twinkle 6s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .cap:hover, .cap:hover .cap-ico { transform:none; } .cap:hover::after { transform:translateX(-130%); } }
@property --ai-x { syntax:'<percentage>'; inherits:false; initial-value:20%; }
@keyframes ai-spin { to { --ai-a:360deg; } }
@keyframes ai-drift { from { --ai-x:15%; } to { --ai-x:85%; } }
@keyframes ai-flow { to { background-position:-200% 0; } }
@keyframes ai-twinkle { to { transform:rotate(360deg); } }

/* ---------- Trạng thái tương tác cho thẻ ---------- */
.tactic, .area, .side-card, .skill, .job > div:last-child { transition:background-color .15s ease, border-color .15s ease; }
.tactic:not(.lg):not(.t-card-peri):not(.t-card-orchid):hover { background:var(--surface-2); }
.t-card-peri:hover, .t-card-orchid:hover { filter:brightness(1.03); }
.tactic.lg:hover, .area:hover, .side-card.paper:hover { border-color:var(--hairline-strong); }
.skill:hover .sk-bar i { background:var(--accent-cyan-hover); }
.btn-primary:active { background:var(--accent-cyan-active); }
.btn-secondary:active, .btn-icon:active { background:rgba(128,128,128,0.14); }
.work-link:active .work-media img { transform:scale(1.02); }

/* ---------- Print ---------- */
@media print {
  /* phần chưa cuộn tới vẫn đang bị GSAP ẩn — in ra luôn hiện đủ */
  * { opacity:1 !important; visibility:visible !important; transform:none !important; }
  .finish-line { opacity:.16 !important; }
  .nav, .btn-row,   .avatar-stage { width:240px; }
  section, .hero { padding:32px 0; }
  .pf-intro { position:static; }
  .area[hidden] { display:flex !important; }
  .work[hidden] { display:block !important; }
  .viewer, .work-hover { display:none !important; }
}

/* ============ MOBILE FIXES: tràn & đè nội dung ============ */
@media (max-width:640px) {
  .split, .page-stats > div { min-width:0; }
  .split { padding-right:var(--space-2); }
  .split + .split { padding-left:var(--space-2); }
  .splits .num, .page-stats .num { font-size:22px; font-stretch:100%; white-space:normal; overflow-wrap:anywhere; }
  .split p, .page-stats p { font-size:13px; line-height:18px; }
  .pill-code { height:auto; min-height:34px; padding:8px 14px; line-height:1.45; letter-spacing:.06em; white-space:normal; max-width:100%; font-size:12px; }
  .sk-meter { gap:var(--space-3); }
  .sk-meter > :last-child { min-width:3.2ch; text-align:right; }
}

/* ============ LOGO: giống favicon (QK + vạch grad-finish) ============ */
.nav .wordmark { display:inline-flex; align-items:center; gap:10px; }
.logo-mark { position:relative; flex:none; width:36px; height:36px; border-radius:9px; background:#161F21; display:grid; place-items:center; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(115,232,255,.14); transition:transform .25s var(--ease-out, ease), box-shadow .25s; }
.logo-mark::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 75% 10%, rgba(115,232,255,.24), rgba(115,232,255,0) 70%); }
.logo-mark b { position:relative; font-family:var(--font-display); font-stretch:125%; font-weight:900; font-size:15px; line-height:1; letter-spacing:-0.4px; color:#73E8FF; margin-top:-3px; }
.logo-mark s { position:absolute; left:8px; right:8px; bottom:7px; height:2px; border-radius:1px; background:linear-gradient(90deg,#73E8FF,#EDFCA0); }
.nav .wordmark:hover .logo-mark { transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(115,232,255,.4), 0 6px 18px -8px rgba(115,232,255,.6); }
@media (max-width:640px) { .logo-mark { width:32px; height:32px; border-radius:8px; } .logo-mark b { font-size:13.5px; } .logo-mark s { left:7px; right:7px; bottom:6px; } }
@media (max-width:360px) { .nav .logo-text { display:none; } }

/* ============ DỰ ÁN NỔI BẬT: 1 lớn + 2 nhỏ ============ */
.feat-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--space-2) var(--space-4); margin:0 0 var(--space-4); }
.feat-head .headline { font-size:22px; line-height:28px; }
.feat-note { font-size:13px; line-height:18px; color:var(--ink-subtle); }
.feat-head-list { margin-top:var(--space-8, 64px); padding-top:var(--space-6); border-top:1px solid var(--hairline); margin-bottom:var(--space-3); }
.feat-head-list + .works-tools { border-top:0; padding-top:0; margin-bottom:var(--space-5); }
.works-featured { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--space-5) var(--space-5); }
.works-featured .work { display:flex; }
.works-featured .work > .work-link { flex:1 1 auto; }
.works-featured .work:first-child { grid-row:span 2; }
.works-featured .work:first-child .work-link { height:100%; }
.works-featured .work:first-child .work-media { aspect-ratio:auto; flex:1 1 auto; min-height:360px; }
.works-featured .work:first-child .work-title { font-size:28px; }
.works-featured .work-stat { font-size:14px; }
@media (max-width:1100px) {
  .works-featured { grid-template-columns:minmax(0,1fr); }
  .works-featured .work:first-child { grid-row:auto; }
  .works-featured .work:first-child .work-media { aspect-ratio:808 / 632; min-height:0; }
}
@media (max-width:640px) {
  .works-featured .work:first-child .work-title { font-size:22px; }
  .feat-head-list { margin-top:var(--space-6); }
}

/* ============ PAGE HEAD DỰ ÁN: nền kiểu đường đua ============ */
.race-head { padding-bottom:calc(var(--space-6) + 24px); }
.race-bg { position:absolute; inset:0; z-index:0 !important; pointer-events:none; overflow:hidden; }
.race-bg i { position:absolute; display:block; }
/* dải caro vạch đích ở đáy */
.rb-strip { left:0; right:0; bottom:0; height:24px;
  background:repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0 / 24px 24px; opacity:.16; }

/* ============ MOBILE: tab lọc 1 dòng, cuộn ngang ============ */
@media (max-width:640px) {
  .works-tools .seg { display:flex; flex-wrap:nowrap; width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .works-tools .seg::-webkit-scrollbar { display:none; }
  .works-tools .seg button { flex:none; white-space:nowrap; scroll-snap-align:start; }
}

/* ============ MOBILE: số liệu đầu trang Dự án xếp dọc, mỗi dòng ngang ============ */
@media (max-width:640px) {
  .page-stats { grid-template-columns:minmax(0,1fr); }
  .page-stats > div, .page-stats > div + div { display:flex; align-items:baseline; gap:var(--space-3); padding:var(--space-3) 0; border-left:0; }
  .page-stats > div + div { border-top:1px solid var(--hairline); }
  .page-stats .num { flex:none; min-width:2.6ch; }
  .page-stats p { margin:0; font-size:15px; line-height:22px; }
}
.badge-paused { background:var(--surface-1); color:var(--ink-subtle); box-shadow:inset 0 0 0 1px var(--hairline-strong); }

/* ============ BỘ LỌC DỰ ÁN: Lĩnh vực + Nền tảng ============ */
.filters { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.filter-row { display:flex; align-items:center; gap:var(--space-3); min-width:0; }
.filter-lab { flex:none; width:76px; font:600 12px/16px var(--font-text); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); }
.works-tools { align-items:flex-end; }
.works-empty { padding:var(--space-6) 0; text-align:center; color:var(--ink-muted); }
@media (max-width:640px) {
  .filters { width:100%; }
  .filter-row { flex-direction:column; align-items:flex-start; gap:6px; }
  .filter-lab { width:auto; }
  .works-tools .filters .seg { display:flex; flex-wrap:nowrap; width:100%; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
  .works-tools .filters .seg::-webkit-scrollbar { display:none; }
  .works-tools .filters .seg button { flex:none; white-space:nowrap; }
}

/* ============ DỰ ÁN NỔI BẬT: switcher danh sách + khung trình duyệt ============ */
.feat { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,8fr); gap:var(--space-5); align-items:start; padding:var(--space-5); border-radius:28px;
  background:radial-gradient(80% 120% at 0% 0%, rgba(235,176,250,.10), transparent 60%), radial-gradient(70% 90% at 100% 100%, rgba(115,232,255,.10), transparent 60%), var(--canvas);
  color:var(--ink); border:1px solid var(--hairline); }
.feat-list { display:flex; flex-direction:column; gap:12px; }
.feat-item { position:relative; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start; text-align:left; width:100%;
  padding:22px 24px; border-radius:20px; border:1px solid var(--hairline); background:var(--surface-1); color:var(--ink); cursor:pointer; font:inherit;
  transition:background .3s, border-color .3s, transform .3s; }
.feat-item:hover { border-color:var(--hairline-strong); }
.feat-item:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
.feat-item[aria-selected="true"] { border-color:rgba(115,232,255,.45); background:linear-gradient(135deg, rgba(115,232,255,.14), rgba(237,252,160,.06) 70%), var(--surface-1); }
.fi-no { font:600 18px/30px ui-monospace, "SFMono-Regular", Menlo, monospace; color:var(--ink-subtle); }
.feat-item[aria-selected="true"] .fi-no { color:var(--accent-cyan); }
.fi-title { display:block; font-family:var(--font-display); font-stretch:110%; font-weight:700; font-size:24px; line-height:30px; }
.fi-more { display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.feat-item[aria-selected="true"] .fi-more { grid-template-rows:1fr; }
.fi-inner { min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:12px; }
.fi-desc { padding-top:10px; color:var(--ink-muted); font-size:16px; line-height:26px; }
.fi-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding-bottom:2px; }
.fi-stat { display:inline-flex; align-items:center; gap:6px; font:500 13px/18px var(--font-text); color:var(--accent-lime, #EDFCA0); margin-left:4px; }
.fi-stat svg { width:16px; height:16px; }
.fi-bar { position:absolute; left:0; bottom:0; height:2px; width:100%; background:linear-gradient(90deg,#73E8FF,#EDFCA0); transform:scaleX(0); transform-origin:left center; opacity:0; }
.feat-item[aria-selected="true"] .fi-bar { opacity:1; }
.feat.is-auto .feat-item[aria-selected="true"] .fi-bar { animation:feat-progress var(--feat-ms, 7000ms) linear forwards; }
.feat.is-paused .feat-item[aria-selected="true"] .fi-bar { animation-play-state:paused; }
@keyframes feat-progress { to { transform:scaleX(1); } }
.browser { border-radius:20px; overflow:hidden; border:1px solid var(--hairline-strong); background:#11181A; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.br-bar { display:flex; align-items:center; gap:8px; padding:14px 16px; background:#161F21; border-bottom:1px solid rgba(255,255,255,.06); }
.br-bar > i { width:12px; height:12px; border-radius:50%; background:#3A4547; flex:none; }
.br-url { flex:1; min-width:0; margin-left:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 14px; border-radius:10px; background:#0E1416;
  font:500 14px/20px ui-monospace, "SFMono-Regular", Menlo, monospace; color:#B9C4C6; white-space:nowrap; overflow:hidden; }
.br-url > span:first-child { overflow:hidden; text-overflow:ellipsis; }
.br-mock { flex:none; font:600 11px/16px var(--font-text); letter-spacing:.04em; padding:2px 8px; border-radius:99px; background:rgba(235,176,250,.16); color:#EBB0FA; }
.br-view { position:relative; aspect-ratio:1440 / 900; background:#0E1416; }
.fp { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:0; transform:scale(1.015); transition:opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.fp.is-on { opacity:1; transform:none; }
.fp[hidden] { display:block; visibility:hidden; }
@media (prefers-reduced-motion: reduce) { .fp, .fi-more { transition:none; } }
@media (max-width:1100px) { .feat { grid-template-columns:minmax(0,1fr); } .feat-stage { order:-1; } }
@media (max-width:640px) {
  .feat { padding:var(--space-3); border-radius:20px; gap:var(--space-3); }
  .feat-item { padding:16px; gap:14px; border-radius:16px; }
  .fi-title { font-size:19px; line-height:26px; }
  .fi-desc { font-size:14px; line-height:22px; }
  .br-bar { padding:10px 12px; } .br-bar > i { width:9px; height:9px; } .br-url { font-size:12px; padding:6px 10px; }
  .browser { border-radius:14px; }
}

/* ============ HEADER: icon thay số thứ tự ============ */
.nav-links a { align-items:center; }
.nav-ico { width:16px; height:16px; flex:none; color:var(--ink-subtle); transition:color .2s; }
.nav-links a:hover .nav-ico, .nav-links a[aria-current] .nav-ico { color:var(--accent-cyan); }
.mobile-menu a { align-items:center; }
.mobile-menu .nav-ico { width:20px; height:20px; }
.mobile-menu a[aria-current] .nav-ico { color:var(--cyan-ink); }

/* ============ 3 THẺ DỰ ÁN NỔI BẬT: mỗi thẻ là 1 dự án, tab = tính năng chính ============ */
.pcards { display:flex; flex-direction:column; gap:var(--space-6); }
.pcard { border-radius:28px; padding:var(--space-5); color:var(--ink); border:1px solid var(--hairline);
  background:radial-gradient(80% 120% at 0% 0%, rgba(235,176,250,.10), transparent 60%), radial-gradient(70% 90% at 100% 100%, rgba(115,232,255,.10), transparent 60%), var(--canvas); }
.pcard .feat { padding:0; border:0; border-radius:0; background:none; }
.pc-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--space-3) var(--space-5); padding-bottom:var(--space-4); margin-bottom:var(--space-4); border-bottom:1px solid var(--hairline); }
.pc-name { margin:0; font-family:var(--font-display); font-stretch:115%; font-weight:800; font-size:30px; line-height:36px; }
.pc-lead { margin-top:4px; color:var(--ink-muted); font-size:15px; line-height:22px; max-width:560px; }
.pc-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pcard .feat-item { padding:18px 20px; }
.pcard .fi-title { font-size:19px; line-height:26px; }
.pcard .fi-no { font-size:15px; line-height:26px; }
.pcard .fi-desc { font-size:15px; line-height:24px; padding-top:6px; }
.pcard .br-url > span:first-child { white-space:nowrap; }
@media (max-width:640px) {
  .pcard { padding:var(--space-3); border-radius:20px; }
  .pc-name { font-size:24px; line-height:30px; }
  .pc-lead { font-size:14px; }
}

/* ============ BỘ LỌC: select + sắp xếp bên phải ============ */
.works-tools .fbar { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-3); width:100%; }
.fbar-left { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.fsel { display:flex; flex-direction:column; gap:6px; min-width:200px; }
.fsel-lab { font:600 12px/16px var(--font-text); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); }
.fsel select { appearance:none; -webkit-appearance:none; height:44px; padding:0 40px 0 14px; border-radius:var(--rounded-btn); border:1px solid var(--neutral-btn-edge); background-color:var(--surface-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A7686' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; color:var(--ink); font:500 15px/20px var(--font-text); cursor:pointer; }
.fsel select:hover { border-color:var(--hairline-strong); }
.fsel select:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
@media (max-width:640px) {
  .works-tools .fbar { flex-direction:column; align-items:stretch; }
  .fbar-left { display:grid; grid-template-columns:minmax(0,1fr); }
  .fsel { min-width:0; }
  .fsel select { width:100%; font-size:14px; padding-right:34px; }
}
.pcard[data-theme="light"] { background:radial-gradient(80% 120% at 0% 0%, rgba(235,176,250,.16), transparent 60%), radial-gradient(70% 90% at 100% 100%, rgba(115,232,255,.16), transparent 60%), var(--surface-2); box-shadow:0 24px 48px -32px rgba(20,19,25,.25); }
.pcard[data-theme="light"] .browser { box-shadow:0 20px 40px -24px rgba(20,19,25,.35); }
.pcard[data-theme="light"] .fi-stat { color:var(--success-ink); }
.pcard[data-theme="light"] .feat-item[aria-selected="true"] { border-color:rgba(10,110,135,.35); }
.pcard[data-theme="light"] .feat-item[aria-selected="true"] .fi-no { color:var(--cyan-ink); }

/* ============ Ảnh dự án nổi bật: bấm để xem toàn màn hình ============ */
.br-view { cursor:zoom-in; }
.br-view:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; }
.br-zoom { position:absolute; right:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px;
  background:rgba(14,20,22,.78); color:#E9EEEF; font:500 13px/18px var(--font-text); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:translateY(4px); transition:opacity .25s, transform .25s; pointer-events:none; }
.br-zoom svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.br-view:hover .br-zoom, .br-view:focus-visible .br-zoom { opacity:1; transform:none; }
@media (hover:none) { .br-zoom { opacity:1; transform:none; } .br-zoom span { display:none; } .br-zoom { padding:8px; } }
.vw-fig { margin:0; }
.vw-fig img { display:block; width:100%; height:auto; border-radius:12px; }
.vw-fig figcaption { margin:10px 0 0; font:500 14px/20px var(--font-text); color:var(--ink-muted); }
.vw-fig figcaption .code { color:var(--accent-cyan); margin-right:6px; }
.vw-fig + .vw-fig { margin-top:28px; }

/* ============ RADIUS ĐỒNG NHẤT: card & tab 12px, badge 6px ============ */
.pcard, .feat, .feat-item, .browser, .contact-cards a, .seg, .plate, .runner-card, .side-card, .codewin, .cap, .tactic, .board-wrap, .area,
.work-link, .work-media, .vw-col, .vw-fig img { border-radius:var(--rounded-card); }
.pcard .feat { border-radius:0; }
.br-view { border-radius:0 0 var(--rounded-card) var(--rounded-card); overflow:hidden; }
.badge, .work-code, .br-mock, .chips li, .pill-code, .live, .codewin-body code, .fi-stat { border-radius:var(--rounded-badge); }
@media (max-width:640px) { .pcard, .feat-item, .browser { border-radius:var(--rounded-card); } }

/* ============ Cửa sổ xem dự án: giãn khoảng cách giữa các ảnh ============ */
.vw-col { gap:24px; background:none; overflow:visible; border-radius:0; }
.vw-col > img { border-radius:var(--rounded-card); background:var(--surface-1); }
.vw-fig + .vw-fig { margin-top:0; }
.vw-fig figcaption { margin-top:12px; }
@media (max-width:640px) { .vw-col { gap:16px; } }

/* ============ Xem toàn màn hình · dự án nổi bật: ảnh vừa khung, đủ ảnh ============ */
.vw-col.is-feat { max-width:1320px; gap:32px; }
.vw-col.is-feat .vw-fig { display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px; border-radius:var(--rounded-card);
  background:var(--surface-1); border:1px solid var(--hairline); }
.vw-col.is-feat .vw-fig img { width:auto; max-width:100%; height:auto; max-height:calc(100vh - 230px); max-height:calc(100dvh - 230px); min-height:0;
  object-fit:contain; border-radius:8px; background:transparent; box-shadow:0 18px 40px -24px rgba(0,0,0,.55); }
.vw-col.is-feat .vw-fig figcaption { margin:0; align-self:stretch; text-align:center; font-size:15px; line-height:22px; color:var(--ink); }
.vw-col.is-feat .vw-fig figcaption .code { font-size:13px; }
@media (max-width:760px) {
  .vw-col.is-feat { gap:16px; }
  .vw-col.is-feat .vw-fig { padding:10px; gap:10px; }
  .vw-col.is-feat .vw-fig img { max-height:none; width:100%; border-radius:6px; }
  .vw-col.is-feat .vw-fig figcaption { font-size:14px; text-align:left; }
}

/* ============ Khung xem trước trong thẻ: hiện đủ ảnh, không crop ============ */
.br-view { aspect-ratio:auto; }
.br-view .fp { object-fit:contain; object-position:center top; height:auto; inset:0 0 auto 0; }
.br-view .fp.is-on { position:relative; display:block; }

/* ============ Thanh trình duyệt minh hoạ: nhỏ gọn ============ */
.br-bar { gap:6px; padding:8px 12px; }
.br-bar > i { width:8px; height:8px; }
.br-url { margin-left:8px; padding:4px 10px; border-radius:6px; font-size:12px; line-height:16px; }
.br-mock { font-size:10px; line-height:14px; padding:1px 6px; }
@media (max-width:640px) {
  .br-bar { gap:5px; padding:6px 10px; }
  .br-bar > i { width:7px; height:7px; }
  .br-url { padding:3px 8px; font-size:11px; }
}

/* ============ Giảm khoảng cách: dự án nổi bật → Tất cả dự án ============ */
.feat-head-list { margin-top:40px; padding-top:32px; }
@media (max-width:640px) { .feat-head-list { margin-top:28px; padding-top:24px; } }

/* ============ profile.md: trình bày như một file Markdown ============ */
.codewin-body.md { display:flex; flex-direction:column; gap:0; padding:0; align-content:start; }
.md-fm { margin:0; padding:var(--space-4) var(--space-5); display:grid; gap:8px; background:linear-gradient(180deg, var(--cyan-soft), transparent 140%); border-bottom:1px dashed var(--hairline-strong);
  font:500 14px/22px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.md-fm::before, .md-fm::after { content:"---"; color:var(--ink-subtle); }
.md-fm > div { display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; }
.md-fm dt { color:var(--cyan-ink); }
.md-fm dt::after { content:":"; color:var(--ink-subtle); }
.md-fm dd { margin:0; color:var(--ink); font-family:var(--font-text); font-weight:500; font-size:15px; }
.md-sec { padding:var(--space-4) var(--space-5); display:grid; gap:10px; }
.md-sec + .md-sec { border-top:1px solid var(--hairline); }
.md-h { margin:0; display:flex; align-items:baseline; gap:10px; font-family:var(--font-display); font-stretch:110%; font-weight:700; font-size:19px; line-height:26px; color:var(--ink); }
.md-hash { font:600 15px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color:var(--cyan-ink); }
.codewin-body.md p { margin:0; font-size:16px; line-height:27px; color:var(--ink-muted); }
.md-tags { list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.md-tags li { font:500 13px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; padding:6px 9px; border-radius:var(--rounded-badge); background:var(--neutral-btn); border:1px solid var(--neutral-btn-edge); color:var(--ink); }
@media (max-width:520px) {
  .md-fm, .md-sec { padding:var(--space-3) var(--space-4); }
  .md-fm > div { grid-template-columns:64px minmax(0,1fr); gap:8px; }
  .md-fm dd { font-size:14px; }
  .md-h { font-size:17px; }
  .codewin-body.md p { font-size:15px; line-height:25px; }
}

/* ============ KỸ NĂNG: lưới thẻ gọn ============ */
.kit { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.kit .skill { display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--hairline); border-radius:var(--rounded-card); background:var(--surface-2);
  transition:border-color .2s, transform .25s, box-shadow .25s; }
.kit .skill:hover { border-color:rgba(10,110,135,.35); transform:translateY(-2px); box-shadow:0 14px 30px -22px rgba(20,19,25,.35); }
.sk-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kit .skill .code { margin:0; }
.kit .skill h3 { margin:-4px 0 0; font-size:18px; line-height:24px; }
.kit .sk-meter { display:block; margin:0; max-width:none; }
.kit .sk-bar { height:6px; }
.kit .sk-val { font-size:16px; color:var(--cyan-ink); }
.sk-tag { font:600 11px/16px var(--font-text); letter-spacing:.04em; padding:2px 8px; border-radius:var(--rounded-badge); background:var(--lime); color:#3D4300; }
.kit .chips { gap:6px; margin-top:2px; }
.kit .chips li { min-height:0; padding:5px 10px; font-size:13px; line-height:18px; border-color:var(--hairline); background:var(--canvas); }
.kit .skill-tools { background:linear-gradient(160deg, rgba(237,252,160,.45), var(--surface-2) 60%); }
.kit + .kit-note { margin-top:14px; }
@media (max-width:1100px) { .kit { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) { .kit { grid-template-columns:minmax(0,1fr); gap:12px; } .kit .skill { padding:16px; } }

/* ============ Nhãn mục (eyebrow): viết hoa ============ */
.eyebrow { text-transform:uppercase; letter-spacing:.1em; font-size:13px; font-weight:600; }
.eyebrow .sec-no { letter-spacing:0; }
.kit .sk-bar { display:block; width:100%; }
.kit .sk-top { width:100%; }
.kit .sk-top > :last-child { margin-left:auto; }
.kit .skill { align-items:stretch; }
.kit .skill .chips { align-self:flex-start; }
.kit .chips li.chip-hl { background:linear-gradient(100deg,#73E8FF,#EDFCA0); border-color:transparent; color:#0E1416; font-weight:600; }

/* ============ Cửa sổ xem: nhiều ảnh trên một hàng ============ */
.vw-row { display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0,1fr)); gap:24px; align-items:start; }
.vw-row > img { display:block; width:100%; height:auto; min-height:0; border-radius:var(--rounded-card); background:var(--surface-1); }
@media (max-width:640px) { .vw-row { gap:8px; } .vw-row > img { border-radius:6px; } }

/* ============ Xem toàn màn hình · dự án nổi bật: ảnh cao tự do ============ */
.vw-col.is-feat .vw-fig img { width:100%; max-width:100%; height:auto; max-height:none; object-fit:initial; }

/* ============ Trang chủ: dải caro vạch đích dưới Hero ============ */
.hero { padding-bottom:calc(var(--space-6) + 24px); }
.hero-strip { position:absolute; left:0; right:0; bottom:0; height:24px; z-index:2; pointer-events:none;
  background:repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0 / 24px 24px; opacity:.16; }
@media (max-width:640px) { .hero { padding-bottom:calc(var(--space-5) + 24px); } }

/* ============ Chuyển bản CV: PM · PO ↔ Designer ============ */
.role-switch { display:inline-flex; gap:2px; padding:3px; margin:0 0 var(--space-4); border-radius:99px; border:1px solid var(--hairline-strong); background:rgba(255,255,255,.04); }
.role-switch a { font:600 12px/16px var(--font-text); letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:99px; color:var(--ink-subtle); text-decoration:none; transition:color .2s, background .2s; }
.role-switch a:hover { color:var(--ink); }
.role-switch a[aria-current="page"] { background:var(--accent-cyan); color:var(--on-accent); }
.pf-more { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--hairline-strong); }
.btn-ghost:hover { border-color:var(--ink-subtle); }

/* ---------- Nhánh AI Product: lưới Builds ---------- */
.builds { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.build { gap:8px; }
.build-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.build-top .cap-ico { margin-bottom:0; }
.build-where { font:600 12px/16px var(--font-text); letter-spacing:.04em; color:var(--ink-subtle); margin-top:-2px; }
.build .chips { margin-top:auto; padding-top:6px; }
@media (max-width:960px) { .builds { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px) { .builds { grid-template-columns:minmax(0,1fr); } }

/* ---------- Menu hamburger chọn bản CV (header phải) ---------- */
.nav.cv-menu .menu-btn { display:inline-flex; }
.cv-pick-h { font:600 12px/16px var(--font-text); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-subtle); margin:var(--space-2) 0 var(--space-1); }
.mobile-menu .cv-pick a { align-items:center; font-size:16px; line-height:22px; padding:10px 0; }
.cv-pick-t { display:flex; flex-direction:column; }
.cv-pick-t small { font:500 12px/16px var(--font-text); color:var(--ink-subtle); }
.mobile-menu .cv-pick a[aria-current] b { color:var(--cyan-ink); }
.mobile-menu .cv-pick a[aria-current]::after { content:"✓"; margin-left:auto; color:var(--cyan-ink); font-weight:700; }
.menu-nav { margin-top:var(--space-3) !important; }
@media (min-width:981px) {
  .nav.cv-menu .mobile-menu { left:auto; right:var(--gutter); width:320px; border:1px solid var(--hairline); border-radius:var(--rounded-card); box-shadow:0 18px 40px rgba(0,0,0,.28); padding:var(--space-2) var(--space-4) var(--space-3); margin-top:8px; }
  .nav.cv-menu .menu-nav { display:none; }
  .mobile-menu .cv-pick li:last-child a { border-bottom:0; }
}

/* ---------- Case study (trang PM/PO) ---------- */
.stories { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.story { gap:10px; padding:22px 24px; }
.story-top { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.story-prod { font:600 12px/16px var(--font-text); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); }
.story-num { display:flex; align-items:baseline; gap:8px; margin:4px 0 0; }
.story-num b { font-family:var(--font-display); font-stretch:125%; font-weight:800; font-size:40px; line-height:44px; letter-spacing:-.02em; color:var(--on-accent, var(--ink)); }
.story-num span { font:500 14px/20px var(--font-text); color:var(--ink-muted); }
.story-dl { display:flex; flex-direction:column; gap:8px; margin:4px 0 0; }
.story-dl div { display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px; }
.story-dl dt { font:700 11px/22px var(--font-text); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-subtle); }
.story-dl dd { margin:0; font-size:15px; line-height:22px; }
.story-ask { display:flex; gap:8px; align-items:flex-start; margin-top:auto; padding-top:12px; border-top:1px dashed var(--hairline-strong); font-size:14px; line-height:20px; color:var(--ink-muted); }
.story-ask .ico-sm { flex:none; margin-top:2px; }
@media (max-width:860px) { .stories { grid-template-columns:minmax(0,1fr); } }
@media (max-width:480px) { .story { padding:18px; } .story-dl div { grid-template-columns:minmax(0,1fr); gap:0; } .story-num b { font-size:34px; line-height:38px; } }

/* Link bản demo trong thẻ sản phẩm */
.pc-live { text-decoration:none; font-weight:600; }
.pc-live:hover { text-decoration:underline; text-underline-offset:2px; }

/* ---------- Sửa tràn ngang trên mobile (chức danh dài, thẻ liên hệ) ---------- */
@media (max-width:600px) {
  .hero-copy { min-width:0; }
  .hero-role { white-space:normal; flex-wrap:wrap; row-gap:4px; }
  .closing .inner, .closing-copy, .contact-cards { min-width:0; }
  .closing .inner { grid-template-columns:minmax(0,1fr); }
  .contact-cards a, .contact-cards a > span { min-width:0; }
  .contact-cards b { overflow-wrap:anywhere; }
}

/* ---------- Trang Case study ---------- */
.cs-hero { padding-top:calc(var(--nav-h, 72px) + 48px); padding-bottom:56px; }
.cs-hero h1 { margin:12px 0 16px; }
.cs-hero .lead { max-width:680px; }
.cs-back { display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; }
.cs-back:hover { color:var(--ink); }
.cs-toc { list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.cs-toc a { display:flex; gap:12px; align-items:flex-start; height:100%; padding:14px 16px; border-radius:var(--rounded-card); background:var(--surface-2); border:1px solid var(--hairline); text-decoration:none; transition:border-color .15s ease, transform .15s ease; }
.cs-toc a:hover { border-color:var(--accent-cyan); transform:translateY(-2px); }
.cs-toc-no { font:600 13px/20px ui-monospace, Menlo, monospace; color:var(--cyan-ink); }
.cs-toc-t { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cs-toc-t b { font-size:15px; line-height:20px; }
.cs-toc-t small { font-size:13px; line-height:18px; color:var(--ink-muted); }
.cs-case { padding:88px 0; scroll-margin-top:72px; }
.cs-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:start; }
.cs-meta { position:sticky; top:96px; gap:12px; padding:24px; }
.cs-no { font:600 12px/16px ui-monospace, Menlo, monospace; color:var(--ink-subtle); }
.cs-shot { margin:4px 0 0; border-radius:12px; overflow:hidden; border:1px solid var(--hairline); background:var(--surface-1); }
.cs-shot img { display:block; width:100%; height:auto; }
.cs-areas { list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.area-chip { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.55); }
.area-chip b { font-family:var(--font-display); font-stretch:120%; font-weight:800; font-size:26px; line-height:30px; }
.area-chip span { font-size:13px; line-height:18px; color:var(--ink-muted); }
.cs-link { align-self:flex-start; margin-top:4px; }
.cs-body h2 { margin:8px 0 28px; }
.cs-block { padding:20px 0; border-top:1px solid var(--hairline); display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; }
.cs-label { margin:0; font:700 12px/24px var(--font-text); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-subtle); }
.cs-block p { margin:0; font-size:17px; line-height:27px; }
.cs-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.cs-list li { position:relative; padding-left:20px; font-size:17px; line-height:26px; }
.cs-list li::before { content:""; position:absolute; left:2px; top:10px; width:7px; height:7px; border-radius:50%; background:var(--accent-cyan); }
.cs-result p { font-size:18px; line-height:28px; }
.cs-body .story-ask { margin-top:8px; padding-top:20px; font-size:15px; line-height:22px; }
.cs-end { padding:96px 0; }
.cs-end .btn-row { margin-top:24px; }
@media (max-width:980px) { .cs-toc { grid-template-columns:1fr 1fr; } .cs-grid { grid-template-columns:minmax(0,1fr); gap:28px; } .cs-meta { position:static; } }
@media (max-width:600px) { .cs-toc { grid-template-columns:minmax(0,1fr); } .cs-case { padding:56px 0; } .cs-block { grid-template-columns:minmax(0,1fr); gap:8px; } .cs-block p, .cs-list li { font-size:16px; line-height:25px; } }

/* Mô tả tính năng đặt dưới ảnh; danh sách tab chỉ còn tên */
.feat .fi-more { display:none; }
.feat-caption { margin:16px 4px 0; color:var(--ink-muted); font-size:16px; line-height:26px; min-height:52px; }
@media (max-width:600px) { .feat-caption { font-size:15px; line-height:24px; margin-top:12px; } }

/* Xem toàn màn hình: ảnh hiện đủ chiều cao tự nhiên, không ép vừa màn hình */
.vw-col.is-feat .vw-fig img { width:100%; max-width:100%; max-height:none; }

/* Link demo ở đầu trang xem trước */
.vw-demo { max-width:1200px; margin:0 auto var(--space-4); display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:var(--rounded-card);
  background:var(--surface-1); border:1px solid var(--hairline); color:var(--ink); text-decoration:none; transition:border-color .15s ease, transform .15s ease; }
.vw-demo[hidden] { display:none; }
.vw-demo:hover { border-color:var(--accent-cyan); transform:translateY(-1px); }
.vw-demo-dot { width:10px; height:10px; border-radius:50%; background:#2fd27a; box-shadow:0 0 0 4px rgba(47,210,122,.18); flex:none; }
.vw-demo-t { display:flex; flex-direction:column; min-width:0; margin-right:auto; }
.vw-demo-t b { font-size:15px; line-height:20px; }
.vw-demo-t small { font-size:13px; line-height:18px; color:var(--ink-subtle); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vw-col.is-feat ~ .vw-end, .vw-demo + .vw-col.is-feat { }
.vw-scroll:has(.vw-col.is-feat) .vw-demo { max-width:1320px; }

/* Sản phẩm chưa có ảnh: đen trắng, khoá, xếp cuối */
.work.is-locked .work-media img { filter:grayscale(1) contrast(.92); opacity:.72; }
.work.is-locked .work-link.is-static:hover .work-media img { transform:none; }
.work.is-locked .work-title, .work.is-locked .work-sub { opacity:.6; }
.work.is-locked .work-tags { filter:grayscale(1); opacity:.6; }
.work-lock { position:absolute; right:14px; top:14px; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:99px;
  background:rgba(19,19,19,.78); color:#fff; font:600 12px/16px var(--font-text); backdrop-filter:blur(4px); }
.work-lock svg { width:14px; height:14px; }

/* Logo công ty trong Kinh nghiệm */
.job-title { align-items:center; }
.job-logo { width:44px; height:44px; flex:none; border-radius:12px; background:#fff; border:1px solid var(--hairline); object-fit:contain; box-shadow:0 4px 12px -6px rgba(0,0,0,.25); }
.job-logo-icon { display:inline-grid; place-items:center; color:var(--cyan-ink); background:var(--surface-2); }
.job-logo-icon svg { width:22px; height:22px; }
@media (max-width:600px) { .job-logo { width:36px; height:36px; border-radius:10px; } }
/* Logo công ty: rộng tự do theo logo, cao cố định, nội dung căn giữa */
img.job-logo { width:auto; height:44px; padding:8px 10px; box-sizing:border-box; }
@media (max-width:600px) { img.job-logo { height:36px; padding:6px 8px; } }

/* Mô tả + con số sản phẩm ở đầu trang xem trước */
.vw-info { max-width:1200px; margin:0 auto var(--space-3); padding:20px 22px; border-radius:var(--rounded-card); background:var(--surface-1); border:1px solid var(--hairline); }
.vw-info[hidden], .vw-stats[hidden], .vw-info-r[hidden] { display:none; }
.vw-scroll:has(.vw-col.is-feat) .vw-info { max-width:1320px; }
.vw-info-d { margin:0; font-size:17px; line-height:27px; color:var(--ink); max-width:880px; }
.vw-stats { list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:10px; }
.vw-stats li { padding:12px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--hairline); display:flex; flex-direction:column; gap:2px; }
.vw-stats b { font-family:var(--font-display); font-stretch:120%; font-weight:800; font-size:26px; line-height:30px; color:var(--cyan-ink); }
.vw-stats span { font-size:13px; line-height:18px; color:var(--ink-muted); }
.vw-info-r { margin:14px 0 0; font-size:14px; line-height:21px; color:var(--ink-subtle); }
@media (max-width:600px) { .vw-info { padding:16px; } .vw-info-d { font-size:15px; line-height:24px; } .vw-stats { grid-template-columns:1fr 1fr; } .vw-stats b { font-size:22px; } }

/* Xem ảnh toàn màn hình trong trang xem trước */
.vw-col img { cursor:zoom-in; }
.vw-lb { position:fixed; inset:0; z-index:20; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:56px 16px 44px; background:#0A0D0F; }
.vw-lb[hidden] { display:none; }
.vw-lb-stage { height:100%; overflow:auto; display:flex; align-items:center; justify-content:center; overscroll-behavior:contain; }
.vw-lb-stage img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:8px; cursor:zoom-out; }
.vw-lb-close { position:absolute; top:12px; right:16px; }
.vw-lb-cap { position:absolute; left:16px; right:16px; bottom:12px; margin:0; text-align:center; color:#C9D1D3; font:500 13px/18px var(--font-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vw-lb .btn-icon { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.16); }
.vw-lb .btn-icon:hover { background:rgba(255,255,255,.16); }
.viewer.lb-open .vw-rail { visibility:hidden; }
@media (max-width:640px) {
  .vw-lb { grid-template-columns:1fr; padding:56px 8px 72px; }
  .vw-lb-nav { position:absolute; bottom:36px; }
  .vw-lb-nav[data-lb="-1"] { left:calc(50% - 56px); }
  .vw-lb-nav[data-lb="1"] { right:calc(50% - 56px); }
  .vw-lb-cap { bottom:8px; }
}