/**
 * Giao diện bản web — bám theo app điện thoại.
 *
 * Mọi màu lấy nguyên từ `app/src/main/res/values/colors.xml`, không tự chọn lại: bản web và
 * app là hai mặt của cùng một sản phẩm, lệch tông là người dùng thấy ngay như hai phần mềm
 * khác nhau. Tên biến giữ đúng tên bên Android để còn đối chiếu được.
 */

:root {
  --app-background: #F4F6F8;
  --app-surface: #FFFFFF;
  --app-surface-subtle: #ECF1F5;
  --app-text-primary: #2D333A;
  --app-text-secondary: #98A2AB;
  --app-text-muted: #B7BFC7;
  --app-border: #D7DEE4;
  --app-divider: #E2E7EC;
  --app-accent: #0E8A5F;
  --app-accent-dark: #0B7350;
  --app-danger: #FF5E63;
  --app-warn: #E9A13B;

  /* Thẻ gradient của dashboard — app_card_green_*/
  app_card_blue_* */ --card-green-start: #62DA92;
  --card-green-end: #3BCB8D;
  --card-blue-start: #6AB7F7;
  --card-blue-end: #4F9EEB;

  /* Chip trạng thái — scanned_answer_results_* */
  --chip-ok-bg: #EAFBF4;
  --chip-ok-stroke: #43C99A;
  --chip-ok-text: #24B47E;

  --radius-card: 16px;
  --radius-field: 8px;
  --shadow-card: 0 2px 10px rgba(45, 51, 58, .08);
  --shadow-raised: 0 6px 18px rgba(45, 51, 58, .12);

  /* ── Design System dùng chung (--ds-*) ──────────────────────────────────────
     Component mới chỉ đọc các biến này, không ghi mã màu/khoảng cách trực tiếp. Màu chính
     là xanh dương của khung MSchool v3 (thanh đầu trang, breadcrumb) — chữ trắng trên nó
     đạt tương phản 5:1, còn trên xanh lá --app-accent chỉ ~2:1. Xanh lá giữ cho nghĩa
     "hoàn tất", vàng "đang chờ / cần xử lý", đỏ chỉ dùng cho lỗi và thao tác phá huỷ. */
  --ds-primary: #0E8A5F;
  --ds-primary-hover: #0B7350;
  --ds-primary-soft: #E8F6EF;
  --ds-primary-border: #B7E4CD;

  --ds-surface: #FFFFFF;
  --ds-surface-muted: #F8FAFC;
  --ds-border: #E2E8F0;
  --ds-border-strong: #CBD5E1;
  --ds-text: #1E293B;
  --ds-text-secondary: #64748B;   /* 4.7:1 trên nền trắng — --app-text-secondary chỉ 2.6:1 */

  --ds-success: #15803D;
  --ds-success-soft: #F0FDF4;
  --ds-success-border: #BBF7D0;
  --ds-warning: #B45309;
  --ds-warning-soft: #FFFBEB;
  --ds-warning-border: #FDE68A;
  --ds-danger: #DC2626;
  --ds-danger-hover: #B91C1C;
  --ds-danger-soft: #FEF2F2;
  --ds-danger-border: #FECACA;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;

  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-pill: 999px;

  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --ds-shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --ds-shadow-pop: 0 12px 32px rgba(15, 23, 42, .16);
  --ds-focus-ring: 0 0 0 3px rgba(14, 138, 95, .35);

  --ds-control-h: 38px;
  --ds-content-max: 1400px;
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* Khóa cuộn trang nền khi mở bất kỳ hộp thoại nào (tránh lag / giật do cuộn xuyên màn hình chính) */
html:has(dialog[open]),
body:has(dialog[open]),
html.modal-open,
body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Thuộc tính `hidden` phải LUÔN thắng.
   Quy tắc của trình duyệt là `[hidden] { display: none }` — độ ưu tiên bằng 0, nên bất kỳ
   lớp nào khai `display` cũng vô hiệu hoá nó, và JS đặt `el.x.hidden = true` thành ra không
   làm gì cả. Đã có ba chỗ dính: `.tray`, `.cap-fly`, `.stage-banner` đều phải tự thêm
   `[hidden] { display: none }`, còn `.pending-bar` thì quên — nên dòng vàng "N bài đã quét
   nhưng CHƯA LƯU" nằm lại trên màn kỳ thi sau khi đã lưu, và `.fs-icon` làm nút đèn hiện cả
   trên máy không có đèn. Chốt một lần ở đây thay vì nhớ thêm từng chỗ. */
[hidden] {
  display: none !important;
}

/* Ẩn ô chọn file nhưng vẫn giữ trong DOM layout để gọi .click() đáng tin cậy trên mọi trình duyệt máy tính */
.visually-hidden-file-input {
  position: fixed !important;
  top: -10000px !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
}

body {
  margin: 0;
  background: var(--app-background);
  color: var(--app-text-primary);
  font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif;
  /* Header dính trên + footer dính dưới, nội dung ở giữa cuộn — đúng khung của app. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  margin: 0;
}

/* ── Khung ngoài: header · nội dung · footer ─────────────────────────────── */

/* ── Khung ngoài: header · nội dung · footer — Chuẩn MSchool v3 ──────────── */

.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  padding: 0 16px;
  background: var(--ds-primary-soft);
  border-bottom: 1px solid var(--ds-primary-border);
  position: sticky;
  top: 0;
  z-index: 20;
  box-sizing: border-box;
}

.appbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.appbar .hamburger-btn {
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #001d36;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.appbar .hamburger-btn:hover {
  background: rgba(0, 29, 54, 0.08);
}

/* Ẩn nút hamburger menu khi ở trang đăng nhập */
.view-login #btnHamburger,
body.view-login .hamburger-btn,
body.view-login .appbar .hamburger-btn {
  display: none !important;
}

.header-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #495057;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.header-breadcrumbs .bc-link {
  color: #495057;
  cursor: pointer;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.header-breadcrumbs .bc-link:hover {
  color: var(--ds-primary-hover);
  text-decoration: underline;
}

.header-breadcrumbs .bc-sep {
  color: #8c8c8c;
  font-size: 14px;
  margin: 0 1px;
}

.header-breadcrumbs .bc-sub {
  color: #495057;
}

.header-breadcrumbs .bc-curr {
  font-weight: 700;
  font-size: 15px;
  color: var(--ds-primary-hover);
  letter-spacing: -0.2px;
}

.btn-guide-pill {
  background: var(--ds-primary-hover);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 4px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(14, 138, 95, 0.25);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.btn-guide-pill:hover {
  background: var(--ds-primary-hover);
  box-shadow: 0 2px 6px rgba(14, 138, 95, 0.35);
}

.btn-guide-pill .guide-icon {
  font-size: 10px;
}

.appbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.header-icon-btn {
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #001d36;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.header-icon-btn:hover {
  background: rgba(0, 29, 54, 0.08);
}

.header-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
  user-select: none;
}

.header-user-name {
  font-weight: 700;
  font-size: 13.5px;
  color: #1f2937;
  white-space: nowrap;
}

.header-user-role {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}

.user-avatar-btn {
  background: #ffffff;
  border: 1.5px solid #d0d7de;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  padding: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.user-avatar-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border-color: var(--ds-primary-hover);
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .header-user-meta {
    display: none !important;
  }

  .header-breadcrumbs {
    gap: 4px;
    font-size: 13.5px;
    max-width: calc(100vw - 110px);
    overflow: hidden;
  }

  .header-breadcrumbs .bc-link {
    font-size: 13.5px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .header-breadcrumbs .bc-sep {
    font-size: 13.5px;
    margin: 0 1px;
    flex-shrink: 0;
  }

  .header-breadcrumbs .bc-curr {
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .btn-guide-pill {
    padding: 4px 10px;
    font-size: 11.5px;
  }
}

/* Chip tài khoản — bg_user_chip của app */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--app-surface-subtle);
  border: 1px solid var(--app-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--app-text-primary);
  cursor: pointer;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
}

.user-chip:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

@media (max-width: 520px) {
  .appbar {
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
    gap: 8px;
  }
  .appbar .logo {
    width: 28px;
    height: 28px;
  }
  .appbar .app-name {
    font-size: 17px;
  }
  .user-chip {
    padding: 5px 9px;
    font-size: 12px;
    max-width: 130px;
  }
}

@media (max-width: 360px) {
  .appbar .app-name {
    font-size: 15px;
  }
  .user-chip {
    max-width: 100px;
    padding: 4px 8px;
    font-size: 11.5px;
  }
}

.appmain {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.appfooter {
  background: var(--app-surface);
  box-shadow: 0 -2px 6px rgba(45, 51, 58, .06);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 11px;
  color: var(--app-text-primary);
}

.appfooter div+div {
  margin-top: 2px;
}

/* Mỗi màn hình là một section; router chỉ bật một cái. */
.screen {
  display: none;
  padding: 16px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.screen.on {
  display: block;
}

.screen.wide {
  max-width: 1400px;
}

@media (max-width: 600px) {
  .screen {
    padding: 12px 10px;
  }
}

@media (max-width: 360px) {
  .screen {
    padding: 10px 8px;
  }
}

/* ── Tiêu đề trang + hàng hành động ──────────────────────────────────────── */

.page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}

.page-head h1 {
  flex: 1;
  min-width: 200px;
  font-size: 22px;
  font-weight: 700;
  word-break: break-word;
}

.page-head .sub {
  color: var(--app-text-secondary);
  font-size: 13px;
}

@media (max-width: 600px) {
  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 4px 0 12px;
  }
  .page-head h1 {
    font-size: 19px;
    min-width: 0;
    width: 100%;
  }
  .page-head .menu {
    flex: 1;
    display: flex;
    width: 100%;
  }
  .page-head .menu-btn {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    font-size: 13.5px;
  }
  .page-head .menu-pop {
    width: 100%;
    left: 0;
    right: 0;
    min-width: 0;
  }
}

.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.review-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  min-width: 0;
}

.head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .review-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .review-head h1 {
    font-size: 19px;
    width: 100%;
  }
  .head-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .head-actions button {
    padding: 8px 8px;
    font-size: 13px;
    text-align: center;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #reviewSave {
    grid-column: 1 / -1;
    min-height: 42px;
    font-size: 14px;
    font-weight: 700;
  }
}

.card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}

.card-head-row h2 {
  flex-shrink: 0;
  font-size: 16px;
  margin: 0;
}

.card-head-row .search {
  flex: 1;
  max-width: 240px;
  min-width: 140px;
  margin-left: auto;
}

.card-sub-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.card-sub-actions .btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 520px) {
  .card-head-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .card-head-row h2 {
    width: 100%;
  }
  .card-head-row .search {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
  }
  .card-sub-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .card-sub-actions .btn-group {
    width: 100%;
    margin-left: 0;
  }
  .card-sub-actions .btn-group button {
    flex: 1;
    min-height: 40px;
    text-align: center;
    justify-content: center;
  }
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--app-accent-dark);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.crumb:hover {
  text-decoration: underline;
}

/* ── Nút ─────────────────────────────────────────────────────────────────── */

button,
select,
input[type=text],
input[type=number],
textarea {
  font: inherit;
  color: var(--app-text-primary);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-field);
  padding: 9px 12px;
}

button {
  cursor: pointer;
}

button:hover {
  border-color: var(--ds-border-strong);
}

/* Viền tiêu điểm thống nhất — chỉ hiện khi dùng bàn phím, bấm chuột không loé viền. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

/* Nút chính: màu chính của Design System. */
.btn-primary {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--ds-radius-sm);
  padding: 9px 16px;
}

.btn-primary:hover {
  background: var(--ds-primary-hover);
  border-color: var(--ds-primary-hover);
}

/* Nút phụ: nền trắng viền mảnh — đi cạnh nút chính mà không tranh chú ý. */
.btn-secondary {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  font-weight: 500;
  border-radius: var(--ds-radius-sm);
  padding: 9px 16px;
}

.btn-secondary:hover {
  background: var(--ds-surface-muted);
  border-color: var(--ds-border-strong);
}

/* Nút bị khoá (vd "Tạo đáp án mẫu" của kỳ thi lấy đáp án từ mschool) — lý do nằm ở title. */
.btn-secondary:disabled,
.seg button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Nút xác nhận thao tác phá huỷ (xoá) — chỉ dùng trong hộp xác nhận. */
.btn-danger-solid {
  background: var(--ds-danger);
  border: 1px solid var(--ds-danger);
  color: #fff;
  font-weight: 600;
  border-radius: var(--ds-radius-sm);
  padding: 9px 16px;
}

.btn-danger-solid:hover {
  background: var(--ds-danger-hover);
  border-color: var(--ds-danger-hover);
}

/* Nút chỉ có icon (⋯, đóng…) — luôn kèm aria-label ở markup. */
.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}

.btn-icon:hover,
.btn-icon[aria-expanded="true"] {
  background: var(--ds-surface-muted);
  border-color: var(--ds-border);
  color: var(--ds-text);
}

/* Nút trông như liên kết — thao tác thứ cấp trong thẻ. */
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ds-primary);
  font-weight: 600;
  font-size: 13px;
}

.link-btn:hover {
  color: var(--ds-primary-hover);
  text-decoration: underline;
}

/* Nút có icon: icon và chữ cùng một hàng, căn giữa theo chiều dọc. hydrateIcons giữ lại
   <span> bọc SVG — span/SVG nội dòng thì ngồi trên đường chân chữ, trông chữ lệch xuống dưới. */
:is(.btn-primary, .btn-secondary, .btn-pill, .btn-ghost, .btn-danger, .btn-danger-solid):has(.ico-svg) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
}

/* :where() — độ ưu tiên 0: khung icon có lớp riêng (.tpl-card__icon…) tự căn giữa, không bị ghi đè. */
:where(button span:has(> .ico-svg:only-child)) {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Icon nằm giữa dòng chữ ở mọi chỗ khác (nút loại khác, nhãn, ô bảng). */
.ico-svg {
  vertical-align: middle;
  flex-shrink: 0;
}

/* Nhãn trạng thái: xanh lá = hoàn tất, vàng = cần xử lý, đỏ = lỗi, xám = trung tính. */
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-muted);
  color: var(--ds-text-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge--ok {
  background: var(--ds-success-soft);
  border-color: var(--ds-success-border);
  color: var(--ds-success);
}

.badge--warn {
  background: var(--ds-warning-soft);
  border-color: var(--ds-warning-border);
  color: var(--ds-warning);
}

.badge--danger {
  background: var(--ds-danger-soft);
  border-color: var(--ds-danger-border);
  color: var(--ds-danger);
}

.btn-primary:disabled {
  background: var(--app-text-muted);
  border-color: var(--app-text-muted);
  cursor: not-allowed;
}

/* Nút pill nhạt — "Mẫu phiếu & Đáp án" trong activity_exam_session_list. */
.btn-pill {
  background: var(--chip-ok-bg);
  border: 1px solid var(--chip-ok-stroke);
  color: var(--app-accent-dark);
  font-weight: 700;
  font-size: 13px;
  border-radius: 18px;
  padding: 8px 14px;
}

.btn-pill:hover {
  background: #DFF7EC;
}

.btn-danger {
  color: var(--app-danger);
  border-color: var(--app-border);
}

.btn-danger:hover {
  border-color: var(--app-danger);
  background: #FFF2F2;
}

.btn-ghost {
  background: none;
  border-color: transparent;
  color: var(--app-text-secondary);
}

.btn-ghost:hover {
  background: var(--app-surface-subtle);
  border-color: transparent;
}

.icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: 50%;
  color: var(--app-danger);
  font-size: 17px;
  line-height: 1;
}

