/* Be Vietnam Pro vietnamese 400 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-400-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Be Vietnam Pro latin-ext 400 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Be Vietnam Pro latin 400 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Be Vietnam Pro vietnamese 500 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-500-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Be Vietnam Pro latin-ext 500 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Be Vietnam Pro latin 500 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Be Vietnam Pro vietnamese 600 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Be Vietnam Pro latin-ext 600 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Be Vietnam Pro latin 600 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Be Vietnam Pro vietnamese 700 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-700-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Be Vietnam Pro latin-ext 700 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Be Vietnam Pro latin 700 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Owner override 2026-10-23: teal core and Be Vietnam Pro; locale grounds and language semantics retained.
   --agave is a legacy alias for the shared teal action, not the former green. */
/* Yes You Can CNA — "Sổ tay ôn thi" tokens for the Vietnamese site (one family, cream, deep green, brick for critical points only).
   Light values first; dark applies with the system setting unless the page is
   explicitly light, and always with the study desk's data-theme="midnight". */
:root {
  color-scheme: light;
  --marfil: #fbf8f1;          /* page background: very light cream */
  --papel: #f4efe3;           /* cards, raised surfaces */
  --papel-2: #ebe5d5;         /* bars, term chips */
  --tinta: #1e1b16;           /* body text, about 16:1 on cream */
  --tinta-2: #4a453b;         /* secondary text, about 9:1 */
  --agave: #00756d;           /* primary action, links, progress, correct */
  --agave-2: #005e58;         /* hover; text on agave-tenue */
  --agave-tenue: #dcf1ee;     /* soft fills */
  --on-agave: #ffffff;        /* text on agave */
  --marino: #234a37;          /* English exam language, official names (deep green, not blue) */
  --puente-en: #1b3f2e;       /* English half of the bridge card */
  --on-marino: #f6f2e8;       /* text on puente-en */
  --terracota: #595243;       /* approved neutral label grey; 7:1 on cream (brick is kept for critical points) */
  --ambar-tenue: #f7e6e1;     /* critical step / needs review only (brick tint) */
  --ambar-tinta: #7c2f24;
  --linea: #ddd6c5;
  --linea-fuerte: #837b6a;
  --acierto: #00756d;
  --acierto-fondo: #dcf1ee;
  --error: #9a3b2e;           /* brick */
  --error-fondo: #f7e6e1;
  --foco: #1d4f91;
  --glosa: #5a3e7a;
  --on-glosa: #fbf8f1;

  --font-titulo: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-texto: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --texto: 1.125rem;          /* 18px body on phones (panel of record) */
  --texto-chico: 1rem;        /* 16px minimum for secondary text */
  --etiqueta: 1rem;           /* 16px minimum for tags and eyebrows */
  --enunciado: 1.1875rem;     /* 19px question stems */
  --h1: clamp(1.75rem, 7vw, 3.5rem);
  --h2: clamp(1.4rem, 5.2vw, 2.25rem);
  --h3: 1.25rem;
  --cifra: clamp(2.2rem, 8.5vw, 3.5rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 16px;
  --ancho: 72rem;
  --lectura: 40rem;
  --r-boton: 8px;
  --r-opcion: 12px;
  --r-tarjeta: 16px;
  --toque: 48px;
}

/* Text-size control (A / A+ / A++ = 18 / 20 / 22 px body): everything is in rem, so the root scales. */
html.vi-chu-2 { font-size: 111.11%; }
html.vi-chu-3 { font-size: 122.22%; }

@media (min-width: 900px) {
  :root { --gutter: 32px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --marfil: #17150f; --papel: #201d16; --papel-2: #2a261d;
    --tinta: #f3eddf; --tinta-2: #c6bead;
    --agave: #48cdbe; --agave-2: #7eddd1; --agave-tenue: #143640; --on-agave: #0f1d16;
    --marino: #7eddd1; --puente-en: #1c3328; --on-marino: #f3eddf;
    --terracota: #c4bba8; --ambar-tenue: #3a211c; --ambar-tinta: #eba596;
    --linea: #38342a; --linea-fuerte: #7d7563;
    --acierto: #8fcaa5; --acierto-fondo: #143640; --error: #eba596; --error-fondo: #3a211c;
    --foco: #9cc3f5; --glosa: #c9b2e6; --on-glosa: #17150f;
  }
}

:root[data-theme="midnight"], :root[data-theme="dark"] {
  color-scheme: dark;
  --marfil: #17150f; --papel: #201d16; --papel-2: #2a261d;
  --tinta: #f3eddf; --tinta-2: #c6bead;
  --agave: #48cdbe; --agave-2: #7eddd1; --agave-tenue: #143640; --on-agave: #0f1d16;
  --marino: #7eddd1; --puente-en: #1c3328; --on-marino: #f3eddf;
  --terracota: #c4bba8; --ambar-tenue: #3a211c; --ambar-tinta: #eba596;
  --linea: #38342a; --linea-fuerte: #7d7563;
  --acierto: #8fcaa5; --acierto-fondo: #143640; --error: #eba596; --error-fondo: #3a211c;
  --foco: #9cc3f5; --glosa: #c9b2e6; --on-glosa: #17150f;
}

/* Base, layout and shell components shared by every Vietnamese page. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--font-texto);
  font-size: var(--texto);
  line-height: 1.65;
  hyphens: manual;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
h1, h2, h3 {
  font-family: var(--font-titulo);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 var(--s4);
  text-wrap: balance;
  hyphens: manual;
}
h1 { font-size: var(--h1); font-weight: 700; max-width: 18ch; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.4; }
p, ul, ol { margin: 0 0 var(--s4); }
p, li { max-width: var(--lectura); hyphens: manual; }
summary, dt, button, .vi-opcion, .vi-temas a, .vi-nav a { hyphens: manual; }
a { color: var(--agave); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--agave-2); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 2px; }
[lang="en"] { font-variant-ligatures: none; }
.term, abbr { color: var(--marino); font-weight: 600; }
.ui-term { font-family: var(--font-texto); font-weight: 600; font-size: 0.92em; background: var(--papel-2); color: var(--marino); border-radius: 4px; padding: 0 0.3em; white-space: nowrap; }
strong { font-weight: 600; }
em, i, cite, dfn, address { font-style: normal; }
.trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vi-wrap, .vi-main { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.vi-main { padding-block: var(--s6) var(--s8); }
.vi-section { padding-block: var(--s7); border-top: 1px solid var(--linea); }
.vi-section:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .vi-section { padding-block: var(--s8); } }

/* Small label above a heading: sentence case, normal spacing, at least 15 px. */
.vi-etiqueta { display: block; font-size: var(--etiqueta); font-weight: 600; color: var(--terracota); margin-bottom: var(--s2); }
.vi-lede { font-size: 1.15em; color: var(--tinta-2); max-width: 36rem; }
.vi-nota { font-size: var(--texto-chico); color: var(--tinta-2); }

.vi-skip { position: absolute; left: var(--s4); top: -100px; background: var(--agave); color: var(--on-agave); padding: var(--s3) var(--s4); border-radius: var(--r-boton); z-index: 20; }
.vi-skip:focus { top: var(--s4); }

.vi-header { border-bottom: 1px solid var(--linea); background: var(--marfil); }
.vi-header__inner { max-width: var(--ancho); margin-inline: auto; padding: var(--s3) var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.vi-brand { font-family: var(--font-titulo); font-weight: 600; font-size: 1.25rem; color: var(--tinta); text-decoration: none; margin-right: auto; white-space: nowrap; }
.vi-brand b { color: var(--agave); }
.vi-nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); order: 3; width: 100%; }
.vi-nav a { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: var(--texto-chico); min-height: var(--toque); display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
.vi-nav a[aria-current="page"] { border-bottom-color: var(--terracota); }
.vi-nav a:hover { color: var(--agave); }
.vi-lang { display: inline-flex; gap: var(--s2); align-items: center; font-size: var(--texto-chico); color: var(--tinta-2); }
.vi-lang a { min-height: var(--toque); display: inline-flex; align-items: center; color: var(--tinta-2); }
.vi-lang { order: 2; margin-right: auto; flex-wrap: wrap; }
.vi-cochu { order: 2; display: inline-flex; gap: var(--s1); align-items: center; }
.vi-cochu__nhan { font-size: var(--texto-chico); color: var(--tinta-2); margin-right: var(--s1); white-space: nowrap; }
@media (max-width: 480px) { .vi-header__inner { column-gap: var(--s3); } .vi-cochu button { min-width: 44px; min-height: 44px; } }
.vi-cochu button { min-width: var(--toque); min-height: var(--toque); padding: 0 var(--s2); border-radius: var(--r-boton); border: 2px solid var(--linea-fuerte); background: transparent; color: var(--tinta); font: 600 1rem/1 var(--font-texto); cursor: pointer; }
.vi-cochu button[data-size="2"] { font-size: 1.125rem; }
.vi-cochu button[data-size="3"] { font-size: 1.25rem; }
.vi-cochu button[aria-pressed="true"] { background: var(--agave); border-color: var(--agave); color: var(--on-agave); }
.vi-lang a[aria-current="page"] { color: var(--tinta); font-weight: 600; text-decoration: none; }
@media (min-width: 900px) {
  .vi-nav { order: 0; width: auto; gap: var(--s5); }
}

.vi-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--toque); padding: var(--s3) var(--s5); border-radius: var(--r-boton); border: 2px solid var(--agave); background: var(--agave); color: var(--on-agave); font: 600 1rem/1.2 var(--font-texto); text-decoration: none; cursor: pointer; text-align: center; }
.vi-boton:hover { background: var(--agave-2); border-color: var(--agave-2); color: var(--on-agave); }
.vi-boton--secundario { background: transparent; color: var(--agave); }
.vi-boton--secundario:hover { background: var(--agave-tenue); color: var(--agave-2); }
.vi-boton[disabled], .vi-boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.vi-acciones { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

input, textarea, select, button { font: inherit; color: inherit; }
label { display: block; font-weight: 600; margin: var(--s4) 0 var(--s2); }
input[type="email"], input[type="text"], input[type="date"], input[type="number"], input[type="search"], textarea, select {
  width: 100%; max-width: 32rem; min-height: var(--toque); padding: var(--s2) var(--s3);
  background: var(--marfil); border: 1px solid var(--linea-fuerte); border-radius: var(--r-boton);
}
textarea { min-height: 7rem; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--agave); }
[role="status"]:empty { display: none; }
[role="status"] { margin-top: var(--s3); font-weight: 600; }

