/* Luyện viết HSK 5 (luyen-viet.js) — dùng chung cho app và trang bài */
:root {
  --lv-card: #fff; --lv-ink: #1f1a17; --lv-mid: #5f5952; --lv-soft: #7d776e; --lv-line: #e6e2da;
  --lv-tint: #faf6ef; --lv-accent: #c8372d; --lv-accent-d: #a82d24; --lv-accent-l: #fdefec; --lv-on-accent: #fff;
  --lv-ok: #1f7a45; --lv-ok-l: #e8f5ec; --lv-bad: #b3261e; --lv-bad-l: #fdecea;
  --lv-warn: #8a5a00; --lv-warn-l: #fff4d6; --lv-mark: #ffe58a; --lv-py: #8a5a0f;
  --lv-hanzi: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
@media (prefers-color-scheme: dark) {
  html.ho-tro-toi:not([data-theme="light"]) {
    --lv-card: #292522; --lv-ink: #ece6dc; --lv-mid: #bdb4a8; --lv-soft: #968e84; --lv-line: #3d3631;
    --lv-tint: #221e1b; --lv-accent: #f0786b; --lv-accent-d: #f59a8f; --lv-accent-l: #3a2320; --lv-on-accent: #1c1917;
    --lv-ok: #74d19c; --lv-ok-l: #1f2e25; --lv-bad: #f0786b; --lv-bad-l: #3a2320;
    --lv-warn: #f2bf6b; --lv-warn-l: #372d1c; --lv-mark: #5c4a14; --lv-py: #e2b563;
  }
}
html.ho-tro-toi[data-theme="dark"] {
  --lv-card: #292522; --lv-ink: #ece6dc; --lv-mid: #bdb4a8; --lv-soft: #968e84; --lv-line: #3d3631;
  --lv-tint: #221e1b; --lv-accent: #f0786b; --lv-accent-d: #f59a8f; --lv-accent-l: #3a2320; --lv-on-accent: #1c1917;
  --lv-ok: #74d19c; --lv-ok-l: #1f2e25; --lv-bad: #f0786b; --lv-bad-l: #3a2320;
  --lv-warn: #f2bf6b; --lv-warn-l: #372d1c; --lv-mark: #5c4a14; --lv-py: #e2b563;
}

.lv { color: var(--lv-ink); display: flex; flex-direction: column; gap: 14px; font-size: 0.98rem; line-height: 1.6; }
.lv [hidden] { display: none !important; }
.lv-zh { font-family: var(--lv-hanzi); }
.lv-pane { display: flex; flex-direction: column; gap: 14px; }

.lv-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.lv-tab {
  font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--lv-mid); background: var(--lv-card);
  border: 1.5px solid var(--lv-line); border-radius: 999px; padding: 8px 16px; cursor: pointer; min-height: 40px;
}
.lv-tab small { font-weight: 500; color: var(--lv-soft); margin-left: 4px; }
.lv-tab:hover { border-color: var(--lv-accent); }
.lv-tab.active { background: var(--lv-accent); border-color: var(--lv-accent); color: var(--lv-on-accent); }
.lv-tab.active small { color: inherit; opacity: 0.8; }
.lv-tab:focus-visible, .lv-btn:focus-visible, .lv-chip:focus-visible { outline: 3px solid var(--lv-accent); outline-offset: 2px; }

.lv-card { background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(40, 30, 20, 0.05); }
.lv-card h3 { margin: 0 0 10px; font-size: 1.02rem; }
.lv-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lv-soft); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-intro, .lv-note { color: var(--lv-mid); margin: 0; }
.lv-note { font-size: 0.86rem; }
.lv-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