.icon-btn:hover {
  background: #FFF2F2;
}

/* FAB tạo mới — FloatingActionButton, luôn ở góc phải dưới của màn hình. */
.fab {
  position: fixed;
  right: 24px;
  bottom: 84px;
  z-index: 15;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--app-accent);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  box-shadow: var(--shadow-raised);
  display: grid;
  place-items: center;
}

.fab:hover {
  background: var(--app-accent-dark);
}

/* ── Thẻ ─────────────────────────────────────────────────────────────────── */

.card {
  background: var(--app-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin-bottom: 12px;
}

.card:last-child {
  margin-bottom: 0;
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--app-text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}

.chip {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--radius-field);
  background: var(--app-surface-subtle);
  border: 1px solid var(--app-border);
  font-size: 13px;
  font-weight: 700;
}

.chip-ok {
  background: var(--chip-ok-bg);
  border-color: var(--chip-ok-stroke);
  color: var(--chip-ok-text);
}

.chip-warn {
  background: #FFF6E8;
  border-color: #F0C177;
  color: #B87716;
}

.muted {
  color: var(--app-text-secondary);
  font-size: 13px;
}

.hint {
  color: var(--app-text-secondary);
  font-size: 12px;
  margin: 4px 0 8px;
}

code {
  background: var(--app-surface-subtle);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

.empty-state {
  text-align: center;
  color: var(--app-text-secondary);
  padding: 40px 20px;
  font-size: 15px;
  white-space: pre-line;
}

/* Bản có icon + tiêu đề + nút hành động (trang Quản lý kỳ thi). */
.empty-state:has(.empty-state__title) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-6) var(--ds-space-4);
  background: var(--ds-surface);
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  white-space: normal;
}

.empty-state__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--ds-radius-pill);
  display: grid;
  place-items: center;
  background: var(--ds-surface-muted);
  color: var(--ds-text-secondary);
}

.empty-state__title {
  margin: var(--ds-space-1) 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-text);
}

.empty-state__text {
  margin: 0 0 var(--ds-space-2);
  max-width: 420px;
  font-size: 14px;
  color: var(--ds-text-secondary);
}

.empty-state button {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
}

/* ── Tiêu đề trang (PageHeader) ──────────────────────────────────────────── */

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
  padding-bottom: var(--ds-space-4);
  margin: var(--ds-space-1) 0 var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border);
}

.page-header__titles {
  min-width: 0;
}

.page-title {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ds-text);
  letter-spacing: -0.01em;
}

.page-subtitle {
  margin: var(--ds-space-1) 0 0;
  font-size: 14px;
  color: var(--ds-text-secondary);
}

.page-header__actions {
  display: flex;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
}

.page-header__actions > button,
.page-header__actions > .menu > .menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  height: var(--ds-control-h);
  padding: 0 var(--ds-space-4);
  white-space: nowrap;
}

.page-section {
  margin-bottom: var(--ds-space-5);
}

/* Tiêu đề khu vực + thanh lọc trên cùng một hàng, xuống dòng khi hẹp. */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--ds-space-3);
}

.section-head .section-title {
  margin: 0;
}

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-muted);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.filter-bar {
  display: flex;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
}

.filter-bar .search,
.filter-bar select {
  height: var(--ds-control-h);
  border-radius: var(--ds-radius-sm);
  border-color: var(--ds-border);
  font-size: 14px;
}

.filter-bar .search {
  width: 280px;
  padding: 0 var(--ds-space-3);
}

.filter-bar select {
  padding: 0 var(--ds-space-3);
  min-width: 150px;
  cursor: pointer;
}

.filter-bar select:focus-visible {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: var(--ds-focus-ring);
}

/* Hàng số liệu tóm tắt */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-5);
}

.stat-tile {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  min-width: 0;
}

.stat-tile__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--ds-radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.stat-tile__value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}

.stat-tile__label {
  font-size: 13px;
  color: var(--ds-text-secondary);
}

.tone-neutral { background: var(--ds-surface-muted); color: var(--ds-text-secondary); }
.tone-ok { background: var(--ds-success-soft); color: var(--ds-success); }
.tone-warn { background: var(--ds-warning-soft); color: var(--ds-warning); }

@media (max-width: 768px) {
  .page-header {
    align-items: stretch;
    margin-bottom: var(--ds-space-4);
  }
  .page-title {
    font-size: 20px;
  }
  .page-header__actions {
    width: 100%;
  }
  .page-header__actions > button,
  .page-header__actions > .menu {
    flex: 1 1 160px;
  }
  .page-header__actions > .menu > .menu-btn {
    width: 100%;
  }
  .filter-bar {
    width: 100%;
  }
  .filter-bar .search {
    flex: 1 1 200px;
    width: auto;
  }
  .filter-bar select {
    flex: 0 1 160px;
  }
}

@media (max-width: 600px) {
  .stat-row {
    gap: var(--ds-space-2);
  }
  .stat-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3);
  }
}

@media (max-width: 420px) {
  .filter-bar select {
    flex: 1 1 100%;
  }
  .stat-tile__icon {
    display: none;
  }
  .stat-tile__value {
    font-size: 18px;
  }
  .stat-tile__label {
    font-size: 12px;
  }
}

/* Ô tìm kiếm có kính lúp bên trong — như thanh công cụ của Notebook. */
.search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 20px;
  padding: 0 12px;
  min-width: 140px;
  box-sizing: border-box;
}

.search:focus-within {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(67, 201, 147, .18);
}

.search .ico {
  font-size: 14px;
  color: var(--app-text-secondary);
  line-height: 1;
  flex-shrink: 0;
}

.search input,
.search input[type="text"] {
  border: 0 !important;
  background: transparent !important;
  padding: 7px 0 !important;
  flex: 1 !important;
  min-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 13px !important;
  color: var(--app-text-primary) !important;
}

.search input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.search .clear {
  border: 0;
  background: none;
  padding: 2px 4px;
  color: var(--app-text-secondary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.search .clear:hover {
  color: var(--app-text-primary);
}

.search__ico {
  display: inline-flex;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}

.search__clear {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: none;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}

.search__clear:hover {
  background: var(--ds-surface-muted);
  color: var(--ds-text);
}

.search:has(.search__ico):focus-within {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-focus-ring);
}

/* Bỏ nút ✕ riêng của trình duyệt cho input[type=search] — đã có nút xoá của mình. */
.search input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Mẫu kỳ thi theo môn ─────────────────────────────────────────────────────
   Máy tính: lưới nhiều cột, thấy hết mẫu một lượt. Điện thoại: hàng cuộn ngang — tám thẻ
   xếp thành bốn hàng sẽ đẩy danh sách kỳ thi thật xuống tận dưới màn hình. */
.template-row {
  display: grid;
  /* 8 mẫu: một hàng 8 trên màn rộng, hai hàng 4 trên laptop/tablet — không để thẻ lẻ. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-3);
}

@media (min-width: 1280px) {
  .template-row {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.tpl-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  text-align: left;
  color: var(--ds-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tpl-card:hover {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-shadow-md);
}

.tpl-card__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--ds-radius-sm);
  display: grid;
  place-items: center;
  margin-bottom: var(--ds-space-2);
}

.tpl-card__name {
  font-size: 15px;
  font-weight: 600;
}

.tpl-card__meta {
  font-size: 13px;
  color: var(--ds-text-secondary);
  font-variant-numeric: tabular-nums;
}

.tpl-card__form {
  font-size: 12px;
  color: var(--ds-text-secondary);
}

.tpl-card__form .nowrap {
  white-space: nowrap;
}

/* Màu nhấn nhẹ theo môn — chỉ ở ô icon, thẻ vẫn trắng. */
.tone-c1 .tpl-card__icon { background: #ECFDF5; color: #047857; }
.tone-c2 .tpl-card__icon { background: #EFF6FF; color: #1D4ED8; }
.tone-c3 .tpl-card__icon { background: #FFF7ED; color: #C2410C; }
.tone-c4 .tpl-card__icon { background: #F5F3FF; color: #6D28D9; }
.tone-c5 .tpl-card__icon { background: #F0FDFA; color: #0F766E; }
.tone-c6 .tpl-card__icon { background: #FDF2F8; color: #BE185D; }

@media (max-width: 600px) {
  .template-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--ds-space-1);
    /* Cho thẻ chạm mép màn hình khi cuộn, nhưng thẻ đầu vẫn thẳng lề nội dung. */
    margin: 0 -10px;
    padding-inline: 10px;
    scroll-padding-inline: 10px;
  }
  .tpl-card {
    flex: 0 0 156px;
    scroll-snap-align: start;
  }
}

/* ── Thẻ kỳ thi ─────────────────────────────────────────────────────────── */

.session-list {
  display: grid;
  gap: var(--ds-space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
}

.exam-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.exam-card:hover {
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-shadow-md);
}

.exam-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4) var(--ds-space-3) var(--ds-space-3) var(--ds-space-4);
}

.exam-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-primary-soft);
  color: var(--ds-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.exam-card__titles {
  flex: 1;
  min-width: 0;
}

.exam-card__name {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ds-text);
  /* Luôn một dòng để mọi thẻ cùng chiều cao; tên dài cắt "…", tên đầy đủ ở title. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exam-card__name:hover {
  color: var(--ds-primary);
}

.exam-card__sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ds-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exam-card__actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  margin-top: -2px;
}

.btn-icon--danger:hover {
  background: var(--ds-danger-soft);
  border-color: var(--ds-danger-border);
  color: var(--ds-danger);
}

.exam-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-2);
  margin: 0 var(--ds-space-4);
  padding: var(--ds-space-3) 0;
  border-top: 1px solid var(--ds-border);
}

.exam-card__stats dt {
  font-size: 12px;
  color: var(--ds-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exam-card__stats dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}

.exam-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  margin-top: auto;
  padding: var(--ds-space-2) var(--ds-space-4);
  background: var(--ds-surface-muted);
  border-top: 1px solid var(--ds-border);
  border-radius: 0 0 var(--ds-radius-md) var(--ds-radius-md);
}

.exam-card__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ds-text-secondary);
  min-width: 0;
}

/* Khung xương lúc đang nạp */
.exam-card.is-skeleton {
  min-height: 168px;
  background: linear-gradient(90deg, var(--ds-surface) 0%, var(--ds-surface-muted) 50%, var(--ds-surface) 100%);
  background-size: 200% 100%;
  animation: ds-shimmer 1.4s ease-in-out infinite;
  box-shadow: none;
}

@keyframes ds-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .exam-card.is-skeleton { animation: none; }
}

/* ── Menu thao tác (nút ⋯) ──────────────────────────────────────────────── */

.action-menu {
  position: relative;
  flex-shrink: 0;
}

.action-menu__list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 168px;
  padding: var(--ds-space-1);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-pop);
}

.action-menu__list.is-flipped {
  right: auto;
  left: 0;
}

.action-menu__item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ds-text);
  font-size: 14px;
  text-align: left;
}

.action-menu__item:hover,
.action-menu__item:focus-visible {
  background: var(--ds-surface-muted);
  outline: none;
}

.action-menu__item.is-danger {
  color: var(--ds-danger);
}

.action-menu__item.is-danger:hover,
.action-menu__item.is-danger:focus-visible {
  background: var(--ds-danger-soft);
}

/* ── Hộp xác nhận (ConfirmDialog) ───────────────────────────────────────── */

dialog.confirm-dialog {
  width: min(440px, calc(100vw - 24px));
  border-radius: var(--ds-radius-md);
}

.confirm-dialog__body {
  display: flex;
  gap: var(--ds-space-3);
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-4);
}

.confirm-dialog__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-pill);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--ds-primary-soft);
  color: var(--ds-primary);
}

.confirm-dialog.is-danger .confirm-dialog__icon {
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.confirm-dialog__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ds-text);
  overflow-wrap: anywhere;
}

.confirm-dialog__msg {
  margin: var(--ds-space-2) 0 0;
  font-size: 14px;
  color: var(--ds-text-secondary);
  white-space: pre-line;
}

.confirm-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-5) var(--ds-space-5);
}

@media (max-width: 480px) {
  .confirm-dialog__foot button {
    flex: 1;
    min-height: 42px;
  }
}

/* ── Bảng ────────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-field);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--app-divider);
  white-space: nowrap;
}

th {
  color: var(--app-text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

th.num,
td.num {
  text-align: right;
}

tbody tr:hover {
  background: var(--app-surface-subtle);
}

tbody tr.fresh {
  animation: flash 1.2s ease-out;
}

@keyframes flash {
  from {
    background: var(--chip-ok-bg);
  }

  to {
    background: transparent;
  }
}

td.score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

td.score.high {
  color: var(--chip-ok-text);
}

td.score.low {
  color: var(--app-danger);
}

.warn-dot {
  color: var(--app-warn);
  cursor: help;
}

/* ── Chi tiết kỳ thi: đầu trang ─────────────────────────────────────────── */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.session-header .page-title {
  overflow-wrap: anywhere;
}

/* Một hàng thông tin, các mục ngăn bằng dấu chấm giữa. */
.session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin-top: var(--ds-space-1);
  font-size: 14px;
  color: var(--ds-text-secondary);
}

.session-meta > span:not(:last-child)::after {
  content: "·";
  margin: 0 var(--ds-space-2);
  color: var(--ds-border-strong);
}

/* ── Đáp án mẫu: lưới thẻ gọn ───────────────────────────────────────────── */

.key-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ds-space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

.key-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-width: 0;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.key-tile:hover {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-shadow-md);
}

.key-tile__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--ds-space-3) 0 var(--ds-space-3) var(--ds-space-4);
  border: 0;
  border-radius: var(--ds-radius-md) 0 0 var(--ds-radius-md);
  background: none;
  text-align: left;
  color: var(--ds-text);
}

.key-tile__label {
  font-size: 12px;
  color: var(--ds-text-secondary);
}

.key-tile__code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.key-tile__warn {
  display: inline-flex;
  color: var(--ds-warning);
}

.key-tile__sub {
  font-size: 12px;
  color: var(--ds-text-secondary);
}

.key-tile .action-menu {
  margin: var(--ds-space-2) var(--ds-space-2) 0 0;
}

.key-grid__empty {
  grid-column: 1 / -1;
  padding: var(--ds-space-4);
  text-align: center;
  font-size: 14px;
  color: var(--ds-text-secondary);
  background: var(--ds-surface);
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
}

.key-summary {
  margin: var(--ds-space-2) 0 0;
  font-size: 13px;
  color: var(--ds-text-secondary);
}

/* ── Kết quả chấm thi ───────────────────────────────────────────────────── */

.stat-row.stat-row--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--ds-space-4);
}

.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--ds-space-3);
}

.results-toolbar .search {
  flex: 0 1 360px;
  height: var(--ds-control-h);
  padding: 0 var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  border-color: var(--ds-border);
  font-size: 14px;
}

.results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}

.results-actions > button {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  height: var(--ds-control-h);
  padding: 0 var(--ds-space-4);
  white-space: nowrap;
}

/* Khung bảng: thẻ trắng viền mảnh, bảng cuộn ngang bên trong nếu hẹp. */
.data-table {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
}

.data-table .table-wrap {
  border-radius: 0;
}

.data-table .empty-state {
  padding: var(--ds-space-6) var(--ds-space-4);
  font-size: 14px;
}

.results-table th,
.results-table td {
  padding: 12px var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
  vertical-align: middle;
}

.results-table tbody tr:last-child td {
  border-bottom: 0;
}

