/* ===== Thẻ câu hỏi trang giáo viên ===== */

/* Rê chuột lên thẻ hiện bàn tay: báo hiệu bấm được */
.qlist-item {
  cursor: pointer;
}

/* Câu đã chọn: viền xanh lá 2px, nền xanh rất nhạt */
.qlist-item:has(.check:checked) {
  border: 2px solid #30a450;
  background: #f2f8f4;
  box-shadow: none;
  position: relative;
}

/* Nhãn "Đã chọn": nền vàng, chữ xanh rất đậm, góc trên-phải thẻ */
.qlist-item:has(.check:checked)::after {
  content: "Đã chọn";
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #f7df69;
  color: #093f37;
  font-size: 10.5px;
  font-weight: 800;
}
/* ===== Dòng chương / bài: gọn một hàng ===== */

/* Cho phần nội dung của thẻ được phép co lại */
.qlist-item > div {
  min-width: 0;
}

/* Không xuống hàng, phần dư bị ẩn */
.qmeta {
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Các nhãn Lớp, Mức độ, Dạng giữ nguyên kích thước */
.qmeta > .badge {
  flex-shrink: 0;
}

/* Chữ chương, bài, dạng con tự rút ngắn bằng dấu … */
.qmeta > span:not(.badge) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* ===== Xếp đáp án A, B, C, D theo độ dài ===== */
.qopts[data-cot] {
  display: grid;
  column-gap: 20px;
}

.qopts[data-cot="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qopts[data-cot="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Khi xếp 4 hoặc 2 cột thì mỗi đáp án nằm trên một dòng */
.qopts[data-cot="4"] > div,
.qopts[data-cot="2"] > div {
  white-space: nowrap;
  overflow: hidden;
}
/* ===== Số câu khớp bộ lọc: in đậm, màu xanh ===== */
/* ===== Số câu đang hiển thị: chữ nhỏ, cạnh tiêu đề ===== */
#qlistCount {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

#qlistCount b {
  color: var(--primary);
  font-weight: 700;
}
/* ===== Thanh "Đã chọn": đếm theo loại câu ===== */
#selcount {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sel-tong {
  margin-right: 4px;
  color: var(--text-primary);
}

/* Mỗi loại câu là một viên nhỏ nền vàng — nhấn số câu đã chọn */
.sel-loai {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-yellow);
  color: var(--text-on-yellow);
  font-size: 12px;
  font-weight: 600;
}

.sel-loai b {
  color: var(--text-on-yellow);
}
/* ===== Bộ lọc: nhãn bên trái, ô chọn bên phải ===== */
.filter-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);  /* cột nhãn 72px, cột ô chọn lấy phần còn lại */
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Nhãn: chữ đậm vừa, không có khung */
.filter-sidebar .filters .filter-row > label {
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Ô tick "Bài toán thực tế": thẳng hàng với các ô chọn */
.filter-sidebar .filters .filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 80px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.filter-sidebar .filters .filter-check input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #30a450;
}
/* ===== Banner xanh: thu gọn ===== */
.bank-hero {
  padding: 12px 20px;
  margin-bottom: 12px;
  border-radius: 16px;
}

/* Ẩn dòng chữ nhỏ phía trên tiêu đề */
.bank-hero-kicker {
  display: none;
}

/* Cho phần chữ được phép co lại khi cửa sổ hẹp */
.bank-hero > div:first-child {
  min-width: 0;
}

.bank-hero h2 {
  margin: 0 0 2px;
  font-size: 18px;
}

/* Dòng mô tả: một hàng, dài quá thì thành "…" */
.bank-hero p {
  max-width: none;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ô biểu tượng ∑ nhỏ lại */
.bank-hero-badge {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  font-size: 22px;
}
/* ===== Thanh "Đã chọn" nằm trong hàng tiêu đề danh sách ===== */
.qlist-heading {
  gap: 16px;
  flex-wrap: wrap;   /* màn hình hẹp thì thanh tự xuống dòng */
}

.qlist-heading #selcount {
  font-size: 13px;
}

