/* dictation-widget.css — TỰ SINH từ build_dict_css.php. Overlay 'Chép chính tả' trong bài học.
   (1) copy nguyên style dict token-based của learn/shadowing/hoi-thoai.php (y hệt look)
   (2) chrome .cd-ov overlay + nút .cv-d__dictbtn. Nền .rp2-* lấy từ roadmap-practice.css. */

/* ── (1) inline dict style (từ hoi-thoai.php) ── */
/* ── Bổ sung riêng cho tiếng Trung (chữ Hán serif + điền chỗ trống) ── */
.rp2-zh { font-family:var(--font-cjk); }
.rp2-sentence.rp2-zh { font-family:var(--font-hanzi); font-size:clamp(30px,6vw,44px); font-weight:700; color:var(--color-ink); }
.rp2-shpy { text-align:center; font-style:italic; color:var(--color-accent); font-size:16px; margin:-6px 0 var(--space-4); }
.rp2-input--zh { font-family:var(--font-hanzi); font-size:22px; }
.rp2-input--zh::placeholder { font-family:var(--font-sans); font-size:15px; font-weight:400; }
.zh-fhint { display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; font-size:13.5px; color:var(--color-muted); margin-bottom:16px; }
.zh-fhint i { color:var(--color-primary); }
.zh-fhint b { color:var(--color-ink); font-weight:700; }
.zh-fq { padding:24px 20px; background:var(--color-soft); border:1px solid var(--color-line); border-radius:var(--radius-lg); text-align:center; font-family:var(--font-hanzi); font-size:clamp(28px,5vw,36px); font-weight:700; color:var(--color-ink); line-height:1.6; }
.zh-fq .bk { display:inline-grid; place-items:center; width:52px; height:58px; margin:0 6px; border-radius:12px; border:2px dashed var(--color-primary); background:var(--color-primary-soft); color:var(--color-primary); font-size:26px; vertical-align:middle; }
.zh-fq .bk.is-ok { border-style:solid; border-color:var(--color-correct); background:var(--color-correct-soft); color:var(--color-correct-deep); }
.zh-fopts-lbl { text-align:center; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--color-muted); margin:20px 0 13px; }
.zh-fopts { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.zh-fopt { width:66px; height:66px; display:grid; place-items:center; font-family:var(--font-hanzi); font-size:30px; font-weight:700; border:1.5px solid var(--color-border); border-radius:16px; background:var(--color-surface); color:var(--color-ink); cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease); }
.zh-fopt:hover:not(:disabled) { border-color:var(--color-primary); background:var(--color-primary-soft); transform:translateY(-2px); }
.zh-fopt:disabled { cursor:default; }
.zh-fopt:disabled:not(.is-correct):not(.is-wrong) { opacity:.4; box-shadow:none; }
.zh-fopt.is-correct { background:var(--color-correct-soft); border-color:var(--color-correct); color:var(--color-correct-deep); box-shadow:none; }
.zh-fopt.is-wrong { background:var(--color-incorrect-soft); border-color:var(--color-incorrect); box-shadow:none; }
.zh-fdiff { display:flex; justify-content:center; margin-bottom:16px; }
.zh-fdiff__g { display:inline-flex; gap:3px; padding:3px; border-radius:var(--radius-pill); background:var(--color-soft); border:1px solid var(--color-line); }
.zh-fdiff__b { border:none; background:none; font:inherit; font-size:13px; font-weight:700; color:var(--color-muted); padding:6px 18px; border-radius:var(--radius-pill); cursor:pointer; transition:all .15s var(--ease); }
.zh-fdiff__b:hover:not(.is-on) { color:var(--color-ink); }
.zh-fdiff__b.is-on { background:var(--color-primary); color:var(--color-on-dark); }
.zh-fq--asm { line-height:2; }
.zh-cx { vertical-align:middle; }
.zh-slot { display:inline-grid; place-items:center; width:50px; height:56px; margin:3px 4px; border-radius:12px; border:2px dashed var(--color-primary); background:var(--color-primary-soft); color:var(--color-ink); font-size:24px; vertical-align:middle; cursor:pointer; transition:box-shadow .12s var(--ease),border-color .12s var(--ease),background .12s var(--ease); }
.zh-slot.filled { border-style:solid; }
.zh-slot.active { box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 16%,transparent); }
.zh-slot.ok { border-style:solid; border-color:var(--color-correct); background:var(--color-correct-soft); color:var(--color-correct-deep); box-shadow:none; }
.zh-slot.bad { border-style:solid; border-color:var(--color-incorrect); background:var(--color-incorrect-soft); color:var(--color-incorrect); box-shadow:none; }
.zh-pool { display:flex; flex-wrap:wrap; gap:11px; justify-content:center; }
.zh-ptile { width:60px; height:60px; display:grid; place-items:center; font-family:var(--font-hanzi); font-size:28px; font-weight:700; border:1.5px solid var(--color-border); border-radius:14px; background:var(--color-surface); color:var(--color-ink); cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease); }
.zh-ptile:hover:not(:disabled) { border-color:var(--color-primary); background:var(--color-primary-soft); transform:translateY(-2px); }
.zh-ptile.used { visibility:hidden; }
.zh-ptile:disabled { cursor:default; }
.zh-factions { display:flex; gap:12px; justify-content:center; margin-top:18px; }
.zh-factions:empty { display:none; }

