.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 255px; gap: 30px; align-items: start; }
.lesson-content { min-width: 0; }
.question-picker { position: sticky; top: 18px; padding: 16px; border: 1px solid #e6ebf2; border-radius: 12px; background: #f8fafc; }
.question-picker p { margin: 0 0 12px; font-size: 13px; font-weight: 750; color: #365314; }
.question-picker-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 4px; }
.reset-progress { width: 100%; margin-top: 14px; padding: 10px 8px; border: 1px solid #fca5a5; border-radius: 7px; background: #fff; color: #b91c1c; font: 700 12px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.reset-progress:hover { background: #fef2f2; }
.question-chip { min-width: 34px; height: 32px; padding: 0 6px; border: 0; border-radius: 5px; background: #dcecf7; color: #344860; font: 700 12px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.question-chip:hover { background: #bbf7d0; color: #15803d; }
.question-chip.current { background: #16a34a; color: #fff; box-shadow: 0 0 0 2px #bbf7d0; }
.question-chip.critical { background: #dcecf7; color: #dc2626; }
.question-chip.critical.current { background: #16a34a; color: #fff; box-shadow: 0 0 0 2px #bbf7d0; }
.question-chip.correct { background: #86efac; color: #111827; }
.question-chip.wrong { background: #fca5a5; color: #111827; }
.question-chip.critical.correct { background: #86efac; color: #dc2626; }
.question-chip.critical.wrong { background: #fca5a5; color: #dc2626; }
.question-chip.current { background: #16a34a; color: #fff; box-shadow: 0 0 0 2px #bbf7d0; }
.question-chip.critical.correct.current { background: #16a34a; color: #fff; box-shadow: 0 0 0 2px #bbf7d0; }
.question-chip.critical,
.question-chip.critical.current,
.question-chip.critical.correct.current { color: #dc2626 !important; }

.answer:hover, .answer.selected { border-color: #16a34a; background: #fff; }
.answer.correct { border: 2px solid #16a34a; background: #fff; }
.answer.wrong { border: 2px solid #dc2626; background: #fff; }

.explanation { margin-top: 22px; padding: 16px 18px; border: 1px solid #bbf7d0; border-left: 4px solid #16a34a; border-radius: 9px; background: #f0fdf4; }
.explanation strong { color: #15803d; font-size: 14px; }
.explanation p { margin: 7px 0 0; color: #334155; line-height: 1.55; }

.license-selector { margin: 0 0 20px; padding: 20px; border: 1px solid #dcfce7; border-radius: 13px; background: #f0fdf4; }
.license-selector-title { margin: 0 0 13px; color: #14532d; font-size: 15px; font-weight: 800; }
.license-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.license-button { padding: 15px; border: 1px solid #bbf7d0; border-radius: 10px; background: #fff; color: #14532d; text-align: left; cursor: pointer; font: inherit; }
.license-button strong, .license-button span { display: block; }
.license-button strong { font-size: 17px; }
.license-button span { margin-top: 4px; color: #64748b; font-size: 12px; }
.license-button:hover, .license-button.active { border-color: #16a34a; background: #dcfce7; box-shadow: 0 0 0 2px #bbf7d0; }
.license-select { width: min(100%, 300px); padding: 12px 14px; border: 1px solid #86efac; border-radius: 9px; background: #fff; color: #14532d; font: 700 15px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.license-select:focus { outline: 2px solid #bbf7d0; border-color: #16a34a; }
.exam-status #examLicenseLabel { color: #15803d; font-weight: 800; }
.exam-ready { max-width: 560px; margin: 38px auto 12px; padding: 34px; border: 1px solid #bbf7d0; border-radius: 16px; background: #f0fdf4; text-align: center; }
.exam-ready > span { display: block; margin-bottom: 12px; color: #16a34a; font-size: 42px; }
.exam-ready h2 { margin: 0 0 10px; color: #172554; }
.exam-ready p { margin: 0 0 24px; color: #475569; line-height: 1.6; }
.secondary:disabled, .primary:disabled { cursor: not-allowed; opacity: .5; }
.exam-sets { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.exam-portal { overflow: hidden; border: 1px solid #bbf7d0; border-radius: 12px; background: #eaf5f8; box-shadow: 0 8px 20px #0f172a14; }
.exam-portal-top { padding: 11px 18px; background: #166534; color: #fff; font-size: 14px; font-weight: 800; }
.exam-portal-title { padding: 27px 18px; background: #16a34a; color: #fff; text-align: center; font-size: 27px; font-weight: 900; letter-spacing: .3px; }
.exam-portal-body { padding: 26px 30px; }
.exam-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 24px; align-items: end; }
.exam-form-grid label { display: grid; gap: 7px; color: #14532d; font-size: 14px; font-weight: 800; }
.exam-form-grid input, .exam-form-grid select { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #bbf7d0; border-radius: 7px; background: #fff; color: #1e293b; font: inherit; font-weight: 500; }
.verify-candidate { min-height: 42px; border: 0; border-radius: 7px; background: #f5a937; color: #fff; font: 800 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.candidate-card { display: grid; grid-template-columns: 150px 1fr; gap: 20px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #bbf7d0; }
.candidate-photo { display: grid; place-items: center; min-height: 142px; border: 1px solid #bbf7d0; background: #fff; color: #94a3b8; font-size: 12px; font-weight: 800; line-height: 1.5; text-align: center; }
.candidate-card dl { display: grid; gap: 10px; margin: 5px 0 0; }
.candidate-card dl div { display: grid; grid-template-columns: 125px 1fr; gap: 10px; }
.candidate-card dt { color: #14532d; font-weight: 800; }
.candidate-card dd { margin: 0; color: #dc2626; font-weight: 700; }
.exam-portal-footer { display: flex; align-items: center; gap: 18px; padding: 20px 30px; border-top: 1px solid #bbf7d0; background: #e2f0f5; }
.exam-portal-footer .primary { min-width: 150px; }
#startCandidateExam:not(:disabled) { background: #16a34a; transition: background .18s ease, color .18s ease, transform .18s ease; }
#startCandidateExam:not(:disabled):hover { background: #bbf7d0; color: #14532d; transform: translateY(-1px); }
#candidateNotice { color: #475569; font-size: 12px; line-height: 1.5; }

.exam-simulator { max-width: none; margin: 0; padding: 16px; border: 0; border-radius: 0; background: #f8fafc; }
.simulator-head { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 6px 10px; color: #14532d; }
.simulator-head .back { padding: 0; }
.simulator-head div { display: flex; gap: 16px; align-items: center; font-size: 14px; }
.simulator-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 14px; align-items: start; }
.simulator-question { min-height: calc(100vh - 110px); padding: 22px; border: 2px solid #16a34a; background: #fff; }
.simulator-question .exam-question h2 { margin-top: 0; color: #111827; font-size: 20px; }
.simulator-question .answer { padding: 17px; font-size: 18px; }
.simulator-question .answer.selected { border: 3px solid #16a34a; background: #f0fdf4; box-shadow: 0 0 0 2px #bbf7d0; }
.exam-nav-item.current { border-width: 3px; box-shadow: 0 0 0 2px #bbf7d0; }
.simulator-controls { position: sticky; top: 10px; z-index: 2; display: flex; justify-content: space-between; gap: 10px; margin: 0 0 22px; padding: 10px 0; background: #fff; border-bottom: 1px solid #e6ebf2; }
.simulator-panel { position: sticky; top: 10px; padding: 10px; border: 2px solid #16a34a; background: #fff; }
.simulator-timer { padding: 10px; border-radius: 6px; background: #dcfce7; color: #14532d; font-weight: 800; text-align: center; }
.simulator-timer strong { margin-left: 6px; color: #dc2626; font-size: 25px; }
.simulator-note, .simulator-help { display: none; }
.exam-navigation { display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(10, 1fr); gap: 4px 7px; }
.exam-navigation.c1-layout { grid-template-rows: repeat(15, 1fr); }
.exam-nav-item { display: grid; grid-template-columns: 30px 1fr; align-items: center; min-height: 34px; padding: 3px 8px; border: 2px solid #58766f; border-radius: 8px; background: #f1f5f4; color: #1f3d35; font: 800 12px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.exam-nav-item.current { border-color: #15803d; background: #16a34a; color: #fff; }
.exam-nav-item.answered { background: #dcfce7; color: #14532d; }
.exam-nav-item b { text-align: left; }
.nav-choice-list { display: flex; justify-content: center; gap: 6px; }
.nav-choice { display: grid; justify-items: center; gap: 2px; cursor: pointer; }
.nav-choice em { font-style: normal; font-size: 11px; line-height: 1; }
.nav-choice i { display: block; width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 2px; background: #fff; }
.nav-choice i.selected { position: relative; background: #15803d; border-color: #15803d; }
.nav-choice i.selected::after { content: '✓'; position: absolute; inset: 0; color: #fff; font-size: 10px; line-height: 11px; text-align: center; }
.exam-nav-item.current .nav-choice i { background: #fff; }
.exam-nav-item.current .nav-choice i.selected { background: #14532d; border-color: #fff; }
.simulator-submit { width: 100%; margin-top: 10px; background: #f59e0b; }
.simulator-submit:hover { background: #fbbf24; color: #78350f; }
.result-actions { display: flex; justify-content: center; gap: 10px; }
.result-actions .secondary, .result-actions .primary { padding: 11px 14px; }
.simulator-question.review-wrong { border-color: #ef4444; background: #fef2f2; }
.exam-nav-item.wrong { border-color: #ef4444; background: #fecaca; color: #7f1d1d; }
.simulator-question .answer.review-correct { border-color: #16a34a; background: #dcfce7; }
.simulator-question .answer.review-wrong { border-color: #ef4444; background: #fecaca; box-shadow: none; }
.result-icon.failed { background: #fee2e2; color: #dc2626; }
.quick-grid .icon img { display: block; width: 28px; height: 28px; object-fit: contain; }
.hero-art img { display: block; width: min(280px, 27vw); height: auto; }
.nav-section-icon { width: 19px; height: 19px; margin-right: 10px; object-fit: contain; vertical-align: middle; }
.nav-section-icon + span { margin-left: 0 !important; }
.quick-grid .wrong-icon { background: #fee2e2; color: #dc2626; }
.mobile-menu-overlay { display: none; }

.lesson-content #questionText, .exam-question h2 { font-size: 19px; line-height: 1.5; }
.lesson-content .lesson-footer { position: sticky; top: 12px; z-index: 2; margin: 14px 0 24px; padding: 10px 0; background: transparent; border-bottom: 0; }

/* Nút chuyển câu cuộn theo nội dung trang. */
.lesson-content .lesson-footer { position: static !important; margin: 14px 0 24px; padding: 10px 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.question-images img { width: min(100%, 900px); max-height: 680px; padding: 8px; }

@media (max-width: 760px) {
  #menuButton { display: grid !important; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 10px; background: #dcfce7 !important; color: #15803d; font-size: 25px !important; }
  .mobile-menu-overlay.active { display: block; position: fixed; inset: 0; z-index: 2; border: 0; background: rgb(15 23 42 / 42%); }
  .sidebar { z-index: 4 !important; }
}
@media (max-width: 900px) {
  .lesson-layout { grid-template-columns: 1fr; }
  .question-picker { position: static; order: -1; }
  .question-picker-grid { max-height: 180px; }
  .lesson-content #questionText, .exam-question h2 { font-size: 15px; }
  .question-images img { width: 100%; max-height: 520px; }
  .license-buttons { grid-template-columns: 1fr; }
  .exam-sets { grid-template-columns: 1fr; }
  .exam-portal-title { font-size: 21px; }
  .exam-portal-body { padding: 20px; }
  .exam-form-grid { grid-template-columns: 1fr; }
  .candidate-card { grid-template-columns: 1fr; }
  .candidate-photo { min-height: 110px; }
  .exam-portal-footer { align-items: flex-start; flex-direction: column; padding: 18px 20px; }
  .simulator-layout { grid-template-columns: 1fr; }
  .simulator-question { min-height: auto; padding: 16px; }
  .simulator-panel { position: static; }
  .simulator-question .exam-question h2 { font-size: 14px; }
  .simulator-question .answer { font-size: 16px; }
}

/* Riêng màn hình làm bài thi: ảnh dùng trọn bề ngang thẻ câu hỏi bên ngoài. */
.exam-simulator .question-images {
  width: calc(100% + 44px);
  max-width: none;
  margin: 0 -22px 14px;
}
.exam-simulator .question-images img {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
}
@media (max-width: 900px) {
  .exam-simulator .question-images {
    width: calc(100% + 32px);
    margin-right: -16px;
    margin-left: -16px;
  }
}

.admin-editor { max-width: 940px; display: grid; gap: 16px; padding: 26px; border: 1px solid #86efac; border-radius: 16px; background: #f0fdf4; }
.admin-editor label { display: grid; gap: 7px; color: #14532d; font-weight: 700; }
.admin-editor input, .admin-editor textarea, .admin-editor select { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #86efac; border-radius: 9px; color: #172033; background: #fff; font: inherit; }
.admin-editor textarea { min-height: 110px; resize: vertical; }
.admin-answers { display: grid; grid-template-columns: 1fr; gap: 16px; }
.admin-image-preview { min-height: 110px; display: grid; place-items: center; overflow: hidden; padding: 12px; border: 1px dashed #4ade80; border-radius: 10px; color: #64748b; background: #fff; }
.admin-image-preview img { display: block; max-width: 100%; max-height: 420px; object-fit: contain; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.admin-login { max-width: 460px; display: grid; gap: 14px; padding: 26px; border: 1px solid #86efac; border-radius: 16px; background: #f0fdf4; }
.admin-login h2 { margin: 0; color: #14532d; }
.admin-login p { margin: 0; color: #475569; }
.admin-login label { display: grid; gap: 7px; color: #14532d; font-weight: 700; }
.admin-login input { box-sizing: border-box; width: 100%; padding: 11px 12px; border: 1px solid #86efac; border-radius: 9px; background: #fff; font: inherit; }
.admin-login-message { color: #b91c1c !important; font-weight: 700; }
@media (max-width: 620px) { .admin-editor { padding: 16px; } .admin-answers { grid-template-columns: 1fr; } }

/* Lớp giao diện hiện đại: giữ nguyên cấu trúc và nội dung hiện có. */
:root { --modern-green: #16a34a; --modern-deep: #14532d; --modern-mint: #ecfdf5; --modern-shadow: 0 18px 48px rgb(21 128 61 / 10%); }
body { min-height: 100vh; background-color: #f8fafc; background-image: radial-gradient(circle at 4% 4%, rgb(74 222 128 / 22%) 0, transparent 24rem), radial-gradient(circle at 96% 18%, rgb(45 212 191 / 16%) 0, transparent 26rem), radial-gradient(circle at 58% 102%, rgb(187 247 208 / 52%) 0, transparent 30rem), linear-gradient(120deg, #f8fafc 0%, #f0fdf4 48%, #f8fafc 100%); background-attachment: fixed; }
body::before { content: ''; position: fixed; pointer-events: none; inset: 0; z-index: 0; opacity: .45; background-image: linear-gradient(rgb(22 163 74 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(22 163 74 / 5%) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
.app-shell { position: relative; z-index: 1; }
.sidebar { box-shadow: 14px 0 42px rgb(15 23 42 / 4%); }
.brand { transition: transform .22s ease, opacity .22s ease; }
.brand:hover { transform: translateX(3px); opacity: .88; }
.sidebar nav { gap: 8px; }
.nav-link { display: flex; align-items: center; min-height: 46px; transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.nav-link:hover { transform: translateX(3px); box-shadow: 0 7px 16px rgb(22 163 74 / 9%); }
.nav-link.active { box-shadow: inset 3px 0 0 var(--modern-green), 0 8px 18px rgb(22 163 74 / 8%); }
header { background: rgb(255 255 255 / 88%); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 5; }
.header-user { padding: 5px 7px 5px 12px; border: 1px solid #dcfce7; border-radius: 999px; background: rgb(255 255 255 / 72%); }
.view.active { animation: view-enter .38s cubic-bezier(.2,.8,.2,1); }
.hero { position: relative; isolation: isolate; box-shadow: var(--modern-shadow); background: linear-gradient(120deg, #14532d 0%, #16a34a 52%, #34d399 130%); }
.hero::after { content: ''; position: absolute; z-index: -1; width: 350px; height: 350px; right: -150px; top: -170px; border-radius: 50%; background: rgb(255 255 255 / 12%); }
.hero h1 { text-shadow: 0 2px 20px rgb(20 83 45 / 30%); }
.hero .primary { box-shadow: 0 9px 24px rgb(20 83 45 / 22%); transition: transform .2s ease, box-shadow .2s ease; }
.hero .primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgb(20 83 45 / 30%); }
.quick-grid article, .chapter-grid article, .exam-card { box-shadow: 0 7px 22px rgb(15 23 42 / 4%); transition: transform .23s cubic-bezier(.2,.8,.2,1), box-shadow .23s ease, border-color .23s ease; }
.quick-grid article:hover, .chapter-grid article:hover, .exam-card:hover { transform: translateY(-5px); border-color: #86efac; box-shadow: var(--modern-shadow); }
.quick-grid article { cursor: pointer; min-height: 168px; }
.quick-grid article:focus-visible { outline: 3px solid #86efac; outline-offset: 3px; }
.quick-grid article .text-button { min-width: 112px; min-height: 40px; padding: 10px 0; text-align: left; }
.icon { box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%); }
.primary, .secondary { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.primary:hover:not(:disabled), .secondary:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 9px 18px rgb(20 83 45 / 18%); }
.primary:active:not(:disabled), .secondary:active:not(:disabled) { transform: translateY(0) scale(.98); }
.lesson, .exam-runner, .admin-editor, .admin-login { border-color: #d1fae5; box-shadow: var(--modern-shadow); }
.lesson-content #questionText { letter-spacing: -.2px; }
.answer { transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.answer:hover { transform: translateX(3px); box-shadow: 0 6px 14px rgb(15 23 42 / 5%); }
.question-chip { transition: transform .16s ease, box-shadow .16s ease; }
.question-chip:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgb(15 23 42 / 10%); }
.question-images img { border-radius: 14px; background: #fff; box-shadow: 0 10px 25px rgb(15 23 42 / 8%); }
.exam-portal, .exam-simulator { box-shadow: var(--modern-shadow); }
.modal-box { box-shadow: 0 28px 70px rgb(15 23 42 / 28%); animation: modal-enter .28s cubic-bezier(.2,.8,.2,1); }
.modal { z-index: 100; }
.admin-editor input:focus, .admin-editor textarea:focus, .admin-editor select:focus, .admin-login input:focus { outline: 3px solid rgb(74 222 128 / 28%); border-color: #22c55e; }
@keyframes view-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modal-enter { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Diện mạo mới: thanh điều hướng sâu, nổi bật và đồng bộ với nền ứng dụng. */
:root { --nav-deep: #063b2a; --nav-mid: #0b6847; --nav-accent: #7cf0ba; --surface-glass: rgb(255 255 255 / 84%); }
body { background-image: radial-gradient(circle at 3% -8%, rgb(34 197 94 / 26%) 0, transparent 27rem), radial-gradient(circle at 100% 8%, rgb(20 184 166 / 19%) 0, transparent 28rem), radial-gradient(circle at 44% 100%, rgb(187 247 208 / 65%) 0, transparent 34rem), linear-gradient(135deg, #f8fafc 0%, #ecfdf5 47%, #f0fdfa 100%); }
.app-shell { min-height: 100vh; }
.sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow: hidden auto; isolation: isolate; border: 0; background: linear-gradient(165deg, var(--nav-deep) 0%, #07513a 46%, var(--nav-mid) 100%); box-shadow: 16px 0 48px rgb(2 44 34 / 18%); }
.sidebar::before { content: ''; position: absolute; z-index: -1; width: 250px; height: 250px; top: -105px; left: -120px; border-radius: 50%; background: rgb(110 231 183 / 20%); filter: blur(3px); }
.sidebar::after { content: ''; position: absolute; z-index: -1; width: 210px; height: 210px; right: -135px; bottom: 40px; border-radius: 50%; background: rgb(45 212 191 / 16%); }
.brand { color: #fff; padding-bottom: 38px; }
.brand > span { background: linear-gradient(145deg, #bbf7d0, #6ee7b7); color: #064e3b; box-shadow: 0 9px 20px rgb(0 0 0 / 15%); }
.brand small { color: rgb(236 253 245 / 72%); }
.sidebar nav { gap: 9px; }
.nav-link { position: relative; color: rgb(236 253 245 / 82%); border: 1px solid transparent; padding: 13px 14px; border-radius: 12px; }
.nav-link:hover { color: #fff; background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 10%); box-shadow: none; transform: translateX(4px); }
.nav-link.active { color: #fff; background: linear-gradient(100deg, rgb(134 239 172 / 24%), rgb(255 255 255 / 13%)); border-color: rgb(187 247 208 / 25%); box-shadow: inset 3px 0 0 var(--nav-accent), 0 10px 24px rgb(0 0 0 / 10%); }
.nav-link.active::after { content: ''; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--nav-accent); box-shadow: 0 0 0 5px rgb(124 240 186 / 12%); }
.nav-section-icon { filter: brightness(0) invert(1); opacity: .9; }
.nav-link.active .nav-section-icon { opacity: 1; }
.sidebar-note { color: rgb(236 253 245 / 76%); border: 1px solid rgb(255 255 255 / 13%); background: rgb(255 255 255 / 9%); backdrop-filter: blur(10px); }
.sidebar-note strong { color: #bbf7d0; }
header { height: 78px; border-bottom-color: rgb(187 247 208 / 72%); box-shadow: 0 8px 24px rgb(15 23 42 / 3%); }
.header-user { box-shadow: 0 5px 16px rgb(15 23 42 / 4%); }
.quick-grid article, .chapter-grid article, .exam-card, .lesson, .exam-runner, .exam-portal { border-color: rgb(209 250 229 / 92%); background: var(--surface-glass); backdrop-filter: blur(10px); }
.page-heading h1 { color: #fff; letter-spacing: -.5px; text-shadow: 0 2px 12px rgb(0 20 34 / 92%); }
.section-title h2 { color: #fff; letter-spacing: -.5px; text-shadow: 0 2px 12px rgb(0 20 34 / 92%); }
.page-heading p { color: rgb(255 255 255 / 92%); text-shadow: 0 1px 9px rgb(0 20 34 / 92%); }
.section-title p { color: rgb(255 255 255 / 94%); font-weight: 600; text-shadow: 0 1px 9px rgb(0 20 34 / 92%); }
.section-title strong { color: #c9fff1; font-weight: 850; text-shadow: 0 1px 10px rgb(0 20 34 / 95%); }

@media (max-width: 760px) {
  .sidebar { position: fixed; width: min(82vw, 300px); height: 100dvh; box-shadow: 18px 0 46px rgb(2 44 34 / 30%); }
  #menuButton { box-shadow: 0 7px 16px rgb(21 128 61 / 16%); }
}

/* Ảnh nền và ghi nhận tác giả ảnh. */
body { background-color: #062b3c; background-image: linear-gradient(120deg, rgb(2 30 48 / 80%) 0%, rgb(5 78 77 / 66%) 48%, rgb(9 52 75 / 76%) 100%), url('assets/backgrounds/hochiminh-skyline-v2.png'); background-size: cover; background-position: center; background-attachment: fixed; }
body::before { opacity: .22; background-image: linear-gradient(rgb(186 230 253 / 13%) 1px, transparent 1px), linear-gradient(90deg, rgb(186 230 253 / 13%) 1px, transparent 1px); }
body::before { display: none; }
.background-credit { position: fixed; right: 18px; bottom: 15px; z-index: 6; padding: 7px 12px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 999px; color: rgb(255 255 255 / 72%); background: rgb(2 26 43 / 30%); box-shadow: 0 4px 14px rgb(0 0 0 / 14%); backdrop-filter: blur(8px); font-size: 11px; font-weight: 600; font-style: italic; letter-spacing: .15px; text-shadow: 0 1px 3px rgb(0 0 0 / 55%); opacity: .58; pointer-events: none; }
.page-heading { max-width: 760px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.page-heading .eyebrow { color: #a5f3fc; text-shadow: 0 1px 3px rgb(0 20 38 / 70%); }
.page-heading h1 { color: #fff; text-shadow: 0 2px 10px rgb(0 18 34 / 82%); }
.page-heading p:not(.eyebrow) { color: rgb(240 249 255 / 92%); text-shadow: 0 1px 3px rgb(0 18 34 / 72%); }
@media (max-width: 760px) { .background-credit { right: 10px; bottom: 10px; font-size: 10px; } }

/* Đồng bộ thanh menu và khung tổng quan với tông xanh đêm của ảnh nền. */
:root { --nav-deep: #062d49; --nav-mid: #075b6e; --nav-accent: #8ee9ed; }
.sidebar { background: linear-gradient(165deg, rgb(4 35 62 / 94%) 0%, rgb(4 65 85 / 91%) 53%, rgb(5 91 102 / 90%) 100%); border-right: 1px solid rgb(186 230 253 / 16%); backdrop-filter: blur(18px) saturate(125%); }
.sidebar::before { background: rgb(56 189 248 / 17%); }
.sidebar::after { background: rgb(45 212 191 / 18%); }
.brand > span { background: linear-gradient(145deg, #cffafe, #67e8f9); color: #0c4a6e; }
.nav-link { color: rgb(224 242 254 / 84%); }
.nav-link:hover { background: rgb(186 230 253 / 12%); border-color: rgb(186 230 253 / 14%); }
.nav-link.active { background: linear-gradient(100deg, rgb(125 211 252 / 24%), rgb(255 255 255 / 12%)); border-color: rgb(186 230 253 / 24%); box-shadow: inset 3px 0 0 #8ee9ed, 0 10px 24px rgb(0 24 44 / 17%); }
.nav-link.active::after { background: #8ee9ed; box-shadow: 0 0 0 5px rgb(142 233 237 / 13%); }
.sidebar-note { color: rgb(224 242 254 / 77%); background: rgb(186 230 253 / 8%); border-color: rgb(186 230 253 / 16%); }
.sidebar-note strong { color: #a5f3fc; }
.hero { border: 1px solid rgb(186 230 253 / 34%); background: linear-gradient(118deg, rgb(3 42 70 / 77%), rgb(7 87 105 / 68%) 58%, rgb(14 116 144 / 56%)); box-shadow: 0 24px 60px rgb(0 26 47 / 27%), inset 0 1px 0 rgb(255 255 255 / 21%); backdrop-filter: blur(14px) saturate(120%); }
.hero::after { width: 420px; height: 420px; background: radial-gradient(circle, rgb(186 230 253 / 25%), transparent 67%); }
.hero .eyebrow { color: #a5f3fc; }
.hero p:not(.eyebrow) { color: rgb(224 242 254 / 88%); }
.hero .primary { color: #07556a; background: linear-gradient(135deg, #ecfeff, #a5f3fc); }
.hero-art { filter: drop-shadow(0 16px 18px rgb(0 24 44 / 48%)); }

/* Thanh thông tin học viên đồng bộ với nền ảnh. */
header { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.header-user { color: rgb(240 249 255 / 88%); border: 0; background: transparent; box-shadow: none; }
.header-user strong { color: #fff; }
.header-user span { background: linear-gradient(145deg, #cffafe, #67e8f9); color: #07556a; }

/* Nút Donate và cửa sổ QR. */
.donate-button { appearance: none; border: 0; padding: 3px 8px; border-radius: 999px; background: rgb(255 255 255 / 15%); color: #fff; font: inherit; font-weight: 800; cursor: pointer; text-shadow: 0 1px 4px rgb(0 20 34 / 65%); transition: background .2s ease, transform .2s ease; }
.donate-button:hover { background: rgb(165 243 252 / 28%); transform: translateY(-1px); }
.donate-modal-box { position: relative; max-width: 360px; color: #12372b; }
.donate-modal-box h2 { color: #07556a; }
.donate-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: #64748b; font-size: 26px; line-height: 1; cursor: pointer; }
.qr-placeholder { display: grid; min-height: 220px; place-items: center; padding: 20px; border: 2px dashed #67e8f9; border-radius: 14px; color: #07556a; background: #ecfeff; font-size: 14px; font-weight: 700; }
.donate-qr { display: block; width: min(100%, 260px); margin: 18px auto 0; border-radius: 12px; box-shadow: 0 10px 28px rgb(7 85 106 / 18%); }

/* Logo tài xế dùng tại thanh menu và biểu tượng website. */
.brand > span.brand-logo { width: 48px; height: 48px; padding: 0; overflow: hidden; background: transparent; border-radius: 12px; }
.brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Câu sai có kích thước thẻ đồng bộ với danh sách chương. */
#wrongQuestionList .wrong-question-card { display: flex; align-items: center; width: 100%; min-height: 88px; gap: 17px; padding: 22px; border: 1px solid rgb(209 250 229 / 92%); border-radius: 13px; background: var(--surface-glass); color: var(--ink); text-align: left; font: inherit; cursor: pointer; backdrop-filter: blur(10px); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
#wrongQuestionList .wrong-question-card:hover { border-color: #fca5a5; box-shadow: 0 10px 25px rgb(127 29 29 / 12%); transform: translateY(-2px); }
#wrongQuestionList .wrong-question-card .chapter-num { flex: 0 0 auto; background: #fee2e2; color: #b91c1c; }
#wrongQuestionList .wrong-question-card h3 { margin: 0 0 5px; font-size: 15px; }
#wrongQuestionList .wrong-question-card p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Danh sách Câu sai: chỉ hiển thị ô số câu nhỏ gọn. */
#wrongQuestionList { display: flex; flex-wrap: wrap; grid-template-columns: none; gap: 8px; }
#wrongQuestionList .question-chip { min-width: 34px; height: 32px; padding: 0 6px; }
#wrongQuestionList .question-chip.current { background: #1677ff; color: #fff; box-shadow: 0 0 0 2px rgb(147 197 253 / 80%); }
#resetWrongProgress { display: none !important; }

/* Câu 485 chỉ dùng một hình minh họa. */
.question-images img[src*="cau-485-2.png"] { display: none !important; }
.question-images img[src*="cau-295-1.png"] { width: min(88%, 790px); }

/* Căn giữa form đăng nhập quản trị trên màn hình. */
#admin.active:has(.admin-login:not(.hidden)) { display: flex; align-items: center; justify-content: center; min-height: calc(100dvh - 73px); padding-top: 28px; padding-bottom: 28px; }
#admin.active:has(.admin-login:not(.hidden)) .page-heading { display: none; }
#admin.active:has(.admin-login:not(.hidden)) .admin-login { width: min(100%, 460px); }
@media (max-width: 760px) { #admin.active:has(.admin-login:not(.hidden)) { min-height: calc(100dvh - 60px); padding: 20px 18px; } }
#chapterBadge .critical-label {
  margin-left: 7px;
  color: #dc2626 !important;
  font-weight: 800;
}

#admin .page-heading {
  color: #fff;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: .1px;
  text-shadow: 0 2px 12px rgb(0 15 30 / 95%);
}

.chapter-grid article.learning-target {
  border: 2px solid #22c55e;
  background: rgb(240 253 244 / 88%);
  box-shadow: 0 10px 28px rgb(22 163 74 / 22%);
}

.learning-target-label {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
}

.chapter-details { flex: 1; min-width: 0; }
.chapter-progress {
  height: 7px;
  margin: 10px 0 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(148 163 184 / 26%);
}
.chapter-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #14b8a6);
  transition: width .35s ease;
}
.chapter-details small { color: #38506a; font-size: 11px; font-weight: 700; }

.exam-history-panel {
  width: 100%;
  margin-top: 22px;
  padding: 24px 28px;
  border: 1px solid rgb(209 250 229 / 92%);
  border-radius: 16px;
  background: var(--surface-glass, rgb(255 255 255 / 86%));
  box-shadow: var(--modern-shadow);
  backdrop-filter: blur(10px);
}
.exam-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.exam-history-heading h2 { margin: 0 0 4px; color: #073e4f; font-size: 21px; font-weight: 900; text-shadow: 0 1px 0 rgb(255 255 255 / 92%); }
.exam-history-heading p { margin: 0; color: #1f5262; font-size: 13px; font-weight: 750; text-shadow: 0 1px 0 rgb(255 255 255 / 82%); }
#examHistoryLicense { padding: 7px 11px; border-radius: 999px; color: #075f46; background: rgb(209 250 229 / 88%); font-size: 12px; font-weight: 850; }
.exam-history-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.exam-history-item { min-height: 62px; display: grid; place-content: center; gap: 4px; padding: 9px 6px; border: 1px solid #cbd5e1; border-radius: 10px; color: #172033; background: rgb(255 255 255 / 92%); text-align: center; font: inherit; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.exam-history-item:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgb(15 23 42 / 12%); }
.exam-history-item.selected { border: 3px solid #0ea5e9; box-shadow: 0 0 0 3px rgb(125 211 252 / 48%); }
.exam-history-item b { font-size: 13px; }
.exam-history-item span { font-size: 11px; font-weight: 750; }
.exam-history-item.passed { border-color: #16a34a; color: #fff; background: linear-gradient(135deg, #16a34a, #059669); }
.exam-history-item.failed { border-color: #ef4444; color: #1f2937; background: linear-gradient(135deg, #fecaca, #fca5a5); }
.exam-history-item.selected { border-color: #0ea5e9 !important; box-shadow: 0 0 0 3px rgb(125 211 252 / 60%); }
@media (max-width: 760px) { .exam-history-panel { padding: 20px; } .exam-history-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) { .exam-history-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Điện thoại: chọn đề trực tiếp, không cần mở form thông tin thí sinh. */
.mobile-exam-license { display: none; }
@media (max-width: 760px) {
  #examPortal { display: none !important; }
  #examHistoryPanel { margin-top: 0; }
  #examHistoryLicense { display: none; }
  .mobile-exam-license {
    display: block;
    min-width: 94px;
    padding: 8px 9px;
    border: 1px solid #86efac;
    border-radius: 9px;
    color: #14532d;
    background: rgb(255 255 255 / 92%);
    font: 800 12px/1.2 inherit;
  }
  .exam-history-heading { align-items: flex-start; }
}

/* Thanh có nút Thoát trong màn thi cuộn theo nội dung, không ghim ở cuối vùng thi. */
.simulator-head { position: static; top: auto; z-index: auto; }

.exam-leave-modal { z-index: 130; background: rgb(1 32 46 / 65%); backdrop-filter: blur(8px); }
.exam-leave-modal .modal-box { width: min(100%, 430px); padding: 30px; border: 1px solid rgb(167 243 208 / 70%); background: linear-gradient(145deg, rgb(240 253 250 / 98%), rgb(236 253 245 / 98%)); box-shadow: 0 26px 70px rgb(0 20 34 / 42%); text-align: center; }
.learning-reset-modal .modal-box { border-color: rgb(134 239 172 / 82%); background: linear-gradient(145deg, rgb(240 253 250 / 99%), rgb(236 253 245 / 97%)); }
.learning-reset-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #ef4444, #dc2626); font-size: 29px; font-weight: 900; box-shadow: 0 9px 20px rgb(220 38 38 / 25%); }
.learning-reset-modal .primary { background: linear-gradient(135deg, #dc2626, #ef4444); }
.learning-reset-modal .primary:hover { filter: brightness(1.06); }
.exam-leave-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #f59e0b, #ea580c); font-size: 27px; font-weight: 900; box-shadow: 0 9px 20px rgb(234 88 12 / 25%); }
.exam-leave-modal h2 { margin: 0 0 9px; color: #14532d; font-size: 23px; }
.exam-leave-modal p { margin: 0; color: #36506a; font-size: 14px; line-height: 1.6; }
.exam-leave-actions { display: flex; justify-content: center; gap: 10px; margin-top: 23px; }
.exam-leave-actions .secondary { background: #dff7ec; color: #14532d; }
.exam-leave-actions .primary { background: linear-gradient(135deg, #15803d, #16a34a); }
@media (max-width: 480px) { .exam-leave-modal .modal-box { padding: 25px 20px; } .exam-leave-actions { flex-direction: column-reverse; } .exam-leave-actions button { width: 100%; } }

/* Luôn cho phép thao tác trực tiếp với ô chọn bộ đề. */
#examSetSelect { position: relative; z-index: 3; pointer-events: auto !important; cursor: pointer; }

/* Khi cuộn cao ở trang Thi thử, phần trống của header không được che thao tác form bên dưới. */
body:has(#exam.active) main > header { pointer-events: none; }
body:has(#exam.active) main > header .header-user,
body:has(#exam.active) main > header .header-user * { pointer-events: auto; }

/* Thanh Xin chào/Donate chỉ nhận thao tác tại chính nút của nó, không che các nút bên dưới khi cuộn. */
main > header { pointer-events: none; }
main > header #menuButton,
main > header .header-user,
main > header .header-user * { pointer-events: auto; }

/* Thu nhỏ đồng đều ảnh minh hoạ để cân đối hơn với nội dung câu hỏi. */
.question-images { justify-content: center; margin: 0 auto 10px; }
.question-images img { width: min(100%, 900px) !important; max-height: 680px !important; }
@media (max-width: 900px) {
  .question-images img { width: 100% !important; max-height: 520px !important; }
}

/* Danh sách chọn câu luôn có 5 cột đều nhau trên máy tính. */
@media (min-width: 901px) {
  #questionPicker.question-picker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #questionPicker .question-chip { width: 100%; min-width: 0; }
  .question-images img { min-width: 520px; height: auto !important; }
}

/* Khung ảnh ở Học theo chương nhỏ hơn một chút để các ảnh nguồn nhỏ ít bị vỡ khi phóng. */
@media (min-width: 901px) {
  .lesson .question-images img {
    width: min(100%, 760px) !important;
    min-width: 440px;
    max-height: 570px !important;
  }
}

/* Sửa giải thích trực tiếp trong Học theo chương: chỉ hiện khi đã đăng nhập quản trị. */
.lesson-quick-explanation {
  margin-top: 16px;
  padding: 16px;
  border: 1px dashed rgb(22 163 74 / 55%);
  border-radius: 14px;
  background: rgb(240 253 244 / 88%);
}
.lesson-quick-explanation-head { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#166534; }
.lesson-quick-explanation-head span { padding:3px 8px; border-radius:999px; background:#dcfce7; font-size:12px; font-weight:700; }
.lesson-quick-explanation-text { margin:10px 0; white-space:pre-line; color:#334155; }
.lesson-quick-explanation-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.lesson-quick-explanation-input { width:100%; min-height:132px; margin:10px 0; padding:12px; border:1px solid #86efac; border-radius:10px; font:inherit; line-height:1.55; resize:vertical; }
.lesson-quick-explanation-message { color:#166534; font-weight:700; font-size:14px; }

/* Khu vực Dashboard trong trang quản trị. */
.admin-section-menu { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.admin-section-tab { border:0; border-radius:10px; padding:10px 15px; background:rgb(255 255 255 / 76%); color:#14532d; font:inherit; font-weight:800; cursor:pointer; }
.admin-section-tab.active { background:#16a34a; color:#fff; box-shadow:0 7px 16px rgb(22 163 74 / 25%); }
.admin-section-menu > .secondary { margin-left:auto; }
.admin-dashboard { padding:24px; border:1px solid rgb(167 243 208 / 90%); border-radius:18px; background:rgb(248 255 251 / 88%); box-shadow:0 14px 35px rgb(15 23 42 / 10%); }
.admin-dashboard-heading h2 { margin:0; color:#14532d; }
.admin-dashboard-heading p { margin:5px 0 20px; color:#64748b; }
.admin-visit-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.admin-visit-cards article { display:grid; gap:6px; padding:20px; border-radius:14px; background:linear-gradient(135deg,#dcfce7,#f0fdf4); border:1px solid #bbf7d0; }
.admin-visit-cards span { color:#166534; font-weight:800; }
.admin-visit-cards strong { font-size:34px; line-height:1; color:#166534; }
.admin-visit-cards small,.admin-visit-message { color:#64748b; }
.admin-visit-message { margin:14px 0 0; color:#b91c1c; }
@media (max-width: 560px) { .admin-section-menu > .secondary { margin-left:0; } .admin-visit-cards { grid-template-columns:1fr; } }

/* Trang chính không có lối điều hướng vào quản trị. */
body:not(.admin-standalone) .nav-link[data-view="admin"] { display:none !important; }

/* Chế độ độc lập cho /quangtri. */
body.admin-standalone { min-height:100vh; background:linear-gradient(135deg,rgb(236 253 245 / 94%),rgb(248 250 252 / 90%)),url('assets/backgrounds/hochiminh-skyline-v2.png') center/cover fixed; }
body.admin-standalone::before { display:none; }
body.admin-standalone .app-shell { display:block; min-height:100vh; }
body.admin-standalone .sidebar,
body.admin-standalone main > header,
body.admin-standalone #home,
body.admin-standalone #learn,
body.admin-standalone #exam { display:none !important; }
body.admin-standalone main { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:42px 0; }
body.admin-standalone #admin { display:block; }
body.admin-standalone #admin .page-heading { margin-bottom:18px; color:#14532d; text-shadow:none; }
body.admin-standalone #admin .page-heading p { color:#365314; }
body.admin-standalone .admin-go-home { margin-left:auto; }
body.admin-standalone .admin-section-menu > .secondary { margin-left:0; }
@media (max-width: 600px) { body.admin-standalone main { width:calc(100% - 24px); padding:24px 0; } }

/* Thu gọn thanh Xin chào / Donate để ưu tiên diện tích nội dung. */
header { height: 56px; }
.header-user { padding: 2px 5px 2px 9px; font-size: 12px; }
.donate-button { padding: 2px 7px; font-size: 12px; }
@media (max-width: 760px) {
  header { height: 50px; }
  .header-user { padding: 1px 4px 1px 8px; }
}

/* Nới chiều ngang phần học để nội dung câu hỏi ít bị xuống dòng trên máy tính. */
@media (min-width: 901px) {
  #learn.view { max-width: 1240px; padding-left: 28px; padding-right: 28px; }
  #learn .lesson-layout { grid-template-columns: minmax(0, 1fr) 235px; gap: 24px; }
}

/* Giữ nguyên các dòng xuống hàng do quản trị viên nhập trong phần giải thích. */
.lesson-content .explanation p { white-space: pre-line; }

/* Trên điện thoại, nút chuyển câu luôn sẵn sàng ở cuối màn hình. */
@media (max-width: 760px) {
  /* backdrop-filter tạo vùng neo riêng cho phần tử fixed trên một số trình duyệt điện thoại. */
  .lesson { backdrop-filter: none !important; }
  .exam-simulator { padding-left: 0; padding-right: 0; }
  .exam-simulator .simulator-head { padding-left: 16px; padding-right: 16px; }
  .exam-simulator .simulator-layout { gap: 0; }
  .exam-simulator .simulator-question { width: 100%; }
  .lesson .question-images img {
    width: 90vw !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: none !important;
  }
  .lesson .question-images {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    justify-content: center;
  }
  .lesson .question-picker { display: none; }
  .lesson-content { padding-bottom: 86px; }
  .lesson-content .lesson-footer {
    position: fixed !important;
    top: auto !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;
    z-index: 20;
    margin: 0 !important;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(167 243 208 / 90%);
    border-radius: 0;
    background: rgb(240 253 250 / 98%);
    box-shadow: 0 -8px 24px rgb(0 42 56 / 18%);
    backdrop-filter: blur(12px);
  }

  /* Thanh chuyển câu của phần thi thử luôn ở đáy màn hình trên điện thoại. */
  .exam-simulator { backdrop-filter: none !important; }
  .exam-simulator .simulator-question { padding-bottom: 86px; }
  .exam-simulator .simulator-controls {
    position: fixed !important;
    top: auto !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;
    z-index: 10000 !important;
    margin: 0 !important;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(167 243 208 / 90%);
    background: rgb(240 253 250 / 98%);
    box-shadow: 0 -8px 24px rgb(0 42 56 / 18%);
    backdrop-filter: blur(12px);
    pointer-events: auto !important;
    isolation: isolate;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }
  .mobile-exam-timer { display: block !important; color: #14532d; font-size: 19px; line-height: 1; white-space: nowrap; }
  .exam-simulator .simulator-controls #prevExam { justify-self: start; }
  .exam-simulator .simulator-controls #nextExam { justify-self: end; }
  .exam-simulator .simulator-controls button {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
  .exam-simulator .simulator-panel {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .exam-simulator .simulator-timer,
  .exam-simulator .simulator-note,
  .exam-simulator .exam-navigation,
  .exam-simulator .simulator-help { display: none !important; }
  .exam-simulator .simulator-submit { margin: 18px 0 96px; }
}

.mobile-exam-timer { display: none; }

/* Trên điện thoại/thẻ nhỏ, thanh chuyển câu của bài thi luôn đứng trên mọi lớp khác. */
@media (max-width: 900px) {
  #examRunner.exam-simulator { backdrop-filter: none !important; filter: none !important; transform: none !important; }
  /* Đồng hồ đã nằm giữa hai nút điều hướng; ẩn thẻ đồng hồ/danh sách cũ để
     không còn lớp chồng lên vùng thao tác ở màn hình điện thoại. */
  #examRunner .simulator-timer,
  #examRunner .exam-navigation,
  #examRunner .simulator-note,
  #examRunner .simulator-help { display: none !important; }
  #examRunner .simulator-panel {
    position: static !important;
    z-index: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
  }
  #examRunner .simulator-controls {
    position: fixed !important;
    inset: auto 0 0 !important;
    z-index: 2147483647 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    min-height: 68px;
    margin: 0 !important;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom)) !important;
    background: rgb(240 253 250 / 99%) !important;
    border-top: 1px solid #86efac !important;
    box-shadow: 0 -5px 18px rgb(0 42 56 / 20%) !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  #examRunner .simulator-controls button,
  #examRunner .mobile-exam-timer { position: relative; z-index: 1; pointer-events: auto !important; }
  #examRunner .mobile-exam-timer { display: block !important; }
  body:has(#examRunner:not(.hidden)) main > header,
  body:has(#examRunner:not(.hidden)) .background-credit { pointer-events: none !important; }
}

/* Cổng điều hướng thi thử trên điện thoại: nằm trực tiếp trên body nên không
   bao giờ bị lớp cuộn, header hoặc khung bài thi che mất. */
.mobile-exam-control-portal { display: none; }
@media (max-width: 900px) {
  body > .mobile-exam-control-portal.is-active {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    z-index: 2147483647 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 70px;
    margin: 0 !important;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom)) !important;
    background: #f0fdfafe !important;
    border: 0 !important;
    border-top: 1px solid #86efac !important;
    border-radius: 0 !important;
    box-shadow: 0 -6px 18px rgb(0 42 56 / 24%) !important;
    isolation: isolate;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    contain: layout paint;
  }
  body > .mobile-exam-control-portal.is-active button,
  body > .mobile-exam-control-portal.is-active .mobile-exam-timer {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  body > .mobile-exam-control-portal.is-active .mobile-exam-timer { display: block !important; }
  /* Đồng bộ giao diện với thanh Câu trước / Câu tiếp của phần Học theo chương. */
  body > .mobile-exam-control-portal.is-active #prevExam,
  body > .mobile-exam-control-portal.is-active #nextExam {
    min-height: 42px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 750;
    box-shadow: none;
  }
  body > .mobile-exam-control-portal.is-active #prevExam {
    justify-self: start;
    background: #ecfccb;
    color: #365314;
  }
  body > .mobile-exam-control-portal.is-active #nextExam {
    justify-self: end;
    background: #16a34a;
    color: #fff;
  }
  body > .mobile-exam-control-portal.is-active #nextExam:disabled,
  body > .mobile-exam-control-portal.is-active #prevExam:disabled { opacity: .5; }
  body > .mobile-exam-control-portal.is-active .mobile-exam-timer {
    min-width: 54px;
    color: #1e293b;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
}