.results-table th {
  background: var(--ds-surface-muted);
  color: var(--ds-text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.results-table td {
  font-size: 14px;
  color: var(--ds-text);
}

.results-table tbody tr:hover {
  background: var(--ds-surface-muted);
}

.results-table .rt-stt {
  width: 56px;
  text-align: center;
  color: var(--ds-text-secondary);
  font-variant-numeric: tabular-nums;
}

.results-table td.rt-sbd {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: .02em;
}

.results-table .rt-name {
  width: 30%;
  white-space: normal;
  min-width: 160px;
}

.results-table .rt-code {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.results-table .rt-score {
  text-align: right;
}

.results-table td.rt-score {
  font-size: 16px;
  font-weight: 700;
}

.results-table .score-max {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-text-secondary);
}

.results-table td.score.high {
  color: var(--ds-success);
}

.results-table td.score.low {
  color: var(--ds-danger);
}

.results-table td.rt-time {
  color: var(--ds-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Cột "mschool" của kỳ thi mở bằng "eye": bài đã gửi lên bài kiểm tra hay chưa. */
.results-table .rt-push {
  white-space: nowrap;
}

.push-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-secondary);
}

.push-badge.is-sent {
  color: var(--ds-success);
}

/* Dòng tóm tắt dưới nút "Gửi lên mschool" */
.push-note {
  margin: calc(-1 * var(--ds-space-1)) 0 var(--ds-space-3);
  font-size: 13px;
  color: var(--ds-text-secondary);
}

.push-note[data-tone="ok"] { color: var(--ds-success); }
.push-note[data-tone="warn"] { color: var(--ds-warning); }
.push-note[data-tone="bad"] { color: var(--ds-danger); }

.results-table .rt-actions {
  text-align: right;
  /* Bề rộng cố định: "Chi tiết" + nút ⋯. Để bảng tự tính thì Chrome bỏ sót nút ⋯ (nằm
     trong khối menu) và ép cột hẹp hơn nội dung, nút bị đẩy ra ngoài khung. */
  width: 124px;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  /* Bề rộng theo nội dung thật — để trình duyệt tự tính thì "Chi tiết" được phép xuống
     dòng, khối bị ép hẹp hơn nội dung và tràn đè sang cột điểm bên trái. */
  width: max-content;
  margin-left: auto;
  white-space: nowrap;
}

/* Phần tử con không được co, nếu không nút ⋯ bị đẩy ra ngoài khung bảng. */
.row-actions > * {
  flex-shrink: 0;
}

.results-table .warn-dot {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: 4px;
  color: var(--ds-warning);
}

/* Tiêu đề cột sắp xếp được: cả chữ là nút, mũi tên cho biết chiều đang xếp. */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}

.th-sort:hover {
  color: var(--ds-text);
}

.th-sort__ico::after {
  content: "↕";
  font-size: 12px;
  opacity: .45;
}

th[aria-sort="ascending"] .th-sort,
th[aria-sort="descending"] .th-sort {
  color: var(--ds-text);
}

th[aria-sort="ascending"] .th-sort__ico::after {
  content: "↑";
  opacity: 1;
}

th[aria-sort="descending"] .th-sort__ico::after {
  content: "↓";
  opacity: 1;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-4);
  border-top: 1px solid var(--ds-border);
  font-size: 13px;
  color: var(--ds-text-secondary);
}

.pager__info {
  margin-right: auto;
}

.pager .btn-icon:disabled {
  opacity: .4;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .stat-row.stat-row--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .results-toolbar .search {
    flex: 1 1 100%;
  }
  .results-actions {
    width: 100%;
  }
  /* Màn hẹp: nút chia đều hàng, thiếu chỗ thì xuống dòng thay vì tràn ra ngoài khung. */
  .results-actions > button {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 var(--ds-space-3);
  }
}

@media (max-width: 600px) {
  /* Điện thoại: bỏ STT và thời điểm chấm (vẫn có trong Chi tiết) để SBD · mã đề · điểm ·
     thao tác vừa một màn hình, không phải cuộn ngang mới thấy nút. */
  .results-table .rt-stt,
  .results-table .rt-time {
    display: none;
  }
  .results-table th,
  .results-table td {
    padding: 10px var(--ds-space-2);
  }
  .results-table th:first-child,
  .results-table td:first-child {
    padding-left: var(--ds-space-3);
  }
  .results-table .score-max {
    display: none;
  }
  .results-table .rt-actions {
    width: 100px;
  }
  .row-actions {
    gap: var(--ds-space-1);
  }
  .key-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-2);
  }
  .key-tile__main {
    padding-left: var(--ds-space-3);
  }
}

/* ── Form (tạo kỳ thi) ───────────────────────────────────────────────────── */

.field {
  display: block;
  margin-bottom: 14px;
}

.field>.lbl {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.field input[type=text],
.field input[type=number],
.field textarea,
.field select {
  width: 100%;
  font-size: 16px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(67, 201, 147, .18);
}

/* Chips chọn mẫu phiếu — chipGroupFormType */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips button {
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 13px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
}

.chips button.on {
  background: var(--chip-ok-bg);
  border-color: var(--app-accent);
  color: var(--app-accent-dark);
  font-weight: 700;
}

/* Ba phần I/II/III */
.part {
  border: 1px solid var(--app-border);
  border-radius: var(--radius-field);
  padding: 12px;
  margin-bottom: 10px;
}

.part.off {
  opacity: .55;
}

.part-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.part-head input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--app-accent);
}

.part-head .cap {
  flex: 1;
}

.part-body {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.part-body label {
  flex: 1;
  min-width: 120px;
  font-size: 12px;
  color: var(--app-text-secondary);
}

.part-body input {
  width: 100%;
  margin-top: 4px;
  font-size: 16px;
}

/* Thang điểm Phần II theo số ý đúng — bốn ô nhỏ nằm trong khối Phần II. */
.p2-scale {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--app-border);
}

.p2-cap {
  font-size: 12px;
  font-weight: 700;
  color: var(--app-text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.p2-scale .part-body {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.p2-scale .part-body label {
  min-width: 0 !important;
  max-width: 100% !important;
  flex: none !important;
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  color: var(--app-text-secondary);
  white-space: nowrap;
  box-sizing: border-box;
}

.p2-scale input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 8px 4px !important;
  font-size: 15px !important;
  text-align: center;
  border-radius: var(--radius-field);
  margin-top: 4px;
}

@media (max-width: 480px) {
  .p2-scale .part-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }
}

.p2-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--app-accent-dark);
  background: var(--chip-ok-bg);
  border-radius: var(--radius-field);
  padding: 6px 10px;
}

.p2-hint:empty {
  display: none;
}

.part-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--app-text-secondary);
  background: var(--app-surface-2, rgba(255, 255, 255, 0.04));
  border-radius: var(--radius-field, 6px);
  padding: 6px 10px;
  border-left: 3px solid var(--app-accent);
}

/* Bảng chọn ý Phần III KHTN 10 - Tối ưu di động & Cảm ứng */
.p3-khtn-cfg {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--app-border);
}

.p3-khtn-cfg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.p3-khtn-cfg-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--app-text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.p3-khtn-cfg-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.p3-khtn-cfg-actions .btn-xs {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text-secondary);
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.15s ease;
}

.p3-khtn-cfg-actions .btn-xs:hover,
.p3-khtn-cfg-actions .btn-xs:active {
  border-color: var(--app-accent);
  color: var(--app-text);
  background: var(--app-surface-2);
}

.p3-khtn-cfg-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--app-surface-2, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 10px;
}

.p3-q-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Nút bấm Bật/Tắt cả câu */
.p3-q-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.p3-q-toggle-btn:hover {
  border-color: var(--app-accent);
}

.p3-q-toggle-btn:active {
  transform: scale(0.97);
}

.p3-q-name {
  font-size: 13px;
  font-weight: 700;
}

.p3-q-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.p3-q-toggle-btn.full .p3-q-tag {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.p3-q-toggle-btn.part .p3-q-tag {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.p3-q-toggle-btn.empty {
  opacity: 0.6;
}

.p3-q-toggle-btn.empty .p3-q-tag {
  background: var(--app-surface-2);
  color: var(--app-text-secondary);
}

/* Nhóm 4 chip A, B, C, D */
.p3-q-chips {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

/* Phím chip A, B, C, D bản to chuẩn ngón cái */
.p3-chip {
  min-width: 44px;
  height: 44px;
  flex: 1;
  max-width: 60px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--app-border, #e5e7eb);
  background: var(--app-surface, #ffffff);
  color: var(--app-text-secondary, #6b7280);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.p3-chip:hover {
  border-color: var(--app-accent, #10b981);
  color: var(--app-text, #111827);
}

.p3-chip:active {
  transform: scale(0.92);
}

.p3-chip.active {
  background: #059669;
  border-color: #047857;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
}

.p3-chip:disabled,
.p3-q-toggle-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 420px) {
  .p3-q-row {
    gap: 6px;
  }
  .p3-q-chips {
    gap: 6px;
  }
  .p3-chip {
    min-width: 38px;
    height: 42px;
    font-size: 15px;
  }
  .p3-q-toggle-btn {
    padding: 6px 8px;
    min-height: 40px;
  }
  .p3-q-name {
    font-size: 12px;
  }
  .p3-q-tag {
    font-size: 10px;
  }
}

.p3-khtn-cfg-summary {
  margin-top: 8px;
  font-size: 12px;
  color: var(--app-accent-dark, #059669);
  background: var(--chip-ok-bg, rgba(16, 185, 129, 0.1));
  border-radius: var(--radius-field, 6px);
  padding: 8px 12px;
  font-weight: 500;
}

.total-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--chip-ok-bg);
  border: 1px solid var(--chip-ok-stroke);
  border-radius: var(--radius-field);
  padding: 10px 12px;
  margin-bottom: 14px;
  color: var(--app-accent-dark);
  font-weight: 700;
}

/* ── Hộp thoại ───────────────────────────────────────────────────────────── */

dialog:not([open]) {
  display: none !important;
}

dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: 90dvh;
  max-height: calc(100dvh - 32px);
  padding: 0;
  background: var(--app-surface);
  color: var(--app-text-primary);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
  margin: auto;
  overscroll-behavior: contain;
}

dialog.wide {
  width: min(1000px, calc(100vw - 24px));
}

dialog::backdrop {
  background: rgba(45, 51, 58, .55);
  backdrop-filter: blur(2px);
  overscroll-behavior: contain;
  touch-action: none;
}

.dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--app-divider);
  position: sticky;
  top: 0;
  background: var(--app-surface);
  z-index: 1;
  flex-wrap: wrap;
}

.dlg-head h2 {
  flex: 1;
  min-width: 140px;
  font-size: 17px;
  font-weight: 700;
}

.dlg-body {
  padding: 16px;
  overflow-y: auto;
  max-height: calc(90dvh - 120px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.dlg-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--app-divider);
  position: sticky;
  bottom: 0;
  background: var(--app-surface);
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  dialog, dialog.wide {
    width: calc(100vw - 16px);
  }
  .dlg-head, .dlg-body, .dlg-foot {
    padding: 12px;
  }
  .dlg-foot button {
    flex: 1;
    min-height: 42px;
  }
}

.dlg-error {
  color: var(--app-danger);
  font-size: 13px;
  margin-right: auto;
  align-self: center;
}

/* Chi tiết một bài / một đáp án */
.detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
}

@media (max-width: 780px) {
  .detail-body {
    grid-template-columns: 1fr;
  }
}

.detail-image img {
  width: 100%;
  border-radius: var(--radius-field);
  border: 1px solid var(--app-border);
  background: #000;
}

.part-block {
  margin-bottom: 20px;
}

.part-block h3 {
  font-size: 13px;
  color: var(--app-text-secondary);
  margin-bottom: 8px;
}

.q-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}

.q-grid.wide {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.q {
  border: 1px solid var(--app-border);
  border-radius: 7px;
  padding: 5px 8px;
  background: var(--app-surface);
  font-size: 12px;
  line-height: 1.35;
}

.q .qn {
  color: var(--app-text-secondary);
  font-size: 11px;
}

.q .ans {
  font-weight: 700;
  font-size: 13px;
}

.q .exp {
  color: var(--app-text-secondary);
}

.q.correct {
  border-color: var(--app-accent);
  background: var(--chip-ok-bg);
}

.q.wrong {
  border-color: var(--app-danger);
  background: #FFF2F2;
}

.q.partial {
  border-color: var(--app-warn);
  background: #FFF6E8;
}

.q.blank {
  border-style: dashed;
  color: var(--app-text-secondary);
}

.q.edit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.q.edit:hover {
  border-color: var(--app-accent);
}

.q.edit .ans {
  font-size: 15px;
}

.q.wide {
  padding: 7px 9px;
}

.sub-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.sub-cell {
  flex: 1;
  padding: 4px 2px;
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  cursor: pointer;
}

.sub-cell:hover {
  border-color: var(--app-accent);
}

.sub-cell.correct {
  border-color: var(--app-accent);
  background: var(--chip-ok-bg);
}

.sub-cell.blank {
  border-style: dashed;
  color: var(--app-text-secondary);
}

.p3-input {
  width: 100%;
  margin-top: 4px;
  padding: 5px 8px;
  font-size: 16px;
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: .18em;
}

/* Nhóm Phần III cho KHTN 10: 3 câu, mỗi câu 4 ý a, b, c, d */
.p3-khtn-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.p3-khtn-card {
  background: var(--app-surface-2, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.2s;
}

.p3-khtn-card:hover {
  border-color: var(--app-border-hover, var(--app-border));
}

.p3-khtn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.p3-khtn-badge {
  font-weight: 700;
  font-size: 12px;
  background: var(--app-accent, var(--ds-primary));
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .02em;
}

.p3-khtn-subhint {
  font-size: 11px;
  color: var(--app-text-secondary);
}

.p3-khtn-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 540px) {
  .p3-khtn-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p3-khtn-cell {
  display: flex;
  flex-direction: column;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 6px;
  padding: 6px 8px;
}

.p3-khtn-sub-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--app-accent);
  margin-bottom: 2px;
}

.p3-khtn-cell .p3-input {
  margin-top: 2px;
  padding: 4px 6px;
  font-size: 15px;
}

.p3-khtn-cell.inactive {
  opacity: 0.5;
  background: var(--app-surface-2, rgba(255, 255, 255, 0.02));
  border-style: dashed;
}

.p3-khtn-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.p3-sub-off-badge {
  font-size: 10px;
  color: var(--app-text-secondary);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  padding: 1px 4px;
  border-radius: 3px;
}

.key-dirty {
  color: var(--app-warn);
  font-size: 13px;
}

.warn-text {
  color: var(--app-warn);
}

textarea {
  width: 100%;
  resize: vertical;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÀN QUÉT — phần dưới đây là giao diện camera, giữ nguyên cấu trúc đã tinh
   chỉnh cho việc dò marker; chỉ đổi màu theo tông sáng của app.
   ═══════════════════════════════════════════════════════════════════════════ */

.scan-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .scan-layout {
    grid-template-columns: 1fr;
  }

  .stage {
    aspect-ratio: auto;
    min-height: 280px;
    height: min(62vh, 480px);
  }

  .screen {
    padding: 12px;
  }

  .fab {
    bottom: 76px;
    right: 16px;
  }
}

/* Chọn bước — hai bước đánh số, quét đáp án mẫu là bước 1. */
.seg {
  display: flex;
}

.seg button {
  border-radius: 0;
  border-right-width: 0;
  font-size: 13px;
}

.seg button:first-child {
  border-radius: 18px 0 0 18px;
}

.seg button:last-child {
  border-radius: 0 18px 18px 0;
  border-right-width: 1px;
}

.seg button.on {
  background: var(--app-accent);
  border-color: var(--app-accent);
  color: #fff;
  font-weight: 700;
}

@media (max-width: 420px) {
  .seg {
    width: 100%;
  }
  .seg button {
    flex: 1;
    padding: 8px 6px;
    font-size: 12px;
    text-align: center;
  }
}

.stage {
  position: relative;
  background: #000;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}

.stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Khung phủ đúng vùng ẢNH của video (object-fit:contain nên có viền đen).
   app.js đặt left/top/width/height theo pixel — xem layoutGuide(). */
.guide {
  position: absolute;
  pointer-events: none;
  display: none;
}

.guide.on {
  display: block;
}

/* Mỗi ô = 20% cạnh khung, dán vào góc — khớp omr_marker::kMarkerRoiPercent.
   Vàng = chưa thấy (như app), xanh = đã bắt được marker ở góc đó. */
.roi {
  position: absolute;
  width: 20%;
  height: 20%;
  border: 3px solid rgba(255, 209, 71, .75);
  transition: border-color .12s linear, background-color .12s linear;
}

.roi.tl {
  top: 0;
  left: 0;
}

.roi.tr {
  top: 0;
  right: 0;
}

.roi.br {
  bottom: 0;
  right: 0;
}

.roi.bl {
  bottom: 0;
  left: 0;
}

.roi.found {
  border-color: var(--app-accent);
  background: rgba(67, 201, 147, .16);
}

.roi.missing {
  border-color: var(--app-danger);
}

.guide-hint {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  padding: 4px 10px;
  border-radius: 20px;
}

/* Khi toàn màn hình, dòng trạng thái của thanh đáy đã nói ĐÚNG câu này (handleDetectResult
   ghép thẳng nội dung ô gợi ý vào), nên giữ cả hai chỉ là hai bản sao — mà bản dán ở đáy
   khung ảnh thì rơi trúng chỗ khay ảnh. Ngoài toàn màn hình thì ngược lại: thanh đáy ẩn,
   ô gợi ý là chỗ duy nhất nói ra thiếu góc nào. */
.stage:fullscreen .guide-hint {
  display: none;
}

.stage:-webkit-full-screen .guide-hint {
  display: none;
}

.stage.pseudo-fs .guide-hint {
  display: none;
}

/* ── Toàn màn hình ───────────────────────────────────────────────────────────
   Hai đường: Fullscreen API (Chrome/Firefox/Android) và lớp .pseudo-fs dựng bằng CSS
   cho iOS Safari — Safari chỉ cho `<video>` vào fullscreen thật, mà làm vậy thì trình
   duyệt tự vẽ giao diện phát video đè lên và 4 ô ngắm biến mất.

   Mỗi selector phải là một rule RIÊNG: gộp `:fullscreen` với `:-webkit-full-screen`
   trong một danh sách sẽ khiến trình duyệt không hiểu một selector rồi bỏ luôn cả rule. */
.stage:fullscreen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
}

.stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
}

.stage.pseudo-fs {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100dvh;
  aspect-ratio: auto;
  border-radius: 0;
}

body.fs-lock {
  overflow: hidden;
}

/* ── Thanh trên: ← thoát · bộ đếm · đèn · Lưu (n) ────────────────────────────
   MỌI nút của chế độ toàn màn hình nằm ở đây, không còn nút nào ở đáy. Hai lần trước đều
   thất bại vì đáy khung có tới ba thứ tranh nhau cùng một dải: khay ảnh, hàng nút, và dòng
   gợi ý ướm phiếu — cái nào vẽ sau thì cướp cú chạm của cái trước, mà khay thì cao thấp
   thay đổi theo số ảnh nên không có con số `bottom` nào đúng cho mọi lúc.

   Nút ở TRÊN, khay ở DƯỚI: hai vùng không bao giờ gặp nhau, và đáy khung chỉ còn những thứ
   chỉ-đọc (khay + dòng trạng thái) nên chúng có tràn thế nào cũng không chặn được nút. */
.fs-top {
  display: none;
}

.stage:fullscreen .fs-top,
.stage.pseudo-fs .fs-top {
  display: flex;
}

.stage:-webkit-full-screen .fs-top {
  display: flex;
}

.fs-top {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: 0;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  background: linear-gradient(rgba(0, 0, 0, .72), transparent);
  /* Dải nền trải hết bề ngang khung — để nó bắt chạm thì thao tác ướm phiếu ở phần trên
     khung bị nó nuốt. Chỉ các nút và chữ bên trong mới nhận. */
  pointer-events: none;
}

.fs-top>* {
  pointer-events: auto;
}

/* Nút tròn 44px — cỡ tối thiểu bấm được bằng ngón tay. */
.fs-icon {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}

.fs-top .btn-primary {
  flex: none;
  min-height: 44px;
  padding: 8px 18px;
  font-weight: 700;
}

.fs-top button.on {
  background: var(--app-warn);
  border-color: var(--app-warn);
  color: #1b1200;
}

/* Bộ đếm nằm giữa và tự co: nó là thứ duy nhất được phép cắt bớt ở hàng này. */
.fs-count {
  flex: 1;
  min-width: 0;
  text-align: center;
  color: #fff;
  font-size: 13px;
  opacity: .9;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Cụm đáy: khay ảnh + dòng trạng thái, không có nút nào ─────────────────── */
.fs-dock {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: calc(0px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.tray,
.fs-bar {
  pointer-events: auto;
}

/* Đang xem lại ảnh phiếu thì khung xem lại chiếm trọn khung và tự mang thanh nút của nó. */
.stage.reviewing .fs-dock,
.stage.reviewing .fs-top {
  display: none;
}

.fs-bar {
  display: none;
}

.stage:fullscreen .fs-bar,
.stage.pseudo-fs .fs-bar {
  display: block;
}

.stage:-webkit-full-screen .fs-bar {
  display: block;
}

.fs-bar {
  display: none;
}

.stage:fullscreen .fs-bar,
.stage.pseudo-fs .fs-bar {
  display: block;
}

.stage:-webkit-full-screen .fs-bar {
  display: block;
}

.fs-bar {
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, .78) 45%);
}

/* Một dòng, cắt bằng ellipsis. Xuống dòng tự do sẽ đẩy khay lên giữa khung mỗi khi thông
   báo dài — khay nhảy chỗ giữa lúc quét là thứ rất khó chịu. */
.fs-status {
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Trạng thái quyền camera ─────────────────────────────────────────────── */
.stage-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  text-align: center;
  color: #fff;
  padding: 24px;
  background: rgba(20, 24, 28, .88);
}

.stage-empty.hidden {
  display: none;
}

.stage-empty p {
  margin: 0;
  max-width: 460px;
}

.stage-empty .sub {
  color: #cfd5e0;
  font-size: 13px;
}

.stage-empty button {
  margin-top: 12px;
}

.stage-empty button.big {
  padding: 12px 22px;
  font-size: 16px;
}

.url-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.url-list a {
  display: block;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-field);
  padding: 8px 12px;
  color: #eaf7f1;
  text-decoration: none;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 14px;
}

/* Xem lại ảnh phiếu vừa đọc — xếp CHỒNG thật (thẻ kết quả → ảnh → thanh nút), không phủ
   đè: chữ và nút phủ lên ảnh sẽ che đúng phần đầu phiếu (SBD, mã đề) và cuối Phần III —
   mà đó chính là chỗ người dùng mở khung này ra để soi. */
.stage-empty.preview {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #000;
}

.preview-img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  display: block;
}

.preview-card {
  flex: none;
  text-align: left;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-divider);
  color: var(--app-text-primary);
}

.preview-title {
  color: var(--chip-ok-text);
  font-weight: 700;
  font-size: 14px;
}

.preview-title.bad {
  color: var(--app-danger);
}

.preview-warn {
  color: #B87716;
  font-size: 12px;
  margin-top: 2px;
}

.stage-empty.preview .sub {
  color: var(--app-text-secondary);
  font-size: 12px;
}

.stage-empty.preview button {
  margin-top: 0;
  min-height: 44px;
}

/* Một thanh hành động DUY NHẤT ở đáy. Nút chính chiếm trọn bề ngang và nằm thấp nhất —
   tầm ngón cái khi cầm một tay; nút phụ xếp hàng trên. */
.preview-bar {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--app-surface);
  border-top: 1px solid var(--app-divider);
}

.preview-acts {
  display: flex;
  gap: 8px;
}

.preview-acts button {
  flex: 1;
}

.preview-bar>button.btn-primary {
  width: 100%;
}

@media (min-width: 901px) {
  .preview-bar {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .preview-acts {
    flex: none;
  }

  .preview-bar>button.btn-primary {
    width: auto;
  }
}

/* Đang xem lại thì KHÔNG còn thanh điều khiển của chế độ quay: nó cũng dán ở đáy nên hai
   thanh chồng lên nhau, và các nút của nó ("Bắt đầu quét") trùng nghĩa với "Quét tiếp".
   Phải khai báo SAU các rule `.stage:fullscreen .fs-bar { display: flex }` ở trên. */
.stage.reviewing .fs-bar {
  display: none;
}

/* ── Khay ảnh đã quét + hiệu ứng chụp ────────────────────────────────────────
   Bản web của rv_tray_images / item_tray_image.xml: ảnh nhỏ 56×72, viền xanh nhạt, số thứ
   tự góc trên-trái, nút xoá góc trên-phải, badge điểm ở đáy. Kích thước giữ đúng của app —
   đủ to để nhận ra tờ nào, đủ nhỏ để một dãy vẫn không ăn vào khung ngắm.

   Vị trí do `.fs-dock` quyết định (khay là con đầu của cột), nên ở đây KHÔNG có `position`
   hay `bottom` — đó chính là thứ từng làm khay đè lên thanh nút. Chiều cao tự tính từ ảnh,
   cộng thêm chỗ cho badge điểm tràn xuống dưới. */
.tray {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 16px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.tray[hidden] {
  display: none;
}

.tray::-webkit-scrollbar {
  display: none;
}

.tray-item {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 72px;
  border: 2px solid var(--ds-primary-border);
  border-radius: 6px;
  background: #000;
  padding: 0;
  cursor: pointer;
}

.tray-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.tray-item:hover {
  border-color: var(--app-accent);
}

.tray-idx {
  position: absolute;
  top: 2px;
  left: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.tray-del {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--app-border);
  color: var(--app-danger);
  font-size: 11px;
  line-height: 1;
}

.tray-badge {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 24px;
  height: 18px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Ba mức màu khớp scoreColor() của TrayImagesAdapter. */
.tray-badge.ok {
  background: #4CAF50;
}

.tray-badge.warn {
  background: #FFC107;
  color: #1b1200;
}

.tray-badge.bad {
  background: #F44336;
}

/* Ảnh vừa chụp, giữ giữa khung một nhịp rồi bay xuống khay. Căn giữa bằng inset+margin
   chứ KHÔNG bằng transform: transform là thứ animation sẽ ghi lên, dùng nó để căn giữa thì
   ảnh nhảy về góc ngay khung đầu của lượt bay. */
.cap-fly {
  position: absolute;
  z-index: 7;
  inset: 0;
  margin: auto;
  width: 46%;
  height: 62%;
  padding: 8px;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  pointer-events: none;
}

.cap-fly[hidden] {
  display: none;
}

.cap-fly img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Băng cảnh báo trên khung camera ─────────────────────────────────────────
   Dán ở ĐỈNH khung: đáy đã có thanh nút và dòng gợi ý ướm phiếu, mà lúc cảnh báo nổi lên
   thì người dùng vẫn đang cầm phiếu trong khung — che mất chỗ đó là che đúng thứ họ cần
   nhìn. Nền đặc + viền màu để đọc được trên cả phiếu trắng lẫn mặt bàn tối. */
.stage-banner {
  position: absolute;
  z-index: 5;
  left: 12px;
  right: 12px;
  top: calc(12px + env(safe-area-inset-top));
  padding: 10px 14px;
  border-radius: 10px;
  border-left: 4px solid var(--app-warn);
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

.stage-banner[hidden] {
  display: none;
}

/* Khi toàn màn hình thì đỉnh khung đã có thanh nút — băng phải tụt xuống dưới nó, không thì
   nó che đúng nút Lưu và nút thoát. */
.stage:fullscreen .stage-banner {
  top: calc(70px + env(safe-area-inset-top));
}

.stage:-webkit-full-screen .stage-banner {
  top: calc(70px + env(safe-area-inset-top));
}

.stage.pseudo-fs .stage-banner {
  top: calc(70px + env(safe-area-inset-top));
}

.stage-banner.bad {
  border-left-color: var(--app-danger);
}

.stage-banner .title {
  font-weight: 700;
}

.stage-banner .sub {
  color: #cfd5e0;
  font-size: 12px;
  margin-top: 2px;
}

.status {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-field);
  font-size: 14px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
}

.status[data-tone="ok"] {
  border-color: var(--app-accent);
  color: var(--app-accent-dark);
  background: var(--chip-ok-bg);
}

.status[data-tone="warn"] {
  border-color: #F0C177;
  color: #B87716;
  background: #FFF6E8;
}

.status[data-tone="bad"] {
  border-color: var(--app-danger);
  color: var(--app-danger);
  background: #FFF2F2;
}

.cam-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--app-text-secondary);
  font-variant-numeric: tabular-nums;
}

.fallback {
  margin-top: 12px;
}

.fallback summary {
  cursor: pointer;
  color: var(--app-text-secondary);
  font-size: 13px;
}

.file-btn {
  display: inline-block;
  margin-top: 6px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-field);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.file-btn:hover {
  border-color: var(--app-accent);
}

/* ── Menu nguồn: "Tạo đáp án" / "Chấm bài" ───────────────────────────────────
   Không dùng <select>: các mục là HÀNH ĐỘNG, không phải một giá trị đang được chọn —
   sau khi bấm không có gì "đang chọn" để hiện lại. Menu cũng cho phép mỗi mục một biểu
   tượng riêng, thứ <select> trên di động không vẽ được. */
.menu {
  position: relative;
  display: inline-flex;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
}


.menu-btn .caret {
  font-size: 10px;
  opacity: .75;
  margin-left: 2px;
}

.menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 220px;
  padding: 6px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: var(--shadow-raised);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-pop[hidden] {
  display: none;
}

.menu-pop button {
  border: 0;
  background: none;
  text-align: left;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--app-text-primary);
}

.menu-pop button:hover {
  background: var(--ds-surface-muted);
  color: var(--ds-text);
}

/* ── Nhật ký nhập tệp ──────────────────────────────────────────────────────── */
#importProgress {
  width: 100%;
  height: 8px;
  margin-bottom: 12px;
}

/* Phát lại video kết quả trong hộp thoại "Chấm bài từ video" — xem import.js. */
.vplay {
  position: relative;
  margin-bottom: 10px;
  background: #000;
  border-radius: var(--radius-field);
  overflow: hidden;
}

.vplay video {
  display: block;
  width: 100%;
  max-height: 56vh;
  object-fit: contain;
}

.vplay canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.vplay-speed {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}

.vplay-speed[hidden] {
  display: none;
}

.vplay-card {
  position: absolute;
  right: 12px;
  bottom: 56px;
  width: min(440px, calc(100% - 24px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-field);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  text-align: left;
}

.vplay-card img {
  width: 64px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--app-surface-subtle);
  flex: none;
}

.vplay-card img[hidden] {
  display: none;
}

.vplay-card-text {
  flex: 1;
  min-width: 0;
}

.vplay-card-title {
  font-weight: 700;
  font-size: 15px;
}