/* ── Chấm phát âm: điểm thành phần + ô âm tiết + so A/B ── */
.zh-sub{display:flex;gap:10px;margin:0 0 16px;flex-wrap:wrap}
.zh-sub__i{flex:1;min-width:92px;background:var(--color-soft);border-radius:12px;padding:10px 12px;text-align:center}
.zh-sub__i span{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-muted);margin-bottom:3px}
.zh-sub__i b{font-size:1.25rem;font-weight:800;color:var(--color-ink)}
.zh-ch{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px 9px;border-radius:11px;margin:0 6px 6px 0;min-width:62px;
  border:1px solid transparent;font:inherit;cursor:pointer;transition:transform .12s var(--ease),box-shadow .12s var(--ease),border-color .12s var(--ease)}
.zh-ch:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12);border-color:currentColor}
.zh-ch:active{transform:translateY(0)}
.zh-ch__spk{position:absolute;top:5px;right:6px;font-size:9px;opacity:.45}
.zh-ch:hover .zh-ch__spk{opacity:.9}
.zh-ch.is-playing{transform:translateY(-2px);border-color:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.zh-ch b{font-family:var(--font-cjk);font-size:1.24rem;font-weight:700;line-height:1.1}
.zh-ch span{font-size:10.5px;font-weight:600;opacity:.85;text-align:center;line-height:1.25}
.zh-ch.ok{background:var(--color-correct-soft);color:var(--color-correct-deep)}
.zh-ch.tone{background:var(--color-incorrect-soft);color:var(--color-incorrect)}
.zh-ch.miss{background:var(--color-incorrect-soft);color:var(--color-incorrect)}
.zh-ab{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}

/* ── Tổng kết cuối bài ── */
.zh-sum { margin-top:18px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg,16px); padding:22px; box-shadow:var(--shadow-sm); }
.zh-sum__top { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.zh-sum__ring { flex:0 0 auto; width:76px; height:76px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:19px; color:var(--color-on-dark); background:var(--color-correct); }
.zh-sum__ring.is-mid { background:var(--color-warning); }
.zh-sum__t h3 { margin:0 0 4px; font-size:1.12rem; font-weight:800; color:var(--color-ink); }
.zh-sum__t p { margin:0; font-size:13.5px; color:var(--color-muted); }
.zh-sum__stats { display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
.zh-sum__chip { background:var(--color-soft); border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:700; color:var(--color-ink); }
.zh-sum__chip b { color:var(--color-primary); }
.zh-sum__wrongs { margin-top:6px; border-top:1px dashed var(--color-border); padding-top:14px; }
.zh-sum__wrongs h4 { margin:0 0 10px; font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--color-muted); }
.zh-sum__w { display:flex; gap:10px; align-items:baseline; padding:8px 12px; border-radius:10px; background:var(--color-soft); margin-bottom:7px; }
.zh-sum__w .zh { font-family:var(--font-cjk); font-size:1.02rem; font-weight:700; color:var(--color-ink); }
.zh-sum__w .py { font-size:12.5px; color:var(--color-muted); }
.zh-sum__w .vi { font-size:12.5px; color:var(--color-mute2,var(--color-muted)); margin-left:auto; }
.zh-sum__cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }

.zh-din__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.zh-din__title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--color-ink); }
.zh-din__title i { color:var(--color-primary); }
.zh-din__count { font-size:12px; font-weight:700; color:var(--color-primary); background:var(--color-primary-soft); border-radius:var(--radius-pill); padding:4px 12px; white-space:nowrap; }
.rp2-input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 14%,transparent); }
.zh-hint { margin-top:13px; }
.zh-hint__btn { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:13px; font-weight:700; color:var(--color-accent); background:none; border:1px dashed var(--color-border); border-radius:var(--radius-pill); padding:7px 15px; cursor:pointer; transition:all .15s var(--ease); }
.zh-hint__btn:hover { border-color:var(--color-accent); background:var(--color-accent-soft); }
.zh-hint__reveal { margin-top:11px; padding:13px 16px; background:var(--color-soft); border:1px solid var(--color-line); border-radius:var(--radius-md); display:none; }
.zh-hint__reveal.show { display:block; }
.zh-hint__reveal small { display:block; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--color-muted); margin-bottom:5px; }
.zh-hint__reveal .zh-hz { font-family:var(--font-hanzi); font-size:22px; font-weight:700; color:var(--color-ink); }
.zh-hint__reveal .zh-py { font-style:italic; color:var(--color-accent); font-size:16px; font-weight:600; }
.rp2-diff.rp2-zh { font-family:var(--font-hanzi); text-align:center; }
/* ── Thẻ kết quả (chép chính tả + shadowing) ── */
.zh-res { border-radius:var(--radius-lg); padding:14px 16px; border:1px solid transparent; }
.zh-res--ok { background:var(--color-correct-soft); border-color:color-mix(in srgb,var(--color-correct) 26%,transparent); }
.zh-res--bad { background:var(--color-warning-soft); border-color:color-mix(in srgb,var(--color-warning) 26%,transparent); }
.zh-res__head { display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px; }
.zh-res--ok .zh-res__head { color:var(--color-correct-deep); }
.zh-res--bad .zh-res__head { color:var(--color-warning-deep); }
.zh-res__ic { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--color-on-dark); font-size:12px; flex:0 0 auto; }
.zh-res--ok .zh-res__ic { background:var(--color-correct); }
.zh-res--bad .zh-res__ic { background:var(--color-warning); }
.zh-res__sc { margin-left:auto; display:inline-flex; align-items:baseline; gap:2px; }
.zh-res__sc b { font-size:22px; font-weight:800; line-height:1; }
.zh-res__sc span { font-size:12px; color:var(--color-muted); font-weight:600; }
.zh-res__diff { margin-top:12px; padding:10px 12px; background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-md); text-align:center; }
.zh-res__diff-lbl { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--color-muted); margin-bottom:5px; }
.zh-res__ans { display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:12px; padding:14px 12px; background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-md); }
.zh-res__hz { font-family:var(--font-hanzi); font-size:clamp(26px,5vw,34px); font-weight:700; color:var(--color-ink); line-height:1.25; }
.zh-res__py { font-style:italic; color:var(--color-accent); font-size:15px; }
.zh-res__vi { color:var(--color-secondary-text,var(--color-muted)); font-size:14px; }
.zh-res__said { margin-top:10px; text-align:center; font-size:13px; color:var(--color-muted); }
.zh-res__said b { color:var(--color-ink); }

