/* ═══════════════════════════════════════════════════════════════════════════
   shadow-video.css — trang luyện Shadowing video (public/learn/shadowing/video.php)

   Giao diện "Phòng thu" (hướng A — chủ site chọn 25/09/2026 trong 3 bản mẫu). Dải teal đậm của App học v3 làm sân khấu:
   video lớn bên trái, bảng buổi đang học bên phải (vòng x/10 + 10 đoạn kèm điểm). Thẻ luyện trắng chồng lên mép dải: câu +
   nút bên trái, điểm bên phải, từng từ + âm cần sửa bên dưới. Bản ghi cả bài là thẻ trắng thu gọn ở cuối.

   Nạp SAU learn-shell.css + learn-ui.css (video.php gọi lv_dlg_assets() trước thẻ <link> của file này): dùng token
   --lv-*, hộp .lv-dlg. Câu dạng ô của Chính tả ở dictation-core.css (dùng chung với hội thoại). File này thay cho khối
   <style> 860 dòng trong trang + shadow-score.css + phần video của shadowing-mobile.css (video.php thôi nạp hai file đó).
   Chỉ token, không hex. Dải luôn tối ở cả hai chế độ; thẻ và nền trang tự lật theo token (sẵn-sàng-tối).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nền trang ── */
body:has(#svPage) { background: var(--lv-bg); }
.sv { --sv-max: 1240px; --sv-gut: 32px; font-family: var(--lv-font); font-size: 15px; line-height: 1.5; color: var(--lv-text); }
.sv *, .sv *::before, .sv *::after { box-sizing: border-box; }
.sv :where(h1, h2, h3, h4, p) { margin: 0; }
.sv :where(button) { font-family: inherit; }
.sv-in, .sv-wrap { max-width: calc(var(--sv-max) + 2 * var(--sv-gut)); margin-inline: auto; padding-inline: var(--sv-gut); }

/* ═══ DẢI SÂN KHẤU ═══
   Cùng công thức nền .lv-band (App học v3): hai quầng sáng + dải chuyển màu teal đậm, lưới chấm mờ, hạt mịn. Không dùng
   chính class .lv-band vì nó kéo lên dưới thanh trên (margin-top âm) — trang này ẩn thanh trên. */
.sv-band {
    position: relative; isolation: isolate; overflow: hidden; color: var(--lv-on);
    padding: 20px 0 132px;
    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);
}
.sv-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%);
}
.sv-band::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* design-tokens.css ép h1–h6 màu --color-ink ⇒ tiêu đề trên nền tối phải tự trả màu */
.sv-band :is(h1, h2, h3, h4) { color: var(--lv-on); }
.sv-band :focus-visible { outline: 2px solid var(--lv-on); outline-offset: 2px; }

/* ── Hàng đầu: quay lại · tên bài + meta · chế độ · Thêm… ── */
.sv-top { display: flex; align-items: center; gap: 14px 16px; }
.sv-back {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
    color: var(--lv-on); background: var(--lv-glass); border: 1px solid var(--lv-line-d); text-decoration: none;
    transition: background var(--lv-dur) var(--lv-ease);
}
.sv-back:hover { background: var(--lv-glass-2); color: var(--lv-on); }
.sv-title { flex: 1; min-width: 0; }
.sv-title h1 { font-size: 16px; line-height: 1.45; font-weight: 650; letter-spacing: -.005em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--lv-on-3); font-variant-numeric: tabular-nums; }
.sv-meta > * { position: relative; }
/* Dấu chấm ngăn vẽ bằng CSS — xuống dòng không còn dấu chấm mồ côi đầu hàng */
.sv-meta > * + *::before { content: ""; position: absolute; left: -8px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: currentColor; opacity: .55; }
.sv-meta__lv { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 750; background: var(--lv-on); color: var(--lv-deep-ink); }
.sv-meta__who { display: inline-flex; align-items: center; gap: 6px; color: var(--lv-on); font-weight: 600; text-decoration: none; }
a.sv-meta__who:hover { color: var(--lv-on); text-decoration: underline; }
.sv-meta__ava { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--lv-glass-2); }

.sv-modes { flex: none; display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--lv-glass); border: 1px solid var(--lv-line-d); }
.sv-modes button {
    height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; white-space: nowrap;
    font-size: 14px; font-weight: 600; color: var(--lv-on-2);
    transition: background var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease);
}
.sv-modes button:hover { color: var(--lv-on); background: var(--lv-glass); }
.sv-modes button.is-active { background: var(--lv-on); color: var(--lv-deep-ink); box-shadow: 0 6px 16px -8px color-mix(in srgb, black 55%, transparent); }
.sv-more {
    flex: none; height: 44px; padding: 0 16px; border-radius: 14px; cursor: pointer;
    border: 1px solid var(--lv-line-d); background: var(--lv-glass-2); color: var(--lv-on); font-size: 14px; font-weight: 600;
}
.sv-more:hover { background: color-mix(in srgb, var(--color-on-dark) 24%, transparent); }


/* ═══ SÂN KHẤU: video lớn (trái) · bảng buổi đang học (phải) ═══ */
.sv-stage { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 22px; }
.sv-side { min-width: 0; }
.sv-video {
    position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--lv-line-d); background: var(--lv-night);
    box-shadow: 0 34px 70px -34px color-mix(in srgb, black 85%, transparent);
}
.sh-player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lv-night); }
.sh-player iframe, .sh-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: var(--lv-night); }
/* Chặn mọi thao tác vào khung YouTube (tiêu đề, tua, gợi ý) — bấm khung = phát / dừng đoạn đang luyện */
.sh-player__lock { position: absolute; inset: 0; z-index: 3; cursor: pointer; }
.sh-player__hint {
    position: absolute; left: 50%; bottom: 14px; z-index: 6; transform: translateX(-50%); max-width: calc(100% - 24px);
    padding: 8px 14px; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity var(--lv-dur) var(--lv-ease);
    background: color-mix(in srgb, var(--color-snackbar) 88%, transparent); color: var(--color-on-dark);
    font-size: 13px; font-weight: 600; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-player__hint.is-shown { opacity: 1; }
/* Chính tả: hình làm mờ + một nhãn nhỏ; "Xem cảnh video" (body.is-peek) bỏ mờ. --color-snackbar tối ở CẢ hai chế độ. */
.sh-player__cover {
    display: none; position: absolute; inset: 0; z-index: 5; pointer-events: none; align-items: flex-end; justify-content: center;
    padding: 12px; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--color-snackbar) 55%, transparent));
}
.sh-player__cover span {
    max-width: 100%; padding: 6px 14px; border-radius: 999px; text-align: center; line-height: 1.45;
    background: color-mix(in srgb, var(--color-snackbar) 82%, transparent); color: var(--color-on-dark); font-size: 13px; font-weight: 600;
}
body.is-dictation:not(.is-peek) .sh-player__cover { display: flex; }
body.is-dictation:not(.is-peek) .sh-player :is(iframe, video) { filter: blur(22px) brightness(.8); }