.vplay-card[data-tone="ok"] .vplay-card-title { color: #15803d; }
.vplay-card[data-tone="warn"] .vplay-card-title { color: #b45309; }
.vplay-card[data-tone="bad"] .vplay-card-title { color: #dc2626; }

.vplay-card-sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--app-text-primary);
  word-break: break-word;
}

.vplay-card button {
  flex: none;
}

.import-log {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--app-divider);
  border-radius: var(--radius-field);
  background: var(--app-surface-subtle);
  display: flex;
  flex-direction: column;
}

.import-log .line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--app-divider);
  font-size: 13px;
  text-align: left;
  word-break: break-word;
}

.import-log .line:last-child {
  border-bottom: 0;
}

.import-log .line .what {
  font-weight: 700;
  color: var(--app-text);
  word-break: break-all;
  line-height: 1.35;
}

.import-log .line .detail,
.import-log .line .muted {
  font-size: 12.5px;
  line-height: 1.4;
  word-break: break-word;
}

.import-log .line[data-tone="ok"] .what {
  color: #15803d;
}
.import-log .line[data-tone="ok"] .detail,
.import-log .line[data-tone="ok"] .muted {
  color: #166534;
}

.import-log .line[data-tone="warn"] .what {
  color: #b45309;
}
.import-log .line[data-tone="warn"] .detail,
.import-log .line[data-tone="warn"] .muted {
  color: #92400e;
}

.import-log .line[data-tone="bad"] .what {
  color: #dc2626;
}
.import-log .line[data-tone="bad"] .detail,
.import-log .line[data-tone="bad"] .muted {
  color: #b91c1c;
}

.import-log .line[data-tone="idle"] .what {
  color: var(--app-text);
}
.import-log .line[data-tone="idle"] .detail,
.import-log .line[data-tone="idle"] .muted {
  color: var(--app-text-secondary);
}

/* ── Dòng "N tờ chưa lưu" trên màn kỳ thi ────────────────────────────────────
   Vàng chứ không xanh: đây không phải một thông báo thành công mà là một việc CÒN DỞ. */
.pending-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: #FFF7E8;
  border: 1px solid var(--app-warn);
  border-radius: var(--radius-card);
  color: #8A5A12;
  font-weight: 600;
  font-size: 14px;
}

.pending-bar .grow {
  flex: 1;
  min-width: 160px;
}

/* ── Lưới "Kết quả vừa quét" ───────────────────────────────────────────────── */
.review-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

.review-card {
  position: relative;
  overflow: hidden;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.review-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 1697;
  object-fit: cover;
  object-position: top center;
  background: #000;
  cursor: zoom-in;
}

.review-card .body {
  padding: 10px 12px 12px;
}

.review-card .who {
  font-weight: 700;
  font-size: 14px;
}

.review-card .sub {
  color: var(--app-text-secondary);
  font-size: 12px;
  margin-top: 2px;
}

.review-card .warn {
  color: var(--app-warn);
  font-size: 12px;
  margin-top: 6px;
}

.review-card .score {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}

.review-card .score.ok {
  background: var(--app-accent);
}

.review-card .score.warn {
  background: var(--app-warn);
}

.review-card .score.bad {
  background: var(--app-danger);
}

.review-card .drop {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: rgba(45, 51, 58, .62);
  border: 0;
  color: #fff;
  font-size: 14px;
}

.review-card .drop:hover {
  background: var(--app-danger);
}

/* ── Thử dò tờ giấy ──────────────────────────────────────────────────────────
   Dùng lại .review-grid / .review-card của màn "Kết quả vừa quét": cùng một dạng nội dung
   (một lưới thẻ, mỗi thẻ một tấm phiếu), nên không có lý do để trông khác nhau. */
.detect-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.detect-entry .muted {
  flex: 1;
  min-width: 220px;
}

.dd-fields {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.dd-fields .field {
  margin: 0;
}

.dd-fields .hint {
  margin: 4px 0 0;
}

.dd-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Tấm cắt được có tỉ lệ tuỳ tứ giác bắt được — KHÔNG ép khổ như thẻ kết quả chấm, vì dáng
   sai chính là dấu hiệu bắt nhầm mà màn này sinh ra để nhìn thấy. */
.dd-card img {
  aspect-ratio: auto;
  max-height: 420px;
  object-fit: contain;
  background: #20262c;
}

.dd-card .dd-src {
  margin-top: 10px;
  max-height: 200px;
  border-radius: var(--radius-field);
}

.dd-miss {
  opacity: .85;
}

.dd-miss .body {
  padding-top: 40px;
}

/* Nhãn đường dò trên thẻ kết quả — hai đường có độ tin cậy khác nhau, phải phân biệt được. */
.dd-engine {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--app-surface-subtle);
  color: var(--app-text-secondary);
  border: 1px solid var(--app-border);
  cursor: help;
}

/* Khối "đọc thử" trên thẻ kết quả — tách hẳn khỏi phần dò bằng một đường kẻ, vì đây là
   KẾT QUẢ CỦA MỘT TẦNG KHÁC: dò tờ giấy đúng mà đọc phiếu vẫn có thể trượt. */
.dd-scan {
  margin-top: 10px;
  padding: 8px 10px;
  border-top: 1px solid var(--app-divider);
  font-size: 13px;
  font-weight: 700;
}

.dd-scan .sub {
  font-weight: 500;
  margin-top: 2px;
}

.dd-scan.ok {
  color: var(--app-accent-dark);
}

.dd-scan.warn {
  color: var(--app-warn);
}

.dd-scan.bad {
  color: var(--app-danger);
}

/* Lớp phủ tứ giác tờ giấy trong khung quét — phải không ăn cú chạm, nếu không nó che hết
   thanh điều khiển của <video> khi quét từ video. */
.quad-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

/* ── Khung quét ở chế độ NGUỒN VIDEO ─────────────────────────────────────────
   Khác camera ở hai điểm nhìn thấy được: <video> mang thanh điều khiển thật (tua lại đúng
   tờ bị bỏ sót là việc chỉ có ở đây), và không có 4 ô ngắm.

   Thanh điều khiển của trình duyệt nằm sát đáy khung — đúng chỗ khay ảnh và dòng trạng thái
   đang đứng. Nâng cả cụm đáy lên trên nó, nếu không thì mỗi ảnh vào khay là mất luôn thanh
   tua. Con số 48px là chiều cao thanh điều khiển của Chrome/Safari. */
.stage.video-src .fs-dock {
  bottom: 48px;
}

/* Khung cao hơn 4:3 khi nguồn là VIDEO: phần lớn video quay phiếu là video DỌC của điện
   thoại, nhồi vào ô 4:3 thì tờ giấy chỉ còn một dải hẹp ở giữa.

   `position: absolute` cho <video> là bắt buộc, không phải để trang trí: chiều cao của
   .stage do `aspect-ratio`/`height` quyết định, và `height: 100%` trên một phần tử thay thế
   nằm trong ô lưới như thế bị tính thành `auto` — đo được 901×1602 trong ô 901×676, tức
   video DỌC bị khung cắt mất đầu và chân. Tệ hơn: drawQuadOverlay() lấy clientHeight của
   <video> làm chiều cao ảnh canvas, nên tứ giác cũng bị bóp theo. Neo bằng inset:0 cho hộp
   một kích thước xác định, và cả hai lỗi mất cùng lúc. */
.stage.video-src {
  aspect-ratio: auto;
  height: min(72vh, 820px);
}

.stage.video-src video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Thẻ nguồn video ở cột phải: tên tệp · giây/thời lượng · thanh tiến trình.
   Tên tệp có thể dài hơn cả thẻ nên phải cắt, không được đẩy thẻ rộng ra. */
.vid-name {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vid-time {
  margin: 4px 0 6px;
  font-size: 12px;
  color: var(--app-text-secondary);
}

#videoProg {
  display: block;
  width: 100%;
  height: 6px;
  appearance: none;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
}

#videoProg::-webkit-progress-bar {
  background: rgba(127, 127, 127, .25);
}

#videoProg::-webkit-progress-value {
  background: var(--app-accent);
}

#videoProg::-moz-progress-bar {
  background: var(--app-accent);
}

/* ── Màn phát trực tiếp ────────────────────────────────────────────────────
   Lớp phủ phải nằm ĐÚNG trên khung hình, nên video và canvas cùng một hộp và canvas được
   kéo phủ kín. `pointer-events: none` là bắt buộc: canvas che hết thanh điều khiển của
   <video>, không có nó thì không bấm được tạm dừng. */
.dd-live-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.dd-live-stage video {
  display: block;
  max-width: 100%;
  max-height: 62vh;
  border-radius: var(--radius-field);
  background: #14181c;
}

.dd-live-stage canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dd-live-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.dd-live-bar .muted {
  flex: 1;
  min-width: 200px;
}

/* ── Hộp thoại Đăng nhập (Authentication Dialog) ── */
/* ── Màn hình Đăng nhập Toàn trang (screenLogin / Auth Guard) ── */
.screen.screen-auth {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 16px;
  min-height: calc(100dvh - 100px);
}

.screen.screen-auth.on {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-height: 700px) {
  .screen.screen-auth.on {
    align-items: flex-start;
  }
}

.auth-page-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  width: 100%;
  max-width: 980px;
}

.auth-page-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 12px;
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
}

.hero-title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--ds-primary-hover);
}

.hero-tagline {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--app-text-primary);
  margin: 0;
}

.hero-features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--app-text-primary);
  box-shadow: 0 2px 8px rgba(45, 51, 58, 0.04);
}

.feat-icon {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-page-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--app-border);
  border-radius: 24px;
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(45, 51, 58, 0.08);
}

.auth-card-header {
  text-align: center;
  margin-bottom: 20px;
}

.auth-logo-mobile {
  display: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin: 0 auto 10px;
}

.auth-card-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--ds-primary-hover);
  letter-spacing: -0.3px;
  margin: 0;
}

.auth-card-sub {
  font-size: 13px;
  color: var(--app-text-secondary);
  margin: 6px 0 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.auth-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--app-text-primary);
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon .field-icon {
  position: absolute;
  left: 12px;
  font-size: 15px;
  pointer-events: none;
  opacity: 0.7;
}

.input-with-icon input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 38px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 14px;
  color: var(--app-text-primary);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.input-with-icon input:focus {
  border-color: var(--ds-primary-hover);
  box-shadow: 0 0 0 3px rgba(14, 138, 95, 0.15);
}

.pwd-toggle {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  opacity: 0.6;
}

.pwd-toggle:hover {
  opacity: 1;
}

.auth-error {
  background: #fee2e2;
  border: 1px solid #f87171;
  color: #b91c1c;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  text-align: left;
}

.auth-submit-btn {
  width: 100%;
  height: 46px;
  background: linear-gradient(135deg, var(--ds-primary-hover) 0%, var(--ds-primary-hover) 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(14, 138, 95, 0.25);
}

.auth-submit-btn:hover {
  background: linear-gradient(135deg, var(--ds-primary-hover) 0%, var(--ds-primary-hover) 100%);
  box-shadow: 0 6px 16px rgba(14, 138, 95, 0.35);
}

.auth-submit-btn:active {
  transform: scale(0.99);
}

.btn-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: 14px 0;
  text-align: center;
  color: var(--app-text-secondary);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e5e7eb;
}

.auth-divider span {
  padding: 0 10px;
}

.google-btn-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 6px;
}

.google-btn-container:empty {
  display: none;
}

.auth-google-btn {
  width: 100%;
  height: 44px;
  background: #ffffff;
  color: #374151;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.auth-google-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.google-icon {
  width: 18px;
  height: 18px;
}

.auth-footer {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  color: var(--app-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.auth-footer a {
  color: var(--ds-primary-hover);
  text-decoration: none;
}

.auth-footer a:hover {
  text-decoration: underline;
}

.auth-footer-dot {
  opacity: 0.5;
}

@media (max-width: 860px) {
  .auth-page-container {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  .auth-page-hero {
    display: none;
  }

  .auth-logo-mobile {
    display: block;
  }

  .auth-page-card {
    padding: 24px 18px 20px;
  }
}

@media (max-width: 480px) {
  .screen.screen-auth {
    padding: 16px 12px;
  }
  .auth-page-card {
    padding: 20px 14px 16px;
    border-radius: 16px;
  }
  .auth-card-title {
    font-size: 21px;
  }
  .auth-card-header {
    margin-bottom: 14px;
  }
  .auth-divider {
    margin: 10px 0;
  }
  .auth-footer {
    margin-top: 14px;
    font-size: 11.5px;
  }
}

@media (max-width: 360px) {
  .input-with-icon input {
    padding: 0 34px 0 32px;
    font-size: 13px;
  }
}

/* ── Popup User Info Dropdown ── */
.user-menu-container {
  position: relative;
  display: inline-block;
}

.user-popup-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(260px, calc(100vw - 24px));
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--app-border);
  padding: 8px 0;
  z-index: 100;
  animation: popupFadeIn 0.15s ease-out;
}

@keyframes popupFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-popup-menu.hidden {
  display: none;
}

.user-popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}

.user-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EEF2F6;
  color: var(--ds-primary-hover);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}

.user-info-text {
  min-width: 0;
  flex: 1;
}

.user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--app-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-email {
  font-size: 12px;
  color: var(--app-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-popup-divider {
  margin: 4px 0;
  border: none;
  border-top: 1px solid var(--app-border);
}

.user-popup-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: transparent;
  border: none;
  color: var(--app-text-primary);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.user-popup-item:hover {
  background: var(--app-surface-subtle);
}

.user-popup-item.logout {
  color: #ef4444;
}

.user-popup-item.logout:hover {
  background: #fef2f2;
}

.item-icon {
  font-size: 16px;
}

/* ── Hộp thoại Góp ý / Báo lỗi (Feedback Dialog) ── */
.feedback-dialog {
  border: none;
  border-radius: 20px;
  padding: 0;
  background: transparent;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  max-width: 460px;
  width: min(460px, calc(100vw - 24px));
}

.feedback-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.feedback-card {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  padding: 24px 20px 18px;
  display: flex;
  flex-direction: column;
}

.feedback-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--app-text-primary);
  text-align: center;
  margin-bottom: 6px;
}

.feedback-source {
  font-size: 13px;
  color: var(--app-text-secondary);
  font-style: italic;
  margin-bottom: 14px;
  text-align: center;
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feedback-field textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--app-text-primary);
  background: #fff;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.feedback-field textarea:focus {
  border-color: var(--ds-primary-hover);
  box-shadow: 0 0 0 3px rgba(14, 138, 95, 0.15);
}