/* ── Bảng chấm phát âm (shadowing) ── */
.zh-sc { display:flex; gap:24px; align-items:center; flex-wrap:wrap; padding:4px 2px; }
.zh-sc__gaugewrap { display:flex; flex-direction:column; align-items:center; flex:0 0 auto; }
.zh-sc__gauge { position:relative; width:122px; height:122px; }
.zh-sc__gauge svg { width:122px; height:122px; transform:rotate(-90deg); }
.zh-sc__gauge .track { fill:none; stroke:var(--color-line); stroke-width:9; }
.zh-sc__gauge .arc { fill:none; stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset .9s var(--ease); }
.zh-sc.good .arc { stroke:var(--color-correct); }
.zh-sc.mid .arc { stroke:var(--color-warning); }
.zh-sc__num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; font-size:37px; color:var(--color-ink); line-height:1; }
.zh-sc__num span { font-size:10px; font-weight:800; color:var(--color-muted); margin-top:4px; letter-spacing:.08em; }
.zh-sc__verdict { margin-top:11px; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; }
.zh-sc.good .zh-sc__verdict { color:var(--color-correct-deep); }
.zh-sc.mid .zh-sc__verdict { color:var(--color-warning-deep); }
.zh-sc__body { flex:1 1 240px; min-width:0; }
.zh-sc__lbl { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--color-muted); margin-bottom:9px; }
.zh-sc__chars { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:13px; }
.zh-ch { min-width:46px; padding:8px 5px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; border-radius:12px; font-family:var(--font-hanzi); font-size:25px; font-weight:700; border:1.5px solid transparent; line-height:1; }
.zh-ch.ok { background:var(--color-correct-soft); border-color:color-mix(in srgb,var(--color-correct) 28%,transparent); color:var(--color-correct-deep); }
.zh-ch.miss { background:var(--color-incorrect-soft); border-color:color-mix(in srgb,var(--color-incorrect) 32%,transparent); color:var(--color-incorrect); }
.zh-ch.tone { background:var(--color-incorrect-soft); border-color:color-mix(in srgb,var(--color-incorrect) 32%,transparent); color:var(--color-incorrect); }
.zh-ch i { font-size:10px; }
.zh-sc__said { font-size:13.5px; color:var(--color-muted); }
.zh-sc__said b { color:var(--color-ink); font-family:var(--font-cjk); font-weight:700; }
.zh-sc__tip { margin-top:9px; display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color:var(--color-secondary-text,var(--color-muted)); }
.zh-sc__tip i { color:var(--color-accent); margin-top:2px; }

/* ── Hội thoại dạng chat ── */
.zh-chat { position:relative; display:flex; flex-direction:column; gap:14px; max-height:440px; overflow-y:auto; padding:8px 4px 4px; scrollbar-width:thin; scroll-behavior:smooth; }
.zh-msg { display:flex; gap:9px; align-items:center; max-width:92%; }
.zh-msg--b { flex-direction:row-reverse; margin-left:auto; }
.zh-msg__av { flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:15px; color:var(--color-on-dark); }
.zh-msg--a .zh-msg__av { background:var(--color-primary); }
.zh-msg--b .zh-msg__av { background:var(--color-accent); }
.zh-msg__bubble { padding:9px 14px; border-radius:16px; background:var(--color-soft); border:1px solid var(--color-line); transition:box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease); }
.zh-msg--a .zh-msg__bubble { border-bottom-left-radius:5px; }
.zh-msg--b .zh-msg__bubble { border-bottom-right-radius:5px; background:var(--color-primary-soft); border-color:color-mix(in srgb,var(--color-primary) 14%,transparent); }
.zh-msg.is-cur .zh-msg__bubble { border-color:var(--color-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 15%,transparent); }
.zh-msg__name { font-size:11px; font-weight:700; color:var(--color-muted); margin-bottom:1px; }
.zh-msg__zh { font-family:var(--font-cjk); font-size:19px; font-weight:700; color:var(--color-ink); line-height:1.35; }
.zh-msg__py { font-style:italic; color:var(--color-accent); font-size:12.5px; margin-top:1px; }
.zh-msg__vi { color:var(--color-muted); font-size:12.5px; margin-top:1px; }
.zh-msg__play { flex:0 0 auto; width:30px; height:30px; border:1px solid var(--color-border); border-radius:50%; background:var(--color-surface); color:var(--color-primary); cursor:pointer; opacity:0; transition:opacity var(--dur-fast) var(--ease); }
.zh-msg:hover .zh-msg__play, .zh-msg.is-cur .zh-msg__play { opacity:1; }
.rp2-done { display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; }

/* ── Banner gọn (bớt chất "lộ trình") ── */
.rp2-bar { background:var(--color-surface); padding:var(--space-4) var(--space-5); margin-bottom:var(--space-4); }
.rp2-bar__title strong { font-size:clamp(19px,2.3vw,24px); }
.rp2-bar__eyebrow { margin-bottom:5px; }
.zh-bmeta { display:flex; align-items:center; gap:12px; margin-top:9px; flex-wrap:wrap; }
.zh-bstat { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--color-text); }
.zh-bstat i { color:var(--color-primary); }
.zh-bbar { position:relative; width:130px; height:6px; border-radius:var(--radius-pill); background:var(--color-soft); overflow:hidden; }
.zh-bbar__fill { position:absolute; top:0; bottom:0; left:0; width:0; border-radius:inherit; background:var(--color-primary); transition:width var(--dur-base) var(--ease); }
.zh-mean { margin:14px 0 4px; padding:13px 15px; border-radius:12px; background:var(--color-soft); border-left:3px solid var(--color-primary); }
.zh-mean__zh { font-family:var(--font-cjk); font-size:1.2rem; font-weight:700; color:var(--color-ink); line-height:1.45; }
.zh-mean__py { font-size:13px; color:var(--color-muted); margin-top:2px; }
.zh-mean__vi { font-size:14px; color:var(--color-text,var(--color-ink)); margin-top:7px; font-weight:600; display:flex; align-items:baseline; gap:7px; }
.zh-mean__vi i { color:var(--color-primary); font-size:12px; }

/* ══════════════ MOBILE (≤640px) ══════════════
   Player mặc định là grid 6 cột → trên điện thoại nó vỡ thành 5 HÀNG (play / replay+rate /
   time / loop / track) cao 150px, ăn hết màn hình. Đặt lại thành 2 hàng gọn:
   nút play to bên trái (chiếm 2 hàng), seek bar full chiều ngang hàng 1, nhóm nút nhỏ hàng 2. */
