* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  background: #f7f7f9;
  color: #222;
}
.site-header { background: #1f3a5f; padding: 12px 16px; }
.site-header a { color: #fff; text-decoration: none; font-weight: 600; }
main { max-width: 800px; margin: 0 auto; padding: 24px 16px; }
h1 { margin-top: 0; }
.sub { color: #666; }
.menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.menu a, .pager a {
  display: block;
  padding: 14px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  color: #1f3a5f;
  font-weight: 500;
}
.menu a:hover, .pager a:hover { border-color: #1f3a5f; }
.vi-title { font-weight: 400; color: #666; font-size: .7em; }
.vocab h3 { margin: 28px 0 8px; color: #1f3a5f; }
.vocab h3 small { color: #999; font-weight: 400; font-size: .75em; }
.vocab table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.vocab th, .vocab td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; }
.vocab th { background: #eef2f7; font-size: .85em; color: #555; }
.vocab td.ko { font-size: 1.25em; white-space: nowrap; }
.vocab td.rom { color: #b5462f; font-style: italic; }
.vocab td.hv { color: #555; font-size: .9em; }
button.play {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #1f3a5f; background: #fff; color: #1f3a5f;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
button.play svg { width: 14px; height: 14px; fill: currentColor; }
button.play:hover, button.play.playing { background: #1f3a5f; color: #fff; }
.vocab .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vocab td.no { color: #999; font-size: .85em; text-align: right; width: 1%; }
.vocab th, .vocab td { border-right: 1px solid #f0f0f0; }
.vocab tbody tr:nth-child(even) { background: #fafbfc; }
@media (max-width: 600px) {
  .vocab th, .vocab td { padding: 6px; font-size: .9em; }
  .vocab td.ko { font-size: 1.1em; }
  .vocab table { min-width: 560px; }
}
.menu-ko { display: block; font-size: 1.15em; margin-top: 4px; color: #222; }
.menu-vi { display: block; font-size: .8em; color: #777; font-weight: 400; }

/* Đường dẫn */
.crumbs { font-size: .9em; color: #888; margin-bottom: 12px; }
.crumbs a { color: #1f3a5f; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Mục lục của bài */
.sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 20px; }
.section-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px; background: #fff; border: 1px solid #ddd; border-radius: 10px;
  text-decoration: none; color: #1f3a5f;
}
a.section-card:hover { border-color: #1f3a5f; box-shadow: 0 2px 8px rgba(31,58,95,.12); }
.section-card.disabled { color: #aaa; background: #f2f2f4; }
.sec-ko { font-size: 1.3em; font-weight: 600; }
.sec-vi { font-weight: 600; }
.sec-sum { font-size: .82em; color: #777; }
.section-card.disabled .sec-sum { color: #aaa; }

/* Ngữ pháp */
.toc { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 12px 14px; background: #fff; border: 1px solid #ddd; border-radius: 8px; }
.toc a { color: #1f3a5f; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.grammar { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 18px 18px 8px; margin-top: 24px; scroll-margin-top: 12px; }
.grammar h2 { margin: 0 0 12px; color: #b5462f; font-size: 1.45em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.grammar .gnum { background: #b5462f; color: #fff; border-radius: 50%; width: 1.5em; height: 1.5em; display: inline-flex; align-items: center; justify-content: center; font-size: .65em; align-self: center; }
.grammar .gvi { color: #444; font-size: .65em; font-weight: 600; }
.grammar h3 { font-size: 1em; color: #1f3a5f; margin: 18px 0 6px; }
.grammar p { line-height: 1.6; margin: 6px 0; }
.grammar b, .grammar .k { color: #b5462f; }
.book-box, .note-box { border-radius: 8px; padding: 10px 14px; margin: 8px 0; }
.book-box { background: #fff7ef; border: 1px solid #f3d6bb; }
.note-box { background: #eef5ff; border: 1px solid #c9dcf3; }
.note-box ul { margin: 4px 0; padding-left: 20px; line-height: 1.6; }
.box-label { font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a6d52; }
.note-box .box-label { color: #4a6b93; }
.grammar .table-wrap { overflow-x: auto; }
.grammar table { width: 100%; border-collapse: collapse; }
.rules th, .rules td { border: 1px solid #e5e5e5; padding: 6px 10px; text-align: left; }
.rules th { background: #eef2f7; font-size: .85em; color: #555; }
.rules td.ko { color: #b5462f; font-weight: 600; white-space: nowrap; }
.examples td { padding: 8px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
.examples td.no { color: #999; font-size: .85em; text-align: right; width: 1%; padding-top: 14px; }
.examples td:nth-child(2) { width: 1%; }
.ex-ko { font-size: 1.2em; }
.ex-vi { color: #333; margin-top: 2px; }
.ex-rom { color: #b5462f; font-style: italic; font-size: .85em; margin-top: 2px; }
.tag { display: inline-block; font-size: .6em; vertical-align: middle; background: #f3d6bb; color: #8a4b1c; border-radius: 4px; padding: 1px 6px; font-style: normal; }
.source { color: #888; font-size: .85em; margin-top: 16px; }

/* Nghe tất cả */
.playall-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 12px -16px 0; padding: 10px 16px;
  background: rgba(247, 247, 249, .96); border-bottom: 1px solid #e3e3e8;
  backdrop-filter: blur(4px);
}
button.playall {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #1f3a5f; background: #fff; color: #1f3a5f;
  border-radius: 999px; padding: 6px 14px 6px 10px; font: inherit; font-size: .9em; font-weight: 600; cursor: pointer;
}
button.playall:hover, button.playall.running { background: #1f3a5f; color: #fff; }
.playall-bar > button.playall { font-size: 1em; padding: 8px 18px 8px 14px; }
.pa-icon { display: inline-flex; }
.pa-icon svg { width: 14px; height: 14px; fill: currentColor; }
.pa-delay-label { font-size: .9em; color: #555; display: inline-flex; align-items: center; gap: 6px; }
.pa-delay { font: inherit; padding: 4px 6px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.pa-status { font-size: .9em; color: #b5462f; font-weight: 600; font-variant-numeric: tabular-nums; }
.group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.group-head button.playall { font-size: .8em; padding: 4px 12px 4px 8px; }
.vocab .group-head { margin: 28px 0 8px; }
.vocab .group-head h3 { margin: 0; }
.grammar .group-head { margin: 18px 0 6px; }
.grammar .group-head h3 { margin: 0; }
tr.now td { background: #fff3c4 !important; }
.vocab table tbody tr.now { background: #fff3c4; }

/* Nói */
.speak-part { margin-top: 28px; }
.part-title { color: #b5462f; font-size: 1.4em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.part-title .gnum { background: #b5462f; color: #fff; border-radius: 50%; width: 1.5em; height: 1.5em; display: inline-flex; align-items: center; justify-content: center; font-size: .65em; align-self: center; }
.part-title .gvi { color: #444; font-size: .65em; font-weight: 600; }
.grammar.speak { margin-top: 14px; padding-top: 14px; }
.speak .ex-title { margin: 0; font-size: 1.02em; color: #1f3a5f; }
.speak .intro { color: #555; font-size: .92em; }
.model-box { background: #f6faf3; border: 1px solid #cfe3c3; border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.model-box .box-label { color: #4f7a3a; }
.cue { font-size: 1.05em; margin: 4px 0; }
.cue [lang="ko"] { font-size: 1.1em; font-weight: 600; }
.cue s { color: #b5462f; text-decoration-thickness: 2px; }
.hint { color: #777; font-size: .9em; }
.item-label { display: inline-block; min-width: 2em; color: #b5462f; font-weight: 700; }
.items .item { border-top: 1px dashed #e0e0e0; padding: 10px 0; }
.items .item:first-child { border-top: 0; }
details summary { cursor: pointer; color: #1f3a5f; font-weight: 600; font-size: .9em; padding: 4px 0; user-select: none; }
details summary:hover { text-decoration: underline; }
details[open] summary { color: #888; }
.answer { font-weight: 600; color: #2d6a2d; margin: 4px 0; }
table.lines td.sp { width: 1%; white-space: nowrap; padding-top: 12px; }
.sp-badge { display: inline-block; min-width: 1.8em; text-align: center; padding: 2px 6px; border-radius: 6px; font-size: .8em; font-weight: 700; background: #eef2f7; color: #1f3a5f; }
.sp-badge.sp-f, .sp-badge.sp-f2, .sp-badge.sp- { background: #fde8ef; color: #a2345d; }
.sp-badge.sp-m, .sp-badge.sp-m2, .sp-badge.sp-m3 { background: #e5efff; color: #1f4f9a; }

/* Nghe / Đọc */
.track-box { background: #f4f1fb; border: 1px solid #d9d0ef; border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.track-box .box-label { color: #5b4a8b; margin-bottom: 6px; }
audio.track { width: 100%; height: 40px; }
.passage { background: #fbfbf7; border: 1px solid #e6e3d3; border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.choices { margin: 8px 0; padding-left: 18px; color: #444; font-size: .93em; line-height: 1.7; list-style: none; padding-left: 0; }
.choices b { color: #b5462f; display: inline-block; min-width: 1.6em; }
.questions .q { border-top: 1px dashed #e0e0e0; padding: 10px 0; }
.questions .q:first-child { border-top: 0; }
.q-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-text .ex-vi { display: block; font-size: .88em; color: #666; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 2.4em; }
button.opt {
  font: inherit; font-size: .95em; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid #c9ced8; background: #fff; color: #222; text-align: left;
}
button.opt:hover { border-color: #1f3a5f; }
button.opt.right { background: #e3f4e3; border-color: #3c8d3c; color: #1e5e1e; font-weight: 600; }
button.opt.wrong { background: #fde6e6; border-color: #c94444; color: #8a1f1f; text-decoration: line-through; }
.q-result { margin: 6px 0 0 2.4em; font-size: .92em; color: #a23333; }
.q-result.ok { color: #2d6a2d; }
.q-result .verdict { font-weight: 700; }
.q-result .explain { color: #444; }
.blank-group { margin: 12px 0; }
.blank-lines td { padding: 6px 4px; vertical-align: middle; }
.blank-lines td.sp { width: 1%; white-space: nowrap; }
.blank-lines .ex-ko { line-height: 2.1; }
input.blank {
  font: inherit; font-size: .95em; padding: 2px 6px; margin: 0 2px;
  border: 0; border-bottom: 2px solid #1f3a5f; background: #f3f6fb; border-radius: 4px 4px 0 0; min-width: 3em; max-width: 100%;
}
input.blank:focus { outline: 2px solid #9db6dc; }
input.blank.right { border-color: #3c8d3c; background: #e3f4e3; }
input.blank.wrong { border-color: #c94444; background: #fde6e6; }
input.blank.shown { border-color: #b5862f; background: #fff3c4; }
.blank-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.btn { font: inherit; font-size: .9em; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 1px solid #1f3a5f; background: #fff; color: #1f3a5f; cursor: pointer; }
.btn:hover { background: #1f3a5f; color: #fff; }
.blank-score { font-weight: 700; color: #1f3a5f; }
details.transcript { margin-top: 10px; border-top: 1px solid #eee; padding-top: 6px; }

.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin-top: 32px; }

/* Viết */
.w-prompt { color: #333; font-size: .95em; margin-bottom: 2px; }
.w-answer input.blank { width: 100%; max-width: 32em; }
.free-fields { border-collapse: collapse; margin: 8px 0; width: 100%; max-width: 30em; }
.free-fields th { text-align: left; font-weight: 600; color: #555; background: #eef2f7; padding: 6px 10px; border: 1px solid #e3e3e8; white-space: nowrap; width: 1%; }
.free-fields td { border: 1px solid #e3e3e8; padding: 4px 6px; }
.free-field { font: inherit; width: 100%; border: 0; padding: 4px; background: transparent; }
.free-field:focus { outline: 2px solid #9db6dc; }
.free-preview-box { background: #f6faf3; border: 1px solid #cfe3c3; border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.free-preview-box .box-label { color: #4f7a3a; }
.free-preview { font-size: 1.1em; line-height: 1.7; margin: 6px 0; }
.free-write { display: grid; grid-template-columns: 1fr; gap: 10px; }
.free-text { font: inherit; font-size: 1.05em; width: 100%; padding: 10px; border: 1px solid #c9ced8; border-radius: 8px; line-height: 1.7; resize: vertical; }
.free-text:focus { outline: 2px solid #9db6dc; }
.free-checks { list-style: none; padding: 0; margin: 0; font-size: .92em; }
.free-checks li { padding: 3px 0 3px 26px; position: relative; color: #777; }
.free-checks li::before { content: "○"; position: absolute; left: 4px; color: #aaa; }
.free-checks li.done { color: #2d6a2d; font-weight: 600; }
.free-checks li.done::before { content: "✓"; color: #2d6a2d; }
@media (min-width: 700px) { .free-write { grid-template-columns: 1fr 15em; } }

/* Phát âm / Văn hoá */
.pron { color: #5b4a8b; font-weight: 600; font-size: .85em; margin-left: 4px; white-space: nowrap; }
.reading-text p { line-height: 1.75; margin: 10px 0; text-align: justify; }
.reading-text b { color: #b5462f; }
.q-vi { font-size: 1em; }
details.table-open > summary { display: none; }
/* Dòng thoại: cột nút nghe co lại, cột chữ chiếm phần còn lại (kể cả khi không có cột người nói). */
table.lines td:first-child { width: 1%; }
table.lines td:last-child { width: auto; }

/* Bài đọc ôn tập: ẩn nghĩa + phiên âm cho tới khi bấm nút */
.passage.hide-vi .ex-vi, .passage.hide-vi .ex-rom { display: none; }
.passage .toggle-vi { margin: .2rem 0 .5rem; }
.passage .box-label + .toggle-vi { display: inline-block; }

.download { margin: 1rem 0; }
.download .btn { display: inline-block; text-decoration: none; }