/* ══════════════════════════════════════════════════════════════════
   doanhcd.trustlayer.vn — Chẩu Đình Doanh

   Huong thiet ke: mot van ban duoc dan trang tu te. Dieu khoan danh
   so (§ 00–08), luoi Thuy Si, gach hairline, khong the card, khong
   gradient, khong thanh do ky nang, khong icon soup. Thu bac do CO
   CHU, KHOANG TRANG va CAN LE ganh — khong phai do trang tri.

   KY LUAT DO DAY: chi 400 va 600. KHONG co 700 o bat ky dau. Muon
   nhan manh thi dung co chu, khoang trang hoac mau — dung voi tay
   len do day.

   🔴 TOAN BO CSS PHAI NAM TRONG FILE NAY.
      CSP cua trang khong co 'unsafe-inline' cho style-src, nen mot
      the <style> hay mot thuoc tinh style="" trong HTML se bi trinh
      duyet CHAN — im lang, khong bao loi.
      (JS doi bien qua element.style.setProperty() thi VAN chay:
       CSSOM khong bi style-src chan.)
   ══════════════════════════════════════════════════════════════════ */

/* ── Bien mau ─────────────────────────────────────────────────────
   Nen SANG la mac dinh, khong phu thuoc cai dat he dieu hanh.

   🔴 CO Y KHONG dung @media (prefers-color-scheme: dark).
      Rat nhieu may de san dark mode o muc he dieu hanh. Neu trang tu
      chay theo, nguoi mo link se roi thang vao ban nen toi ma ho
      khong he chon — trong khi day la trang gioi thieu ban than, thu
      nguoi ta gui cho nha tuyen dung, va no phai mo ra sang sua nhu
      mot to ho so.

      Ai muon nen toi thi bam nut — luc do data-theme="dark" duoc ghi
      vao localStorage va giu qua cac lan sau.                      */

:root {
  color-scheme: light;

  --paper:      #FAF9F6;
  --paper-2:    #F1EFE8;
  --ink:        #15171A;
  --ink-2:      #4A4F56;
  /* 4.817:1 tren --paper. Da do bang may, khong uoc luong: #6E747C
     truoc do chi dat 4.48:1 — truot nguong AA 4.5 dung 0.02, va no
     ap len TOAN BO lop nhan mono 10-12px (tag, eyebrow, cot bang
     chung, chan trang, chu thich anh). Giu nguyen sac (hue 214, sat
     0.06), chi ha do sang. */
  --ink-3:      #696F77;
  --rule:       #DCD8CF;
  --rule-2:     #15171A;
  --accent:     #9C2F24;
  --accent-bg:  #F3E7E4;
  --stamp:      #7E5A11;
  --focus:      #1D4ED8;

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --measure: 62ch;
  --gap: clamp(1.75rem, 4vw, 3.25rem);
  --rail-w: 108px;
  --pad: clamp(1.25rem, 5vw, 3rem);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:     #131519;
  --paper-2:   #1A1D23;
  --ink:       #E8E6E0;
  --ink-2:     #A5ABB3;
  --ink-3:     #838A93;
  --rule:      #2B2F36;
  --rule-2:    #E8E6E0;
  --accent:    #E4796A;
  --accent-bg: #2A1D1B;
  --stamp:     #CBA34A;
  --focus:     #8AB4F8;
}

/* ── Nen tang ────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Neo cuon: thieu dong nay thi bam vao muc luc se dua tieu de len
     sat mep tren, bi thanh dieu khien che mat. */
  scroll-padding-top: 4.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.68;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tieng Viet can nhieu khoang dong hon: dau móc chong dau mũ (ẩ ể ổ ữ)
   dung cao hon chieu cao chu Latin thong thuong. Cung mot gia tri
   line-height cho ca hai thu tieng se lam ban tieng Viet chat hon
   ban tieng Anh — day la khac biet do duoc, khong phai cam giac. */
