/* Dedy · bản 3 "Giấy mềm".
   Nền sáng, ô bo tròn mềm, nút đen, đúng 1 dải nhấn xanh lá. Tiêu đề serif, nhãn nhỏ dạng mono.
   Gần như không dùng bóng đổ: phân lớp bằng 3 sắc xám (nền, ô, rãnh) và mặt trắng.
   Nạp SAU pages.css. Mặc định sáng; công tắc sáng/tối nằm ở chân trang. */

/* ───────── Token ───────── */
:root {
  --font-display: "Newsreader", "Times New Roman", serif;
  --font-serif: "Newsreader", Georgia, serif;
  --go: #2ccb5c; --go-2: #b9f03f; --grad-go: linear-gradient(90deg, var(--go), var(--go-2)); --on-go: #08240f;
  --ink: #121214; --bone: #f1f1ee;
  --r-tile: clamp(1.375rem, 2.1vw, 1.875rem); --r-2xl: var(--r-tile); --r-3xl: clamp(1.5rem, 2.6vw, 2.25rem); --r-in: 1rem;
  --fs-display: clamp(2.875rem, 1.2rem + 5.2vw, 6.25rem);
  --fs-h1: clamp(2.25rem, 1.3rem + 3vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem);

  --bg: #f6f6f3; --bg-soft: #ededea; --tile: #ededea; --track: #e1e1dd; --surface: #ffffff; --surface-2: #fafaf8;
  --surface-inverse: var(--ink); --text-inverse: var(--bone);
  --text: #121214; --text-2: #5b5b60; --text-3: #85858a; --line: rgba(18, 18, 20, .08); --line-strong: rgba(18, 18, 20, .17);
  --accent: #121214; --accent-hover: #000; --accent-soft: rgba(18, 18, 20, .06); --on-accent: #ffffff; --focus: #121214;
  --success: #17803a; --success-soft: #dff5e3;
  --glass: rgba(255, 255, 255, .88); --scrim: rgba(18, 18, 20, .28);
  --shadow-1: 0 1px 2px rgba(18, 18, 20, .05);
  --shadow-2: 0 1px 2px rgba(18, 18, 20, .04), 0 8px 20px -12px rgba(18, 18, 20, .1);
  --shadow-3: 0 2px 6px rgba(18, 18, 20, .04), 0 22px 44px -24px rgba(18, 18, 20, .16);
  --paper: #ffffff; --paper-warm: #ffffff; --paper-ink: #121214; --paper-ink-2: #5b5b60; --paper-line: rgba(18, 18, 20, .12);
  /* Khoá học không có màu riêng: phân biệt bằng nhân vật 3D và số thứ tự */
  --grad-dive: var(--grad-go); --grad-assistant: var(--grad-go);
  --tone-dive: var(--success); --tone-assistant: var(--success); --soft-dive: var(--success-soft); --soft-assistant: var(--success-soft);
  --ink-dive: var(--text); --ink-assistant: var(--text); --glow-dive: transparent; --glow-assistant: transparent;
  --pattern-dive: none; --pattern-assistant: none;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f11; --bg-soft: #18181b; --tile: #18181b; --track: #2a2a2f; --surface: #202024; --surface-2: #26262b;
  --surface-inverse: var(--bone); --text-inverse: var(--ink);
  --text: #f1f1ee; --text-2: #a6a6ab; --text-3: #78787e; --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .18);
  --accent: #f1f1ee; --accent-hover: #ffffff; --accent-soft: rgba(255, 255, 255, .08); --on-accent: #121214; --focus: #f1f1ee;
  --success: #6fe08a; --success-soft: rgba(72, 214, 110, .14);
  --glass: rgba(24, 24, 27, .86); --scrim: rgba(0, 0, 0, .55);
  --shadow-1: inset 0 0 0 1px rgba(255, 255, 255, .06);
  --shadow-2: inset 0 0 0 1px rgba(255, 255, 255, .08);
  --shadow-3: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 44px -24px rgba(0, 0, 0, .7);
}

/* ───────── Chữ ───────── */
.display, .h1, .h2, .h3, .brand, .hero3__title, .ccover__title, .btile h3, .plan2__name, .trial strong, .pass__title, .cert__course, .cert__brand, .reader__title, .mini__title { font-family: var(--font-display); font-variation-settings: normal; }
.display { font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.h1 { font-weight: 400; line-height: 1.06; letter-spacing: -.026em; }
.h2 { font-weight: 400; line-height: 1.12; letter-spacing: -.02em; }
.h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -.012em; }
.display em, .h1 em, .h2 em { font-style: italic; font-weight: 300; }
.eyebrow, .tile__label, .mono-label { font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.eyebrow { display: inline-flex; align-items: center; gap: .625rem; }
.eyebrow::before { content: ""; width: .5rem; aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--grad-go); }
::selection { background: var(--go-2); color: var(--on-go); }
.link { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1.5px; text-underline-offset: .34em; transition: text-decoration-color var(--dur-2); }
.link:hover { color: var(--text); text-decoration-color: var(--go); }
.link--quiet { text-decoration: none; color: var(--text-2); }
.bar { background: var(--track); } .bar::before { background: var(--grad-go); }
.ring { --ring-track: var(--track); } .ring--course { --ring-fill: var(--go); --ring-track: var(--track); }
.brand { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.brand__mark { width: 1.125rem; background: conic-gradient(from 200deg, var(--go), var(--go-2), var(--go)); }
@keyframes failsafe { to { opacity: 1; } }
@keyframes bob { 50% { translate: 0 -3%; } }
@keyframes marq { to { transform: translateX(-50%); } }
@keyframes pop { 0% { transform: scale(.55); } 60% { transform: scale(1.14); } }

/* ───────── Nút, nhãn, công tắc, ô nhập ───────── */
.btn { font-weight: 600; letter-spacing: -.005em; }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); }
.btn--primary::before { content: none; }
.btn--primary:hover { --btn-bg: var(--accent-hover); }
.btn--go { position: relative; isolation: isolate; --btn-bg: var(--go); --btn-fg: var(--on-go); background-image: var(--grad-go); }
.btn--soft { --btn-bg: var(--track); } .btn--soft:hover { --btn-bg: color-mix(in srgb, var(--text) 14%, var(--bg)); }
.btn--ghost { --btn-bd: var(--line-strong); } .btn--ghost:hover { --btn-bg: var(--accent-soft); }
.btn--xl { --btn-h: 3.75rem; --btn-px: 1.75rem; font-size: 1.0625rem; }
.btn__arr { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-right: -.75rem; border-radius: 50%; background: var(--grad-go); color: var(--on-go); transition: transform var(--dur-3) var(--ease-soft); }
.btn--xl .btn__arr { width: 2.625rem; height: 2.625rem; margin-right: -1.125rem; }
.btn:hover .btn__arr { transform: rotate(-45deg); }
.btn.is-done { --btn-bg: var(--go); --btn-fg: var(--on-go); background-image: var(--grad-go); }
[data-magnet] { transition: translate var(--dur-3) var(--ease-out), transform var(--dur-1) var(--ease-out), background-color var(--dur-2); }
.chip { background: var(--track); font-weight: 500; }
.chip--success, .chip--course { background: var(--success-soft); color: var(--success); }
.chip--line { background: transparent; }
.icon-btn:hover { background: var(--accent-soft); }
.icon-btn--line { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.icon-btn--chip { width: 2rem; height: 2rem; background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); }
.icon-btn--chip::after { content: ""; position: absolute; inset: -.375rem; }
.icon-btn--chip:hover { background: var(--surface); color: var(--success); }
.seg { background: var(--track); box-shadow: none; }
.seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; }
.seg__thumb { box-shadow: var(--shadow-1); transition: transform var(--dur-4) var(--ease-soft); }
.seg--sm .seg__btn { height: 1.625rem; min-width: 2.25rem; padding: 0 .5rem; font-size: .6875rem; }
.seg--icon { display: grid; width: 100%; } .seg--icon .seg__btn { min-width: 0; padding: 0; height: 2.125rem; }
.seg--icon .seg__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.card { border-radius: var(--r-tile); box-shadow: inset 0 0 0 1px var(--line); }
.card--raised { box-shadow: inset 0 0 0 1px var(--line); }
.input { border-radius: .875rem; border-color: var(--line-strong); }
.input:focus-visible { border-color: var(--text); box-shadow: 0 0 0 4px var(--accent-soft); }
.toast { box-shadow: none; }
.dialog { border-radius: var(--r-tile); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-3); }
.acc { border: 0; display: grid; gap: .5rem; }
.acc__item { border: 0; padding-inline: clamp(1rem, 2vw, 1.375rem); border-radius: var(--r-in); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.acc__sum { min-height: 3.75rem; font-weight: 500; }
.acc__sum:hover { color: var(--text); } .acc__sum:hover .acc__chev { color: var(--success); }
.acc__panel { padding-bottom: 1.25rem; }

/* ───────── Thanh điều hướng: viên thuốc nổi, viền mảnh, không bóng ───────── */
.nav { height: auto; padding-top: .75rem; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; pointer-events: none; }
.nav__in { pointer-events: auto; height: 3.5rem; padding-inline: 1.25rem .5rem; border-radius: var(--r-pill); background: var(--glass); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); box-shadow: inset 0 0 0 1px var(--line); }
.nav-sheet { inset: 0; padding-top: 5.5rem; }
.nav-sheet a.nav-sheet__link { font: 400 1.75rem/1.2 var(--font-display); letter-spacing: -.02em; }
.nav-sheet__tools { flex-wrap: wrap; gap: .75rem; }
html { scroll-padding-top: 5.5rem; }

