/* ============================================================
   Thi thu - dong bo giao dien voi v4 (danh sach de, xem truoc,
   phong thi, ket qua). Bang mau: mua xanh dam + giay nga + but
   do cham thi + xanh la dung. Port tu duhocba.com_v4 exam.css.
   ============================================================ */
/* :root NGOÀI .exam-wrap — bắt buộc phải có ở đây vì #exreportModal bị JS
   dời ra làm con trực tiếp của <body> (thoát khỏi .exam-wrap, xem
   exam-report.js), nếu chỉ khai ở .exam-wrap thì mọi var(--ex-*) trong modal
   sẽ hỏng lặng lẽ (declaration dùng var() không resolve được bị trình duyệt
   bỏ qua toàn bộ, không fallback) -> mất hết border/nền/màu nút. */
:root{
  --ex-paper:#f7f3ea; --ex-card:#fffdf8; --ex-ink:#37240f; --ex-ink-soft:#6f5a43;
  --ex-muted:#7b7a70; --ex-line:#e2d9c6;
  --ex-accent:#d9772c; --ex-accent-soft:#fbe4d2;
  --ex-danger:#cf4136; --ex-danger-soft:#f7ded9;
  --ex-ink-hover:#241507; --ex-accent-hover:#c1691f;
  --ex-warn:#b9791a; --ex-warn-soft:#f6e7c6;
  --ex-ok:#2f9e6f; --ex-ok-soft:#dcefe4;
  /* Thang màu riêng cho độ khó đề thi (1-5) — mỗi cấp 1 màu để phân biệt rõ,
     không dùng lại --ex-ok/warn/danger vì các biến đó mang nghĩa đúng/cảnh
     báo/lỗi ở chỗ khác, gán chồng vào đây dễ gây hiểu nhầm ngữ cảnh. */
  --ex-diff-1:#2f9e6f; --ex-diff-2:#6ea23c; --ex-diff-3:#d9a520; --ex-diff-4:#d9772c; --ex-diff-5:#cf4136;
  --ex-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
.exam-wrap{
  max-width:1040px; margin:0 auto; color:var(--ex-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.exam-wrap *{box-sizing:border-box}

/* ---- header (danh sach) ---- */
.exam-head{margin:6px 0 22px}
.exam-h1{font-family:var(--ex-serif); font-size:30px; line-height:1.15; margin:0 0 6px; color:var(--ex-ink)}
.exam-sub{margin:0; color:var(--ex-ink-soft); font-size:15.5px}
.exam-empty{background:var(--ex-card); border:1px solid var(--ex-line); border-radius:12px; padding:34px; text-align:center; color:var(--ex-muted)}

/* ---- grid + card ---- */
.exam-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.exam-card{position:relative; overflow:hidden; background:var(--ex-card); border:1px solid var(--ex-line); border-radius:14px; padding:18px;
  display:flex; flex-direction:column; gap:11px; box-shadow:0 1px 2px rgba(29,37,64,.05),0 10px 24px rgba(29,37,64,.06);
  transition:transform .15s, box-shadow .15s; text-decoration:none}
.exam-card:hover{transform:translateY(-3px); box-shadow:0 8px 30px rgba(29,37,64,.12)}
.exam-card-wm{position:absolute; right:-14px; top:-10px; font-size:96px; line-height:1; opacity:.06; color:var(--ex-ink); pointer-events:none; transform:rotate(-8deg)}
.exam-card-listening .exam-card-wm{color:var(--ex-warn); opacity:.09}
.exam-card-writing .exam-card-wm{color:var(--ex-accent); opacity:.08}
.exam-card-top{display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative; z-index:1}
.exam-card-lvl{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ex-accent)}
.exam-type{flex:none; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px}
.exam-type i{font-size:11px}
.exam-type-listening{background:var(--ex-warn-soft); color:var(--ex-warn)}
.exam-type-reading{background:var(--ex-accent-soft); color:var(--ex-accent)}
.exam-type-writing{background:var(--ex-ok-soft); color:var(--ex-ok)}
.exam-diff{display:inline-flex; align-self:flex-start; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--ex-ink-soft); position:relative; z-index:1; text-decoration:none}
a.exam-diff{cursor:pointer; border-radius:6px; padding:3px 4px; margin:-3px -4px; transition:background .12s}
a.exam-diff:hover{background:var(--ex-accent-soft)}
.exam-diff-bar{display:inline-flex; gap:2px}
.exam-diff-bar i{width:11px; height:6px; border-radius:2px; background:var(--ex-line); display:inline-block}
.exam-diff-easiest .exam-diff-bar i.is-on{background:var(--ex-diff-1)}
.exam-diff-easy .exam-diff-bar i.is-on{background:var(--ex-diff-2)}
.exam-diff-medium .exam-diff-bar i.is-on{background:var(--ex-diff-3)}
.exam-diff-hard .exam-diff-bar i.is-on{background:var(--ex-diff-4)}
.exam-diff-hardest .exam-diff-bar i.is-on{background:var(--ex-diff-5)}
.paper-meta + .exam-diff, .exam-diff + .paper-updated{margin-top:6px}
.exam-card-name{font-family:var(--ex-serif); font-size:17.5px; line-height:1.25; margin:0; position:relative; z-index:1; color:var(--ex-ink)}
.exam-card:hover .exam-card-name{color:var(--ex-accent)}
.exam-card-stats{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--ex-muted);
  border-top:1px dashed var(--ex-line); padding-top:11px; margin-top:auto; position:relative; z-index:1}
.exam-card-stats b{color:var(--ex-ink); font-weight:700}
.exam-card-stats i{color:var(--ex-accent); margin-right:2px}
.exam-card .exam-card-cta{position:relative; z-index:1; font-size:13.5px; font-weight:700; color:var(--ex-accent)}
.exam-paging{margin-top:24px}

/* ---- khoi theo tung nhom (index.php) + FAQ nhom (group.php) ---- */
.exam-group-sec{margin:0 0 38px}
.exam-group-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px}
.exam-group-head h2{font-family:var(--ex-serif); font-size:20px; margin:0; color:var(--ex-ink)}
.exam-group-more{flex:none; font-size:13.5px; font-weight:700; color:var(--ex-accent); text-decoration:none}
.exam-group-more:hover{color:var(--ex-accent-hover)}
.exam-faq{margin:32px 0 0}
.exam-faq h2{font-family:var(--ex-serif); font-size:19px; margin:0 0 12px; color:var(--ex-ink)}
.exam-faq details{background:var(--ex-card); border:1px solid var(--ex-line); border-radius:10px; margin-bottom:10px; overflow:hidden}
.exam-faq summary{cursor:pointer; padding:14px 42px 14px 18px; font-weight:700; font-size:15px; color:var(--ex-ink); list-style:none; position:relative}
.exam-faq summary::-webkit-details-marker{display:none}
.exam-faq summary::after{content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:20px; line-height:1; color:var(--ex-muted); transition:transform .15s}
.exam-faq details[open] summary{color:var(--ex-accent)}
.exam-faq details[open] summary::after{content:"\2212"; color:var(--ex-accent)}
.exam-faq-a{padding:0 18px 16px; color:var(--ex-ink-soft); font-size:14.5px; line-height:1.7}