.lv-btn {
  font: inherit; font-weight: 700; border: 0; border-radius: 12px; padding: 11px 20px; min-height: 44px; cursor: pointer;
  background: var(--lv-accent); color: var(--lv-on-accent);
}
.lv-btn:hover { background: var(--lv-accent-d); }
.lv-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.lv-btn.ghost { background: transparent; color: var(--lv-accent); border: 1.5px solid var(--lv-accent); }
.lv-btn.ghost:hover { background: var(--lv-accent-l); }
.lv-btn.sm { padding: 7px 14px; min-height: 38px; font-size: 0.9rem; }
.lv-next { display: flex; justify-content: center; }

/* Hoàn thành câu */
.lv-sx-sum { font-size: 0.9rem; color: var(--lv-mid); }
.lv-sx { display: flex; flex-direction: column; gap: 12px; }
.lv-sx.is-dung { border-color: var(--lv-ok); }
.lv-sx.is-sai { border-color: var(--lv-bad); }
.lv-sx-head { display: flex; gap: 10px; align-items: flex-start; }
.lv-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--lv-tint); color: var(--lv-mid); display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; margin-top: 6px; }
.lv-sx-line { flex: 1; min-height: 44px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; border-bottom: 2px dashed var(--lv-line); }
.lv-sx-ph { color: var(--lv-soft); font-size: 0.88rem; }
.lv-sx-dot { font-family: var(--lv-hanzi); color: var(--lv-soft); }
.lv-sx-bank { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 38px; }
.lv-chip {
  font-family: var(--lv-hanzi); font-size: 1.12rem; color: var(--lv-ink); background: var(--lv-tint);
  border: 1.5px solid var(--lv-line); border-radius: 10px; padding: 6px 12px; min-height: 42px; cursor: pointer;
}
.lv-chip:hover:not(:disabled) { border-color: var(--lv-accent); }
.lv-chip:disabled { opacity: 0.3; cursor: default; }
.lv-chip.is-on { background: var(--lv-accent-l); border-color: var(--lv-accent); }
.lv-chip.is-on:disabled { opacity: 1; }
.lv-sx-act { padding-left: 38px; }
.lv-sx-kq { padding-left: 38px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lv-sx-kq .ok { color: var(--lv-ok); }
.lv-sx-kq .bad { color: var(--lv-bad); }
.lv-sx-vn { color: var(--lv-mid); font-size: 0.92rem; }
.lv-sx-giai { font-size: 0.9rem; background: var(--lv-tint); border-radius: 10px; padding: 8px 12px; }

/* Đề + soạn bài */
.lv-de-zh { font-size: 1.06rem; margin-bottom: 4px; }
.lv-de-vn { color: var(--lv-mid); font-size: 0.92rem; margin-bottom: 12px; }
.lv-words { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-word {
  font-family: var(--lv-hanzi); font-size: 1.15rem; font-weight: 700; padding: 6px 14px; border-radius: 10px;
  background: var(--lv-tint); border: 1.5px dashed var(--lv-line); color: var(--lv-ink);
}
.lv-word.is-used { background: var(--lv-ok-l); border: 1.5px solid var(--lv-ok); color: var(--lv-ok); }
.lv-word.is-used::after { content: ' ✓'; font-size: 0.85rem; }
.lv-fold summary { cursor: pointer; font-weight: 700; list-style-position: inside; }
.lv-fold[open] summary { margin-bottom: 10px; }
.lv-tudung { display: grid; gap: 8px; margin-top: 10px; }
.lv-tudung > div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 10px; background: var(--lv-tint); border-radius: 10px; }
.lv-tudung i { font-style: normal; font-size: 0.8rem; color: var(--lv-soft); }
.lv-ct { display: grid; gap: 8px; }
.lv-ct-i { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--lv-tint); }
.lv-ct-i b { color: var(--lv-accent); }
.lv-ct-i small { color: var(--lv-mid); font-size: 0.85rem; }

