/* Layout: hồ sơ biên tập kiểu neo-brutalist — viền đen 2px, bóng in lệch, các dải màu xen kẽ sáng / giấy / tối / xanh */
:root {
  --light: #fafafa;
  --paper: #f4f3ee;
  --surface: #ffffff;
  --ink: #111111;
  --muted: #5f5f66;
  --blue: #435fa9;
  --blue-dark: #2d4480;
  --red: #d1394a;
  --red-dark: #b02636;
  --on-dark: #f2f1ec;
  --on-dark-muted: #b9b8b2;
  --display: "Literata", Georgia, "Times New Roman", serif;
  --body: "Lora", Georgia, "Times New Roman", serif;
  --shadow: 4px 4px 0 0 var(--ink);
  --shadow-sm: 2px 2px 0 0 var(--ink);
  --shadow-lg: 6px 6px 0 0 var(--ink);
  --header-h: 68px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0;
  background: var(--light);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--red); color: #fff; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); }
section[id] { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
.wrap {
  max-width: 74rem;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
p { margin: 0; text-align: justify; text-justify: inter-word; hyphens: manual; }
.facts li, .steps p, .card p { text-align: justify; }
.contact p { text-align-last: center; }
a { color: var(--blue); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.dot { color: var(--red); }
.label { font-family: var(--body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* Neo primitives */
.box { background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--shadow); }
a.box { transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s cubic-bezier(.16,1,.3,1); }
a.box:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border: 2px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow-sm);
  font-family: var(--body); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); }
.btn-white { background: var(--surface); color: var(--ink); }
.btn-lg { padding: 18px 40px; font-size: 1.2rem; border-radius: 10px; box-shadow: var(--shadow); }
.btn-lg:hover { box-shadow: var(--shadow-lg); transform: translate(-2px, -2px); }

/* Header */
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); border-bottom: 2px solid var(--ink); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.brand { font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
nav.links { display: flex; align-items: center; gap: 22px; font-size: 0.95rem; font-weight: 500; }
nav.links a:not(.btn) { color: var(--ink); text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent; }
nav.links a:not(.btn):hover, nav.links a.active, nav.links a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); }
nav.links .btn { padding: 8px 16px; font-size: 0.85rem; }
nav.links a { white-space: nowrap; }
@media (max-width: 1100px) { nav.links { gap: 16px; } }
.menu-btn { display: none; background: var(--surface); border: 2px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow-sm); padding: 7px 12px; font: 600 0.9rem var(--body); color: var(--ink); cursor: pointer; }
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; }
  nav.links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 2px solid var(--ink); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); box-shadow: 0 6px 0 0 rgba(17,17,17,.08); }
  nav.links.open { display: flex; }
  nav.links a:not(.btn) { padding: 12px 0; border-bottom: 1px solid #e4e2da; font-size: 1.05rem; }
  nav.links a:not(.btn):hover, nav.links a.active, nav.links a[aria-current="page"] { border-bottom-color: #e4e2da; }
  nav.links .btn { margin-top: 14px; justify-content: center; padding: 12px; font-size: 1rem; }
}

/* Section ribbon */
.ribbon { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; padding-bottom: 18px; margin-bottom: 44px; border-bottom: 2px solid var(--ink); }
.ribbon .label { color: var(--blue); display: block; margin-bottom: 10px; }
.ribbon h2 { font-size: clamp(2.1rem, 5vw, 3.25rem); }
.ribbon .aside { font-size: 0.95rem; color: var(--muted); max-width: 34ch; margin-left: auto; text-align: right; text-align-last: right; text-wrap: balance; }
@media (max-width: 640px) { .ribbon .aside { margin-left: 0; text-align: left; text-align-last: left; } }
section.band { padding-block: 88px; border-top: 2px solid var(--ink); }
@media (min-width: 900px) { section.band { padding-block: 112px; } }
.bg-paper { background: var(--paper); }
.bg-light { background: var(--light); }

/* Hero */
.hero { padding-block: 40px 72px; }
@media (min-width: 900px) { .hero { padding-block: 56px 104px; } }
.strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-bottom: 12px; margin-bottom: 40px; border-bottom: 2px solid var(--ink); color: var(--muted); }
.strip b { color: var(--ink); font-weight: 600; }
.strip .r { color: var(--red); }
.hero-label { display: block; color: var(--blue); margin-bottom: 18px; }
.hero-grid { display: grid; gap: 32px; align-items: stretch; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 6fr 5fr; gap: 40px; } }
.hero-copy { display: grid; gap: 20px; align-content: start; min-width: 0; padding: 28px; }
@media (min-width: 720px) { .hero-copy { padding: 36px; } }
.pill { justify-self: start; display: inline-block; padding: 6px 14px; background: var(--blue); color: #fff; border: 2px solid var(--ink); box-shadow: var(--shadow-sm); }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); line-height: 1; margin-top: -4px; }
.role-line { text-align: left; font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.35; }
.thesis { background: var(--paper); border: 2px solid var(--ink); padding: 22px 24px; display: grid; gap: 8px; }
.thesis .label { color: var(--red); }
.thesis p { font-style: italic; font-size: clamp(1.12rem, 1.9vw, 1.32rem); line-height: 1.6; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Score card */
.score { padding: 24px; min-width: 0; }
.score-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid var(--ink); }
.score-head .label { display: flex; align-items: center; gap: 8px; }
.score-head .label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.years { display: inline-flex; border: 2px solid var(--ink); box-shadow: var(--shadow-sm); border-radius: 6px; overflow: hidden; }
.years button { font: 600 0.9rem var(--body); padding: 6px 14px; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.years button + button { border-left: 2px solid var(--ink); }
.years button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.years button:hover:not([aria-pressed="true"]) { background: var(--paper); }
.overall { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.overall strong { font-family: var(--display); font-weight: 800; font-size: 4.5rem; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.overall span { color: var(--muted); font-size: 0.95rem; }
.score-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 6px; font-size: 0.88rem; color: var(--muted); }
.score-meta .delta { color: var(--red); font-weight: 600; }
.ruler { position: relative; margin-top: 20px; height: 12px; background: var(--paper); border: 2px solid var(--ink); }
.ruler-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 8) / 9 * 100%); background: var(--blue); transition: width .45s cubic-bezier(.16,1,.3,1); }
.ruler-mark { position: absolute; top: 50%; left: calc(var(--v, 8) / 9 * 100%); width: 18px; height: 18px; background: var(--red); border: 2px solid var(--ink); transform: translate(-50%, -50%) rotate(45deg); transition: left .45s cubic-bezier(.16,1,.3,1); }
.ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.skills { margin: 20px 0 0; padding: 16px; background: var(--paper); border: 2px solid var(--ink); display: grid; gap: 10px; font-size: 0.92rem; }
.skills > div { display: grid; grid-template-columns: 5.4rem 1fr 2.2rem; align-items: center; gap: 12px; }
.skills dt { font-weight: 500; }
.skills dd { margin: 0; display: contents; }
.skills .bar { height: 8px; background: var(--surface); border: 1.5px solid var(--ink); }
.skills .bar > span { display: block; height: 100%; width: calc(var(--v) / 9 * 100%); background: var(--blue); transition: width .45s cubic-bezier(.16,1,.3,1); }
.skills b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.doc-row { margin-top: 14px; font-size: 0.92rem; }
.doc-row a { font-weight: 600; color: var(--blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.doc-row a:hover { color: var(--blue-dark); text-decoration-thickness: 2.5px; }
.facts { list-style: none; padding: 16px 0 0; margin: 18px 0 0; display: grid; gap: 8px; border-top: 2px solid var(--ink); font-size: 0.95rem; }
.facts li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.facts b { font-weight: 600; }
.facts small { display: block; font-size: 0.88rem; color: var(--muted); margin-top: 1px; }
.facts li { text-align: left !important; }
.facts a { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.facts li::before { content: ""; width: 8px; height: 8px; background: var(--red); margin-top: 0.62em; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; counter-reset: s; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: s; padding: 26px; display: grid; gap: 10px; align-content: start; }
.steps li::before { content: "0" counter(s); font-family: var(--display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--red); }
.steps h3 { font-size: 1.4rem; }
.steps p { color: var(--muted); text-wrap: balance; }
.card p { text-wrap: balance; }
.belief { margin-top: 32px; padding: 28px; background: var(--surface); border: 2px solid var(--ink); display: grid; gap: 10px; }
.belief .label { color: var(--red); }
.belief p { font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.6; text-wrap: pretty; }

/* NEMO */
.org { padding: 28px; display: grid; gap: 16px; }
@media (min-width: 860px) { .org { grid-template-columns: 1fr 1.4fr; gap: 40px; padding: 40px; } }
.chip { display: inline-block; padding: 3px 10px; border: 1.5px solid var(--ink); background: var(--paper); font-size: 0.82rem; font-weight: 500; }
.chip.blue { background: var(--blue); color: #fff; }
.chip.red { background: var(--red); color: #fff; }
.org h3 { font-size: clamp(2.4rem, 5vw, 3.5rem); margin-top: 12px; }
.org .role { color: var(--blue); font-weight: 600; margin-top: 6px; }
.org .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.org .fields { margin-top: 14px; text-align: left; font-style: italic; color: var(--muted); word-spacing: 0.4em; }
.stuck { display: flex; flex-wrap: wrap; gap: 8px; }

/* Program + people cards */
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.card { display: flex; flex-direction: column; gap: 12px; padding: 24px; text-decoration: none; color: var(--ink); min-width: 0; }
.card .label { color: var(--red); }
.card h3 { font-size: 1.55rem; }
.card p { color: var(--muted); font-size: 0.98rem; flex: 1; }
.card .go { padding-top: 12px; border-top: 1.5px solid var(--ink); }
.card .go span { font-weight: 600; color: var(--blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.card:hover .go span { color: var(--blue-dark); text-decoration-thickness: 2.5px; }
.people .card { gap: 8px; }
.people .card h3 { font-size: 1.35rem; }

/* About (dark band) */
.dark { background: var(--ink); color: var(--on-dark); }
.dark .ribbon { border-bottom-color: #3a3a3a; }
.dark .ribbon .label { color: var(--red); }
.notes { display: grid; gap: 28px; }
.about-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 860px) { .notes { grid-template-columns: repeat(2, 1fr); gap: 32px 48px; } }

/* Hành trình ngôn ngữ */
.journey { border: 2px solid var(--on-dark); box-shadow: 6px 6px 0 0 var(--red); padding: 24px; display: grid; gap: 22px; }
@media (min-width: 720px) { .journey { padding: 32px; } }
.j-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.j-head .label { color: var(--red); }
.j-hint { font-size: 0.9rem; font-style: italic; color: var(--on-dark-muted); }
.j-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; }
.j-path::before { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; border-top: 2px dashed #4a4a4a; }
.j-path button { position: relative; display: grid; gap: 2px; justify-items: center; padding: 14px 6px; background: var(--ink); color: var(--on-dark); border: 2px solid #4a4a4a; border-radius: 6px; cursor: pointer; font: inherit; transition: border-color .15s, transform .12s, box-shadow .12s; }
.j-path button:hover { border-color: var(--on-dark); }
.j-path button[aria-pressed="true"] { background: var(--red); border-color: var(--on-dark); box-shadow: 3px 3px 0 0 var(--on-dark); transform: translate(-1px, -1px); }
.j-path b { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.5rem); line-height: 1.2; white-space: nowrap; }
.j-path small { font-size: 0.8rem; color: var(--on-dark-muted); white-space: nowrap; }
.j-path button[aria-pressed="true"] small { color: #fff; }
@media (max-width: 640px) {
  .j-path { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .j-path::before { display: none; }
  .j-path button { grid-column: span 2; }
  .j-path button:nth-child(4) { grid-column: 2 / span 2; }
}
.j-card { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid #3a3a3a; }
.j-card h3 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.j-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.j-meta span { padding: 2px 10px; border: 1.5px solid var(--on-dark); font-size: 0.85rem; }
.j-meta span:first-child { background: var(--blue); }
.j-card p { color: var(--on-dark); max-width: 62ch; text-wrap: balance; }
.j-fact { border-left: 3px solid var(--red); padding-left: 14px; }
.j-fact .label { color: var(--on-dark-muted); display: block; }
.j-fact p { font-style: italic; }
.j-card a { justify-self: start; color: #fff; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.j-card a:hover { text-decoration-thickness: 2.5px; }
.avatar { display: block; width: min(100%, 300px); height: auto; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); box-shadow: var(--shadow); background: var(--paper); margin-bottom: 4px; }
.note { border-left: 3px solid #4a4a4a; padding-left: 18px; display: grid; gap: 6px; align-content: start; }
.note:nth-child(1) { border-color: var(--blue); }
.note:nth-child(3) { border-color: var(--red); }
.note .label { color: var(--on-dark-muted); }
.note p { color: var(--on-dark); text-wrap: pretty; }
.dark .tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid #3a3a3a; }
.dark .tags span { padding: 4px 12px; border: 1.5px solid var(--on-dark); font-size: 0.9rem; font-style: italic; }

/* Contact */
.contact { background: var(--blue); color: #fff; border-top: 2px solid var(--ink); }
.contact .wrap { padding-block: 96px; display: grid; justify-items: center; text-align: center; gap: 22px; }
.contact .pill { justify-self: center; background: var(--surface); color: var(--ink); }
.contact h2 { font-size: clamp(2.3rem, 6vw, 3.75rem); max-width: 18ch; }
.contact p { font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.6; max-width: 46ch; color: #e6ebf7; }
.contact .actions { justify-content: center; margin-top: 12px; }
.contact .pending { font-style: normal; font-size: 0.95rem; }
.contact .secondary { font-style: normal; font-size: 1rem; color: #e6ebf7; margin-top: -4px; }
.contact .secondary a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.note .writing { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.note .writing li { white-space: nowrap; font-size: 0.94rem; display: grid; grid-template-columns: 16px 1fr; gap: 8px; color: var(--on-dark); }
.note .writing li::before { content: "♥"; color: var(--red); font-size: 0.95em; line-height: inherit; }
.note .writing a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.contact .secondary a:hover { text-decoration-thickness: 2.5px; }

footer { background: var(--ink); color: var(--on-dark-muted); border-top: 2px solid var(--ink); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-block: 36px; font-size: 0.92rem; }
footer .brand { color: #fff; font-size: 1.5rem; }
.icons { display: flex; gap: 10px; }
.icons a { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid #4a4a4a; border-radius: 8px; color: var(--on-dark); transition: background .15s, border-color .15s, color .15s; }
.icons a:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
.icons svg { width: 18px; height: 18px; fill: currentColor; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Chỗ chưa có thông tin: Hà điền sau */
.tbu { display: inline-block; padding: 0 8px; border: 1.5px dashed var(--red); color: var(--red); font-style: normal; font-weight: 600; font-size: 0.85em; letter-spacing: 0.06em; }
.dark .tbu, .contact .tbu { color: #fff; border-color: currentColor; }

/* Trang chủ: ba cánh cửa */
.doors { display: grid; gap: 18px; align-content: start; }
.door { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 22px 24px; text-decoration: none; color: var(--ink); }
.door .label { grid-column: 1 / -1; color: var(--red); }
.door h2 { font-size: clamp(1.6rem, 3vw, 2rem); }
.door p { grid-column: 1; color: var(--muted); font-size: 0.98rem; text-align: left; }
.door .arrow { grid-column: 2; grid-row: 2 / span 2; font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--blue); }
.door:hover .arrow { color: var(--red); }
.stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 18px 24px; background: var(--blue); color: #fff; }
.stat strong { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; }
.stat a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; margin-left: auto; }

/* Đầu trang con */
.page-head { padding-block: 48px 8px; }
@media (min-width: 900px) { .page-head { padding-block: 72px 16px; } }
.page-head .label { color: var(--blue); display: block; margin-bottom: 14px; }
.page-head h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); line-height: 1.05; }
.page-head .lede { margin-top: 16px; max-width: 46ch; font-size: clamp(1.1rem, 2vw, 1.3rem); font-style: italic; color: var(--muted); text-align: left; text-wrap: balance; }
.page-head + section.band { border-top: 0; padding-top: 40px; }

/* Sản phẩm */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filters button { font: 600 0.92rem var(--body); padding: 7px 16px; border: 2px solid var(--ink); border-radius: 6px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.filters button:hover:not([aria-pressed="true"]) { background: var(--paper); }
.product .thumb { aspect-ratio: 16 / 10; margin: -24px -24px 4px; border-bottom: 2px solid var(--ink); background: var(--paper); display: grid; place-items: center; overflow: hidden; }
.product .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product .thumb span { font-family: var(--display); font-weight: 800; font-size: 3rem; color: var(--blue); }
.product .tag { align-self: start; }
.product[hidden] { display: none; }

/* Hành trình: dòng thời gian */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 2px solid var(--ink); margin-left: 8px; }
.timeline li { position: relative; padding: 0 0 28px 28px; display: grid; gap: 4px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 0.45em; width: 16px; height: 16px; background: var(--surface); border: 2px solid var(--ink); transform: rotate(45deg); }
.timeline li.now::before { background: var(--red); }
.timeline time { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--blue); }
.timeline b { font-weight: 600; }
.timeline p { color: var(--muted); text-align: left; text-wrap: pretty; max-width: 60ch; }
.two-col { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .two-col { grid-template-columns: 5fr 6fr; gap: 56px; } }

/* Mentoring: câu hỏi thường gặp, nhận xét */
.faq { display: grid; gap: 14px; }
.faq details { padding: 0; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-weight: 800; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 22px 20px; border-top: 1.5px solid var(--ink); padding-top: 16px; }
.quotes { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.quote { padding: 24px; display: grid; gap: 14px; align-content: space-between; }
.quote blockquote { margin: 0; font-style: italic; font-size: 1.05rem; }
.quote blockquote::before { content: "“"; display: block; font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 0.6; color: var(--red); margin-bottom: 8px; }
.quote figcaption { font-weight: 600; font-size: 0.92rem; }

/* Bây giờ */
.now-list { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.now-item { padding: 24px; display: grid; gap: 10px; align-content: start; }
.now-item .label { color: var(--red); }
.now-item h3 { font-size: 1.4rem; }
.now-item p { color: var(--muted); text-align: left; text-wrap: pretty; }
.now-item a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.updated { margin-top: 28px; color: var(--muted); font-size: 0.92rem; text-align: left; }

/* Trang chủ kiểu "tuyên ngôn" (tham khảo danghong.me): mở đầu căn giữa, tiêu đề phần căn giữa */
.home-hero { padding-block: 72px 88px; text-align: center; }
@media (min-width: 900px) { .home-hero { padding-block: 112px 128px; } }
.home-hero .wrap { display: grid; justify-items: center; gap: 22px; }
.home-hero .label { color: var(--blue); }
.home-hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.75rem); line-height: 1.05; max-width: 16ch; }
.home-hero .lede { max-width: 48ch; font-size: clamp(1.1rem, 2vw, 1.3rem); font-style: italic; color: var(--muted); text-align: center; text-align-last: center; text-wrap: balance; }
.home-hero .actions { justify-content: center; margin-top: 6px; }
.center-head { display: grid; justify-items: center; text-align: center; gap: 12px; margin-bottom: 44px; }
.center-head .label { color: var(--red); }
.center-head h2 { font-size: clamp(2.1rem, 5vw, 3.1rem); }
.center-head p { max-width: 52ch; color: var(--muted); text-align: center; text-align-last: center; text-wrap: balance; }
.more { display: flex; justify-content: center; margin-top: 36px; }
.about { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: 5fr 7fr; gap: 64px; } }
.about-photo { width: min(100%, 420px); height: auto; aspect-ratio: 1; object-fit: cover; justify-self: center; border: 2px solid var(--ink); box-shadow: 8px 8px 0 0 var(--blue); background: var(--light); }
.about-copy { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.about-copy > .label { color: var(--red); }
.about-copy h2 { font-size: clamp(2.4rem, 5.4vw, 3.75rem); }
.pull { margin: 6px 0 0; padding: 22px 24px; width: 100%; display: grid; gap: 10px; }
.pull blockquote { margin: 0; }
.pull p { font-style: italic; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.6; text-wrap: pretty; }
.pull blockquote::before { content: "“"; display: block; font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 0.6; color: var(--red); margin-bottom: 6px; }
.pull figcaption { color: var(--red); }
.mini-stats { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--ink); background: var(--surface); }
.mini-stats li { display: grid; gap: 2px; padding: 14px 16px; align-content: start; }
.mini-stats li + li { border-left: 2px solid var(--ink); }
.mini-stats strong { font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1.1; color: var(--blue); }
.mini-stats span { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 480px) { .mini-stats { grid-template-columns: 1fr; } .mini-stats li + li { border-left: 0; border-top: 2px solid var(--ink); } .mini-stats li { grid-template-columns: 5.5rem 1fr; align-items: baseline; } }

/* Lưới cố định số cột để không có thẻ lẻ một mình ở hàng cuối */
.grid.g4 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid.g3 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Câu ngắn trong thẻ: căn trái, vì căn đều ở cột hẹp làm chữ giãn lỗ chỗ */
.card p { text-align: left; }

/* Quiz "Bạn đang vướng ở đâu?" */
.quiz { padding: 28px; display: grid; gap: 16px; max-width: 52rem; }
@media (min-width: 720px) { .quiz { padding: 36px; } }
.quiz > .label { color: var(--red); }
.quiz h3 { font-size: clamp(1.35rem, 3vw, 1.8rem); text-wrap: balance; }
.q-prog { height: 10px; background: var(--paper); border: 2px solid var(--ink); }
.q-prog i { display: block; height: 100%; background: var(--blue); transition: width .3s ease; }
.q-opts { display: grid; gap: 12px; }
@media (min-width: 720px) { .q-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.q-opt { text-wrap: balance; text-align: left; font: 500 1rem/1.5 var(--body); padding: 14px 18px; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
.q-opt:hover { background: var(--paper); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--ink); }
.q-opt:active { transform: translate(2px, 2px); box-shadow: none; }
.q-result { font-size: clamp(2rem, 5vw, 3rem) !important; color: var(--blue); }
.q-also { color: var(--muted); text-align: left; }
.q-again { font: 600 0.95rem var(--body); background: none; border: 0; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 8px 4px; }
.stuck .chip { transition: background .2s, color .2s; }

/* Đoán điểm */
.score-col { display: grid; gap: 24px; min-width: 0; }
.guess { padding: 24px; display: grid; gap: 14px; justify-items: start; }
.guess > .label { color: var(--red); }
.guess h3 { font-size: 1.3rem; text-wrap: balance; }
.g-row { display: flex; align-items: center; gap: 16px; width: 100%; }
.g-row input { flex: 1; accent-color: var(--blue); height: 28px; }
.g-row output { font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--blue); min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.g-res { text-align: left; padding: 12px 14px; background: var(--paper); border: 2px solid var(--ink); width: 100%; }
.g-res b { color: var(--red); }

/* Cây bút đỏ: trang vở để khoanh lỗi */
.redpen { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .redpen { grid-template-columns: 7fr 5fr; gap: 40px; } .rp-tabs { grid-column: 1 / -1; } }
.rp-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-tabs button { font: 700 1rem var(--display); padding: 6px 14px; border: 2px solid var(--ink); border-radius: 6px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; }
.rp-tabs button[aria-pressed="true"] { background: var(--red); color: #fff; }
.notebook {
  position: relative; border: 2px solid var(--ink); box-shadow: var(--shadow);
  background-color: var(--surface);
  background-image: linear-gradient(90deg, transparent 47px, var(--red) 47px, var(--red) 49px, transparent 49px), repeating-linear-gradient(transparent 0 43px, #d9dce6 43px 44px);
  background-position: 0 0, 0 18px;
  padding: 26px 20px 30px 66px;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 25l2-7L19 4l5 5L10 23z' fill='%23d1394a' stroke='%23111' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M3 25l2-7 5 5z' fill='%23111'/%3E%3C/svg%3E") 3 25, pointer;
}
.nb-head { display: grid; gap: 2px; margin-bottom: 10px; }
.nb-head .label { color: var(--blue); }
.nb-head h3 { font-size: clamp(1.35rem, 3vw, 1.75rem); }
.nb-items { margin: 0; padding: 0; list-style: none; }
.nb-items.lines li { min-height: 44px; display: flex; align-items: center; }
.nb-item { position: relative; font: italic 500 clamp(1.02rem, 2.2vw, 1.15rem)/1.4 var(--body); color: var(--ink); background: none; border: 0; padding: 6px 8px; margin-left: -8px; text-align: left; cursor: inherit; border-radius: 40% / 60%; }
.nb-item:hover { background: rgba(209, 57, 74, .07); }
.nb-item::before { content: ""; position: absolute; inset: -2px -6px; border: 2.5px solid var(--red); border-radius: 50%; transform: rotate(-2deg) scale(.6); opacity: 0; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s; pointer-events: none; }
.nb-item.circled::before { opacity: 1; transform: rotate(-2deg) scale(1); }
.nb-item.circled::after { content: attr(data-fix); display: block; margin-top: 8px; transform: rotate(-2deg); transform-origin: left; font: italic 700 0.95rem var(--body); color: var(--red); }
.nb-item.circled::before { inset: -2px -6px auto; height: calc(1.4em + 12px); }
@media (max-width: 640px) { .notebook { padding-left: 58px; background-image: linear-gradient(90deg, transparent 39px, var(--red) 39px, var(--red) 41px, transparent 41px), repeating-linear-gradient(transparent 0 43px, #d9dce6 43px 44px); } }
.nb-item.nope { animation: nope .4s ease; }
@keyframes nope { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .nb-item.nope { animation: none; } }
.rp-side { display: grid; gap: 18px; justify-items: start; }
.rp-tally { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 16px 20px; border: 2px solid var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); width: 100%; }
.rp-tally .label { color: var(--red); width: 100%; }
.rp-tally strong { font-family: var(--display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; }
.rp-tally span:last-child { color: var(--muted); }
.rp-msg { font-style: italic; color: var(--muted); text-align: left; }
.rp-stamp { font: 800 clamp(1.3rem, 3vw, 1.7rem) var(--display); color: var(--red); border: 3px solid var(--red); padding: 6px 16px; transform: rotate(-4deg); animation: stamp .4s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes stamp { from { transform: rotate(-4deg) scale(1.8); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rp-stamp { animation: none; } }
.rp-story { display: grid; gap: 6px; border-left: 3px solid var(--red); padding-left: 16px; }
.rp-story .label { color: var(--muted); margin-top: 6px; }
.rp-story p { text-wrap: pretty; }
.nb-foot { margin-top: 14px; font-size: 0.9rem; font-weight: 600; color: var(--red); text-align: left; }
@media (min-width: 960px) { .nb-foot { display: none; } }

/* Bản cắt gọn: link viết trong Hành trình, hàng đồng nghiệp */
.j-links { margin-top: 28px; color: var(--on-dark-muted); text-align: left; }
.j-links a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.people-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--ink); text-align: left; }
.people-row .label { color: var(--red); margin-right: 4px; }
.people-row a { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.people-row a:hover { color: var(--blue); }
.steps li { align-content: start; }
.product .p-body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.grid.solo { grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .grid.solo .product { display: grid; grid-template-columns: 3fr 2fr; gap: 0; padding: 0; }
  .grid.solo .product .thumb { margin: 0; aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 2px solid var(--ink); }
  .grid.solo .product .p-body { padding: 32px; justify-content: center; }
  .grid.solo .product h3 { font-size: 2rem; }
}
.product .thumb img { object-position: top left; }
/* Cây bút đỏ, dạng câu: khoanh từng chữ */
.nb-items.words { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 2px; margin-top: 6px; }
.nb-items.words .nb-item { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-left: 0; padding: 4px 6px; }
.nb-head .demo { justify-self: start; margin-top: 6px; }

/* 02/11/2026: Đoán điểm đứng riêng, ngay sau hero: bên trái hỏi, bên phải đáp án */
#ielts .guess { padding: 0; gap: 0; justify-items: stretch; }
@media (min-width: 860px) { #ielts .guess { grid-template-columns: 1fr 1fr; } }
.g-ask { display: grid; gap: 14px; justify-items: start; padding: 28px; }
.g-ask > .label { color: var(--red); }
.g-ans { display: grid; gap: 12px; align-content: center; padding: 28px; background: var(--paper); border-top: 2px solid var(--ink); }
@media (min-width: 860px) { .g-ans { border-top: 0; border-left: 2px solid var(--ink); } }
.g-ans .g-q { justify-self: center; font: 800 6rem/1 var(--display); color: var(--blue); opacity: .25; }
.g-ans > .label { color: var(--red); }
.g-verdict { font: 800 clamp(1.5rem, 3vw, 1.9rem)/1.2 var(--display); }
.g-ans .skills { margin: 0; background: var(--surface); }
.g-ans .skills .mine .bar > span { background: var(--red); }
.g-ans .skills .mine { color: var(--red); }
.g-ans p { text-align: left; text-wrap: pretty; }
.g-ans.open .skills .bar > span { animation: grow .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes grow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .g-ans.open .skills .bar > span { animation: none; } }

/* Thẻ NEMO có ảnh: ảnh giới thiệu 1200×630 */
.nemo .product .thumb { aspect-ratio: 40 / 21; }
.nemo .product .thumb img { object-position: center; }

/* Cây bút đỏ: trang "Coming soon" và khung bài học chung */
.nb-soon { font: italic 700 clamp(1.4rem, 3vw, 1.8rem)/44px var(--display); color: var(--muted); min-height: 176px; }
.pen-lesson { margin-top: 40px; padding: 28px; display: grid; gap: 16px; background: var(--paper); }
.pen-lesson > .label { color: var(--red); }
.pen-lesson h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); text-wrap: balance; }
.pen-rows { list-style: none; margin: 0; padding: 0; display: grid; border: 2px solid var(--ink); background: var(--surface); }
.pen-rows li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; align-items: baseline; padding: 12px 16px; text-align: left; }
.pen-rows li + li { border-top: 1.5px solid var(--ink); }
.pen-rows b { font-family: var(--display); color: var(--blue); }
.pen-lock { font: italic 0.95rem var(--body); color: var(--muted); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline dashed; text-underline-offset: 4px; }
span.pen-lock { cursor: default; text-decoration: none; }
.pen-end { font-style: italic; font-size: clamp(1.05rem, 2vw, 1.2rem); text-wrap: pretty; }
@media (max-width: 480px) { .pen-rows li { grid-template-columns: 1fr; gap: 2px; } }
.j-fact p { text-align: left; text-wrap: pretty; }
.pen-end { text-align: left; text-wrap: balance; }

/* 02/11/2026: thẻ IELTS ở hero: Overall trước, đoán Speaking, rồi mới hiện đủ điểm + PDF */
.s-guess { margin-top: 20px; padding: 18px; background: var(--paper); border: 2px solid var(--ink); display: grid; gap: 12px; justify-items: start; }
.s-guess > .label { color: var(--red); }
.s-guess h3 { font-size: 1.2rem; text-wrap: balance; }
.s-full { margin-top: 20px; }
.s-full[hidden], .s-guess[hidden] { display: none; }
.s-full .skills { margin-top: 12px; }
.s-full .g-res { text-wrap: pretty; }
.skills .mine { color: var(--red); }
.skills .mine .bar > span { background: var(--red); }
.s-full:not([hidden]) .skills .bar > span { animation: grow .6s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .s-full .skills .bar > span { animation: none; } }

/* 02/11/2026: ẩn mọi ô TBU (danh sách thông tin cần bổ sung ở CAN-BO-SUNG.md). Muốn hiện lại thì xoá dòng này. */
.tbu { display: none !important; }

/* Dòng "Dạo này tôi đang…" trên hero */
.now-line { margin-bottom: 20px; padding: 10px 16px; border: 2px solid var(--ink); background: var(--paper); text-align: left; text-wrap: pretty; }
.now-line .label { color: var(--red); margin-right: 6px; }
.now-line a { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Đoán điểm: hàng Speaking 2020 */
.skills .was { color: var(--muted); }
.skills .was .bar > span { background: var(--muted); }
.skills .was[hidden] { display: none; }

/* Chia đôi Học sinh / Phụ huynh */
.who { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); box-shadow: var(--shadow-sm); margin-bottom: 28px; }
.who button { font: 700 clamp(1rem, 2.4vw, 1.3rem) var(--display); padding: 14px 10px; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; }
.who button + button { border-left: 2px solid var(--ink); }
.who button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.who-panel { display: grid; gap: 18px; }
.who-panel[hidden] { display: none; }
.who-panel > h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.faq { display: grid; gap: 14px; }
.faq details { padding: 0; }
.faq summary { cursor: pointer; padding: 16px 20px; font: 700 1.1rem var(--display); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > p, .faq details > ul, .faq details > .btn { margin: 0 20px 18px; }
.faq details > .btn { display: inline-block; }
.faq p { text-align: left; text-wrap: pretty; }
.faq ul { padding-left: 0; list-style: none; display: grid; gap: 10px; }
.faq li { text-align: left; text-wrap: pretty; }
.faq li a { font-weight: 700; color: var(--blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }