/* ═══════════════════════════════════════════════════════════════════════════
   public/assets/css/learn-vsession.css — BUỔI HỌC TỪ VỰNG /vocab/session (7 chế độ), hướng B "sân khấu teal"
   chủ site chọn 26/09/2026 (bản mẫu Đợt 0).
   Dựng TRÊN khuôn phiên Ôn tập SRS (learn-srs.css: .ss-card · .ss-opts · .ss-fb · khay .ss-dock) + token --lv-*
   (learn-shell.css) + .lv-btn/.lv-dlg (learn-ui.css). KHÔNG hex cứng ⇒ tự lật ở nền tối.
   Dải teal đầu trang: thoát · tên bộ · hàng icon chọn chế độ (GIỮ như bản cũ — chủ site chốt) · tuỳ chọn · tiến độ.
   ═══════════════════════════════════════════════════════════════════════════ */
body.vs-body { margin: 0; background: var(--lv-bg); font-family: var(--font-sans); color: var(--lv-text); -webkit-font-smoothing: antialiased; }
/* Luật display của thành phần (grid/flex) thắng thuộc tính hidden của trình duyệt ⇒ ép lại cho mọi phần tử trong trang */
.vs [hidden] { display: none !important; }
.vs { --vs-max: 720px; }
.vs.vs--speak { --vs-max: 1000px; }
.vs :where(button, input, select, textarea) { font-family: var(--font-sans); }
/* Token tương thích cho mã cũ còn đọc biến --vs-* (vẽ sóng micro ở chế độ Phát âm) */
.vs { --vs-accent: var(--lv-brand-strong); --vs-border: var(--lv-border); }

/* ── Dải teal đầu trang ─────────────────────────────────────────────────── */
.vb-band {
  position: relative; isolation: isolate; overflow: hidden; flex: none; color: var(--lv-on);
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 104px;
  background:
    radial-gradient(58% 92% at 88% -12%, color-mix(in srgb, var(--color-primary) 48%, transparent), transparent 62%),
    radial-gradient(42% 72% at 26% 128%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%),
    var(--lv-band-grad);
}
.vb-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-on-dark) 16%, transparent) 1px, transparent 1.5px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(118deg, transparent 12%, black 62%); mask-image: linear-gradient(118deg, transparent 12%, black 62%);
}
.vb-band__in { position: relative; max-width: var(--vs-max); margin: 0 auto; display: grid; gap: 16px; }
.vb-row { display: flex; align-items: center; gap: 12px; }
/* Mục lưới của .vb-band__in: min-width:auto = rộng bằng nội dung ⇒ tên bộ dài đẩy hàng tràn khỏi khung 720px thay vì tự cắt "…" */
.vb-row--top { min-width: 0; }
.vb-ic {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; text-decoration: none;
  border: 1px solid var(--lv-line-d); background: var(--lv-glass); color: var(--lv-on);
  transition: background var(--lv-dur) var(--lv-ease);
}
.vb-ic:hover { background: var(--lv-glass-2); color: var(--lv-on); }
.vb-ic:focus-visible { outline: 2px solid var(--lv-on); outline-offset: 2px; }
.vb-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.vb-title b { max-width: 100%; font-size: 17px; font-weight: 750; letter-spacing: -.01em; line-height: 1.35; color: var(--lv-on); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-title small { max-width: 100%; font-size: 13.5px; line-height: 1.45; color: var(--lv-on-2); }
.vb-prog { display: flex; align-items: center; gap: 12px; }
.vb-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--lv-glass-2); overflow: hidden; }
.vb-bar > i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--lv-on); transition: width .35s var(--lv-ease); }
.vb-count { flex: none; font-size: 14px; font-weight: 700; color: var(--lv-on-2); font-variant-numeric: tabular-nums; }
.vb-count.is-timer .vb-count__tot { display: none; }
.vb-note { margin: -4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--lv-on-2); }
.vb-note b { color: var(--lv-on); font-weight: 650; }

/* Hàng icon chọn chế độ (như bản cũ): chế độ đang học là viên trắng + có chữ; rê chuột hiện tên */
.vs-mbar { flex: none; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 13px; border: 1px solid var(--lv-line-d); background: var(--lv-glass); }
.vs-mbar__i {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 34px; padding: 0 8px; border-radius: 10px;
  color: var(--lv-on-2); text-decoration: none; font: 650 13px/1 var(--lv-font);
  transition: background var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease);
}
.vs-mbar__i:hover { background: var(--lv-glass-2); color: var(--lv-on); }
.vs-mbar__i:focus-visible { outline: 2px solid var(--lv-on); outline-offset: 1px; }
.vs-mbar__i > span { display: none; line-height: 1.45; white-space: nowrap; }
.vs-mbar__i.is-on { padding: 0 12px; background: var(--lv-on); color: var(--lv-deep-ink); }
.vs-mbar__i.is-on > span { display: inline; }
.vs-mbar__i .lv-i { flex: none; }
/* Nghe rảnh tay (18/10/2026): không phải kiểu học mà là trang nghe riêng ⇒ tách bằng vạch. Chỉ biểu tượng như các chế độ khác:
   hàng trên cùng vừa khít 720px, thêm chữ là tràn khỏi khung (bản EN tràn cả màn hình). Nút CÓ CHỮ nằm trên thẻ Flashcard + trang bộ từ. */
.vs-mbar__i--listen { position: relative; flex: none; margin-left: 7px; }
.vs-mbar__i--listen::before { content: ""; position: absolute; left: -5px; top: 7px; bottom: 7px; width: 1px; background: var(--lv-line-d); }

/* Kết thúc buổi: điểm lớn ngay trên dải */
.vb-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; padding: 4px 0 0 54px; }
.vb-score b { display: block; font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--lv-on); font-variant-numeric: tabular-nums; }
.vb-score b small { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--lv-on-2); }
.vb-score span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--lv-on-2); }
.vb-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Sân khấu: thẻ chồng lên mép dải + khay nút (khuôn Ôn tập) ─────────── */
.vs .ss-stage { position: relative; z-index: 1; padding-top: 0; margin-top: -84px; }
.vs .ss-wrap { max-width: var(--vs-max); }
.vs .ss-card { box-shadow: var(--lv-sh-3); }
.vs #vs-stage { display: flex; flex-direction: column; }
.vs .ss-card.vs-plain { background: transparent; border: 0; box-shadow: none; padding: 0; animation: none; }
/* Nhãn phím chỉ ở máy tính (giống phiên Ôn tập) */
.vs kbd { margin-left: 8px; padding: 2px 7px; border-radius: 6px; font: 600 11px/1.3 var(--lv-font); background: color-mix(in srgb, var(--lv-ink) 7%, transparent); color: inherit; }
.vs .lv-btn--primary kbd { background: color-mix(in srgb, var(--color-on-dark) 20%, transparent); }
.vs-touch-only { display: none; }
@media (hover: none), (pointer: coarse) { .vs kbd, .vs-desk-only { display: none; } .vs-touch-only { display: inline; } }
/* Khay nhiều nút: [phụ] [phụ] … [chính] */
.vs-act { display: flex; gap: 10px; }
.vs-act .lv-btn { justify-content: center; }
.vs-act .lv-btn--primary { margin-left: auto; min-width: 180px; }
.vs-act--fc .vs-undo { flex: none; width: 48px; padding: 0; color: var(--lv-muted); }
.vs-act--fc .vs-undo:hover { color: var(--lv-ink); }
.vs-act--fc .vs-undo:disabled { opacity: .4; }
.vs-act--fc .lv-btn:not(.vs-undo) { flex: 1 1 0; margin-left: 0; min-width: 0; }
.vs-act--fc .lv-btn--outline { color: var(--lv-ink); }
.vs .ss-fb__next { margin-left: 0; }

/* Đề chung (card) */
.vs-ask { font-size: 14.5px; font-weight: 600; color: var(--lv-muted); }
.vs-clue-note { font-size: 12.5px; font-weight: 600; color: var(--lv-faint); }
.vs-clue-lbl { font-weight: 600; color: var(--lv-muted); }
.vs .ss-prompt .ss-meaning.is-def { max-width: 34em; font-size: 22px; line-height: 1.45; font-weight: 650; letter-spacing: 0; }

/* ── Flashcard: thẻ lật 3D — mặt trước teal đậm, mặt sau trắng ─────────── */
.vs-fc { position: relative; flex: 1; display: flex; perspective: 1600px; cursor: pointer; user-select: none; -webkit-user-select: none; outline: none; }
.vs-fc__inner { position: relative; flex: 1; min-height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.34, 1.4, .64, 1); }
.vs-fc.is-flipped .vs-fc__inner { transform: rotateY(180deg); }
.vs-fc__face {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 18px; border-radius: 24px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--lv-surface); border: 1px solid var(--lv-hair); box-shadow: var(--lv-sh-3);
}
.vs-fc__face--back { transform: rotateY(180deg); }
.vs-fc__face.is-stage {
  color: var(--lv-on-2); border-color: var(--lv-line-d); isolation: isolate;
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--color-primary) 36%, transparent), transparent 70%), var(--lv-card-grad);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-on-dark) 14%, transparent) inset, 0 28px 56px -24px color-mix(in srgb, var(--lv-shade) 85%, transparent);
}
.vs-fc__face.is-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-on-dark) 14%, transparent) 1px, transparent 1.4px);
  background-size: 18px 18px; -webkit-mask-image: linear-gradient(210deg, black 10%, transparent 70%); mask-image: linear-gradient(210deg, black 10%, transparent 70%);
}
.vs-fc:focus-visible .vs-fc__face { outline: 2px solid var(--lv-brand-fg); outline-offset: 3px; }
.vs-fc__main { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 8px 0; }
.vs-fc__word { font-size: 60px; line-height: 1.08; font-weight: 800; letter-spacing: -.03em; color: var(--lv-ink); overflow-wrap: anywhere; }
.vs-fc__meaning { font-size: 34px; line-height: 1.3; font-weight: 750; letter-spacing: -.015em; color: var(--lv-ink); overflow-wrap: anywhere; }
.vs-fc__meaning.is-def { max-width: 32em; font-size: 22px; line-height: 1.45; font-weight: 650; letter-spacing: 0; }
.vs-fc__sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; font-size: 16.5px; color: var(--lv-muted); }
.vs-fc__sub .vs-w__ipa { color: inherit; }
.vs-pos { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--lv-sunken); color: var(--lv-muted); font-size: 12px; font-weight: 650; }
.vs-say {
  width: 52px; height: 52px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-brand-fg);
  transition: background var(--lv-dur) var(--lv-ease), transform .12s var(--lv-ease);
}
.vs-say:hover { background: var(--lv-tint); }
.vs-say:active { transform: scale(.96); }
.vs-say.is-playing { background: var(--lv-brand-strong); border-color: transparent; color: var(--lv-on); }
.vs-fc__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; font-size: 13px; color: var(--lv-faint); }
.vs-fc__hint { min-width: 0; }
.vs-fc__status { min-width: 0; font-weight: 650; color: var(--lv-brand-fg); }
.vs-tbtn {
  flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--lv-hair); background: transparent; color: var(--lv-text); font: 600 12.5px/1 var(--lv-font);
}
.vs-tbtn:hover { border-color: var(--lv-border); color: var(--lv-ink); }
/* Mặt teal: chữ trắng, nút kính */
.is-stage .vs-fc__word, .is-stage .vs-fc__meaning { color: var(--lv-on); }
.is-stage .vs-fc__sub { color: var(--lv-on-2); }
.is-stage .vs-pos { background: var(--lv-glass-2); color: var(--lv-on); }
.is-stage .vs-say { border-color: var(--lv-line-d); background: var(--lv-glass-2); color: var(--lv-on); }
.is-stage .vs-say:hover { background: color-mix(in srgb, var(--color-on-dark) 24%, transparent); }
.is-stage .vs-fc__foot { color: var(--lv-on-3); }
.is-stage .vs-fc__status { color: var(--lv-on); }
.is-stage .vs-tbtn { border-color: var(--lv-line-d); background: var(--lv-glass); color: var(--lv-on); }
.is-stage .vs-clue-note { color: var(--lv-on-3); }
/* Mặt nghĩa: định nghĩa · câu ví dụ · đồng nghĩa · cụm đi kèm … */
.vs-fc__def { max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--lv-muted); }
.vs-fc__more { flex: none; display: grid; gap: 12px; }
.vs-ex { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--lv-sunken); text-align: left; }
.vs-ex > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vs-ex q { quotes: "“" "”"; font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--lv-ink); overflow-wrap: anywhere; }
.vs-ex small { font-size: 13.5px; line-height: 1.45; color: var(--lv-muted); }
/* Phiên âm câu ví dụ (02/10/2026) — chữ màu thương hiệu để tách khỏi dòng dịch nghĩa xám ngay dưới */
.vs-ex__ipa { font-size: 14px; line-height: 1.5; color: var(--lv-brand-fg); overflow-wrap: anywhere; }
.ss-ctx__ipa { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--lv-brand-fg); overflow-wrap: anywhere; }
.vs-ex .vs-say { width: 40px; height: 40px; margin: 0; flex: none; }
.vs-rows { margin: 0; display: grid; gap: 8px; padding: 0 4px; text-align: left; }
.vs-rows > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.55; }
.vs-rows dt { color: var(--lv-muted); font-weight: 600; }
.vs-rows dd { margin: 0; color: var(--lv-ink); overflow-wrap: anywhere; }
.vs-syn { cursor: pointer; border-bottom: 1.5px dotted var(--lv-brand-fg); transition: color var(--lv-dur) var(--lv-ease); }
.vs-syn:hover { color: var(--lv-brand-fg); }
.vs-tip { padding: 10px 14px; border-radius: 14px; background: var(--lv-wash); font-size: 14px; line-height: 1.55; color: var(--lv-brand-deep); text-align: left; }
.vs-fc__face--back .vs-fc__main { flex: 0 0 auto; margin-top: auto; }
.vs-fc__face--back .vs-fc__more { margin-bottom: auto; }
/* Từ chưa có câu ví dụ ⇒ không có .vs-fc__more: giữ khối chính ở GIỮA thẻ thay vì sụt xuống đáy */
.vs-fc__face--back .vs-fc__main:not(:has(+ .vs-fc__more)) { margin-bottom: auto; }

/* ── Học rảnh tay: khay thay bằng thanh điều khiển ─────────────────────── */
.vs-auto { display: flex; align-items: center; gap: 10px; }
.vs-auto .lv-btn--primary { min-width: 160px; }
.vs-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; border: 1px solid var(--lv-border); background: var(--lv-surface); }
.vs-seg button { height: 38px; min-width: 52px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--lv-muted); font: 700 13px/1 var(--lv-font); cursor: pointer; }
.vs-seg button:hover { color: var(--lv-ink); }
.vs-seg button.is-on { background: var(--lv-brand-strong); color: var(--lv-on); }
.vs-auto__stop { margin-left: auto; }

/* ── Gõ từ / Điền vào câu ──────────────────────────────────────────────── */
.vs-diff { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.vs-diff span { min-width: 16px; padding: 2px 3px; border-radius: 6px; text-align: center; }
.vs-diff .ok { color: var(--lv-brand-deep); background: var(--lv-wash); }
.vs-diff .bad { color: var(--lv-warn-deep); background: color-mix(in srgb, var(--color-warning) 14%, var(--lv-surface)); text-decoration: line-through; }
.vs-diff .miss { color: var(--lv-muted); background: var(--lv-sunken); }
.vs-try { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--lv-warn-deep); text-align: center; }
.vs-hint-first { color: var(--lv-brand-deep); font-weight: 700; letter-spacing: .12em; }
.vs-cz-vi { font-size: 14.5px; line-height: 1.5; color: var(--lv-muted); }
.vs-cz-sent { max-width: 34em; font-size: 24px; line-height: 1.5; font-weight: 650; color: var(--lv-ink); overflow-wrap: anywhere; }
.vs-blank { display: inline-block; min-width: 3.5em; padding: 0 6px; border-bottom: 2.5px solid var(--lv-brand-strong); color: transparent; line-height: 1.15; }
.vs-blank.is-ok { color: var(--lv-brand-deep); background: var(--lv-wash); border-radius: 6px 6px 0 0; }
.vs-blank.is-no { color: var(--lv-warn-deep); background: color-mix(in srgb, var(--color-warning) 12%, var(--lv-surface)); border-bottom-color: var(--color-warning); border-radius: 6px 6px 0 0; }
.vs-cz-hint { font-size: 14px; color: var(--lv-muted); }
.vs-cz-hint b { color: var(--lv-ink); font-weight: 650; }
/* Điền vào câu — chọn kiểu bài ở đầu thẻ: "Gõ từ còn thiếu" | "Gõ cả câu" (nghe câu ví dụ rồi gõ lại nguyên câu) */
.vs-czmode { align-self: center; display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; border: 1px solid var(--lv-hair); background: var(--lv-sunken); }
.vs-czmode button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--lv-muted); font: 650 13.5px/1.3 var(--lv-font); cursor: pointer; }
.vs-czmode button:hover { color: var(--lv-ink); }
.vs-czmode button[aria-pressed="true"] { background: var(--lv-surface); color: var(--lv-brand-deep); box-shadow: var(--lv-sh-1); }
.vs-czmode button:focus-visible { outline: 2px solid var(--lv-brand-fg); outline-offset: 1px; }
.vs-czplay { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px; }
.vs-czplay .ss-listen { width: 76px; height: 76px; margin: 6px 0; box-shadow: 0 0 0 8px var(--lv-wash); }
.vs-czplay .ss-listen .lv-i { width: 32px; height: 32px; }
.vs-czplay .lv-btn b { margin-right: 2px; font-weight: 800; }
.vs .ss-input.vs-czin { height: auto; min-height: 62px; padding: 15px 18px; resize: none; overflow: hidden; text-align: left; font-size: 19px; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
.vs .ss-input.vs-czin::placeholder { font-size: 17px; }
.vs-czkeys kbd { margin-left: 0; }
.vs-czres { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--lv-sunken); text-align: left; }
.vs-czres__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
.vs-czres__row + .vs-czres__row { padding-top: 10px; border-top: 1px solid var(--lv-hair); }
.vs-czres__lbl { grid-column: 1 / -1; font-size: 13px; font-weight: 650; color: var(--lv-muted); }
.vs-czres__sent { font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--lv-ink); overflow-wrap: anywhere; }
.vs-czres__sent .ok, .vs-czres__sent .near { color: var(--lv-brand-deep); }
.vs-czres__sent .near { text-decoration: underline wavy color-mix(in srgb, var(--color-warning) 75%, transparent); text-underline-offset: 4px; }
.vs-czres__sent .bad { padding: 0 3px; border-radius: 5px; background: color-mix(in srgb, var(--color-warning) 16%, var(--lv-surface)); color: var(--lv-warn-deep); }
.vs-czres__sent .is-key { font-weight: 800; }
.vs-czres__you { font-size: 15px; line-height: 1.55; color: var(--lv-text); overflow-wrap: anywhere; }
.vs-czres__you s { color: var(--lv-warn-deep); text-decoration-color: color-mix(in srgb, var(--color-warning) 75%, transparent); }
.vs-czres .vs-say { width: 40px; height: 40px; margin: 0; }

/* ── Phản xạ 60 giây ──────────────────────────────────────────────────── */
.vs-spd-top { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13.5px; font-weight: 650; color: var(--lv-muted); }
.vs-spd-top b { color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.vs-spd-top .is-ok b, .vs-spd-top .is-streak b { color: var(--lv-brand-deep); }
.vs-spd-start { align-items: center; justify-content: center; gap: 10px; text-align: center; }
.vs-spd-start h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--lv-ink); }
.vs-spd-start p { max-width: 42ch; font-size: 15px; line-height: 1.6; color: var(--lv-muted); }
.vs .ss-opt.is-flash { transition: none; }

/* ── Phát âm: phòng thu (thẻ từ teal + khoang thu) ─────────────────────── */
.spk-studio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: stretch; }
.spk-word-panel {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 22px; border-radius: 24px; color: var(--lv-on-2);
  border: 1px solid var(--lv-line-d);
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--color-primary) 36%, transparent), transparent 70%), var(--lv-card-grad);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-on-dark) 14%, transparent) inset, 0 28px 56px -24px color-mix(in srgb, var(--lv-shade) 85%, transparent);
}
.spk-word-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-on-dark) 14%, transparent) 1px, transparent 1.4px);
  background-size: 18px 18px; -webkit-mask-image: linear-gradient(210deg, black 10%, transparent 70%); mask-image: linear-gradient(210deg, black 10%, transparent 70%);
}
.spk-panel__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spk-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--lv-glass-2); border: 1px solid var(--lv-line-d); color: var(--lv-on); }
.spk-word { font-size: clamp(34px, 4.4vw, 50px); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; color: var(--lv-on); overflow-wrap: anywhere; }
.spk-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spk-chips .vs-w__ipa { font-size: 17px; font-weight: 600; color: var(--lv-on-2); }
.spk-chips .vs-pos { background: var(--lv-glass-2); color: var(--lv-on); }
.spk-meaning { font-size: 19px; font-weight: 600; line-height: 1.4; color: var(--lv-on); }
.spk-meaning.is-def { font-size: 16px; font-weight: 550; }
.spk-example { position: relative; padding: 12px 52px 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; background: color-mix(in srgb, var(--lv-shade) 30%, transparent); border: 1px solid var(--lv-line-d); color: var(--lv-on); }
.spk-example mark { padding: 0 4px; border-radius: 5px; background: color-mix(in srgb, var(--color-primary) 55%, transparent); color: inherit; font-weight: 700; }
.spk-example__vi { display: block; margin-top: 4px; font-size: 13px; color: var(--lv-on-3); }
.spk-example__ipa { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--lv-on-2); overflow-wrap: anywhere; }
.spk-example .vs-say { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; margin: 0; }
.spk-panel__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.spk-play--slow b { margin-right: 2px; font-weight: 800; }

.spk-booth { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--lv-surface); border: 1px solid var(--lv-hair); box-shadow: var(--lv-sh-3); }
.spk-booth__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--lv-hair); background: var(--lv-tint); }
.spk-state { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; color: var(--lv-muted); }
.spk-state__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lv-faint); transition: background .2s; }
.spk-best { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 650; background: var(--lv-wash); color: var(--lv-brand-deep); }
.spk-best b { font-variant-numeric: tabular-nums; }
.spk-stage { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; padding: 26px 22px 18px; text-align: center; }
.spk-mic-wrap { position: relative; width: 100px; height: 100px; display: grid; place-items: center; margin-bottom: 16px; }
.spk-mic {
  position: relative; z-index: 2; width: 92px; height: 92px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--lv-brand-strong); color: var(--lv-on); box-shadow: 0 0 0 10px var(--lv-wash);
  transition: transform .1s, background .2s, box-shadow .2s, filter .15s;
}
.spk-mic:hover { filter: brightness(.97); }
.spk-mic:active { transform: scale(.95); }
.spk-mic.is-off { background: var(--lv-sunken); color: var(--lv-muted); cursor: not-allowed; box-shadow: none; }
.spk-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-warning); opacity: 0; pointer-events: none; }
.spk-mic-wrap::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--lv-brand-strong); border-right-color: color-mix(in srgb, var(--color-primary) 35%, transparent); opacity: 0; pointer-events: none; }
@keyframes spk-spin { to { transform: rotate(360deg); } }
@keyframes spk-ripple { 0% { transform: scale(.9); opacity: .75; } 100% { transform: scale(1.85); opacity: 0; } }
@keyframes spk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes spk-blink { 50% { opacity: .35; } }
@keyframes spk-res-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.spk-booth[data-state="connecting"] .spk-mic-wrap::after, .spk-booth[data-state="scoring"] .spk-mic-wrap::after { opacity: 1; animation: spk-spin .8s linear infinite; }
.spk-booth[data-state="scoring"] .spk-mic { filter: saturate(.5); cursor: progress; }
.spk-booth[data-state="listening"] .spk-mic, .spk-booth[data-state="hearing"] .spk-mic { background: var(--color-warning); box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-warning) 16%, transparent); animation: spk-pulse 1.4s ease-in-out infinite; }
.spk-booth[data-state="listening"] .spk-ring, .spk-booth[data-state="hearing"] .spk-ring { animation: spk-ripple 1.9s ease-out infinite; }
.spk-booth[data-state="listening"] .spk-ring--2, .spk-booth[data-state="hearing"] .spk-ring--2 { animation-delay: .65s; }
.spk-booth[data-state="hearing"] .spk-ring { animation-duration: 1.1s; border-width: 3px; }
.spk-state[data-state="connecting"] .spk-state__dot, .spk-state[data-state="scoring"] .spk-state__dot { background: var(--lv-brand-strong); animation: spk-blink .8s ease-in-out infinite; }
.spk-state[data-state="listening"] .spk-state__dot, .spk-state[data-state="hearing"] .spk-state__dot { background: var(--color-warning); animation: spk-blink 1s ease-in-out infinite; }
.spk-state[data-state="listening"], .spk-state[data-state="hearing"] { color: var(--lv-warn-deep); }
.spk-state[data-state="done"] .spk-state__dot { background: var(--lv-brand-strong); }
.spk-status { max-width: 400px; min-height: 22px; font-size: 14px; line-height: 1.5; color: var(--lv-muted); transition: color .2s; }
.spk-status.is-err { color: var(--lv-warn-deep); font-weight: 600; }
.spk-status.is-info { color: var(--lv-brand-fg); font-weight: 600; }
.spk-booth[data-state="listening"] .spk-status, .spk-booth[data-state="hearing"] .spk-status { color: var(--lv-warn-deep); font-weight: 800; font-size: 18px; }
.spk-live { margin-top: 10px; min-height: 22px; font-size: 15px; font-weight: 600; font-style: italic; color: var(--lv-text); animation: spk-res-in .25s var(--lv-ease); }
.spk-live::before { content: '\201C'; } .spk-live::after { content: '\201D'; }
.spk-engine { margin-top: 8px; font-size: 12px; color: var(--lv-faint); }
.spk-wave { width: 100%; max-width: 420px; margin: 14px auto 0; padding: 12px 14px 8px; border-radius: 14px; background: var(--lv-sunken); border: 1px solid var(--lv-hair); animation: spk-res-in .3s var(--lv-ease); }
.spk-wave canvas { display: block; width: 100%; height: 56px; }
.spk-wave__meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--lv-muted); font-variant-numeric: tabular-nums; }
.spk-wave__meta b { color: var(--lv-warn-deep); font-weight: 700; }
.spk-res { width: 100%; max-width: 420px; display: flex; align-items: center; gap: 16px; margin: 16px auto 0; padding: 14px 18px; text-align: left; border-radius: 16px; background: var(--lv-sunken); border: 1px solid var(--lv-hair); animation: spk-res-in .35s var(--lv-ease); }
.spk-res.is-good { background: var(--lv-wash); border-color: color-mix(in srgb, var(--color-primary) 30%, var(--lv-hair)); }
.spk-res.is-mid { background: var(--lv-sunken); }
.spk-res.is-bad { background: color-mix(in srgb, var(--color-warning) 10%, var(--lv-surface)); border-color: color-mix(in srgb, var(--color-warning) 30%, var(--lv-hair)); }
.spk-res__ring { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.spk-res__ring svg { width: 72px; height: 72px; transform: rotate(-90deg); }
.spk-ring__bg { fill: none; stroke: color-mix(in srgb, var(--lv-ink) 12%, transparent); stroke-width: 7; }
.spk-ring__fg { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 195; transition: stroke-dashoffset .7s var(--lv-ease); }
.spk-res__ring.is-good { color: var(--lv-brand-strong); } .spk-res__ring.is-mid { color: var(--lv-muted); } .spk-res__ring.is-bad { color: var(--color-warning); }
.spk-res__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.spk-res__pct small { margin-left: 1px; font-size: 11px; font-weight: 700; color: var(--lv-muted); }
.spk-res__body { min-width: 0; flex: 1; }
.spk-res__verdict { margin-bottom: 6px; font-weight: 800; font-size: 15px; color: var(--lv-ink); }
.spk-res__words { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.spk-w { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 13px; font-weight: 700; border: 1px solid transparent; }
.spk-w.is-ok { background: var(--lv-wash); color: var(--lv-brand-deep); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
.spk-w.is-mid { background: var(--lv-sunken); color: var(--lv-ink); border-color: var(--lv-border); }
.spk-w.is-bad { background: color-mix(in srgb, var(--color-warning) 12%, var(--lv-surface)); color: var(--lv-warn-deep); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); text-decoration: underline dotted; }
.spk-res__row { display: flex; gap: 8px; min-width: 0; font-size: 13px; color: var(--lv-muted); }
.spk-res__row span { flex-shrink: 0; }
.spk-res__row b { min-width: 0; overflow-wrap: anywhere; color: var(--lv-ink); font-weight: 700; }
.spk-hit { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--color-primary) 18%, transparent); color: var(--lv-brand-deep); }
.spk-res__note { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--lv-muted); }
.spk-res__note b { color: var(--lv-ink); }
.spk-res__none { font-style: italic; color: var(--lv-muted); }
.spk-attempts { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0 20px 14px; font-size: 12.5px; color: var(--lv-muted); }
.spk-att { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid var(--lv-hair); background: var(--lv-sunken); color: var(--lv-ink); }
.spk-att.is-good { background: var(--lv-wash); color: var(--lv-brand-deep); border-color: transparent; }
.spk-att.is-bad { background: color-mix(in srgb, var(--color-warning) 12%, var(--lv-surface)); color: var(--lv-warn-deep); border-color: transparent; }
.spk-steps { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 12px 20px 16px; border-top: 1px solid var(--lv-hair); font-size: 12.5px; color: var(--lv-muted); }
.spk-step { display: inline-flex; align-items: center; gap: 6px; }
.spk-step b { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; background: var(--lv-wash); color: var(--lv-brand-deep); }

/* ── Kết thúc buổi ─────────────────────────────────────────────────────── */
.vs-done { gap: 20px; }
.vs-srs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 16px; border-radius: 16px; background: var(--lv-wash); font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--lv-brand-deep); }
.vs-srs a { color: var(--lv-brand-deep); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.vs-srs.is-soft { background: var(--lv-sunken); color: var(--lv-text); font-weight: 500; }
.vs-path h3 { margin: 0 0 12px; font-size: 16px; font-weight: 750; color: var(--lv-ink); }
.vs-path ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vs-path li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 26px 12px 0 0; }
.vs-path li::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--lv-surface); border: 2px solid var(--lv-border); }
.vs-path li::after { content: ""; position: absolute; top: 8px; left: 18px; right: 0; height: 2px; background: var(--lv-hair); }
.vs-path li:last-child::after { display: none; }
.vs-path li.is-done::before { background: var(--lv-brand-strong); border-color: var(--lv-brand-strong); box-shadow: inset 0 0 0 3px var(--lv-surface); }
.vs-path li.is-done::after { background: var(--lv-brand-strong); }
.vs-path li.is-now::before { border-color: var(--lv-brand-strong); box-shadow: 0 0 0 4px var(--lv-wash); }
.vs-path b { font-size: 14.5px; font-weight: 700; color: var(--lv-ink); }
.vs-path li span { font-size: 13px; line-height: 1.45; color: var(--lv-muted); font-variant-numeric: tabular-nums; }
.vs-path li.is-now b { color: var(--lv-brand-deep); }
.vs-path p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--lv-muted); }

/* ── Bảng tuỳ chọn (sheet) ─────────────────────────────────────────────── */
.vs-set__sec + .vs-set__sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lv-hair); }
.vs-set__lbl { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--lv-ink); }
.vs-set__hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--lv-muted); }
.vs-set__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 12px; border: 1px solid var(--lv-hair); background: var(--lv-sunken); }
.vs-set__seg label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; border-radius: 9px; font-size: 14px; font-weight: 650; color: var(--lv-muted); cursor: pointer; text-align: center; }
.vs-set__seg input { position: absolute; opacity: 0; pointer-events: none; }
.vs-set__seg label:has(input:checked) { background: var(--lv-surface); color: var(--lv-brand-deep); box-shadow: var(--lv-sh-1); }
.vs-set__seg label:has(input:focus-visible) { outline: 2px solid var(--lv-brand-fg); outline-offset: 1px; }
.vs-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 4px 2px; font-size: 14.5px; color: var(--lv-text); cursor: pointer; }
.vs-opt input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 42px; height: 24px; margin: 0; border-radius: 999px; cursor: pointer;
  background: var(--lv-sunken); border: 1px solid var(--lv-border); transition: background .18s, border-color .18s;
}
.vs-opt input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--lv-surface); box-shadow: var(--lv-sh-1); transition: transform .18s; }
.vs-opt input[type="checkbox"]:checked { background: var(--lv-brand-strong); border-color: var(--lv-brand-strong); }
.vs-opt input[type="checkbox"]:checked::after { transform: translateX(18px); }
.vs-opt input:focus-visible { outline: 2px solid var(--lv-brand-fg); outline-offset: 2px; }
.vs-opt select { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-ink); font: 600 14px/1 var(--lv-font); }

/* ── Popup cụm từ + "Thêm vào bộ" (ruột .lv-dlg) ──────────────────────── */
.vs-term__head { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.vs-term__word { font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: var(--lv-ink); overflow-wrap: anywhere; }
.vs-term__head .vs-say { width: 38px; height: 38px; margin: 0; flex: none; }
.vs-term__ipa { margin-top: 2px; font-size: 15px; color: var(--lv-muted); }
.vs-term__sec { margin-top: 16px; }
.vs-term__lbl { margin-bottom: 4px; font-size: 14px; font-weight: 750; color: var(--lv-ink); }
.vs-term__val { font-size: 14.5px; line-height: 1.55; color: var(--lv-ink); }
.vs-term__val.is-it { font-style: italic; color: var(--lv-muted); }
.vs-as__body { max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 7px; }
.vs-as__loading, .vs-as__empty { padding: 20px 6px; font-size: 14px; color: var(--lv-muted); text-align: center; }
.vs-as-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--lv-hair); border-radius: 12px; background: var(--lv-surface); cursor: pointer; text-align: left; color: var(--lv-ink); transition: border-color .12s, background .12s; }
.vs-as-row:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--lv-hair)); background: var(--lv-tint); }
.vs-as-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vs-as-row__name { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-as-row__sub { font-size: 12.5px; color: var(--lv-muted); }
.vs-as-row .lv-i { flex: none; color: var(--lv-muted); }
.vs-as-row--new { border-style: dashed; color: var(--lv-brand-deep); font-weight: 650; }
.vs-as-set .vs-as-row__check { opacity: 0; color: var(--lv-brand-strong); }
.vs-as-set.is-sel { border-color: var(--lv-brand-strong); background: var(--lv-wash); }
.vs-as-set.is-sel .vs-as-row__check { opacity: 1; }
.vs-as-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px 8px; border: 0; background: none; color: var(--lv-muted); font: 650 13.5px/1.4 var(--lv-font); cursor: pointer; }
.vs-as-back:hover { color: var(--lv-brand-deep); }
.vs-as__lbl { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 650; color: var(--lv-muted); }
.vs-as__name { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-ink); font: 500 15px/1 var(--lv-font); }
.vs-as__name:focus { outline: none; border-color: var(--lv-brand-strong); box-shadow: var(--lv-focus); }
.vs-as__msg { margin-top: 12px; font-size: 13.5px; font-weight: 600; }
.vs-as__msg.is-ok { color: var(--lv-brand-deep); }
.vs-as__msg.is-err { color: var(--lv-warn-deep); }