:lang(vi) { line-height: 1.74; }
:lang(en) { line-height: 1.64; }

img, svg { max-width: 100%; }
img { height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--accent-bg); color: var(--ink); }

/* ── Chuyen ngu ──────────────────────────────────────────────────── */
/* Ca hai ban NGON NGU deu nam trong DOM, chi mot ban hien. Nho vay
   :lang(vi) / :lang(en) o tren moi ap dung duoc that — ngon ngu la
   thuoc tinh cua DOM chu khong phai chuoi do JS thay tai cho.        */
html[data-lang="vi"] [lang="en"] { display: none; }
html[data-lang="en"] [lang="vi"] { display: none; }

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

/* Chi hien khi co JS. Khong co JS thi nut doi nen / doi ngon ngu /
   in trang khong lam duoc gi — hien ra la moi nguoi bam vao mot thu
   chet. */
.controls { display: flex; }
/* 🔴 An khi KHONG co JS — dao nguoc so voi cach viet quen thuoc
   (`.js-only{display:none}` roi `html.js .js-only{display:revert}`).
   `revert` tra ve gia tri cua trinh duyet, tuc la XOA luon display do
   class cua chinh phan tu dat: nut In trang la .btn { display:
   inline-flex } se tut ve inline-block va cac quy tac can giua ben
   trong no ngung hoat dong. Viet theo chieu nay thi khong phan tu nao
   bi dong toi khi co JS. */
html:not(.js) .js-only { display: none !important; }

.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; font-size: 0.875rem; text-decoration: none;
  transition: top 0.15s;
}
.skip:focus { top: 0.5rem; }

/* ── Khung trang ─────────────────────────────────────────────────── */

.sheet {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--pad);
  padding-block: clamp(2rem, 5vw, 3.5rem) 0;
}

@media (min-width: 1180px) {
  .sheet { padding-left: calc(var(--rail-w) + var(--pad)); }
}

.clause {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.clause--masthead { border-top: 0; padding-top: 0; }

.clause-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.clause-num {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.clause-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  /* Dau móc tieng Viet (Ẩ, Ữ) o co chu lon can chieu cao rieng, neu
     khong no bi cat boi phan tu dung tren. */
  padding-top: 0.08em;
}

.clause-note {
  margin: 0.35rem 0 0;
  max-width: var(--measure);
  font-size: 0.875rem;
  color: var(--ink-2);
}

.prose p { max-width: var(--measure); margin: 0 0 1.05em; }
.prose p:last-child { margin-bottom: 0; }
.prose--lead p { font-size: 1.0625rem; }
.prose em, .project-body em, .record-body em {
  font-style: italic;
  color: var(--ink);
}

code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--paper-2);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

/* ── Thanh dieu khien ────────────────────────────────────────────── */

.controls {
  position: fixed;
  top: 0.75rem; right: 0.75rem;
  z-index: 50;
  gap: 0.4rem;
}

.ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.6rem;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ctl:hover { color: var(--ink); border-color: var(--rule-2); }
.ctl-ico { display: inline-flex; }
/* Bieu tuong noi len KET QUA cua cu bam, khong phai trang thai hien
   tai: dang o nen sang thi hien mat trang ("bam se sang toi"). */
.ico-sun  { display: none; }
.ico-moon { display: inline; }
:root[data-theme="dark"] .ico-sun  { display: inline; }
:root[data-theme="dark"] .ico-moon { display: none; }

/* ── Thanh dieu huong dieu khoan ─────────────────────────────────── */
/* Chay dau trang cua mot ban in: cho biet dang doc dieu khoan nao va
   da di duoc bao xa. Duoi 1180px thi an — no chi con la trong luong
   thua khi khong con le trai de dat.                                */

.rail { display: none; }

