/* ==========================================================================
   Ôn thi lý thuyết + thi thử — chỉ nạp ở trang có element ôn thi (inc/quiz.php).
   Mốc: ≥1000 bài thi 2 cột (câu hỏi | bảng câu) · <1000 bảng câu thành tấm trượt từ đáy,
   nút chuyển câu ghim đáy màn hình thay thanh đáy 5 ô (ẩn trong lúc thi) · <640 điện thoại.
   ========================================================================== */

:root {
	--dlx-ok: #0F7A44;
	--dlx-ok-bg: #E8F6EE;
	--dlx-bad: #B42318;
	--dlx-bad-bg: #FDEDEC;
	--dlx-warn-bg: #FFF3EA;
}

/* Flatsome tạo kiểu cho mọi <button> (chữ in hoa, lề dưới, cao tối thiểu) → trả về trung tính. */
.dlx :is(.dlx-q__opt, .dlx-q__mark, .dlx-chipbtn, .dlx-practice__reset, .dlx-exam__grid button, .dlx-exam__gridbtn, .dlx-exam__close),
.dlx button.dlx-btn { min-height: 0; margin: 0; font-family: var(--dlx-font); letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; }
.dlx button.dlx-btn { line-height: 1; }
.dlx button.dlx-btn--primary:hover:not(:disabled), .dlx button.dlx-btn--primary:focus-visible { background: var(--dlx-accent-h); color: #fff; }
.dlx button.dlx-btn--outline:hover:not(:disabled), .dlx button.dlx-btn--outline:focus-visible { background: var(--dlx-tint); color: var(--dlx-primary); }
.dlx button.dlx-btn:disabled { opacity: .45; cursor: not-allowed; }
.dlx ol.dlx-qlist, .dlx .dlx-exam__history ol { margin: 0; padding: 0; list-style: none; }

/* ---------- Thanh tiến độ ---------- */
.dlx-progress { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--dlx-divider); }
.dlx-progress > span { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: var(--dlx-primary); transition: width .4s ease; }

/* ---------- Lối vào: ôn theo chương ---------- */
.dlx-qhub--sets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dlx .dlx-qset { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); color: var(--dlx-text); text-decoration: none; transition: box-shadow .2s, transform .2s, border-color .2s; }
.dlx .dlx-qset:hover { border-color: var(--dlx-primary); box-shadow: var(--dlx-shadow-lg); color: var(--dlx-text); transform: translateY(-3px); }
.dlx-qset__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .6px; text-transform: uppercase; color: var(--dlx-primary); }
.dlx-qset__title { flex: 1; font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--dlx-ink); }
.dlx-qset__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 14px; line-height: 1.4; color: var(--dlx-muted); }
.dlx-qset__done { font-weight: 600; color: var(--dlx-text-2); }
.dlx .dlx-qset--dl { grid-column: span 2; border-color: #F3CFB4; background: var(--dlx-warn-bg); }
.dlx-qset--dl .dlx-qset__label { color: var(--dlx-accent); }
.dlx-qset--dl .dlx-progress { background: #F6DCC8; }
.dlx-qset--dl .dlx-progress > span { background: var(--dlx-accent); }

/* ---------- Lối vào: thi thử theo hạng ---------- */
.dlx-qhub--classes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dlx .dlx-qclass { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); color: var(--dlx-text); text-decoration: none; transition: box-shadow .2s, transform .2s, border-color .2s; }
.dlx .dlx-qclass:hover { border-color: var(--dlx-primary); box-shadow: var(--dlx-shadow-lg); color: var(--dlx-text); transform: translateY(-3px); }
.dlx-qclass__badge { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--dlx-primary); font-size: 20px; font-weight: 800; color: #fff; }
.dlx-qclass__tx { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.dlx-qclass__tx strong { font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--dlx-ink); }
.dlx-qclass__tx span { font-size: 14px; line-height: 1.5; color: var(--dlx-text-2); }
.dlx-qclass__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.dlx-qclass__facts span { padding: 5px 10px; border-radius: 999px; background: var(--dlx-tint); font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--dlx-ink); white-space: nowrap; }
.dlx-qclass__go { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--dlx-accent); }