/* ───────── MÀN HÌNH ĐẦU: chữ bên trái, bàn học bên phải ───────── */
.hero3 { padding-block: clamp(1.75rem, 4.4vw, 4rem) clamp(1.75rem, 3.4vw, 3rem); }
.hero3__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4.4vw, 4.5rem); align-items: center; }
.hero3__text { display: grid; gap: clamp(1rem, 1.7vw, 1.5rem); justify-items: start; }
.js .hero3__text, .js .board { opacity: 0; animation: failsafe 1ms 2.6s forwards; }
.js .hero3.is-ready .hero3__text, .js .hero3.is-ready .board { opacity: 1; animation: none; }
.hero3__tag { display: inline-flex; align-items: center; gap: .5rem; min-height: 2rem; padding: 0 .875rem 0 .75rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.hero3__tag i { width: .5rem; aspect-ratio: 1; border-radius: 50%; background: var(--grad-go); }
.hero3__title { font: 400 var(--fs-display)/1 var(--font-display); letter-spacing: -.032em; }
.hero3__title .l { display: block; overflow: hidden; padding-block: .14em .17em; margin-block: -.14em -.17em; }
.hero3__title .l > span { display: inline-block; }
.hero3__title em { font-style: italic; font-weight: 300; padding-right: .06em; }
.hero3__lead { max-width: 30rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.hero3__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .25rem; }
.hero3__notes { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; font-size: var(--fs-sm); color: var(--text-2); }
.hero3__notes li { display: inline-flex; align-items: center; gap: .5rem; }
.hero3__notes li::before { content: ""; width: .3125rem; aspect-ratio: 1; border-radius: 50%; background: var(--go); }

.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1rem; border-radius: var(--r-tile); background: var(--tile); color: var(--text); }
.tile--ink { background: var(--surface-inverse); color: var(--text-inverse); }
.tile__label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tile__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 1.875rem; padding-left: .25rem; }
.tile__foot { display: flex; align-items: center; gap: .625rem; font-size: .75rem; font-weight: 500; color: var(--text-2); }
.tile__cap { font-size: .75rem; color: color-mix(in srgb, currentColor 64%, transparent); }
.tile--lesson { grid-column: span 2; grid-row: span 2; gap: .75rem; }
.mini { flex: 1; min-height: 12.5rem; display: grid; border-radius: var(--r-in); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; container-type: inline-size; }
.mini__in { display: flex; flex-direction: column; gap: .5rem; padding: clamp(1rem, 6.4cqw, 1.75rem); min-width: 0; }
.mini__in.is-swap { animation: mini-in .44s var(--ease-out) both; }
@keyframes mini-in { from { opacity: 0; transform: translateY(.5rem); filter: blur(3px); } }
.mini__kicker { font: 500 .625rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mini__title { font-size: clamp(1.375rem, 7.6cqw, 2.125rem); font-weight: 400; line-height: 1.1; letter-spacing: -.022em; text-wrap: balance; }
.mini__list { display: grid; gap: .625rem; margin-top: .625rem; font-size: .875rem; line-height: 1.42; color: var(--text-2); }
.mini__list li { display: grid; grid-template-columns: .75rem 1fr; gap: .375rem; }
.mini__list li::before { content: ""; width: .3125rem; aspect-ratio: 1; margin-top: .52em; border-radius: 50%; background: var(--go); }
.mini__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .375rem; }
.mini__cols div { display: grid; align-content: start; gap: .25rem; padding: .625rem; border-radius: .75rem; background: var(--bg-soft); font-size: .6875rem; line-height: 1.38; color: var(--text-2); }
.mini__cols strong { font-size: .75rem; font-weight: 600; color: var(--text); }
.mini__code { margin-top: .375rem; padding: .75rem .875rem; border-radius: .75rem; background: var(--ink); color: #dcdcd6; font: 400 .625rem/1.65 var(--font-mono); overflow: hidden; -webkit-mask: linear-gradient(90deg, #000 84%, transparent); mask: linear-gradient(90deg, #000 84%, transparent); }
.mini__code i { font-style: normal; } .mini__code .k { color: #8fe28a; } .mini__code .s { color: #d6f58a; }
.meter { position: relative; flex: 1; height: .375rem; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.meter::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: inherit; background: var(--grad-go); transition: width .6s var(--ease-out); }

.tile--dial { align-items: center; justify-content: center; gap: .5rem; aspect-ratio: 1; text-align: center; }
.dial { position: relative; width: min(64%, 7.5rem); aspect-ratio: 1; display: grid; place-items: center; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dial circle { fill: none; stroke-width: 9; }
.dial__track { stroke: color-mix(in srgb, currentColor 16%, transparent); }
.dial__fill { stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v)); transition: stroke-dashoffset 1s var(--ease-out); }
.dial__n { font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dial__n b { font-weight: 600; }

.tile--toy { justify-content: flex-end; gap: .125rem; aspect-ratio: 1; overflow: hidden; }
.tile__toy { position: absolute; top: -2%; right: -9%; width: 80%; height: auto; rotate: -8deg; translate: calc(var(--tx, 0) * -10px) calc(var(--ty, 0) * -10px); transition: translate var(--dur-3) var(--ease-out), rotate var(--dur-5) var(--ease-soft), scale var(--dur-5) var(--ease-soft); animation: bob 7s ease-in-out infinite; pointer-events: none; }
.tile--toy:hover .tile__toy { rotate: 0deg; scale: 1.06; }
.tile--toy strong { position: relative; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.tile--toy .tile__label { position: relative; justify-content: flex-start; }
.tile__go { position: absolute; right: .75rem; bottom: .75rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-inverse); color: var(--text-inverse); transition: transform var(--dur-3) var(--ease-soft), background-color var(--dur-2), color var(--dur-2); }
.tile--toy:hover .tile__go { background: var(--go); color: var(--on-go); transform: rotate(45deg); }

.ticks { display: grid; gap: .125rem; margin-top: .625rem; }
.tick { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); align-items: center; gap: .5rem; width: 100%; min-height: 1.875rem; text-align: left; font-size: .75rem; font-weight: 500; color: var(--text-2); transition: color var(--dur-2); }
.tick i { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: .375rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: transparent; transition: background-color var(--dur-2), color var(--dur-2); }
.tick .ic { width: .75rem; height: .75rem; stroke-width: 3; }
.tick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tick[aria-pressed="true"] { color: var(--text); }
.tick[aria-pressed="true"] i { background: var(--go); box-shadow: none; color: var(--on-go); animation: pop .36s var(--ease-soft); }

.tile--code { gap: .5rem; }
.codepill { padding: .5rem .625rem; border-radius: .625rem; background: var(--surface); box-shadow: var(--shadow-1); font-size: .6875rem; letter-spacing: .02em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.morph { position: relative; isolation: isolate; margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 2.25rem; padding: 0 .875rem; border-radius: var(--r-pill); background: var(--surface-inverse); color: var(--text-inverse); font-size: .75rem; font-weight: 600; overflow: hidden; transition: color var(--dur-3), transform var(--dur-1) var(--ease-out); }
.morph:active { transform: scale(.97); }
.morph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-go); opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
.morph__ic { display: grid; place-items: center; width: 0; height: .875rem; overflow: hidden; transition: width var(--dur-3) var(--ease-out); }
.morph__ic .ic { width: .875rem; height: .875rem; stroke-width: 2.6; }
.morph[data-state="busy"] .morph__ic { width: .875rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.morph[data-state="busy"] .ic { display: none; }
.morph[data-state="ok"] { color: var(--on-go); } .morph[data-state="ok"]::before { opacity: 1; } .morph[data-state="ok"] .morph__ic { width: .875rem; }

.tile--mode { gap: .125rem; }
.tile__val { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.tile--mode > span { margin-top: auto; padding-top: .75rem; }
@media (max-width: 60rem) { .hero3__grid { grid-template-columns: minmax(0, 1fr); } .board { max-width: 40rem; } }
@media (max-width: 34rem) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--lesson { grid-row: auto; }
  .tile--mode { grid-column: span 2; flex-direction: row; align-items: center; gap: .75rem; }
  .tile--mode > span { margin: 0 0 0 auto; padding: 0; width: 7rem; }
}

/* Dải chữ chạy: mảnh, xám, chỉ để tạo nhịp */
.marq-wrap { margin-top: clamp(.5rem, 1.6vw, 1.5rem); overflow: hidden; }
.marq { padding: .875rem 0; border-block: 1px solid var(--line); color: var(--text-3); white-space: nowrap; }
.marq__track { display: inline-flex; animation: marq 70s linear infinite; }
.marq:hover .marq__track { animation-play-state: paused; }
.marq__track span { display: inline-flex; align-items: center; font: italic 300 clamp(1.125rem, 1.6vw, 1.5rem)/1.2 var(--font-display); }
.marq__track span::after { content: ""; width: .3125rem; aspect-ratio: 1; margin-inline: clamp(1.25rem, 2.2vw, 2.25rem); border-radius: 50%; background: var(--line-strong); }

/* ───────── Đầu mục ───────── */
.shead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--sp-4) var(--sp-12); align-items: end; margin-bottom: clamp(1.75rem, 3.6vw, 3.25rem); }
.shead .eyebrow { grid-column: 1 / -1; }
.shead .lead { padding-bottom: .375rem; font-size: var(--fs-body); }
@media (max-width: 56rem) { .shead { grid-template-columns: minmax(0, 1fr); } }

/* ───────── BÌA KHOÁ HỌC: ô xám mềm, nhân vật 3D, nút tròn khuyết góc ───────── */
.covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ccover { --bite: 4.75rem; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(27rem, 37vw, 33rem); padding: clamp(1.25rem, 2.4vw, 2.25rem); border-radius: var(--r-3xl); background: var(--tile); color: var(--text); overflow: hidden; }
.ccover__toy { position: absolute; z-index: -1; top: 1%; right: 1%; width: min(43%, 17.5rem); height: auto; rotate: -6deg; transition: rotate var(--dur-5) var(--ease-soft), scale var(--dur-5) var(--ease-soft); animation: bob 7s ease-in-out infinite; }
.ccover:nth-child(even) .ccover__toy { rotate: 5deg; animation-delay: -2.4s; }
@media (hover: hover) { .ccover:hover .ccover__toy { rotate: 1deg; scale: 1.06; } }
.ccover__tags { position: absolute; top: clamp(1.25rem, 2.4vw, 2.25rem); left: clamp(1.25rem, 2.4vw, 2.25rem); display: flex; gap: .375rem; }
.ccover .chip { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); font: 500 .6875rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ccover__title { max-width: 9em; font-size: clamp(2.125rem, 1rem + 2.8vw, 3.5rem); font-weight: 400; line-height: 1.04; letter-spacing: -.026em; text-wrap: balance; }
.ccover__desc { max-width: 29rem; margin-top: var(--sp-3); color: var(--text-2); }
.ccover__facts { display: flex; flex-wrap: wrap; gap: .25rem 0; margin-top: var(--sp-5); font: 500 .6875rem/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.ccover__facts span + span::before { content: "·"; margin-inline: .75rem; opacity: .6; }
.ccover__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.5rem; margin-top: var(--sp-5); padding-right: calc(var(--bite) + .25rem); }
.ccover__price { margin-left: auto; font-size: 1.375rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ccover__price small { display: block; margin-bottom: .375rem; font: 500 .625rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.ccover__go { position: absolute; right: 0; bottom: 0; width: var(--bite); height: var(--bite); display: grid; place-items: end; background: var(--bg); border-top-left-radius: 1.5rem; }
.ccover__go::before, .ccover__go::after { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; background: radial-gradient(circle at 0 0, transparent 1.25rem, var(--bg) calc(1.25rem + .5px)); }
.ccover__go::before { right: 0; top: -1.25rem; } .ccover__go::after { left: -1.25rem; bottom: 0; }
.ccover__go i { display: grid; place-items: center; width: calc(var(--bite) - .625rem); aspect-ratio: 1; border-radius: 50%; background: var(--surface-inverse); color: var(--text-inverse); font-style: normal; transition: transform var(--dur-3) var(--ease-soft), background-color var(--dur-2), color var(--dur-2); }
.ccover__go:hover i { transform: rotate(45deg); background: var(--go); color: var(--on-go); }
.ccover__go .ic { width: 1.375rem; height: 1.375rem; stroke-width: 1.8; }
@media (max-width: 56rem) { .covers { grid-template-columns: minmax(0, 1fr); } .ccover { min-height: 26rem; } }

/* ───────── BENTO ───────── */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .75rem; }
.btile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 12.5rem; padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--r-tile); overflow: hidden; background: var(--tile); color: var(--text); box-shadow: none; }
.btile--demo { grid-column: span 7; grid-row: span 3; justify-content: flex-start; padding: clamp(.75rem, 1.2vw, 1rem); }
.btile--side { grid-column: span 5; }
.btile h3 { max-width: 9em; font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; }
.btile > p { max-width: 16rem; margin-top: .5rem; font-size: var(--fs-sm); color: var(--text-2); }
.btile__toy { position: absolute; z-index: -1; right: 1%; top: 50%; width: clamp(8rem, 13vw, 11rem); height: auto; translate: 0 -50%; rotate: 8deg; transition: rotate var(--dur-5) var(--ease-soft), scale var(--dur-5) var(--ease-soft); }
@media (hover: hover) { .btile:hover .btile__toy { rotate: -6deg; scale: 1.06; } }
.window { border-radius: calc(var(--r-tile) - .5rem); box-shadow: var(--shadow-1); }
.window__bar { font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.btile--demo .window { display: flex; flex-direction: column; height: 100%; }
.btile--demo .slide { flex: 1; display: grid; }
.btile--demo .slide__in { min-height: 0; }
@media (max-width: 60rem) { .btile--demo, .btile--side { grid-column: 1 / -1; grid-row: auto; } }

/* ───────── SLIDE (trang chủ và trang học): giấy trắng, tiêu đề serif, nhãn mono ───────── */
.slide { background: var(--surface); }
.slide::before { content: none; }
.slide__in { padding: 6cqw 8cqw; gap: 2.4cqw; }
.slide__kicker { font: 500 max(.625rem, 1.25cqw)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.slide__title { font-family: var(--font-display); font-size: max(1.25rem, 5cqw); font-weight: 400; line-height: 1.08; letter-spacing: -.024em; }
.slide__in--cover { justify-content: flex-end; }
.slide__in--cover .slide__title { font-size: max(1.5rem, 7.2cqw); line-height: 1.04; letter-spacing: -.03em; }
.slide__list li::before { background: var(--go); }
.slide__col { border-radius: max(.625rem, 2cqw); background: var(--bg-soft); box-shadow: none; }
.slide__code { background: var(--ink); color: #dcdcd6; } .slide__code .k { color: #8fe28a; } .slide__code .s { color: #d6f58a; }
.slide__outline li.is-current { background: var(--bg-soft); } .slide__outline li.is-current span { color: var(--success); }

/* ───────── HÀNH TRÌNH: sân khấu là một ô xám lớn ───────── */
.journey { position: relative; margin: 0; border-radius: 0; background: none; color: var(--text); box-shadow: none; }
.journey__pin { position: relative; }
.journey__pin::before { content: ""; position: absolute; inset: .75rem; z-index: 0; border-radius: var(--r-3xl); background: var(--tile); pointer-events: none; }
.journey__grid { position: relative; z-index: 1; }
.journey .eyebrow, .journey .jstep p { color: var(--text-2); }
.journey .jstep__no { color: var(--success); font-family: var(--font-mono); }
.jdots i { background: var(--track); } .jdots i.is-on { background: var(--go); }
.journey .jbadge { background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); } .journey .jbadge .ic { color: var(--success); }

/* ───────── XÁC MINH ───────── */
.verify2 { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--sp-8); align-items: center; padding: clamp(1.5rem, 4.6vw, 4.5rem); border-radius: var(--r-3xl); background: var(--tile); overflow: hidden; }
.verify2 .lead { margin-top: var(--sp-4); }
.verify2 .verify__form { margin-top: var(--sp-8); max-width: 34rem; }
.verify2 .input { height: 3.25rem; padding-inline: 1.25rem; border-radius: var(--r-pill); border-color: transparent; background: var(--surface); box-shadow: var(--shadow-1); }
.verify2 .input:focus-visible { border-color: var(--text); }
.verify2 .verify__sample { color: var(--text); text-decoration: underline; text-decoration-color: var(--go); text-underline-offset: .3em; }
.verify2 .vcard { background: var(--surface); box-shadow: var(--shadow-1); border-radius: var(--r-in); }
.verify2 .vcard__ic { background: var(--go); color: var(--on-go); } .verify2 .vcard--bad .vcard__ic { background: var(--danger); color: #fff; }
.verify2__toy { width: min(100%, 20rem); height: auto; justify-self: center; rotate: 8deg; animation: bob 7s ease-in-out infinite; }
@media (max-width: 56rem) { .verify2 { grid-template-columns: minmax(0, 1fr); } .verify2__toy { width: 9rem; order: -1; justify-self: start; } }

/* ───────── GIÁ ───────── */
.plans2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: stretch; }
.plan2 { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--r-tile); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.plan2--hot { background: var(--surface-inverse); color: var(--text-inverse); box-shadow: none; }
.plan2__tag { position: absolute; top: 1.25rem; right: 1.25rem; padding: .375rem .75rem; border-radius: var(--r-pill); background: var(--grad-go); color: var(--on-go); font: 500 .625rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.plan2__name { font-size: 1.75rem; font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
.plan2__for { margin-top: .375rem; max-width: 15rem; font-size: var(--fs-sm); color: var(--text-2); }
.plan2--hot .plan2__for, .plan2--hot .plan2__price small { color: color-mix(in srgb, currentColor 66%, transparent); }
.plan2__price { margin-top: var(--sp-6); font-size: clamp(2.125rem, 1.4rem + 1.6vw, 2.875rem); font-weight: 600; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.plan2__price small { margin-left: .25rem; font-size: .8125rem; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.plan2__list { margin: var(--sp-6) 0 var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line); display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.plan2--hot .plan2__list { border-color: color-mix(in srgb, currentColor 16%, transparent); }
.plan2__list li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .625rem; } .plan2__list .ic { margin-top: .12em; color: var(--success); } .plan2--hot .plan2__list .ic { color: var(--go); }
.plan2 .btn { margin-top: auto; }
.trial { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: .75rem; padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--r-tile); background: var(--tile); }
.trial strong { font-size: clamp(1.375rem, 1rem + 1.1vw, 1.875rem); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; }
.trial p { margin-top: .25rem; font-size: var(--fs-sm); color: var(--text-2); }
@media (max-width: 60rem) { .plans2 { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; } }

/* ───────── HỎI ĐÁP ───────── */
.faq2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-8) clamp(2rem, 6vw, 6rem); align-items: start; }
.faq2__head { position: sticky; top: 6.5rem; }
.faq2 .acc { padding: .75rem; border-radius: var(--r-tile); background: var(--tile); }
.faq2 .acc__item { box-shadow: var(--shadow-1); }
@media (max-width: 56rem) { .faq2 { grid-template-columns: minmax(0, 1fr); } .faq2__head { position: static; } }

/* ───────── LỜI MỜI CUỐI: ô đen duy nhất của trang ───────── */
.cta2 { position: relative; isolation: isolate; display: grid; gap: var(--sp-5); justify-items: start; width: min(100% - 1.5rem, 86rem); margin-inline: auto; padding: clamp(2.5rem, 7vw, 6.5rem) clamp(1.5rem, 5vw, 5rem); border-radius: var(--r-3xl); background: var(--surface-inverse); color: var(--text-inverse); overflow: hidden; }
.cta2 .display { max-width: 7.5em; }
.cta2 .lead { max-width: 27rem; color: color-mix(in srgb, currentColor 66%, transparent); }
.cta2 .btn--primary { --btn-bg: var(--text-inverse); --btn-fg: var(--surface-inverse); } .cta2 .btn--primary:hover { --btn-bg: var(--text-inverse); }
.cta2__toy { position: absolute; z-index: -1; right: 3%; top: 50%; width: clamp(13rem, 30vw, 27rem); height: auto; translate: 0 -50%; animation: spin 60s linear infinite; }
@media (max-width: 47.99rem) { .cta2__toy { right: -22%; top: 82%; } .cta2 { padding-bottom: 12rem; } }

/* ───────── Chân trang ───────── */
.footer { margin: clamp(2.5rem, 6vw, 5rem) 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text-2); overflow: hidden; box-shadow: none; }
.footer .brand { color: var(--text); }
.footer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.footer__pref { display: inline-flex; align-items: center; gap: .75rem; font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.footer__pref .seg__btn { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.footer__word { margin: clamp(1rem, 3vw, 2.5rem) 0 -.11em; font: 400 clamp(6rem, 25vw, 23rem)/.82 var(--font-display); letter-spacing: -.05em; text-align: center; color: color-mix(in srgb, var(--text) 7%, transparent); user-select: none; }
.footer__note { position: relative; margin-top: 0; padding-block: var(--sp-5); border-color: var(--line); background: var(--bg); }

/* ───────── THẺ KHOÁ (pass): ô đen, không bóng ───────── */
.pass { background: var(--surface-inverse); color: var(--text-inverse); box-shadow: none; }
a.pass:hover, .pass.is-lift { box-shadow: none; }
.pass::before, .pass::after { content: none; }
.pass__toy { position: absolute; z-index: 0; right: -6%; top: -12%; width: 58%; height: auto; rotate: -8deg; translate: calc(var(--tx, 0) * -5cqw) calc(var(--ty, 0) * -5cqw); transition: translate var(--dur-3) var(--ease-out); pointer-events: none; }
.pass__body { z-index: 1; }
.pass__kicker { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.pass__title { max-width: 62%; font-weight: 400; letter-spacing: -.025em; }
.pass__sub { max-width: 66%; font-weight: 400; color: color-mix(in srgb, currentColor 68%, transparent); }
.pass .chip { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pass .ring { --ring-fill: var(--go); --ring-track: color-mix(in srgb, currentColor 18%, transparent); color: inherit; }
.pass--sm .pass__toy { width: 86%; right: -14%; top: -12%; }
.pass:has(.ring) .pass__toy { top: 4%; right: -4%; width: 50%; }

/* ───────── GIẤY XÁC NHẬN: giấy trắng, viền mảnh, dải xanh, huy hiệu 3D ───────── */
.cert { overflow: visible; background: none; box-shadow: none; }
.cert::after { content: none; }
.cert__sheet { position: absolute; inset: 0; overflow: hidden; border-radius: clamp(.75rem, 2.6cqw, 1.5rem); background: var(--paper); color: var(--paper-ink); box-shadow: inset 0 0 0 1px var(--paper-line), var(--shadow-3); }
.cert__sheet::before { content: ""; position: absolute; inset: 2.2cqw 2.2cqw 2.2cqw 6.2cqw; z-index: 1; border-radius: 1.4cqw; border: 1px solid rgba(18, 18, 20, .1); pointer-events: none; }
.cert__holo { position: absolute; inset: 0 auto 0 0; z-index: 1; width: 3.2cqw; background: linear-gradient(180deg, var(--go), var(--go-2)); }
.cert__holo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(255, 255, 255, .85) 50%, transparent 75%); background-size: 100% 260%; background-position: 0 var(--foil, 130%); mix-blend-mode: soft-light; transition: background-position var(--dur-5) var(--ease-out); }
.cert__guil { position: absolute; right: -17cqw; top: -22cqw; width: 66cqw; height: auto; fill: none; stroke: var(--paper-ink); stroke-width: .3; opacity: .09; translate: calc(var(--tx, 0) * 2cqw) calc(var(--ty, 0) * 2cqw); transition: translate var(--dur-3) var(--ease-out); }
.cert__body { z-index: 2; padding: 6.4cqw 7cqw 7.4cqw 11cqw; }
.cert__brand { font-size: max(.8125rem, 3.4cqw); font-weight: 500; letter-spacing: -.02em; }
.cert__brand .brand__mark { width: 2.4cqw; }
.cert__type { padding: .9cqw 1.8cqw; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(18, 18, 20, .18); color: var(--paper-ink); font: 500 max(.5rem, 1.3cqw)/1.2 var(--font-mono); letter-spacing: .12em; }
.cert__label, .cert__text, .cert__foot dt { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; font-size: max(.5rem, 1.35cqw); }
.cert__name { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: max(1.375rem, 7.4cqw); line-height: 1.12; letter-spacing: -.02em; }
.cert__course { margin-top: .8cqw; font-size: max(1rem, 4.6cqw); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; color: var(--paper-ink); }
.cert__foot { gap: 4.4cqw; padding-right: 22cqw; }
.cert__foot dd { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.cert__micro { position: absolute; left: 6.2cqw; right: 2.2cqw; bottom: 3.1cqw; z-index: 2; padding-inline: 2cqw; overflow: hidden; white-space: nowrap; font: 500 max(4px, .78cqw)/1 var(--font-mono); letter-spacing: .2em; color: rgba(18, 18, 20, .38); }
.cert__medal { position: absolute; z-index: 3; right: -3.5cqw; bottom: -8cqw; width: 27cqw; height: auto; rotate: 8deg; translate: calc(var(--tx, 0) * -4cqw) calc(var(--ty, 0) * -4cqw); transition: translate var(--dur-3) var(--ease-out), rotate var(--dur-4) var(--ease-soft); pointer-events: none; }
.cert[data-tilt]:hover .cert__medal { rotate: -4deg; }
.cert--mini .cert__micro, .cert--mini .cert__guil { display: none; }
.flip__face > .cert { overflow: visible; }

/* ───────── Trang khoá học, giấy xác nhận, danh mục ───────── */
.chero { position: relative; margin: .75rem .75rem 0; padding-bottom: clamp(2.5rem, 6vw, 5rem); border-radius: var(--r-3xl); background: var(--tile); color: var(--text); overflow: hidden; }
.chero__no { font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.chero .h1 { font-size: clamp(2.5rem, 1.2rem + 4.4vw, 5.25rem); line-height: 1.02; max-width: 10em; }
.chero__chips .chip { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.chero__toy { width: min(100%, 27rem); height: auto; margin-inline: auto; rotate: -6deg; translate: calc(var(--tx, 0) * 1.5rem) calc(var(--ty, 0) * 1.5rem); animation: bob 7s ease-in-out infinite; view-transition-name: pass; }
.certpage__top { position: relative; margin: .75rem .75rem 0; padding-bottom: clamp(4rem, 9vw, 7rem); border-radius: var(--r-3xl); background: var(--tile); color: var(--text); overflow: hidden; }
.certpage__stage { width: min(100% - 2 * var(--gutter) - 2rem, 50rem); }
.certpage__top + section { margin-top: clamp(2rem, 5vw, 3.5rem); }
.resume { border-radius: var(--r-3xl); background: var(--tile); box-shadow: none; }
.cat__head .h1, .dash__head .h2 { font-size: var(--fs-h1); }
.cat__grid { gap: .75rem; }
.buy__price small { font-size: .8125rem; font-weight: 500; color: var(--text-2); }
.buy__plans { display: grid; gap: .5rem; padding: var(--sp-4); border-radius: var(--r-in); background: var(--bg-soft); font-size: var(--fs-sm); }
.buy__plans li { display: flex; justify-content: space-between; gap: var(--sp-4); } .buy__plans strong { font-variant-numeric: tabular-nums; }
.reader__title, .paywall .h2 { font-weight: 400; }
@media (max-width: 60rem) { .chero__toy { width: min(100%, 17rem); } }

@media (prefers-reduced-motion: reduce) { .marq__track, .cta2__toy, .ccover__toy, .verify2__toy, .chero__toy, .tile__toy { animation: none; } }
@media print { .certpage__top { background: none; margin: 0; } }

/* Nút mua khi chưa mở bán: viền mảnh, không tô màu */
.btn[aria-disabled="true"], .btn[disabled] { background-image: none; }
.plan2--hot .btn[aria-disabled="true"], .plan2--hot .btn[disabled] { --btn-bg: transparent; --btn-fg: var(--text-inverse); --btn-bd: color-mix(in srgb, currentColor 30%, transparent); opacity: .7; }
.pass:has(.ring) .pass__toy { top: 15%; right: -3%; width: 48%; }

/* ───────── TRANG HỌC: thanh trên mảnh, mục lục nền sáng, phần học là một ô xám lớn bo góc ───────── */
.learn { background: var(--bg); }
.learn__bar { background: var(--bg); border-bottom: 0; padding-inline: var(--sp-3); }
.learn__where span { font: 500 .625rem/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.learn__search { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
kbd { background: var(--bg-soft); box-shadow: none; }
.learn__side { padding: var(--sp-2) var(--sp-3) var(--sp-8); background: var(--bg); border-right: 0; }
.toc__head { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.toc__ch { border-top: 0; }
.toc__sum { min-height: 2.75rem; border-radius: .875rem; font-weight: 500; }
.toc__ch[open] > .toc__sum { font-weight: 600; }
.toc__no, .toc__n, .toc__m { font-family: var(--font-mono); font-size: .6875rem; }
.toc__ls { border-radius: .875rem; }
.toc__ls.is-current { background: var(--surface); box-shadow: var(--shadow-1); }
.toc__ls.is-current .toc__state { box-shadow: inset 0 0 0 1.5px var(--go); }
.toc__ls.is-current:not(.is-done) .toc__state::after { background: var(--go); }
.toc__ls.is-done .toc__state { background: var(--go); color: var(--on-go); }
.learn__main { margin: 0 .75rem .75rem 0; border-radius: var(--r-3xl); background: var(--tile); }
.viewer .slide { border-radius: var(--r-tile); box-shadow: var(--shadow-1); }
.viewer .slide:focus-visible { border-radius: var(--r-tile); }
.learn__pos .bar { background: var(--track); }
.learn__ctrl .icon-btn--line { box-shadow: var(--shadow-1); }
.learn__done.btn--soft { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: transparent; }
.learn__done.btn--soft:hover { --btn-bg: var(--accent-hover); }
.learn__done.is-done, .learn__done.btn.is-done { --btn-bg: var(--go); --btn-fg: var(--on-go); background-image: var(--grad-go); }
.paywall { border-radius: var(--r-tile); box-shadow: var(--shadow-1); }
.paywall__ic { background: var(--bg-soft); color: var(--text); }
.reader { padding: clamp(1.5rem, 4.6vw, 3.75rem); border-radius: var(--r-tile); box-shadow: var(--shadow-1); font-size: 1.0625rem; line-height: 1.78; }
.reader__kicker { font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.reader__title { margin-top: .75rem; font-size: clamp(2rem, 1.4rem + 2vw, 2.875rem); font-weight: 400; line-height: 1.08; letter-spacing: -.026em; }
.reader__meta { margin-top: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.reader h2 { margin-top: 2.5rem; font-family: var(--font-display); font-size: 1.625rem; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.reader li::marker { color: var(--go); }
.reader pre { border-radius: 1rem; background: var(--ink); color: #dcdcd6; } .reader pre .k { color: #8fe28a; } .reader pre .s { color: #d6f58a; }
.reader__note { border-left: 0; border-radius: 1rem; background: var(--bg-soft); }
.reader__note strong { font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--success); }
@media (max-width: 60rem) { .learn__main { margin: 0; border-radius: var(--r-tile) var(--r-tile) 0 0; } .learn__side { box-shadow: none; border-right: 1px solid var(--line); } }

/* ───────── Chi tiết các trang khác ───────── */
.certpage__actions { margin-top: clamp(3.5rem, 7vw, 5rem); }
.week .is-on i { background: var(--go); color: var(--on-go); }
.pass__sub { max-width: 56%; }
.pass:has(.ring) .pass__toy { top: 18%; right: -2%; width: 44%; }
.method:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--text); background: var(--surface); }
.method:has(input:checked) .method__dot { box-shadow: inset 0 0 0 6px var(--text); }
.check input { accent-color: var(--text); }
.check a { color: var(--text); text-decoration-color: var(--go); }

/* ───────── Một khoá, bốn cấp độ ───────── */
.covers:has(> .ccover:only-child) { grid-template-columns: minmax(0, 1fr); }
.ccover:only-child { min-height: clamp(21rem, 29vw, 26rem); }
.ccover:only-child .ccover__toy { top: 50%; right: 4%; width: min(38%, 25rem); translate: 0 -56%; }
.ccover:only-child .ccover__title { max-width: 11em; }
.ccover:only-child .ccover__desc { max-width: 34rem; }
.levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.level { display: flex; flex-direction: column; gap: .5rem; min-height: 14.5rem; padding: clamp(1.125rem, 1.8vw, 1.5rem); border-radius: var(--r-tile); background: var(--tile); }
.level__top { display: flex; align-items: flex-end; justify-content: space-between; font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.level__bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.25rem; }
.level__bars i { width: 5px; border-radius: 2px; background: var(--track); }
.level__bars i:nth-child(1) { height: 40%; } .level__bars i:nth-child(2) { height: 60%; } .level__bars i:nth-child(3) { height: 80%; } .level__bars i:nth-child(4) { height: 100%; }
.level__bars i.is-on { background: var(--go); }
.level__name { margin-top: auto; font: 400 clamp(1.5rem, 1.1rem + 1vw, 1.875rem)/1.08 var(--font-display); letter-spacing: -.02em; }
.level__make { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.level__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.75rem; margin-top: .25rem; padding-top: .75rem; border-top: 1px solid var(--line); font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.level__foot .chip { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
@media (max-width: 62rem) { .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .levels { grid-template-columns: minmax(0, 1fr); } .level { min-height: 0; } .ccover:only-child .ccover__toy { top: 3%; right: 0; width: 46%; translate: none; } .ccover:only-child { min-height: 27rem; } }

/* Danh sách bài trong trang khoá học và mục lục trang học */
.lessons li > span:nth-child(2) { display: grid; gap: .125rem; }
.lessons li strong { font-weight: 600; }
.lessons li small { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); }
.lessons li > span:last-child { white-space: nowrap; font: 500 .6875rem/1.6 var(--font-mono); color: var(--text-2); }
.toc__b { font: 500 .6875rem/1 var(--font-mono); color: var(--text-3); margin-right: .125rem; }
.toc__ls.is-current .toc__b { color: var(--text); }

/* Bài đọc: câu dẫn, dòng thông tin, ba thử thách */
.reader__lead { margin-top: .875rem; font-size: 1.1875rem; line-height: 1.5; color: var(--text-2); }
.reader__meta { flex-wrap: wrap; gap: .375rem 1.25rem; }
.reader__meta span { display: inline-flex; align-items: center; gap: .375rem; }
.reader code { padding: .125em .375em; border-radius: .375rem; background: var(--bg-soft); font: 400 .875em var(--font-mono); }
.reader pre code { padding: 0; background: none; font: inherit; }
.reader .reader__chal { list-style: none; padding: 0; display: grid; gap: .5rem; }
.reader__chal li { position: relative; display: grid; gap: .25rem; min-height: 4.5rem; padding: 1rem 1.25rem 1rem 4.5rem; border-radius: 1rem; background: var(--bg-soft); font-size: 1rem; line-height: 1.6; }
.reader__chal li + li { margin-top: 0; }
.reader__chal b { position: absolute; left: 1rem; top: 1rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); font-size: .875rem; font-weight: 600; }
.reader__chal li:last-child b { background: var(--surface-inverse); color: var(--text-inverse); box-shadow: none; }
.reader__chal span { color: var(--text-2); }
.lessons li { align-items: start; padding-block: .75rem; }
.lessons li > span:nth-child(2) { display: block; }
.lessons li small { display: block; margin-top: .125rem; }
.lessons li .ic { margin-top: .2rem; }
.level__foot { min-height: 2.75rem; }
.cat__grid:has(> .ccover:only-child) { grid-template-columns: minmax(0, 1fr); }
.cat__bar[hidden] { display: none; }

/* Trang học trên điện thoại: không để khối mã kéo giãn cột */
.viewer { grid-template-columns: minmax(0, 1fr); }
.reader { min-width: 0; overflow-wrap: anywhere; }
.reader pre { overflow-wrap: normal; }

/* ═════════ BẢN 4 (11/11/2026): hero toàn màn hình căn giữa, thanh xác minh kiểu ô tìm chuyến, tìm bài học trên header,
   bỏ hình 3D không liên quan, bỏ chuyển động trôi lên xuống, chân trang gọn ═════════ */
.ccover__toy, .verify2__toy, .chero__toy, .tile__toy, .cta2__toy, .pass__toy { animation: none; }

/* Header: ô tìm bài học */
.nsearch { position: relative; display: flex; align-items: center; width: clamp(10.5rem, 16vw, 14.5rem); height: 2.25rem; border-radius: var(--r-pill); background: var(--track); color: var(--text-3); }
.nsearch > .ic { position: absolute; left: .75rem; pointer-events: none; }
.nsearch input { width: 100%; height: 100%; padding: 0 .875rem 0 2.25rem; border: 0; border-radius: inherit; background: none; color: var(--text); font-size: var(--fs-sm); -webkit-appearance: none; appearance: none; }
.nsearch input::placeholder { color: var(--text-3); }
.nsearch input::-webkit-search-cancel-button { display: none; }
.nsearch input:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--text); }
.nsearch__results { display: none; position: absolute; top: calc(100% + .75rem); right: 0; z-index: 5; width: min(28rem, calc(100vw - 2rem)); max-height: 60vh; overflow: auto; padding: .5rem; border-radius: 1.25rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-3); text-align: left; }
.nsearch__results.is-open { display: block; }
.nsearch__results a { display: block; padding: .625rem .75rem; border-radius: .75rem; }
.nsearch__results a:hover, .nsearch__results a.is-sel { background: var(--bg-soft); }
.nsearch__results strong { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--text); }
.nsearch__results small { display: block; margin-top: .125rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); }
.nsearch__results p { padding: 1rem; font-size: var(--fs-sm); color: var(--text-2); text-align: center; }
.nsearch--lg { display: block; width: 100%; height: auto; margin-bottom: .5rem; background: none; }
.nsearch--lg > .ic { top: 1rem; }
.nsearch--lg input { height: 3rem; background: var(--track); font-size: var(--fs-body); }
.nsearch--lg .nsearch__results { position: static; width: 100%; margin-top: .5rem; box-shadow: inset 0 0 0 1px var(--line); }
.nav-sheet a.nav-sheet__link { font-size: 1.5rem; }

/* Màn hình đầu: toàn màn hình, căn giữa */
.hero4 { --px: 0; --py: 0; position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); min-height: calc(100svh - 4.75rem); padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter) clamp(1.5rem, 2.8vw, 2.5rem); overflow: clip; }
.hero4__in { align-self: center; display: grid; justify-items: center; gap: clamp(1rem, 1.7vw, 1.5rem); max-width: 52rem; text-align: center; }
.js .hero4__in, .js .hero4 .vbar, .js .hero4__decor { opacity: 0; animation: failsafe 1ms 2.6s forwards; }
.js .hero4.is-ready .hero4__in, .js .hero4.is-ready .vbar, .js .hero4.is-ready .hero4__decor { opacity: 1; animation: none; }
.hero4__tag { display: inline-flex; align-items: center; gap: .5rem; min-height: 2rem; padding: 0 .875rem 0 .75rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.hero4__tag i { width: .5rem; aspect-ratio: 1; border-radius: 50%; background: var(--grad-go); }
.hero4__title { font: 400 clamp(3.25rem, 1.2rem + 7vw, 7.5rem)/.98 var(--font-display); letter-spacing: -.034em; }
.hero4__title .l { display: block; overflow: hidden; padding-block: .14em .2em; margin-block: -.14em -.2em; }
.hero4__title .l > span { display: inline-block; }
.hero4__title em { font-style: italic; font-weight: 300; padding-inline: .04em; }
.hero4__lead { max-width: 38rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.hero4__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; margin-top: .25rem; }
.hero4__notes { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem 1.25rem; font-size: var(--fs-sm); color: var(--text-2); }
.hero4__notes li { display: inline-flex; align-items: center; gap: .5rem; }
.hero4__notes li::before { content: ""; width: .3125rem; aspect-ratio: 1; border-radius: 50%; background: var(--go); }

/* Thanh xác minh: một dải bo tròn rộng, nhãn nhỏ nằm trên ô nhập, nút ở cuối */
.vbar { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; width: min(100%, 54rem); min-height: 4.75rem; padding: .5rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); transition: box-shadow var(--dur-2); }
.vbar:focus-within { box-shadow: inset 0 0 0 1.5px var(--text), var(--shadow-2); }
.vbar__lead { display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem 0 .5rem; text-align: left; }
.vbar__ic { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--bg-soft); color: var(--text); }
.vbar__lead strong { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.vbar__lead div span { display: block; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-2); }
.vbar__field { display: grid; align-content: center; gap: .125rem; min-height: 3.75rem; padding: 0 1.25rem; border-left: 1px solid var(--line); text-align: left; cursor: text; }
.vbar__field > span { font: 500 .625rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.vbar__field input { width: 100%; height: 1.75rem; padding: 0; border: 0; background: none; color: var(--text); font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase; outline: 0; }
.vbar__field input::placeholder { color: var(--text-3); }
.vbar__go { height: 3.75rem; padding-inline: 1.75rem; }
.vbar__err { position: absolute; left: 0; right: 0; top: calc(100% + .5rem); font-size: var(--fs-xs); font-weight: 500; color: var(--danger); text-align: center; }
.vbar__err[hidden] { display: none; }
@media (max-width: 47.99rem) {
  .vbar { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: .75rem; border-radius: var(--r-tile); }
  .vbar__lead { padding: .125rem .25rem .25rem; }
  .vbar__field { min-height: 3.5rem; padding: .375rem .875rem; border-left: 0; border-radius: 1rem; background: var(--bg-soft); }
  .vbar__go { width: 100%; height: 3.25rem; }
  .vbar__err { position: static; }
  .hero4 { min-height: calc(100svh - 4.75rem); }
}

/* Mảnh trang trí quanh màn hình đầu: không bấm được, chỉ trôi nhẹ theo con trỏ */
.hero4__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.deco { position: absolute; display: grid; align-content: start; gap: .5rem; padding: 1rem; border-radius: var(--r-tile); background: var(--tile); color: var(--text); translate: calc(var(--px) * var(--d) * -1px) calc(var(--py) * var(--d) * -1px); transition: translate .6s var(--ease-out); }
.deco--ink { background: var(--surface-inverse); color: var(--text-inverse); }
.deco__k { font: 500 .625rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, currentColor 62%, transparent); }
.deco--lesson { left: max(1.5rem, 4.5vw); top: 12%; width: 13rem; rotate: -5deg; }
.deco--lesson strong { font: 400 1.5rem/1.1 var(--font-display); letter-spacing: -.02em; }
.deco__seg { justify-self: start; display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--track); font-size: .6875rem; font-weight: 600; }
.deco__seg b { padding: .25rem .625rem; border-radius: var(--r-pill); background: var(--surface); font-weight: 600; }
.deco__seg i { padding: .25rem .625rem; font-style: normal; color: var(--text-2); }
.deco--bars { left: max(3.5rem, 9vw); top: 46%; width: 11.5rem; rotate: 3deg; }
.deco__bar { height: .5rem; width: var(--w); border-radius: var(--r-pill); background: var(--track); }
.deco__k + .deco__bar { background: var(--grad-go); }
.deco--code { left: max(1.25rem, 3vw); bottom: 20%; width: 15rem; rotate: -3deg; gap: 0; }
.deco--code code { font: 400 .6875rem/1.75 var(--font-mono); white-space: nowrap; }
.deco--code i { font-style: normal; color: #8fe28a; } .deco--code b { font-weight: 400; color: #d6f58a; }
.deco--dial { right: max(2rem, 6vw); top: 11%; width: 9rem; justify-items: center; text-align: center; rotate: 5deg; }
.deco__ring { position: relative; display: grid; place-items: center; width: 5.25rem; aspect-ratio: 1; }
.deco__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.deco__ring circle { fill: none; stroke-width: 9; stroke: color-mix(in srgb, currentColor 16%, transparent); }
.deco__ring .deco__arc { --v: 27; stroke: var(--go); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v)); }
.deco__ring b { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.deco--ticks { right: max(1.25rem, 3.5vw); top: 43%; width: 11rem; rotate: -3deg; gap: .375rem; }
.deco__tick { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 500; color: var(--text-2); }
.deco__tick i { flex: none; width: 1.125rem; height: 1.125rem; border-radius: .375rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.deco__tick.is-on { color: var(--text); }
.deco__tick.is-on i, .deco__ok i { box-shadow: none; background: var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308240f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/.6875rem no-repeat; }
.deco--record { right: max(2.5rem, 7vw); bottom: 19%; width: 13rem; padding-left: 1.75rem; rotate: 4deg; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.deco__strip { position: absolute; inset: 0 auto 0 0; width: .5rem; background: linear-gradient(180deg, var(--go), var(--go-2)); }
.deco__line { height: .5rem; width: var(--w); border-radius: var(--r-pill); background: var(--track); }
.deco__ok { justify-self: start; display: inline-flex; align-items: center; gap: .375rem; margin-top: .25rem; padding: .25rem .625rem .25rem .3125rem; border-radius: var(--r-pill); background: var(--success-soft); color: var(--success); font-size: .6875rem; font-weight: 600; }
.deco__ok i { width: 1rem; height: 1rem; border-radius: 50%; }
@media (max-width: 82rem) { .deco--bars, .deco--ticks { display: none; } .deco--lesson { left: 1.25rem; width: 11.5rem; } .deco--dial { right: 1.5rem; width: 8rem; } .deco--code { left: 1rem; width: 13.5rem; } .deco--record { right: 1.25rem; width: 11.5rem; } }
@media (max-width: 72rem) { .hero4__decor { display: none; } }

/* Bìa khoá học: bốn cột cấp độ cao dần thay cho hình 3D */
.ccover__steps { position: absolute; z-index: -1; right: clamp(1.25rem, 3vw, 3rem); top: clamp(1.25rem, 2.4vw, 2.25rem); bottom: calc(var(--bite) + 1.25rem); display: flex; align-items: flex-end; gap: .5rem; width: min(44%, 25rem); }
.ccover__steps li { flex: 1; min-width: 0; height: var(--h); display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; padding: .75rem .625rem .625rem; border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow-1); }
.ccover__steps span { font: 500 .625rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.ccover__steps b { display: flex; flex-wrap: wrap; gap: .25rem; font-weight: 400; }
.ccover__steps i { display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--bg-soft); font: 500 .6875rem/1 var(--font-mono); font-style: normal; color: var(--text-2); }
.ccover__steps li:first-child i { background: var(--go); color: var(--on-go); }
.ccover:only-child .ccover__title { max-width: 9em; }
.ccover:only-child .ccover__desc { max-width: min(34rem, 50%); }
@media (max-width: 56rem) {
  .ccover__steps { position: relative; inset: auto; width: 100%; height: 9.5rem; margin: 2.75rem 0 1.5rem; }
  .ccover:only-child .ccover__desc { max-width: none; }
  .ccover:only-child { min-height: 0; }
}

/* Thẻ khoá: cột bậc thay cho hình 3D */
.pass__bars { position: absolute; z-index: 0; right: 7cqw; bottom: 7cqw; display: flex; align-items: flex-end; gap: 1.3cqw; height: 15cqw; }
.pass__bars i { width: 2.6cqw; border-radius: .9cqw; background: color-mix(in srgb, currentColor 22%, transparent); }
.pass__bars i:nth-child(1) { height: 40%; background: var(--go); } .pass__bars i:nth-child(2) { height: 60%; } .pass__bars i:nth-child(3) { height: 80%; } .pass__bars i:nth-child(4) { height: 100%; }
.pass__title { max-width: 80%; } .pass__sub { max-width: 70%; }
.pass--sm .pass__bars { right: 14cqw; bottom: 14cqw; height: 44cqw; gap: 5cqw; } .pass--sm .pass__bars i { width: 9cqw; border-radius: 3cqw; }

/* Lời mời cuối: căn giữa, không hình */
.cta2 { justify-items: center; text-align: center; }
.cta2 .display { max-width: 9em; }

/* Chân trang gọn: không còn chữ Dedy khổ lớn */
.footer { padding-bottom: clamp(1.25rem, 2.4vw, 2rem); }
.footer__blurb { margin-top: .75rem; max-width: 22rem; }
.footer__bar { justify-content: flex-end; }
.footer__copy { margin-right: auto; font-size: var(--fs-xs); }

/* Trang xác minh */
.vpage { display: grid; justify-items: center; gap: var(--sp-4); margin: .75rem .75rem 0; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(3rem, 6vw, 4.5rem); border-radius: var(--r-3xl); background: var(--tile); text-align: center; }
.vpage .lead { max-width: 34rem; }
.vpage .vbar { margin-top: var(--sp-6); }
.vpage--again { margin-top: clamp(2.5rem, 6vw, 4rem); padding-block: clamp(2rem, 4vw, 3rem); }
.vpage--again .vbar { margin-top: 0; }
.vsample { display: grid; gap: var(--sp-3); padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 9vw, 7rem); }
.vsample__stage { margin-top: var(--sp-6); }
.certpage__top .lead { margin-top: calc(var(--sp-2) * -1); }

.deco--bars .deco__k, .deco--code code { text-transform: none; letter-spacing: 0; }

/* ═════════ BẢN 5 (11/11/2026): banner ít chữ, bớt đen, thêm màu; cột cấp độ đặc màu; lời mời cuối nền xanh nhạt; nút mở cửa sổ tìm ═════════ */
:root { --tint-mint: #d9f5e0; --tint-lime: #ecf9c9; --tint-butter: #fdf0bf; --tint-peach: #fde3d3; --tint-sky: #dcecfb; --tint-lilac: #e9e3fb; --amber: #a15c07; }
:root[data-theme="dark"] { --tint-mint: rgba(72, 214, 110, .2); --tint-lime: rgba(185, 240, 63, .16); --tint-butter: rgba(250, 204, 80, .18); --tint-peach: rgba(250, 150, 110, .2); --tint-sky: rgba(110, 170, 250, .2); --tint-lilac: rgba(160, 140, 250, .22); --amber: #f0c869; }

/* nút mở cửa sổ tìm bài học */
button.nsearch { gap: .5rem; padding: 0 .5rem 0 2.25rem; border: 0; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: color var(--dur-2); }
button.nsearch:hover { color: var(--text); }
button.nsearch span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.nsearch kbd { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; border-radius: .4375rem; background: var(--surface); font: 500 .6875rem/1 var(--font-mono); color: var(--text-2); }
button.nsearch--lg { display: flex; height: 3rem; background: var(--track); font-size: var(--fs-body); } button.nsearch--lg > .ic { top: auto; }

/* nền màu rất nhạt, thở chậm */
.hero4__wash { position: absolute; inset: -6%; z-index: -2; background:
  radial-gradient(34% 32% at 50% 42%, rgba(185, 240, 63, .22), transparent 70%),
  radial-gradient(28% 30% at 24% 62%, rgba(44, 203, 92, .14), transparent 70%),
  radial-gradient(26% 28% at 78% 30%, rgba(253, 214, 120, .26), transparent 72%),
  radial-gradient(24% 26% at 80% 76%, rgba(190, 170, 250, .16), transparent 72%);
  animation: wash 16s ease-in-out infinite alternate; }
@keyframes wash { to { transform: scale(1.08) translate(1.5%, -1.5%); } }
:root[data-theme="dark"] .hero4__wash { opacity: .6; }
.hero4__in { gap: clamp(1.125rem, 2vw, 1.75rem); }
.hero4__lead { max-width: 34rem; }
.btn--go .btn__arr { background: var(--ink); color: var(--go-2); }
.btn--go:hover { filter: saturate(1.08) brightness(1.03); }
.vbar__lead { padding-right: 1.25rem; }

/* mảnh trang trí: thẻ sáng, màu nằm ở chi tiết nhỏ */
.deco { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.deco--bars, .deco--ticks { background: var(--tile); box-shadow: none; }
.deco--tokens { left: max(1.5rem, 4.5vw); top: 12%; width: 14.5rem; rotate: -5deg; gap: .625rem; }
.deco__toks { display: flex; flex-wrap: wrap; gap: .25rem .125rem; font-size: .9375rem; font-weight: 500; line-height: 1; }
.deco__toks i { padding: .375rem .4375rem; border-radius: .5rem; background: var(--tint-mint); font-style: normal; white-space: pre; }
.deco__toks i:nth-child(6n+2) { background: var(--tint-butter); } .deco__toks i:nth-child(6n+3) { background: var(--tint-sky); } .deco__toks i:nth-child(6n+4) { background: var(--tint-peach); }
.deco__toks i:nth-child(6n+5) { background: var(--tint-lilac); } .deco__toks i:nth-child(6n) { background: var(--tint-lime); }
.deco--bars .deco__bar:nth-of-type(3) { background: color-mix(in srgb, var(--go) 52%, var(--tile)); } .deco--bars .deco__bar:nth-of-type(4) { background: color-mix(in srgb, var(--go) 34%, var(--tile)); }
.deco--bars .deco__bar:nth-of-type(5) { background: color-mix(in srgb, var(--go) 20%, var(--tile)); } .deco--bars .deco__bar:nth-of-type(6) { background: color-mix(in srgb, var(--go) 12%, var(--tile)); }
.deco--code { background: var(--surface); color: var(--text); }
.deco--code i { color: var(--success); } .deco--code b { color: var(--amber); }
.deco--dial { background: var(--tint-mint); color: var(--text); box-shadow: none; }
.deco__tick { gap: .5rem; } .deco__tick > span { flex: 1; }
.pt { min-width: 1.75rem; padding: .1875rem .375rem; border-radius: .4375rem; font: 500 .625rem/1 var(--font-mono); text-align: center; color: var(--text); }
.pt--1 { background: var(--tint-mint); } .pt--2 { background: var(--tint-butter); } .pt--3 { background: var(--tint-peach); }

/* bìa khoá: bốn cột đặc màu cao dần, nhãn cấp nằm dưới chân cột */
.ccover__steps { right: clamp(1.5rem, 4vw, 4rem); top: clamp(1.5rem, 2.6vw, 2.5rem); bottom: calc(var(--bite) + 1.5rem); width: min(40%, 23rem); gap: .625rem; align-items: stretch; }
.ccover__steps li { height: auto; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .625rem; border-radius: 0; background: none; box-shadow: none; }
.ccover__steps li > i { display: flex; align-items: baseline; gap: .25rem; width: auto; height: var(--h); padding: .75rem .875rem; border-radius: 1rem; background: color-mix(in srgb, var(--go) 20%, var(--surface)); font: inherit; font-style: normal; color: var(--text); }
.ccover__steps li:nth-child(2) > i { background: color-mix(in srgb, var(--go) 40%, var(--surface)); }
.ccover__steps li:nth-child(3) > i { background: color-mix(in srgb, var(--go) 66%, var(--surface)); color: var(--on-go); }
.ccover__steps li:nth-child(4) > i { background: linear-gradient(180deg, var(--go-2), var(--go)); color: var(--on-go); }
.ccover__steps li:first-child i { background: color-mix(in srgb, var(--go) 20%, var(--surface)); color: var(--text); }
.ccover__steps b { display: block; font-size: 1.375rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.ccover__steps small { font-size: .6875rem; font-weight: 500; opacity: .8; }
.ccover__steps li > span { text-align: center; }
@media (max-width: 56rem) { .ccover__steps { position: relative; inset: auto; height: 10.5rem; margin: 2.75rem 0 1.5rem; width: 100%; } }

/* lời mời cuối: nền xanh rất nhạt thay cho ô đen */
.cta2 { background: linear-gradient(135deg, var(--tint-mint), var(--tint-lime)); color: var(--text); }
.cta2 .lead { color: var(--text-2); }
.cta2 .btn--primary, .cta2 .btn--primary:hover { --btn-bg: var(--accent); --btn-fg: var(--on-accent); }
@media (prefers-reduced-motion: reduce) { .hero4__wash { animation: none; } }

.hero4__lead { max-width: 44rem; text-wrap: balance; }