.vi-transparency { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--papel); }
.vi-transparency p { margin: 0; padding-block: var(--s5); font-size: var(--texto-chico); color: var(--tinta-2); max-width: 52rem; }
.vi-footer { padding-block: var(--s6) var(--s7); font-size: var(--texto-chico); color: var(--tinta-2); }
.vi-footer__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); max-width: none; }
.vi-footer__links a { color: var(--tinta-2); min-height: 2.25rem; display: inline-flex; align-items: center; }

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

/* Shared mark, approved 2026-10-23; locale wordmark and navigation stay intact. */
.vi-brand { display:inline-flex;align-items:center;gap:8px }
.vi-brand::before { content:"";width:30px;height:30px;flex:none;background:url("/brand-mark-animated.svg") center/contain no-repeat }

/* Shared components of the Vietnamese site. Markup contract: build-contract.md.
   Only tokens from 00-tokens.css; every state also carries an icon or a word. */

/* ---------- Question card ---------- */
.vi-pregunta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--s5) var(--s4); margin-block: var(--s5); max-width: 46rem; box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--tinta) 45%, transparent); }
@media (min-width: 900px) { .vi-pregunta { padding: var(--s6); } }
.vi-pregunta__meta { font-size: var(--etiqueta); font-weight: 600; color: var(--terracota); margin-bottom: var(--s3); max-width: none; }
.vi-pregunta__enunciado { font-family: var(--font-titulo); font-weight: 600; font-size: clamp(var(--enunciado), 5vw, 1.75rem); line-height: 1.4; max-width: none; margin-bottom: var(--s4); }
.vi-opciones { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: 10px; }
.vi-opciones li { max-width: none; }
.vi-opcion { display: flex; align-items: flex-start; gap: 14px; width: 100%; min-height: 56px; text-align: left; padding: 14px 16px; background: var(--marfil); color: var(--tinta); border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-opcion); font: 500 1.125rem/1.35 var(--font-texto); cursor: pointer; }
.vi-opcion:hover:not([aria-disabled="true"]) { border-color: var(--agave); background: var(--agave-tenue); }
.vi-opcion[aria-disabled="true"] { cursor: default; }
.vi-opcion__letra { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid currentColor; border-radius: 50%; font: 600 0.9375rem/1 var(--font-texto); }
.vi-opcion__texto { flex: 1; min-width: 0; padding-top: 3px; }
.vi-opcion__marca { flex: none; margin-left: auto; display: inline-flex; padding-top: 3px; }
.vi-opcion.is-correcta { background: var(--acierto-fondo); border-color: var(--acierto); }
.vi-opcion.is-correcta .vi-opcion__letra, .vi-opcion.is-correcta .vi-opcion__marca { color: var(--acierto); }
.vi-opcion.is-incorrecta { background: var(--error-fondo); border-color: var(--error); }
.vi-opcion.is-incorrecta .vi-opcion__letra, .vi-opcion.is-incorrecta .vi-opcion__marca { color: var(--error); }
.vi-pregunta__estado { display: flex; align-items: center; gap: var(--s2); font-weight: 600; margin: 0 0 var(--s4); max-width: none; }
.vi-pregunta__estado.is-correcta { color: var(--acierto); }
.vi-pregunta__estado.is-incorrecta { color: var(--error); }
.vi-pregunta__estado svg { flex: none; }

/* ---------- Answer reveal, "Para recordar", source ---------- */
.answer-reveal { margin-bottom: var(--s5); border-top: 1px solid var(--linea); padding-top: var(--s2); }
.answer-reveal > summary { display: flex; align-items: center; gap: var(--s3); min-height: var(--toque); font-weight: 600; color: var(--agave); cursor: pointer; list-style: none; }
.answer-reveal > summary::-webkit-details-marker { display: none; }
.answer-reveal > summary::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; margin-left: 4px; }
.answer-reveal[open] > summary::before { transform: rotate(45deg); }
.vi-respuesta__correcta { margin-top: var(--s3); }
.vi-recordar { background: var(--agave-tenue); border-left: 4px solid var(--agave); border-radius: 0 var(--r-opcion) var(--r-opcion) 0; padding: var(--s3) var(--s4); margin-block: var(--s4); }
.vi-recordar .vi-etiqueta { color: var(--agave-2); margin-bottom: var(--s1); }
.vi-recordar p:last-child { margin-bottom: 0; }
.vi-fuente { font-size: var(--texto-chico); color: var(--tinta-2); margin-bottom: 0; }

/* ---------- Bilingual bridge ---------- */
.vi-puente { border-radius: var(--r-tarjeta); overflow: hidden; border: 1px solid var(--linea); background: var(--papel); }
.vi-puente__es { padding: var(--s4) var(--s4) var(--s3); }
.vi-puente__en { padding: var(--s4); background: var(--puente-en); color: var(--on-marino); }
.vi-puente p { max-width: none; }
.vi-puente__es p { margin: var(--s2) 0 0; font-size: 1.125rem; }
.vi-puente__en p[lang] { margin: var(--s2) 0 var(--s4); font: 600 1.3rem/1.3 var(--font-texto); }
.vi-pildora { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 600 0.9375rem/1.4 var(--font-texto); background: var(--agave-tenue); color: var(--agave-2); }
.vi-pildora--en { background: var(--on-marino); color: var(--puente-en); }
.vi-escuchar { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--toque); padding: var(--s2) var(--s4); border-radius: var(--r-boton); border: 2px solid var(--agave); background: transparent; color: var(--agave); font: 600 1rem/1.2 var(--font-texto); cursor: pointer; }
.vi-escuchar::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4.03v8.05A4.5 4.5 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4.03v8.05A4.5 4.5 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54z'/%3E%3C/svg%3E") center / contain no-repeat; }
.vi-escuchar:hover:not(:disabled) { background: var(--agave-tenue); color: var(--agave-2); }
.vi-escuchar.is-hablando { background: var(--agave-tenue); color: var(--agave-2); }
.vi-escuchar:disabled { opacity: 0.6; cursor: not-allowed; }
.vi-puente__en .vi-escuchar { border-color: var(--on-marino); color: var(--on-marino); }
.vi-puente__en .vi-escuchar:hover:not(:disabled), .vi-puente__en .vi-escuchar.is-hablando { background: var(--on-marino); color: var(--puente-en); }
.vi-puente__en :focus-visible { outline-color: var(--on-marino); }
.vi-escuchar--cham { border-color: var(--linea-fuerte); color: var(--tinta-2); font-weight: 500; }
.vi-escuchar--cham:hover:not(:disabled), .vi-escuchar--cham.is-hablando { border-color: var(--agave); }
.vi-puente__en .vi-escuchar--cham { border-color: var(--on-marino); color: var(--on-marino); opacity: 0.85; }
.vi-cau__legend { margin: var(--s2) 0 0; font-size: max(1rem, 16px); line-height: 1.5; color: var(--tinta-2); max-width: none; }
.vi-chia-se-trang { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
[data-share-status] { font-weight: 600; color: var(--acierto); }
.vi-escuchar__nota { margin: var(--s3) 0 0; font-size: var(--texto-chico); }

/* ---------- Exam route and comparison box ---------- */
.vi-ruta { list-style: none; padding: 0; margin: var(--s5) 0; counter-reset: ruta; }
.vi-ruta__paso { position: relative; display: flex; gap: var(--s4); padding-bottom: var(--s5); max-width: 44rem; }
.vi-ruta__paso:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: 4px; width: 2px; background: var(--linea-fuerte); }
.vi-ruta__num { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--terracota); border-radius: 50%; background: var(--marfil); color: var(--terracota); font: 600 1.35rem/1 var(--font-titulo); }
.vi-ruta__cuerpo { flex: 1; min-width: 0; padding-top: 6px; }
.vi-ruta__cuerpo p { margin-bottom: 0; }
.vi-comparar { display: grid; gap: var(--s4); margin-block: var(--s5); }
.vi-comparar > div { background: var(--papel); border: 1px solid var(--linea); border-top: 4px solid var(--agave); border-radius: var(--r-opcion); padding: var(--s4) var(--s4) var(--s3); }
.vi-comparar > div:last-child { border-top-color: var(--terracota); }
.vi-comparar h3 { margin-bottom: var(--s2); }
.vi-comparar p:last-child { margin-bottom: 0; }
@media (min-width: 700px) { .vi-comparar { grid-template-columns: 1fr 1fr; gap: var(--s5); } }

/* ---------- Topic list ---------- */
.vi-temas { list-style: none; padding: 0; margin: var(--s5) 0; border-bottom: 1px solid var(--linea); }
.vi-temas li { max-width: none; border-top: 1px solid var(--linea); padding: var(--s3) 0; }
.vi-temas a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); min-height: var(--toque); color: var(--tinta); text-decoration: none; }
.vi-temas a:hover .vi-temas__nombre { color: var(--agave); text-decoration: underline; text-decoration-thickness: 2px; }
.vi-temas__nombre { font-family: var(--font-titulo); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.vi-temas__conteo { font-size: var(--texto-chico); font-weight: 600; color: var(--terracota); white-space: nowrap; }
.vi-temas li p { margin: var(--s1) 0 0; color: var(--tinta-2); font-size: var(--texto-chico); }
@media (min-width: 900px) {
  .vi-temas { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
}

/* ---------- Checklist ---------- */
.vi-lista { margin-block: var(--s4); }
.vi-lista ul { list-style: none; padding: 0; margin: 0; }
.vi-lista li { max-width: none; border-top: 1px solid var(--linea); }
.vi-lista li:last-child { border-bottom: 1px solid var(--linea); }
.vi-lista__estado { font-size: var(--texto-chico); font-weight: 600; color: var(--tinta-2); margin-bottom: var(--s3); }
.vi-check { display: flex; align-items: flex-start; gap: var(--s3); min-height: var(--toque); margin: 0; padding: var(--s3) 0; font-weight: 500; cursor: pointer; }
.vi-check input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; }
.vi-check span { flex: 1; min-width: 0; }
.vi-check:has(input:checked) span { color: var(--tinta-2); }

/* ---------- Share ---------- */
.vi-compartir { display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque); padding: var(--s2) var(--s4); border-radius: var(--r-boton); color: var(--agave); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.vi-compartir:hover { background: var(--agave-tenue); color: var(--agave-2); }

/* ---------- Real warning only ---------- */
.vi-aviso { background: var(--ambar-tenue); color: var(--ambar-tinta); border-left: 4px solid var(--ambar-tinta); border-radius: 0 var(--r-opcion) var(--r-opcion) 0; padding: var(--s3) var(--s4); margin-block: var(--s4); }
.vi-aviso p:last-child { margin-bottom: 0; }
.vi-aviso a { color: inherit; }

/* ---------- Figures ---------- */
.vi-cifras { list-style: none; padding: 0; margin: var(--s5) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); border-top: 2px solid var(--tinta); padding-top: var(--s4); }
.vi-cifras li { max-width: none; font-size: var(--texto-chico); font-weight: 500; color: var(--tinta-2); line-height: 1.3; }
.vi-cifras strong { display: block; font-family: var(--font-titulo); font-weight: 600; font-size: var(--cifra); line-height: 1; color: var(--agave); margin-bottom: var(--s1); }
@media (min-width: 700px) { .vi-cifras { grid-template-columns: repeat(4, 1fr); } }

/* The language of the exam: navy is reserved for English exam language. */
.vi-idioma, .est-idioma { border-left: 4px solid var(--marino); padding-left: var(--s4); }
.vi-idioma p:last-child { margin-bottom: 0; }

/* ---------- Bridge card "vi-cau": English large and bold, listen button, small cue, Vietnamese beneath ---------- */
.vi-cau { border: 1px solid var(--linea); border-radius: var(--r-tarjeta); background: var(--papel); padding: var(--s5) var(--s4); margin-block: var(--s4); max-width: 40rem; }
.vi-cau p { max-width: none; }
.vi-cau__en { margin: 0 0 var(--s3); font: 700 1.25rem/1.3 var(--font-texto); color: var(--marino); overflow-wrap: anywhere; }
.vi-cau__nghe { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; border-radius: 50%; border: 2px solid var(--agave); background: transparent; color: var(--agave); font: 600 1rem/1 var(--font-texto); cursor: pointer; }
.vi-cau__nghe:has(.vi-cau__nghe-chu) { width: auto; border-radius: var(--r-boton); padding: 0 var(--s4); }
.vi-cau__nghe::before { content: ""; flex: none; width: 1.5rem; height: 1.5rem; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4.03v8.05A4.5 4.5 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4.03v8.05A4.5 4.5 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54z'/%3E%3C/svg%3E") center / contain no-repeat; }
.vi-cau__nghe:hover:not(:disabled), .vi-cau__nghe.is-hablando { background: var(--agave-tenue); color: var(--agave-2); }
.vi-cau__nghe:disabled { opacity: 0.6; cursor: not-allowed; }
.vi-cau__doc { margin: var(--s3) 0 0; font-size: max(1rem, 16px); font-weight: 400; line-height: 1.5; color: var(--tinta-2); }
.vi-cau__vi { margin: var(--s3) 0 0; font-size: var(--texto); font-weight: 400; line-height: 1.6; color: var(--tinta); padding-top: var(--s3); border-top: 1px solid var(--linea); }

/* ---------- Framed quote "vi-trich": Credentia language rules, transparency page ---------- */
.vi-trich { margin: var(--s5) 0; padding: var(--s4) var(--s5); background: var(--papel); border: 1px solid var(--linea); border-left: 5px solid var(--agave); border-radius: 0 var(--r-opcion) var(--r-opcion) 0; max-width: var(--lectura); }
.vi-trich p { max-width: none; margin: 0 0 var(--s3); line-height: 1.6; }
.vi-trich p:last-child { margin-bottom: 0; }
.vi-trich__nguon, .vi-trich cite { display: block; margin-top: var(--s3); font-size: var(--texto-chico); font-weight: 500; font-style: normal; color: var(--tinta-2); }
.vi-trich [lang="en"] { color: var(--marino); font-weight: 600; }

/* ---------- Fee table "vi-bang-le-phi": stacked cards under 480 px ---------- */
.vi-bang-le-phi { width: 100%; max-width: 46rem; border-collapse: collapse; margin-block: var(--s5); font-size: var(--texto); line-height: 1.5; }
.vi-bang-le-phi caption { text-align: left; font-weight: 600; padding-bottom: var(--s3); }
.vi-bang-le-phi th, .vi-bang-le-phi td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--linea); }
.vi-bang-le-phi thead th { font-size: var(--etiqueta); font-weight: 600; color: var(--tinta-2); border-bottom: 2px solid var(--tinta); }
.vi-bang-le-phi tbody th { font-weight: 600; }
.vi-bang-le-phi td:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 479px) {
  .vi-bang-le-phi, .vi-bang-le-phi tbody, .vi-bang-le-phi tr, .vi-bang-le-phi th, .vi-bang-le-phi td { display: block; width: 100%; }
  .vi-bang-le-phi thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vi-bang-le-phi tr { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-opcion); padding: var(--s2) 0; margin-bottom: var(--s3); }
  .vi-bang-le-phi th, .vi-bang-le-phi td { border-bottom: 0; padding: var(--s2) var(--s4); }
  .vi-bang-le-phi td[data-nhan]::before { content: attr(data-nhan); display: block; font-size: var(--etiqueta); font-weight: 500; color: var(--tinta-2); }
  .vi-bang-le-phi td:last-child { white-space: normal; font-size: 1.125rem; }
}

/* Pronunciation cues (cách đọc gần đúng) can be hidden per browser; vi-site.js
   toggles .vi-doc-an on <html> from [data-doc-toggle]. */
html.vi-doc-an .vi-cau__doc { display: none; }

/* Share actions are buttons (Web Share API), not links. */
button.vi-compartir { font: inherit; cursor: pointer; background: transparent; }

/* Choice art: panels sit above the letter and text from 541px, and beside them
   as a row up to 540px. Panel offsets match /question-art.css. */
.vi-opciones--arte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.vi-opcion--arte { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 0 16px 16px; overflow: hidden; }
.vi-opcion--arte .choice-picture { grid-column: 1 / -1; grid-row: 1; position: relative; display: block; aspect-ratio: 1; overflow: hidden; margin: 0 -16px 12px; background: var(--marfil); border-bottom: 1px solid var(--linea); }
.vi-opcion--arte .choice-picture img { position: absolute; display: block; width: 200%; height: 200%; max-width: none; object-fit: fill; }
.vi-opcion--arte .choice-picture.panel-0 img { left: 0; top: 0; }
.vi-opcion--arte .choice-picture.panel-1 img { left: -100%; top: 0; }
.vi-opcion--arte .choice-picture.panel-2 img { left: 0; top: -100%; }
.vi-opcion--arte .choice-picture.panel-3 img { left: -100%; top: -100%; }
.vi-opcion--arte .vi-opcion__letra { grid-column: 1; grid-row: 2; margin-top: 2px; }
.vi-opcion--arte .vi-opcion__texto { grid-column: 2; grid-row: 2; padding-top: 3px; }
.vi-ilustracion-nota { margin: var(--s3) 0 var(--s4); }
@media (max-width: 540px) {
  .vi-opciones--arte { grid-template-columns: minmax(0, 1fr); }
  .vi-opcion--arte { grid-template-columns: minmax(72px, 0.35fr) minmax(0, 1fr); padding: 0; }
  .vi-opcion--arte .choice-picture { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0; border-bottom: 0; border-right: 1px solid var(--linea); }
  .vi-opcion--arte .vi-opcion__letra { grid-column: 2; grid-row: 1; margin: 14px 0 0 12px; }
  .vi-opcion--arte .vi-opcion__texto { grid-column: 2; grid-row: 2; padding: 0 14px 14px 12px; }
}

/* Home (/vi/). */
.home-hero { padding-bottom: var(--s7); }
.home-hero h1 { max-width: 15ch; font-weight: 600; margin-bottom: var(--s4); }
.home-hero .vi-lede { margin-bottom: var(--s5); }
.home-hero__nota { margin-top: var(--s4); }
@media (min-width: 900px) {
  .home-hero { padding-top: var(--s6); padding-bottom: var(--s8); }
  .home-hero h1 { max-width: 14ch; margin-bottom: var(--s5); }
}

#muestra .vi-pregunta { margin-top: var(--s5); }
#ruta .vi-comparar { margin-bottom: var(--s5); }

.home-puentes { display: grid; gap: var(--s4); margin-block: var(--s5); }
@media (min-width: 900px) { .home-puentes { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.home-puentes .vi-puente { display: flex; flex-direction: column; }
.home-puentes .vi-puente__en { flex: 1; }

.home-formularios { display: grid; gap: var(--s7); }
.home-formularios form { margin-bottom: var(--s4); }
.home-formularios .vi-boton { margin-top: var(--s4); }
.home-formularios textarea { max-width: 100%; }
@media (min-width: 900px) {
  .home-formularios { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
}

.home-puentes__mas > summary { cursor: pointer; font-weight: 600; color: var(--agave); padding: var(--s3) 0; }
@media (max-width: 599px) { .vi-cifras strong { font-size: clamp(2rem, 9vw, 3rem); } }
.home-puentes__mas { grid-column: 1 / -1; }

/* Giới thiệu nội dung (/vi/sobre-este-contenido/). */
.tr-articulo { max-width: 46rem; }
.tr-cabecera h1 { max-width: 16ch; margin-bottom: var(--s4); }
.tr-articulo .vi-section { padding-block: var(--s6); }
.tr-articulo .vi-section:first-child { padding-bottom: var(--s6); }
.tr-articulo h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
.tr-lista, .tr-fuentes { padding-left: 1.25rem; margin-bottom: var(--s4); }
.tr-lista li { margin-bottom: var(--s2); padding-left: var(--s1); }
.tr-lista li::marker { color: var(--terracota); }
.tr-fuentes { list-style: none; padding-left: 0; border-top: 1px solid var(--linea); }
.tr-fuentes li { max-width: none; padding: var(--s3) 0; border-bottom: 1px solid var(--linea); }
.tr-fuentes a { font-weight: 600; }

/* Bảng thuật ngữ (/vi/glosario/). */
.gl-cabecera { padding-bottom: var(--s5); }
.gl-cabecera h1 { max-width: 14ch; }
.gl-idioma { padding-block: var(--s5); }
.gl-idioma h2 { font-size: 1.35rem; }
.gl-fuentes { list-style: none; padding: 0; margin: 0; }
.gl-fuentes li { max-width: none; padding: var(--s2) 0; border-top: 1px solid var(--linea); }
.gl-fuentes a { font-weight: 600; }

.gl-herramientas { padding-top: var(--s5); }
.gl-controles { position: sticky; top: 0; z-index: 5; background: var(--marfil); padding-block: var(--s3); border-bottom: 1px solid var(--linea); margin-bottom: var(--s5); }
.gl-controles label { margin-top: 0; }
.gl-controles input[type="search"] { max-width: 28rem; }
.gl-etiqueta-grupo { font-size: var(--etiqueta); font-weight: 600; margin: var(--s3) 0 var(--s2); color: var(--tinta-2); }
.gl-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); }
.gl-chip { min-height: var(--toque); padding: var(--s2) var(--s4); border: 1.5px solid var(--linea-fuerte); border-radius: 999px; background: var(--marfil); color: var(--tinta); font: 600 0.9375rem/1.2 var(--font-texto); cursor: pointer; }
.gl-chip:hover { border-color: var(--agave); background: var(--agave-tenue); }
.gl-chip.is-activo, .gl-chip[aria-pressed="true"] { background: var(--agave); border-color: var(--agave); color: var(--on-agave); }
.gl-controles .vi-nota { margin: var(--s2) 0 0; }
.gl-vacio { padding: var(--s4); background: var(--papel); border-radius: var(--r-opcion); border: 1px solid var(--linea); }

.gl-grupo { margin-bottom: var(--s7); }
.gl-grupo h2 { font-size: clamp(1.4rem, 5vw, 2rem); padding-bottom: var(--s2); border-bottom: 2px solid var(--tinta); }
.gl-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.gl-ficha { max-width: none; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-opcion); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.gl-par { margin: 0; display: grid; gap: var(--s2); }
.gl-par > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s3); align-items: baseline; }
.gl-par dt { font-size: var(--etiqueta); font-weight: 600; color: var(--terracota); }
.gl-par dd { margin: 0; min-width: 0; }
.gl-es { font-family: var(--font-titulo); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.gl-en { font-weight: 600; font-size: 1.125rem; color: var(--marino); font-style: normal; }
.gl-ficha .vi-escuchar { align-self: flex-start; }
.gl-def { margin: 0; color: var(--tinta-2); font-size: var(--texto-chico); max-width: none; }
.gl-pie { border-top: 1px solid var(--linea); padding-top: var(--s5); }
@media (min-width: 760px) { .gl-lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .gl-lista { gap: var(--s5); } }

/* Topic index and topic pages (/vi/guides/…). Shared components live in 15-components.css. */
.vi-guias__cabecera, .vi-guia__cabecera { padding-bottom: var(--s6); }
.vi-guias__cabecera h1, .vi-guia__cabecera h1 { max-width: 22ch; }
.vi-guias__grupo { padding-block: var(--s6); border-top: 1px solid var(--linea); }
.vi-guias__grupo h2 { margin-bottom: var(--s5); }
.vi-guias .vi-acciones { margin-top: var(--s6); }
.vi-guias .vi-nota { margin-top: var(--s5); }

.vi-guia__cabecera .vi-etiqueta { margin-bottom: var(--s2); }
.vi-guia__lista { display: grid; gap: var(--s5); margin-bottom: var(--s6); }
.vi-guia__preguntas > h2 { margin-bottom: var(--s5); }
.vi-guia__preguntas .vi-acciones { margin-top: var(--s4); }
.vi-guia__preguntas .vi-pregunta { scroll-margin-top: var(--s5); }

.vi-guia__otros-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: 40rem; }
.vi-guia__otros-lista li { border-top: 1px solid var(--linea); max-width: none; }
.vi-guia__otros-lista li:last-child { border-bottom: 1px solid var(--linea); }
.vi-guia__otros-lista a { display: flex; align-items: center; min-height: var(--toque); padding-block: var(--s2); font-weight: 600; text-decoration: none; }
.vi-guia__otros-lista a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .vi-guia__otros-lista { max-width: none; grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
  .vi-guia__otros-lista li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--linea); }
}

/* Comments (markup and ids are used by /guide.js) */
.vi-comentarios { margin-top: var(--s7); padding-top: var(--s6); border-top: 2px solid var(--linea-fuerte); }
.vi-comentarios h2 { font-size: var(--h3); margin-bottom: var(--s3); }
.vi-comentarios p { color: var(--tinta-2); }
#commentList { margin-bottom: var(--s5); }
.comment { padding: var(--s4) var(--s5); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-opcion); margin-bottom: var(--s3); }
.comment p { white-space: pre-wrap; margin: 0 0 var(--s2); color: var(--tinta); }
.comment time { font-size: var(--etiqueta); color: var(--tinta-2); }
.comment-empty { color: var(--tinta-2); }
#commentForm { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--s5) var(--gutter); }
#commentForm label:first-child { margin-top: 0; }
#commentForm input[type="email"], #commentForm textarea { max-width: none; }
#commentForm button { margin-top: var(--s4); }
#commentForm button:disabled { opacity: 0.6; cursor: not-allowed; }
#commentTurnstile { margin-top: var(--s4); max-width: 100%; overflow-x: auto; }
@media (min-width: 900px) { #commentForm { padding: var(--s6); } }

/* Individual question pages (/vi/questions/<id>/). The card itself is a shared component. */
.vi-q-pagina { max-width: 46rem; margin-inline: auto; }
.vi-q-migas { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin-bottom: var(--s5); font-size: var(--texto-chico); }
.vi-q-migas a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; }
/* The stem is the page's h1; keep it readable, not display-sized. */
.vi-q-pagina .vi-pregunta__enunciado { font-size: clamp(1.375rem, 5.2vw, 2rem); line-height: 1.4; max-width: none; }
.vi-q-pagina .vi-pregunta .vi-acciones { margin-top: var(--s5); }
.vi-pregunta__en { font-size: 1.0625rem; line-height: 1.45; color: var(--tinta-2); margin: 0 0 var(--s4); max-width: none; }
.vi-q-mas { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--linea); }
.vi-q-mas__enlaces a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; }
@media (max-width: 480px) {
  .vi-q-pagina .vi-pregunta .vi-acciones > .vi-boton { flex: 1 1 100%; }
}

/* Tình huống "Bạn sẽ làm gì?" (/vi/stories/) */
.vi-historias__cabecera { padding-bottom: var(--s6); }
.vi-historias__lista { display: grid; gap: 0; }
.vi-historia { padding-block: var(--s6); border-top: 1px solid var(--linea); max-width: var(--lectura); }
.vi-historia .vi-etiqueta { margin-bottom: var(--s2); }
.vi-historia h2 { font-size: clamp(1.375rem, 4.6vw, 1.875rem); }
.vi-historia p { max-width: none; }
.vi-historia .vi-acciones { margin: var(--s4) 0 0; }
.vi-historias__mas { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--linea-fuerte); }
@media (min-width: 900px) {
  .vi-historias__lista { grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
  .vi-historia { max-width: none; }
}

/* Procedures: resources, exam day, privacy, corrections. Tokens only.
   Shared components (.vi-ruta, .vi-lista, .vi-aviso, .vi-compartir) are styled in
   15-components.css; rules here are scoped to this page group's wrappers. */

/* ---------- shared page heads ---------- */
.vi-recursos__cabecera, .vi-dia__cabecera, .vi-privacidad__cabecera { padding-bottom: var(--s6); }
.vi-recursos__cabecera h1, .vi-dia__cabecera h1, .vi-privacidad__cabecera h1 { max-width: 20ch; }

/* ---------- resources ---------- */
.vi-recursos { display: grid; gap: var(--s5); }
.vi-recursos__indice { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--s4) var(--s5); }
.vi-recursos__indice-titulo { font-family: var(--font-texto); font-size: var(--etiqueta); font-weight: 600; color: var(--terracota); margin: 0 0 var(--s2); line-height: 1.3; }
.vi-recursos__indice ul { list-style: none; margin: 0; padding: 0; }
.vi-recursos__indice li { max-width: none; }
.vi-recursos__indice a { display: flex; align-items: center; min-height: var(--toque); color: var(--tinta); font-weight: 600; text-decoration: none; border-top: 1px solid var(--linea); }
.vi-recursos__indice li:first-child a { border-top: 0; }
.vi-recursos__indice a:hover { color: var(--agave); text-decoration: underline; }
.vi-recursos__contenido { min-width: 0; }
.vi-recursos__tarjetas { display: grid; gap: var(--s4); }
.vi-recurso { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--s5); margin: 0 0 var(--s4); }
.vi-recurso h3 { margin-bottom: var(--s3); }
.vi-recurso p:last-child { margin-bottom: 0; }
.vi-recurso--ancho p { max-width: var(--lectura); }
.vi-recurso__enlace { margin-bottom: var(--s2); }
.vi-recurso__enlace a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; }
.vi-recursos__enlaces a { display: inline-block; padding-block: var(--s2); font-weight: 600; }
.vi-recursos__lista { padding-left: var(--s5); }
.vi-recursos__lista li { margin-bottom: var(--s3); }
.vi-recursos .vi-ruta { list-style: none; margin: 0; padding: 0; }
.vi-recursos .vi-ruta__paso { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s4); margin-bottom: var(--s5); max-width: none; }
.vi-recursos .vi-ruta__num { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--terracota); color: var(--terracota); font-family: var(--font-titulo); font-weight: 600; }
.vi-recursos .vi-ruta__cuerpo p { margin: var(--s2) 0 0; }
@media (min-width: 900px) {
  .vi-recursos { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .vi-recursos__indice { position: sticky; top: var(--s5); }
  .vi-recursos__tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vi-recursos__contenido .vi-section:first-child { padding-top: 0; }
}

/* ---------- exam day ---------- */
.vi-dia__nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: var(--s5) 0 0; padding: 0; }
.vi-dia__nav li { max-width: none; }
.vi-dia__nav a { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--s4); border: 2px solid var(--agave); border-radius: var(--r-boton); font-weight: 600; text-decoration: none; }
.vi-dia__nav a:hover { background: var(--agave-tenue); }
.vi-dia .vi-ruta { list-style: none; margin: 0; padding: 0; position: relative; }
.vi-dia .vi-ruta__paso { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s4); position: relative; padding-bottom: var(--s7); max-width: none; }
.vi-dia .vi-ruta__paso::before { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.5rem; bottom: 0; width: 2px; background: var(--linea-fuerte); }
.vi-dia .vi-ruta__paso:last-child { padding-bottom: var(--s6); }
.vi-dia .vi-ruta__paso:last-child::before { display: none; }
.vi-dia .vi-ruta__num { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--terracota); color: var(--marfil); font-family: var(--font-titulo); font-weight: 600; font-size: 1.25rem; position: relative; }
.vi-dia .vi-ruta__cuerpo { min-width: 0; padding-top: var(--s1); scroll-margin-top: var(--s5); }
.vi-dia .vi-ruta__cuerpo h2 { margin-bottom: var(--s4); scroll-margin-top: var(--s5); }
.vi-dia .vi-ruta__cuerpo h3 { margin-top: var(--s6); }
.vi-dia__fichas { list-style: none; display: grid; gap: var(--s3); padding: 0; margin: var(--s5) 0; }
.vi-dia__fichas li { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-opcion); padding: var(--s4); max-width: none; }
.vi-dia__lista { padding-left: var(--s5); }
.vi-dia__lista li { margin-bottom: var(--s3); }
.vi-dia .vi-aviso, .vi-dia__lista-seccion .vi-aviso { background: var(--ambar-tenue); color: var(--ambar-tinta); border-radius: var(--r-opcion); padding: var(--s4) var(--s5); margin: 0 0 var(--s4); border-left: 6px solid var(--ambar-tinta); }
.vi-dia .vi-aviso p { margin: 0; color: inherit; }
.vi-dia .vi-aviso a { color: inherit; font-weight: 600; }
.vi-dia__lista-seccion .vi-lista ul { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.vi-dia__lista-seccion .vi-lista li { max-width: none; border-top: 1px solid var(--linea); }
.vi-dia__lista-seccion .vi-lista li:last-child { border-bottom: 1px solid var(--linea); }
.vi-dia__lista-seccion .vi-check { display: flex; align-items: flex-start; gap: var(--s3); min-height: var(--toque); padding: var(--s3) 0; margin: 0; font-weight: 400; cursor: pointer; }
.vi-dia__lista-seccion .vi-check input { flex: none; margin-top: 0.2rem; }
.vi-dia__lista-seccion .vi-lista__estado { font-weight: 600; color: var(--tinta-2); }
.vi-dia__acciones a.vi-boton { text-decoration: none; }
.vi-dia__fuentes { padding-left: var(--s5); }
.vi-dia__fuentes li { margin-bottom: var(--s3); }
@media (min-width: 900px) {
  .vi-dia .vi-ruta__paso { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s6); }
  .vi-dia .vi-ruta__paso::before { left: calc(1.75rem - 1px); top: 3.5rem; }
  .vi-dia .vi-ruta__num { width: 3.5rem; height: 3.5rem; font-size: 1.75rem; }
  .vi-dia__fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vi-dia .vi-ruta__cuerpo { max-width: 48rem; }
}
@media print {
  .vi-header, .vi-nav, .vi-transparency, .vi-footer, .vi-dia__acciones, .vi-dia__nav { display: none !important; }
}

/* ---------- privacy ---------- */
.vi-privacidad { max-width: var(--lectura); }
.vi-privacidad__bloque h2 { font-size: clamp(1.25rem, 4.4vw, 1.75rem); }
.vi-privacidad__bloque p { max-width: none; }
.vi-privacidad__bloque:first-of-type { border-top: 1px solid var(--linea); padding-top: var(--s7); }

/* ---------- corrections ---------- */
.vi-correcciones { max-width: 44rem; }
.vi-aviso-privado { background: var(--papel); border-left: 4px solid var(--terracota); border-radius: var(--r-boton); padding: var(--s3) var(--s4); font-size: var(--texto-chico); }
.vi-correcciones__form { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--s2) var(--s5) var(--s5); margin-top: var(--s5); }
.vi-correcciones__form input[type="email"], .vi-correcciones__form textarea, .vi-correcciones__form select { max-width: none; }
.vi-correcciones__form select { min-height: 3.5rem; }
.vi-correcciones__form button[type="submit"] { margin-top: var(--s5); min-height: var(--toque); padding: var(--s3) var(--s6); border-radius: var(--r-boton); border: 2px solid var(--agave); background: var(--agave); color: var(--on-agave); font-weight: 600; cursor: pointer; }
.vi-correcciones__form button[type="submit"]:hover:not([disabled]) { background: var(--agave-2); border-color: var(--agave-2); }
.vi-correcciones__form button[type="submit"][disabled] { opacity: 0.55; cursor: not-allowed; }
.vi-correcciones__form #correctionTurnstile { margin-top: var(--s4); }
.vi-correcciones__form [role="status"] { max-width: none; }

/* /vi/study/ — the study desk. Four real views (Tổng quan, Câu hỏi, Kỹ năng,
   Kế hoạch), one shown at a time, with a bottom bar on phones and a side
   rail from 900px. Shared components (.vi-pregunta, .vi-opcion, .vi-puente,
   .vi-recordar, .vi-aviso, .vi-ruta, .vi-check) are styled in the components
   stylesheet; this file only lays them out inside the desk and styles the
   desk's own parts (.est-*, .vi-segmentos). Tokens only, no literal colors. */

body[data-vi-study] { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.vi-main--study { padding-block: var(--s5) var(--s7); }
.est > * { min-width: 0; }

/* ---------- header ---------- */
.est-cabecera { margin-bottom: var(--s5); }
.est-cabecera h1 { font-size: clamp(1.75rem, 6.5vw, 2.6rem); max-width: none; margin-bottom: var(--s2); }
.est-lede { color: var(--tinta-2); max-width: 36rem; margin-bottom: var(--s2); }
.est[data-vista]:not([data-vista="dashboard"]) .est-lede { display: none; }
.est-enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.est-enlaces a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; font-size: var(--texto-chico); }

/* ---------- navigation: bottom bar on phones ---------- */
.est-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--marfil); border-top: 1px solid var(--linea-fuerte); padding-bottom: env(safe-area-inset-bottom); }
.est-nav ul { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 36rem; }
.est-nav li { margin: 0; max-width: none; min-width: 0; }
.est-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); min-height: 72px; padding: var(--s2) 2px; color: var(--tinta-2); overflow-wrap: anywhere; text-decoration: none; font-weight: 600; font-size: var(--etiqueta); line-height: 1.1; text-align: center; white-space: normal; }
.est-nav a:hover { color: var(--agave); }
.est-nav svg { width: 24px; height: 24px; flex: none; }
.est-nav a[aria-current="page"] { color: var(--agave-2); }
.est-nav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 3px; background: var(--terracota); border-radius: 0 0 3px 3px; }

/* ---------- body ---------- */
.est-estados p { margin: 0 0 var(--s2); font-size: var(--texto-chico); font-weight: 400; color: var(--tinta-2); }
.est-vista > h2 { scroll-margin-top: var(--s4); margin-bottom: var(--s4); }
.est-seccion { border-top: 1px solid var(--linea); margin-top: var(--s7); padding-top: var(--s6); scroll-margin-top: var(--s4); }
.est-seccion > h3 { font-size: clamp(1.4rem, 4.8vw, 1.85rem); scroll-margin-top: var(--s4); }
.est-pie { margin: var(--s7) 0 0; padding-top: var(--s4); border-top: 1px solid var(--linea); font-size: var(--texto-chico); color: var(--tinta-2); max-width: none; }

@media (min-width: 900px) {
  body[data-vi-study] { padding-bottom: 0; }
  .vi-main--study { padding-block: var(--s6) var(--s8); }
  .est { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); column-gap: var(--s6); align-items: start; }
  .est-cabecera { grid-column: 1 / -1; margin-bottom: var(--s6); }
  .est-nav { position: sticky; top: var(--s4); left: auto; right: auto; bottom: auto; grid-column: 1; z-index: 1; border-top: 0; background: transparent; padding: 0; }
  .est-nav ul { display: block; max-width: none; }
  .est-nav li { margin-bottom: var(--s1); }
  .est-nav a { flex-direction: row; justify-content: flex-start; gap: var(--s3); min-height: 52px; padding: 0 var(--s4); font-size: 1rem; text-align: left; border-radius: var(--r-boton); }
  .est-nav a[aria-current="page"] { background: var(--agave-tenue); }
  .est-nav a[aria-current="page"]::before { top: 10px; bottom: 10px; left: 0; right: auto; width: 4px; height: auto; border-radius: 0 3px 3px 0; }
  .est-cuerpo { grid-column: 2; border-left: 1px solid var(--linea); padding-left: var(--s6); }
}

/* ---------- segmented control: scrolls sideways, never clips a label ---------- */
.vi-segmentos { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s1) 0 var(--s3); margin: var(--s4) 0; }
.vi-segmentos > button, .vi-segmentos > a { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: var(--toque); padding: var(--s2) var(--s4); border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-tarjeta); background: transparent; color: var(--tinta); font: 600 var(--texto-chico)/1.2 var(--font-texto); text-decoration: none; white-space: nowrap; cursor: pointer; }
.vi-segmentos > button:hover:not([disabled]), .vi-segmentos > a:hover { background: var(--agave-tenue); color: var(--agave-2); }
.vi-segmentos > [aria-pressed="true"] { background: var(--agave); border-color: var(--agave); color: var(--on-agave); }
.vi-segmentos > [disabled] { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 599px) { .vi-segmentos > button { flex: 1 1 100%; justify-content: center; } }

/* ---------- forms ---------- */
.est-campo { margin-bottom: var(--s4); }
.est-campo label { margin-top: 0; }
.est-form { display: grid; gap: var(--s1); margin-block: var(--s4); }
.est-form .vi-boton { justify-self: start; margin-top: var(--s3); }
#sessionPlanForm { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); column-gap: var(--s4); align-items: end; }
#sessionPlanForm .vi-boton { grid-column: 1 / -1; }
.est-casilla { display: flex; align-items: flex-start; gap: var(--s3); font-weight: 400; min-height: var(--toque); margin: var(--s2) 0; max-width: var(--lectura); }
.est-casilla input { flex: none; margin-top: 0.2rem; }
#feedbackStatus, #sessionPlanStatus, #settingsStatus, #planResult { min-height: 1.5em; }