/* ── Bảng buổi (kính trên dải). contain:size ⇒ cao ĐÚNG bằng khung video, danh sách tự cuộn bên trong. ── */
.sv-buoi {
    align-self: stretch; contain: size; display: flex; flex-direction: column; min-height: 0; padding: 16px 12px 10px;
    border-radius: 20px; border: 1px solid var(--lv-line-d);
    background: linear-gradient(160deg, var(--lv-glass-2), var(--lv-glass));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-on-dark) 10%, transparent) inset;
}
.sv-buoi:empty { display: none; }
.sv-buoi__head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; padding: 0 8px 14px; border-bottom: 1px solid var(--lv-line-d); }
.sv-buoi__head > div { flex: 1; min-width: 0; }
.sv-buoi__head h2 { font-size: 19px; line-height: 1.35; font-weight: 750; letter-spacing: -.01em; }
.sv-buoi__head p { font-size: 13px; line-height: 1.5; color: var(--lv-on-3); font-variant-numeric: tabular-nums; }
.sv-ring { position: relative; flex: none; display: grid; place-items: center; width: 54px; height: 54px; }
.sv-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sv-ring circle { fill: none; stroke-width: 5; }
.sv-ring__bg { stroke: var(--lv-glass-2); }
.sv-ring__fg { stroke: var(--lv-mint); stroke-linecap: round; transition: stroke-dashoffset .5s var(--lv-ease); }
.sv-ring b { position: relative; font-size: 12px; font-weight: 750; letter-spacing: -.02em; color: var(--lv-on); font-variant-numeric: tabular-nums; }
.sv-buoi__list {
    flex: 1; min-height: 0; display: grid; align-content: start; gap: 2px; margin: 0; padding: 0; list-style: none;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--lv-glass-2) transparent;
}
.sv-buoi__row {
    display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 40px;
    padding: 0 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left;
    color: var(--lv-on-3); font: 500 13.5px/1.5 var(--lv-font); transition: background var(--lv-dur) var(--lv-ease);
}
.sv-buoi__row:hover { background: var(--lv-glass); }
.sv-buoi__row:focus-visible { outline: 2px solid var(--lv-on); outline-offset: -2px; }
.sv-buoi__n {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--lv-line-d);
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sv-buoi__t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv-buoi__s { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sv-buoi__mask { font-style: italic; opacity: .85; }
.sv-buoi__row.is-done { color: var(--lv-on-2); }
.sv-buoi__row.is-done .sv-buoi__n { background: var(--lv-mint); border-color: var(--lv-mint); color: var(--lv-night); }
.sv-buoi__row.is-done .sv-buoi__s { color: var(--lv-mint); }
/* Dưới 60 điểm: hổ phách = cảnh báo "nên luyện lại" */
.sv-buoi__row.is-low .sv-buoi__n { background: var(--color-warning); border-color: var(--color-warning); color: var(--lv-night); }
.sv-buoi__row.is-low .sv-buoi__s { color: color-mix(in srgb, var(--color-warning) 60%, var(--color-on-dark)); }
.sv-buoi__row.is-cur { background: var(--lv-on); color: var(--lv-deep-ink); }
.sv-buoi__row.is-cur .sv-buoi__n { background: var(--lv-deep-ink); border-color: var(--lv-deep-ink); color: var(--lv-on); }
.sv-buoi__row.is-cur .sv-buoi__t { font-weight: 600; }
.sv-buoi__row.is-cur .sv-buoi__s { color: var(--lv-deep-ink); }
/* Dải 10 chấm — chỉ hiện ở màn hẹp (thay danh sách) */
.sv-buoi__dots { display: none; }
.sv-buoi__dots i {
    display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
    font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    border: 1.5px solid var(--lv-line-d); color: var(--lv-on-3);
}
.sv-buoi__dots .is-done { background: var(--lv-mint); border-color: var(--lv-mint); color: var(--lv-night); }
.sv-buoi__dots .is-low { background: var(--color-warning); border-color: var(--color-warning); color: var(--lv-night); }
.sv-buoi__dots .is-cur {
    width: 30px; height: 30px; font-size: 12px; background: var(--lv-on); border-color: var(--lv-on); color: var(--lv-deep-ink);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-on-dark) 16%, transparent);
}

/* ═══ THẺ LUYỆN — trắng, chồng lên mép dải ═══ */
.sv-wrap { position: relative; margin-top: -100px; padding-bottom: 64px; }
.sv-card {
    position: relative; margin-bottom: 20px; padding: 22px 30px 28px; border-radius: 22px;
    background: var(--lv-surface); border: 1px solid var(--lv-hair); color: var(--lv-text);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--lv-shade) 10%, transparent), 0 30px 60px -36px color-mix(in srgb, var(--lv-shade) 55%, transparent);
}
.sv-card :focus-visible { outline: 2px solid var(--lv-brand-fg); outline-offset: 2px; }

/* Đường lùi khi dựng bài lỗi (bình thường bị ẩn ngay từ đầu bằng .is-booting) */
#segFocus.is-booting > .sh-seg__empty { display: none; }
.sv-empty h2 { font-size: 24px; line-height: 1.35; font-weight: 750; letter-spacing: -.02em; color: var(--lv-ink); }
.sv-empty__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sv-empty__acts button {
    height: 50px; padding: 0 22px; border-radius: 14px; cursor: pointer; font-size: 15px; font-weight: 600;
    border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-ink);
}
.sv-empty__acts button:first-child { background: var(--lv-brand-strong); border-color: transparent; color: var(--lv-on); }

/* ── Hàng đầu thẻ: ‹ Đoạn i / N › · tốc độ · nghĩa · tự sang đoạn · tự bấm dừng ── */
.sv-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; padding-bottom: 18px; border-bottom: 1px solid var(--lv-hair); }
.sv-nav { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.sv-nav .sh-seg__navbtn {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-ink); transition: background var(--lv-dur) var(--lv-ease);
}
.sv-nav .sh-seg__navbtn:hover:not(:disabled) { background: var(--lv-tint); }
.sv-nav .sh-seg__navbtn:disabled { opacity: .4; cursor: default; }
.sh-seg__counter { font-size: 15px; color: var(--lv-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-seg__counter b { font-size: 18px; font-weight: 750; color: var(--lv-ink); }
.sv-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.sh-speed { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--lv-sunken); border: 1px solid var(--lv-hair); }
.sh-speed.is-parked { display: none; }
.sh-speed button {
    height: 32px; min-width: 50px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--lv-muted); font-variant-numeric: tabular-nums;
}
.sh-speed button:hover:not(:disabled) { color: var(--lv-ink); }
.sh-speed button.is-active { background: var(--lv-surface); color: var(--lv-ink); box-shadow: var(--lv-sh-1); }
/* Nút "Nghĩa" và hai ô chọn: dáng công tắc */
.sh-seg__vi-toggle, .sh-rec__manual {
    position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 0 0 46px; border: 0; background: none;
    font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--lv-text); cursor: pointer; user-select: none; white-space: nowrap;
}
.sh-seg__vi-toggle::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 36px; height: 22px; margin-top: -11px; border-radius: 999px;
    background: var(--lv-border); transition: background var(--lv-dur) var(--lv-ease);
}
.sh-seg__vi-toggle::after {
    content: ""; position: absolute; left: 3px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
    background: var(--lv-surface); box-shadow: var(--lv-sh-1); transition: transform var(--lv-dur) var(--lv-ease);
}
.sh-seg__vi-toggle.is-active::before { background: var(--lv-brand-strong); }
.sh-seg__vi-toggle.is-active::after { transform: translateX(14px); }
/* Ô chọn thật (giữ bàn phím + trình đọc màn hình): vẽ núm bằng nền — Firefox không vẽ ::after trên <input> */
.sh-rec__manual input {
    -webkit-appearance: none; appearance: none; position: absolute; left: 0; top: 50%; width: 36px; height: 22px; margin: -11px 0 0;
    border-radius: 999px; cursor: pointer;
    background: radial-gradient(circle 8px at 11px 50%, var(--lv-surface) 96%, transparent 100%), var(--lv-border);
}
.sh-rec__manual input:checked { background: radial-gradient(circle 8px at 25px 50%, var(--lv-surface) 96%, transparent 100%), var(--lv-brand-strong); }
.sh-seg__vi-toggle:hover, .sh-rec__manual:hover { color: var(--lv-ink); }