/* ---------- Bảng quy định thi + cấu trúc đề ---------- */
.dlx-qhub--rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.dlx-qtable { overflow-x: auto; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); }
.dlx .dlx-qtable table { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.dlx .dlx-qtable caption { padding: 18px 20px 8px; caption-side: top; font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--dlx-ink); text-align: left; }
.dlx .dlx-qtable th, .dlx .dlx-qtable td { padding: 12px 14px; border: 0; border-top: 1px solid var(--dlx-divider); font-size: 15px; line-height: 1.4; letter-spacing: 0; text-align: center; text-transform: none; color: var(--dlx-text); }
.dlx .dlx-qtable thead th { border-top: 0; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dlx-muted); }
.dlx .dlx-qtable th:first-child { padding-left: 20px; text-align: left; }
.dlx .dlx-qtable tbody th { font-weight: 600; color: var(--dlx-ink); }
.dlx .dlx-qtable td { font-weight: 700; font-variant-numeric: tabular-nums; }
.dlx .dlx-qtable tr.is-dl > * { background: var(--dlx-warn-bg); color: var(--dlx-accent); }
.dlx .dlx-qhub__note { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 18px; border-radius: 12px; background: var(--dlx-warn-bg); font-size: 15px; line-height: 1.55; color: var(--dlx-text); }
.dlx-qhub__note .dlx-icon { margin-top: 1px; color: var(--dlx-accent); }
.dlx-qhub__note b { color: var(--dlx-ink); }