/* ---------- Inicio ---------- */
.est-resumen { font-size: 1.15em; max-width: 36rem; }
.est-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); margin: var(--s5) 0; }
.est-cifras > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 2px solid var(--linea-fuerte); padding-top: var(--s2); min-width: 0; }
.est-cifras dd { margin: 0; font: 600 var(--cifra)/1 var(--font-titulo); color: var(--terracota); }
.est-cifras dt { font-size: var(--texto-chico); color: var(--tinta-2); margin-top: var(--s1); overflow-wrap: anywhere; }
.est-atajos { margin-block: var(--s5); }
@media (min-width: 900px) { .est-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- disclosure blocks ---------- */
.est-hitos, .est-detalle, .est-destrezas > details, .est-revision { border-top: 1px solid var(--linea); }
.est-hitos { margin-top: var(--s5); }
.est-detalle { margin-top: var(--s6); }
.est-destrezas > details:last-child { border-bottom: 1px solid var(--linea); }
.est-hitos > summary, .est-detalle > summary, .est-destrezas > details > summary, .est-revision > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 56px; padding-block: var(--s3); font-weight: 600; cursor: pointer; list-style: none; }
.est-hitos > summary::-webkit-details-marker, .est-detalle > summary::-webkit-details-marker, .est-destrezas > details > summary::-webkit-details-marker, .est-revision > summary::-webkit-details-marker { display: none; }
.est-hitos > summary::after, .est-detalle > summary::after, .est-destrezas > details > summary::after, .est-revision > summary::after { content: ""; flex: none; width: 0.55em; height: 0.55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
.est-hitos[open] > summary::after, .est-detalle[open] > summary::after, .est-destrezas > details[open] > summary::after, .est-revision[open] > summary::after { transform: rotate(-135deg); }
.est-hitos__lista { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s4); }
.est-hito { border-left: 3px solid var(--linea-fuerte); padding-left: var(--s4); }
.est-hito--cumplido { border-left-color: var(--acierto); }
.est-hito p { margin: 0 0 var(--s1); }
.est-hito__titulo { font-weight: 600; }
.est-hito__estado { font-size: var(--etiqueta); font-weight: 600; color: var(--tinta-2); }
.est-hito--cumplido .est-hito__estado { color: var(--acierto); }
@media (min-width: 900px) { .est-hitos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); } }

/* ---------- Preguntas ---------- */
.est-quiz { margin-top: var(--s4); }
.est-barra { height: 6px; background: var(--papel-2); border-radius: 3px; overflow: hidden; margin-bottom: var(--s4); }
.est-barra i { display: block; height: 100%; background: var(--terracota); border-radius: 3px; }
.est-pregunta h3 { font-family: var(--font-texto); font-size: var(--texto-chico); font-weight: 600; color: var(--tinta-2); margin-bottom: var(--s1); }
.est-tiempo { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.est-tiempo p { margin: 0; color: var(--tinta-2); font-size: var(--texto-chico); }
.est-tiempo output { font: 600 1.5rem/1 var(--font-titulo); font-variant-numeric: tabular-nums; }
.est-pregunta .vi-opcion[aria-pressed="true"]:not(.is-correcta):not(.is-incorrecta) { border-color: var(--agave); background: var(--agave-tenue); }
.est-icono { width: 1.2em; height: 1.2em; flex: none; }
.est-veredicto { display: flex; align-items: center; gap: var(--s2); font-weight: 600; margin: var(--s4) 0 var(--s2); }
.est-veredicto--ok { color: var(--acierto); }
.est-veredicto--no { color: var(--error); }
#quizExplanation { margin-top: var(--s4); }
#quizExplanation:empty { display: none; }
.est-pregunta .vi-acciones { margin-top: var(--s5); }
.est-resultado h3 { font-size: clamp(1.4rem, 5vw, 1.9rem); }
.est-revision > summary { font-weight: 600; }
.est-revision > summary::after { margin-left: auto; }
.est-revision > :not(summary) { padding-inline: var(--s1); }

/* ---------- Destrezas ---------- */
.est-bloque { border: 1px solid var(--linea); background: var(--papel); border-radius: var(--r-opcion); padding: var(--s4); margin-block: var(--s4); }
.est-bloque > :last-child { margin-bottom: 0; }
.est-reloj { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
#skillsClock { font: 600 2.25rem/1 var(--font-titulo); font-variant-numeric: tabular-nums; }
.est-sorteo { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s3); }
.est-sorteo li { border-left: 3px solid var(--terracota); padding-left: var(--s3); }
.est-sorteo a { font-weight: 600; display: inline-block; padding-block: var(--s1); }
.est-sorteo p { margin: 0; }
.est-oficial { color: var(--marino); font-weight: 600; margin-bottom: var(--s2); }
.est-destreza { padding: var(--s2) 0 var(--s6); }
.est-destreza h3 { font-size: 1.2rem; margin: var(--s5) 0 var(--s3); }
.est-etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0 0 var(--s4); }
.est-etiquetas li { border: 1px solid var(--linea-fuerte); border-radius: var(--r-tarjeta); padding: 2px var(--s3); font-size: var(--etiqueta); font-weight: 600; color: var(--tinta-2); }
.est-pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0 0 var(--s4); }
.est-pasos li { counter-increment: paso; position: relative; padding-left: 2.6rem; margin-bottom: var(--s3); }
.est-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0.1em; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--agave-tenue); color: var(--agave-2); font: 600 var(--etiqueta)/1.9rem var(--font-texto); text-align: center; }
.est-terminos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.est-terminos > div { border-top: 1px solid var(--linea); padding-top: var(--s2); min-width: 0; }
.est-terminos dt { font-weight: 600; overflow-wrap: anywhere; }
.est-terminos dd { margin: 0; color: var(--marino); font-weight: 600; overflow-wrap: anywhere; }
.est-conteo { font-size: var(--etiqueta); color: var(--tinta-2); margin: var(--s3) 0 0; }
.est-general > div { padding-bottom: var(--s4); }

/* ---------- Casos ---------- */
.est-casos { margin-top: var(--s5); }
.est-caso { border-top: 1px solid var(--linea); padding-block: var(--s5); }
.est-caso:first-child { border-top: 0; padding-top: 0; }
.est-caso h3 { font-size: 1.4rem; }
.est-caso [role="status"] { margin-top: var(--s4); font-weight: 400; }

/* ---------- Mi plan ---------- */
.est-sesion { margin-top: var(--s4); }
.est-sesion ol { padding-left: var(--s5); }
.est-sesion li { margin-bottom: var(--s4); }
.est-sesion p { margin-bottom: var(--s1); }
.est-sesion__titulo { font-weight: 600; }
.est-sesion a { display: inline-block; padding-block: var(--s2); }
#planResult ul { padding-left: var(--s5); }
.est-fuentes { margin-top: var(--s4); }
.est-fuente { border-top: 1px solid var(--linea); padding-block: var(--s4); }
.est-fuente:first-child { border-top: 0; padding-top: 0; }
.est-fuente h4 { font-family: var(--font-titulo); font-size: 1.15rem; line-height: 1.3; margin: 0 0 var(--s2); }
.est-fuente p { margin-bottom: var(--s2); }
.est-fuente__oficial { font-size: var(--texto-chico); color: var(--tinta-2); }
.est-fuente__oficial [lang="en"] { color: var(--marino); font-weight: 600; }
#examSteps { margin-block: var(--s4); }

/* Cases one at a time; folded extra phrases; listening practice */
.est-caso-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s5) 0; }
.est-caso-nav__pos { margin: 0; font-weight: 600; }
.est-mas-frases { margin: var(--s3) 0 var(--s4); }
.est-mas-frases > summary { cursor: pointer; font-weight: 600; color: var(--agave); padding: var(--s2) 0; }
#skillList > details > summary { display: flex; flex-direction: column; gap: 2px; }
#skillList > details > summary .est-oficial { font-size: var(--texto-chico); font-weight: 600; margin: 0; }
.est-oido .vi-opciones { margin-top: var(--s4); }
.est-oido__resultado:empty { display: none; }

.est-panel { margin-top: var(--s4); }
.vi-puente p { hyphens: manual; }