/* ── Thân thẻ: câu + nút (trái) · điểm (phải, chỉ khi đã chấm) ── */
.sv-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 22px; }
.sv-main:has(> .sh-score.is-shown) { grid-template-columns: minmax(0, 1fr) 380px; }
.sv-sayc { min-width: 0; }
.sh-seg__text { margin: 0; font-weight: 700; letter-spacing: -.015em; line-height: 1.5; color: var(--lv-ink); overflow-wrap: anywhere; text-wrap: pretty; }
.sh-seg__text.is-s  { font-size: 30px; }
.sh-seg__text.is-m  { font-size: 27px; }
.sh-seg__text.is-l  { font-size: 24px; letter-spacing: -.01em; }
.sh-seg__text.is-xl { font-size: 21px; letter-spacing: -.005em; }
.sh-seg__text .w { border-radius: 4px; transition: color var(--lv-dur) var(--lv-ease), opacity var(--lv-dur) var(--lv-ease); }
/* Chấm xong: gạch chân trạng thái từng từ (paintSentence) — chi tiết ở hàng ô từng từ bên dưới */
.sh-seg__text .kw--ok   { text-decoration: underline 3px color-mix(in srgb, var(--color-primary) 55%, transparent); text-underline-offset: 7px; }
.sh-seg__text .kw--weak { text-decoration: underline 3px var(--color-warning); text-underline-offset: 7px; }
.sh-seg__text .kw--miss { color: var(--lv-faint); text-decoration: underline 2px dashed var(--color-locked); text-underline-offset: 7px; }
/* Đường dự phòng nhận giọng của trình duyệt: so khớp TRỰC TIẾP khi đang đọc (liveDiffUpdate) */
.sh-seg__text .w.w-match { color: var(--lv-brand-deep); }
.sh-seg__text .w.w-weak  { color: var(--lv-warn-deep); }
.sh-seg__text .w.w-wrong { color: var(--lv-warn-deep); text-decoration: line-through; }
.sh-seg__text .w.w-pending,
.sh-seg__text.is-diffing .w:not(.w-match):not(.w-wrong):not(.w-weak) { opacity: .4; }
.sh-seg__vi { display: none; margin: 10px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--lv-muted); }
.sh-seg__vi.is-shown { display: block; }

/* ── Hàng nút dưới câu ── */
.sh-rec { margin-top: 24px; }
.sv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sv-btn, .sh-rec__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 22px;
    border-radius: 14px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
    font: 600 15px/1 var(--lv-font);
    transition: background var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease), border-color var(--lv-dur) var(--lv-ease), box-shadow var(--lv-dur) var(--lv-ease);
}
/* line-height PHẢI đủ chỗ cho dấu tiếng Việt (nút đặt font …/1) — bài học "Ôn ngay" 23/09 */
.sv-btn > span, .sh-rec__btn > span { line-height: 1.45; }
.sv-btn[hidden] { display: none; }
.sv-btn kbd, .sh-rec__btn kbd {
    display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px;
    font: 600 11px/1 var(--lv-font); background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; opacity: .85;
}
.sh-rec__btn, .sv-btn--primary {
    min-width: 180px; background: var(--lv-brand-strong); color: var(--lv-on);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-on-dark) 20%, transparent) inset, 0 10px 22px -12px color-mix(in srgb, var(--color-primary-hover) 90%, transparent);
}
.sh-rec__btn:hover, .sv-btn--primary:hover { background: color-mix(in srgb, var(--color-primary-hover) 82%, black); color: var(--lv-on); }
.sv-btn--outline { background: var(--lv-surface); color: var(--lv-ink); border-color: var(--lv-border); }
.sv-btn--outline:hover { background: var(--lv-tint); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--lv-border)); }
.sh-rec__btn.rec-playing { background: var(--lv-wash); color: var(--lv-brand-deep); border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); box-shadow: none; }
.sh-rec__btn.rec-recording { background: var(--lv-brand-strong); color: var(--lv-on); animation: svPulse 1.2s infinite; }
.sh-rec__btn.rec-done { background: var(--lv-sunken); color: var(--lv-muted); box-shadow: none; cursor: progress; }
/* Thứ tự: chưa chấm [Đọc theo · Nghe mẫu]; chấm xong [Nghe mẫu · Đọc lại · Đoạn tiếp] — nút ghi âm lùi thành nút phụ */
.sv-acts > .sh-rec__btn { order: 1; }
.sv-acts > .sv-btn--outline { order: 2; }
.sv-acts > #svNext { order: 3; }
.is-scored .sv-acts > .sv-btn--outline { order: 1; }
.is-scored .sv-acts > .sh-rec__btn { order: 2; }
.is-scored .sh-rec__btn.rec-idle { min-width: 0; background: var(--lv-surface); color: var(--lv-ink); border-color: var(--lv-border); box-shadow: none; }
.is-scored .sh-rec__btn.rec-idle:hover { background: var(--lv-tint); }
@keyframes svPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent); }
    70%      { box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-primary) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .sh-rec__btn.rec-recording { animation: none; } }
/* Phím tắt trong nút vô nghĩa trên cảm ứng */
@media (hover: none) and (pointer: coarse) { .sv-btn kbd, .sh-rec__btn kbd { display: none; } }

.sh-rec__main { margin-top: 12px; }
.sh-rec__status { max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--lv-ink); }
.sh-rec__status:empty { display: none; }
.sh-rec__status strong { font-weight: 700; }
.sh-wave { display: none; width: 100%; max-width: 520px; height: 40px; margin-top: 12px; border-radius: 10px; background: var(--lv-sunken); }
.sh-wave.is-shown { display: block; }
.sh-rec__transcript { margin-top: 8px; font-size: 14px; font-style: italic; line-height: 1.5; color: var(--lv-muted); overflow-wrap: anywhere; }
.sh-rec__transcript:empty { display: none; }

/* ── "Luyện lại" câu yếu của một buổi: dòng trên đầu thẻ ── */
.sh-retry {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 6px 6px 6px 16px;
    border-radius: 999px; background: var(--lv-wash); color: var(--lv-brand-deep); font-size: 14px; font-weight: 600;
}
.sh-retry button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: var(--lv-surface); color: var(--lv-brand-deep); font-size: 13.5px; font-weight: 700; }

/* ── Nút .dp-btn (thông báo, tổng kết buổi, Chính tả, hàng dưới thẻ điểm) ── */
.dp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px;
    border: 1px solid transparent; border-radius: 13px; cursor: pointer; text-decoration: none; white-space: nowrap;
    font: 600 15px/1.45 var(--lv-font);
    transition: background var(--lv-dur) var(--lv-ease), border-color var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease);
}
.dp-btn[hidden] { display: none; }
.dp-btn--sm { height: 40px; padding: 0 14px; border-radius: 11px; font-size: 14px; }
.dp-btn--primary {
    background: var(--lv-brand-strong); color: var(--lv-on);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-on-dark) 20%, transparent) inset, 0 8px 18px -10px color-mix(in srgb, var(--color-primary-hover) 90%, transparent);
}
.dp-btn--primary:hover { background: color-mix(in srgb, var(--color-primary-hover) 82%, black); color: var(--lv-on); }
.dp-btn--ghost { background: var(--lv-surface); color: var(--lv-ink); border-color: var(--lv-border); }
.dp-btn--ghost:hover { background: var(--lv-tint); color: var(--lv-ink); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--lv-border)); }
.dp-btn[aria-pressed="true"] { background: var(--lv-wash); color: var(--lv-brand-deep); border-color: transparent; }

/* Thông báo trong khu luyện (sh-notice) + thông báo nổi (sh-toast) */
.sh-notice { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-radius: 14px; text-align: left; line-height: 1.55; background: var(--color-warning-soft); color: var(--lv-warn-deep); }
.sh-notice b { font-weight: 700; }
.sh-notice p { margin: 0; font-size: 14px; color: var(--lv-text); }
.sh-notice .dp-actions { margin-top: 2px; }
.sh-notice .dp-btn { height: 44px; padding: 0 16px; font-size: 14.5px; }
.sh-notice--info { background: var(--lv-wash); color: var(--lv-brand-deep); }
.sh-toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translate(-50%, 16px);
    max-width: min(92vw, 420px); padding: 12px 20px; border-radius: 999px; pointer-events: none; opacity: 0;
    background: var(--color-snackbar); color: var(--color-on-dark); font-size: 14px; font-weight: 600; line-height: 1.45;
    box-shadow: var(--lv-sh-3); transition: opacity var(--lv-dur) var(--lv-ease), transform var(--lv-dur) var(--lv-ease);
}
.sh-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ═══ CHÍNH TẢ (trong thẻ) — câu dạng ô ở dictation-core.css, dùng chung với hội thoại ═══ */
.vd { display: flex; flex-direction: column; gap: 16px; }
.vd-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
/* Nút chính của Chính tả là "Kiểm tra" dưới ô gõ — nút nghe lại là nút phụ (vẫn dễ thấy cho cảm ứng không có Ctrl) */
.vd-listen .sh-rec__btn.rec-idle { background: var(--lv-surface); color: var(--lv-ink); border-color: var(--lv-border); box-shadow: none; }
.vd-listen .sh-rec__btn.rec-idle:hover { background: var(--lv-tint); }
.vd-steps { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--lv-muted); }
.vd-steps[hidden] { display: none; }
.vd-steps__dots { display: inline-flex; align-items: center; gap: 6px; }
.vd-steps__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lv-border); }
.vd-steps__dot.is-cur { background: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent); }
.vd-steps__dot.is-ok { background: var(--lv-brand-strong); }
.vd-steps__dot.is-gave { background: var(--lv-faint); }
.vd .sh-seg__vi { margin: 0; }
.vd .dc-res { margin: 0; }
.sv-card .dc-line { font-size: 22px; }
.vd-done { margin: 0; font-size: 17px; line-height: 1.7; color: var(--lv-text); overflow-wrap: anywhere; }
.vd-done[hidden] { display: none; }
.vd-done__lb { margin-right: 6px; font-size: 13.5px; font-weight: 600; color: var(--lv-muted); }
.vd-done__c { font-weight: 600; color: var(--lv-brand-deep); }
.vd-done__c.is-gave { color: var(--color-accent-deep); }
.vd-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--lv-muted); }
.vd-label__n { padding: 1px 9px; border-radius: 999px; background: var(--lv-sunken); font-size: 12px; font-weight: 700; color: var(--lv-muted); }
.vd-label__n:empty { display: none; }
.dp-input {
    display: block; width: 100%; min-height: 112px; resize: vertical; padding: 16px 18px; border-radius: 16px;
    border: 1.5px solid var(--lv-border); background: var(--lv-bg); color: var(--lv-ink); font: 500 18px/1.55 var(--lv-font);
    transition: border-color var(--lv-dur) var(--lv-ease), box-shadow var(--lv-dur) var(--lv-ease);
}
.dp-input:focus { outline: none; border-color: color-mix(in srgb, var(--color-primary) 60%, var(--lv-border)); box-shadow: var(--lv-focus); background: var(--lv-surface); }
.dp-input::placeholder { color: var(--lv-faint); }
.dp-input[readonly] { background: var(--lv-sunken); color: var(--lv-text); }
.vd-actbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.vd-actbar [hidden] { display: none; }
.vd-actbar #vdPeek { margin-right: auto; }
.vd-save { font-size: 14px; line-height: 1.55; color: var(--lv-muted); }
.vd-save:empty { display: none; }
.vd-save.is-ok { font-weight: 600; color: var(--lv-brand-deep); }
.vd-save.is-err { color: var(--lv-warn-deep); }
.vd-save a, .vd-save__btn { color: var(--lv-brand-fg); font-weight: 600; text-decoration: underline; }
.vd-save__btn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.vd-empty { font-size: 16px; line-height: 1.6; color: var(--lv-muted); }
.dp-kbd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12.5px; color: var(--lv-muted); }
.dp-kbd span { display: inline-flex; align-items: center; gap: 5px; }
.dp-kbd kbd {
    display: inline-block; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--lv-border); border-bottom-width: 2px;
    background: var(--lv-surface); color: var(--lv-ink); font: 700 11px/1.4 var(--lv-font);
}
.dp-kbd__all { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--lv-brand-fg); text-decoration: underline; cursor: pointer; }
@media (hover: none) and (pointer: coarse) { .dp-kbd { display: none; } }

/* ═══ TỔNG KẾT BUỔI — thay chỗ câu trong thẻ khi hết 10 đoạn (showBuoiSummary) ═══ */
.sh-buoi { display: flex; flex-direction: column; gap: 18px; }
.sh-buoi__head h3 { margin: 0 0 4px; font-size: 26px; line-height: 1.3; font-weight: 750; letter-spacing: -.02em; color: var(--lv-ink); }
.sh-buoi__head p { font-size: 14.5px; color: var(--lv-muted); }
.sh-buoi__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 660px; }
.sh-buoi__stats > div { padding: 14px 16px; border-radius: 16px; background: var(--lv-tint); border: 1px solid var(--lv-hair); }
.sh-buoi__stats b { display: block; font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--lv-brand-deep); font-variant-numeric: tabular-nums; }
.sh-buoi__stats span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--lv-muted); }
.sh-buoi__weak h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--lv-ink); }
.sh-buoi__row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; max-width: 660px;
    margin-top: 6px; padding: 10px 14px; border: 1px solid var(--lv-border); border-radius: 14px; background: var(--lv-surface);
    color: var(--lv-text); font: inherit; text-align: left; cursor: pointer;
    transition: border-color var(--lv-dur) var(--lv-ease), background var(--lv-dur) var(--lv-ease);
}
.sh-buoi__row:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--lv-border)); background: var(--lv-tint); }
.sh-buoi__n { min-width: 26px; font-size: 13px; font-weight: 700; color: var(--lv-muted); }
.sh-buoi__t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; line-height: 1.5; }
.sh-buoi__s { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--color-warning-soft); color: var(--lv-warn-deep); }
.sh-buoi__note { font-size: 14px; color: var(--lv-muted); }
.sh-buoi__acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* ═══ ĐIỂM (cột phải của thẻ) + HÀNG DƯỚI (từng từ · âm cần sửa) ═══ */
.sh-score { display: none; }
.sh-score.is-shown { display: block; min-width: 0; font-size: 15px; line-height: 1.55; color: var(--lv-text); }
.sv-main > .sh-score.is-shown { padding-left: 32px; border-left: 1px solid var(--lv-hair); }
.sv-res { display: grid; gap: 18px; align-content: start; }
.sv-res .dp-sc { display: flex; align-items: center; gap: 18px; }
.dp-sc__ring { position: relative; width: 108px; height: 108px; flex: none; }
.dp-sc__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dp-sc__tr { stroke: var(--lv-sunken); }
.dp-sc__ar { stroke: var(--color-primary); transition: stroke-dashoffset .9s var(--lv-ease); }
.dp-sc.mid .dp-sc__ar { stroke: var(--color-warning); }
.dp-sc__n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.dp-sc__n b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.dp-sc__n span { margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--lv-faint); }
.dp-sc__side { flex: 1; min-width: 0; }
.dp-sc__vd { font-size: 17px; line-height: 1.4; font-weight: 750; color: var(--lv-ink); }
.dp-sc__sub { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--lv-muted); }
.dp-best { display: inline-flex; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--lv-wash); color: var(--lv-brand-deep); }
/* Đếm ngược tự sang đoạn (scheduleAutoNext) — CHỈ khi đúng hết câu. Dừng rồi GIỮ chỗ (visibility): dòng co lại đúng lúc
   ngón tay đang chạm là nút bên dưới trượt khỏi chỗ bấm. */
.dp-autonext { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--lv-brand-deep); }
.dp-autonext__tx { min-width: 0; }
.dp-autonext__stay { height: 30px; padding: 0 12px; border: 1px solid var(--lv-border); border-radius: 999px; background: var(--lv-surface); color: var(--lv-text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.dp-autonext__stay:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--lv-border)); }
.dp-autonext__bar { flex: 1 0 100%; height: 3px; border-radius: 999px; background: var(--lv-sunken); overflow: hidden; }
.dp-autonext__bar i { display: block; height: 100%; background: var(--color-primary); transform-origin: left center; animation: dpAutoNext linear forwards; }
@keyframes dpAutoNext { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.dp-autonext.is-stopped { color: var(--lv-muted); }
.dp-autonext.is-stopped .dp-autonext__stay, .dp-autonext.is-stopped .dp-autonext__bar { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .dp-autonext__bar i { animation: none; } }
@media (pointer: coarse) { .dp-autonext__stay { height: 36px; padding: 0 16px; } }
.dp-subs { display: grid; gap: 12px; }
.dp-subs__i { display: grid; grid-template-columns: 106px minmax(0, 1fr) 32px; align-items: center; gap: 12px; }
.dp-subs__i span { font-size: 13.5px; font-weight: 500; color: var(--lv-muted); }
.dp-subs__i b { grid-column: 3; grid-row: 1; text-align: right; font-size: 15px; font-weight: 700; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.dp-subs__bar { grid-column: 2; grid-row: 1; height: 8px; border-radius: 999px; background: var(--lv-sunken); overflow: hidden; }
.dp-subs__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--lv-brand-strong)); transition: width .6s var(--lv-ease); }
.dp-subs__i.is-low .dp-subs__bar i { background: var(--color-warning); }
.dp-subs__i.is-low b { color: var(--lv-warn-deep); }
.dp-rhythm { font-size: 13.5px; font-weight: 600; color: var(--lv-muted); }
.dp-rhythm--good { color: var(--lv-brand-deep); }
.dp-rhythm--slow, .dp-rhythm--fast { color: var(--lv-warn-deep); }

.sv-detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--lv-hair); }
.sv-detail[hidden] { display: none; }
.sv-detail:not(:has(> .sv-detail__fix)) { grid-template-columns: minmax(0, 1fr); }
.sv-detail__words, .sv-detail__fix { min-width: 0; }
.dp-lb { margin: 0 0 10px; font-size: 13.5px; font-weight: 650; color: var(--lv-ink); }
.dp-words { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-w {
    display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 12px; border-radius: 12px;
    border: 1px solid transparent; background: var(--lv-sunken); white-space: nowrap; font-size: 15px; line-height: 1.4;
}
.dp-w b { font-weight: 600; }
.dp-w span { font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.dp-w--ok { background: var(--lv-wash); color: var(--lv-brand-deep); }
.dp-w--weak { background: var(--color-warning-soft); color: var(--lv-warn-deep); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); }
.dp-w--miss { background: var(--lv-sunken); color: var(--color-locked-deep); border-style: dashed; border-color: var(--color-locked); }
.dp-said { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--lv-text); overflow-wrap: anywhere; }
.dp-said > span { color: var(--lv-muted); }
.dp-said q { quotes: "“" "”"; font-weight: 500; color: var(--lv-ink); }
.dp-said i { color: var(--lv-muted); }
.dp-engine { margin-top: 8px; font-size: 12.5px; font-style: italic; line-height: 1.5; color: var(--lv-muted); }
.sv-detail__acts { margin-top: 12px; }
.dp-fix { display: grid; gap: 10px; }
.dp-fix__i { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: var(--lv-tint); border: 1px solid var(--lv-hair); }
.dp-fix__w { padding: 3px 9px; border-radius: 8px; font-size: 13.5px; font-weight: 700; white-space: nowrap; background: var(--color-warning-soft); color: var(--lv-warn-deep); }
.dp-fix__b { min-width: 0; font-size: 14px; line-height: 1.55; }
.dp-fix__b .is-issue { color: var(--lv-ink); }
.dp-fix__b .is-fix { display: block; margin-top: 2px; font-weight: 600; color: var(--lv-brand-fg); }

/* Thẻ kết quả kiểu cũ — CHỈ còn ở đường dự phòng nhận giọng của trình duyệt (renderScore). Nằm trong thẻ luyện ⇒ bỏ khung riêng. */
.sh-sc { padding: 0; border: 0; background: none; box-shadow: none; }
.sh-sc__header { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.sh-sc__head-text { flex: 1; min-width: 200px; }
.sh-sc__headline { font-size: 17px; font-weight: 750; line-height: 1.4; color: var(--lv-ink); }
.sh-sc__sub { margin: 2px 0 12px; font-size: 14px; line-height: 1.55; color: var(--lv-muted); }
.sh-sc__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-sc__btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-ink); font: 600 14px/1.45 var(--lv-font); cursor: pointer; }
.sh-sc__btn:hover { background: var(--lv-tint); }
.sh-sc__btn--primary { background: var(--lv-brand-strong); border-color: transparent; color: var(--lv-on); }
.sh-sc__btn--primary:hover { background: color-mix(in srgb, var(--color-primary-hover) 82%, black); }
.sh-sc__btn i, .sh-sc__metric-head i, .sh-sc__sec-title i, .sh-sc__card-icon, .sh-drill i { display: none; }
.sh-sc__circle { position: relative; width: 104px; height: 104px; flex: none; }
.sh-sc__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sh-sc__track { fill: none; stroke: var(--lv-sunken); stroke-width: 9; }
.sh-sc__fill { fill: none; stroke: var(--color-primary); stroke-width: 9; stroke-linecap: round; }
.sh-sc--ok .sh-sc__fill, .sh-sc--weak .sh-sc__fill, .sh-sc--poor .sh-sc__fill { stroke: var(--color-warning); }
.sh-sc__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin-top: 4px; font-size: 30px; font-weight: 800; color: var(--lv-ink); }
.sh-sc__num-lbl { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 10px; font-weight: 700; color: var(--lv-muted); }
.sh-sc__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lv-hair); }
.sh-sc__metric-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 13.5px; color: var(--lv-muted); }
.sh-sc__metric-head b { font-size: 15px; font-weight: 700; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.sh-sc__bar { height: 8px; border-radius: 999px; background: var(--lv-sunken); overflow: hidden; }
.sh-sc__bar span { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.sh-sc--ok .sh-sc__bar span, .sh-sc--weak .sh-sc__bar span, .sh-sc--poor .sh-sc__bar span { background: var(--color-warning); }
.sh-sc__metric-hint { margin-top: 4px; font-size: 12.5px; color: var(--lv-muted); }
.sh-sc__section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--lv-hair); }
.sh-sc__sec-title { margin-bottom: 8px; font-size: 13.5px; font-weight: 650; color: var(--lv-ink); }
.sh-sc__cards { display: grid; gap: 8px; }
.sh-sc__card { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--lv-tint); }
.sh-sc__card--err { background: var(--color-warning-soft); }
.sh-sc__card-word { flex: none; align-self: flex-start; padding: 3px 9px; border-radius: 8px; font-size: 13.5px; font-weight: 700; background: var(--lv-surface); color: var(--lv-warn-deep); }
.sh-sc__card-body { flex: 1; font-size: 13.5px; line-height: 1.55; color: var(--lv-ink); }
.sh-sc__card-title { font-weight: 700; }
.sh-sc__card-detail { color: var(--lv-muted); }
.sh-sc__card-issue, .sh-sc__card-issue b, .sh-sc__card-fix b { color: var(--lv-warn-deep); }
.sh-sc__card-fix { margin-top: 3px; color: var(--lv-brand-deep); }
.sh-sc__tips { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--lv-text); }
.sh-sc__legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--lv-muted); }
.sh-lg--ok b { color: var(--lv-brand-deep); }
.sh-lg--miss b, .sh-lg--extra b { color: var(--lv-warn-deep); }
.sh-diff { margin-top: 8px; font-size: 14.5px; line-height: 1.75; }
.sh-diff del { padding: 0 2px; border-radius: 3px; background: var(--color-warning-soft); color: var(--lv-warn-deep); text-decoration-thickness: 2px; }
.sh-diff ins { margin-left: 3px; padding: 0 3px; border-radius: 3px; background: var(--lv-wash); color: var(--lv-brand-deep); text-decoration: none; font-weight: 600; }
.sh-drill { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--color-warning-soft); color: var(--lv-warn-deep); font-size: 14px; }
.sh-drill__head { margin-bottom: 6px; font-weight: 600; }
.sh-drill__btn { height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--lv-brand-strong); color: var(--lv-on); font: 600 14px var(--lv-font); cursor: pointer; }
.sh-drill--done { background: var(--lv-wash); color: var(--lv-brand-deep); }

