/* courses.css — course archive (.courses-page, cx-*) and course detail (.course-detail-page, cd-*). Visual system v2.
   Mobile-first; tablet ≥768, desktop ≥1200. Tokens from tokens.css; bands, marks, shapes, display type, reveal,
   progress, hover helpers from base.css §17 (foundation). Brand palette only; no glow/blur/rings/doodles.
   Surface rhythm
   - archive: hero cream → CEFR ink → Speakout warm → Business Partner cream → feedback warm → FAQs cream → form olive
   - detail:  hero cream → methods warm (cut) → learn cream → roadmap ink → image band warm → outcomes cream → FAQs warm → form olive
   The mint (lime-50) surface is retired (client, 24 Sep): only the five Guideline colours. */

/* Shared layering: decoration (display type, colour fields, patterns) sits under the content of its band. */
.courses-page .band > .container,.course-detail-page .band > .container{position:relative;z-index:1}

/* =====================================================================
   DETAIL · breadcrumb (cream, continuous with the hero)
   ===================================================================== */
.cd-crumb{position:relative;z-index:2;background:var(--c-cream);border-bottom:1px solid rgba(var(--c-ink-rgb),.1)}
.cd-crumb__list{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;font-size:var(--fs-small);font-weight:500;line-height:1.3;color:rgba(var(--c-ink-rgb),.72)}
.cd-crumb__list li{display:inline-flex;align-items:center;min-height:44px}
.cd-crumb__list li + li::before{content:"/";margin-inline:10px;color:rgba(var(--c-ink-rgb),.4)}
.cd-crumb__list a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;border-radius:var(--radius-sm)}
.cd-crumb__list a:focus-visible{outline:3px solid var(--c-ink);outline-offset:2px}
.cd-crumb__list a:active{color:var(--c-ink);text-decoration:underline}
.cd-crumb__list [aria-current]{color:var(--c-ink);font-weight:600}
@media (hover:hover){.cd-crumb__list a:hover{color:var(--c-ink);text-decoration:underline;text-decoration-color:var(--c-green);text-underline-offset:3px}}
@media (max-width:767.98px){
  .cd-crumb__list{flex-wrap:nowrap;font-size:13px;white-space:nowrap}
  .cd-crumb__list li + li::before{margin-inline:6px}
  .cd-crumb__list li:last-child{min-width:0}
}

/* =====================================================================
   DETAIL · §01 hero — the textbook cover is the visual anchor beside the heading block; meta as "data as design".
   v2 fix: no display type here (it left a dead zone and butted against the form). ≥1024 the 1:1 form runs as a
   full-width strip under copy + cover, so neither column leaves a void.
   ===================================================================== */
.cd-hero{position:relative;overflow:hidden}
.cd-hero__grid{display:grid;gap:36px;align-items:center}
.cd-hero__copy{min-width:0}
.cd-hero__title{margin:0;font-size:var(--fs-h1);font-weight:800;line-height:1.1;letter-spacing:-.015em;text-transform:none}
.cd-hero__title em{display:block;margin-top:6px;font-size:.72em;font-weight:700}
.cd-hero__desc{margin:18px 0 0;max-width:40rem;font-size:var(--fs-body);line-height:1.55}
/* Meta: a spec sheet. Each item hangs from an index rule (hairline + short olive segment); values in display weight. */
.cd-meta{display:grid;margin:28px 0 0}
.cd-meta__item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:12px;min-width:0;padding:14px 0 12px}
.cd-meta__rule{position:absolute;top:0;left:0;right:0}
.cd-meta dt{font-size:var(--fs-small);font-weight:600;line-height:1.3;color:rgba(var(--c-ink-rgb),.78)}
.cd-meta dd{margin:0;font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.cd-hero__cta{margin-top:28px;width:100%}
/* Textbook cover (media slot, 3/4; an empty "awaiting print" slot until supplied). QA P2-21/22: the lime block behind it
   is a deliberate offset (40px right and down), not a half-overlap; it bleeds off the right edge. */
.cd-hero__grid{grid-template-areas:"copy" "cover" "form"}
.cd-hero__copy{grid-area:copy}
.cd-hero__form{grid-area:form}
.cd-cover{grid-area:cover;position:relative;isolation:isolate;justify-self:start;width:min(52%,220px);margin:0 0 40px}
.cd-cover::before{content:"";position:absolute;z-index:-1;left:40px;top:40px;bottom:-40px;width:100vw;border-radius:var(--radius-card) 0 0 var(--radius-card);background:var(--c-lime);pointer-events:none}
.cd-cover__frame{display:block}
.cd-cover__media{display:block;overflow:hidden;border-radius:var(--radius-sm);box-shadow:0 18px 36px -24px rgba(var(--c-ink-rgb),.45)}
.cd-cover__img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-sm)}

.cd-hero__form{position:relative;min-width:0}
/* Form submit: the shared ink/lime lead-form submit from base.css applies (no page override). */
@media (min-width:768px){
  /* Columns hug their values ("50 giờ · 33 buổi" stays one line); a narrow copy column wraps to a 2nd row */
  .cd-meta{display:flex;flex-wrap:wrap;column-gap:28px;row-gap:8px}
  .cd-meta__item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 0 4px;min-width:96px}
  .cd-meta dd{font-size:clamp(22px,1.8vw,26px)}
  .cd-hero__cta{width:auto}
  .cd-hero__grid{grid-template-columns:minmax(0,1fr) clamp(220px,25vw,270px);grid-template-areas:"copy cover" "form form";column-gap:40px;row-gap:48px}
  .cd-cover{width:calc(100% - 40px);align-self:center;margin-bottom:40px}
}
/* ≥1024: the consultation card becomes a strip: title on top, the 3 fields in a row, the button beside them (≥1440)
   or under them (1024–1439, where a 4th column would squeeze "Số điện thoại / Zalo *"). */
@media (min-width:1024px){
  .cd-form--hero{display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}
  .cd-form--hero .form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;align-items:end}
  .cd-form--hero .form > :not(.field){grid-column:1 / -1}
  .cd-form--hero .form > .field--honeypot{grid-column:auto}
  .cd-form--hero .form__actions{align-items:flex-start}
  .cd-form--hero .form__actions .btn{width:auto;padding-inline:32px}
}
@media (min-width:1200px){
  .band.cd-hero{padding-top:64px}
  .cd-hero__grid{grid-template-columns:minmax(0,1fr) clamp(300px,26vw,380px);column-gap:clamp(48px,5vw,88px);row-gap:64px}
  .cd-cover{width:min(100% - 40px,340px);justify-self:center;margin:0 0 40px}
  .cd-hero__desc{max-width:44rem}
  .cd-meta{margin-top:36px;column-gap:clamp(28px,2.4vw,40px)}
  .cd-meta dt{font-size:15px}
  .cd-hero__cta{margin-top:40px}
}
@media (min-width:1440px){
  .cd-form--hero .form{grid-template-columns:repeat(3,minmax(0,1fr)) auto;column-gap:36px}
  .cd-form--hero .form > .form__actions{grid-column:auto;margin-top:0;padding-bottom:2px}
}

/* =====================================================================
   DETAIL · §02 learn — editorial index (no card chrome)
   ===================================================================== */
.cd-learn__intro{display:grid;gap:32px;margin-bottom:var(--heading-gap)}
.cd-learn__intro .section-heading{margin-bottom:0}
.cd-learn__media{margin:0;min-width:0}
.cd-learn__shot{display:block;overflow:hidden;border-radius:var(--radius-card)}
.cd-learn__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-card)}
/* QA P1-20: copy | media split from 900px; below that the recording is capped (no 900 × 520 slab). */
@media (min-width:600px) and (max-width:899.98px){.cd-learn__media{max-width:520px}}
@media (min-width:900px){.cd-learn__intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}}
@media (min-width:1200px){.cd-learn__intro{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px}}
.cd-learn__cards{display:grid;gap:44px}
.cd-index{min-width:0}
.cd-index__title{margin:0;padding-top:18px;position:relative;font-size:var(--fs-h3);font-weight:700;line-height:1.3}
.cd-index__rule{position:absolute;top:0;left:0;right:0}
.cd-skills__list{margin:18px 0 0;padding:0;list-style:none}
.cd-skills__row{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:baseline;gap:12px;padding:16px 10px;border-bottom:1px solid rgba(var(--c-ink-rgb),.14)}
.cd-skills__row:first-child{border-top:1px solid rgba(var(--c-ink-rgb),.14)}
.cd-skills__num{font-size:28px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c-ink);font-variant-numeric:tabular-nums}
.cd-skills__label{min-width:0;font-size:var(--fs-body);font-weight:500;line-height:1.5}
.cd-topics__desc{margin:10px 0 0;font-size:var(--fs-small);line-height:1.5;color:rgba(var(--c-ink-rgb),.78)}
/* Topic index: ruled rows, a short olive segment leads each phrase */
.cd-topics__grid{display:grid;grid-template-columns:minmax(0,1fr);column-gap:32px;margin:18px 0 0;padding:0;list-style:none;border-top:1px solid rgba(var(--c-ink-rgb),.14)}
.cd-topics__tile{position:relative;min-width:0;padding:15px 10px 15px 40px;border-bottom:1px solid rgba(var(--c-ink-rgb),.14);font-size:var(--fs-body);font-weight:600;line-height:1.4;text-wrap:balance}
.cd-topics__tile::before{content:"";position:absolute;left:10px;top:calc(15px + .7em);width:16px;height:3px;background:var(--c-green)}
.cd-learn__cards.is-many .cd-topics__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.cd-learn__cards.is-many .cd-topics__tile{padding-left:32px}
.cd-learn__cards.is-many .cd-topics__tile::before{width:12px}
@media (min-width:768px){
  .cd-skills__row{grid-template-columns:64px minmax(0,1fr);gap:16px;padding:18px 12px}
  .cd-skills__num{font-size:34px}
  .cd-learn__cards.is-single .cd-topics__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1200px){
  .cd-learn__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:80px}
  .cd-learn__cards.is-single{grid-template-columns:minmax(0,1fr)}
  .cd-learn__cards.is-single .cd-topics__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cd-index__title{padding-top:22px;font-size:calc(var(--fs-h3) - 4px)}
  .cd-skills__list,.cd-topics__grid{margin-top:26px}
  .cd-skills__row{grid-template-columns:72px minmax(0,1fr);padding:20px 16px}
  .cd-skills__num{font-size:36px}
  .cd-skills__label{font-size:var(--fs-body)}
  .cd-topics__desc{font-size:15px;max-width:36em}
  .cd-topics__tile{padding-block:18px;font-size:var(--fs-body)}
  .cd-topics__tile::before{top:calc(18px + .7em)}
}

/* =====================================================================
   DETAIL · §03 roadmap (ink band) — Figma line grid, progress rail, sequential steps
   ===================================================================== */
.cd-roadmap{position:relative;overflow:hidden}
/* Figma's roadmap grid (the one grid texture the system allows), faded toward the bottom */
.cd-roadmap__grid{position:absolute;inset:0;z-index:0;pointer-events:none;--grid:32px;
  background-image:repeating-linear-gradient(0deg,rgba(255,250,243,.06) 0 1px,transparent 1px var(--grid)),repeating-linear-gradient(90deg,rgba(255,250,243,.06) 0 1px,transparent 1px var(--grid));
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
@media (min-width:768px){.cd-roadmap__grid{--grid:48px}}
.cd-roadmap__lead{margin:0 0 20px;font-size:var(--fs-roadmap-desc);font-weight:700;line-height:1.4;color:var(--c-lime);text-wrap:pretty}
.cd-roadmap__track{position:relative;padding-left:28px}
/* Rail: [data-progress] (foundation): a hairline whose lime fill grows as the viewport centre moves along the steps;
   shown full without JS / under reduced motion. */
.cd-roadmap__rail{position:absolute;top:6px;bottom:6px;left:4px}
.cd-steps{display:grid;margin:0;padding:0;list-style:none}
.cd-step{position:relative;display:grid;gap:6px;padding:20px 12px 22px;border-top:1px solid rgba(255,250,243,.14);transition:background-color .25s var(--ease)}
.cd-step:last-child{border-bottom:1px solid rgba(255,250,243,.14)}
/* Square node on the rail for each step */
.cd-step::before{content:"";position:absolute;top:calc(20px + .45em);left:-28px;width:9px;height:9px;background:var(--c-ink);border:1px solid var(--c-lime)}
.cd-step__num{font-size:var(--fs-roadmap-title);font-weight:800;line-height:1.2;color:var(--c-lime);font-variant-numeric:tabular-nums}
.cd-step__body{min-width:0}
.cd-step__title{margin:0;font-size:var(--fs-roadmap-title);font-weight:700;line-height:1.3;color:var(--c-cream)}
.cd-step__desc{margin:6px 0 0;font-size:var(--fs-roadmap-desc);line-height:1.5;color:rgba(255,250,243,.78)}
/* Title-only steps (Công việc: one Craft line each) read as body copy, not as headings */
.cd-step--title-only .cd-step__title{font-weight:600;line-height:1.4;text-wrap:pretty}
@media (hover:hover){.cd-step:hover::before{background:var(--c-lime)}}
/* Steps rise one after another (base stagger covers 1–4) */
[data-reveal="stagger"].is-revealing > :nth-child(5){animation-delay:.4s}
[data-reveal="stagger"].is-revealing > :nth-child(6){animation-delay:.5s}
[data-reveal="stagger"].is-revealing > :nth-child(7){animation-delay:.6s}
[data-reveal="stagger"].is-revealing > :nth-child(n+8){animation-delay:.7s}
@media (min-width:768px){
  .cd-roadmap__track{padding-left:48px}
  .cd-roadmap__rail{left:4px}
  .cd-step{grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:baseline;padding:24px 16px 26px 14px}
  .cd-step::before{left:-48px;top:calc(24px + .5em)}
}
@media (min-width:1200px){
  .cd-roadmap__track{padding-left:72px}
  .cd-roadmap__lead{margin-bottom:28px}
  .cd-step{grid-template-columns:96px minmax(0,1fr);padding:30px 24px 32px 20px}
  .cd-step::before{left:-72px;top:calc(30px + .55em)}
  .cd-step__num{font-size:30px;line-height:1.1}
  .cd-step__desc{margin-top:8px}
  /* h3 steps stay below the hero form's h2 (28px): type hierarchy h2 ≥ h3 */
  .cd-step__title{font-size:calc(var(--fs-roadmap-title) - 4px)}
  .cd-step--title-only .cd-step__title{font-size:calc(var(--fs-roadmap-title) - 6px)}
}

/* =====================================================================
   DETAIL · §04 "Điểm đặc biệt" cards (cream band, lime colour field under the lower half of the cards)
   ===================================================================== */
.cd-methods{position:relative;overflow:hidden}
/* One flat lime field (v2 fix, review 12): a clean diagonal top edge that runs under the lower half of all three cards
   and bleeds off BOTH page edges (never stops short of an edge). Not a circle; no parallax, so its edges never show. */
.cd-methods__field{position:absolute;z-index:0;left:0;right:0;bottom:0;height:calc(var(--section-y) + 200px);background:var(--c-lime);clip-path:polygon(0 72px,100% 0,100% 100%,0 100%);pointer-events:none}
.cd-methods__grid{display:grid;gap:16px}
.cd-method{position:relative;min-width:0;padding:26px 22px 28px;border:1px solid rgba(var(--c-ink-rgb),.08);border-radius:var(--radius-card);background:var(--c-cream-warm);box-shadow:0 1px 2px rgba(var(--c-ink-rgb),.03),0 26px 52px -38px rgba(var(--c-ink-rgb),.4)}
.cd-method__rule{display:block;margin-bottom:16px}
.cd-method__num{display:block;margin:0 0 10px;font-size:var(--fs-roadmap-title);font-weight:800;line-height:1;color:var(--c-ink);font-variant-numeric:tabular-nums}
.cd-method__title{margin:0;font-size:var(--fs-h3);font-weight:700;line-height:1.3;text-wrap:balance}
.cd-method__desc{margin:10px 0 0;font-size:var(--fs-body);line-height:1.55;color:rgba(var(--c-ink-rgb),.8)}
@media (min-width:768px){.cd-method{padding:30px 32px 32px}}
/* QA P1-20: three columns from 900px (the swipe rail stays below 900). Overrides the base .rail (< 1024). */
@media (min-width:900px) and (max-width:1199.98px){
  .cd-methods__grid.rail{grid-auto-flow:row!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;margin-inline:0!important;padding:0!important;overflow:visible;scroll-snap-type:none}
  .cd-methods__grid.rail + .rail-meter{display:none}
  .cd-method{padding:26px 22px 28px}
  .cd-method__title{font-size:20px}
}
@media (min-width:1200px){
  .cd-methods__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
  .cd-method{padding:34px 30px 40px}
  .cd-method__rule{margin-bottom:22px}
  .cd-method__num{margin-bottom:16px}
  .cd-method__title{font-size:calc(var(--fs-h3) - 6px)}
  .cd-method__desc{margin-top:14px;font-size:var(--fs-body)}
  .cd-methods__field{height:calc(var(--section-y) + 240px);clip-path:polygon(0 120px,100% 0,100% 100%,0 100%)}
}

/* =====================================================================
   DETAIL · image band (warm) — a class recording in duotone on an offset hairline frame + the page's one display type
   (the level code), cropped cleanly by the band's right and bottom edges, clear of all text (v2 fix, Top-5 #5).
   ===================================================================== */
.cd-reel{position:relative;overflow:hidden;--dt-size:clamp(150px,40vw,240px)}
.band.cd-reel{padding-bottom:calc(var(--section-y) + 40px + .62 * var(--dt-size))}
.cd-reel__code{right:-.06em;bottom:-.2em}
.cd-reel__media{margin:0;min-width:0}
.cd-reel__shot{display:block;border-radius:var(--radius-card)}
.cd-reel__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 30%;border-radius:inherit}
@media (min-width:768px){.cd-reel{--dt-size:clamp(200px,30vw,260px)}}
/* ≥1024: image 7/12, the code rises out of the band's bottom edge in the free right column (never under the image) */
@media (min-width:1024px){
  .cd-reel{--dt-size:clamp(220px,23.5vw,380px)}
  .band.cd-reel{padding-bottom:calc(var(--section-y) + 40px)}
  .cd-reel__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}

/* =====================================================================
   Empty media slots on course pages (v2 fix, review 2): an intentional "awaiting print" frame instead of a broken box:
   correct ratio, centred glyph, fine olive hatch inside a warm-cream passe-partout with one crisp olive hairline.
   (Also fixes the old `.cd-cover__img/.cd-learn__img{display:block}` override that pinned the glyph to the top.)
   ===================================================================== */
:is(.courses-page,.course-detail-page) .media-slot--empty{--slot-mat:12px;display:grid;place-items:center;width:100%;height:auto;
  background:repeating-linear-gradient(135deg,rgba(var(--c-green-rgb),.22) 0 1px,transparent 1px 9px),var(--c-cream-warm);
  border:1px solid rgba(var(--c-ink-rgb),.12);
  box-shadow:inset 0 0 0 var(--slot-mat) var(--c-cream-warm),inset 0 0 0 calc(var(--slot-mat) + 1px) rgba(var(--c-green-rgb),.7);
  color:var(--c-green)}
:is(.courses-page,.course-detail-page) .media-slot--empty .media-slot__icon{width:clamp(28px,22%,48px);height:auto;aspect-ratio:1;padding:10px;box-sizing:content-box;background:var(--c-cream-warm);border:1px solid rgba(var(--c-green-rgb),.7)}
.cx-card__img.media-slot--empty{--slot-mat:7px}
.cx-card__img.media-slot--empty .media-slot__icon{padding:6px}

/* =====================================================================
   DETAIL · §05 outcomes (cream + grain) — each outcome hangs from an index rule
   ===================================================================== */
/* The marker bar starts flush with the heading edge (no negative margin past the container) */
.cd-outcomes .h2 .hl-swipe{margin-inline-start:0;padding-inline-start:0}
.cd-outcomes__list{display:grid;gap:8px 40px;margin:0;padding:0;list-style:none}
.cd-outcomes__row{position:relative;padding:18px 0 14px;font-size:var(--fs-body);font-weight:600;line-height:1.45}
.cd-outcomes__rule{position:absolute;top:0;left:0;right:0}
.cd-outcomes__text{display:block;min-width:0}
@media (min-width:768px){.cd-outcomes__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){
  .cd-outcomes__list{gap:16px 64px}
  .cd-outcomes__row{padding:22px 0 16px;font-size:18px;font-weight:500}
  .course-detail-page .cd-outcomes .section-heading__desc{max-width:44rem}
}

/* =====================================================================
   DETAIL + ARCHIVE · FAQs (warm band, hairline rules) + registration (olive band)
   ===================================================================== */
.cd-form--register{max-width:1080px;margin-inline:auto}
/* Detail register: Figma mobile shows only name / phone / email; course + need (both optional) appear from 768 */
@media (max-width:767.98px){.cd-form--detail .field--course,.cd-form--detail .field--need{display:none}}

/* =====================================================================
   ARCHIVE · hero (cream) — book image over a clean lime colour field, crop marks
   ===================================================================== */
.cx-hero{position:relative;overflow:hidden}
.cx-hero__field{position:absolute;z-index:0;right:-12%;bottom:-2px;width:min(52%,560px);height:auto;pointer-events:none}
.cx-hero__grid{display:grid;gap:28px;align-items:center}
.cx-hero__copy{min-width:0}
.cx-hero__title{margin:0;font-size:var(--fs-h1);font-weight:900;line-height:1.2;letter-spacing:-.01em}
.cx-hero__desc{margin:18px 0 0;max-width:38rem;font-size:var(--fs-body);line-height:1.6}
.cx-hero__choices{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:24px}
.cx-hero__choice{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid rgba(var(--c-ink-rgb),.28);border-radius:var(--radius-pill);background:var(--c-cream);color:var(--c-ink);font-size:14px;font-weight:700;text-decoration:none;transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.cx-hero__choice .icon{width:16px;height:16px}
/* In-page jump links (QA P2-16): the arrow points down; it nudges down on hover/focus */
.cx-hero__choice .cx-hero__down{transform:rotate(90deg);transition:transform .25s var(--spring,var(--ease))}
@media (hover:hover){.cx-hero__choice:hover .cx-hero__down{transform:translateY(2px) rotate(90deg)}}
.cx-hero__choice:focus-visible .cx-hero__down{transform:translateY(2px) rotate(90deg)}
@media (hover:hover){.cx-hero__choice:hover{background:var(--c-lime);border-color:var(--c-green);transform:translateY(-2px)}}
.cx-hero__choice:focus-visible{outline:3px solid var(--c-ink);outline-offset:2px;background:var(--c-lime)}
.cx-hero__choice:active{transform:translateY(0)}
.cx-hero__cta{margin-top:20px}
.cx-hero__media{display:none;margin:0}
.cx-hero__img{display:block;width:100%;height:auto;aspect-ratio:1364/694;object-fit:contain}
@media (min-width:768px){.cx-hero{padding-bottom:88px}.cx-hero__field{right:-8%;width:min(60%,520px)}}
@media (min-width:1200px){
  .cx-hero{padding-block:72px 104px}
  .cx-hero__field{right:-4%;bottom:-2px;width:min(56%,900px)}
  .cx-hero__grid{grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:48px}
  .cx-hero__title{line-height:1.12}
  .cx-hero__title em{display:block}
  .cx-hero__desc{max-width:34rem}
  .cx-hero__cta{margin-top:24px}
  .cx-hero__media{display:block;position:relative;padding:18px}
}

/* =====================================================================
   ARCHIVE · CEFR on the ink band — cards < 1200, refined data table ≥ 1200
   ===================================================================== */
.cx-cefr__table-wrap{display:none}
.cx-cefr__cards{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,250,243,.18)}
.cx-level{padding:18px 20px 20px;border-bottom:1px solid rgba(255,250,243,.18)}
.cx-level__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0;font-size:17px;font-weight:700;line-height:1.35;color:var(--c-cream)}
.cx-level__code{font-size:36px;font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--c-lime)}
.cx-level__name{min-width:0}
.cx-level__en,.cx-level__vi{display:block}
.cx-level__vi{font-weight:500;color:rgba(255,250,243,.82)}
.cx-level__scores{margin:10px 0 0;font-size:15px;line-height:1.5;color:rgba(255,250,243,.82)}
/* Score items in a flex-wrap row. Each item but the first draws its "·" in its own 20px left padding; the row is
   pulled 20px left and clipped back by the same amount, so the dot of an item that starts a line is cut off and a
   separator never dangles at a line start or end. The dot is decorative (empty alt text for assistive tech). */
.cx-meta{display:flex;flex-wrap:wrap;row-gap:2px;margin-inline-start:-20px;clip-path:inset(0 0 0 20px)}
.cx-meta__item{position:relative;padding-inline-start:20px;white-space:nowrap}
.cx-meta__item + .cx-meta__item::before{content:"·" / "";position:absolute;inset-inline-start:7px;color:rgba(255,250,243,.55)}
.cx-level__scores + .cx-level__scores{margin-top:6px}
/* "Lưu ý": a margin note on the ink band (desktop, as in Figma) */
.cx-note{position:relative;margin-top:32px;padding:22px 0 0 0;border-top:1px solid rgba(255,250,243,.18)}
.cx-note__title{margin:0;font-size:16px;font-weight:700;color:var(--c-lime)}
.cx-note__text{margin:8px 0 0;font-size:var(--fs-small);line-height:1.6;color:rgba(255,250,243,.82)}
.cx-note--cefr{display:none}
/* Research P2 · phones (< 768): level chips (A1 … B2) with a sliding lime pill above ONE swipe card per level, synced
   both ways by the inline script in page-khoa-hoc.php. Without JS the chips are in-page links and the cards still swipe. */
.cx-cefr__picker{display:none}
@media (max-width:767.98px){
  .cx-cefr__picker{display:block;margin:0 0 16px}
  .cx-cefr__chips{position:relative;display:flex;gap:2px;margin:0;padding:4px;list-style:none;border:1px solid rgba(255,250,243,.2);border-radius:var(--radius-pill);background:rgba(255,250,243,.06)}
  .cx-cefr__chips > li{flex:1 1 0;min-width:0;display:flex}
  .cx-cefr__chip{position:relative;z-index:1;display:flex;flex:1;align-items:center;justify-content:center;min-height:44px;border-radius:var(--radius-pill);font-size:16px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;color:var(--c-cream);text-decoration:none;transition:color .3s var(--ease)}
  .cx-cefr__chip[aria-current="true"]{color:var(--c-ink);background:var(--c-lime)}
  .cx-cefr__chip:focus-visible{outline:3px solid var(--c-cream);outline-offset:-3px}

  /* Enhanced: one lime pill slides between chips (like .cx-tabs__list) instead of each chip filling itself */
  .cx-cefr__picker.is-enhanced .cx-cefr__chips::before{content:"";position:absolute;top:4px;bottom:4px;left:0;width:var(--pill-w,0);border-radius:var(--radius-pill);background:var(--c-lime);transform:translateX(var(--pill-x,0));transition:transform .5s var(--spring,var(--ease)),width .5s var(--spring,var(--ease))}
  .cx-cefr__picker.is-enhanced .cx-cefr__chip[aria-current="true"]{background:transparent}
  /* The list is a base .rail (swipe, snap, bleed, progress meter) on phones */
  .cx-cefr__cards.rail{--rail-w:88%;position:relative;border-top:0}
  .cx-level{scroll-snap-align:start;min-width:0;padding:20px 20px 22px;border:1px solid rgba(255,250,243,.18);border-radius:var(--radius-card);background:rgba(255,250,243,.05)}
  .cx-level:target{border-color:var(--c-lime)}
}
@media (max-width:767.98px) and (prefers-reduced-motion:reduce){.cx-cefr__chips::before,.cx-cefr__picker.is-enhanced .cx-cefr__chips::before,.cx-cefr__chip{transition:none}.cx-cefr__chip:active{transform:none}}
@media (min-width:768px){
  .cx-cefr__cards{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  /* 768–1023: undo the base .rail (< 1024) — tablets keep the 2-column level list */
  .cx-cefr__cards.rail{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 40px!important;margin-inline:0!important;padding:0!important;overflow:visible;scroll-snap-type:none}
  .cx-cefr__cards.rail + .rail-meter{display:none}
}
@media (min-width:1200px){
  /* overflow:clip (not hidden) keeps the band's crop but lets the table header stick to the viewport */
  .cx-cefr{overflow:clip}
  .cx-cefr__cards{display:none}
  .cx-cefr__table-wrap{display:block}
  .cx-cefr__table{width:100%;border-collapse:separate;border-spacing:0;text-align:center;table-layout:fixed;color:var(--c-cream)}
  .cx-cefr__table thead th{position:sticky;top:calc(var(--header-h) - 1px);z-index:2;padding:16px 8px 16px;background:var(--c-ink);border-bottom:1px solid var(--c-lime);font-size:clamp(15px,1.15vw,17px);font-weight:700;line-height:1.3;color:var(--c-lime);vertical-align:bottom}
  .admin-bar .cx-cefr__table thead th{top:calc(var(--header-h) + var(--wp-admin--admin-bar--height,32px) - 1px)}
  .cx-cefr__table thead th:first-child{text-align:left}
  .cx-cefr__table thead th:nth-child(1){width:12%}
  .cx-cefr__table thead th:nth-child(2){width:24%}
  .cx-cefr__table thead th:nth-child(6){width:18%}
  .cx-cefr__prog{display:block;white-space:nowrap}
  .cx-cefr__prog + .cx-cefr__prog{margin-top:6px;padding-top:6px;border-top:1px solid rgba(217,253,156,.35)}
  .cx-cefr__table tbody th,.cx-cefr__table td{padding:18px 8px;border-bottom:1px solid rgba(255,250,243,.14);font-size:16px;font-weight:600;line-height:1.3;vertical-align:middle;font-variant-numeric:tabular-nums;transition:background-color .2s var(--ease)}
  /* Level code column in display weight */
  .cx-cefr__table tbody th.cx-cefr__code{text-align:left;font-size:clamp(30px,2.5vw,38px);font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--c-cream);transition:color .2s var(--ease),background-color .2s var(--ease)}
  .cx-cefr__table thead th{background-image:linear-gradient(var(--c-green),var(--c-green));background-repeat:no-repeat;background-position:50% 100%;background-size:0 3px;transition:background-size .3s var(--spring,var(--ease))}
  .cx-cefr__table tbody th.cx-cefr__code:focus-visible{outline:3px solid var(--c-cream);outline-offset:-3px}
  .cx-cefr__name{font-weight:700}
  .cx-cefr__vi{font-weight:400;color:rgba(255,250,243,.78)}
  .cx-cefr__table td[rowspan],.cx-cefr__table td.cx-vstep{white-space:nowrap;padding-inline:2px}
  .cx-cefr__table td[rowspan]{border-left:1px solid rgba(255,250,243,.14);border-right:1px solid rgba(255,250,243,.14)}
  .cx-note--cefr{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;margin-top:40px;padding-top:28px}
  .cx-note--cefr .cx-note__title{font-size:20px}
  .cx-note--cefr .cx-note__text{margin:0;font-size:16px;line-height:1.6;max-width:62rem}
}

/* =====================================================================
   ARCHIVE · course lists — alternating track bands, huge outline level code, row cards
   < 1200: Figma course cards (1 col mobile, 2 col tablet). ≥ 1200: Figma "Course Toggle" rows, shown expanded.
   Breakpoint-only copy: .cx-v-d (desktop) / .cx-v-m (mobile + tablet).
   ===================================================================== */
@media (max-width:1199.98px){.cx-v-d{display:none!important}.cx-list__desc{display:none}}
@media (min-width:1200px){.cx-v-m{display:none!important}}
.cx-list{position:relative;overflow:hidden}
.cx-list__code{--dt-size:clamp(150px,40vw,300px);top:-.34em;right:-.1em}
@media (min-width:768px){.cx-list__code{top:-.2em}}
@media (min-width:1200px){.cx-list__code{--dt-size:clamp(320px,26vw,460px);top:-.1em;right:-.06em}}
.cx-list__program{color:var(--c-green)}
.cx-list__grid{display:grid;gap:16px;margin:0;padding:0;list-style:none}
@media (max-width:1023.98px){.cx-list__grid.rail{--rail-w:min(86%,360px)}}
/* Snap edge = the column edge. (base.css 19.11 sets scroll-padding-inline:calc(50vw - 50%), but a percentage there
   resolves against the rail's own full-bleed width, i.e. 0, so a newly shown rail snapped 40px in.) */
@media (max-width:1023.98px){:is(.cx-list__grid,.cx-cefr__cards,.cd-methods__grid).rail{scroll-padding-inline:var(--gutter)}}
.cx-card-wrap{display:flex;min-width:0}
/* QA P1-11/12: ONE card layout in both tracks and at every width (no wide feature card, no mirrored thumbnail).
   < 1024: the textbook thumbnail (media slot 'cover-{slug}', same key as the detail hero) sits beside the level code
   only; title, goal and description run the full card width. ≥ 1024: the thumbnail spans code + title + goal. */
.cx-card{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;gap:16px;width:100%;min-width:0;padding:20px 20px 16px;border:1px solid rgba(var(--c-ink-rgb),.12);border-radius:var(--radius-card);background:var(--c-cream);color:var(--c-ink)}
.cx-card__top{display:grid;grid-template-columns:var(--thumb-w,72px) minmax(0,1fr);grid-template-areas:"thumb badge" "head head";column-gap:16px;row-gap:14px;min-width:0}
.cx-card__thumb{grid-area:thumb;align-self:start;display:block;overflow:hidden;border-radius:var(--radius-sm);box-shadow:0 14px 28px -22px rgba(var(--c-ink-rgb),.5)}
.cx-card__img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:inherit}
.cx-card__head{grid-area:head;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
/* Level code in display weight on an index rule; never split ("A / 1") */
.cx-card__badge{grid-area:badge;position:relative;display:block;align-self:end;padding-bottom:10px;font-size:36px;font-weight:900;line-height:1;letter-spacing:-.02em;white-space:nowrap;color:var(--c-ink);border-bottom:1px solid rgba(var(--c-ink-rgb),.14)}
.cx-card__badge::after{content:"";position:absolute;left:0;bottom:-1px;width:40px;height:3px;background:var(--c-green)}
.cx-card__title{margin:0;font-size:19px;font-weight:700;line-height:1.35;color:var(--c-ink)}
.cx-card__desc{margin:0;font-size:var(--fs-small);line-height:1.55;color:rgba(var(--c-ink-rgb),.78)}
.cx-card__body{min-width:0}
.cx-card__label{margin:0;font-size:18px;font-weight:700;line-height:1.3}
.cx-card__text{margin:0;font-size:var(--fs-small);line-height:1.55;color:rgba(var(--c-ink-rgb),.78)}
/* Swipe cards stay short (≤ ~560px): the long description is clamped to 4 lines; the full text is on the detail page. */
@media (max-width:1023.98px){.cx-card__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}}
.cx-card__cta{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;margin-top:auto;min-height:44px;font-size:15px;font-weight:700;line-height:1.3;color:var(--c-ink);text-decoration:none}
.cx-card__cta .icon-arrow{flex:none;transition:transform .2s var(--ease)}
/* Stretched link: the whole card is the target, with a single tab stop */
.cx-card__cta::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
/* Focus: the ring is drawn around the whole card (ink, 3px) instead of the small CTA */
.cx-card__cta:focus-visible{outline:none}
.cx-card:has(.cx-card__cta:focus-visible){outline:3px solid var(--c-ink);outline-offset:3px}
@supports not selector(:has(*)){.cx-card__cta:focus-visible::after{outline:3px solid var(--c-ink);outline-offset:3px}}
.cx-card:has(.cx-card__cta:active){transform:scale(.99)}
@media (hover:hover){.cx-card:hover .cx-card__cta .icon-arrow{transform:translateX(3px)}}
.cx-card:has(.cx-card__cta:focus-visible) .cx-card__cta .icon-arrow{transform:translateX(3px)}
@media (min-width:768px){
  .cx-card{padding:24px 24px 18px}
  .cx-card__top{--thumb-w:84px;column-gap:20px}
}
@media (min-width:1024px){
  .cx-list__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:24px}
  .cx-card{gap:0;padding:28px 28px 24px}
  .cx-card__top{--thumb-w:104px;grid-template-areas:"thumb badge" "thumb head";grid-template-rows:auto 1fr;column-gap:24px;row-gap:14px}
  .cx-card__badge{align-self:start}
  .cx-card__body{margin:22px 0;padding-top:20px;border-top:1px solid rgba(var(--c-ink-rgb),.1)}
  .cx-card__cta{align-self:end;justify-self:start;padding:10px 22px;border:1px solid rgba(var(--c-ink-rgb),.2);border-radius:var(--radius-pill);background:transparent;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
  /* QA P2-23: subgrid, so "Mô tả lộ trình chuyên sâu" and the CTAs line up across each row of two cards. The wrap's
     bottom padding is the row gap (a subgrid spanning 3 rows would otherwise inherit it between its own rows). */
  @supports (grid-template-rows:subgrid){
    .cx-list__grid{row-gap:0}
    .cx-card-wrap{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;padding-bottom:24px}
    .cx-card{display:grid;grid-row:1 / -1;grid-template-rows:subgrid;row-gap:0}
    .cx-card__top{grid-row:1}
    .cx-card__body{grid-row:2;align-self:start}
    .cx-card__cta{grid-row:3}
  }
}
@media (min-width:1200px){
  .cx-card{padding:32px 36px 28px}
  .cx-card__top{--thumb-w:clamp(120px,10vw,150px);column-gap:28px;row-gap:16px}
  .cx-card__badge{font-size:clamp(44px,3.6vw,56px);padding-bottom:14px}
  .cx-card__badge::after{width:48px}
  .cx-card__title{font-size:22px;line-height:1.28}
  .cx-card__desc{font-size:15px;line-height:1.5}
  .cx-card__body{margin:24px 0;padding-top:22px}
  .cx-card__label{font-size:16px}
  .cx-card__text{margin-top:8px;font-size:16px;line-height:1.55}
}
@media (min-width:1024px) and (hover:hover){.cx-card:hover .cx-card__cta{border-color:var(--c-ink);background:var(--c-ink);color:var(--c-lime)}}
@media (min-width:1024px){.cx-card:has(.cx-card__cta:focus-visible) .cx-card__cta{border-color:var(--c-ink);background:var(--c-ink);color:var(--c-lime)}}

/* =====================================================================
   ARCHIVE · testimonials (cream + grain)
   ===================================================================== */
.cx-feedback__head{margin-bottom:var(--heading-gap)}
.cx-feedback .h2{font-weight:900}
/* Copied from the homepage feedback carousel so the archive does not depend on home.css. */
.cx-carousel [data-carousel-track]{margin-inline-end:calc((100% - 100vw) / 2);padding-inline-end:var(--gutter);scroll-padding-inline:0}
.cx-feedback .carousel-slide{--slide-w:min(86%,420px)}
.cx-feedback__img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid rgba(var(--c-ink-rgb),.12);border-radius:var(--radius-card)}
.cx-carousel__nav{justify-content:center;gap:16px;margin-top:24px}
.cx-carousel__status{min-width:3.5em;text-align:center}
@media (min-width:768px){.cx-feedback .carousel-slide{--slide-w:360px}}
@media (min-width:1200px){
  .cx-carousel [data-carousel-track]{gap:22px;align-items:center}
  .cx-carousel__nav{margin-top:30px;gap:14px}
  /* Figma composition: small · large · small */
  .cx-feedback .carousel-slide{--slide-w:340px}
  .cx-feedback .carousel-slide:nth-child(2){--slide-w:550px}
}

/* =====================================================================
   Motion: every transition/transform off under reduced motion (content always visible)
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .cx-card,.cd-step,.cx-card__cta,.cx-card__cta .icon-arrow,.cd-method,.cx-cefr__table td,.cx-cefr__table th,.cx-card__thumb img{transition:none}
  .cx-card:hover .cx-card__thumb img,.cx-card:has(:focus-visible) .cx-card__thumb img{transform:none}
  .cx-card:has(.cx-card__cta:active),.cx-card:hover .cx-card__cta .icon-arrow{transform:none}
}

/* =====================================================================
   Orphan control (client rule: no line ending with 1–2 words).
   ===================================================================== */
.course-detail-page .section-heading__desc,.courses-page .section-heading__desc,
.cd-hero__desc,.cd-topics__desc,.cd-method__desc{text-wrap:balance}
/* Sentence-length list items fill the full column: `pretty`, never `balance`. */
.cd-skills__label,.cd-outcomes__text,.cd-step__desc,.cd-roadmap__lead{text-wrap:pretty}
.cx-hero__desc,.cx-note__text,.cx-card__desc,.cx-card__text{text-wrap:pretty}
.cd-br{display:inline}
@media (min-width:768px) and (max-width:1199.98px){.cd-br{display:none}.cd-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
.cx-br-m{display:inline}
@media (min-width:768px){.cx-br-m{display:none}}
@media (min-width:1200px){
  .course-detail-page .section-heading,.courses-page .section-heading{max-width:none}
  .course-detail-page .section-heading__desc,.courses-page .section-heading__desc{max-width:64rem}
}
@media (max-width:767.98px){.cx-cefr .h2{font-size:26px}}
/* Feedback title: "The Metaphoric Mind?" is a no-break unit; on phones the size fits it to the container. */
@media (max-width:767.98px){.cx-feedback .h2{font-size:min(var(--fs-h2),calc((100vw - 2 * var(--gutter)) / 11.9))}}

/* =====================================================================
   ARCHIVE · Round 4: one band, two tracks behind a segmented control ([data-tabs], main.js)
   A cream pill track with an olive pill that slides under the active tab. Without JS (no .is-enhanced) both panels
   show one after the other, separated by a hairline.
   ===================================================================== */
.cx-tracks{position:relative}
.cx-tabs__list{position:relative;display:inline-flex;gap:4px;max-width:100%;margin:0 0 var(--heading-gap);padding:5px;border:1px solid rgba(var(--c-ink-rgb),.1);border-radius:var(--radius-pill);background:var(--c-cream);box-shadow:0 14px 32px -24px rgba(var(--c-ink-rgb),.45)}
.cx-tabs__list::before{content:"";position:absolute;top:5px;bottom:5px;left:0;width:var(--tab-w,0);border-radius:var(--radius-pill);background:var(--c-ink);transform:translateX(var(--tab-x,0));transition:transform .45s var(--ease),width .45s var(--ease)}
.cx-tabs__tab{position:relative;z-index:1;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:56px;padding:8px 22px;border-radius:var(--radius-pill);text-align:left;color:var(--c-ink);transition:color .3s var(--ease)}
.cx-tabs__track{font-size:16px;font-weight:800;line-height:1.2;white-space:nowrap}
.cx-tabs__name{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;opacity:.78}
/* The selected tab also takes the ink fill itself once the pill has arrived (so its text contrast is real, not only
   painted by the pseudo-element). */
.cx-tabs__tab[aria-selected="true"]{color:var(--c-cream);background:var(--c-ink);transition:color .3s var(--ease),background-color 0s linear .42s}
.cx-tabs__tab[aria-selected="true"] .cx-tabs__track{color:var(--c-lime)}
@media (hover:hover){.cx-tabs__tab[aria-selected="false"]:hover{background:rgba(var(--c-ink-rgb),.05)}}
.cx-tabs__tab:focus-visible{outline:3px solid var(--c-ink);outline-offset:2px}
.cx-tabs__tab:active{transform:scale(.97)}
.cx-tabs:not(.is-enhanced) .cx-list + .cx-list{margin-top:var(--section-y);padding-top:var(--section-y);border-top:1px solid rgba(var(--c-ink-rgb),.14)}
.cx-tabs.is-enhanced .cx-list:not([hidden]){animation:cx-panel-in .35s var(--ease) both}
@keyframes cx-panel-in{from{opacity:0}}
/* Research P12: the new panel's cards slide 24px in from the side of the chosen tab (Đời sống = left, Công việc =
   right), one after another, on the spring curve. */
.cx-tabs.is-enhanced:has(#tab-doi-song[aria-selected="true"]) .cx-list:not([hidden]) .cx-card-wrap{animation:cx-card-from-left .7s var(--spring,var(--ease)) both}
.cx-tabs.is-enhanced:has(#tab-cong-viec[aria-selected="true"]) .cx-list:not([hidden]) .cx-card-wrap{animation:cx-card-from-right .7s var(--spring,var(--ease)) both}
.cx-tabs.is-enhanced .cx-list:not([hidden]) .cx-card-wrap:nth-child(2){animation-delay:.05s}
.cx-tabs.is-enhanced .cx-list:not([hidden]) .cx-card-wrap:nth-child(3){animation-delay:.1s}
.cx-tabs.is-enhanced .cx-list:not([hidden]) .cx-card-wrap:nth-child(4){animation-delay:.15s}
.cx-tabs.is-enhanced .cx-list:not([hidden]) .cx-card-wrap:nth-child(n+5){animation-delay:.2s}
@keyframes cx-card-from-left{from{opacity:0;transform:translateX(-24px)}}
@keyframes cx-card-from-right{from{opacity:0;transform:translateX(24px)}}
/* Both tracks now sit on the warm band: cards are cream. */
@media (max-width:420px){.cx-tabs__list{display:flex}.cx-tabs__tab{flex:1 1 0;min-width:0;padding-inline:12px}.cx-tabs__track{font-size:14px;white-space:normal}.cx-tabs__name{font-size:12px;letter-spacing:.04em}}
@media (min-width:1200px){.cx-tabs__tab{min-height:64px;padding:10px 30px}.cx-tabs__track{font-size:18px}}
@media (prefers-reduced-motion:reduce){.cx-tabs__list::before,.cx-tabs.is-enhanced .cx-list:not([hidden]),.cx-tabs.is-enhanced .cx-list:not([hidden]) .cx-card-wrap{transition:none;animation:none}}

/* DETAIL · hero on phones (QA P1-9): eyebrow, H1 and intro run full width; then the cover (132px) sits BESIDE the spec
   list, so it no longer floats small at the left over dead space. The copy wrapper dissolves (display:contents) so its
   children join the hero grid. Its lime block aligns with the cover's top edge and bleeds off the left edge. */
@media (max-width:767.98px){
  .cd-hero__grid{grid-template-columns:132px minmax(0,1fr);grid-template-areas:"eyebrow eyebrow" "title title" "desc desc" "cover meta" "form form";column-gap:20px;row-gap:0;align-items:start}
  .cd-hero__copy{display:contents}
  .cd-hero__eyebrow{grid-area:eyebrow}
  /* "Giao tiếp Công việc" never breaks (a 2-syllable last line); the size fits it to the column, still > h2 */
  .cd-hero__title{grid-area:title;font-size:min(var(--fs-h1),calc((100vw - 2 * var(--gutter)) / 10))}
  .cd-hero__line{white-space:nowrap}
  .cd-hero__desc{grid-area:desc}
  .cd-cover{grid-area:cover;width:100%;margin:28px 0 0}
  .cd-cover::before{left:auto;right:50%;top:0;bottom:-20px;width:100vw;border-radius:0 var(--radius-card) var(--radius-card) 0}
  .cd-meta{grid-area:meta;margin-top:20px}
  .cd-meta__item{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 0 8px}
  .cd-meta dd{font-size:19px}
  .cd-hero__form{grid-area:form;margin-top:48px}
}
@media (max-width:420px){.cx-tabs__pre{display:none}.cx-tabs__track{font-size:16px;white-space:nowrap}}

/* DETAIL · section index (audit 24 Sep; QA P1-2/P1-22/P2-12, research P13). An OPAQUE cream bar with a hairline (no grey
   glass over the ink roadmap) sticks under the header inside .cd-flow, so it ends before the registration band. main.js
   sets aria-current on the chip of the section being read; the inline script in detail-toc.php slides one ink pill
   between chips, centres the active chip on phones and fades whichever edge of the chip row is clipped. */
:root:has(.cd-toc){scroll-padding-top:calc(var(--header-h) + 76px)}
.cd-flow{position:relative}
.cd-toc{position:sticky;top:calc(var(--header-h) - var(--header-shrink, 0px));z-index:90;border-block:1px solid rgba(var(--c-ink-rgb),.1);background:var(--c-cream)}
.cd-toc__inner{display:flex;align-items:center;gap:16px;min-height:60px}
ol.cd-toc__list{position:relative;display:flex;flex:1;gap:4px;min-width:0;margin:0 calc(var(--gutter) * -1);padding:8px var(--gutter);list-style:none;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:var(--gutter);
  --fade-s:0px;--fade-e:0px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-s),#000 calc(100% - var(--fade-e)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade-s),#000 calc(100% - var(--fade-e)),transparent)}
ol.cd-toc__list.is-clip-start{--fade-s:40px}
ol.cd-toc__list.is-clip-end{--fade-e:40px}
.cd-toc__list::-webkit-scrollbar{display:none}
.cd-toc__list li{position:relative;z-index:1;flex:none}
.cd-toc__link{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--radius-pill);font-size:15px;font-weight:600;color:rgba(var(--c-ink-rgb),.78);text-decoration:none;white-space:nowrap;transition:background-color .22s var(--ease),color .22s var(--ease)}
@media (hover:hover){.cd-toc__link:hover{background:rgba(var(--c-ink-rgb),.06);color:var(--c-ink)}}
.cd-toc__link[aria-current="true"]{background:var(--c-ink);color:var(--c-lime)}
/* Enhanced: one ink pill slides under the active chip (the chip itself stays transparent) */
ol.cd-toc__list::before{content:"";position:absolute;z-index:0;top:8px;left:0;height:44px;width:var(--pill-w,0);border-radius:var(--radius-pill);background:var(--c-ink);opacity:0;transform:translateX(var(--pill-x,0));transition:transform .5s var(--spring,var(--ease)),width .5s var(--spring,var(--ease)),opacity .2s var(--ease)}
.cd-toc.is-enhanced.has-active ol.cd-toc__list::before{opacity:1}
.cd-toc.is-enhanced .cd-toc__link[aria-current="true"]{background:transparent}
@media (hover:hover){.cd-toc.is-enhanced .cd-toc__link[aria-current="true"]:hover{background:transparent;color:var(--c-lime)}}
.cd-toc__link:focus-visible{outline:3px solid var(--c-ink);outline-offset:-3px}
.cd-toc__link[aria-current="true"]:focus-visible{outline-color:var(--c-green)}
.cd-toc__link:active{transform:scale(.96)}
.cd-toc__cta{display:none;flex:none}
@media (min-width:1024px){ol.cd-toc__list{margin:0;padding:8px 0}.cd-toc__cta{display:inline-flex}.cd-toc__inner{min-height:68px}}
@media (prefers-reduced-motion:reduce){.cd-toc__link,ol.cd-toc__list::before{transition:none}.cd-toc__link:active{transform:none}}
/* "Vì sao chọn" now sits on the warm band right after the hero: its cards are cream. */
.cd-methods .cd-method{background:var(--c-cream)}
/* ARCHIVE · hero on phones/tablets (audit P2): the textbook collage follows the copy and CTA, smaller, instead of
   being hidden — the lime field gets real learning material. */
@media (max-width:1199.98px){
  .cx-hero__media{display:block;position:relative;max-width:420px;margin:8px 0 0;padding:14px}
  .cx-hero{padding-bottom:56px}
}
/* CEFR table (research P2): the row under the pointer or keyboard focus lights up and its level code turns lime; the
   hovered column's header gets an olive underline. Merged-cell groups still light together (main.js adds .is-hl). */
@media (min-width:1200px){
  .cx-cefr__table tbody tr:has(th.cx-cefr__code:focus-visible) > *{background-color:rgba(255,250,243,.07)}
  .cx-cefr__table tbody tr:has(th.cx-cefr__code:focus-visible) > th.cx-cefr__code,.cx-cefr__table tr.is-hl > th.cx-cefr__code{color:var(--c-lime)}
}
@media (min-width:1200px) and (hover:hover){
  .cx-cefr__table tbody tr:hover > *{background-color:rgba(255,250,243,.07)}
  .cx-cefr__table tbody tr:hover > th.cx-cefr__code{color:var(--c-lime);box-shadow:inset 3px 0 0 var(--c-lime)}
  .cx-cefr__table:has([data-col="1"]:hover) thead th:nth-child(1),.cx-cefr__table:has([data-col="2"]:hover) thead th:nth-child(2),
  .cx-cefr__table:has([data-col="3"]:hover) thead th:nth-child(3),.cx-cefr__table:has([data-col="4"]:hover) thead th:nth-child(4),
  .cx-cefr__table:has([data-col="5"]:hover) thead th:nth-child(5),.cx-cefr__table:has([data-col="6"]:hover) thead th:nth-child(6),
  .cx-cefr__table:has([data-col="7"]:hover) thead th:nth-child(7){background-size:100% 3px}
}
@media (min-width:1200px){.cx-cefr__table:has([data-col="1"]:focus-visible) thead th:nth-child(1){background-size:100% 3px}}
@media (hover:hover){
  .cx-cefr__table tr.is-hl > :is(td,th),.cx-cefr__table td.is-hl{background-color:rgba(255,250,243,.07)}
  .cx-cefr__table tr.is-hl > :first-child{box-shadow:inset 3px 0 0 var(--c-lime)}
  .cx-cefr__table td.is-hl{box-shadow:inset 0 0 0 1px rgba(217,253,156,.35)}
}
/* Hero images larger (24 Sep): archive book collage and the detail textbook cover. */
@media (min-width:1200px){
  .cx-hero__grid{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:40px}
  .cx-hero__media{margin-right:calc(var(--gutter) * -.5)}
  .cd-hero__grid{grid-template-columns:minmax(0,1fr) clamp(340px,30vw,440px)}
  .cd-cover{width:min(100% - 40px,400px)}
}
@media (max-width:1199.98px){.cx-hero__media{max-width:520px}}