:root {
  --bg: #f4f6fb;
  --card: #ffffff;
  --ink: #1b2437;
  --muted: #6b7386;
  --line: #e3e7f0;
  --brand: #1f3a93;
  --brand-2: #c8102e;
  --ok: #1e9e5a;
  --ok-bg: #e6f7ee;
  --bad: #d23c3c;
  --bad-bg: #fdecec;
  --warn: #e0a400;
  --warn-bg: #fff6d8;
  --radius: 14px;
  --shadow: 0 4px 18px rgba(20, 30, 60, .07);
  font-size: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 20px 18px 40px; }
code { background: #eef1f7; padding: 1px 5px; border-radius: 5px; font-size: .9em; }
button { font: inherit; cursor: pointer; }

/* Biểu tượng Lucide (js/icons.js). Nét vẽ ăn theo màu chữ của phần tử bọc ngoài,
   nên nút đổi màu là icon đổi theo. currentColor làm hết việc đó. */
.ic { display: inline-block; vertical-align: -.18em; flex: none; }
/* Nút có cả icon và chữ thì căn cho hai thứ nằm cùng đường cơ sở. */
.btn .ic { vertical-align: -.18em; margin-right: .35em; }
.btn .ic:only-child { margin-right: 0; }

/* Top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 22px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.logo {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), #3f5fd6); color: #fff; font-weight: 800; font-size: 24px;
}
img.logo { background: none; object-fit: contain; padding: 0; }
.brand-title { font-weight: 800; letter-spacing: .3px; }
.brand-sub { font-size: .8rem; color: var(--muted); }
.controls { display: flex; align-items: center; gap: 10px; }
/* Mọi điều khiển trên thanh trên phải cùng một chiều cao.
   Trước đây .seg cao 40px (nút bên trong 38px + viền) còn .btn.small và .ddbtn
   cao 36px, nên align-items:center đẩy nhóm 36px xuống 2px và trông như lệch
   hàng. Khoanh trong .controls để không đụng các .seg khác (bộ lọc khối ở trang
   chủ, thanh chọn học viên ở trang theo dõi). */
.controls .btn.small,
.controls .authbtn,
.controls .ddbtn,
.controls .seg { height: 36px; }
.controls .seg button { padding: 0 12px; font-size: .9rem; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #f7f8fc; }
.seg button { border: 0; background: transparent; padding: 7px 12px; color: var(--muted); font-weight: 600; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.active { background: var(--brand); color: #fff; }

/* Dropdown tự làm (js/ui.js). Không dùng <select> vì hệ điều hành tự vẽ danh
   sách bung ra, CSS không chạm tới được — trên máy Mac nó hiện chữ tí xíu kèm
   vạch xanh của hệ thống, lệch hẳn khỏi giao diện còn lại.

   Đây là lớp nền dùng chung. Trang Công thức có lớp sơn riêng trong
   css/congthuc.css khoanh trong #review, cụ thể hơn nên vẫn thắng bộ này. */
.dd { position: relative; display: inline-flex; }
.ddbtn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink);
  background: #f7f8fc; border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 9px; cursor: pointer; transition: .15s;
}
.ddbtn:hover { border-color: #c5cbe0; background: #fafbff; }
.dd.open .ddbtn { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31, 58, 147, .1); }
.ddbtn:focus-visible { outline: 2px solid #c8d3f7; outline-offset: 1px; }
.ddbtn .ddval { white-space: nowrap; }
.ddcar { display: inline-flex; align-items: center; color: var(--muted); font-style: normal; }

/* Mũi tên xổ xuống cho ::before / ::after — những chỗ không chèn được thẻ <svg>.
   Vẫn là chevron-down của Lucide, viết dưới dạng data URI. Màu nét phải ghi cứng
   vì currentColor không dùng được trong ảnh nền, nên lấy màu chữ mờ chung. */
:root {
  --ic-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7386' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.ddpanel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16, 22, 40, .18); padding: 6px;
}
.ddlist { display: flex; flex-direction: column; gap: 1px; }
.ddopt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font: inherit; font-size: .92rem; color: var(--ink);
  background: none; border: 0; border-radius: 8px; padding: 8px 12px; cursor: pointer;
  white-space: nowrap;
}
.ddopt:hover, .ddopt.hi { background: #f1f3fa; }
.ddopt.on { background: #eef2ff; color: var(--brand); font-weight: 700; }

/* Ô chọn ngôn ngữ trên thanh trên: hẹp hơn ba nút gạt cũ khoảng 47px, đủ để
   thanh bớt hẳn một dòng ở khổ điện thoại. */
.dd-lang .ddbtn { min-width: 74px; }
.dd-lang .ddpanel { min-width: 104px; }

/* Buttons */
.btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 9px 16px; border-radius: 10px; font-weight: 600; transition: .15s;
}
.btn:hover { border-color: #c5cbe0; background: #fafbff; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: #17307a; }
.btn.danger { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 11px; font-size: .9rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Liên kết sang trang ôn tập */
a.btn { text-decoration: none; display: inline-block; }
.btn.review-cta { background: #eef2ff; border-color: #c8d3f7; color: var(--brand); font-weight: 700; }
.btn.review-cta:hover { background: #e3e9ff; border-color: #b0c0f2; }
.brand { text-decoration: none; color: inherit; }

/* Home */
.hero { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.hero h1 { margin: 0 0 4px; font-size: 1.6rem; }
.hero p { margin: 0; color: var(--muted); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.exam-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s, box-shadow .15s;
}
.exam-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,30,60,.12); }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; }
.tag.prelim { background: #e8eeff; color: var(--brand); }
.tag.heat { background: #fde8ec; color: var(--brand-2); }
.tag.grade { background: #e6f7ee; color: var(--ok); }
.exam-card h3 { margin: 0; font-size: 1.05rem; }
.exam-card .sub { color: var(--muted); font-size: .9rem; }
.exam-meta { display: flex; gap: 14px; font-size: .85rem; color: var(--muted); flex-wrap: wrap; }
.exam-card .actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.best { font-size: .85rem; color: var(--ok); font-weight: 600; }
.resume { font-size: .85rem; color: var(--warn); font-weight: 600; }

/* Setup panel */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); max-width: 720px; margin: 0 auto; }
.panel h2 { margin: 0 0 6px; }
.panel .sub { color: var(--muted); margin-bottom: 18px; }
.mode-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mode-card { border: 2px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; background: #fafbff; }
.mode-card.active { border-color: var(--brand); background: #eef2ff; }
.mode-card h4 { margin: 0 0 4px; }
.mode-card p { margin: 0; font-size: .88rem; color: var(--muted); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Exam view */
.exam-head {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px;
  position: sticky; top: 70px; z-index: 5; box-shadow: var(--shadow);
}
.exam-head h2 { margin: 0; font-size: 1.1rem; }
.exam-head .sub { color: var(--muted); font-size: .85rem; }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.25rem; padding: 4px 12px; border-radius: 10px; background: #eef2ff; color: var(--brand); }
.timer.low { background: var(--bad-bg); color: var(--bad); }
.progress { font-size: .9rem; color: var(--muted); }

/* minmax(0,…) chứ không phải 1fr: cột 1fr mặc định có min-width:auto, một hình hay
   dòng ký hiệu dài là đủ đẩy cột rộng hơn khung và làm cả trang trôi ngang. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; align-items: start; }

.nav-panel { position: sticky; top: 150px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.nav-panel h4 { margin: 0 0 8px; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
/* Dải số câu kèm hai nút chuyển tới lui.
   Trên máy tính, cột bên chỉ rộng 186px nên hai nhãn không đứng cạnh nhau được;
   xếp dọc dưới lưới số, mỗi nút một dòng. Trên điện thoại dải số cuộn ngang được
   nên hai nút kẹp hai bên và bỏ nhãn chữ. */
.qnav-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qnav-row .qnav { flex: 1 1 100%; min-width: 0; order: -1; }
.qnav-arrow { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.qnav-arrow .aicon { font-size: 1.15rem; line-height: 1; }

.qnav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.qnav button {
  border: 1px solid var(--line); background: #fafbff; border-radius: 8px; padding: 6px 0; font-weight: 700; font-size: .85rem;
}
.qnav button.answered { background: #e8eeff; border-color: #b9c6f5; color: var(--brand); }
.qnav button.correct { background: var(--ok-bg); border-color: #9fd9b8; color: var(--ok); }
.qnav button.wrong { background: var(--bad-bg); border-color: #f3b3b3; color: var(--bad); }
.nav-panel .legend { margin-top: 10px; font-size: .78rem; color: var(--muted); display: grid; gap: 4px; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; border: 1px solid var(--line); }
.legend .l-ans::before { background: #e8eeff; } .legend .l-ok::before { background: var(--ok-bg); } .legend .l-bad::before { background: var(--bad-bg); }

.section-title {
  margin: 18px 0 8px; font-weight: 800; color: var(--brand); font-size: .95rem; letter-spacing: .3px; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.q { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow); scroll-margin-top: 160px; }
.q.correct { border-color: #9fd9b8; } .q.wrong { border-color: #f3b3b3; }
.q-head { display: flex; gap: 12px; align-items: flex-start; }
/* Hàng nút nhỏ ở góc mỗi câu: đọc to, đánh dấu câu khó, ghi chú, báo lỗi.
   Đẩy sang phải bằng margin-left:auto để không phụ thuộc số nút. */
.q-tools { margin-left: auto; display: flex; gap: 2px; flex: none; }
.qtool {
  border: 0; background: transparent; padding: 4px 6px; border-radius: 8px;
  font-size: 1rem; line-height: 1; opacity: .4; transition: .15s;
}
.qtool:hover { opacity: 1; background: #f1f3fa; }
.qtool.on { opacity: 1; }
.qtool[data-mark-btn="flag"].on { background: var(--warn-bg); }
.qtool[data-mark-btn="note"].on { background: #eef2ff; }

.q-note { margin-top: 10px; }
.q-note textarea {
  width: 100%; font: inherit; font-size: .92rem; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: #fffdf6; resize: vertical;
}
.q-note textarea:focus { outline: 2px solid #c8d3f7; outline-offset: 1px; border-color: #c8d3f7; }

/* Biểu mẫu báo lỗi trong hộp thoại */
.report-form { display: grid; gap: 9px; margin: 4px 0 14px; }
.report-form select, .report-form textarea {
  width: 100%; font: inherit; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); resize: vertical;
}
.q-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: #eef2ff; color: var(--brand); font-weight: 800; display: grid; place-items: center; }
.q-text { flex: 1; }
.q-text .en { font-size: 1rem; }
.q-text .vi { font-style: italic; color: #3a4460; margin-top: 4px; }
.q-text .vi.only { font-style: normal; color: var(--ink); }
.q-text .gloss { margin-top: 6px; font-size: .84rem; color: var(--muted); }
.q-text .gloss b { color: #3a4460; font-weight: 600; }
.q-fig { margin: 12px 0 4px; text-align: center; }
.q-fig img { max-width: 100%; max-height: 320px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.ov { text-decoration: overline; }
.math { font-family: "Cambria Math", "Times New Roman", serif; font-size: 1.05em; }
.center { text-align: center; margin: 8px 0; }
/* Dòng ký hiệu hoặc bảng trong đề có thể dài hơn bề ngang máy; cho cuộn trong ô
   của nó thay vì đẩy cả trang. */
.center.math { max-width: 100%; overflow-x: auto; }

.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 12px; }
.opt {
  display: flex; align-items: center; gap: 10px; border: 2px solid var(--line); border-radius: 10px; padding: 9px 12px;
  cursor: pointer; background: #fafbff; transition: .12s; text-align: left;
}
.opt:hover { border-color: #b9c6f5; }
.opt .key { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: 0 0 auto; }
.opt.selected { border-color: var(--brand); background: #eef2ff; }
.opt.selected .key { background: var(--brand); color: #fff; border-color: var(--brand); }
.opt.is-correct { border-color: var(--ok); background: var(--ok-bg); }
.opt.is-correct .key { background: var(--ok); color: #fff; border-color: var(--ok); }
.opt.is-wrong { border-color: var(--bad); background: var(--bad-bg); }
.opt.is-wrong .key { background: var(--bad); color: #fff; border-color: var(--bad); }
.opt:disabled { cursor: default; }
.opt .vi-opt { color: var(--muted); font-style: italic; }

.input-row { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.input-row input {
  font: inherit; padding: 9px 12px; border: 2px solid var(--line); border-radius: 10px; width: 220px; max-width: 100%;
}
.input-row input:focus { outline: none; border-color: var(--brand); }
.input-row input.is-correct { border-color: var(--ok); background: var(--ok-bg); }
.input-row input.is-wrong { border-color: var(--bad); background: var(--bad-bg); }

.feedback { margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: .92rem; }
.feedback.ok { background: var(--ok-bg); color: var(--ok); }
.feedback.bad { background: var(--bad-bg); color: var(--bad); }
.feedback .ans { font-weight: 800; }
.q-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.exam-foot { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-top: 18px; }

/* Results */
.result { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 16px; }
.result h2 { margin: 0 0 12px; }
.score-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.score-big { font-size: 3rem; font-weight: 900; color: var(--brand); line-height: 1; }
.score-big small { font-size: 1rem; color: var(--muted); font-weight: 600; }
.medal { padding: 6px 14px; border-radius: 999px; font-weight: 800; }
.medal.gold { background: #fff1c2; color: #8a6400; } .medal.silver { background: #eceff3; color: #4a5361; }
.medal.bronze { background: #f7dfcf; color: #7a3d14; } .medal.merit { background: #e8eeff; color: var(--brand); } .medal.none { background: #f1f2f6; color: var(--muted); }
.topic-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .92rem; }
.topic-table th, .topic-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.topic-table th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; }
.bar { height: 8px; background: #eef1f7; border-radius: 99px; overflow: hidden; min-width: 120px; }
.bar > i { display: block; height: 100%; background: var(--ok); }

.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.foot { text-align: center; color: var(--muted); font-size: .8rem; padding: 14px; border-top: 1px solid var(--line); background: var(--card); }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--brand); text-decoration: underline; }

/* Toggle button (solution editor) */
.btn.toggle.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.linkish { border: 0; background: none; color: var(--brand); font-weight: 700; padding: 0; text-decoration: underline; }

/* Banners */
.banner { background: #eef2ff; border: 1px solid #c8d3f7; color: var(--brand); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: .9rem; font-weight: 600; }
.banner.warn { background: var(--warn-bg); border-color: #ecd48a; color: #7a5c00; }

/* Solution coverage on the exam card */
.sol-progress { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); font-weight: 600; }
.sol-progress .bar { flex: 1; min-width: 60px; height: 6px; }
.sol-progress .bar > i { background: var(--brand); }
.sol-progress.done { color: var(--ok); }
.sol-progress.done .bar > i { background: var(--ok); }

/* Detailed solution shown to the student */
.solution { margin-top: 10px; border: 1px solid #cfe3d6; background: #f3faf6; border-radius: 12px; padding: 4px 12px; }
.solution.is-draft { border-color: #ecd48a; background: #fffbef; }
.solution > summary { cursor: pointer; font-weight: 700; color: var(--ok); padding: 7px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.solution.is-draft > summary { color: #8a6400; }
.solution > summary::-webkit-details-marker { display: none; }
.solution > summary::after {
  content: ""; margin-left: auto; width: 15px; height: 15px; opacity: .55;
  background: var(--ic-chevron) center / contain no-repeat; transition: transform .15s;
}
.solution[open] > summary::after { transform: rotate(180deg); }
.sol-body { padding: 2px 0 10px; color: var(--ink); font-size: .95rem; }
.sol-body p { margin: 0 0 8px; }
.sol-body p:last-child { margin-bottom: 0; }
.sol-en { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #cfe3d6; color: #3a4460; font-style: italic; }
.sol-hint { margin-top: 10px; font-size: .88rem; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* In-app dialog (native confirm/alert is blocked in embedded browsers) */
.modal-back { position: fixed; inset: 0; background: rgba(16, 22, 40, .45); display: grid; place-items: center; z-index: 100; padding: 18px; }
.modal { background: var(--card); border-radius: 16px; box-shadow: 0 18px 50px rgba(10, 16, 35, .3); padding: 22px; max-width: 420px; width: 100%; }
.modal p { margin: 0 0 18px; font-size: 1rem; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Study view (answers + solutions) */
.study-q .opt { cursor: default; }
.study-q .opt:hover { border-color: var(--line); }
.study-q .opt.is-correct:hover { border-color: var(--ok); }
.study-answer { margin-top: 12px; font-size: .95rem; color: var(--muted); }
.study-answer b { color: var(--ok); font-size: 1.05em; }
.qnav button.has-sol { border-color: #9fd9b8; }
.qnav button.has-sol::after { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--ok); margin: 2px auto 0; }

/* Solution editor */
.panel.wide { max-width: none; margin-bottom: 14px; }
.sol-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.small-check { font-size: .85rem; color: var(--muted); gap: 6px; margin-left: auto; }
.sol-notice { margin-top: 10px; font-size: .82rem; color: var(--muted); background: #f7f8fc; border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; }
.sol-msg { margin-top: 10px; font-size: .88rem; font-weight: 600; color: var(--brand); }
.sol-code { width: 100%; margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }

.sol-edit .q-head { align-items: flex-start; }
.sol-edit .q-text .en { font-size: .95rem; }
.chip { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
.chip.missing { background: #f1f2f6; color: var(--muted); }
.chip.draft { background: var(--warn-bg); color: #8a6400; }
.chip.file { background: var(--ok-bg); color: var(--ok); }
.sol-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mini-opt { font-size: .8rem; border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; color: var(--muted); background: #fafbff; }
.mini-opt.is-answer { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.sol-answer { margin-top: 10px; font-size: .9rem; color: var(--muted); }
.sol-answer b { color: var(--ok); }
.sol-label { display: block; margin: 12px 0 4px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.sol-ta { width: 100%; font: inherit; font-size: .93rem; line-height: 1.5; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; resize: vertical; background: #fdfdff; }
.sol-ta:focus { outline: none; border-color: var(--brand); background: #fff; }
.sol-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sol-status { font-size: .82rem; font-weight: 700; color: var(--ok); margin-right: auto; }
.saved-badge { font-size: .75rem; color: var(--muted); background: #f1f2f6; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

/* ---------- Tablet ---------- */
@media (max-width: 800px) {
  /* Cụm controls (duyệt tài khoản, theo dõi, chọn học viên, EN/VI/EN+VI) rộng khoảng
     330px. Từ 800px trở xuống nó không còn đủ chỗ cạnh phần thương hiệu: không cho
     xuống dòng thì hoặc cả trang trôi ngang (điện thoại), hoặc các nút bị bóp đến mức
     nhãn tự ngắt dòng và thanh trên cao gấp đôi (máy tính bảng). */
  .topbar { flex-wrap: wrap; gap: 8px 10px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .controls { flex-wrap: wrap; justify-content: flex-end; min-width: 0; margin-left: auto; }
  /* Bỏ nhãn chữ của nút quản trị và nút theo dõi, chỉ để lại icon. Phải cùng mốc
     với lúc thanh trên bắt đầu xuống dòng: nếu ẩn muộn hơn thì khoảng 641–800px
     vẫn giữ chữ đủ và thanh bị đẩy thành ba dòng. */
  .authbtn .glabel { display: none; }

  .layout { grid-template-columns: minmax(0, 1fr); padding-bottom: 84px; }
  /* Question navigator becomes a fixed, horizontally scrollable strip at the bottom */
  .nav-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20;
    border-radius: 16px 16px 0 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(20,30,60,.12);
  }
  .nav-panel h4, .nav-panel .legend { display: none; }
  .qnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; scroll-snap-type: x proximity; }
  .qnav button { flex: 0 0 40px; height: 36px; padding: 0; scroll-snap-align: start; }
  .qnav-row { flex-wrap: nowrap; }
  .qnav-row .qnav { flex: 1 1 auto; order: 0; }
  .qnav-arrow { flex: 0 0 auto; height: 36px; padding: 0 11px; }
  .qnav-arrow .alabel { display: none; }
  .exam-head { top: 0; }
  .q { scroll-margin-top: 110px; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  :root { font-size: 15px; }
  main { padding: 14px 12px 32px; }
  .topbar { position: static; padding: 10px 14px; }
  .logo { width: 38px; height: 38px; font-size: 20px; border-radius: 10px; }
  .brand-title { font-size: .95rem; white-space: nowrap; }
  .brand-sub { display: none; }
  .seg button { padding: 6px 9px; font-size: .85rem; white-space: nowrap; }
  .hero h1 { font-size: 1.35rem; }
  .filters { width: 100%; }
  .btn.review-cta { width: 100%; text-align: center; }
  .exam-grid { grid-template-columns: 1fr; gap: 10px; }
  .exam-card { padding: 14px; }
  .panel { padding: 16px; }
  .mode-options { grid-template-columns: 1fr; }

  /* Compact sticky exam bar */
  .exam-head { padding: 8px 10px; gap: 6px 10px; margin: -4px -2px 12px; border-radius: 12px; }
  .exam-head h2 { font-size: .95rem; }
  .exam-head .sub { display: none; }
  .exam-head > .row { gap: 6px; margin-left: auto; }
  .exam-head .btn.small { padding: 5px 9px; font-size: .82rem; }
  .timer { font-size: 1rem; padding: 3px 8px; }
  .progress { font-size: .8rem; }

  .section-title { font-size: .8rem; margin: 14px 0 6px; }
  .q { padding: 12px 12px; border-radius: 12px; scroll-margin-top: 64px; }
  .q-head { gap: 10px; }
  .q-num { width: 30px; height: 30px; font-size: .9rem; }
  .q-text .en { font-size: .95rem; }
  .q-text .vi { font-size: .92rem; }
  .q-fig img { max-height: 240px; }
  .opts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 7px; }
  .opt { padding: 8px 10px; gap: 8px; }
  .opt .key { width: 24px; height: 24px; font-size: .8rem; }
  .input-row input { width: 100%; }
  .q-actions .btn, .input-row .btn { flex: 1; }
  .exam-foot { flex-direction: column; }
  .exam-foot .btn { width: 100%; }

  .result { padding: 16px; }
  .score-big { font-size: 2.4rem; }
  .topic-table th:last-child, .topic-table td:last-child { display: none; }
  .foot { font-size: .72rem; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

  /* Solution editor + solution box on phones */
  #authorBtn { padding: 5px 9px; font-size: .82rem; white-space: nowrap; }
  .saved-badge { display: none; }
  .sol-tools { gap: 6px; }
  .sol-tools .btn { flex: 1 1 46%; }
  .small-check { flex: 1 1 100%; margin-left: 0; }
  .sol-edit .q-head { flex-wrap: wrap; }
  .sol-edit .chip { order: 3; }
  .sol-ta { font-size: 16px; padding: 9px 10px; }   /* 16px stops iOS zooming on focus */
  .sol-label { margin: 10px 0 4px; }
  .sol-foot .btn { width: auto; }
  .solution { padding: 2px 10px; }
  .sol-body { font-size: .92rem; }
  .banner { font-size: .84rem; padding: 9px 11px; }
  .modal { padding: 16px; border-radius: 14px; }
  .modal-actions .btn { flex: 1; }
}

@media print {
  .topbar, .foot, .nav-panel, .exam-foot, .q-actions, .exam-head .btn, .sol-tools, .sol-notice, .saved-badge,
  .q-tools { display: none !important; }
  /* Ghi chú thì in kèm, vì bản in để làm trên giấy nên ghi chú của bé có ích. */
  .q-note[hidden] { display: block !important; }
  .q-note textarea { border-color: #ccc; background: #fff; }
  .solution { border-color: #ccc; background: #fff; }
  .solution > summary::after { content: ""; }
  .layout { grid-template-columns: 1fr; }
  .q { break-inside: avoid; box-shadow: none; }
}

/* ---------- Đăng nhập & hồ sơ học viên ---------- */
.authbar { display: inline-flex; align-items: center; gap: 8px; }
.authbtn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.authbtn .gicon {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: #4285f4; font-weight: 800; font-size: .8rem;
}
/* Ô ảnh đại diện cỡ cố định và căn giữa: emoji mỗi hệ máy vẽ một cỡ khác nhau,
   không khoanh lại thì nó đội nút cao lên và nhìn như bị rớt khỏi hàng. */
.authbtn.who .wav { width: 20px; height: 20px; display: grid; place-items: center; font-size: 1.05rem; line-height: 1; flex: none; }
.authbtn.who .wcar { display: inline-flex; align-items: center; opacity: .55; }
.authbtn.who .wname { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.authbtn.who .wcar { font-size: .7rem; color: var(--muted); }
.syncdot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.syncdot.busy { background: var(--warn); animation: sdpulse 1s ease-in-out infinite; }
.syncdot.ok { background: var(--ok); }
.syncdot.bad { background: var(--bad); }
@keyframes sdpulse { 50% { opacity: .3; } }

.modal .mtitle { margin: 0 0 14px; font-size: 1.1rem; }
.stulist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.stu { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fafbff; }
.stu.on { border-color: var(--brand); background: #eef2ff; }
.stupick {
  flex: 1; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0; background: none; font: inherit; padding: 10px 12px; cursor: pointer; border-radius: 12px;
}
.stupick .sav { width: 26px; height: 26px; display: grid; place-items: center; font-size: 1.3rem; line-height: 1; flex: none; }
.stupick .sname { font-weight: 700; }
.stupick .sgrade { margin-left: auto; font-size: .78rem; color: var(--muted); }
.sdel { border: 0; background: none; color: var(--muted); font-size: .95rem; padding: 8px 12px; cursor: pointer; border-radius: 10px; }
.sdel:hover { color: var(--bad); background: var(--bad-bg); }
.addrow { display: flex; gap: 8px; flex-wrap: wrap; }
.addrow input { flex: 1; min-width: 130px; font: inherit; font-size: 16px; padding: 9px 11px; border: 2px solid var(--line); border-radius: 10px; }
.addrow input:focus { outline: none; border-color: var(--brand); }
.addrow select { font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.mfoot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.muser { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfoot .btn { margin-left: auto; }

@media (max-width: 640px) {
  .authbtn.who .wname { max-width: 76px; }
}

/* Thông báo nhỏ góc màn hình */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 12px;
  font-size: .92rem; font-weight: 600; box-shadow: 0 10px 30px rgba(10,16,35,.3);
  opacity: 0; transition: .25s; z-index: 200; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Màn chặn khi chưa đăng nhập / chưa được duyệt ---------- */
body.gated { background: var(--bg); }
.gatewrap { flex: 1; display: grid; place-items: center; padding: 40px 18px; }
.gatecard {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 34px 30px; box-shadow: var(--shadow); max-width: 440px; width: 100%; text-align: center;
}
.gateicon { font-size: 2.4rem; line-height: 1; margin-bottom: 12px; }
.gatecard h1 { margin: 0 0 8px; font-size: 1.3rem; }
.gatecard p { margin: 0 0 18px; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.gateuser { font-size: .85rem; color: var(--ink); background: #f1f2f6; border-radius: 999px; padding: 5px 12px; display: inline-block; margin-bottom: 16px; }
.gateactions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gateactions .btn { padding: 10px 18px; }
.gatecard .authbtn .gicon { background: #fff; }
/* Liên kết tới trang giới thiệu và trang pháp lý, bắt buộc phải thấy được ngay ở
   màn đăng nhập thì Google mới duyệt OAuth consent screen. */
.gatelinks { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: .82rem; }
.gatelinks a { color: var(--muted); text-decoration: none; }
.gatelinks a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- Bảng duyệt tài khoản ---------- */
.acclist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; max-height: 60vh; overflow-y: auto; }
.acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fafbff; }
.accmain { flex: 1; min-width: 160px; }
.accname { font-weight: 700; font-size: .95rem; }
.accme { color: var(--muted); font-weight: 500; font-size: .82rem; }
.accrole { background: #eef2ff; color: var(--brand); font-size: .7rem; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-left: 4px; }
.accmail { font-size: .8rem; color: var(--muted); }
.accst { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 3px 9px; border-radius: 999px; }
.accst.ok { background: var(--ok-bg); color: var(--ok); }
.accst.wait { background: var(--warn-bg); color: #8a6400; }
.accst.bad { background: var(--bad-bg); color: var(--bad); }
.accbtns { display: flex; gap: 6px; }
.accempty { color: var(--muted); text-align: center; padding: 20px 0; }

@media (max-width: 640px) {
  .gatecard { padding: 24px 20px; }
  .acc { gap: 8px; }
  .accbtns { width: 100%; }
  .accbtns .btn { flex: 1; }
}
.gsi { display: flex; justify-content: center; width: 100%; margin-bottom: 4px; }
.gateactions { flex-direction: column; align-items: center; }
.hookbox { font-size: .84rem; line-height: 1.55; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; background: #f1f2f6; color: var(--muted); }
.hookbox.on { background: var(--ok-bg); color: #14663c; }
.hookbox.off { background: var(--warn-bg); color: #7a5c00; }
.hookbox code { background: rgba(0,0,0,.06); }

/* Dải báo chế độ chạy ở máy */
.devbanner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: #2b2a26; color: #ffd88a; font-size: .8rem; font-weight: 600;
  padding: 7px 14px; text-align: center; display: flex; gap: 10px; justify-content: center; align-items: center;
}
.devbanner .linkish { color: #ffd88a; text-decoration: underline; font-weight: 700; }
body:has(.devbanner) main { padding-bottom: 56px; }