/* ── Bản ghi cả bài: thẻ trắng, mặc định THU GỌN ── */
.sv-script { overflow: hidden; border-radius: 22px; background: var(--lv-surface); border: 1px solid var(--lv-hair); box-shadow: var(--lv-sh-2); }
.sh-card__head { display: flex; align-items: center; gap: 12px 16px; padding: 16px 20px; cursor: pointer; user-select: none; transition: background var(--lv-dur) var(--lv-ease); }
.sh-card__head:hover { background: var(--lv-tint); }
.sh-card__head:focus-visible { outline: 2px solid var(--lv-brand-fg); outline-offset: -2px; }
.sh-card__title { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--lv-ink); white-space: nowrap; }
.sh-card__count { padding: 2px 9px; border-radius: 999px; background: var(--lv-sunken); color: var(--lv-muted); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-script__now { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: var(--lv-muted); }
.sh-script__now b { font-weight: 600; color: var(--lv-ink); }
.sh-script__now:empty { display: none; }
.sh-seg-search {
    width: 260px; height: 40px; margin-left: auto; padding: 0 14px; border-radius: 12px; outline: none;
    border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-ink); font: 500 14px var(--lv-font);
}
.sh-seg-search::placeholder { color: var(--lv-faint); }
.sh-seg-search:focus { border-color: color-mix(in srgb, var(--color-primary) 60%, var(--lv-border)); box-shadow: var(--lv-focus); }
.sh-script__chev { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--lv-muted); transition: transform var(--lv-dur) var(--lv-ease); }
.sh-script.is-collapsed .sh-list, .sh-script.is-collapsed .sh-seg-search { display: none; }
.sh-script:not(.is-collapsed) .sh-script__now { display: none; }
.sh-script:not(.is-collapsed) .sh-script__chev { transform: rotate(180deg); }
.sh-script:not(.is-collapsed) .sh-card__head { border-bottom: 1px solid var(--lv-hair); }
.sh-list { display: flex; flex-direction: column; gap: 6px; max-height: min(70vh, 760px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 18px; }
.sh-list__buoi { display: flex; align-items: baseline; gap: 8px; margin: 12px 4px 2px; font-size: 14px; font-weight: 700; color: var(--lv-ink); }
.sh-list__buoi:first-child { margin-top: 0; }
.sh-list__buoi span { font-size: 13px; font-weight: 500; color: var(--lv-muted); }
.sh-list.is-filtering .sh-list__buoi { display: none; }
.sh-list__item {
    flex-shrink: 0; display: grid; grid-template-columns: 30px 8px minmax(0, 1fr) auto; gap: 12px; align-items: start;
    padding: 12px 14px; border-radius: 14px; border: 1px solid var(--lv-hair); background: var(--lv-surface); cursor: pointer;
    transition: background var(--lv-dur) var(--lv-ease), box-shadow var(--lv-dur) var(--lv-ease);
}
.sh-list__item:hover { background: var(--lv-tint); }
.sh-list__item.is-active, .sh-list__item.is-playing { background: var(--lv-wash); border-color: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-primary) 55%, transparent); }
.sh-list__item.is-hidden-filter { display: none; }
.sh-list__num { padding-top: 2px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--lv-faint); font-variant-numeric: tabular-nums; }
.sh-list__dot { width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: var(--lv-border); transition: background var(--lv-dur) var(--lv-ease); }
.sh-list__dot.is-good { background: var(--color-primary); }
.sh-list__dot.is-mid, .sh-list__dot.is-low { background: var(--color-warning); }
.sh-list__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 15px; line-height: 1.6; color: var(--lv-ink); overflow-wrap: anywhere; }
.sh-list__txt { font-weight: 500; }
.sh-list__vi { font-size: 13.5px; line-height: 1.55; color: var(--lv-muted); }
.sh-list__side { display: inline-flex; align-items: center; gap: 8px; padding-top: 2px; }
.sh-list__score-tag { padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--lv-sunken); color: var(--lv-muted); font-variant-numeric: tabular-nums; }
.sh-list__score-tag[hidden] { display: none; }
.sh-list__score-tag.is-good { background: var(--lv-wash); color: var(--lv-brand-deep); }
.sh-list__score-tag.is-mid, .sh-list__score-tag.is-low { background: var(--color-warning-soft); color: var(--lv-warn-deep); }
.sh-filter-empty { display: none; padding: 22px; text-align: center; font-size: 14px; color: var(--lv-muted); }
.sh-filter-empty.is-shown { display: block; }
/* Chính tả: bản ghi không lộ chữ tiếng Anh (chuỗi "đang nghe" nằm trong <style> của trang — qua __()) */
body.is-dictation .sh-list__txt { display: none; }
body.is-dictation .sh-list__text::before { content: "•••••• •••••• ••••••"; letter-spacing: 2px; color: var(--lv-border); }
body.is-dictation .sh-list__item.is-active .sh-list__text::before,
body.is-dictation .sh-list__item.is-playing .sh-list__text::before { letter-spacing: 0; font-style: italic; color: var(--lv-muted); }
.sh-script__foot { display: flex; justify-content: center; margin-top: 20px; }
.sh-script__finish {
    height: 52px; padding: 0 28px; border-radius: 14px; cursor: pointer;
    border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-ink); font: 600 15.5px/1.45 var(--lv-font); box-shadow: var(--lv-sh-1);
    transition: background var(--lv-dur) var(--lv-ease), border-color var(--lv-dur) var(--lv-ease);
}
.sh-script__finish:hover { background: var(--lv-tint); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--lv-border)); }