/* ---------- Ôn tập theo chương ---------- */
.dlx-practice { display: flex; flex-direction: column; gap: 16px; }
.dlx-qnav { display: flex; flex-wrap: wrap; gap: 8px; }
.dlx .dlx-qnav__item { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--dlx-line); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 700; color: var(--dlx-text-2); text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s, background-color .15s; }
.dlx .dlx-qnav__item:hover { border-color: var(--dlx-primary); color: var(--dlx-primary); }
.dlx .dlx-qnav__item[aria-current] { border-color: var(--dlx-primary); background: var(--dlx-primary); color: #fff; }
.dlx-practice__bar { position: sticky; top: var(--dlx-stick, 0px); z-index: 5; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); transition: top .2s; }
.dlx-practice__stat { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; line-height: 1.4; color: var(--dlx-text-2); }
.dlx-practice__stat b { font-weight: 800; color: var(--dlx-ink); }
.dlx-practice__stat .dlx-practice__right b { color: var(--dlx-ok); }
.dlx-practice__stat .dlx-practice__wrong b { color: var(--dlx-bad); }
.dlx-practice__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dlx-practice__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.dlx .dlx-chipbtn { flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--dlx-line-2); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; line-height: 1; color: var(--dlx-text-2); white-space: nowrap; transition: border-color .15s, color .15s, background-color .15s; }
.dlx .dlx-chipbtn:hover { border-color: var(--dlx-primary); color: var(--dlx-primary); }
.dlx .dlx-chipbtn[aria-pressed="true"] { border-color: var(--dlx-primary); background: var(--dlx-primary); color: #fff; }
.dlx .dlx-practice__reset { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; font-size: 14px; font-weight: 700; line-height: 1; color: var(--dlx-primary); }
.dlx .dlx-practice__reset:hover { background: var(--dlx-tint); }
.dlx .dlx-practice__empty { margin: 0; padding: 28px; border: 1px dashed var(--dlx-line-2); border-radius: 16px; text-align: center; font-size: 15px; color: var(--dlx-muted); }
.dlx-practice__empty[hidden] { display: none; }

/* ---------- Thẻ câu hỏi (ôn tập + xem lại bài thi) ---------- */
.dlx-qlist { display: flex; flex-direction: column; gap: 16px; }
.dlx .dlx-q { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); scroll-margin-top: 120px; }
.dlx .dlx-q[hidden] { display: none; }
.dlx-q.is-right { box-shadow: inset 4px 0 0 var(--dlx-ok), var(--dlx-shadow); }
.dlx-q.is-wrong { box-shadow: inset 4px 0 0 var(--dlx-bad), var(--dlx-shadow); }
.dlx-q__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; }
.dlx-q__no { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--dlx-tint); font-size: 14px; font-weight: 800; color: var(--dlx-primary); }
.dlx-q__src { font-size: 13px; color: var(--dlx-muted); }
.dlx-q__src:empty { display: none; }
.dlx-q__dl { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--dlx-warn-bg); font-size: 13px; font-weight: 700; color: var(--dlx-accent); }
.dlx-q__dl[hidden] { display: none; }
.dlx-q__state { margin-left: auto; font-size: 14px; font-weight: 800; }
.dlx-q.is-right .dlx-q__state { color: var(--dlx-ok); }
.dlx-q.is-wrong .dlx-q__state { color: var(--dlx-bad); }
.dlx .dlx-q__mark { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 1px solid var(--dlx-line); border-radius: 12px; background: #fff; color: var(--dlx-muted); transition: border-color .15s, color .15s, background-color .15s; }
.dlx .dlx-q__mark:hover { border-color: var(--dlx-primary); color: var(--dlx-primary); }
.dlx .dlx-q__mark[aria-pressed="true"] { border-color: var(--dlx-accent); background: var(--dlx-warn-bg); color: var(--dlx-accent); }
.dlx-q__mark[aria-pressed="true"] .dlx-icon path { fill: currentColor; }
.dlx .dlx-q__text { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.6; color: var(--dlx-ink); text-wrap: pretty; }
.dlx .dlx-q__text:focus { outline: none; }
.dlx .dlx-q__img { margin: 0; }
.dlx-q__img[hidden] { display: none; }
.dlx-q__img img { display: block; width: auto; max-width: 100%; height: auto; max-height: 380px; border: 1px solid var(--dlx-line); border-radius: 12px; background: #fff; }
.dlx-q__opts { display: flex; flex-direction: column; gap: 10px; }
.dlx .dlx-q__opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 16px; border: 1.5px solid var(--dlx-line-2); border-radius: 12px; background: #fff; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--dlx-text); text-align: left; white-space: normal; transition: border-color .15s, background-color .15s; }
.dlx .dlx-q__opt:hover:not(:disabled) { border-color: var(--dlx-primary); background: var(--dlx-alt); }
.dlx .dlx-q__opt:disabled { opacity: 1; cursor: default; }
.dlx-q__key { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--dlx-tint); font-size: 14px; font-weight: 800; color: var(--dlx-primary); }
.dlx-q__txt { padding-top: 2px; }
.dlx .dlx-q__opt[aria-pressed="true"] { border-color: var(--dlx-primary); background: var(--dlx-tint); color: var(--dlx-ink); }
.dlx .dlx-q__opt[aria-pressed="true"] .dlx-q__key { background: var(--dlx-primary); color: #fff; }
.dlx .dlx-q__opt.is-right { border-color: var(--dlx-ok); background: var(--dlx-ok-bg); color: var(--dlx-ink); }
.dlx .dlx-q__opt.is-right .dlx-q__key { background: var(--dlx-ok); color: #fff; }
.dlx .dlx-q__opt.is-wrong { border-color: var(--dlx-bad); background: var(--dlx-bad-bg); color: var(--dlx-ink); }
.dlx .dlx-q__opt.is-wrong .dlx-q__key { background: var(--dlx-bad); color: #fff; }
.dlx .dlx-q__fb { margin: 0; font-size: 15px; font-weight: 700; }
.dlx-q__fb:empty { display: none; }
.dlx-q.is-right .dlx-q__fb { color: var(--dlx-ok); }
.dlx-q.is-wrong .dlx-q__fb { color: var(--dlx-bad); }

/* ---------- Thi thử: màn bắt đầu ---------- */
.dlx-exam { scroll-margin-top: 96px; }
.dlx-exam__intro { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.dlx-exam__intro:has(> .dlx-exam__history[hidden]) { grid-template-columns: minmax(0, 760px); }
.dlx-exam__intro[hidden] { display: none; }
.dlx-exam__start { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--dlx-line); border-radius: 20px; background: #fff; box-shadow: var(--dlx-shadow-lg); }
.dlx-exam__start .dlx-qclass__badge { width: 56px; height: 56px; font-size: 22px; }
.dlx .dlx-exam__h { margin: 0; padding: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; line-height: 1.3; letter-spacing: -.3px; color: var(--dlx-ink); }
.dlx .dlx-exam__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.dlx .dlx-exam__facts li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--dlx-alt); font-size: 15px; line-height: 1.4; color: var(--dlx-text-2); }
.dlx-exam__facts .dlx-icon { color: var(--dlx-primary); }
.dlx-exam__facts b { font-weight: 800; color: var(--dlx-ink); }
.dlx .dlx-exam__lead { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dlx-text-2); }
.dlx .dlx-exam__others { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font-size: 15px; color: var(--dlx-muted); }
.dlx .dlx-exam__others a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; }
.dlx .dlx-exam__error { margin: 0; font-size: 15px; font-weight: 600; color: var(--dlx-bad); }
.dlx-exam__history { padding: 22px; border: 1px solid var(--dlx-line); border-radius: 20px; background: #fff; box-shadow: var(--dlx-shadow); }
.dlx-exam__history[hidden] { display: none; }
.dlx .dlx-exam__history h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--dlx-ink); }
.dlx .dlx-exam__history li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "cls score verdict" "date score verdict"; align-items: center; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--dlx-divider); }
.dlx .dlx-exam__history li:first-child { border-top: 0; }
.dlx-exam__h-date { grid-area: date; font-size: 13px; color: var(--dlx-muted); }
.dlx-exam__h-cls { grid-area: cls; font-size: 15px; font-weight: 700; color: var(--dlx-ink); }
.dlx-exam__h-score { grid-area: score; font-size: 15px; font-weight: 800; color: var(--dlx-ink); font-variant-numeric: tabular-nums; }
.dlx-exam__h-verdict { grid-area: verdict; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.is-pass .dlx-exam__h-verdict { background: var(--dlx-ok-bg); color: var(--dlx-ok); }
.is-fail .dlx-exam__h-verdict { background: var(--dlx-bad-bg); color: var(--dlx-bad); }

/* ---------- Thi thử: màn làm bài ---------- */
/* Thanh đồng hồ chỉ ở cột trái, bảng câu dính đầu ở cột phải: cuộn tới cuối bài hai thanh dính không chồng lên nhau. */
.dlx-exam__run { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "top panel" "q panel" "nav panel"; gap: 16px 20px; align-items: start; }
.dlx-exam__body { display: contents; }
.dlx-exam__top { grid-area: top; position: sticky; top: var(--dlx-stick, 0px); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 12px 10px 20px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); transition: top .2s; }
.dlx-exam__cls { font-size: 16px; font-weight: 800; color: var(--dlx-ink); }
.dlx-exam__timer { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--dlx-tint); color: var(--dlx-primary); }
.dlx-exam__timer b { font-size: 18px; font-weight: 800; color: var(--dlx-ink); font-variant-numeric: tabular-nums; }
.dlx-exam__timer.is-low { background: var(--dlx-bad-bg); color: var(--dlx-bad); }
.dlx-exam__timer.is-low b { color: var(--dlx-bad); }
.dlx-exam__count { margin-left: auto; font-size: 15px; color: var(--dlx-text-2); }
.dlx-exam__count b { font-weight: 800; color: var(--dlx-ink); }
.dlx .dlx-exam__q { grid-area: q; display: flex; flex-direction: column; gap: 16px; min-height: 380px; padding: clamp(20px, 2.5vw, 28px); border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); }
.dlx .dlx-exam__q .dlx-q__text { font-size: 18px; }
.dlx .dlx-exam__keys { margin: auto 0 0; padding-top: 4px; font-size: 13px; color: var(--dlx-muted); }
.dlx-exam__keys kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--dlx-line-2); border-radius: 6px; background: var(--dlx-alt); font: 700 12px/1.5 var(--dlx-font); text-align: center; color: var(--dlx-ink); }
.dlx-exam__panel { grid-area: panel; position: sticky; top: var(--dlx-stick, 0px); display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); transition: top .2s; }
.dlx-exam__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; color: var(--dlx-ink); }
.dlx-exam__panel-head strong { font-weight: 800; }
.dlx .dlx-exam__close { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--dlx-line); border-radius: 12px; background: #fff; color: var(--dlx-ink); }
.dlx-exam__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.dlx .dlx-exam__grid button { position: relative; height: 40px; padding: 0; border: 1.5px solid var(--dlx-line-2); border-radius: 10px; background: #fff; font-size: 14px; font-weight: 700; line-height: 1; color: var(--dlx-text-2); font-variant-numeric: tabular-nums; transition: border-color .15s, background-color .15s, color .15s; }
.dlx .dlx-exam__grid button:hover { border-color: var(--dlx-primary); color: var(--dlx-primary); }
.dlx .dlx-exam__grid button.is-done { border-color: var(--dlx-primary); background: var(--dlx-primary); color: #fff; }
.dlx .dlx-exam__grid button[aria-current] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dlx-ink); }
.dlx-exam__grid button.is-flag::after, .dlx-exam__legend .is-flag::after { content: ''; position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--dlx-accent); }
.dlx .dlx-exam__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--dlx-text-2); }
.dlx .dlx-exam__legend li { display: inline-flex; align-items: center; gap: 6px; }
.dlx-exam__legend span { position: relative; width: 16px; height: 16px; border: 1.5px solid var(--dlx-line-2); border-radius: 5px; background: #fff; }
.dlx-exam__legend span.is-done { border-color: var(--dlx-primary); background: var(--dlx-primary); }
.dlx-exam__legend .is-flag::after { top: -4px; right: -4px; width: 10px; height: 10px; }
.dlx-exam__nav { grid-area: nav; display: flex; justify-content: space-between; gap: 12px; }
.dlx .dlx-exam__gridbtn, .dlx-exam__scrim { display: none; }
.dlx-exam__dlg { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--dlx-shadow-lg); color: var(--dlx-text); }
.dlx-exam__dlg::backdrop { background: rgba(11, 27, 77, .45); }
.dlx .dlx-exam__dlg-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--dlx-ink); }
.dlx .dlx-exam__dlg p:not(.dlx-exam__dlg-title) { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--dlx-text-2); }
.dlx-exam__dlg-btns { display: flex; justify-content: flex-end; gap: 10px; }
/* Trong lúc thi: ẩn thanh đáy 5 ô để không bấm nhầm ra khỏi bài. */
body.dlx-exam-on .dlx-appbar { display: none; }