@media (min-width: 1180px) {
  .rail {
    display: block;
    position: fixed;
    left: max(1.5rem, calc(50vw - 590px + 1.5rem));
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    width: var(--rail-w);
  }
  .rail ol {
    list-style: none;
    margin: 0; padding: 0 0 0 0.9rem;
    border-left: 1px solid var(--rule);
  }
  .rail li + li { margin-top: 0.34rem; }
  .rail a {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    text-decoration: none;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    transition: color 0.18s;
  }
  .rail a:hover { color: var(--ink); }
  .rail i { font-style: normal; }
  /* Nhan chi hien o dieu khoan dang doc — nen thanh nay doc len nhu
     MOT dong chay dau trang thay doi khi cuon, khong phai mot menu
     chin muc luon bay ra. */
  .rail b {
    font-weight: 400;
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity 0.2s, transform 0.2s;
    white-space: nowrap;
  }
  .rail a[aria-current="true"] { color: var(--accent); }
  .rail a[aria-current="true"] b { opacity: 1; transform: none; }

  .rail-gauge {
    margin: 0.9rem 0 0 0;
    width: 1px; height: 44px;
    background: var(--rule);
    position: relative;
  }
  .rail-gauge span {
    position: absolute; inset: 0 0 auto 0;
    height: calc(var(--read, 0) * 100%);
    background: var(--accent);
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail b, .rail a, .ctl { transition: none; }
}

/* ── § 00 Trang bìa ──────────────────────────────────────────────── */

.runhead {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.runhead span:last-child { text-align: right; }
/* Thanh dieu khien la position:fixed o goc phai tren. Khi cua so rong
   hon trang nhieu thi no nam ngoai le, khong dung ai. Nhung khi be
   ngang cua so xap xi be ngang trang, no de thang len nhan phai cua
   dong nay. Chua cho san. */
@media (min-width: 721px) and (max-width: 1320px) {
  /* Cho danh cho thanh dieu khien phai dat vao NHAN, khong dat vao
     .runhead — dat vao .runhead thi duong ke duoi no cung ngan lai
     theo, trong nhu mot loi dan trang. Duoi 721px thi nhan phai da an,
     ben trai chi con ten (ngan), nen khong can chua cho. */
  .runhead span:last-child { padding-right: 6rem; }
}

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gap);
  align-items: start;
}
/* min-width:0 — thieu dong nay thi mot chuoi dai khong ngat duoc
   (email, ten mien) se noi rong cot grid ra ngoai man hinh thay vi
   xuong dong. Loi chi lo ra o 375px. */
.masthead > * { min-width: 0; }

.eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 7.5vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  /* Chieu cao cho dau móc cua chu Ẩ — o co chu nay no vuot len tren
     duong cao chu Latin va se bi cat neu khong chua san cho. */
  padding-top: 0.06em;
  text-wrap: balance;
}

.direction {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.1rem 0 0.4rem;
  font-size: clamp(1rem, 2.2vw, 1.1875rem);
  color: var(--ink-2);
}
.arrow { color: var(--accent); flex: none; }
.direction-from { color: var(--ink-2); }
.direction-to { color: var(--ink); }

.lede {
  margin: 0 0 1.75rem;
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1.9vw, 1.1875rem);
  color: var(--ink-2);
}

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.68rem 1.15rem;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn:hover { background: var(--paper-2); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-2); color: var(--paper); }

.actions-note {
  margin: 0.7rem 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* Anh the, dan len trang bia.
   234px la do phan giai goc — khong phong to. Hien o 116px de tren
   man hinh 2x moi diem anh CSS toi dung hai diem anh that: sac net,
   va dung voi thu no von la (mot cai anh the), thay vi mot anh bia
   bi keo mo. */
.plate { margin: 0; }
.plate-mat {
  /* Om lay anh. Thieu dong nay thi o mot cot (duoi 720px) khung gian
     het be ngang con anh 116px nam le loi ben trai. */
  width: max-content;
  padding: 8px;
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  line-height: 0;
}
.plate-mat img { width: 116px; height: 116px; display: block; }
.plate figcaption {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  max-width: 134px;
}

@media (max-width: 720px) {
  .masthead { grid-template-columns: 1fr; }
  .runhead span:last-child { display: none; }
}

/* ── § 01 Tóm tắt ────────────────────────────────────────────────── */

.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.spec > div { background: var(--paper); padding: 1.1rem 1.2rem; }
.spec dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.spec dd {
  margin: 0.4rem 0 0;
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--ink);
}