/* ═══ HỘP NỔI: tổng kết cả bài · phím tắt · pháo giấy ═══ */
.sh-modal__overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 18px; background: color-mix(in srgb, var(--lv-shade) 55%, transparent); animation: shFade .2s ease; }
@keyframes shFade { from { opacity: 0; } to { opacity: 1; } }
.sh-modal { width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; border-radius: 20px; background: var(--lv-surface); color: var(--lv-text); box-shadow: var(--lv-sh-3); }
.sh-modal__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--lv-hair); }
.sh-modal__head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--lv-ink); }
.sh-modal__close { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--lv-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.sh-modal__close:hover { background: var(--lv-sunken); color: var(--lv-ink); }
.sh-sum__hero { display: flex; align-items: center; gap: 18px; padding: 22px; border-bottom: 1px solid var(--lv-hair); background: linear-gradient(135deg, var(--lv-wash) 0%, var(--lv-surface) 100%); }
.sh-sum__big { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--lv-brand-deep); font-variant-numeric: tabular-nums; }
.sh-sum__heroLbl { font-size: 15px; font-weight: 600; color: var(--lv-ink); }
.sh-sum__heroLbl small { font-size: 13px; font-weight: 400; color: var(--lv-muted); }
.sh-sum__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px 22px; }
.sh-sum__stats > div { padding: 10px 6px; text-align: center; border-radius: 12px; background: var(--lv-sunken); }
.sh-sum__stats b { display: block; font-size: 20px; font-weight: 700; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.sh-sum__stats span { font-size: 12px; color: var(--lv-muted); }
.sh-sum__advice { padding: 0 22px 14px; font-size: 14px; line-height: 1.6; color: var(--lv-ink); }
.sh-sum__sec { padding: 14px 22px; border-top: 1px solid var(--lv-hair); }
.sh-sum__sec h4 { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--lv-ink); }
.sh-sum__sec ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--lv-text); }
.sh-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--lv-hair); }
.sh-modal__btn {
    display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 12px; cursor: pointer; text-decoration: none;
    border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-ink); font: 600 14px/1.45 var(--lv-font);
}
.sh-modal__btn:hover { background: var(--lv-tint); color: var(--lv-ink); }
.sh-modal__btn--primary { background: var(--lv-brand-strong); border-color: transparent; color: var(--lv-on); }
.sh-modal__btn--primary:hover { background: color-mix(in srgb, var(--color-primary-hover) 82%, black); color: var(--lv-on); }
.sh-keys { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; }
.sh-keys__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px dotted var(--lv-hair); font-size: 13.5px; }
.sh-keys__row:last-child { border-bottom: 0; }
.sh-keys__row span { color: var(--lv-text); }
.sh-keys__row kbd { padding: 2px 8px; border-radius: 6px; border: 1px solid var(--lv-border); border-bottom-width: 2px; background: var(--lv-surface); color: var(--lv-ink); font: 700 11.5px/1.4 var(--lv-font); }
.sh-keys__group-lbl { margin-top: 4px; padding: 10px 0 3px; border-top: 1px solid var(--lv-hair); font-size: 14px; font-weight: 700; color: var(--lv-ink); }
.sh-keys__group-lbl:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sh-keys__note { margin: 0 0 2px; font-size: 12.5px; color: var(--lv-muted); }
.sh-keys__k { display: inline-flex; align-items: center; gap: 3px; color: var(--lv-muted); }
.sh-confetti { position: fixed; inset: 0; z-index: 9998; overflow: hidden; pointer-events: none; }
.sh-confetti__p { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 1px; animation: shConfFall 2.4s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes shConfFall {
    0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(110vh) rotate(900deg) scale(.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sh-confetti { display: none; } }

/* ── Tấm "Thêm…" + tấm chọn cách luyện (khuôn .lv-dlg) ── */
.sh-start, .sh-more { z-index: 9990; }
.sh-start .lv-dlg__head, .sh-more .lv-dlg__head { background: linear-gradient(180deg, var(--lv-tint), var(--lv-surface)); border-radius: 20px 20px 0 0; }
.sh-more .lv-dlg__head h3 { font-size: 16px; }
.sh-start__head { flex: 1; min-width: 0; }
.sh-start__list, .sh-more__list { display: flex; flex-direction: column; gap: 12px; }
.sh-start__opt, .sh-more__opt {
    display: grid; gap: 4px; width: 100%; padding: 14px 18px; text-align: left; text-decoration: none; cursor: pointer;
    border: 1px solid var(--lv-border); border-radius: 14px; background: var(--lv-surface); color: var(--lv-text); font: inherit;
    transition: border-color var(--lv-dur) var(--lv-ease), background var(--lv-dur) var(--lv-ease);
}
.sh-start__opt:hover, .sh-more__opt:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--lv-border)); background: var(--lv-tint); }
.sh-start__opt:focus-visible, .sh-more__opt:focus-visible { outline: 2px solid var(--lv-brand-fg); outline-offset: 2px; }
.sh-start__opt b, .sh-more__opt b { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--lv-ink); }
.sh-start__opt span, .sh-more__opt span { font-size: 14px; line-height: 1.55; color: var(--lv-muted); }
.sh-more__opt.is-active { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--lv-border)); background: var(--lv-tint); }
.sh-start__opt small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--lv-faint); }
.sh-start__opt kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--lv-border); border-bottom-width: 2px; border-radius: 6px; background: var(--lv-surface); color: var(--lv-ink); font: 700 11px/1.4 var(--lv-font); }
.sh-start__opt small kbd:not(:first-child) { margin-left: 10px; }   /* tách cặp phím thứ hai khỏi chữ của cặp đầu */
/* Bàn phím mềm không có Ctrl / Space kiểu máy tính */
@media (hover: none) and (pointer: coarse) { .sh-start__opt small, .sh-more__opt--keys { display: none; } }

/* ── Chế độ tập trung (phím Z): ẩn bảng buổi + bản ghi + dòng meta — chỉ còn video và thẻ luyện ── */
/* Cài đặt luyện (tấm Thêm… → Cài đặt): tắt bảng đoạn của buổi ⇒ video một cột, khổ vừa mắt như chế độ tập trung;
   tắt làm mờ khi chép chính tả ⇒ bỏ lớp mờ, nhãn trên hình và nút "Xem cảnh video" (không còn gì để xem thêm). */
.sv--nobuoi .sv-buoi { display: none !important; }
.sv--nobuoi .sv-stage { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin-inline: auto; }
.sv--noblur .sh-player :is(iframe, video) { filter: none !important; }
.sv--noblur .sh-player__cover, .sv--noblur #vdPeek { display: none !important; }
body.sh-focus-mode [data-focus-hide], body.sh-focus-mode .sv-meta, body.sh-focus-mode .sv-buoi { display: none !important; }
body.sh-focus-mode .sv-stage { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin-inline: auto; }
.sh-focus-exit {
    position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60;
    display: none; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--color-snackbar); color: var(--color-on-dark); font: 600 14px/1.45 var(--lv-font); box-shadow: var(--lv-sh-3);
}
.sh-focus-exit kbd { padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--color-on-dark) 18%, transparent); color: var(--color-on-dark); font: 700 11px/1.4 var(--lv-font); }
body.sh-focus-mode .sh-focus-exit { display: inline-flex; }