/* ---------- Thi thử: kết quả + xem lại ---------- */
.dlx-exam__result { display: flex; flex-direction: column; gap: 28px; }
.dlx-exam__verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic tx" ". btns"; align-items: start; gap: 16px 22px; padding: clamp(22px, 3vw, 32px); border: 2px solid; border-radius: 20px; }
.dlx-exam__verdict:focus { outline: none; }
.dlx-exam__verdict.is-pass { border-color: var(--dlx-ok); background: var(--dlx-ok-bg); }
.dlx-exam__verdict.is-fail { border-color: var(--dlx-bad); background: var(--dlx-bad-bg); }
.dlx-exam__verdict-ic { grid-area: ic; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; }
.is-pass .dlx-exam__verdict-ic { background: var(--dlx-ok); }
.is-fail .dlx-exam__verdict-ic { background: var(--dlx-bad); }
.dlx-exam__verdict-tx { grid-area: tx; display: flex; flex-direction: column; gap: 6px; }
.dlx-exam__verdict-tx strong { font-size: clamp(28px, 3vw, 36px); font-weight: 800; line-height: 1.1; letter-spacing: 1px; }
.is-pass .dlx-exam__verdict-tx strong { color: var(--dlx-ok); }
.is-fail .dlx-exam__verdict-tx strong { color: var(--dlx-bad); }
.dlx .dlx-exam__verdict-tx p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--dlx-ink); }
.dlx .dlx-exam__verdict-tx .dlx-exam__verdict-dl { font-weight: 700; color: var(--dlx-bad); }
.dlx-exam__verdict-dl[hidden] { display: none; }
.dlx .dlx-exam__verdict-tx .dlx-exam__verdict-time { font-size: 15px; color: var(--dlx-text-2); }
.dlx-exam__verdict-btns { grid-area: btns; display: flex; flex-wrap: wrap; gap: 10px; }
.dlx-exam__review-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dlx .dlx-exam__review-head h3 { margin: 0; font-size: 20px; font-weight: 800; color: var(--dlx-ink); }