/* ── § 03 Kinh nghiệm ────────────────────────────────────────────── */

.records { list-style: none; margin: 0; padding: 0; }
.record {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: var(--gap);
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
  border-top: 1px solid var(--rule);
}
.record:first-child { border-top: 0; padding-top: 0; }

.record-meta > * { margin: 0; }
.record-dates {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.record-dur {
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.record-state {
  margin-top: 0.55rem;
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.record-role {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.record-org {
  margin: 0.2rem 0 1rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.record-body > p { max-width: var(--measure); margin: 0 0 1em; }

.evidence {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.evidence li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-2);
}
.tag {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.25em;
}

@media (max-width: 760px) {
  .record { grid-template-columns: 1fr; gap: 1rem; }
  .record-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem; }
  .record-dur { margin-top: 0; }
  .record-state { margin-top: 0; }
}

/* ── § 04 Dự án ──────────────────────────────────────────────────── */

.projects { list-style: none; margin: 0; padding: 0; }
.project {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: var(--gap);
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
  border-top: 1px solid var(--rule);
}
.project:first-child { border-top: 0; padding-top: 0; }
.project > * { min-width: 0; }

.project-head > * { margin: 0; }
.project-id {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.project-head h3 {
  margin: 0.45rem 0 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.project-role {
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.project-body > p { max-width: var(--measure); margin: 0 0 1em; }

.schema-fig { margin: 1.5rem 0 0.9rem; }
.schema {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  overflow: visible;
}
.schema .ln {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.schema .dash { stroke-dasharray: 3 3; }
.schema .fill { fill: var(--ink-3); stroke: none; }
/* Cong quet va tuong lua la diem nhan cua tung so do — mau nhan chi
   dung o day, khong dung o cho khac trong so do. */
.schema .gate { stroke: var(--accent); }
.schema .gate-t { fill: var(--accent); }
.schema .lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  fill: var(--ink-2);
}
.schema .mid { text-anchor: middle; }
.schema .dim { fill: var(--ink-3); font-size: 8px; }

.stack {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .project { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── § 05 Kỹ năng ────────────────────────────────────────────────── */

.skills {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.skills caption { text-align: left; }
.skills th, .skills td {
  padding: 0.95rem 1rem 0.95rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.skills thead th {
  padding-top: 0;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--rule-2);
}
.skills tbody th {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  width: 12rem;
  padding-right: 1.5rem;
}
.skills td { font-size: 0.9375rem; color: var(--ink-2); }
.skills .ev {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  white-space: nowrap;
  text-align: right;
  padding-right: 0;
}
/* Bao mat la hang tren cung cua lat cat — ket thuc bang net dam de
   thu tu hang tro thanh mot lap luan, khong chi la mot danh sach. */
.skills .row--top th,
.skills .row--top td { border-bottom-color: var(--rule-2); }

@media (max-width: 760px) {
  /* 🔴 Doi display tren phan tu bang LAM MAT vai tro ngam (table/row/
     cell) trong cay tro nang cua Chrome va Safari. Vi vay HTML da khai
     role="table"/"row"/"rowheader"/"cell" TUONG MINH — vai tro khai
     tuong minh song sot qua viec doi display, vai tro ngam thi khong.
     Xoa cac role do trong HTML se lam bang nay bien thanh mot dong
     van ban lien tuc voi trinh doc man hinh. */
  .skills, .skills tbody, .skills tr { display: block; }
  .skills thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .skills tbody tr { padding-block: 1rem; border-bottom: 1px solid var(--rule); }
  .skills tbody tr:first-child { padding-top: 0; }
  .skills th, .skills td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: 0;
  }
  .skills tbody th { margin-bottom: 0.4rem; padding-right: 0; }
  .skills td { margin-bottom: 0.45rem; }
  .skills .ev { text-align: left; white-space: normal; margin-bottom: 0; }
  .skills .row--top { border-bottom-color: var(--rule-2); }
}

/* ── § 06 Chứng chỉ & Học vấn ────────────────────────────────────── */

.leaders { list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0; }
.lead-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.lead-row:first-child { padding-top: 0; }
.lead-name { font-size: 1rem; }
/* Dan noi bang dau cham — cach dan trang cua muc luc sach in. Day la
   thu mot the card khong lam duoc, va la ly do huong nay chon hinh
   thuc van ban thay vi hinh thuc giao dien. */
.lead-dots {
  flex: 1 1 2rem;
  min-width: 1.5rem;
  align-self: center;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(0.15em);
}
.lead-date {
  flex: none;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

/* Dau moc duy nhat tren toan trang. Chi mot lan — chung chi cao nhat
   va moi nhat. Dung o cho thu hai la mat het gia tri. */
.stamp {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.08rem 0.4rem;
  border: 1px solid var(--stamp);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--stamp);
  transform: rotate(-3.5deg);
  white-space: nowrap;
}

.edu { padding-top: 0.5rem; }
.edu-h {
  margin: 0 0 0.8rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.edu-degree { margin: 0; font-size: 1rem; font-weight: 600; }
.edu-school { margin: 0.2rem 0 0; color: var(--ink-2); }
.edu-date {
  margin: 0.35rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* ── § 07 Liên hệ ────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.6rem 2rem;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}
.contact > div { min-width: 0; }
.contact dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact dd {
  margin: 0.35rem 0 0;
  /* Email va ten mien khong co cho ngat tu nhien — thieu dong nay
     chung day trang rong ngang o 375px. */
  overflow-wrap: anywhere;
}
.contact a {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s;
}
.contact a:hover { text-decoration-color: var(--accent); }

.contact-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }

/* ── § 08 Ghi chú kỹ thuật ───────────────────────────────────────── */

.clause--colophon { color: var(--ink-2); }
.colophon { margin: 0; }
.colophon > div {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.colophon > div:first-child { border-top: 1px solid var(--rule); }
.colophon dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.3em;
}
.colophon dd { margin: 0; font-size: 0.9375rem; }

@media (max-width: 640px) {
  .colophon > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ── Chân trang ──────────────────────────────────────────────────── */

.colophon-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.colophon-foot p { margin: 0; }

/* ── In ra giấy ──────────────────────────────────────────────────── */
/* Huong thiet ke nay von la mot van ban, nen no phai in duoc that.
   Voi ung vien ma san pham chinh la mot ban CV, day khong phai thu
   trang tri. */

@media print {
  :root {
    --paper: #fff; --paper-2: #fff;
    --ink: #000; --ink-2: #222; --ink-3: #555;
    --rule: #bbb; --rule-2: #000; --accent: #000; --stamp: #555;
  }
  .controls, .rail, .skip, .js-only { display: none !important; }
  .sheet { max-width: none; padding: 0; }
  body { font-size: 10.5pt; line-height: 1.45; }
  .clause { padding-block: 14pt; break-inside: avoid; }
  .record, .project { break-inside: avoid; }
  .schema { max-width: 300px; }
  h1 { font-size: 26pt; }
  .clause-title { font-size: 15pt; }
  a { text-decoration: none; }
  /* Link ra ngoai khong bam duoc tren giay — in dia chi ra sau chu. */
  .contact a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .contact a[href^="mailto:"]::after,
  .contact a[href^="tel:"]::after { content: ""; }
}