.feedback-attach-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-pick-image {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-pick-image:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.feedback-image-name {
  font-size: 12.5px;
  color: var(--app-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 100px;
}

.btn-remove-image {
  background: #fee2e2;
  border: none;
  color: #b91c1c;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.feedback-preview-card {
  width: 100%;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid #e5e7eb;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-preview-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feedback-error {
  background: #fee2e2;
  border: 1px solid #f87171;
  color: #b91c1c;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  text-align: left;
}

.feedback-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.btn-feedback-cancel {
  flex: 1;
  height: 42px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: var(--app-text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-feedback-cancel:hover {
  background: #f3f4f6;
}

.btn-feedback-submit {
  flex: 1;
  height: 42px;
  border: none;
  border-radius: 10px;
  background: var(--ds-primary-hover);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s, transform 0.1s;
}

.btn-feedback-submit:hover {
  background: var(--ds-primary-hover);
}

.btn-feedback-submit:active {
  transform: scale(0.99);
}

/* ── Hộp thoại Bộ đề thi từ máy chủ (Question Sets) ── */
.qsets-search-wrap {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  max-width: 380px;
  margin: 0 12px;
}

.qsets-search-wrap .search-icon {
  position: absolute;
  left: 10px;
  font-size: 13px;
  pointer-events: none;
  opacity: 0.6;
}

.qsets-search-wrap input {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 30px;
  border-radius: 8px;
  border: 1.5px solid var(--app-border);
  font-size: 13.5px;
  color: var(--app-text-primary);
  background: var(--app-surface);
  outline: none;
  transition: border-color 0.15s;
}

.qsets-search-wrap input:focus {
  border-color: var(--ds-primary-hover);
}

.btn-refresh {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-refresh:hover {
  background: var(--app-surface-subtle);
}

.qsets-body {
  min-height: 320px;
  max-height: 72vh;
  overflow-y: auto;
  padding: 14px;
}

.qsets-state-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 16px;
  color: var(--app-text-secondary);
  font-size: 14px;
  text-align: center;
}

.qsets-state-box.error {
  color: #b91c1c;
}

.btn-spinner.large {
  width: 32px;
  height: 32px;
  border-width: 3px;
  border-color: #cbd5e1;
  border-top-color: var(--ds-primary-hover);
}

.qsets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}

@media (max-width: 640px) {
  .qsets-dialog .dlg-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .qsets-dialog .dlg-head h2 {
    grid-column: 1 / 2;
    font-size: 16px;
  }
  #qsetsCloseBtn {
    grid-column: 2 / 3;
  }
  .qsets-search-wrap {
    grid-column: 1 / -1;
    max-width: 100%;
    margin: 4px 0;
    width: 100%;
  }
  #qsetsRefreshBtn {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

.qset-card {
  background: #ffffff;
  border: 1.5px solid var(--app-border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.qset-card:hover {
  border-color: var(--ds-primary-border);
  box-shadow: 0 6px 16px rgba(14, 138, 95, 0.08);
  transform: translateY(-2px);
}

.qset-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.qset-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--app-text-primary);
  line-height: 1.35;
}

.qset-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qset-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--app-surface-subtle);
  color: var(--app-text-secondary);
}

.qset-badge.subject {
  background: var(--ds-primary-soft);
  color: var(--ds-primary);
}

.qset-badge.grade {
  background: #f0fdf4;
  color: #15803d;
}

.qset-badge.status {
  background: #fefce8;
  color: #a16207;
}

.qset-meta {
  font-size: 12.5px;
  color: var(--app-text-secondary);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.qset-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.qset-actions button {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  min-height: 40px;
}

.btn-qset-save {
  background: var(--ds-primary-hover);
  color: #fff;
  border: none;
}

.btn-qset-save:hover {
  background: var(--ds-primary-hover);
}

.btn-qset-preview {
  background: #fff;
  border: 1.5px solid var(--app-border);
  color: var(--app-text-primary);
}

.btn-qset-preview:hover {
  background: var(--app-surface-subtle);
  border-color: #cbd5e1;
}

/* ── Hộp thoại Nhập đáp án từ Excel ─────────────────────────────────────── */
.excel-dialog {
  max-width: 820px;
  width: min(820px, calc(100vw - 24px));
}

.excel-import-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 68vh;
  overflow-y: auto;
  padding: 4px 0;
}

.excel-template-banner {
  background: linear-gradient(135deg, #f0fdf4 0%, var(--ds-primary-soft) 100%);
  border: 1.5px solid var(--ds-primary-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.template-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-primary-hover);
}

.template-desc {
  font-size: 12.5px;
  color: #334155;
  margin-top: 2px;
}

.template-download-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-template-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #ffffff;
  color: var(--ds-primary-hover);
  border: 1.5px solid var(--ds-primary-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-template-download:hover {
  background: #f0f9ff;
  border-color: var(--ds-primary-hover);
  color: var(--ds-primary-hover);
  transform: translateY(-1px);
}

.excel-dropzone {
  border: 2px dashed #94a3b8;
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.excel-dropzone:hover,
.excel-dropzone.dragover {
  border-color: var(--ds-primary-hover);
  background: var(--ds-primary-soft);
}

.dropzone-icon {
  font-size: 32px;
  line-height: 1;
}

.dropzone-text {
  font-size: 13.5px;
  color: #475569;
}

.dropzone-text strong {
  color: #0f172a;
}

.excel-error-box {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  border-radius: 10px;
  padding: 14px 16px;
  color: #991b1b;
}

.excel-error-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.excel-error-list {
  font-size: 13px;
  line-height: 1.6;
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.excel-error-item {
  display: flex;
  gap: 6px;
}

.excel-error-item .row-badge {
  font-weight: 700;
  background: #fee2e2;
  color: #b91c1c;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  height: fit-content;
}

.excel-preview-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preview-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-summary {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

.preview-filename {
  font-size: 12.5px;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 500;
}

.excel-keys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 12px;
  max-height: 280px;
  overflow-y: auto;
  padding: 2px;
}

.excel-key-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s ease;
}

.excel-key-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.excel-key-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.excel-key-code {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.excel-key-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: #f0fdf4;
  color: #166534;
}

.excel-key-badge.exists {
  background: #fefce8;
  color: #854d0e;
}

.excel-key-meta {
  font-size: 12.5px;
  color: #64748b;
  display: flex;
  gap: 8px;
}

.excel-key-actions {
  display: flex;
  margin-top: 4px;
}

.btn-preview-key-card {
  width: 100%;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-preview-key-card:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.excel-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--app-border);
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .template-download-buttons {
    flex-direction: column;
    width: 100%;
  }
  .btn-template-download {
    width: 100%;
    justify-content: center;
  }
  .excel-foot {
    flex-direction: column-reverse;
    width: 100%;
  }
  .excel-foot button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

/* ── Kho Mẫu phiếu & Đáp án Excel (Template Gallery) ─────────────────────── */
.template-gallery-dialog {
  max-width: 960px;
  width: min(960px, calc(100vw - 24px));
}

.gallery-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery-head-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  flex-wrap: wrap;
}

.gallery-head-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 200px;
}

.gallery-head-subtitle {
  font-size: 13px;
  color: #64748b;
}

.template-gallery-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  width: 100%;
}

.gallery-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gallery-tab:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.gallery-tab.active {
  background: var(--ds-primary-hover);
  border-color: var(--ds-primary-hover);
  color: #fff;
}

@media (max-width: 520px) {
  .gallery-head-top {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .gallery-tab {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    font-size: 12px;
  }
}

.template-gallery-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px 2px;
}

.template-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 14px;
}

.gallery-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.gallery-card:hover {
  transform: translateY(-2px);
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.gallery-card-thumb {
  position: relative;
  background: #f8fafc;
  height: 180px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
}

.gallery-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.3s ease;
}

.gallery-card-thumb:hover img {
  transform: scale(1.04);
}

.gallery-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
}

.gallery-card-thumb:hover .gallery-thumb-overlay {
  opacity: 1;
}

.gallery-excel-icon-box {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: #f0fdf4;
  border: 2px solid #bbf7d0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #16a34a;
}

.gallery-card-content {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.gallery-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

.gallery-card-desc {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.45;
  flex: 1;
}

.gallery-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.gallery-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
}

.gallery-tag.pdf {
  background: #fee2e2;
  color: #b91c1c;
}

.gallery-tag.excel {
  background: #f0fdf4;
  color: #15803d;
}

.gallery-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.gallery-card-actions a,
.gallery-card-actions button {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 38px;
}

@media (max-width: 420px) {
  .gallery-card-actions {
    flex-direction: column;
  }
}

.btn-gallery-preview {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  color: #334155;
}

.btn-gallery-preview:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.btn-gallery-download {
  background: var(--ds-primary-hover);
  border: 1.5px solid var(--ds-primary-hover);
  color: #fff;
}

.btn-gallery-download:hover {
  background: var(--ds-primary-hover);
  border-color: var(--ds-primary-hover);
}

.btn-gallery-download.excel-btn {
  background: #16a34a;
  border-color: #16a34a;
}

.btn-gallery-download.excel-btn:hover {
  background: #15803d;
  border-color: #15803d;
}

/* ── Modal xem trước phóng to mẫu phiếu OMR ─────────────────────────────── */
.template-preview-dialog {
  max-width: 900px;
  width: min(900px, calc(100vw - 24px));
  max-height: 92vh;
}

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.preview-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.template-preview-body {
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px;
}

.preview-img-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.preview-img-container img {
  max-width: 100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #fff;
}

/* ── Progressive Web App (PWA) Styling ───────────────────────────────────── */
.appbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-install-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--ds-primary), var(--ds-primary));
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(14, 138, 95, 0.25);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-install-app:hover {
  background: linear-gradient(135deg, var(--ds-primary), var(--ds-primary-hover));
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(14, 138, 95, 0.35);
}

.btn-install-app:active {
  transform: translateY(0);
}

.btn-install-app.hidden {
  display: none !important;
}

@media (max-width: 480px) {
  .btn-install-app {
    padding: 5px 8px;
    font-size: 11.5px;
  }
}

/* ── Banner Mời Cài đặt PWA trên điện thoại ──────────────────────────────── */
.pwa-install-banner {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, calc(100vw - 24px));
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 1000;
  animation: pwaSlideUpFade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}

@keyframes pwaSlideUpFade {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.pwa-install-banner.hidden {
  display: none !important;
}

.pwa-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.pwa-banner-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.pwa-banner-text {
  flex: 1;
  min-width: 0;
}

.pwa-banner-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.pwa-banner-desc {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-btn-install {
  background: var(--ds-primary);
  color: #ffffff;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.pwa-btn-install:hover {
  background: var(--ds-primary);
  transform: translateY(-1px);
}

.pwa-btn-dismiss {
  background: transparent;
  border: none;
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pwa-btn-dismiss:hover {
  background: #f1f5f9;
  color: #475569;
}

/* ── Hộp thoại Hướng dẫn iOS Safari ──────────────────────────────────────── */
.ios-install-dialog {
  max-width: 440px;
  width: min(440px, calc(100vw - 24px));
  max-height: 90dvh;
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
  padding: 0;
  overflow: hidden;
}

.ios-install-dialog::backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}

.ios-guide-body {
  padding: 20px;
  max-height: calc(90dvh - 64px);
  overflow-y: auto;
}

.ios-guide-header {
  text-align: center;
  margin-bottom: 18px;
}

.ios-guide-logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  margin: 0 auto 10px;
  display: block;
}

.ios-guide-header p {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.4;
  margin: 0;
}

.ios-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ios-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--ds-primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 50%;
  flex-shrink: 0;
}

.step-content {
  font-size: 13.5px;
  line-height: 1.4;
  color: #1e293b;
  flex: 1;
}

.ios-icon {
  display: inline-block;
  padding: 2px 6px;
  background: #e2e8f0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
}

/* ── Chống iOS Safari & Chrome Mobile tự động phóng to (auto-zoom) khi chạm ô nhập ── */
@media screen and (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
  select,
  textarea,
  .field input,
  .part-body input,
  .p2-scale input,
  .search input {
    font-size: 16px !important;
    touch-action: manipulation;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HAMBURGER BUTTON & SLIDE-OUT DRAWER (GITHUB STYLE)
   ═══════════════════════════════════════════════════════════════════════════ */

.hamburger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.hamburger-btn:hover {
  background: var(--app-surface-subtle);
  border-color: var(--app-text-secondary);
}

.hamburger-btn:active {
  transform: scale(0.95);
}

.hamburger-icon {
  stroke: var(--app-text-primary);
  transition: stroke 0.15s ease;
}

/* ── Lớp phủ nền mờ (Overlay) ────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Thanh Menu Trượt (Nav Drawer) ───────────────────────────────────────── */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 330px;
  max-width: 86vw;
  background: var(--app-surface);
  z-index: 999;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 28px rgba(15, 23, 42, 0.18);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.nav-drawer.active {
  transform: translateX(0);
}

/* Drawer Header */
.drawer-header {
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--app-divider);
  flex-shrink: 0;
}

.drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.drawer-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 6px;
}

.drawer-app-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--app-text-primary);
}

.drawer-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--app-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.drawer-close-btn:hover {
  background: var(--app-surface-subtle);
  color: var(--app-text-primary);
}

/* Thẻ người dùng trong Drawer */
.drawer-user-card {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(67, 201, 147, 0.08), rgba(14, 138, 95, 0.08));
  border-bottom: 1px solid var(--app-divider);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.drawer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--app-surface);
  border: 2px solid var(--app-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.drawer-user-details {
  flex: 1;
  min-width: 0;
}

.drawer-user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--app-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-user-email {
  font-size: 12px;
  color: var(--app-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.drawer-role-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: #e6f4ea;
  color: #137333;
  border: 1px solid rgba(19, 115, 51, 0.2);
}

.drawer-role-badge.role-admin {
  background: #fce8e6;
  color: #c5221f;
  border-color: rgba(197, 34, 31, 0.2);
}

.drawer-role-badge.role-manager {
  background: #fef7e0;
  color: #b06000;
  border-color: rgba(176, 96, 0, 0.2);
}

.drawer-role-badge.role-student {
  background: var(--ds-primary-soft);
  color: var(--ds-primary);
  border-color: rgba(14, 138, 95, 0.2);
}

/* Drawer Navigation Links */
.drawer-nav {
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--app-text-primary);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.drawer-nav-item:hover {
  background: var(--app-surface-subtle);
  color: var(--app-text-primary);
}

.drawer-nav-item.active {
  background: rgba(67, 201, 147, 0.12);
  color: var(--app-accent-dark);
}

.nav-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.nav-item-label {
  flex: 1;
}

.nav-item-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: var(--app-surface-subtle);
  color: var(--app-text-secondary);
}

.drawer-nav-item.active .nav-item-badge {
  background: var(--app-accent);
  color: #fff;
}

.drawer-divider {
  height: 1px;
  background: var(--app-divider);
  margin: 6px 4px;
}

.drawer-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--app-text-muted);
  padding: 6px 12px 2px;
}

/* Drawer Quick Section (GitHub Top Repositories Style) */
.drawer-quick-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--app-divider);
  padding: 10px 10px 14px;
  background: var(--app-surface);
}

.drawer-quick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.drawer-quick-tabs {
  display: flex;
  gap: 4px;
  background: var(--app-surface-subtle);
  padding: 3px;
  border-radius: 8px;
}

.drawer-tab-btn {
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--app-text-secondary);
  transition: all 0.15s ease;
}

.drawer-tab-btn.active {
  background: var(--app-surface);
  color: var(--app-text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.drawer-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawer-refresh-btn:hover {
  background: var(--app-surface-subtle);
  color: var(--app-text-primary);
}

.drawer-quick-search-box {
  position: relative;
  margin-bottom: 8px;
}

.drawer-quick-search-box .search-svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  stroke: var(--app-text-muted);
  pointer-events: none;
}

.drawer-quick-search-box input {
  width: 100%;
  height: 30px;
  padding: 0 8px 0 28px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-subtle);
  color: var(--app-text-primary);
  outline: none;
}

.drawer-quick-search-box input:focus {
  border-color: var(--app-accent);
  background: var(--app-surface);
}

.drawer-quick-list {
  flex: 1;
  overflow-y: auto;
  min-height: 100px;
  display: flex;
  flex-direction: column;
}

.drawer-quick-loading,
.drawer-quick-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--app-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.drawer-quick-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer-quick-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--app-surface-subtle);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.drawer-quick-item:hover {
  background: #f0fdf4;
  border-color: rgba(67, 201, 147, 0.4);
}

.drawer-quick-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--app-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-quick-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--app-text-secondary);
}