.lv-editor textarea {
  width: 100%; box-sizing: border-box; font-family: var(--lv-hanzi); font-size: 1.12rem; line-height: 1.9;
  color: var(--lv-ink); background: var(--lv-tint); border: 1.5px solid var(--lv-line); border-radius: 12px; padding: 12px 14px; resize: vertical;
}
.lv-editor textarea:focus { outline: none; border-color: var(--lv-accent); }
.lv-meter { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; font-size: 0.88rem; color: var(--lv-mid); font-variant-numeric: tabular-nums; }
.lv-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--lv-tint); overflow: hidden; border: 1px solid var(--lv-line); }
.lv-bar i { display: block; height: 100%; width: 0; background: var(--lv-soft); border-radius: inherit; transition: width 0.2s; }
.lv-bar i.ok { background: var(--lv-ok); }
.lv-bar i.warn { background: var(--lv-warn); }
.lv-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lv-hint { font-size: 0.88rem; color: var(--lv-mid); }

/* Kết quả */
.lv-score { display: flex; flex-direction: column; gap: 10px; }
.lv-score-top { display: flex; gap: 16px; align-items: center; margin-bottom: 4px; }
.lv-ring {
  flex: none; width: 84px; height: 84px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 6px solid var(--lv-warn); background: var(--lv-warn-l); color: var(--lv-warn);
}
.lv-ring.pass { border-color: var(--lv-ok); background: var(--lv-ok-l); color: var(--lv-ok); }
.lv-ring b { font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.lv-ring small { font-size: 0.75rem; }
.lv-src { font-weight: 800; font-size: 1.02rem; }
.lv-meta { color: var(--lv-mid); font-size: 0.88rem; }
.lv-tc { display: grid; grid-template-columns: 96px 1fr 58px; gap: 10px; align-items: center; font-size: 0.9rem; }
.lv-tc b { text-align: right; font-variant-numeric: tabular-nums; }
.lv-tc small { color: var(--lv-soft); font-weight: 500; }
.lv-tc .lv-bar i { background: var(--lv-accent); }

.lv-wait { display: flex; gap: 12px; align-items: center; color: var(--lv-mid); }
.lv-spin { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--lv-line); border-top-color: var(--lv-accent); animation: lv-quay 0.9s linear infinite; }
@keyframes lv-quay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lv-spin { animation-duration: 3s; } }
.lv-warn { background: var(--lv-warn-l); border-color: var(--lv-warn); color: var(--lv-ink); }
.lv-ok { background: var(--lv-ok-l); border-color: var(--lv-ok); }
.lv-nx p { margin: 0; }

.lv-bai { font-size: 1.12rem; line-height: 2; word-break: break-all; }
.lv-mk { background: var(--lv-mark); color: inherit; border-radius: 4px; padding: 1px 2px; }
.lv-mk.is-nhe { background: transparent; border-bottom: 2px dotted var(--lv-warn); border-radius: 0; }
.lv-mk sup { font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.62rem; font-weight: 700; color: var(--lv-warn); margin-left: 1px; }
.lv-loi { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.lv-loi li::marker { font-weight: 700; color: var(--lv-soft); }
.lv-loi-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.lv-tag { font-size: 0.74rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--lv-accent-l); color: var(--lv-accent); }
.lv-tag.nhe { background: var(--lv-warn-l); color: var(--lv-warn); }
.lv-by { font-size: 0.74rem; color: var(--lv-soft); }
.lv-loi-fix { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 1.05rem; }
.lv-loi-fix s { color: var(--lv-bad); text-decoration-thickness: 2px; }
.lv-loi-fix b { color: var(--lv-ok); }
.lv-loi-why { font-size: 0.9rem; color: var(--lv-mid); }
.lv-diff del { color: var(--lv-bad); text-decoration: line-through; text-decoration-thickness: 2px; background: var(--lv-bad-l); }
.lv-diff ins { color: var(--lv-ok); text-decoration: none; background: var(--lv-ok-l); font-weight: 700; border-radius: 3px; }
.lv-legend { text-transform: none; letter-spacing: 0; font-weight: 600; display: inline-flex; gap: 8px; }
.lv-legend del { color: var(--lv-bad); }
.lv-legend ins { color: var(--lv-ok); text-decoration: none; }
.lv-sub { margin-top: 10px; }
.lv-sub summary { cursor: pointer; color: var(--lv-mid); font-size: 0.9rem; }
.lv-py { color: var(--lv-py); font-size: 0.9rem; margin-top: 6px; }
.lv-vn { color: var(--lv-mid); font-size: 0.92rem; margin-top: 6px; }