/* ==========================================================================
   Máy tính bảng
   ========================================================================== */
@media (max-width: 1099px) {
	.dlx-qhub--sets, .dlx-qhub--classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dlx-qhub--rules { grid-template-columns: minmax(0, 1fr); }
	/* 1000–1099: bài thi vẫn 2 cột, thanh đáy đã ẩn nên bỏ phần đệm đáy của nó. */
	body.dlx.dlx-exam-on { padding-bottom: 0; }
}

@media (max-width: 999px) {
	.dlx-exam__intro { grid-template-columns: minmax(0, 1fr); }
	.dlx-exam__run { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "q"; }
	.dlx .dlx-exam__q { min-height: 0; }
	.dlx .dlx-exam__keys { display: none; }
	/* Kiểu app: nút chuyển câu ghim đáy màn hình, bảng câu trượt lên từ đáy. */
	body.dlx.dlx-exam-on { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
	.dlx-exam__nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--dlx-line); background: #fff; box-shadow: 0 -8px 24px -12px rgba(11, 27, 77, .25); }
	.dlx-exam__nav .dlx-btn { width: 100%; padding: 0 12px; }
	.dlx .dlx-exam__gridbtn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; height: 48px; padding: 0 10px; border: 1px solid var(--dlx-line-2); border-radius: 12px; background: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--dlx-ink); font-variant-numeric: tabular-nums; }
	.dlx-exam__gridbtn .dlx-icon { color: var(--dlx-primary); }
	.dlx-exam__panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 82vh; overflow-y: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -16px 36px rgba(11, 27, 77, .2); visibility: hidden; transform: translateY(105%); transition: transform .25s ease, visibility .25s; }
	.is-grid-open .dlx-exam__panel { visibility: visible; transform: none; }
	.is-grid-open .dlx-exam__scrim { position: fixed; inset: 0; z-index: 70; display: block; background: rgba(11, 27, 77, .45); }
	.dlx .dlx-exam__close { display: grid; }
	.dlx-exam__grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
	.dlx .dlx-exam__grid button { height: 46px; }
}