.drawer-item-chip {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  background: #e2e8f0;
  color: #475569;
}

.drawer-item-chip.chip-omr {
  background: #dcfce7;
  color: #15803d;
}

.drawer-item-chip.chip-online {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-hover);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCREENS: KHO ĐỀ & BÀI KIỂM TRA (FULL VIEW)
   ═══════════════════════════════════════════════════════════════════════════ */

.screen-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.screen-page-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.screen-title-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.screen-heading {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--app-text-primary);
}

.screen-subheading {
  font-size: 13.5px;
  color: var(--app-text-secondary);
}

.badge-accent {
  font-size: 13px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 12px;
  background: rgba(67, 201, 147, 0.15);
  color: var(--app-accent-dark);
}

/* Filter Toolbar */
.filter-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 260px;
}

.search-box input {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 36px;
  font-size: 13.5px;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text-primary);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-box input:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(67, 201, 147, 0.15);
}

.search-box .search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
}

.search-box .btn-clear-search {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--app-text-muted);
  cursor: pointer;
  font-size: 12px;
}

.filter-select {
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--app-text-primary);
  outline: none;
  cursor: pointer;
}

.filter-select:focus {
  border-color: var(--app-accent);
}

/* Tabs phân loại hình thức */
.exam-type-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.exam-type-tab {
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text-primary);
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.exam-type-tab:hover {
  background: var(--app-surface-subtle);
}

.exam-type-tab.active {
  background: var(--app-accent);
  color: #fff;
  border-color: var(--app-accent);
  box-shadow: 0 2px 6px rgba(67, 201, 147, 0.25);
}

/* Trạng thái tải / Trống / Lỗi */
.page-state-box {
  padding: 48px 24px;
  text-align: center;
  background: var(--app-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.page-state-box .state-icon {
  font-size: 40px;
}

.page-state-box .state-text {
  font-size: 15px;
  color: var(--app-text-secondary);
  max-width: 400px;
  margin: 0;
}

.page-state-box.error {
  border: 1px solid rgba(255, 94, 99, 0.3);
  background: #fffafa;
}

/* Grid thẻ Kho đề & Bài kiểm tra */
.qsets-cards-grid,
.exams-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

/* Thẻ Card Đề thi (Question Set Card) */
.qset-card-v2 {
  background: var(--app-surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  box-shadow: var(--shadow-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.qset-card-v2:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised);
  border-color: var(--app-accent);
}

.qset-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.qset-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--app-text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qset-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qset-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--app-surface-subtle);
  color: var(--app-text-primary);
}

.qset-badge.subject {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-hover);
}

.qset-badge.grade {
  background: #fef3c7;
  color: #92400e;
}

.qset-badge.status {
  background: #dcfce7;
  color: #15803d;
}

.qset-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--app-text-secondary);
  flex-wrap: wrap;
}

.qset-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--app-divider);
}

.qset-card-actions button {
  flex: 1;
  height: 34px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-card-preview {
  background: var(--app-surface-subtle);
  border: 1px solid var(--app-border);
  color: var(--app-text-primary);
  transition: all 0.15s ease;
}

.btn-card-preview:hover {
  background: #e2e8f0;
}

.btn-card-use {
  background: var(--app-accent);
  border: 1px solid var(--app-accent);
  color: #fff;
  transition: all 0.15s ease;
}

.btn-card-use:hover {
  background: var(--app-accent-dark);
}

/* Thẻ Card Bài kiểm tra (Exam Card) */
.exam-card-v2 {
  background: var(--app-surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  box-shadow: var(--shadow-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.exam-card-v2:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised);
  border-color: var(--ds-primary);
}

.exam-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.exam-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--app-text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.exam-chip-delivery {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.exam-chip-delivery.delivery-omr {
  background: #dcfce7;
  color: #15803d;
}

.exam-chip-delivery.delivery-online {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-hover);
}

.exam-chip-delivery.delivery-essay {
  background: #fef3c7;
  color: #b45309;
}

.exam-card-info-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: var(--app-text-secondary);
}

.exam-info-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.exam-info-label {
  color: var(--app-text-muted);
}

.exam-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--app-divider);
}

.exam-card-actions button {
  flex: 1;
  height: 34px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-card-omr-grade {
  background: #10b981;
  border: 1px solid #10b981;
  color: #fff;
  transition: all 0.15s ease;
}

.btn-card-omr-grade:hover {
  background: #059669;
}

/* Detail Modals */
.server-detail-dialog {
  max-width: 680px;
  width: 92vw;
}

.server-detail-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--app-text-muted);
  margin-top: 6px;
}

.detail-grid-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.detail-info-item {
  background: var(--app-surface-subtle);
  padding: 8px 12px;
  border-radius: 8px;
}

.detail-info-item .item-label {
  font-size: 11px;
  color: var(--app-text-muted);
}

.detail-info-item .item-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--app-text-primary);
  margin-top: 2px;
}

.detail-parts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-part-card {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--app-surface);
}

.detail-part-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--app-text-primary);
}

/* ══ Modal Xem Chi Tiết Đề Thi (Chuẩn MSchool v3 ExamViewer) ══ */
dialog:not([open]).exam-detail-modal {
  display: none !important;
}

dialog[open].exam-detail-modal {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-width: 1000px !important;
  width: 92vw !important;
  max-height: 90vh !important;
  height: 90vh !important;
  border-radius: 8px !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden !important;
  z-index: 10000 !important;
}

dialog.exam-detail-modal::backdrop {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(4px) !important;
}

.exam-detail-modal-head {
  background: var(--ds-primary-hover) !important;
  color: #ffffff !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  flex-shrink: 0;
  height: 52px;
  box-sizing: border-box;
}

.exam-detail-head-left {
  flex: 1;
  min-width: 0;
}

.exam-detail-head-title {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exam-detail-head-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.exam-detail-head-count {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}

.exam-detail-close-btn {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 20px !important;
  cursor: pointer !important;
  padding: 2px 8px !important;
  line-height: 1 !important;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.exam-detail-close-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.exam-detail-modal-body {
  padding: 20px !important;
  background: #f8fafc !important;
  overflow-y: auto !important;
  flex: 1 1 auto;
  max-height: calc(90vh - 52px) !important;
  -webkit-overflow-scrolling: touch;
}

/* Thẻ tiêu đề bộ đề thi */
.exam-viewer-title-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 18px 20px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Banner phần đính kèm / đoạn văn */
.exam-viewer-section-banner {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-hover);
  border: 1px solid var(--ds-primary-border);
  border-radius: 6px;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 14px;
}

.exam-viewer-section-banner .section-banner-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exam-viewer-section-banner .section-banner-stats {
  font-size: 13px;
  color: var(--ds-primary);
  font-weight: 500;
}

.exam-viewer-passage-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 16px;
  line-height: 1.6;
  font-size: 14px;
  color: #334155;
}

/* Tiêu đề phân nhóm / phần thi */
.exam-viewer-part-heading {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 16px 0 14px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Grid câu hỏi 2 cột */
.exam-viewer-questions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .exam-viewer-questions-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Card từng câu hỏi */
.exam-viewer-qcard {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.qcard-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qcard-num-badge {
  background: var(--ds-primary-hover);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 6px;
}

.qcard-score-badge {
  background: #ffffff;
  border: 1px solid #9ca3af;
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
}

.qcard-level-chip {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  color: #fff;
  background: #64748b;
}

.qcard-level-chip.level-nb { background: #3b82f6; }
.qcard-level-chip.level-th { background: #06b6d4; }
.qcard-level-chip.level-vd { background: #f59e0b; }
.qcard-level-chip.level-vdc { background: #ef4444; }

.qcard-content {
  font-size: 14px;
  line-height: 1.6;
  color: #1f2937;
}

.qcard-content p {
  margin: 0 0 6px 0;
}

.qcard-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.qcard-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.qcard-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-size: 13.5px;
  line-height: 1.4;
  transition: all 0.15s ease;
}

.qcard-opt.is-correct {
  background: #e8f5e9;
  border-color: #a7f3d0;
  color: #166534;
  font-weight: 500;
}

.opt-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.opt-icon-circle {
  width: 15px;
  height: 15px;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  display: inline-block;
}

.opt-icon-check {
  color: #16a34a;
  width: 18px;
  height: 18px;
}

.opt-label {
  font-weight: 700;
  flex-shrink: 0;
}

.opt-text {
  flex: 1;
}

.qcard-short-answer {
  background: #e8f5e9;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: #166534;
  display: flex;
  gap: 8px;
  align-items: center;
}

.short-answer-label {
  font-weight: 600;
}

.short-answer-val {
  font-weight: 700;
}

.qcard-solution {
  font-size: 12.5px;
  color: #854d0e;
  background: #fef9c3;
  border: 1px solid #fef08a;
  padding: 8px 10px;
  border-radius: 6px;
  margin-top: 6px;
  line-height: 1.5;
}

.exam-viewer-empty {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GIAO DIỆN BẢNG DỮ LIỆU KHO ĐỀ THI (DATA TABLE) - CHUẨN MSCHOOL V3
   ═══════════════════════════════════════════════════════════════════════════ */

.screen.screen-qsets {
  padding: 16px 24px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Tối ưu toàn màn hình Kho đề & Bài kiểm tra: Cố định tuyệt đối khung nhìn (Zero window scroll), chặn rubber-band bounce iOS Safari */
html.view-qsets,
html.view-exams,
body.view-qsets,
body.view-exams {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  overscroll-behavior-x: none !important;
  -webkit-overflow-scrolling: auto !important;
}

body.view-qsets .appfooter,
body.view-exams .appfooter {
  display: none !important;
}

body.view-qsets .appbar,
body.view-exams .appbar {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  touch-action: none !important;
  user-select: none !important;
  width: 100% !important;
}

body.view-qsets .appmain,
body.view-exams .appmain {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #f5f7fa !important;
  touch-action: none !important;
  box-sizing: border-box !important;
}

body.view-qsets .screen.screen-qsets.on,
body.view-exams .screen.screen-exams.on {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #f5f7fa !important;
}

@media (max-width: 768px) {
  body.view-qsets .screen.screen-qsets.on,
  body.view-exams .screen.screen-exams.on {
    padding: 6px 6px !important;
  }
}

@media (min-width: 1920px) {
  .screen.screen-qsets {
    padding: 20px 36px !important;
  }
}

/* Thanh công cụ trên cùng: Nút Thêm mới + Tìm kiếm */
.qsets-top-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  width: 100%;
}

.qsets-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-primary-add {
  background: var(--ds-primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 4px rgba(14, 138, 95, 0.2);
}

.btn-primary-add:hover {
  background: var(--ds-primary);
  box-shadow: 0 4px 8px rgba(14, 138, 95, 0.3);
}

.btn-primary-add:active {
  background: var(--ds-primary-hover);
}

.btn-crumb-home {
  background: #fff;
  color: #595959;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-crumb-home:hover {
  color: var(--ds-primary);
  border-color: var(--ds-primary);
  background: #f0f7ff;
}

.qsets-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qsets-table-search-box {
  position: relative;
  width: 280px;
}

.btn-search-toggle {
  background: none;
  border: none;
  padding: 0;
  display: contents;
  cursor: pointer;
}

.qsets-table-search-box input {
  width: 100%;
  height: 34px;
  padding: 6px 30px 6px 32px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  color: #262626;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.qsets-table-search-box input:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px rgba(14, 138, 95, 0.15);
}

.qsets-table-search-box .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #8c8c8c;
  pointer-events: none;
}

.qsets-table-search-box .btn-clear-search {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #8c8c8c;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
  line-height: 1;
}

.qsets-table-search-box .btn-clear-search:hover {
  color: #262626;
}

/* Thanh thao tác hàng loạt */
.qsets-bulk-bar {
  background: var(--ds-primary-soft);
  border: 1px solid var(--ds-primary-border);
  border-radius: 6px;
  padding: 8px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ds-primary-hover);
  animation: fadeInDown 0.2s ease;
}

.qsets-bulk-bar.hidden {
  display: none;
}

.bulk-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-bulk-act {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-bulk-omr {
  background: var(--ds-primary);
  color: #fff;
  border: none;
}

.btn-bulk-omr:hover {
  background: var(--ds-primary);
}

.btn-bulk-cancel {
  background: #fff;
  color: #595959;
  border: 1px solid #d9d9d9;
}

.btn-bulk-cancel:hover {
  background: #fafafa;
  color: #262626;
}

/* Card chứa bảng dữ liệu: Tràn viền 100% full-width, tự co giãn theo chiều cao màn hình */
.qsets-table-card {
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.qsets-table-wrapper {
  flex: 1;
  min-height: 0;
  overflow: auto;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #bfbfbf #f5f5f5;
}

.qsets-table-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.qsets-table-wrapper::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}

.qsets-table-wrapper::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 3px;
}

.qsets-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #8c8c8c;
}

/* Bảng dữ liệu: table-layout fixed, kích thước cột chuẩn xác, đủ không gian thoáng */
.qsets-data-table {
  width: 100% !important;
  min-width: 1220px !important;
  table-layout: fixed !important;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
  color: #262626;
  background: #fff;
}

.qsets-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  padding: 11px 12px;
  font-weight: 500 !important;
  color: #595959 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  user-select: none;
  vertical-align: middle;
}

.th-content {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.th-content .sort-glyph {
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1;
}

.th-filter-icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.th-content:hover .th-filter-icon,
.filterable:hover .th-filter-icon {
  fill: var(--ds-primary);
}

/* Ẩn giao diện native select nhưng giữ nguyên chức năng tap/click */
.col-filter-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  z-index: 2;
  border: none;
  outline: none;
}

.col-name.sortable:hover,
.col-score.sortable:hover,
.col-date.sortable:hover {
  cursor: pointer;
  background: #f5f5f5;
}

.col-name.sortable:hover .sort-glyph,
.col-score.sortable:hover .sort-glyph,
.col-date.sortable:hover .sort-glyph {
  color: var(--ds-primary);
}

.btn-th-refresh {
  background: none;
  border: none;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  color: #595959;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-th-refresh:hover {
  color: var(--ds-primary);
  background: #f0f0f0;
}

.btn-th-refresh:active {
  transform: rotate(180deg);
}

/* Rows styling */
.qsets-data-table tbody tr {
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.12s ease;
}

.qsets-data-table tbody tr:hover {
  background: #fafafa;
}

.qsets-data-table tbody tr.row-selected {
  background: #f0f7ff;
}

.qsets-data-table tbody td {
  padding: 11px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
}

/* Định nghĩa kích thước từng cột chuẩn xác, đủ khoảng trống thoáng */
.col-checkbox {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  text-align: center;
  padding: 10px 4px !important;
  box-sizing: border-box;
}

.col-checkbox input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--ds-primary);
}

.col-stt {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  text-align: center;
  color: #8c8c8c;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 10px 4px !important;
  box-sizing: border-box;
}

.col-name {
  width: auto !important;
  min-width: 220px !important;
  padding: 10px 14px !important;
  box-sizing: border-box;
}

th.col-name {
  white-space: nowrap !important;
  text-transform: none !important;
}

td.col-name {
  white-space: normal !important;
  word-break: break-word !important;
}

.col-name-link {
  font-weight: 600;
  color: #1f2937;
  text-decoration: none;
  cursor: pointer;
  display: block;
  line-height: 1.4;
  font-size: 13px;
  word-break: break-word;
  transition: color 0.15s;
}

.col-name-link:hover {
  color: var(--ds-primary);
}

.col-subject {
  width: 115px !important;
  min-width: 115px !important;
  max-width: 125px !important;
  white-space: nowrap !important;
  color: #262626;
  font-size: 13px;
  padding: 10px 12px !important;
  position: relative;
  box-sizing: border-box;
}

.col-grade {
  width: 96px !important;
  min-width: 96px !important;
  max-width: 105px !important;
  white-space: nowrap !important;
  color: #262626;
  font-size: 13px;
  padding: 10px 10px !important;
  position: relative;
  box-sizing: border-box;
}

.col-scope {
  width: 105px !important;
  min-width: 105px !important;
  max-width: 115px !important;
  white-space: nowrap !important;
  text-align: center;
  padding: 10px 10px !important;
  position: relative;
  box-sizing: border-box;
}

/* Scope badges theo phong cách screenshot */
.scope-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  text-align: center;
}