/* Bỏ kiểu "dính đáy màn hình" cũ, thu gọn cho vừa hàng tiêu đề */
.qlist-heading #selbar {
  position: static;
  margin: 0;
  padding: 6px 6px 6px 14px;
  gap: 16px;
  box-shadow: 0 4px 14px rgba(44,94,160,.08);
  flex-shrink: 0;
}
/* ===== Ô thống kê có biểu tượng ===== */
.stat {
  flex-direction: row;      /* biểu tượng bên trái, chữ bên phải */
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 14px 18px;
}

/* Bỏ hình tròn trang trí cũ ở góc */
.stat::before {
  display: none;
}

.stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.stat-icon svg {
  width: 24px;
  height: 24px;
}

.stat-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.stat b {
  font-size: 26px;
}

/* Màu nền của từng ô: tối giản, nền trắng đồng nhất, không chuyển sắc */
.stat-blue,
.stat-purple,
.stat-orange,
.stat-teal { background: #ffffff; }

/* Màu của ô biểu tượng: cùng tông xanh lá đậm, phân biệt bằng độ đậm nhạt */
.stat-blue   .stat-icon { background: #edf3f0; color: #0f6759; }
.stat-purple .stat-icon { background: #f7df69; color: #093f37; }
.stat-orange .stat-icon { background: #fdf6dc; color: #8a6d00; }
.stat-teal   .stat-icon { background: #e4f3e8; color: #30a450; }
/* ===== Ô lọc đang khóa (chưa chọn ô cấp trên) ===== */
.filter-sidebar .filters select:disabled {
  background: #f3f6fa;
  color: #9aa9be;
  cursor: not-allowed;
  box-shadow: none;
}
/* ===== Cửa sổ nhập Word: 7 ô phân loại ===== */
.word-item-fields {
  grid-template-columns: 90px repeat(3, minmax(140px, 1fr)) 120px 170px 70px;
}

@media (max-width: 1000px) {
  .word-item-fields { grid-template-columns: 1fr 1fr; }
}

/* Tên chưa có trong ngân hàng: tô vàng để kiểm tra */
.word-item-fields input.wi-chua-khop {
  background: #fff8db;
  border-color: #f0b429;
}

/* Ẩn khung đáp án trống */
.word-import-item .qopts:empty {
  display: none;
}
/* ===== Bảng cơ cấu đề ===== */
.cc-khung {
  overflow-x: auto;
  margin: 10px 0 16px;
}

.cc-bang {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.cc-bang th,
.cc-bang td {
  padding: 8px 12px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

/* Cột tên phần: canh trái */
.cc-bang tbody th,
.cc-bang tfoot th,
.cc-bang thead th:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}

.cc-bang thead th {
  background: var(--surface-0);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 12px;
}

.cc-bang tfoot th,
.cc-bang tfoot td {
  background: var(--surface-0);
  border-bottom: none;
}

.cc-bang td b {
  color: var(--primary);
}

/* Ô bằng 0: gạch nhạt */
.cc-0 {
  color: #c3cddb;
}

/* Tỉ lệ % nhỏ bên dưới số */
.cc-bang tfoot small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

.cc-tong {
  background: var(--surface-0);
}
/* ===== Khung tạo nhiều mã đề ===== */
.nhieu-ma {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-0);
}

.nhieu-ma-tieude {
  width: 100%;
  font-weight: 700;
  color: var(--text-primary);
}

.nhieu-ma label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.nhieu-ma input[type=number] {
  width: 80px;
}

.nhieu-ma .hint {
  width: 100%;
  margin: 0;
}
/* ===== Nút và cửa sổ "Chú thích đổi câu" ===== */
.exam-tieude {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.exam-tieude .formtitle {
  margin: 0;
}

.nut-chu-thich {
  color: var(--primary);
  border-color: var(--border-accent);
  background: var(--surface-0);
}

/* Nền mờ phủ toàn màn hình */
.ct-nen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16,42,86,.35);
}

.ct-nen.hien {
  display: flex;
}

/* Khung nội dung */
.ct-khung {
  position: relative;
  width: min(720px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 22px 26px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(15,50,43,.18);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

.ct-khung h3 {
  margin: 0 32px 10px 0;
  font-size: 18px;
}

.ct-khung h4 {
  margin: 14px 0 4px;
  font-size: 14px;
  color: var(--primary);
}

.ct-khung p {
  margin: 6px 0;
}

.ct-khung ul,
.ct-khung ol {
  margin: 4px 0;
  padding-left: 22px;
}

.ct-dong {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  font-size: 14px;
}

.ct-bang {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 13px;
}

.ct-bang th,
.ct-bang td {
  padding: 7px 10px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.ct-bang th {
  background: var(--surface-0);
}
/* ===== Biểu tượng bóng đèn ===== */
.nut-chu-thich {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Bóng đèn nhỏ trên nút */
.ico-den {
  width: 16px;
  height: 16px;
  color: #e8a200;
}

/* Tiêu đề cửa sổ: bóng đèn to + chữ */
.ct-tieude {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 36px 12px 0;
}

.ct-tieude h3 {
  margin: 0;
}

.ct-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff4d6;
  color: #e8a200;
}

.ct-icon svg {
  width: 24px;
  height: 24px;
}
/* ===== Cửa sổ Xem trước đề ===== */
.xt-nen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(16,42,86,.45);
}

.xt-nen.hien {
  display: flex;
}

.xt-khung {
  display: flex;
  flex-direction: column;
  width: min(23cm, 100%);
  height: 94vh;
  background: #eef1f6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(16,42,86,.3);
}

/* Thanh công cụ */
.xt-congcu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.xt-congcu label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.xt-congcu select {
  width: auto;
  min-width: 120px;
}

.xt-dapan input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.xt-gian {
  flex: 1;
}

.xt-dong {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
}

.xt-nhac {
  width: 100%;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Vùng cuộn chứa tờ giấy */
.xt-cuon {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

/* Tờ giấy A4 */
.xt-giay {
  box-sizing: border-box;
  width: 21cm;
  min-height: 29.7cm;
  margin: 0 auto;
  background: #fff;
  color: #000;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
}

.xt-giay p {
  margin: 0 0 var(--sau-doan);
  text-align: justify;
}

.xt-giay .xt-tieude {
  text-align: center;
  font-weight: 700;
}

.xt-giay .xt-phan {
  margin-top: 9pt;
  text-align: center;
  font-weight: 700;
}

.xt-giay .xt-thuong {
  white-space: pre-wrap;
}

.xt-trong {
  height: 4pt;
}

/* Phương án A, B, C, D theo vị trí tab của Word */
.xt-pa {
  display: grid;
  margin: 0 0 var(--sau-doan);
  padding-left: 0.53cm;
  text-align: left;
}

.xt-pa-4 { grid-template-columns: 3.7cm 4.24cm 4.23cm 1fr; }
.xt-pa-2 { grid-template-columns: 7.94cm 1fr; }
.xt-pa-1 { grid-template-columns: 1fr; }

.xt-pa .xt-dung {
  color: #0f6759;
}

.xt-md {
  padding-left: 0.6cm;
}

.xt-anh {
  text-align: center !important;
}

.xt-anh.trai {
  text-align: left !important;
  padding-left: 0.53cm;
}

.xt-anh img {
  max-width: 100%;
  max-height: 8cm;
}

/* ===== Khi in: chỉ in tờ đề ===== */
@media print {
  html,
  body.dang-xem-truoc {
    background: none !important;
  }

  body.dang-xem-truoc > *:not(#xemTruocDe) {
    display: none !important;
  }

  #xemTruocDe {
    position: static;
    display: block !important;
    padding: 0;
    background: none;
  }

  #xemTruocDe .xt-khung {
    display: block;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  #xemTruocDe .xt-congcu {
    display: none;
  }

  #xemTruocDe .xt-cuon {
    overflow: visible;
    padding: 0;
  }

  #xemTruocDe .xt-giay {
    width: auto;
    min-height: 0;
    padding: 0 !important;   /* lề do @page đảm nhận */
    box-shadow: none;
  }

  /* Không cắt đôi một câu, không để tên phần đứng một mình cuối trang */
  .xt-khoi {
    break-inside: avoid;
  }
}
/* ===== Tab Soạn đề: chia hai cột, bên phải là "Đề đã lưu" ===== */
.exam-2cot {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
  gap: 22px;
  align-items: stretch;
}

/* Cột trái hẹp lại: Tiêu đề một hàng, Lớp + Thời gian một hàng */
.exam-cot-trai .row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exam-cot-trai .row .field:first-child {
  grid-column: 1 / -1;
}

/* Cột phải */
.exam-cot-phai {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding-left: 22px;
  border-left: 1px solid var(--border);
}

.ddl-tieude {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-primary);
}

.ddl-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-0);
  color: var(--primary);
}

.ddl-icon svg {
  width: 18px;
  height: 18px;
}

.ddl-dangmo {
  font-size: 12.5px;
  color: var(--text-muted);
}

.ddl-dangmo span {
  font-weight: 700;
  color: var(--text-primary);
}

.ddl-nut {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Danh sách: cao bằng cột trái, nhiều đề thì cuộn bên trong */
.ddl-ds {
  flex: 1;
  min-height: 160px;
  contain: size;          /* không làm khung cao thêm theo số đề */
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
}

.ddl-trong {
  margin: 0;
  padding: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.ddl-muc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(78,119,180,.10);
}

.ddl-muc:last-child {
  border-bottom: none;
}

.ddl-muc:hover {
  background: var(--surface-0);
}

.ddl-thongtin {
  flex: 1;
  min-width: 0;
}

.ddl-ten {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.ddl-phu {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Menu "⋯" */
.ddl-them {
  position: relative;
}

.ddl-3cham {
  width: 32px;
  padding-left: 0;
  padding-right: 0;
}

.ddl-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 5;
  display: none;
  min-width: 120px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(15,50,43,.15);
}

.ddl-them.mo .ddl-menu {
  display: block;
}

.ddl-menu button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  border-radius: 6px;
  box-shadow: none;
}

.ddl-menu button:hover {
  background: var(--surface-0);
}

.ddl-menu .ddl-xoa {
  color: #d64545;
}

/* Màn hình hẹp: hai cột xếp chồng */
@media (max-width: 1000px) {
  .exam-2cot {
    grid-template-columns: 1fr;
  }

  .exam-cot-phai {
    padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .ddl-ds {
    contain: none;
    max-height: 320px;
  }
}
/* ===== Đề đang mở: viền xanh + nhãn "Đang mở" ===== */
.ddl-muc.dang-mo {
  background: var(--surface-0);
  box-shadow: inset 3px 0 0 var(--primary);   /* vạch xanh bên trái */
}

.ddl-muc.dang-mo .ddl-ten {
  color: var(--primary);
}

/* Nhãn "Đang mở": chỉ hiện ở đề đang mở */
.ddl-nhan {
  display: none;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

.ddl-muc.dang-mo .ddl-nhan {
  display: inline-block;
}
/* ===== Cửa sổ "Xem câu hỏi" ===== */
.nut-xem {
  color: var(--primary);
  border-color: var(--border-accent);
  background: var(--surface-0);
}

.xc-nen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(16,42,86,.4);
}

.xc-nen.hien {
  display: flex;
}

.xc-khung {
  display: flex;
  flex-direction: column;
  width: min(880px, 100%);
  max-height: 90vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(15,50,43,.18);
  overflow: hidden;
}

/* Phần đầu: nhãn + đường dẫn */
.xc-dau {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}

.xc-dau-trai {
  flex: 1;
  min-width: 0;
}

.xc-nhan {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.xc-duong {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.xc-dong {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
}

/* Phần thân: cuộn khi dài */
.xc-than {
  flex: 1;
  overflow-y: auto;
  padding: 6px 20px 18px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-primary);
}

.xc-muc {
  margin: 16px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--primary);
}

.xc-noidung,
.xc-loigiai,
.xc-dapan {
  white-space: pre-wrap;
}

.xc-dapan {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 10px;
  background: var(--surface-0);
  color: var(--primary);
  font-weight: 700;
}

.xc-anh {
  margin: 8px 0;
  text-align: center;
}

.xc-anh img,
.xc-pa-dong img {
  max-width: 100%;
  max-height: 320px;
}

/* Phương án */
.xc-pa-dong {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  margin-bottom: 4px;
  border-radius: 10px;
}

.xc-pa-dong.dung {
  background: var(--surface-0);
  color: var(--primary);
}

.xc-pa-dong > span:first-of-type {
  flex: 1;
}

.xc-dau-dung {
  flex: none;
  font-size: 12px;
  font-weight: 700;
}

/* Bảng đúng/sai */
.xc-bang {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.xc-bang th,
.xc-bang td {
  padding: 7px 10px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.xc-bang th {
  background: var(--surface-0);
  font-size: 12.5px;
}

.xc-d { color: #0f6759; font-weight: 700; }
.xc-s { color: #b5473c; font-weight: 700; }

.xc-trong {
  color: var(--text-muted);
  font-style: italic;
}

/* Phần chân: nút */
.xc-chan {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: #ffffff;
}

.xc-gian {
  flex: 1;
}
/* ===== Nút và khung "Báo lỗi" ===== */
.nut-bao-loi {
  color: #c2410c;
  border-color: rgba(234,88,12,.35);
  background: #fff7ed;
}

.bl-nen {
  position: fixed;
  inset: 0;
  z-index: 110;               /* nằm trên cả cửa sổ "Xem câu hỏi" */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(16,42,86,.4);
}

.bl-nen.hien {
  display: flex;
}

.bl-khung {
  width: min(520px, 100%);
  padding: 20px 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(15,50,43,.18);
  color: var(--text-primary);
}

.bl-tieude {
  font-size: 17px;
  font-weight: 700;
  color: #c2410c;
}

.bl-trich {
  margin: 8px 0 12px;
  padding: 8px 12px;
  border-left: 3px solid #fdba74;
  background: #fff7ed;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.bl-nhan {
  margin: 10px 0 6px;
  font-size: 13px;
  font-weight: 700;
}

.bl-loai {
  display: grid;
  gap: 6px;
}

.bl-loai label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.bl-loai input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.bl-khung textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

.bl-nut {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
/* ===== Báo lỗi: nút cạnh Bộ lọc, nhãn đỏ, danh sách (trang admin) ===== */
.nut-ds-bao-loi {
  color: #fff;
  border-color: #dc2626;
  background: #dc2626;
  font-weight: 700;
}

.nut-ds-bao-loi:hover {
  background: #b91c1c;
}

.badge.b-loi {
  background: #fee2e2;
  color: #b91c1c;
}

.dsl-tieude {
  font-size: 17px;
  color: #b91c1c;
}

.dsl-muc {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.dsl-muc:last-child {
  border-bottom: none;
}

.dsl-trich {
  font-weight: 600;
}

.dsl-loi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-size: 13.5px;
}

.dsl-ghichu {
  color: var(--text-secondary);
  font-style: italic;
}

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

.dsl-nguoi {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Danh sách báo lỗi nằm dưới cửa sổ "Xem câu hỏi", để bấm "Xem câu" thì câu hiện lên trên */
#dsBaoLoi {
  z-index: 95;
}
/* ===== Khu vực tài khoản ở góc phải header ===== */
.tai-khoan {
  position: relative;
  /* Kích thước cố định bằng đúng viên tròn chữ Q — phần mở rộng khi hover
     sẽ "nổi" đè lên trên (position: absolute), không đẩy header xô lệch */
  width: 40px;
  height: 40px;
}

.tai-khoan-nut {
  position: absolute;
  top: 0;
  right: 0;

  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;

  max-width: 40px;
  overflow: hidden;
  white-space: nowrap;

  transition: max-width .22s ease, gap .22s ease, padding .22s ease, box-shadow .22s ease;
}

.tai-khoan-nut:hover,
.tai-khoan.mo .tai-khoan-nut {
  background: var(--surface-0);
  gap: 8px;
  padding: 6px 12px 6px 6px;
  max-width: 240px;
  box-shadow: 0 4px 16px rgba(15,50,43,.12);
}

.tai-khoan-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}

.tai-khoan-email {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  opacity: 0;
  transition: opacity .16s ease;
}

.tai-khoan-nut:hover .tai-khoan-email,
.tai-khoan.mo .tai-khoan-email {
  opacity: 1;
  transition: opacity .22s ease .08s;
}

.tai-khoan-mui {
  font-size: 11px;
  color: var(--text-muted);
  flex: none;

  opacity: 0;
  transition: opacity .16s ease;
}

.tai-khoan-nut:hover .tai-khoan-mui,
.tai-khoan.mo .tai-khoan-mui {
  opacity: 1;
  transition: opacity .22s ease .08s;
}

.tai-khoan-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  display: none;
  min-width: 220px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(15,50,43,.14);
}

.tai-khoan.mo .tai-khoan-menu {
  display: block;
}

.tai-khoan-menu-email {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
}

.tai-khoan-menu-vaitro {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.tai-khoan-menu hr {
  margin: 10px 0;
  border: none;
  border-top: 1px solid var(--border);
}

.tai-khoan-dangxuat {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.tai-khoan-dangxuat:hover {
  background: #fee2e2;
}

@media (max-width: 760px) {
  .tai-khoan-email {
    display: none;   /* màn hình hẹp: chỉ hiện vòng tròn chữ cái */
  }
}
.exam-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.exam-item .t {
  flex: 1;
  min-width: 0;          /* bắt buộc để text-overflow hoạt động trong flex */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.exam-item-nhan {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.exam-item-nhan .badge {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

/* Mỗi cột một độ rộng cố định, để các câu thẳng hàng nhau theo chiều dọc */
.exam-cot-muc  { width: 110px; }
.exam-cot-bai  { width: 230px; }
.exam-cot-dang { width: 230px; }
#examList {
  max-height: 420px;   /* chỉnh số này tùy ý: cao hơn thì hiện nhiều câu hơn trước khi cuộn */
  overflow-y: auto;
  padding-right: 4px;  /* tránh thanh cuộn đè lên nút "Bỏ" */
}
.exam-cot-loai { width: 44px; text-align: center; }
.badge.b-tim {
  background: #f3e8ff;
  color: #7c3aed;
}
.infographic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.infographic-card {
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: transform .15s, box-shadow .15s;
}
.infographic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.infographic-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}
.infographic-card .ten {
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
}

.infographic-viewer {
  position: fixed;
  inset: 0;
  background: #1a1a1a;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.infographic-viewer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #222;
  color: #fff;
}
.infographic-viewer-title {
  font-weight: 600;
  flex: 1;
  text-align: center;
}
.infographic-viewer-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.infographic-viewer-body {
  flex: 1;
  position: relative;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.infographic-viewer-imgwrap {
  transition: transform .25s ease;
}
.infographic-viewer-imgwrap img {
  max-width: 90vw;
  max-height: 85vh;
  display: block;
  margin: auto;
  user-select: none;
}
.infographic-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  color: #fff;
  border: none;
  font-size: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
.infographic-nav-prev { left: 16px; }
.infographic-nav-next { right: 16px; }
.infographic-nav:hover { background: rgba(255,255,255,.3); }
.infographic-grid .empty {
  color: #666;
  font-size: 15px;
  padding: 20px;
}
.infographic-close-btn {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.infographic-close-btn:hover {
  background: rgba(255,255,255,.25);
}
.infographic-khoi-lop {
  margin-bottom: 22px;
}
.infographic-khoi-lop-tieude {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.infographic-khoi-lop-tieude h4 {
  margin: 0;
  margin-right: auto;
}
.infographic-khoi-lop-timkiem {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  flex: 0 1 260px;
}
.infographic-khoi-lop-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.infographic-doiten-btn {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: 12px;
  padding: 4px 0;
}

/* ===== Tab con trong mỗi khối lớp (Infographic / KHBD / Tài liệu / Đề thi / Đề kiểm tra) ===== */
.thuvien-submuc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.thuvien-submuc-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.thuvien-submuc-btn:hover {
  background: #f5f5f5;
}
.thuvien-submuc-btn.active {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  color: #fff;
}

/* ===== Card tài liệu PDF/Word (KHBD, Tài liệu dạy học, Đề thi mẫu, Đề kiểm tra ngắn) ===== */
.document-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: transform .15s, box-shadow .15s;
}
.document-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.document-card-tai {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 18px 10px 10px;
  text-align: center;
}
.document-card-icon {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 8px;
}
.document-card .ten {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}