@media (max-width: 640px) {
  .rp2-card { padding: 14px; }
  .rp2-card__top { margin-bottom: 14px; gap: 8px; }

  .rp2-player {
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-rows: auto auto;
    gap: 9px 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
  }
  #rp2Play   { grid-column: 1; grid-row: 1 / span 2; width: 50px; height: 50px; font-size: 17px; }
  #rp2Track  { grid-column: 2 / -1; grid-row: 1; order: 0; min-width: 0; height: 7px; }
  #rp2Time   { grid-column: 2; grid-row: 2; justify-self: start; font-size: 11.5px; }
  #rp2Replay { grid-column: 3; grid-row: 2; }
  #rp2Rate   { grid-column: 4; grid-row: 2; }
  #rp2Loop   { grid-column: 5; grid-row: 2; }
  #rp2Replay, #rp2Loop { width: 34px; height: 34px; font-size: 12px; }
  #rp2Rate { min-width: 46px; height: 34px; padding: 0 9px; font-size: 12px; }

  /* Câu cần đọc = tiêu điểm của chế độ Shadowing → căn giữa, phóng to */
  #rp2Shadow .rp2-sentence { text-align: center; font-size: 30px; line-height: 1.4; margin-bottom: 4px; }
  #rp2Shadow .rp2-shpy { text-align: center; font-size: 14px; margin-bottom: 4px; }
  #rp2Shadow .rp2-actionbar { margin-top: 14px; }
  #rp2Rec { width: 100%; height: 50px; font-size: 15.5px; }

  /* Bảng điểm: vòng tròn nhỏ lại, xếp dọc, số liệu vẫn đọc rõ */
  .zh-sc { gap: 14px; }
  .zh-sc__gaugewrap { width: 100%; }
  .zh-sc__gauge, .zh-sc__gauge svg { width: 104px; height: 104px; }
  .zh-sc__num { font-size: 31px; }
  .zh-sc__body { width: 100%; }
  .zh-sub { gap: 7px; }
  .zh-sub__i { min-width: 0; padding: 8px 4px; }
  .zh-sub__i span { font-size: 10px; letter-spacing: .02em; }
  .zh-sub__i b { font-size: 1.05rem; }

  /* Ô âm tiết: đủ lớn để bấm bằng ngón tay (≥44px) */
  .zh-sc__chars { display: flex; flex-wrap: wrap; gap: 6px; }
  /* min-width 46px: ô chỉ có pinyin ngắn sẽ co còn ~39px, dưới chuẩn vùng chạm 44px */
  .zh-ch { min-width: 46px; flex: 0 0 auto; margin: 0; padding: 7px 9px 8px; min-height: 46px; }
  .zh-ch b { font-size: 1.15rem; }
  .zh-ch span { font-size: 9.5px; }

  /* Nút so A/B xếp dọc, full chiều ngang cho dễ bấm */
  .zh-mean { padding:11px 12px; margin:12px 0 4px; }
  .zh-mean__zh { font-size:1.08rem; }
  .zh-mean__vi { font-size:13.5px; }
  .zh-ab { flex-direction: column; gap: 8px; }
  .zh-ab .rp2-btn { width: 100%; justify-content: center; }

  /* Tổng kết cuối bài */
  .zh-sum { padding: 16px; }
  .zh-sum__top { gap: 12px; }
  .zh-sum__ring { width: 62px; height: 62px; font-size: 16px; }
  .zh-sum__stats { margin-left: 0; width: 100%; }
  .zh-sum__w { flex-wrap: wrap; gap: 4px 8px; }
  .zh-sum__w .vi { margin-left: 0; flex: 1 0 100%; }
  .zh-sum__cta { flex-direction: column; }
  .zh-sum__cta .rp2-btn, .zh-sum__cta .btn { width: 100%; justify-content: center; }
}

/* ── (2) chrome overlay ── */

/* ══ Overlay "Chép chính tả" toàn màn hình (mở từ mỗi đoạn hội thoại) ══
   Bên trong là .rp2 (roadmap-practice.css) + .zh-* (khối trên) → y hệt trang shadowing. */
.cd-ov {
  position: fixed;
  inset: 0;
  z-index: 2147483000;               /* nằm trên navbar/footer */
  background: var(--color-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: cdOvIn .18s var(--ease, ease);
}
@keyframes cdOvIn { from { opacity: 0; } to { opacity: 1; } }
.cd-ov .rp2 { min-height: 100%; }
/* nút Đóng (X) dính trên cùng để luôn với tới khi đã cuộn */
.cd-ov .rp2-close {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Nút "Chép chính tả" ở đầu mỗi đoạn hội thoại (cạnh "Nghe hội thoại") */
.cv-d__dictbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border: 1.5px solid var(--color-primary);
  border-radius: 999px; background: var(--color-surface);
  color: var(--color-primary); font-family: inherit; font-weight: 700;
  font-size: .85rem; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.cv-d__dictbtn:hover { background: var(--color-primary); color: var(--color-on-dark); }