.scope-chip.in_school {
  border: 1px solid #ffa940;
  color: #d46b08;
  background: #fff7e6;
}

.scope-chip.private {
  border: 1px solid var(--ds-primary);
  color: var(--ds-primary-hover);
  background: var(--ds-primary-soft);
}

.scope-chip.shared {
  border: 1px solid #95de64;
  color: #389e0d;
  background: #f6ffed;
}

.col-count {
  width: 95px !important;
  min-width: 95px !important;
  max-width: 105px !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #262626;
  padding: 10px 10px !important;
  box-sizing: border-box;
}

.col-score {
  width: 95px !important;
  min-width: 95px !important;
  max-width: 105px !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 13px;
  color: #262626;
  padding: 10px 10px !important;
  box-sizing: border-box;
}

.col-creator {
  width: 190px !important;
  min-width: 190px !important;
  max-width: 220px !important;
  padding: 10px 12px !important;
  position: relative;
  box-sizing: border-box;
}

.col-date {
  width: 115px !important;
  min-width: 115px !important;
  max-width: 125px !important;
  white-space: nowrap;
  color: #595959;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 10px 12px !important;
  box-sizing: border-box;
}

.creator-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.creator-name {
  font-weight: 500;
  color: #262626;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.creator-email {
  color: #8c8c8c;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.col-actions {
  white-space: nowrap !important;
  text-align: center;
  min-width: 64px !important;
  width: 64px !important;
  max-width: 64px !important;
  padding: 10px 6px !important;
  box-sizing: border-box;
}

/* Cố định cột lựa chọn (checkbox) và cột # (STT) ở cạnh trái, cột thao tác ở cạnh phải */
.qsets-data-table th.col-checkbox,
.qsets-data-table td.col-checkbox {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
}

.qsets-data-table thead th.col-checkbox {
  position: sticky;
  top: 0;
  left: 0;
  background: #fafafa;
  z-index: 6;
}

.qsets-data-table th.col-stt,
.qsets-data-table td.col-stt {
  position: sticky;
  left: 44px;
  background: #fff;
  z-index: 2;
  box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.08);
}

.qsets-data-table thead th.col-stt {
  position: sticky;
  top: 0;
  left: 44px;
  background: #fafafa;
  z-index: 6;
  box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.08);
}

.qsets-data-table th.col-actions,
.qsets-data-table td.col-actions {
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 2;
  box-shadow: -4px 0 8px -2px rgba(0, 0, 0, 0.08);
}

.qsets-data-table thead th.col-actions {
  position: sticky;
  top: 0;
  right: 0;
  background: #fafafa;
  z-index: 6;
  box-shadow: -4px 0 8px -2px rgba(0, 0, 0, 0.08);
}

.qsets-data-table tbody tr:hover td.col-checkbox,
.qsets-data-table tbody tr:hover td.col-stt,
.qsets-data-table tbody tr:hover td.col-actions {
  background: #fafafa;
}

.qsets-data-table tbody tr.row-selected td.col-checkbox,
.qsets-data-table tbody tr.row-selected td.col-stt,
.qsets-data-table tbody tr.row-selected td.col-actions {
  background: #f0f7ff;
}

.row-actions-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-row-act {
  background: none;
  border: none;
  padding: 5px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  color: #595959;
}

.btn-row-act.edit {
  color: var(--ds-primary);
}

.btn-row-act.edit:hover {
  background: var(--ds-primary-soft);
}

.btn-row-act.use-omr {
  color: var(--ds-primary);
}

.btn-row-act.use-omr:hover {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-hover);
}

.btn-row-act.detail {
  color: #595959;
}

.btn-row-act.detail:hover {
  background: #f0f0f0;
  color: #262626;
}

.btn-row-act.view-detail {
  color: var(--ds-primary);
}

.btn-row-act.view-detail:hover {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-hover);
}

/* Khung Card của Bài kiểm tra — chuẩn MSchool v3 */
.exams-table-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.exams-top-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 14px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  touch-action: none !important;
  user-select: none !important;
}

.exams-table-search-box {
  position: relative;
  width: 260px;
}

.exams-table-search-box input {
  width: 100%;
  height: 32px;
  padding: 4px 28px 4px 30px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  color: #262626;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.exams-table-search-box input:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px rgba(14, 138, 95, 0.15);
}

.exams-table-search-box .search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: #8c8c8c;
  pointer-events: none;
}

.exams-table-search-box .btn-clear-search {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #8c8c8c;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
  line-height: 1;
}

.exams-table-wrapper {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x pan-y !important;
  scrollbar-width: thin;
  scrollbar-color: #bfbfbf #f5f5f5;
  background: #fff;
  position: relative !important;
}

.exams-table-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.exams-table-wrapper::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.exams-table-wrapper::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 3px;
}

.exams-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #8c8c8c;
}

@media (max-width: 768px) {
  .exams-top-toolbar {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 8px !important;
  }
  .exams-table-search-box {
    width: 155px;
  }
}

/* Đảm bảo bảng Bài kiểm tra giữ đúng kích thước cột, không bị dồn ép hay lấn chữ */
.exams-data-table {
  width: 100% !important;
  min-width: 1300px !important;
  table-layout: fixed !important;
}

/* Kích thước cột bảng Bài kiểm tra */
.exams-data-table .col-actions {
  min-width: 64px !important;
  width: 64px !important;
  max-width: 64px !important;
  text-align: center;
}

/* Thanh phân trang Bài kiểm tra (#examsPaginationFooter) */
#examsPaginationFooter {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 14px !important;
  border-top: 1px solid #f0f0f0 !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  position: static !important;
  width: 100% !important;
  box-sizing: border-box !important;
  touch-action: none !important;
  font-size: 12px !important;
  color: #595959 !important;
  user-select: none !important;
}

#examsPaginationFooter .pg-limit-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

#examsPaginationFooter .pg-limit-select {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  background: #fff;
  color: #262626;
  outline: none;
  cursor: pointer;
  height: 28px;
}

#examsPaginationFooter .pg-info {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: #595959;
}

#examsPaginationFooter .pg-nav-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

#examsPaginationFooter .btn-pg-nav {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: #595959;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

#examsPaginationFooter .btn-pg-nav:hover:not(:disabled) {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
  background: #f0f7ff;
}

#examsPaginationFooter .btn-pg-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: #e8e8e8;
  color: #bfbfbf;
}

#examsPaginationFooter .pg-current-page {
  font-weight: 600;
  color: #1f2937;
  padding: 0 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 768px) {
  #examsPaginationFooter {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: static !important;
  }

  #examsPaginationFooter .pg-limit-wrap {
    gap: 2px;
    font-size: 11px;
  }

  #examsPaginationFooter .pg-limit-wrap span {
    display: none;
  }

  #examsPaginationFooter .pg-limit-wrap::before {
    content: "Hàng:";
    font-size: 11px;
    color: #595959;
  }

  #examsPaginationFooter .pg-limit-select {
    height: 24px;
    padding: 1px 3px;
    font-size: 11px;
  }

  #examsPaginationFooter .pg-info {
    font-size: 11px;
  }

  #examsPaginationFooter .pg-nav-btns {
    gap: 2px;
  }

  #examsPaginationFooter .btn-pg-nav {
    min-width: 22px;
    height: 24px;
    padding: 0 2px;
    font-size: 10.5px;
  }

  #examsPaginationFooter .pg-current-page {
    font-size: 10.5px;
    padding: 0 2px;
  }

  /* Thu gọn cột cố định trên màn hình điện thoại */
  .exams-data-table th.col-checkbox,
  .exams-data-table td.col-checkbox {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 6px 2px !important;
  }

  .exams-data-table th.col-stt,
  .exams-data-table td.col-stt {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    left: 36px !important;
    padding: 6px 2px !important;
  }

  .exams-data-table thead th.col-stt {
    left: 36px !important;
  }

  .exams-data-table th.col-actions,
  .exams-data-table td.col-actions {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    right: 0 !important;
    padding: 4px 4px !important;
  }

  .exams-data-table .row-actions-group {
    gap: 2px !important;
    justify-content: center !important;
  }

  .exams-data-table .btn-row-act {
    width: 26px !important;
    height: 26px !important;
    padding: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .exams-data-table .btn-row-act svg {
    width: 15px !important;
    height: 15px !important;
  }

  .exams-data-table .btn-th-refresh {
    width: 26px !important;
    height: 26px !important;
  }
}

.col-delivery {
  width: 125px !important;
  min-width: 125px !important;
  max-width: 130px !important;
  text-align: center;
  white-space: nowrap !important;
  padding: 10px 10px !important;
  position: relative;
  box-sizing: border-box;
}

.col-class {
  width: 105px !important;
  min-width: 105px !important;
  max-width: 115px !important;
  white-space: nowrap !important;
  /* Nhiều lớp thì cắt bằng "…" (đủ danh sách ở tooltip) — không tràn đè cột ngày bên cạnh. */
  overflow: hidden;
  text-overflow: ellipsis;
  color: #262626;
  font-size: 13px;
  padding: 10px 10px !important;
  position: relative;
  box-sizing: border-box;
}

.col-start,
.col-close {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 160px !important;
  white-space: nowrap !important;
  color: #595959;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  padding: 10px 12px !important;
  box-sizing: border-box;
}

.col-duration {
  width: 160px !important;
  min-width: 160px !important;
  max-width: 170px !important;
  text-align: center;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #262626;
  padding: 10px 12px !important;
  box-sizing: border-box;
}

.col-status {
  width: 115px !important;
  min-width: 115px !important;
  max-width: 120px !important;
  text-align: center;
  white-space: nowrap !important;
  padding: 10px 10px !important;
  position: relative;
  box-sizing: border-box;
}

/* Chip Hình thức thi (Delivery Mode Chip) chuẩn theo ảnh chụp MSchool */
.delivery-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  color: #fff;
}

.delivery-chip.online {
  background: var(--ds-primary);
}

.delivery-chip.offline_omr {
  background: #00b96b;
}

.delivery-chip.offline_essay {
  background: #722ed1;
}

.delivery-chip.mixed {
  background: #fa8c16;
}

/* Chip Trạng thái bài thi (Status Chip) chuẩn theo ảnh chụp MSchool */
.status-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  text-align: center;
  color: #fff;
}

.status-chip.ongoing {
  background: #52c41a;
}

.status-chip.not_started {
  background: var(--ds-primary);
}

.status-chip.finished {
  background: #8c8c8c;
}

.status-chip.draft {
  background: #bfbfbf;
}

/* Icon Buttons trong cột Thao tác của Bài kiểm tra */
.btn-row-act.omr {
  color: #00b96b;
}

.btn-row-act.omr:hover {
  background: #e6fffb;
  color: #00874e;
}

.btn-row-act.results {
  color: #52c41a;
}

.btn-row-act.results:hover {
  background: #f6ffed;
  color: #389e0d;
}

.btn-row-act.download {
  color: #13c2c2;
}

.btn-row-act.download:hover {
  background: #e6fffb;
  color: #08979c;
}

.btn-row-act.test {
  color: #fa8c16;
}

.btn-row-act.test:hover {
  background: #fff7e6;
  color: #d46b08;
}

/* Empty, loading, error state bên trong bảng */
.tbl-state-box {
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #8c8c8c;
}

.tbl-state-box[hidden],
.page-state-box[hidden],
#qsetsPageLoading[hidden],
#qsetsPageEmpty[hidden],
#qsetsPageError[hidden],
#examsPageLoading[hidden],
#examsPageEmpty[hidden],
#examsPageError[hidden] {
  display: none !important;
}

.tbl-state-box .state-icon {
  font-size: 36px;
}

.tbl-state-box.error {
  color: #cf1322;
}

/* Thanh phân trang ở góc dưới bên phải chuẩn theo ảnh mẫu */
.qsets-pagination-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
  font-size: 12.5px;
  color: #595959;
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.03);
}

.pagination-right-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.pagination-select-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagination-label {
  font-size: 12.5px;
  color: #595959;
}

.select-rows-per-page {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  background: #fff;
  color: #262626;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.select-rows-per-page:focus {
  border-color: var(--ds-primary);
}

.pagination-range-text {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12.5px;
  color: #595959;
}

.pagination-nav-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-page-nav {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  min-width: 28px;
  height: 28px;
  padding: 0 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: #595959;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-page-nav:hover:not(:disabled) {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
  background: #f0f7ff;
}

.btn-page-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: #e8e8e8;
  color: #bfbfbf;
}

.page-indicator-text {
  font-weight: 600;
  color: #1f2937;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}

/* Modal "+ Thêm mới đề thi" */
.create-qset-dialog {
  max-width: 580px;
  width: 90vw;
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 0;
}

.create-qset-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.dlg-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.dlg-form-group label {
  font-size: 12.5px;
  font-weight: 600;
  color: #262626;
}

.dlg-form-group .required {
  color: #ff4d4f;
}

.dlg-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dlg-input {
  width: 100%;
  height: 36px;
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  color: #262626;
  outline: none;
  transition: border-color 0.15s;
}

.dlg-input:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px rgba(14, 138, 95, 0.15);
}

@media (max-width: 768px) {
  .screen.screen-qsets {
    padding: 10px 8px !important;
  }

  .qsets-top-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    position: relative;
  }

  .btn-crumb-home {
    display: none !important;
  }

  .btn-primary-add {
    padding: 6px 14px;
    font-size: 13px;
  }

  .qsets-toolbar-right {
    display: flex;
    align-items: center;
  }

  .qsets-table-search-box {
    width: auto;
    position: relative;
    display: flex;
    align-items: center;
  }

  .btn-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    color: #262626;
    background: none;
    border: none;
    transition: background 0.15s ease;
  }

  .btn-search-toggle:hover {
    background: #f0f0f0;
  }

  .btn-search-toggle .search-icon {
    position: static;
    transform: none;
    color: #262626;
    width: 20px;
    height: 20px;
    pointer-events: auto;
  }

  .qsets-table-search-box input {
    display: none;
    width: 165px;
    height: 34px;
    padding: 6px 26px 6px 12px;
    border-radius: 18px;
    font-size: 12.5px;
  }

  .qsets-table-search-box.search-open input {
    display: block;
    animation: searchExpand 0.18s ease;
  }

  .qsets-table-search-box.search-open .btn-search-toggle {
    display: none;
  }

  .qsets-table-card {
    border-radius: 8px;
  }

  .qsets-pagination-footer {
    padding: 8px 12px;
    justify-content: flex-end;
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 5;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
  }

  .pagination-right-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px 10px;
    width: 100%;
  }

  .pagination-select-wrap {
    width: 100%;
    justify-content: flex-end;
    font-size: 12px;
  }

  .pagination-range-text {
    font-size: 12px;
  }

  .btn-page-nav {
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    font-size: 11px;
  }
}

@keyframes searchExpand {
  from {
    width: 40px;
    opacity: 0;
  }
  to {
    width: 165px;
    opacity: 1;
  }
}