/* Hướng dẫn */
.lv-tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.lv-tbl th, .lv-tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--lv-line); vertical-align: top; }
.lv-tbl th { font-size: 0.78rem; color: var(--lv-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.lv-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.lv-khung { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lv-khung > div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: var(--lv-tint); font-size: 0.9rem; }
.lv-khung span { color: var(--lv-mid); }
.lv-khung .lv-zh { color: var(--lv-accent); }

@media (max-width: 600px) {
  .lv-card { padding: 14px; border-radius: 14px; }
  .lv-khung { grid-template-columns: 1fr; }
  .lv-sx-bank, .lv-sx-act, .lv-sx-kq { padding-left: 0; }
  .lv-tc { grid-template-columns: 78px 1fr 52px; font-size: 0.85rem; }
  .lv-tab { padding: 7px 12px; font-size: 0.86rem; }
}

/* Kể lại bài đọc (ke-lai.js) */
.lv-intro-card { background: var(--lv-tint); color: var(--lv-mid); }
.kl-grid { display: grid; gap: 10px; }
.kl-step { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; transition: border-color 0.2s; }
.kl-step .lv-num { margin-top: 0; }
.kl-step.is-du { border-color: var(--lv-ok); }
.kl-step.is-du .lv-num { background: var(--lv-ok-l); color: var(--lv-ok); }
.kl-body { flex: 1; min-width: 0; }
.kl-name { font-weight: 700; margin-bottom: 2px; }
.kl-cue { color: var(--lv-accent); font-size: 1.05rem; margin-bottom: 8px; }
.kl-words { display: flex; flex-wrap: wrap; gap: 6px; }
.kl-w {
  font-size: 1rem; color: var(--lv-mid); background: var(--lv-tint); border: 1.5px solid transparent;
  border-radius: 999px; padding: 4px 12px; min-height: 36px; cursor: pointer;
}
.kl-w:hover { border-color: var(--lv-line); }
.kl-w.is-heard { background: var(--lv-ok-l); border-color: var(--lv-ok); color: var(--lv-ok); font-weight: 700; }
.kl-rec { display: flex; flex-direction: column; gap: 12px; }
.kl-rec-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.kl-mic {
  display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 800; font-size: 1.02rem;
  border: 0; border-radius: 999px; padding: 12px 22px; min-height: 48px; cursor: pointer;
  background: var(--lv-accent); color: var(--lv-on-accent);
}
.kl-mic:hover { background: var(--lv-accent-d); }
.kl-mic:focus-visible { outline: 3px solid var(--lv-accent); outline-offset: 3px; }
.kl-mic-dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.kl-mic.is-rec .kl-mic-dot { border-radius: 2px; animation: kl-nhap 1s ease-in-out infinite; }
@keyframes kl-nhap { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .kl-mic.is-rec .kl-mic-dot { animation: none; } }
.kl-timer { flex: 1; min-width: 180px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
.kl-timer b { font-size: 1.4rem; }
.kl-timer span { color: var(--lv-soft); font-size: 0.85rem; }
.kl-timer .lv-bar { grid-column: 1 / -1; }
.kl-timer .lv-bar i { background: var(--lv-ok); }
.kl-live { background: var(--lv-tint); border-radius: 12px; padding: 10px 14px; font-size: 1.05rem; line-height: 1.8; min-height: 48px; }
.kl-kq { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.kl-kq .is-du b { color: var(--lv-ok); }
.kl-kq .is-thieu b { color: var(--lv-bad); }
.kl-ok { color: var(--lv-ok); }
.kl-miss { color: var(--lv-mid); font-size: 0.9rem; }
.kl-check { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.kl-check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--lv-accent); flex: none; }

/* Phân biệt từ gần nghĩa (phan-biet.js) */
.pb-card { display: flex; flex-direction: column; gap: 12px; }
.pb-head { display: flex; gap: 10px; align-items: center; }
.pb-head .lv-num { margin-top: 0; background: var(--lv-accent); color: var(--lv-on-accent); }
.pb-head h3 { margin: 0; font-size: 1.35rem; color: var(--lv-accent); }
.pb-same { background: var(--lv-tint); border-radius: 12px; padding: 12px 14px; }
.pb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pb-col { border: 1px solid var(--lv-line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.pb-word { font-size: 1.5rem; font-weight: 700; color: var(--lv-accent); display: flex; align-items: center; gap: 6px; }
.pb-points { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.pb-ex { border-top: 1px dashed var(--lv-line); padding-top: 8px; margin-top: 4px; font-size: 1.02rem; }
.pb-same .pb-ex { border-top: 0; background: var(--lv-card); border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.pb-vn { color: var(--lv-mid); font-size: 0.9rem; }
.pb-loa { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--lv-soft); cursor: pointer; vertical-align: middle; }
.pb-loa:hover { color: var(--lv-accent); background: var(--lv-accent-l); }
.pb-loa svg { width: 17px; height: 17px; }
.pb-q { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--lv-line); }
.pb-q-cau { font-size: 1.08rem; }
.pb-q-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-opt:disabled { opacity: 0.55; }
.pb-opt.is-right { background: var(--lv-ok-l); border-color: var(--lv-ok); color: var(--lv-ok); font-weight: 700; opacity: 1; }
.pb-opt.is-wrong { background: var(--lv-bad-l); border-color: var(--lv-bad); color: var(--lv-bad); opacity: 1; }
.pb-why { font-size: 0.92rem; border-radius: 10px; padding: 8px 12px; }
.pb-why.ok { background: var(--lv-ok-l); }
.pb-why.bad { background: var(--lv-bad-l); }
.pb-why.ok b { color: var(--lv-ok); }
.pb-why.bad b { color: var(--lv-bad); }
#pbSum { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 600px) { .pb-cols { grid-template-columns: 1fr; } }

/* Nghe và điền từ trên bài khoá (nghe-dien.js) */
.nd { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.nd-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.nd-head .lv-label { margin: 0; }
.nd-diem { font-size: 1.1rem; color: var(--lv-accent); font-variant-numeric: tabular-nums; }
.nd-kho { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 12px; background: var(--lv-tint); position: sticky; top: 64px; z-index: 2; border: 1px solid var(--lv-line); }
.nd-bai { display: flex; flex-direction: column; gap: 10px; }
.nd-doan { margin: 0; font-size: 1.12rem; line-height: 2.3; }
.nd-o {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 2px; min-width: 3.4em; min-height: 34px;
  margin: 0 3px; padding: 0 8px; font: inherit; font-family: var(--lv-hanzi); color: var(--lv-ink);
  background: var(--lv-card); border: 0; border-bottom: 2px solid var(--lv-soft); border-radius: 6px 6px 0 0; cursor: pointer; vertical-align: baseline;
}
.nd-o sup { font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.62rem; font-weight: 700; color: var(--lv-soft); margin-right: 2px; }
.nd-o.is-active { background: var(--lv-accent-l); border-bottom-color: var(--lv-accent); box-shadow: 0 0 0 2px var(--lv-accent) inset; }
.nd-o.is-full { font-weight: 700; color: var(--lv-accent); }
.nd-o.is-ok { background: var(--lv-ok-l); border-bottom-color: var(--lv-ok); color: var(--lv-ok); }
.nd-o.is-bad { background: var(--lv-bad-l); border-bottom-color: var(--lv-bad); color: var(--lv-bad); text-decoration: line-through; }
.nd-o:disabled { cursor: default; }
.nd-o:focus-visible { outline: 3px solid var(--lv-accent); outline-offset: 2px; }
.nd-sua { font-family: var(--lv-hanzi); color: var(--lv-ok); font-weight: 700; margin-right: 4px; }

/* Bài khoá HSK 5: đoạn văn liền, không phải hội thoại */
.dp-lines.dp-passage .dp-avatar { display: none; }
.dp-lines.dp-passage .dp-line, .dp-lines.dp-passage .dp-line.is-b { justify-content: flex-start; }
.dp-lines.dp-passage .dp-bubble { max-width: 100%; width: 100%; }
.dp-fulltext { margin-top: 12px; }
.dp-fulltext > summary { cursor: pointer; font-weight: 700; padding: 10px 0; color: var(--lv-ink); }
.dp-fulltext > summary small { font-weight: 500; color: var(--lv-soft); }
@media (max-width: 600px) {
  .nd-kho { flex-wrap: nowrap; overflow-x: auto; top: 56px; padding: 8px; gap: 6px; -webkit-overflow-scrolling: touch; }
  .nd-kho .lv-chip { flex: none; font-size: 1rem; min-height: 38px; padding: 4px 10px; }
  .nd-doan { font-size: 1.05rem; line-height: 2.2; }
}

/* Phân biệt từ — bảng theo SGK + 做一做 tích ô */
.pb-sgk-tag { align-self: flex-start; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--lv-accent); background: var(--lv-accent-l); border-radius: 99px; padding: 3px 10px; }
.pb-bang-wrap { overflow-x: auto; }
.pb-bang, .pb-lam { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; }
.pb-bang th, .pb-bang td, .pb-lam th, .pb-lam td { border-bottom: 1px solid var(--lv-line); padding: 10px 12px; vertical-align: top; text-align: left; }
.pb-bang thead th, .pb-lam thead th { font-size: 1.15rem; color: var(--lv-accent); background: var(--lv-tint); text-align: center; }
.pb-bang thead th:first-child, .pb-lam thead th:first-child { background: transparent; }
.pb-bang tbody th { width: 2.2em; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0.2em; text-align: center; vertical-align: middle; color: var(--lv-ink); background: var(--lv-tint); font-weight: 700; }
.pb-bang td { width: 46%; }
.pb-bang td + td { border-left: 1px dashed var(--lv-line); }
.pb-chung td { background: var(--lv-card); }
.pb-b-t { font-weight: 700; font-size: 1.02rem; }
.pb-b-vd { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--lv-line); }
.pb-b-vd .lv-zh { color: var(--lv-accent-d); }
.pb-lam td:first-child { font-size: 1.05rem; line-height: 1.8; }
.pb-tich-o { width: 64px; text-align: center !important; vertical-align: middle !important; }
.pb-kt-o { width: 96px; vertical-align: middle !important; }
.pb-tich {
  width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--lv-line); background: var(--lv-card);
  font-size: 1.2rem; font-weight: 800; color: var(--lv-accent); cursor: pointer;
}
.pb-tich:hover:not(:disabled) { border-color: var(--lv-accent); }
.pb-tich.is-on { border-color: var(--lv-accent); background: var(--lv-accent-l); }
.pb-tich:disabled { cursor: default; }
.pb-tich.is-dap { border-color: var(--lv-ok); background: var(--lv-ok-l); color: var(--lv-ok); }
.pb-tich.is-thua { border-color: var(--lv-bad); background: var(--lv-bad-l); color: var(--lv-bad); }
.pb-tich:focus-visible { outline: 3px solid var(--lv-accent); outline-offset: 2px; }
.pb-lt.is-mau td { background: var(--lv-tint); }
.pb-lt.is-mau .pb-tich.is-dap { opacity: 0.8; }
.pb-mau { font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.72rem; font-weight: 700; color: var(--lv-soft); border: 1px solid var(--lv-line); border-radius: 99px; padding: 1px 8px; }
.pb-lt .pb-why { margin-top: 6px; font-family: 'Be Vietnam Pro', sans-serif; }
@media (max-width: 600px) {
  .pb-bang th, .pb-bang td, .pb-lam th, .pb-lam td { padding: 8px; font-size: 0.9rem; }
  .pb-tich-o { width: 48px; }
  .pb-kt-o { width: auto; }
  .pb-lam .pb-kt-o .lv-btn { padding: 6px 10px; }
}

/* Bài tập SGK 练习 (bai-tap-sgk.js) */
.sk-part { display: flex; flex-direction: column; gap: 12px; }
.sk-head { display: flex; gap: 10px; align-items: flex-start; }
.sk-head .lv-num { margin-top: 2px; background: var(--lv-accent); color: var(--lv-on-accent); }
.sk-head h3 { margin: 0; font-size: 1.1rem; }
.sk-kho { position: static; }
.sk-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; }
.sk-list > li { font-size: 1.08rem; line-height: 2.2; }
.sk-list > li::marker { font-weight: 700; color: var(--lv-soft); }
.sk-cau { line-height: 2.2; }
.sk-ab { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.sk-vt {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin: 0 2px; padding: 0 6px;
  font: inherit; font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.85rem; font-weight: 800;
  color: var(--lv-accent); background: var(--lv-accent-l); border: 1.5px solid var(--lv-accent); border-radius: 8px; cursor: pointer; vertical-align: middle;
}
.sk-vt:hover:not(:disabled) { background: var(--lv-accent); color: var(--lv-on-accent); }
.sk-vt:disabled { cursor: default; opacity: 0.5; }
.sk-vt.is-right { opacity: 1; background: var(--lv-ok-l); border-color: var(--lv-ok); color: var(--lv-ok); }
.sk-vt.is-wrong { opacity: 1; background: var(--lv-bad-l); border-color: var(--lv-bad); color: var(--lv-bad); }
.sk-ngoac { color: var(--lv-mid); white-space: nowrap; }
.sk-list .pb-why { font-size: 0.9rem; line-height: 1.6; margin-top: 6px; }

/* HSK 6 — các dạng 练习 mới: mr (写出更多的词语) · gx (改写句子) · mp (模仿造句) · bc (病句) */
.sk-doan > li { line-height: 2.4; }
.sk-dot { font-style: normal; position: relative; color: var(--lv-accent); font-weight: 700; }
.sk-dot::after { content: ''; position: absolute; left: 50%; bottom: -0.3em; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: currentColor; }
.sk-vd { font-size: 1.02rem; color: var(--lv-mid); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 8px 12px; background: var(--lv-tint); border-radius: 10px; }
.sk-vd-w { color: var(--lv-ink); }
.sk-mr > li, .sk-viet > li { line-height: 1.8; display: flex; flex-direction: column; gap: 8px; }
.sk-mr-tu { font-size: 1.1rem; font-weight: 700; }
.sk-mr-nhap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sk-input, .sk-ta {
  font: inherit; font-size: 1.02rem; color: var(--lv-ink); background: var(--lv-card);
  border: 1.5px solid var(--lv-line); border-radius: 10px; padding: 8px 12px; min-height: 42px;
}
.sk-input { flex: 1 1 220px; min-width: 0; }
.sk-ta { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.7; }
.sk-input:focus, .sk-ta:focus { outline: none; border-color: var(--lv-accent); box-shadow: 0 0 0 3px var(--lv-accent-l); }
.sk-nhac { font-size: 0.86rem; color: var(--lv-bad); line-height: 1.5; }
.sk-mr-kq { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-w { padding: 2px 10px; border-radius: 99px; font-size: 1rem; border: 1.5px solid transparent; }
.sk-w.is-ok { background: var(--lv-ok-l); color: var(--lv-ok); border-color: var(--lv-ok); }
.sk-w.is-bad { background: var(--lv-bad-l); color: var(--lv-bad); border-color: var(--lv-bad); text-decoration: line-through; }
.sk-w.is-hoi { background: var(--lv-warn-l); color: var(--lv-warn); border-color: var(--lv-warn); }
.sk-bai { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--lv-tint); }
.sk-nhan { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lv-soft); }
.sk-mau { font-size: 1rem; color: var(--lv-mid); padding: 10px 12px; border-left: 3px solid var(--lv-line); background: var(--lv-tint); border-radius: 0 10px 10px 0; line-height: 1.9; }
.sk-u { text-decoration: underline 2px var(--lv-accent); text-underline-offset: 4px; color: var(--lv-ink); font-weight: 600; }
.sk-khung { font-size: 1.05rem; line-height: 2.6; }
.sk-o-mp { display: inline-block; flex: none; width: min(15em, 100%); min-height: 36px; padding: 4px 10px; margin: 0 4px; vertical-align: middle; }
.sk-dien { color: var(--lv-accent); font-weight: 700; }
.sk-sai { background: var(--lv-mark); color: inherit; border-radius: 3px; padding: 0 2px; }
.sk-tdg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.9rem; color: var(--lv-mid); }
.sk-tdg-kq { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 0.9rem; font-weight: 600; }
.sk-tdg-kq.ok { color: var(--lv-ok); }
.sk-tdg-kq.bad { color: var(--lv-bad); }

/* HSK 6 · đề 运用 写一写: bảng dàn ý theo bài tập 5 của sách */
.lv-label-sub { margin: 12px 0 6px; }
.lv-dan { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lv-dan-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; padding: 10px 12px; border: 1px solid var(--lv-line); border-radius: 12px; background: var(--lv-card); }
.lv-dan-h { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; line-height: 1.6; }
.lv-dan-h .lv-num { flex: none; }
.lv-dan-g { color: var(--lv-mid); line-height: 1.7; white-space: pre-line; }
@media (max-width: 620px) { .lv-dan-r { grid-template-columns: minmax(0, 1fr); } }

/* 做一做 nhieu cot (HSK 6): tieu de cot la cum chu, khong de xuong dong tung chu */
.pb-lam.is-nhieu-cot thead th { min-width: 5.5em; font-size: 0.85rem; line-height: 1.35; vertical-align: bottom; }

/* sx — sắp xếp câu thành đoạn (HSK 6 练习) */
.sk-sx-dong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 8px 10px; border: 1.5px dashed var(--lv-line); border-radius: 12px; background: var(--lv-tint); }
.sk-sx-o { min-width: 38px; height: 34px; border-radius: 8px; border: 1.5px solid var(--lv-accent); background: var(--lv-card); color: var(--lv-accent); font: inherit; font-weight: 800; cursor: pointer; }
.sk-sx-o.is-ok { border-color: var(--lv-ok); color: var(--lv-ok); background: var(--lv-ok-l); }
.sk-sx-o.is-bad { border-color: var(--lv-bad); color: var(--lv-bad); background: var(--lv-bad-l); }
.sk-sx-o:disabled { cursor: default; }
.sk-sx-mui { color: var(--lv-soft); }
.sk-sx-bank { display: flex; flex-direction: column; gap: 6px; }
.sk-sx-m { text-align: left; font: inherit; font-size: 1rem; line-height: 1.6; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--lv-line); background: var(--lv-card); color: var(--lv-ink); cursor: pointer; }
.sk-sx-m b { color: var(--lv-accent); margin-right: 4px; font-family: 'Be Vietnam Pro', sans-serif; }
.sk-sx-m:hover:not(:disabled) { border-color: var(--lv-accent); }
.sk-sx-m.is-used { opacity: 0.35; }
.sk-sx-doan { margin: 6px 0; font-size: 1rem; line-height: 1.8; }

/* Bai khoa trong app: thanh audio da ghim o tren, khung tu nghe-dien ghim ngay ben duoi (--nd-top do app.js tinh) */
#dpContent .nd-kho { top: var(--nd-top, 64px); }