/* ==========================================================================
   Điện thoại (<640) — kiểu app
   ========================================================================== */
@media (max-width: 639px) {
	.dlx-qhub--sets, .dlx-qhub--classes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.dlx .dlx-qset--dl { grid-column: auto; }
	.dlx .dlx-qset { gap: 8px; padding: 16px; }
	.dlx .dlx-qclass { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px 14px; padding: 16px; }
	.dlx-qclass__badge { width: 48px; height: 48px; grid-row: span 3; }
	.dlx-qclass__go { justify-self: start; }
	.dlx .dlx-qtable th, .dlx .dlx-qtable td { padding: 11px 8px; font-size: 14px; }
	.dlx .dlx-qtable th:first-child { padding-left: 14px; }
	.dlx .dlx-qtable caption { padding: 16px 14px 6px; }

	/* Hàng chuyển chương vuốt ngang sát mép màn hình. */
	.dlx-qnav { flex-wrap: nowrap; margin: 0 calc(var(--dlx-pad) * -1); padding: 0 var(--dlx-pad) 2px; overflow-x: auto; scrollbar-width: none; }
	.dlx-qnav::-webkit-scrollbar { display: none; }
	/* Thanh ôn tập gọn 3 hàng: số liệu + Làm lại · tiến độ · bộ lọc vuốt ngang. */
	.dlx-practice__bar { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "stat reset" "prog prog" "filters filters"; align-items: center; gap: 10px 8px; padding: 14px 16px; }
	.dlx-practice__stat { grid-area: stat; gap: 2px 12px; font-size: 14px; }
	.dlx-practice__bar > .dlx-progress { grid-area: prog; }
	.dlx-practice__tools { display: contents; }
	.dlx-practice__filters { grid-area: filters; flex-wrap: nowrap; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
	.dlx-practice__filters::-webkit-scrollbar { display: none; }
	.dlx .dlx-practice__reset { grid-area: reset; margin-right: -8px; }
	.dlx .dlx-q { gap: 12px; padding: 16px; }
	.dlx .dlx-q__text { font-size: 16px; }
	.dlx .dlx-q__opt { padding: 11px 12px; font-size: 15px; }

	.dlx .dlx-exam__facts { grid-template-columns: minmax(0, 1fr); }
	.dlx-exam__start .dlx-btn { width: 100%; }
	.dlx-exam__top { gap: 8px 12px; padding: 8px 8px 8px 14px; }
	.dlx-exam__cls { display: none; }
	.dlx-exam__count { font-size: 14px; }
	.dlx .dlx-exam__q { padding: 18px 16px; }
	.dlx .dlx-exam__q .dlx-q__text { font-size: 16.5px; }
	.dlx-exam__verdict { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic tx" "btns btns"; gap: 14px 16px; }
	.dlx-exam__verdict-ic { width: 52px; height: 52px; }
	.dlx-exam__verdict-btns .dlx-btn { flex: 1 1 100%; }
}