/* ---- filter (pill) — thay cho <select>, dung chung nhom + ky nang ---- */
.exam-tabs{display:flex; flex-wrap:nowrap; gap:8px; margin-bottom:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.exam-tabs::-webkit-scrollbar{display:none}
.exam-tab{display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; flex:none; white-space:nowrap;
  font-size:13.5px; font-weight:700; text-decoration:none; border:1px solid var(--ex-line);
  background:var(--ex-card); color:var(--ex-ink-soft); transition:.15s}
.exam-tab i{font-size:12px}
.exam-tab:hover{border-color:var(--ex-accent); color:var(--ex-accent)}
.exam-tab.is-on{background:var(--ex-ink); color:#fff; border-color:var(--ex-ink)}
.exam-tab-listening i{color:var(--ex-warn)} .exam-tab-listening.is-on{background:var(--ex-warn); border-color:var(--ex-warn)}
.exam-tab-reading i{color:var(--ex-accent)} .exam-tab-reading.is-on{background:var(--ex-accent); border-color:var(--ex-accent)}
.exam-tab-writing i{color:var(--ex-ok)} .exam-tab-writing.is-on{background:var(--ex-ok); border-color:var(--ex-ok)}
.exam-tab.is-on i{color:#fff}

.exam-diff-chip{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ex-ink-soft);
  background:var(--ex-accent-soft); border-radius:999px; padding:6px 8px 6px 14px; margin-bottom:16px}
.exam-diff-chip b{color:var(--ex-ink)}
.exam-diff-chip a{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  background:#fff; color:var(--ex-ink-soft); text-decoration:none; font-size:11px}
.exam-diff-chip a:hover{color:var(--ex-danger)}

/* ---- disclaimer ---- */
.exam-disclaimer{margin:14px 0 0; padding:11px 15px; background:var(--ex-warn-soft); border:1px solid var(--ex-line);
  border-left:3px solid var(--ex-warn); border-radius:8px; font-size:13px; color:var(--ex-ink-soft); line-height:1.6}
.exam-disclaimer i{color:var(--ex-warn); margin-right:6px}

/* ---- buttons ---- */
.exam-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700;
  border-radius:10px; padding:10px 16px; font-size:14px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:.15s}
.exam-btn-ink{background:var(--ex-ink); color:#fff; width:100%}
.exam-btn-ink:hover{background:var(--ex-ink-hover); color:#fff}
.exam-btn-accent{background:var(--ex-accent); color:#fff}
.exam-btn-accent:hover{background:var(--ex-accent-hover); color:#fff}
.exam-btn-lg{font-size:16px; padding:14px 34px; border-radius:12px}
.exam-btn-sm{padding:7px 13px; font-size:13px; border-radius:8px; width:auto}
.exam-btn-disabled, .exam-btn:disabled{opacity:.5; cursor:not-allowed; filter:grayscale(.35)}
.exam-btn-ghost{background:var(--ex-card); border-color:var(--ex-line); color:var(--ex-ink-soft)}
.exam-btn-ghost:hover{border-color:var(--ex-accent); color:var(--ex-accent)}
.exam-btn-block{width:100%}

/* ============================================================
   XEM DE DANG TO GIAY (show.php)
   ============================================================ */
.exam-view{max-width:820px}
.paper{background:var(--ex-card);
  background-image:repeating-linear-gradient(transparent,transparent 33px,rgba(29,37,64,.035) 34px);
  border:1px solid var(--ex-line); border-radius:10px; padding:34px 40px;
  box-shadow:0 1px 2px rgba(29,37,64,.05),0 14px 40px rgba(29,37,64,.08);
  font-family:var(--ex-serif)}
.paper-head{text-align:center; border-bottom:2px solid var(--ex-ink); padding-bottom:14px; margin-bottom:22px}
.paper-unit{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ex-muted)}
.paper-title{font-size:24px; line-height:1.2; margin:8px 0 6px; color:var(--ex-ink)}
.paper-meta{font-size:14px; color:var(--ex-ink-soft); font-style:italic;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.paper-updated{margin-top:6px; font-size:12.5px; color:var(--ex-muted);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.paper-updated i{margin-right:4px}

.paper-passage{background:var(--ex-paper); border:1px solid var(--ex-line); border-left:3px solid var(--ex-accent);
  border-radius:8px; padding:14px 16px; margin:20px 0 14px; font-size:16px; line-height:1.7; color:var(--ex-ink)}
.paper-passage-listening{border-left-color:var(--ex-warn)}
.paper-passage-tag{display:inline-block; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:11.5px; font-weight:700; color:var(--ex-warn); text-transform:uppercase; letter-spacing:.04em; margin-right:8px}
.paper-passage img{max-width:100%; height:auto}

.paper-q{margin:18px 0}
.paper-q-title{font-size:16px; line-height:1.55; color:var(--ex-ink)}
.paper-q-no{font-weight:700}
.paper-q-title img{max-width:100%; height:auto}
.paper-q-pts,.room-q-pts,.kq-q-pts{float:right; margin:1px 0 6px 12px; flex:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:12px; font-weight:700; color:var(--ex-accent); background:var(--ex-accent-soft);
  border-radius:6px; padding:2px 8px; white-space:nowrap}
.paper-ans{margin:10px 0 0; padding-left:4px; display:grid; grid-template-columns:1fr 1fr; gap:7px 24px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-size:15px}
.paper-ans.is-wide{grid-template-columns:1fr}
.paper-ans-item{display:flex; align-items:flex-start; gap:9px; color:var(--ex-ink-soft)}
.paper-ans-k{flex:none; width:22px; height:22px; border:1px solid var(--ex-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--ex-muted)}
.paper-ans-img{max-width:100%; max-height:150px; width:auto; height:auto; object-fit:contain; border:1px solid var(--ex-line); border-radius:6px}
.paper-essay{margin-top:10px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px; color:var(--ex-muted); font-style:italic; border:1px dashed var(--ex-line);
  border-radius:8px; padding:14px; background:var(--ex-paper)}
.paper-end{text-align:center; font-weight:700; letter-spacing:.1em; color:var(--ex-ink-soft); margin-top:26px}

.paper-lock{position:relative; margin-top:8px}
.paper-lock-inner{filter:blur(5px); opacity:.5; pointer-events:none; user-select:none}
.paper-lock-note{margin-top:16px; background:var(--ex-warn-soft); border:1px dashed var(--ex-warn);
  border-radius:12px; padding:16px 18px; text-align:center; font-size:14px; color:var(--ex-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.6}
.paper-lock-note i{color:var(--ex-warn); margin-right:5px}
.paper-lock-note b{color:var(--ex-warn)}

.exam-note{margin:0 0 16px; padding:12px 16px; background:var(--ex-card); border:1px solid var(--ex-line);
  border-left:3px solid var(--ex-accent); border-radius:10px; font-size:13.5px; color:var(--ex-ink-soft); line-height:1.6}
.exam-note a{color:var(--ex-accent); font-weight:700}
.exam-note--warn{background:var(--ex-warn-soft); border-left-color:var(--ex-warn)}

.exam-cta{text-align:center; margin:26px 0 10px}
.exam-view .exam-cta{position:sticky; bottom:16px; z-index:30; margin-top:30px; pointer-events:none}
.exam-view .exam-cta .exam-btn{pointer-events:auto; box-shadow:0 10px 30px rgba(217,119,44,.45)}
/* Mobile: thanh địa chỉ trình duyệt tự ẩn/hiện khi cuộn làm chiều cao viewport
 * đổi liên tục -> position:sticky tính sai, nút bị trễ/trôi theo cuộn (lỗi
 * trình duyệt mobile với sticky+bottom, không xảy ra trên desktop). Chuyển
 * sang position:fixed (thanh CTA cố định đáy màn hình) để bám đúng viewport
 * thị giác trong lúc cuộn. */
@media (max-width:767px){
  .exam-view .exam-cta{position:fixed; left:0; right:0; bottom:0; margin:0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, var(--ex-paper) 65%, transparent)}
  /* fixed thoát khỏi luồng tài liệu (khác sticky) -> chừa chỗ cuối trang để
   * thanh CTA không đè lên dòng "HẾT"/note cuối bài. */
  .exam-view{padding-bottom:84px}
}
.exam-view .exam-cta-note{pointer-events:auto; display:inline-block; background:var(--ex-card); border:1px solid var(--ex-line); border-radius:999px; padding:6px 14px; margin-top:10px; box-shadow:0 4px 14px rgba(29,37,64,.1)}
.exam-cta-note{margin:12px 0 0; color:var(--ex-muted); font-size:13.5px}
.exam-cta-note i{color:var(--ex-accent)}
.exam-ctabar{text-align:center; margin:26px 0 10px}
.btn-examstart{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700;
  border-radius:12px; padding:14px 34px; font-size:16px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; background:var(--ex-accent); color:#fff; box-shadow:0 10px 30px rgba(217,119,44,.45); transition:.15s}
.btn-examstart:hover{background:var(--ex-accent-hover); color:#fff}
.btn-examstart--sm{padding:9px 18px; font-size:14px; box-shadow:none; border-radius:9px}

/* ============================================================
   PHONG THI (take.php)
   ============================================================ */
.exam-room{max-width:1000px}
.room-grid{display:grid; grid-template-columns:1fr 250px; gap:20px}
.room-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.room-head-main{min-width:0}
.room-unit{font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ex-accent); font-weight:700}
.room-title{font-family:var(--ex-serif); font-size:19px; margin:4px 0 0; color:var(--ex-ink)}
.room-audio{background:var(--ex-card); border:1px solid var(--ex-line); border-radius:12px; padding:14px 16px; margin-bottom:16px}
.room-audio-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ex-warn); margin-bottom:8px}
.room-audio-label i{margin-right:5px}
.room-audio-el{width:100%}
.room-audio-ui{margin-top:4px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.room-audio-hint{font-size:12.5px; color:var(--ex-warn)}
.room-audio-hint i{margin-right:4px}
.room-audio-playing{font-size:13.5px; font-weight:600; color:var(--ex-ok)}
.room-audio-playing i{margin-right:5px}

.exam-countdown-overlay{position:fixed; inset:0; z-index:10001; background:rgba(20,22,31,.72); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; opacity:1; transition:opacity .3s ease}
.exam-countdown-overlay.is-out{opacity:0; pointer-events:none}
.exam-countdown-num{font-family:var(--ex-serif); font-size:150px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; color:#eef0f7; text-shadow:0 4px 30px rgba(0,0,0,.4); animation:precountpop 1s ease-in-out infinite}
.exam-countdown-txt{margin-top:14px; font-size:16px; color:#c3c8db; letter-spacing:.03em}
.exam-ready-box{width:calc(100% - 32px); max-width:420px; padding:28px 24px; border-radius:16px; background:var(--ex-card); color:var(--ex-ink); box-shadow:0 20px 60px rgba(0,0,0,.35)}
.exam-ready-title{font-family:var(--ex-serif); font-size:26px; font-weight:700; line-height:1.25}
.exam-ready-meta{margin:6px 0 16px; font-size:15px; color:var(--ex-muted)}
.exam-ready-note{margin-bottom:10px; font-size:14px; line-height:1.5; color:var(--ex-ink-soft)}
.exam-ready-note .fa{color:var(--ex-accent); margin-right:4px}
.exam-ready-box .exam-btn{width:100%; margin-top:8px}
@keyframes precountpop{
  0%   { transform:scale(1);    opacity:.85 }
  50%  { transform:scale(1.12); opacity:1   }
  100% { transform:scale(1);    opacity:.85 }
}

.room-passage{background:var(--ex-paper); border:1px solid var(--ex-line); border-left:3px solid var(--ex-accent); border-radius:8px; padding:14px 16px; margin:16px 0 12px; font-size:16px; line-height:1.7}
.room-passage-listening{border-left-color:var(--ex-warn)}
.room-passage-tag{display:inline-block; font-size:11.5px; font-weight:700; color:var(--ex-warn); text-transform:uppercase; margin-right:8px}
.room-passage img{max-width:100%; height:auto}

.room-group{border:1px solid var(--ex-line); border-radius:14px; background:var(--ex-card); padding:4px 18px 16px; margin:24px 0; box-shadow:0 1px 2px rgba(29,37,64,.04)}
.room-group .room-passage{border:none; background:transparent; border-left:3px solid var(--ex-accent); border-radius:0; margin:12px 0 2px; padding:6px 0 6px 14px; box-shadow:none}
.room-group-listening .room-passage{border-left-color:var(--ex-warn)}
.room-group .room-q{border:none; background:transparent; border-radius:0; border-top:1px dashed var(--ex-line); padding:16px 0 4px 12px; margin:8px 0 0; position:relative}
.room-group .room-q:first-of-type{border-top:none}

.room-q{background:var(--ex-card); border:1px solid var(--ex-line); border-radius:12px; padding:16px 18px; margin:16px 0; scroll-margin-top:90px; transition:border-color .15s}
.room-q.is-answered{border-color:var(--ex-accent)}
.room-q-title{font-size:16px; line-height:1.7; color:var(--ex-ink)}
.room-q-title img{max-width:100%; height:auto}
.room-q-no{min-width:26px; height:26px; padding:0 6px; margin-right:9px; border-radius:7px; background:var(--ex-ink); color:#fff; font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle}
.room-opts{margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px 14px}
.room-opts.is-wide{grid-template-columns:1fr}
.room-opt{display:flex; align-items:center; gap:11px; border:1px solid var(--ex-line); border-radius:10px; padding:11px 14px; cursor:pointer; font-size:16px; color:var(--ex-ink-soft); transition:.12s; background:var(--ex-paper)}
.room-opt:hover{border-color:var(--ex-accent)}
.room-opt.is-sel, .examopt.is-selected{border-color:var(--ex-accent); background:var(--ex-accent-soft); color:var(--ex-ink)}
.room-opt-k{flex:none; width:26px; height:26px; border:1.5px solid var(--ex-line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--ex-muted)}
.room-opt.is-sel .room-opt-k, .examopt.is-selected .room-opt-k{background:var(--ex-accent); color:#fff; border-color:var(--ex-accent)}
.room-opt-img{max-width:100%; max-height:150px; width:auto; height:auto; object-fit:contain; border-radius:6px}
.room-essay{width:100%; margin-top:10px; border:1px solid var(--ex-line); border-radius:10px; padding:12px 14px; font-size:16px; font-family:inherit; line-height:1.6; resize:vertical; background:var(--ex-paper); color:var(--ex-ink)}
.room-essay:focus{outline:none; border-color:var(--ex-accent)}

.room-side-sticky{position:sticky; top:8px; display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 88px)}
.room-bar, .room-side-body{display:contents}
.room-timer{order:1} .room-toggle{order:2} .room-palette{order:3} .room-submit-slot{order:4} .room-savechip{order:5} .room-report-slot{order:6; margin-top:10px}
.room-report-slot .exreport-open{width:100%}
.room-toggle{border:0; background:none; padding:0; font:inherit; display:block; width:100%; text-align:center; pointer-events:none}
.room-toggle-ic{display:none}
.room-timer{background:var(--ex-ink); color:#fff; border-radius:12px; padding:14px; text-align:center}
.room-timer.danger{background:var(--ex-danger); animation:roompulse 1s ease-in-out infinite}
@keyframes roompulse{0%,100%{opacity:1}50%{opacity:.82}}
.room-timer small{opacity:.75; font-size:11px; text-transform:uppercase; letter-spacing:.07em}
.room-timer-t{font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.02em; margin-top:2px}
.room-progress{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ex-muted); text-align:center}
.room-palette{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; overflow-y:auto; align-content:start; flex:1 1 auto; min-height:60px; padding-right:2px}
.pnode{aspect-ratio:1; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; border:1px solid var(--ex-line); background:var(--ex-card); color:var(--ex-muted); text-decoration:none; font-variant-numeric:tabular-nums}
.pnode:hover{border-color:var(--ex-accent); color:var(--ex-accent)}
.pnode.done{background:var(--ex-ink); color:#fff; border-color:var(--ex-ink)}
.room-savechip{text-align:center; font-size:12px; color:var(--ex-ok); font-weight:600; min-height:16px; opacity:0; transition:opacity .2s}
.room-savechip.show{opacity:1}

body.in-examroom .contactfab{display:none}

/* ============================================================
   KET QUA (result.php)
   ============================================================ */
.exam-result{max-width:820px}
.kq-head{margin-bottom:16px}
.kq-unit{font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ex-accent); font-weight:700}
.kq-title{font-family:var(--ex-serif); font-size:23px; margin:5px 0 0; color:var(--ex-ink)}
.kq-score{display:flex; flex-wrap:wrap; gap:22px; align-items:center; background:var(--ex-card); border:1px solid var(--ex-line); border-radius:14px; padding:18px 22px; margin-bottom:16px; box-shadow:0 10px 24px rgba(29,37,64,.06)}
.kq-score-main{display:flex; align-items:baseline; gap:8px}
.kq-score-big{font-family:var(--ex-serif); font-size:42px; font-weight:700; color:var(--ex-accent); line-height:1}
.kq-score-num{font-family:var(--ex-serif); font-size:26px; font-weight:700; color:var(--ex-ink); font-variant-numeric:tabular-nums}
.kq-score-lbl{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ex-muted)}
.kq-pending{margin-left:auto; background:var(--ex-warn-soft); color:var(--ex-warn); border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:700}
.kq-meta{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:-4px 0 16px}
.kq-meta-item{display:flex; align-items:flex-start; gap:10px; background:var(--ex-card); border:1px solid var(--ex-line); border-radius:12px; padding:11px 14px; min-width:0}
.kq-meta-item > i{flex:none; color:var(--ex-accent); font-size:16px; margin-top:3px; width:18px; text-align:center}
.kq-meta-lbl{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ex-muted)}
.kq-meta-val{font-size:15px; font-weight:700; color:var(--ex-ink); font-variant-numeric:tabular-nums; margin-top:2px}
.kq-meta-sub{display:block; font-size:12.5px; font-weight:400; color:var(--ex-ink-soft)}
.kq-status{display:inline-block; border-radius:999px; padding:2px 10px; font-size:13px}
.kq-status.is-submitted{background:var(--ex-ok-soft); color:var(--ex-ok)}
.kq-status.is-timeout{background:var(--ex-danger-soft); color:var(--ex-danger)}
.kq-note{font-size:13.5px; color:var(--ex-muted); margin:0 0 16px}
.kq-note i{color:var(--ex-accent); margin-right:5px}
.kq-lock{display:flex; gap:12px; align-items:flex-start; background:var(--ex-warn-soft); border-left:4px solid var(--ex-warn); border-radius:10px; padding:14px 16px; margin:0 0 16px; font-size:14px; line-height:1.6; color:var(--ex-ink-soft)}
.kq-lock > i{color:var(--ex-warn); font-size:18px; margin-top:3px}
.kq-lock-body{flex:1; min-width:0}
.kq-lock-title{font-weight:700; color:var(--ex-ink); margin-bottom:4px}
.kq-lock p{margin:0 0 8px}
.kq-lock b{color:var(--ex-ink)}
.kq-q-skip{float:right; margin:3px 0 6px 8px; font-size:11px; font-weight:700; text-transform:uppercase; color:var(--ex-muted); border:1px solid var(--ex-line); border-radius:999px; padding:1px 9px; white-space:nowrap}
.kq-passage{background:var(--ex-paper); border:1px solid var(--ex-line); border-left:3px solid var(--ex-line); border-radius:8px; padding:12px 15px; margin:16px 0 10px; font-size:14.5px; line-height:1.7}
.kq-passage img{max-width:100%; height:auto}
.kq-passage p{margin-bottom:0}
.kq-q{border:1px solid var(--ex-line); border-radius:12px; padding:15px 17px; margin:11px 0; background:var(--ex-card)}
.kq-q.is-right{background:var(--ex-ok-soft); border-color:transparent}
.kq-q-title{font-size:15px; line-height:1.7; color:var(--ex-ink)}
.kq-q-title img{max-width:100%; height:auto}
.kq-q-no{min-width:26px; height:26px; padding:0 6px; margin-right:9px; border-radius:7px; background:var(--ex-ink); color:#fff; font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle}
.kq-q.is-right .kq-q-no{background:var(--ex-ok)}
.kq-tick{color:var(--ex-ok); float:right; margin-left:10px}
.kq-opts{margin-top:11px; display:flex; flex-direction:column; gap:7px}
.kq-opt{display:flex; align-items:center; gap:10px; border:1px solid var(--ex-line); border-radius:10px; padding:10px 13px; font-size:14.5px; color:var(--ex-ink-soft)}
.kq-opt.correct{border-color:var(--ex-ok); background:var(--ex-ok-soft); color:var(--ex-ink)}
.kq-opt.wrong{border-color:var(--ex-danger); background:var(--ex-danger-soft)}
.kq-opt.wrong .kq-opt-t{text-decoration:line-through; color:var(--ex-danger)}
.kq-opt-k{flex:none; width:24px; height:24px; border:1.5px solid var(--ex-line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--ex-muted)}
.kq-opt.correct .kq-opt-k{background:var(--ex-ok); color:#fff; border-color:var(--ex-ok)}
.kq-opt.wrong .kq-opt-k{background:var(--ex-danger); color:#fff; border-color:var(--ex-danger)}
.kq-opt-img{max-width:100%; max-height:130px; width:auto; height:auto; object-fit:contain; border-radius:6px}
.kq-opt-you{margin-left:auto; font-size:11px; font-weight:700; color:var(--ex-danger); text-transform:uppercase; white-space:nowrap}
.kq-opt.correct .kq-opt-you{color:var(--ex-ok)}
.kq-opt-ok{color:var(--ex-ok)}
.kq-essay{margin-top:11px}
.kq-essay-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ex-muted); margin:8px 0 4px}
.kq-essay-box{border:1px solid var(--ex-line); border-radius:8px; padding:11px 13px; font-size:14.5px; line-height:1.6; background:var(--ex-paper)}
.kq-essay-box.correct{border-color:var(--ex-ok); background:var(--ex-ok-soft)}
.kq-essay-box.kq-essay-sample{border-color:var(--ex-accent); background:var(--ex-accent-soft)}
.kq-essay-pending{margin-top:8px; font-size:13px; color:var(--ex-warn); font-weight:600}
.kq-essay-score{margin-top:9px; display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--ex-ink-soft); background:var(--ex-warn-soft); border-left:4px solid var(--ex-warn); border-radius:8px; padding:10px 14px}
.kq-essay-score i{color:var(--ex-warn); font-size:15px}
.kq-essay-score b{color:var(--ex-ink); font-size:15.5px}
.kq-essay-score-lbl{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.kq-essay-score-val{white-space:nowrap}
.kq-essay-score.is-full{color:var(--ex-ok); background:var(--ex-ok-soft); border-left-color:var(--ex-ok)}
.kq-essay-score.is-full i, .kq-essay-score.is-full b{color:var(--ex-ok)}
.kq-essay-comment{margin-top:10px; display:flex; gap:11px; align-items:flex-start; background:var(--ex-accent-soft); border-left:4px solid var(--ex-accent); border-radius:8px; padding:11px 14px}
.kq-essay-comment i{flex:none; color:var(--ex-accent); font-size:16px; margin-top:2px}
.kq-essay-comment-label{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ex-accent); margin-bottom:3px}
.kq-essay-comment-text{font-size:14px; line-height:1.6; color:var(--ex-ink)}

/* Nút "Giáo viên AI giải đáp" (câu sai, không phải câu ảnh) + khối kết quả —
   xem ExamGrader::explain(), exam-explain.js. */
.kq-explain{margin-top:11px}
.kq-explain-btn{background:var(--ex-accent-soft); border-color:var(--ex-accent); color:var(--ex-accent)}
.kq-explain-btn:hover{background:var(--ex-accent); color:#fff}
.kq-explain-btn i{margin-right:4px}
.kq-explain-btn:disabled{opacity:.6; cursor:default}
.kq-explain-msg{margin-top:6px; font-size:13px; color:var(--ex-danger)}
.kq-explain-result{margin-top:10px; display:flex; gap:11px; align-items:flex-start; background:var(--ex-accent-soft); border-left:4px solid var(--ex-accent); border-radius:8px; padding:11px 14px}
.kq-explain-result i{flex:none; color:var(--ex-accent); font-size:16px; margin-top:2px}
.kq-explain-body{flex:1; min-width:0}
.kq-explain-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:3px}
.kq-explain-label{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ex-accent)}
.kq-explain-text{font-size:14px; line-height:1.6; color:var(--ex-ink); white-space:pre-line}
.kq-explain-audio{flex:none; font-size:12px; color:var(--ex-accent); display:flex; align-items:center; gap:4px; white-space:nowrap}
.kq-explain-audio-loading{opacity:.85}
.kq-explain-replay{background:none; border:none; padding:0; margin:0; font:inherit; font-size:12px; color:var(--ex-accent); cursor:pointer; display:flex; align-items:center; gap:4px}
.kq-explain-replay:hover{text-decoration:underline}

/* Điểm chấm + nhận xét đặt TRÊN câu hỏi (thay vì dưới bài làm) — mobile xếp
   chồng như cũ, desktop chia cột 20% (điểm) / 80% (nhận xét). */
.kq-essay-feedback{margin-bottom:12px}
.kq-essay-feedback .kq-essay-pending, .kq-essay-feedback .kq-essay-score, .kq-essay-feedback .kq-essay-comment{margin-top:0}
.kq-essay-feedback .kq-essay-comment{margin-top:10px}
@media (min-width:768px){
    .kq-essay-feedback{display:flex; align-items:stretch; gap:14px}
    .kq-essay-feedback .kq-essay-score{flex:0 0 20%; max-width:20%; flex-direction:column; justify-content:center; text-align:center; gap:4px}
    .kq-essay-feedback .kq-essay-comment{flex:1 1 80%; margin-top:0}
}
.kq-actions{display:flex; gap:12px; justify-content:center; margin:24px 0 10px; flex-wrap:wrap}
.kq-ai-bar{display:flex; align-items:flex-start; gap:12px; background:var(--ex-ink); color:#fff; border-radius:12px; padding:14px 18px; margin-bottom:16px; box-shadow:0 10px 24px rgba(29,37,64,.22)}
.kq-ai-bar i{flex:none; font-size:18px; color:var(--ex-accent); margin-top:2px}

/* Nhận xét tự động (theo %điểm/%số câu/%thời gian) — một dòng gợi ý, không
   phải cảnh báo nên dùng tông accent thay vì warn/danger. */
.kq-feedback{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.6; color:var(--ex-ink-soft); background:var(--ex-accent-soft); border-left:4px solid var(--ex-accent); border-radius:8px; padding:11px 14px; margin:0 0 16px}
.kq-feedback i{flex:none; color:var(--ex-accent); font-size:15px; margin-top:1px}

/* Khối "chúc mừng" — hiện thẳng trên trang (không phải modal) mỗi khi đạt
   ngưỡng exam.congrats_threshold_percent, xem ExamController::result()/
   result.php ($qualifies). Pháo hoa (.kq-confetti bên dưới) nổ kèm. */
.kq-congrats-static{display:flex; align-items:center; gap:10px; justify-content:center; font-family:var(--ex-serif); font-size:16px; font-weight:700; color:var(--ex-ok); background:var(--ex-ok-soft); border:1px solid var(--ex-ok); border-radius:12px; padding:14px 18px; margin-bottom:16px}

/* Pháo hoa nổ TOÀN TRANG (fixed, phủ viewport) khi đạt ngưỡng chúc mừng —
   z-index cao hơn cả backdrop modal Bootstrap (1050) để vẫn thấy được lúc
   có modal đang mở. Xem exam-result.js. */
.kq-confetti{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:1200}
.kq-confetti span{position:absolute; top:-12px; width:8px; height:14px; opacity:.85; border-radius:2px; animation:kqConfettiFall linear forwards}
@keyframes kqConfettiFall{ to{ transform:translateY(100vh) rotate(360deg); opacity:0; } }

/* ---------- Con đường du học (kq-consult) ----------
   Modal mời tư vấn, bật ngay khi vào trang kết quả — xem web/exams/_consult.php
   + exam-consult.js. Giữ nguyên tông nền tối gradient + icon máy bay của khối
   cũ (trước nằm giữa trang, lấn mất khung cảnh báo nên chuyển thành modal).
   Mobile: nút X 44px + nút "Để sau" dễ bấm, modal-dialog-scrollable cho nội
   dung dài tự cuộn bên trong, ô nhập 16px để iOS không tự phóng to. */
/* Vệt sáng góc phải vẽ thẳng vào background (KHÔNG dùng ::after tràn ra ngoài). */
.kq-consult-modal .modal-dialog{max-width:480px}
.kq-consult{position:relative; color:#fff; border:0; border-radius:18px; box-shadow:0 20px 50px rgba(45,27,11,.45);
  background:radial-gradient(circle at 100% 0, rgba(255,214,170,.24), transparent 170px),
    linear-gradient(130deg, #2d1b0b 0%, #5a3115 55%, #b4581c 100%)}
.kq-consult-body{padding:32px 28px 14px; text-align:center}
.kq-consult-close{position:absolute; top:8px; right:8px; z-index:2; width:44px; height:44px; border:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; background:rgba(255,255,255,.12); cursor:pointer; transition:background .15s}
.kq-consult-close:hover{background:rgba(255,255,255,.24)}
.kq-consult-icon{width:84px; height:84px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:38px; color:#fff; background:var(--ex-accent); box-shadow:0 0 0 8px rgba(217,119,44,.25), 0 10px 24px rgba(0,0,0,.25);
  animation:kqConsultFloat 3.2s ease-in-out infinite}
@keyframes kqConsultFloat{ 50%{ transform:translateY(-6px); } }
@media (prefers-reduced-motion:reduce){ .kq-consult-icon{animation:none} }
.kq-consult-kicker{font-size:13px; font-weight:700; color:#ffc89a; margin-bottom:4px}
.kq-consult-title{font-family:var(--ex-serif); font-size:21px; font-weight:700; line-height:1.3; color:#fff; margin:0 0 8px}
.kq-consult-text{font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.86); margin:0 0 18px}
.kq-consult-act{display:flex; flex-direction:column; align-items:center; gap:8px}
.kq-consult .kq-consult-btn,.kq-consult #kqConsultSend{background:#fff; color:var(--ex-accent-hover); font-size:15px; padding:12px 22px; box-shadow:0 8px 20px rgba(0,0,0,.25)}
.kq-consult .kq-consult-btn:hover,.kq-consult #kqConsultSend:hover{background:#fff4ea; color:var(--ex-accent-hover)}
.kq-consult-sub{font-size:12.5px; color:rgba(255,255,255,.72); margin-top:6px}
.kq-consult-sub b{color:#fff}
.kq-consult-act .kq-consult-sub{margin-top:0}
.kq-consult-link{border:0; background:none; padding:0; color:#ffc89a; font-weight:700; text-decoration:underline; cursor:pointer; font-size:inherit}
.kq-consult-form{text-align:left}
.kq-consult-lb{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#ffc89a; margin:0 0 7px}
.kq-consult-row{display:flex; gap:10px}
.kq-consult-input{flex:1; min-width:0; border:1.5px solid transparent; border-radius:10px; padding:10px 12px; font-size:16px; background:#fff; color:var(--ex-ink); outline:none; transition:border-color .15s}
.kq-consult-input:focus{border-color:#ffc89a}
.kq-consult-msg{font-size:13px; margin-top:8px}
.kq-consult-msg:empty{display:none}
.kq-consult-msg.err{color:#ffb4a8}
.kq-consult-done{display:flex; flex-direction:column; align-items:center; gap:12px}
.kq-consult-ok{display:flex; align-items:flex-start; gap:8px; font-weight:700; color:#9be8c0; font-size:14.5px; line-height:1.55; text-align:left}
.kq-consult-ok i{margin-top:3px}
.kq-consult .kq-consult-zalo{background:transparent; border-color:rgba(255,255,255,.55); color:#fff}
.kq-consult .kq-consult-zalo:hover{border-color:#fff; background:rgba(255,255,255,.1); color:#fff}
.kq-consult-later{display:block; min-height:44px; margin:10px auto 0; padding:10px 18px; border:0; background:none; color:rgba(255,255,255,.7); font-size:14px; cursor:pointer}
.kq-consult-later:hover{color:#fff; text-decoration:underline}
@media (max-width:575.98px){
  .kq-consult-modal{--bs-modal-margin:.75rem}
  .kq-consult-body{padding:28px 18px 10px}
  .kq-consult-icon{width:64px; height:64px; font-size:28px; margin-bottom:12px}
  .kq-consult-title{font-size:19px}
  .kq-consult-text{font-size:14px}
  .kq-consult-btn,.kq-consult-zalo{width:100%}
}

/* ---------- Báo lỗi bài thi (exreport) — dùng chung phòng thi + kết quả,
   xem web/exams/_report.php + exam-report.js. Modal Bootstrap; nút mở KHÔNG
   phải modal nên style riêng, nhỏ + ghost. ---------- */
.exreport-open{flex:none}
.exreport-modal .modal-dialog{max-width:440px}
.exreport-box{border-radius:14px; box-shadow:0 20px 50px rgba(29,37,64,.25); border:1px solid var(--ex-line); overflow:hidden}
.exreport-head{display:flex; align-items:center; gap:9px; font-family:var(--ex-serif); font-size:17px; font-weight:700; color:var(--ex-ink); background:var(--ex-paper); border-bottom:1px solid var(--ex-line); padding:16px 44px 16px 20px; position:relative}
.exreport-head i{color:var(--ex-accent)}
.exreport-close{position:absolute; right:12px; top:12px}
.exreport-body{padding:18px 20px 4px}
.exreport-exam{font-size:13px; color:var(--ex-ink-soft); margin-bottom:14px; display:flex; align-items:center; gap:7px}
.exreport-exam i{color:var(--ex-accent)}
.exreport-lb{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ex-ink-soft); margin:16px 0 7px}
.exreport-lb:first-of-type{margin-top:0}
/* Cung khuon field cua kq-congrats-form: vien mong + nen trang -> nhin la
   biet ngay day la o nhap, khong lan vao chu thuong quanh no. */
.exreport-kind,.exreport-text{width:100%; border:1.5px solid var(--ex-line); border-radius:10px; padding:10px 12px;
  font:inherit; font-size:14.5px; color:var(--ex-ink); background:#fff;
  transition:border-color .15s, box-shadow .15s}
.exreport-kind{appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; margin-bottom:2px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237b7a70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:36px}
.exreport-text{resize:vertical; min-height:88px; margin-bottom:2px}
.exreport-kind:hover,.exreport-text:hover{border-color:var(--ex-accent)}
.exreport-kind:focus,.exreport-text:focus{outline:none; border-color:var(--ex-accent); box-shadow:0 0 0 3px var(--ex-accent-soft)}
.exreport-text::placeholder{color:var(--ex-muted)}
.exreport-msg:empty{display:none}
.exreport-msg.ok{color:#166534; background:#e7f6ec; font-size:13px; font-weight:600; border-radius:8px; padding:8px 12px; margin:8px 0 0}
.exreport-msg.err{color:#b91c1c; background:#fde8e8; font-size:13px; font-weight:600; border-radius:8px; padding:8px 12px; margin:8px 0 0}
.exreport-foot{display:flex; justify-content:center; padding:14px 20px 18px}
.exreport-foot .exam-btn{min-width:180px}

/* ============================================================
   BAI THI CUA TOI (history.php)
   ============================================================ */
.exam-history{max-width:900px}
.hist-head{margin-bottom:18px}
.hist-title{display:flex; align-items:center; gap:12px; font-family:var(--ex-serif); font-size:26px; margin:0 0 6px; color:var(--ex-ink)}
.hist-title-ic{flex:none; width:38px; height:38px; border-radius:10px; background:var(--ex-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px}
.hist-sub{margin:0; color:var(--ex-ink-soft); font-size:14.5px}

.hist-inprog{background:var(--ex-accent-soft); border:1px solid var(--ex-accent); border-radius:14px; padding:18px 20px; margin-bottom:26px}
.hist-inprog-lbl{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ex-accent-hover); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px}
.hist-inprog-note{margin:0 0 14px; font-size:13.5px; color:var(--ex-ink-soft)}
.hist-inprog-card{background:var(--ex-card); border:1px solid var(--ex-line); border-radius:12px; padding:16px 18px}
.hist-inprog-grp{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ex-accent); background:var(--ex-accent-soft); border-radius:6px; padding:3px 9px; margin-bottom:8px}
.hist-inprog-name{font-family:var(--ex-serif); font-size:18px; margin:0 0 6px; color:var(--ex-ink)}
.hist-inprog-meta{font-size:13.5px; color:var(--ex-muted); margin:0 0 14px}
.hist-inprog-actions{display:flex; flex-wrap:wrap; gap:10px}

.hist-streak{display:flex; align-items:center; gap:14px; background:var(--ex-accent-soft); border:1px solid var(--ex-accent); border-radius:14px; padding:14px 18px; margin-bottom:22px}
.hist-streak.is-warn{background:var(--ex-warn-soft); border-color:var(--ex-warn)}
.hist-streak-ic{flex:none; width:40px; height:40px; border-radius:50%; background:var(--ex-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px}
.hist-streak.is-warn .hist-streak-ic{background:var(--ex-warn)}
.hist-streak-body{flex:1 1 auto; min-width:0}
.hist-streak-num{font-family:var(--ex-serif); font-size:18px; font-weight:700; color:var(--ex-ink)}
.hist-streak-note{margin:2px 0 0; font-size:13px; color:var(--ex-ink-soft)}
.hist-streak-cta{flex:none}
@media (max-width:560px){.hist-streak{flex-wrap:wrap}.hist-streak-cta{width:100%; justify-content:center}}

.hist-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px}
.hist-stat{background:var(--ex-card); border:1px solid var(--ex-line); border-radius:12px; padding:16px 10px; text-align:center}
.hist-stat-num{font-family:var(--ex-serif); font-size:26px; font-weight:700; color:var(--ex-ink); line-height:1.1}
.hist-stat-num.is-up{color:var(--ex-ok)}
.hist-stat-num.is-down{color:var(--ex-danger)}
.hist-stat-lbl{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ex-muted); margin-top:4px}

.hist-chart-box{background:var(--ex-card); border:1px solid var(--ex-line); border-radius:14px; padding:18px 20px 10px; margin-bottom:26px}
.hist-chart-h2{font-family:var(--ex-serif); font-size:17px; margin:0 0 12px; color:var(--ex-ink)}
.hist-chart-box svg{display:block; width:100%; height:auto; overflow:visible}
.hist-chart-empty{color:var(--ex-muted); font-size:13.5px; text-align:center; padding:26px 10px}

.hist-list-h2{font-family:var(--ex-serif); font-size:17px; margin:0 0 12px; color:var(--ex-ink)}

.hist-table-wrap{overflow-x:auto; background:var(--ex-card); border:1px solid var(--ex-line); border-radius:14px}
.hist-table{width:100%; border-collapse:collapse; font-size:14px}
.hist-table thead th{text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ex-muted); padding:14px 16px; border-bottom:1px solid var(--ex-line); white-space:nowrap}
.hist-table tbody td{padding:14px 16px; border-bottom:1px solid var(--ex-line); vertical-align:middle}
.hist-table tbody tr:last-child td{border-bottom:none}
.hist-table tbody tr:hover{background:var(--ex-accent-soft)}
.hist-t-cell{display:flex; flex-direction:column; gap:2px; min-width:170px}
.hist-t-grp{font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ex-accent)}
.hist-t-name{font-weight:700; color:var(--ex-ink); text-decoration:none}
.hist-t-name:hover{color:var(--ex-accent); text-decoration:underline}
.hist-t-score{font-weight:700; white-space:nowrap}
.hist-t-score.is-ok{color:var(--ex-ok)}
.hist-t-score.is-warn{color:var(--ex-warn)}
.hist-t-score.is-low{color:var(--ex-danger)}
.hist-t-status{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; border-radius:999px; padding:2px 8px; margin-left:8px; white-space:nowrap}
.hist-t-status.is-pending{color:var(--ex-warn); background:var(--ex-warn-soft)}
.hist-t-status.is-graded{color:var(--ex-ok); background:var(--ex-ok-soft)}
.hist-t-action{text-align:right; white-space:nowrap}
.hist-empty{background:var(--ex-card); border:1px solid var(--ex-line); border-radius:12px; padding:30px; text-align:center; color:var(--ex-muted)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:991px){
  .exam-grid{grid-template-columns:repeat(2,1fr)}
  .paper{padding:28px 26px}
  .room-grid{grid-template-columns:1fr}
  .room-side{order:-1; position:sticky; top:0; z-index:20}
  .room-side-sticky{position:relative; display:block; max-height:none; background:var(--ex-paper); padding:6px 0; border-bottom:1px solid var(--ex-line)}
  .room-bar{display:flex; align-items:center; gap:8px}
  .room-timer{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:8px 11px; border-radius:10px}
  .room-timer small{display:none}
  .room-timer-t{font-size:19px; margin:0}
  .room-toggle{flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:7px;
    width:auto; pointer-events:auto; cursor:pointer; padding:9px 6px; border:1px solid var(--ex-line);
    border-radius:10px; background:var(--ex-card)}
  .room-toggle-ic{display:inline-block; font-size:11px; color:var(--ex-muted); transition:transform .18s}
  .room-side-sticky.is-open .room-toggle-ic{transform:rotate(180deg)}
  .room-side-sticky.is-open .room-toggle{border-color:var(--ex-accent); color:var(--ex-accent)}
  .room-submit-slot{flex:0 0 auto; width:auto}
  .room-submit-slot .exam-btn{width:auto; padding:10px 14px}
  .room-side-body{display:none}
  .room-side-sticky.is-open .room-side-body{display:block; max-height:50vh; overflow-y:auto; padding:10px 2px 4px}
  .room-palette{grid-template-columns:repeat(10,1fr); overflow:visible; flex:none; max-height:none}
  .room-savechip{position:absolute; right:2px; top:100%; z-index:2; margin-top:3px; font-size:11px;
    background:var(--ex-paper); padding:1px 8px; border-radius:999px}
  .room-audio{position:static}
}
@media (max-width:767px){
  .exam-h1{font-size:25px}
  .exam-grid{grid-template-columns:1fr}
  .paper{padding:22px 18px}
  .paper-title{font-size:20px}
  .paper-ans{grid-template-columns:1fr}
  .room-opts{grid-template-columns:1fr}
  .kq-score{gap:16px; padding:16px}
  .kq-score-big{font-size:34px}
  .kq-meta{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .kq-meta-item:nth-child(2){grid-column:1/-1; order:3}
  .kq-meta-item{padding:10px 12px; align-items:center}
  .kq-meta-item > i{margin-top:0}
  .room-palette{grid-template-columns:repeat(8,1fr)}
  .hist-stats{grid-template-columns:repeat(2,1fr)}
  .exam-tabs{flex-wrap:wrap; overflow-x:visible; gap:6px}
  .exam-tab{padding:6px 12px; font-size:12.5px}
}
@media (max-width:576px){
  .hist-table thead{display:none}
  .hist-table, .hist-table tbody, .hist-table tr, .hist-table td{display:block; width:100%}
  .hist-table tr{padding:12px 16px; border-bottom:1px solid var(--ex-line)}
  .hist-table tbody tr:last-child{border-bottom:none}
  .hist-table td{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:none; text-align:right}
  .hist-table td[data-label]:not([data-label=""])::before{content:attr(data-label); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ex-muted); text-align:left}
  .hist-t-cell{align-items:flex-end; text-align:right}
  .hist-t-action{justify-content:flex-end; padding-top:10px !important}
}
@media (max-width:479px){
  .paper{padding:18px 14px; background-image:none}
  .exam-btn-lg, .btn-examstart{width:100%}
  .room-palette{grid-template-columns:repeat(7,1fr)}
  .kq-actions .exam-btn{flex:1}
}