/* ═══ MÀN VỪA (laptop hẹp, máy tính bảng ngang) ═══ */
@media (max-width: 1100px) {
    .sv { --sv-gut: 24px; }
    .sv-stage { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .sv-main:has(> .sh-score.is-shown), .sv-detail { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
    .sv-main > .sh-score.is-shown { padding-left: 24px; }
    .sh-seg__text.is-s  { font-size: 27px; }
    .sh-seg__text.is-m  { font-size: 25px; }
    .sh-seg__text.is-l  { font-size: 22px; }
    .sh-seg__text.is-xl { font-size: 20px; }
}
/* Dưới 900px: video trải hết bề ngang, bảng buổi thu thành dải 10 chấm; điểm + từng từ xếp dưới câu */
@media (max-width: 900px) {
    .sv-stage { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .sv-buoi { contain: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px 14px; border-radius: 16px; }
    .sv-buoi__head { flex: 1 1 auto; flex-wrap: wrap; margin: 0; padding: 0; border: 0; gap: 12px; }
    .sv-buoi__head h2 { font-size: 15px; }
    .sv-buoi__head p { font-size: 12.5px; }
    .sv-ring, .sv-buoi__list { display: none; }
    .sv-buoi__dots { display: flex; flex: 0 0 100%; align-items: center; justify-content: space-between; }
    .sv-main:has(> .sh-score.is-shown) { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .sv-main > .sh-score.is-shown { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--lv-hair); }
    .sv-detail { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    /* Bảng buổi ở CUỐI thẻ luyện (wirePath() chuyển xuống — chữ của đoạn phải sát video): bản sáng trên nền thẻ */
    .sv-card > .sv-buoi {
        margin-top: 22px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--lv-hair); border-radius: 0;
        background: none; box-shadow: none; color: var(--lv-text);
    }
    .sv-card > .sv-buoi .sv-buoi__head h2 { color: var(--lv-ink); }
    .sv-card > .sv-buoi .sv-buoi__head p { color: var(--lv-muted); }
    .sv-card > .sv-buoi .sv-buoi__dots i { border-color: var(--lv-border); color: var(--lv-muted); }
    .sv-card > .sv-buoi .sv-buoi__dots .is-done { background: var(--lv-brand-strong); border-color: var(--lv-brand-strong); color: var(--lv-on); }
    .sv-card > .sv-buoi .sv-buoi__dots .is-low { background: var(--color-warning); border-color: var(--color-warning); color: var(--lv-night); }
    .sv-card > .sv-buoi .sv-buoi__dots .is-cur { background: var(--lv-ink); border-color: var(--lv-ink); color: var(--lv-surface); box-shadow: 0 0 0 4px var(--lv-wash); }
}

/* ═══ ĐIỆN THOẠI ═══ */
@media (max-width: 760px) {
    .sv { --sv-gut: 16px; }
    .sv-band { padding: 12px 0 84px; }
    .sv-top { flex-wrap: wrap; gap: 12px; }
    .sv-back { width: 40px; height: 40px; border-radius: 12px; }
    /* line-height ≥ 1.4 khi cắt 2 dòng: ≤ 1.25 kèm overflow:hidden là xén mũ chữ tiếng Việt */
    .sv-title h1 { font-size: 15px; line-height: 1.45; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .sv-meta { display: none; }
    .sv-more { height: 40px; padding: 0 14px; border-radius: 12px; }
    .sv-modes { order: 5; width: 100%; }
    .sv-modes button { flex: 1 1 0; min-width: 0; height: 38px; padding: 0 6px; }
    .sv-stage { margin-top: 14px; }
    .sv-video { border-radius: 14px; }
    .sv-buoi__dots i { width: 22px; height: 22px; font-size: 10.5px; }
    .sv-buoi__dots .is-cur { width: 28px; height: 28px; font-size: 11.5px; }
    .sv-wrap { margin-top: -64px; padding-bottom: 40px; }
    .sv-card { padding: 16px 16px 20px; border-radius: 20px; }
    .sv-bar { gap: 12px 16px; padding-bottom: 14px; }
    .sv-nav { width: 100%; }
    .sv-nav .sh-seg__counter { flex: 1; text-align: center; }
    .sv-nav .sh-seg__navbtn { width: 44px; height: 44px; }
    .sv-opts { width: 100%; gap: 10px 18px; }
    .sh-speed { width: 100%; }
    /* Chữ của đoạn sát video (chủ site 25/09): thân thẻ (câu + nút + điểm) lên đầu; ‹ Đoạn i/N ›, tốc độ, công tắc
       và dòng Luyện lại xuống cuối thẻ, ngay trên bảng buổi */
    .sv-seg { display: flex; flex-direction: column; }
    .sv-seg > .sv-main { order: 1; padding-top: 0; }
    .sv-seg > .sv-detail { order: 2; }
    .sv-seg > .sh-retry { order: 3; margin: 22px 0 0; }
    .sv-seg > .sv-bar { order: 4; margin-top: 22px; padding: 16px 0 0; border-bottom: 0; border-top: 1px solid var(--lv-hair); }
    .sh-speed button { flex: 1 1 0; min-width: 0; height: 36px; }
    .sv-main { padding-top: 18px; }
    .sh-seg__text.is-s  { font-size: 23px; }
    .sh-seg__text.is-m  { font-size: 21px; }
    .sh-seg__text.is-l  { font-size: 19px; }
    .sh-seg__text.is-xl { font-size: 18px; }
    .sh-seg__vi { font-size: 15px; }
    .sh-rec { margin-top: 20px; }
    /* Hai nút một hàng [Đọc theo | Nghe mẫu]; chấm xong "Đoạn tiếp" trải hết hàng trên, [Nghe mẫu | Đọc lại] hàng dưới */
    .sv-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .sv-acts > #svNext { order: -1; grid-column: 1 / -1; }
    .sv-acts > .sh-rec__btn:only-child { grid-column: 1 / -1; }
    .sv-btn, .sh-rec__btn { min-width: 0; padding: 0 14px; }
    .dp-sc__ring { width: 92px; height: 92px; }
    .dp-sc__n b { font-size: 28px; }
    .sv-detail__acts .dp-btn { flex: 1 1 auto; }
    .sh-card__head { flex-wrap: wrap; padding: 14px 16px; }
    .sh-script__now { flex-basis: 100%; order: 4; }
    .sh-script__chev { margin-left: auto; }
    .sh-seg-search { order: 5; width: 100%; margin-left: 0; }
    .sh-list { max-height: 60vh; padding: 12px; }
    .sh-list__item { grid-template-columns: 24px 8px minmax(0, 1fr) auto; gap: 9px; padding: 11px 12px; }
    .sh-buoi__head h3 { font-size: 22px; }
    .sh-buoi__stats { gap: 8px; }
    .sh-buoi__stats > div { padding: 12px; }
    .sh-buoi__stats b { font-size: 24px; }
    .sh-buoi__acts { flex-direction: column-reverse; }
    .sh-buoi__acts .dp-btn { width: 100%; }
    .vd-listen .sh-rec__btn { flex: 1 1 100%; }
    .vd-actbar .dp-btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }
    .vd-actbar #vdPeek { flex-basis: 100%; order: 2; margin-right: 0; }
    .sv-card .dc-line { font-size: 19px; }
    .sv-empty h2 { font-size: 21px; }
}
/* Safari phóng to khi chạm ô chữ < 16px và không tự thu lại (cả iPhone xoay ngang) */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .sv :is(input[type="search"], textarea) { font-size: max(16px, 1em); }
}
@media (max-width: 540px) {
    .sh-modal__overlay { align-items: flex-end; padding: 0; }
    .sh-modal { max-width: 100%; max-height: 94vh; border-radius: 20px 20px 0 0; }
    .sh-modal__head { position: sticky; top: 0; z-index: 2; background: var(--lv-surface); }
    .sh-modal__foot { position: sticky; bottom: 0; z-index: 2; flex-direction: column-reverse; background: var(--lv-surface); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    .sh-modal__btn { width: 100%; min-height: 48px; }
    .sh-sum__hero { gap: 12px; padding: 16px; }
    .sh-sum__big { font-size: 48px; }
    .sh-sum__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px; }
    .sh-start .lv-dlg__head, .sh-more .lv-dlg__head { border-radius: 22px 22px 0 0; }
}