/* ── Máy tính ─────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .vs .ss-card { min-height: clamp(440px, calc(100vh - 330px), 560px); }
  .vs .ss-card:is(.ss-state, .ss-done, .vs-plain) { min-height: 0; }
  .vs .ss-card.vs-spd-start { min-height: clamp(440px, calc(100vh - 330px), 560px); }
  .vs .vs-fc { min-height: clamp(440px, calc(100vh - 330px), 560px); }
  .vs.vs--speak .ss-card.vs-plain { min-height: 0; }
}

/* ── Điện thoại / máy tính bảng ───────────────────────────────────────── */
@media (max-width: 1023px) {
  .vb-band { padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 60px; }
  .vb-band__in { gap: 14px; }
  .vs .ss-stage { margin-top: -46px; }
  .vb-row--top { flex-wrap: wrap; row-gap: 12px; }
  .vb-title b { font-size: 15.5px; }
  .vs-mbar { order: 3; flex: 1 1 100%; }
  .vs-mbar__i { flex: 1 1 0; min-width: 0; height: 36px; }
  .vb-hero { padding-left: 0; }
  .vb-score b { font-size: 52px; }
  .vb-score b small { font-size: 26px; }
  .vs #vs-stage { flex: 1; }
  .vs #vs-stage > .ss-card, .vs #vs-stage > .vs-fc { flex: 1; }
  .vs #vs-stage > .ss-card:is(.ss-state, .ss-done, .vs-plain) { flex: none; }
  .vs #vs-stage > .ss-card.vs-spd-start { flex: 1; }
  .vs .vs-fc { min-height: 300px; }
  .vs-fc__face { padding: 18px 16px 14px; border-radius: 22px; }
  .vs-fc__word { font-size: 44px; }
  .vs-fc__meaning { font-size: 28px; }
  .vs-fc__meaning.is-def { font-size: 19px; }
  .vs-rows > div { grid-template-columns: 80px minmax(0, 1fr); font-size: 13.5px; }
  .vs-act .lv-btn { padding: 0 12px; }
  .vs-act .lv-btn--primary { flex: 1 1 0; min-width: 0; margin-left: 0; }
  .vs-act:not(.vs-act--fc) .lv-btn:not(.lv-btn--primary) { flex: none; }
  .vs-auto { gap: 8px; }
  .vs-auto .lv-btn--primary { flex: 1 1 auto; min-width: 0; padding: 0 12px; }
  .vs-seg { flex: none; }
  .vs-seg button { min-width: 44px; padding: 0 6px; }
  .vs-auto__stop { flex: none; margin-left: 0; padding: 0 12px; }
  /* Khay ghim đáy che phần dưới thẻ ⇒ cuộn tới đáp án đúng thì chừa đúng chiều cao khay */
  .vs .ss-opt { scroll-margin: 12px 0 calc(var(--ss-dock-h, 0px) + 12px); }
  .vs-cz-sent { font-size: 20px; }
  .vs .ss-prompt .ss-meaning.is-def { font-size: 19px; }
  .spk-studio { grid-template-columns: 1fr; gap: 12px; }
  .spk-word-panel { padding: 16px 18px; border-radius: 20px; gap: 8px; }
  .spk-word { font-size: clamp(28px, 8vw, 36px); }
  .spk-meaning { font-size: 16px; }
  .spk-example { padding: 9px 48px 9px 12px; font-size: 13.5px; }
  .spk-example__vi { display: none; }
  .spk-booth { border-radius: 20px; }
  .spk-stage { padding: 20px 16px 14px; }
  .spk-mic-wrap { width: 88px; height: 88px; }
  .spk-mic { width: 80px; height: 80px; }
  .spk-res { gap: 12px; padding: 12px 14px; }
  .spk-res__ring, .spk-res__ring svg { width: 62px; height: 62px; }
  .spk-steps { display: none; }
}
/* Máy rất hẹp (≤374px): thanh Học rảnh tay vẫn một hàng, nút chính không bị cắt chữ */
@media (max-width: 374px) {
  .vs-auto { gap: 6px; }
  .vs-auto .lv-btn--primary { padding: 0 10px; }
  .vs-seg button { min-width: 36px; padding: 0 3px; font-size: 13px; }
  .vs-auto__stop { padding: 0 8px; }
}
@media (max-width: 640px) {
  .vs-mbar__i.is-on { padding: 0 8px; }
  .vs-mbar__i.is-on > span { display: none; }
  .vs-czmode { align-self: stretch; display: flex; }
  .vs-czmode button { flex: 1 1 0; padding: 0 8px; }
  .vs-czres__sent { font-size: 17px; }
  .vs-path ol { grid-template-columns: 1fr; gap: 12px; }
  .vs-path li { padding: 0 0 0 30px; min-height: 20px; }
  .vs-path li::after { top: 20px; bottom: -14px; left: 8px; right: auto; width: 2px; height: auto; }
}
/* Khổ rộng: ô chế độ đang học đã có chữ ⇒ bỏ tên chế độ lặp dưới tên bộ */
@media (min-width: 641px) { .vb-title .vb-mname { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .vs-fc__inner { transition: none; }
  .spk-mic, .spk-ring, .spk-mic-wrap::after { animation: none !important; }
}

/* ── TTKK (21/10/2026): chữ Hán + pinyin trong buổi học 7 chế độ (public/assets/js/vocab-session.js) ──────────
   Chữ Hán dùng font CJK của design-tokens; theme ép body = font hệ thống nên 800 rất đậm ⇒ 600 (xem font-cjk-unified). */
.vs .vs-zh { font-family: var(--font-cjk); font-weight: 600; letter-spacing: 0; }
.vs .vs-fc__word.vs-zh, .vs .ss-word.vs-zh, .vs .spk-word.vs-zh { font-weight: 600; letter-spacing: 0; }
.vs .vs-py { font-style: normal; font-weight: 500; color: var(--lv-muted); }
.vs .is-stage .vs-py, .vs .spk-word-panel .vs-py { color: var(--lv-on-2); }
.vs .vs-fc__sub .vs-py { font-size: 18px; }
.vs .ss-opt__t .vs-zh { font-size: 1.3em; line-height: 1.25; }
.vs .vs-opt__py { display: none; margin-top: 2px; font-size: var(--fs-small); }
.vs .ss-opts.is-answered .vs-opt__py { display: block; }
.vs .vs-cz-sent.vs-zh { font-size: 26px; line-height: 1.65; }
.vs .vs-cz-py { margin: 0; font-size: 15px; line-height: 1.5; }
.vs .ss-ctx q.vs-zh, .vs .vs-ex q.vs-zh { font-weight: 600; }
.vs .ss-ctx .vs-py, .vs .vs-ex .vs-py { display: block; font-size: 13.5px; }
.vs .ss-sub .vs-say { width: 36px; height: 36px; margin: 0; }
/* Nhãn "Bài N: tên bài" trên dải — tên dài XUỐNG DÒNG, không cắt bằng dấu "…" (luật nhãn bài ở chế độ tập trung). */
.vb-title b.vsq-lesson { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.vs .vs-keys { line-height: 1.9; }
.vs .vs-keys kbd, #vsSettings .vs-keys kbd { display: inline-block; min-width: 22px; padding: 0 6px; border: 1px solid var(--lv-border); border-bottom-width: 2px; border-radius: 6px; background: var(--lv-surface); font-family: var(--font-mono); font-size: 12px; line-height: 20px; text-align: center; color: var(--lv-ink); }