/* Giao diện nền: ưu tiên máy tính, dùng được trên điện thoại.
   Token và thành phần mô tả ở docs/he-thong-giao-dien.md. */

/* Literata (OFL, static/fonts/OFL-Literata.txt), tự lưu, cắt còn Latin, tiếng Việt, Hy Lạp và ký hiệu y khoa.
   Chỉ dùng cho tờ đề; ký tự phông thiếu (⇒ ⁺ ⁻ ℃) lấy từ phông kế tiếp trong --phong-to-de. */
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/literata-thuong-400.41b968ac2d6e.woff2") format("woff2");
}

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/literata-thuong-600.18b1226a7df5.woff2") format("woff2");
}

@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/literata-nghieng-400.2957c0765100.woff2") format("woff2");
}

:root {
  --mau-nen: #f5f6f8;
  --mau-the: #ffffff;
  --mau-chu: #1c2430;
  --mau-chu-phu: #5b6676;
  --mau-vien: #d9dee6;
  --mau-vien-dam: #848e9d;
  --mau-chinh: #0b5cab;
  --mau-chinh-dam: #084a8a;
  --mau-chinh-nhat: #e8f0fa;
  --mau-loi: #b3261e;
  --mau-loi-nhat: #fdecea;
  --mau-canh-bao: #8a5a00;
  --mau-canh-bao-nhat: #fff4d6;
  --mau-thanh-cong: #1b6e3c;
  --mau-thanh-cong-nhat: #e3f4ea;
  --mau-ket-thuc: #4f5967;
  --mau-ket-thuc-nhat: #eceef1;
  --mau-tab: #e7eaee;
  --mau-tab-dam: #dde1e7;
  --bo-goc: 6px;
  --bo-goc-to: 2px;
  --bong-to: 0 1px 2px rgb(28 36 48 / 0.06), 0 6px 20px rgb(28 36 48 / 0.07);
  /* Phông hệ thống có đủ dấu tiếng Việt, chỉ số trên/dưới và ký hiệu toán. */
  --phong: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial,
    sans-serif;
  --phong-to-de: "Literata", "Noto Serif", Georgia, "Times New Roman", serif;
  /* Thang chữ hệ số 1,2: 13 / 16 / 19 / 23 / 28px; tờ đề 18px. */
  --co-phu: 0.8125rem;
  --co-nen: 1rem;
  --co-h2: 1.1875rem;
  --co-h1: 1.4375rem;
  --co-lon: 1.75rem;
  --co-to-de: 1.125rem;
  /* Khoảng cách theo bước 4px. */
  --kc-1: 0.25rem;
  --kc-2: 0.5rem;
  --kc-3: 0.75rem;
  --kc-4: 1rem;
  --kc-5: 1.5rem;
  --kc-6: 2rem;
  --kc-7: 3rem;

  /* Không có chế độ tối (K-91): giữ ô nhập, thanh cuộn sáng, kể cả khi Chrome Android tự tô tối. */
  color-scheme: only light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--phong);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mau-chu);
  background: var(--mau-nen);
  /* Ô tick, ô chọn theo màu chính; trình duyệt cũ giữ ô mặc định. */
  accent-color: var(--mau-chinh);
}

a {
  color: var(--mau-chinh);
}

/* Tiêu đề ngắt dòng cân; đoạn văn tránh một chữ đứng trơ ở dòng cuối. Trình duyệt chưa hỗ trợ thì bỏ qua. */
h1,
h2,
h3 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

h1 {
  margin: 0 0 var(--kc-3);
  font-size: var(--co-h1);
  font-weight: 600;
  line-height: 1.3;
}

/* Viền khi chọn bằng bàn phím cho mọi phần tử tương tác. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mau-chinh);
  outline-offset: 2px;
}

.khung {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.bo-qua {
  position: absolute;
  left: -999px;
}

.bo-qua:focus {
  left: 1rem;
  top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--mau-the);
  z-index: 10;
}

.dau-trang {
  background: var(--mau-chinh);
  color: #fff;
}

.dau-trang__trong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Tên hệ thống: logo Khoa Y rồi tên, phông có chân cùng họ với tờ đề và chữ trên logo. */
.dau-trang__ten {
  display: flex;
  align-items: center;
  gap: var(--kc-3);
  color: #fff;
  font-family: var(--phong-to-de);
  font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  text-wrap: balance;
}

/* Logo vuông có góc trắng: cắt tròn theo vòng của logo, viền mảnh cho tách khỏi nền. */
.dau-trang__logo {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85);
}

@media (max-width: 40rem) {
  .dau-trang__logo {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.noi-dung {
  flex: 1;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

.chan-trang {
  padding: 1rem 0;
  border-top: 1px solid var(--mau-vien);
  color: var(--mau-chu-phu);
  font-size: 0.875rem;
}

.the {
  padding: 1.25rem;
  background: var(--mau-the);
  border: 1px solid var(--mau-vien);
  border-radius: var(--bo-goc);
}

.the--loi {
  border-left: 4px solid var(--mau-loi);
}

.chu-thich {
  color: var(--mau-chu-phu);
  font-size: 0.9375rem;
}

.nut {
  display: inline-block;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--mau-chinh);
  border-radius: var(--bo-goc);
  background: var(--mau-chinh);
  color: #fff;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.nut:hover,
.nut:focus-visible {
  background: var(--mau-chinh-dam);
}

/* Thông báo sau thao tác: nền nhạt theo loại, viền trái và biểu tượng màu đậm (không chỉ dựa vào màu). */
.thong-bao {
  display: grid;
  gap: var(--kc-2);
  margin: 0 0 var(--kc-5);
}

.thong-bao__muc {
  --mau-tb: var(--mau-chinh);
  --mau-tb-nhat: var(--mau-chinh-nhat);

  display: flex;
  align-items: flex-start;
  gap: var(--kc-3);
  padding: var(--kc-3) var(--kc-4);
  background: var(--mau-tb-nhat);
  border-left: 4px solid var(--mau-tb);
  border-radius: var(--bo-goc);
}

.thong-bao__muc--success {
  --mau-tb: var(--mau-thanh-cong);
  --mau-tb-nhat: var(--mau-thanh-cong-nhat);
}

.thong-bao__muc--error {
  --mau-tb: var(--mau-loi);
  --mau-tb-nhat: var(--mau-loi-nhat);
}

.thong-bao__muc--warning {
  --mau-tb: var(--mau-canh-bao);
  --mau-tb-nhat: var(--mau-canh-bao-nhat);
}

.thong-bao__bieu-tuong {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.0625rem;
  border-radius: 50%;
  background: var(--mau-tb);
  color: #fff;
  font-size: var(--co-phu);
  font-weight: 600;
  line-height: 1;
}

.thong-bao__noi-dung {
  margin: 0;
  font-weight: 600;
}

@media (max-width: 40rem) {
  h1 {
    font-size: 1.25rem;
  }

  .the {
    padding: 1rem;
  }
}

/* Đăng nhập, phiên làm việc */

h2 {
  margin: 1.25rem 0 var(--kc-2);
  font-size: var(--co-h2);
  font-weight: 600;
  line-height: 1.35;
}

.the--hep {
  max-width: 32rem;
  margin: 0 auto;
}

/* Đầu trang: tên và vai trò đang có hiệu lực, rồi hai nút Hỗ trợ, Đăng xuất cùng kiểu. */
.dau-trang__nguoi-dung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kc-2) var(--kc-3);
  margin: 0;
}

.dau-trang__nguoi-dung form {
  margin: 0;
}

.dau-trang__ho-so {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  text-align: right;
}

.dau-trang__vai-tro {
  color: #dbe7f5;
  font-size: var(--co-phu);
}

.nut--dau-trang {
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
}

@media (pointer: coarse) {
  .nut--dau-trang {
    min-height: 2.75rem;
  }
}

@media (max-width: 40rem) {
  .dau-trang__ho-so {
    flex: 1 1 100%;
    text-align: left;
  }
}

.nut--phu {
  background: var(--mau-the);
  color: var(--mau-chinh);
}

.nut--phu:hover,
.nut--phu:focus-visible {
  background: #e8f0fa;
}

.khung-phat-trien {
  margin: 1rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--mau-canh-bao);
  border-radius: var(--bo-goc);
  color: var(--mau-canh-bao);
  font-size: 0.9375rem;
}

.canh-bao-phien {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff4d6;
  border-bottom: 1px solid var(--mau-canh-bao);
}

.canh-bao-phien[hidden] {
  display: none;
}

.canh-bao-phien__trong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.bieu-mau {
  margin-top: 1.25rem;
}

.o-danh-dau {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.o-danh-dau input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  flex: none;
}

.errorlist {
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
  color: var(--mau-loi);
}

.bang {
  width: 100%;
  border-collapse: collapse;
}

.bang th,
.bang td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--mau-vien);
  text-align: left;
  vertical-align: top;
}

/* Số trong bảng (đếm, mã câu, ngày) thẳng cột. */
.bang td {
  font-variant-numeric: tabular-nums;
}

/* Vùng cuộn ngang của bảng rộng: cuộn được bằng bàn phím (tabindex, role="region", aria-label ở template). */
.vung-cuon {
  overflow-x: auto;
}

.vung-cuon:focus-visible {
  outline-offset: -2px;
}

@media (max-width: 40rem) {
  .bang th,
  .bang td {
    padding: 0.5rem 0.375rem;
  }
}

/* Trang chính theo vai trò */

.dau-trang__lien-ket {
  color: #fff;
}

.vai-tro-dang-thao-tac {
  padding: 0.375rem 0;
  background: #e8f0fa;
  border-bottom: 1px solid var(--mau-vien);
  font-size: 0.9375rem;
}

.nhom-chuc-nang__ten {
  margin-top: 0;
}

/* Thanh tab trên mọi trang (base.html): các tab là viên bo tròn nền xám trên dải nền trang; tab đang mở
   nền trắng, có viền và bóng nhẹ (không chỉ dựa vào màu nền). Một hàng, hẹp thì cuộn ngang. */
.thanh-tab {
  padding: var(--kc-2) 0;
  background: var(--mau-nen);
  border-bottom: 1px solid var(--mau-vien);
}

/* Còn tab khuất ở mép nào thì mép đó mờ dần (hoạt ảnh theo vị trí cuộn của chính hàng tab).
   Trình duyệt chưa hỗ trợ: không mờ, vẫn cuộn được. Hàng vừa khung thì không có hiệu ứng. */
@property --mo-dau {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --mo-cuoi {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.thanh-tab__ds {
  --mo-co: 3rem;

  /* Mốc cho offsetLeft của tab (thanh_tab.js). */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--kc-2);
  margin: 0;
  padding: 2px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: var(--mo-co);
  mask:
    linear-gradient(black, black) no-clip subtract,
    linear-gradient(to right, black, transparent) 0 0 / var(--mo-dau) 100% no-repeat no-clip,
    linear-gradient(to right, transparent, black) 100% 0 / var(--mo-cuoi) 100% no-repeat no-clip;
  animation:
    thanh-tab-mo-dau linear both,
    thanh-tab-mo-cuoi linear both;
  animation-timeline: scroll(self inline);
  animation-range:
    0 var(--mo-co),
    calc(100% - var(--mo-co)) 100%;
}

@keyframes thanh-tab-mo-dau {
  to {
    --mo-dau: var(--mo-co);
  }
}

@keyframes thanh-tab-mo-cuoi {
  from {
    --mo-cuoi: var(--mo-co);
  }
}

.thanh-tab__ds > li {
  flex: none;
}

/* Các tab nhóm vai trò (Trưởng/Phó bộ môn, Trưởng khoa…) tách khỏi tab màn hình bằng vạch. */
.thanh-tab__ds > li:not(.thanh-tab__muc-nhom) + .thanh-tab__muc-nhom {
  margin-left: var(--kc-2);
  padding-left: var(--kc-3);
  border-left: 1px solid var(--mau-vien-dam);
}

.thanh-tab__tab {
  display: flex;
  align-items: center;
  gap: var(--kc-2);
  min-height: 2.5rem;
  padding: var(--kc-2) 0.875rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--mau-tab);
  color: var(--mau-chu);
  text-decoration: none;
  white-space: nowrap;
}

.thanh-tab__tab:hover {
  background: var(--mau-tab-dam);
}

.thanh-tab__tab[aria-current] {
  border-color: var(--mau-vien);
  background: var(--mau-the);
  box-shadow: 0 1px 3px rgb(28 36 48 / 0.12);
  color: var(--mau-chinh-dam);
}

/* Tab nhóm vai trò có mũi tên phải: bấm vào mở các màn hình của nhóm ở cột trái. */
.thanh-tab__tab--nhom::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-top: 2px solid currentcolor;
  border-right: 2px solid currentcolor;
  transform: rotate(45deg);
}

.thanh-tab__tab--nha {
  padding-inline: var(--kc-3);
}

.bieu-tuong {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thanh-tab .so-viec,
.thanh-ben .so-viec {
  min-width: 1.5rem;
  font-size: var(--co-phu);
  line-height: 1.5;
}

@media (forced-colors: active) {
  .thanh-tab__tab[aria-current] {
    outline: 2px solid Highlight;
  }
}

@media (pointer: coarse) {
  .thanh-tab__tab {
    min-height: 2.75rem;
  }
}

/* Màn hình của nhóm vai trò phụ: cột trái xếp dọc các tab, nội dung bên phải. */
.bo-cuc-ben {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--kc-5);
  align-items: start;
}

.thanh-ben {
  position: sticky;
  top: var(--kc-4);
}

.thanh-ben__ten {
  margin: 0 0 var(--kc-2);
  color: var(--mau-chu-phu);
  font-size: var(--co-phu);
  font-weight: 600;
}

.thanh-ben__ds {
  display: grid;
  gap: var(--kc-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.thanh-ben .thanh-tab__tab {
  justify-content: space-between;
  white-space: normal;
}

@media (max-width: 48rem) {
  .bo-cuc-ben {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kc-4);
  }

  /* Điện thoại: cột trái thành một hàng cuộn ngang trên nội dung. */
  .thanh-ben {
    position: static;
  }

  .thanh-ben__ds {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .thanh-ben__ds > li {
    flex: none;
  }

  .thanh-ben .thanh-tab__tab {
    white-space: nowrap;
  }
}

/* Chữ chỉ dành cho trình đọc màn hình. */
.chi-doc-man-hinh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Trang chính: việc đang chờ, mỗi màn hình một dòng. */
/* Trang chính: thẻ việc đang chờ kéo dài tới chân trang. */
.noi-dung--trang-chinh {
  display: flex;
  flex-direction: column;
}

.noi-dung--trang-chinh .viec-dang-cho {
  flex: 1;
}

.viec-dang-cho h2 {
  margin-top: 0;
}

.viec-dang-cho__ds {
  margin: 0;
  padding: 0;
  list-style: none;
}

.viec-dang-cho__ds li + li {
  border-top: 1px solid var(--mau-vien);
}

.viec-dang-cho__muc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kc-4);
  min-height: 2.75rem;
  padding: var(--kc-2) 0;
  color: var(--mau-chu);
  text-decoration: none;
}

.viec-dang-cho__ten {
  font-weight: 600;
}

.viec-dang-cho__muc:hover .viec-dang-cho__ten {
  color: var(--mau-chinh);
  text-decoration: underline;
}

.viec-dang-cho__so {
  flex: none;
  color: var(--mau-chinh-dam);
  font-variant-numeric: tabular-nums;
}

.so-viec {
  min-width: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--mau-chinh);
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
}

/* Soạn câu hỏi, kho cá nhân */

h3 {
  margin: var(--kc-4) 0 var(--kc-1);
  font-size: var(--co-nen);
  font-weight: 600;
}

.dau-muc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.hang-nut {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

/* Hàng nút cuối biểu mẫu có từ hai thao tác: thao tác phụ bên trái, Hủy là liên kết chữ,
   thao tác chính đứng riêng bên phải. Trên điện thoại thao tác chính lên đầu, rộng hết khung. */
.hang-nut--bieu-mau {
  align-items: center;
  margin-top: var(--kc-5);
}

.hang-nut__chinh {
  margin-left: auto;
}

.nut--lien-ket {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--kc-2);
  color: var(--mau-chinh);
}

.hang-nut__chu-thich {
  margin: var(--kc-2) 0 0;
  text-align: right;
}

@media (max-width: 40rem) {
  .hang-nut--bieu-mau {
    flex-direction: column;
    align-items: stretch;
  }

  .hang-nut--bieu-mau .nut {
    width: 100%;
    text-align: center;
  }

  .hang-nut--bieu-mau .hang-nut__chinh {
    order: -1;
    margin-left: 0;
  }

  .hang-nut--bieu-mau .nut--lien-ket {
    justify-content: center;
  }

  .hang-nut__chu-thich {
    text-align: left;
  }
}

/* Ô soạn có định dạng (static/js/dinh_dang.js, K-108): nhãn bên trái, nhóm nút dính vào góc trên
   phải của ô; ô soạn hiện ngay chữ in đậm, in nghiêng, chỉ số. */
.o-soan__dau {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kc-3);
}

.o-soan__dau .truong__nhan {
  margin-bottom: var(--kc-1);
}

.dinh-dang {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--mau-vien-dam);
  border-bottom: 0;
  border-radius: var(--bo-goc) var(--bo-goc) 0 0;
  background: var(--mau-nen);
}

.dinh-dang__nut {
  min-inline-size: 2rem;
  min-block-size: 1.75rem;
  padding: 0 var(--kc-2);
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--mau-chu);
  font: inherit;
  font-size: var(--co-phu);
  line-height: 1;
  cursor: pointer;
}

.dinh-dang__nut--dam {
  font-weight: 600;
}

.dinh-dang__nut--nghieng {
  font-family: var(--phong-to-de);
  font-style: italic;
}

/* Nút đang bật (con trỏ nằm trong chữ đã định dạng): nền trắng, viền đậm, không chỉ dựa vào màu. */
.dinh-dang__nut[aria-pressed="true"] {
  border-color: var(--mau-vien-dam);
  background: var(--mau-the);
  color: var(--mau-chinh-dam);
}

@media (hover: hover) {
  .dinh-dang__nut:hover {
    border-color: var(--mau-vien);
    background: var(--mau-the);
  }
}

@media (pointer: coarse) {
  .dinh-dang__nut {
    min-inline-size: 2.75rem;
    min-block-size: 2.5rem;
  }
}

@media (forced-colors: active) {
  .dinh-dang__nut[aria-pressed="true"] {
    outline: 2px solid Highlight;
  }
}

.o-soan {
  --so-dong: 4;

  width: 100%;
  min-block-size: calc(var(--so-dong) * 1lh + 1rem + 2px);
  max-block-size: 24lh;
  padding: 0.5rem 0.625rem;
  overflow-y: auto;
  border: 1px solid var(--mau-vien-dam);
  /* Góc trên phải vuông để nhóm nút dính liền. */
  border-radius: var(--bo-goc) 0 var(--bo-goc) var(--bo-goc);
  background: #fff;
  color: var(--mau-chu);
  font: inherit;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: vertical;
}

.o-soan:focus {
  outline: 2px solid var(--mau-chinh);
  outline-offset: 1px;
}

.truong--loi .o-soan,
.o-soan[aria-invalid="true"] {
  border-color: var(--mau-loi);
}

.o-soan sup,
.o-soan sub {
  line-height: 0;
}

.o-soan[data-so-dong="2"] {
  --so-dong: 2;
}

.o-soan[data-so-dong="3"] {
  --so-dong: 3;
}

.o-soan[data-so-dong="5"] {
  --so-dong: 5;
}

.o-soan[data-so-dong="10"] {
  --so-dong: 10;
}

.goi-y-dinh-dang {
  margin: 0 0 var(--kc-4);
}

.goi-y-dinh-dang code {
  font-size: 0.9em;
}

/* Trình soạn: khối Phân loại câu là dải nền nhạt sát mép trên của thẻ, tách khỏi khối Nội dung câu. */
.soan-nhom__ten {
  margin: 0 0 var(--kc-4);
  font-size: var(--co-h2);
}

.soan-nhom--phan-loai {
  margin: -1.25rem -1.25rem var(--kc-5);
  padding: 1.25rem 1.25rem var(--kc-2);
  border-bottom: 1px solid var(--mau-vien);
  border-radius: var(--bo-goc) var(--bo-goc) 0 0;
  background: var(--mau-nen);
}

/* Có lỗi chung ở đầu biểu mẫu thì dải không kéo lên đè lỗi. */
.loi-bieu-mau + .soan-nhom--phan-loai {
  margin-top: 0;
  border-radius: 0;
}

.soan-nhom--phan-loai .nhan-cau-hoi--khoa {
  border: 1px solid var(--mau-vien);
  background: var(--mau-the);
}

/* Bộ môn, Vấn đề lâm sàng chiếm cả hàng; Miền năng lực và Mức độ chung một hàng. */
.soan-nhom__luoi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--kc-4);
}

.soan-nhom__luoi > .truong--rong,
.soan-nhom__luoi > .truong:only-child {
  grid-column: 1 / -1;
}

@media (max-width: 40rem) {
  .soan-nhom__luoi {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Thẻ trên điện thoại có lề trong 1rem. */
  .soan-nhom--phan-loai {
    margin: -1rem -1rem var(--kc-5);
    padding: 1rem 1rem var(--kc-1);
  }
}

/* Đầu trình soạn: ghi chú nhãn do nhiệm vụ quy định, cạnh đó là Lấy từ kho. */
.soan__lay-tu-kho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kc-2) var(--kc-4);
  margin-bottom: var(--kc-5);
}

.soan__lay-tu-kho > .truong__goi-y {
  flex: 1 1 20rem;
  margin: 0;
}

.nut--nguy-hiem {
  border-color: var(--mau-loi);
  background: var(--mau-loi);
  color: #fff;
}

.nut--phu.nut--nguy-hiem {
  background: var(--mau-the);
  color: var(--mau-loi);
}

.nut--nguy-hiem:hover,
.nut--nguy-hiem:focus-visible {
  background: #8f1d17;
  color: #fff;
}

.the + .the,
.bieu-mau-soan + .the {
  margin-top: 1rem;
}

.truong {
  margin-bottom: 1rem;
}

.truong__nhan {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.truong__goi-y {
  margin: 0.25rem 0 0;
  color: var(--mau-chu-phu);
  font-size: 0.875rem;
}

.truong select,
.truong textarea,
.truong input[type="email"],
.truong input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--mau-vien-dam);
  border-radius: var(--bo-goc);
  background: #fff;
  color: var(--mau-chu);
  font: inherit;
  line-height: 1.5;
}

.truong textarea {
  resize: vertical;
}

.truong select:focus,
.truong textarea:focus {
  outline: 2px solid var(--mau-chinh);
  outline-offset: 1px;
}

.truong--loi select,
.truong--loi textarea {
  border-color: var(--mau-loi);
}

.loi-bieu-mau {
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid var(--mau-loi);
  background: #fdecea;
}

.loi-bieu-mau .errorlist {
  margin: 0;
}

.chu-loi {
  color: var(--mau-loi);
}

.chu-dat {
  color: var(--mau-thanh-cong);
}

.nhan {
  display: inline-block;
  padding: 0 0.5rem;
  /* Viền trong suốt: chế độ tương phản cao bỏ nền màu nhưng vẫn vẽ viền. */
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.8125rem;
}

.nhan--canh-bao {
  background: #fff4d6;
  color: var(--mau-canh-bao);
}

.nhan--dat {
  background: #e3f4ea;
  color: var(--mau-thanh-cong);
}

.nhan-cau-hoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}

.nhan-cau-hoi dt {
  color: var(--mau-chu-phu);
  font-size: 0.875rem;
}

.nhan-cau-hoi dd {
  margin: 0;
}

.the--bang {
  padding: 0;
  overflow-x: auto;
}

.bang__nut {
  white-space: nowrap;
}

.bang__nut .nut {
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
}

/* Trên điện thoại mỗi dòng của bảng thành một thẻ. */
@media (max-width: 48rem) {
  .bang--the thead {
    display: none;
  }

  .bang--the tr {
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mau-vien);
  }

  .bang--the td {
    display: block;
    padding: 0.125rem 0.75rem;
    border: 0;
  }

  .bang--the td[data-nhan]::before {
    content: attr(data-nhan) ": ";
    color: var(--mau-chu-phu);
    font-size: 0.875rem;
  }

  .bang--the .bang__nut {
    padding-top: 0.5rem;
  }
}

/* Media trong trình soạn và khi xem câu hỏi */

.media-soan {
  margin-inline: 0;
  padding: 0.75rem;
  border: 1px solid var(--mau-vien);
  border-radius: var(--bo-goc);
}

.media-soan legend {
  padding: 0 0.25rem;
}

.truong__nhan--phu {
  margin-top: 0.75rem;
  font-weight: 400;
}

.media-soan .o-danh-dau {
  margin: 0.375rem 0 0;
}

.media-soan__danh-sach {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.media-soan__muc {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mau-vien);
}

.media-soan__xem {
  flex: none;
  width: 6rem;
  text-align: center;
}

.media-soan__xem img {
  max-width: 100%;
  max-height: 6rem;
  border: 1px solid var(--mau-vien);
}

.media-soan__thong-tin {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Nhiệm vụ soạn */

.truong input[type="date"],
.truong input[type="number"],
.hang-loc select {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--mau-vien-dam);
  border-radius: var(--bo-goc);
  background: #fff;
  color: var(--mau-chu);
  font: inherit;
}

.hang-loc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}

.hang-loc .truong__nhan {
  margin: 0;
}

.hang-loc select {
  width: auto;
  min-width: 14rem;
  flex: 1 1 14rem;
  max-width: 24rem;
}

.luoi-truong {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0 1rem;
}

.truong--rong {
  grid-column: 1 / -1;
}

.luoi-the {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.luoi-the .the + .the {
  margin-top: 0;
}

.nhan-cau-hoi--khoa {
  padding: 0.75rem;
  border-radius: var(--bo-goc);
  background: var(--mau-nen);
}

.danh-sach-chon {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.danh-sach-chon li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mau-vien);
}

.danh-sach-chon .o-danh-dau {
  margin: 0;
}

.danh-sach-chon__da-dung {
  display: block;
  margin-top: var(--kc-1);
  color: var(--mau-canh-bao);
  font-size: var(--co-phu);
}

.o-danh-dau--canh-bao {
  padding: 0.5rem 0.75rem;
  border-left: 4px solid var(--mau-canh-bao);
  background: #fff4d6;
}

/* So sánh hai phiên bản */
.so-sanh {
  margin: 0 0 0.5rem;
}

.so-sanh__truong {
  margin-bottom: 0.75rem;
}

.so-sanh__nhan {
  font-weight: 600;
}

.so-sanh__noi-dung {
  margin: 0.25rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.so-sanh__xoa {
  color: var(--mau-loi);
  text-decoration: line-through;
}

.so-sanh__them {
  background: #e3f4ea;
  text-decoration: none;
}

/* Vòng và ý kiến: lịch sử nhóm theo vòng, mỗi ý kiến/mục một dòng tiêu đề kèm nhãn kết quả. */
.vong {
  padding-left: var(--kc-4);
  border-left: 2px solid var(--mau-vien);
}

.vong + .vong {
  margin-top: var(--kc-6);
}

.vong__dau {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--kc-1) var(--kc-3);
  margin-bottom: var(--kc-3);
}

.vong__dau h3 {
  margin: 0;
  font-size: var(--co-h2);
}

.vong__phu,
.y-kien__phu {
  color: var(--mau-chu-phu);
  font-size: var(--co-phu);
}

.vong__ghi-chu {
  margin: 0 0 var(--kc-4);
  padding: var(--kc-3) var(--kc-4);
  background: var(--mau-nen);
  border-radius: var(--bo-goc);
}

.vong__ghi-chu > p {
  margin: var(--kc-1) 0 0;
}

.vong__ghi-chu > .vong__ghi-chu-ten {
  margin: 0;
  color: var(--mau-chu-phu);
  font-size: var(--co-phu);
  font-weight: 600;
}

.y-kien + .y-kien {
  margin-top: var(--kc-4);
  padding-top: var(--kc-4);
  border-top: 1px solid var(--mau-vien);
}

.y-kien__dau {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--kc-1) var(--kc-2);
  margin: 0;
}

.y-kien__ten {
  font-weight: 600;
}

.y-kien__than {
  margin-top: var(--kc-2);
}

.y-kien__than > :first-child {
  margin-top: 0;
}

.y-kien__than > :last-child {
  margin-bottom: 0;
}

.y-kien__trong {
  color: var(--mau-chu-phu);
}

/* Gợi ý thu gọn: tài liệu tham khảo chỉ mở khi người dùng cần (Gợi ý tiêu chí). */
.goi-y-thu-gon {
  margin: 0 0 var(--kc-4);
}

.goi-y-thu-gon > summary {
  display: inline-flex;
  align-items: baseline;
  gap: var(--kc-2);
  min-height: 2.75rem;
  padding: var(--kc-2) 0;
  color: var(--mau-chinh);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.goi-y-thu-gon > summary:hover {
  text-decoration: underline;
}

.goi-y-thu-gon__dem {
  color: var(--mau-chu-phu);
  font-weight: 400;
}

.goi-y-thu-gon__than {
  margin: 0;
  padding: var(--kc-3) var(--kc-4) var(--kc-3) var(--kc-6);
  background: var(--mau-nen);
  border-radius: var(--bo-goc);
}

.goi-y-thu-gon__than li + li {
  margin-top: var(--kc-1);
}

.nhan-xet .truong div[id] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.nhan-xet .truong div[id] label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  cursor: pointer;
}

/* Ngân hàng (phiên 14) */
.bo-loc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 1rem;
  align-items: end;
}

.bo-loc__truong--rong {
  grid-column: 1 / -1;
}

.bo-loc__nut {
  margin-bottom: 1rem;
}

.phan-trang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 1rem 0;
}

.danh-sach-gon {
  margin: 0 0 0.25rem;
  padding-left: 1.1rem;
}

.o-so-cau {
  max-width: 8rem;
}

/* Dấu nước: phủ cả tờ đề, không chặn thao tác, in ra trên mọi trang giấy. */
.dau-nuoc {
  position: absolute;
  inset: -50%;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 3rem 4rem;
  overflow: hidden;
  color: rgb(0 0 0 / 0.07);
  font-size: 0.9rem;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transform: rotate(-28deg);
}

@media print {
  .dau-nuoc {
    color: rgb(0 0 0 / 0.12);
  }
}

/* Nhật ký (phiên 16) */
.nhat-ky__chi-tiet {
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

/* ===== Hệ giao diện (phiên 16b) — docs/he-thong-giao-dien.md ===== */

/* Tầng 1 — Tờ đề: bề mặt duy nhất có bóng, chỉ dùng cho nội dung câu. */
.phan-loai-cau {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kc-1) var(--kc-5);
  margin: 0 0 var(--kc-3);
  color: var(--mau-chu-phu);
  font-size: var(--co-phu);
}

.phan-loai-cau div {
  display: flex;
  gap: var(--kc-1);
}

.phan-loai-cau dt::after {
  content: ":";
}

.phan-loai-cau dd {
  margin: 0;
  color: var(--mau-chu);
}

/* Tờ đề trải hết bề ngang nội dung (chủ dự án chọn, K-106). */
.to-de {
  position: relative;
  padding: var(--kc-6) var(--kc-7);
  overflow: hidden;
  background: var(--mau-the);
  border: 1px solid var(--mau-vien);
  border-radius: var(--bo-goc-to);
  box-shadow: var(--bong-to);
  font-family: var(--phong-to-de);
  /* Literata thiếu ⇒ ⁺ ⁻ ℃: giữ cỡ chữ đều khi lấy ký tự từ phông kế tiếp hoặc khi phông chưa tải xong. */
  font-size-adjust: from-font;
  /* Trị số xét nghiệm đọc bằng chữ số cao đều. */
  font-variant-numeric: lining-nums;
  font-size: var(--co-to-de);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.to-de__dan p {
  margin: 0 0 var(--kc-4);
}

/* Căn đều hai bên như đề in (chủ dự án chọn). */
.to-de__dan,
.to-de__hoi {
  text-align: justify;
}

.to-de__media {
  margin: 0 0 var(--kc-5);
  padding: 0;
  list-style: none;
  font-family: var(--phong);
  font-size: var(--co-nen);
}

.to-de__media li + li {
  margin-top: var(--kc-3);
}

.to-de__media img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--mau-vien);
}

/* Câu hỏi dẫn không in đậm, để chữ người soạn in đậm (vd. KHÔNG) nổi lên (K-108). */
.to-de__hoi {
  margin: var(--kc-5) 0 var(--kc-4);
}

.to-de__lua-chon {
  margin: 0;
  padding: 0;
  list-style: none;
}

.to-de__phuong-an {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: var(--kc-3);
  align-items: baseline;
  margin-left: calc(-1 * var(--kc-3));
  padding: var(--kc-2) var(--kc-3);
  border-left: 3px solid transparent;
}

.to-de__vi-tri {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--mau-vien-dam);
  border-radius: var(--bo-goc-to);
  font-size: var(--co-nen);
  font-weight: 600;
  line-height: 1;
}

.to-de__phuong-an--dung {
  border-left-color: var(--mau-thanh-cong);
  background: var(--mau-thanh-cong-nhat);
}

.to-de__phuong-an--dung .to-de__vi-tri {
  border-color: var(--mau-thanh-cong);
  color: var(--mau-thanh-cong);
}

.to-de__dung {
  color: var(--mau-thanh-cong);
  font-family: var(--phong);
  font-size: var(--co-phu);
  font-weight: 600;
  white-space: nowrap;
}

.to-de__ghi-chu {
  margin: var(--kc-4) 0 0;
  color: var(--mau-chu-phu);
  font-family: var(--phong);
  font-size: var(--co-phu);
}

.giai-thich-cau {
  margin-top: var(--kc-5);
}

.giai-thich-cau h3 {
  margin-top: var(--kc-4);
  color: var(--mau-chu-phu);
  font-size: var(--co-phu);
}

.giai-thich-cau p {
  margin: 0 0 var(--kc-2);
}

/* Thông tin câu ở đầu trang quyết định: khối phụ, không nền. */
.thong-tin-cau {
  padding-bottom: var(--kc-2);
  border-bottom: 1px solid var(--mau-vien);
}

.thong-tin-cau .nhan-cau-hoi {
  margin: 0;
}

.thong-tin-cau + .the {
  margin-top: var(--kc-4);
}

/* Khối chứa tờ đề trên trang: không có nền thẻ, tờ đề tự là bề mặt. */
.khoi-noi-dung {
  margin-top: var(--kc-5);
}

.khoi-noi-dung > h2 {
  margin-top: 0;
}

/* Tầng 2 — Khối phụ: không nền, ngăn bằng đường kẻ mảnh. Lịch sử thu gọn. */
.khoi-lich-su {
  margin-top: var(--kc-5);
  border-top: 1px solid var(--mau-vien);
}

.khoi-lich-su + .khoi-lich-su {
  margin-top: 0;
}

.khoi-lich-su:last-of-type {
  border-bottom: 1px solid var(--mau-vien);
}

.khoi-lich-su > summary {
  display: flex;
  align-items: baseline;
  gap: var(--kc-2);
  min-height: 2.75rem;
  padding: var(--kc-3) 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.khoi-lich-su > summary::-webkit-details-marker,
.goi-y-thu-gon > summary::-webkit-details-marker {
  display: none;
}

/* Mũi tên mở/đóng dùng chung cho mọi phần thu gọn: lịch sử, gợi ý, thao tác trong hàng. */
.khoi-lich-su > summary::before,
.goi-y-thu-gon > summary::before,
.thao-tac-hang > summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(-0.15rem) rotate(-45deg);
  transition: transform 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .khoi-lich-su > summary::before,
  .goi-y-thu-gon > summary::before,
  .thao-tac-hang > summary::after {
    transition: none;
  }
}

.khoi-lich-su[open] > summary::before,
.goi-y-thu-gon[open] > summary::before,
.thao-tac-hang[open] > summary::after {
  transform: translateY(-0.25rem) rotate(45deg);
}

.khoi-lich-su__dem {
  color: var(--mau-chu-phu);
  font-weight: 400;
}

.khoi-lich-su__than {
  padding: 0 0 var(--kc-5) var(--kc-5);
}

/* Lịch sử/phần mở rộng đặt trong thẻ bảng: lề trong như tiêu đề thẻ bảng. */
.khoi-lich-su--trong-the {
  margin: 0;
  padding: 0 var(--kc-5);
}

.khoi-lich-su--trong-the:last-of-type {
  border-bottom: 0;
}

.khoi-lich-su--trong-the .khoi-lich-su__than {
  padding-left: 0;
  overflow-x: auto;
}

/* Tầng 3 — Khối thao tác: nền trắng, viền trên màu chính. */
.khoi-quyet-dinh {
  margin-top: var(--kc-6);
  padding: var(--kc-5);
  background: var(--mau-the);
  border: 1px solid var(--mau-vien);
  border-top: 3px solid var(--mau-chinh);
  border-radius: var(--bo-goc);
}

.khoi-quyet-dinh > h2 {
  margin-top: 0;
}

.khoi-quyet-dinh__nhom {
  display: grid;
  gap: var(--kc-5);
}

.khoi-quyet-dinh__nhom--tra-ve {
  margin-top: var(--kc-5);
  padding-top: var(--kc-4);
  border-top: 1px solid var(--mau-vien);
}

.khoi-quyet-dinh__nhom--tra-ve > h3 {
  margin: 0;
  color: var(--mau-chu-phu);
  font-size: var(--co-phu);
}

.khoi-quyet-dinh__muc h3 {
  margin-top: 0;
}

.khoi-quyet-dinh__muc p {
  margin: 0 0 var(--kc-3);
}

.khoi-quyet-dinh__muc .truong {
  max-width: 40rem;
}

/* Nhãn trạng thái câu: trung tính; màu chỉ cho kết thúc tốt, kết thúc dừng và cảnh báo. */
.nhan {
  white-space: nowrap;
}

.nhan--trang-thai {
  background: var(--mau-nen);
  border: 1px solid var(--mau-vien);
  color: var(--mau-chu);
}

.nhan--ket-thuc {
  background: var(--mau-ket-thuc-nhat);
  color: var(--mau-ket-thuc);
}

.nhan--cho-ban {
  background: var(--mau-chinh-nhat);
  color: var(--mau-chinh-dam);
}

/* Ô tick: ô đứng trước nhãn, cùng hàng. */
.truong--o-tick .o-danh-dau {
  margin-bottom: 0;
  font-weight: 600;
  cursor: pointer;
}

/* Thao tác trong hàng: mở ra ô lý do rộng thay vì ô nhập hẹp trong bảng. */
.thao-tac-hang > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-2);
  cursor: pointer;
  list-style: none;
}

.thao-tac-hang > summary::after {
  margin-left: var(--kc-1);
}

.thao-tac-hang > summary::-webkit-details-marker {
  display: none;
}

.thao-tac-hang[open] > summary {
  margin-bottom: var(--kc-2);
}

.thao-tac-hang__than {
  min-width: min(22rem, 70vw);
  white-space: normal;
}

.thao-tac-hang__chinh + .thao-tac-hang {
  margin-top: var(--kc-2);
}

/* Tiêu đề trong thẻ bảng có lề trong như thẻ thường (thẻ bảng không có padding). */
.the--bang > h2,
.the--bang > p {
  margin-right: var(--kc-5);
  margin-left: var(--kc-5);
}

.the--bang > h2 {
  margin-top: var(--kc-4);
}

@media (max-width: 48rem) {
  .the--bang > h2,
  .the--bang > p {
    margin-right: var(--kc-3);
    margin-left: var(--kc-3);
  }
}

/* Chỉ khi bảng còn là bảng; trên điện thoại .bang--the thành thẻ có lề riêng. */
@media (min-width: 48.0625rem) {
  .the--bang .bang :is(th, td):first-child {
    padding-left: var(--kc-5);
  }

  .the--bang .bang :is(th, td):last-child {
    padding-right: var(--kc-5);
  }
}

.thao-tac-hang__than textarea {
  min-height: 4.5rem;
}

/* Ô nhập dài cao dần theo nội dung, tới giới hạn thì cuộn. field-sizing bỏ qua rows, nên chiều cao
   tối thiểu lấy lại từ rows (Phần thân 10 dòng, câu hỏi dẫn và lựa chọn 2 dòng). */
.truong textarea,
.thao-tac-hang__than textarea {
  --so-dong: 4;

  field-sizing: content;
  min-block-size: calc(var(--so-dong) * 1lh + 1rem + 2px);
  max-block-size: 24lh;
}

.truong textarea[rows="2"] {
  --so-dong: 2;
}

.truong textarea[rows="3"] {
  --so-dong: 3;
}

.truong textarea[rows="5"] {
  --so-dong: 5;
}

.truong textarea[rows="10"] {
  --so-dong: 10;
}

/* Màn hình cảm ứng: nút trong bảng đủ 44px để chạm. */
@media (pointer: coarse) {
  .bang__nut .nut {
    min-height: 2.75rem;
  }
}

/* Chế độ tương phản cao (Windows): nền màu mất, giữ viền cho nhãn và đáp án đúng. */
@media (forced-colors: active) {
  .nhan {
    border-color: CanvasText;
  }

  .to-de__phuong-an--dung {
    border-left-color: Highlight;
  }
}

/* Ô lọc gắn trên ô chọn dài (static/js/o_loc.js). */
/* Ô tìm có danh sách thay cho ô chọn dài (static/js/o_loc.js). Danh sách nằm ngay dưới ô, trong dòng chảy
   của trang (không bị khung cuộn của bảng cắt), cao tối đa khoảng 10 mục rồi cuộn. */
.o-loc__goc {
  display: none;
}

/* Mũi tên bên phải ô cho biết đây là ô chọn; lật lên khi danh sách đang mở. Vẽ bằng viền, không dùng ảnh. */
.o-loc {
  position: relative;
}

.o-loc::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  right: 0.875rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--mau-chu-phu);
  border-bottom: 2px solid var(--mau-chu-phu);
  transform: rotate(45deg);
  pointer-events: none;
}

.o-loc:has(.o-loc__o[aria-expanded="true"])::after {
  top: 1.3rem;
  transform: rotate(-135deg);
}

.o-loc__o {
  width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.625rem;
  border: 1px solid var(--mau-vien-dam);
  border-radius: var(--bo-goc);
  background: #fff;
  color: var(--mau-chu);
  font: inherit;
  line-height: 1.5;
}

.o-loc__o[aria-expanded="true"] {
  border-color: var(--mau-chinh);
}

.o-loc__o[aria-invalid="true"] {
  border-color: var(--mau-loi);
}

/* Danh sách nổi đè lên phần bên dưới, không đẩy trang. Rộng ít nhất bằng ô, rộng thêm theo chữ tới
   giới hạn để mục dài không phải xuống dòng; sát mép phải màn hình thì canh theo mép phải của ô
   (o_loc.js thêm .o-loc__ds--phai). position: absolute cũng là mốc cho offsetTop của các mục. */
.o-loc__ds {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-inline-size: 100%;
  inline-size: max-content;
  max-inline-size: min(36rem, calc(100vw - 2rem));
  max-block-size: min(20rem, 50dvh);
  margin: 0;
  padding: var(--kc-1) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin-top: var(--kc-1);
  border: 1px solid var(--mau-vien-dam);
  border-radius: var(--bo-goc);
  background: var(--mau-the);
  box-shadow: var(--bong-to);
}

.o-loc__muc,
.o-loc__trong {
  padding: var(--kc-2) var(--kc-3) var(--kc-2) var(--kc-6);
}

.o-loc__muc {
  position: relative;
  cursor: pointer;
}

/* Mục đang trỏ (phím mũi tên hoặc chuột): nền màu chính nhạt và vạch trái, không chỉ dựa vào màu. */
.o-loc__muc--dang-tro {
  background: var(--mau-chinh-nhat);
  box-shadow: inset 3px 0 0 var(--mau-chinh);
}

/* Mục đang chọn: dấu ✓ và chữ đậm. */
.o-loc__muc[aria-selected="true"] {
  font-weight: 600;
}

.o-loc__muc[aria-selected="true"]::before {
  content: "✓";
  position: absolute;
  left: var(--kc-3);
  color: var(--mau-chinh);
}

.o-loc__trong {
  color: var(--mau-chu-phu);
}

.o-loc__ds--phai {
  right: 0;
  left: auto;
}

/* Nhóm (vd. lĩnh vực của Miền năng lực): tiêu đề chữ phụ, các mục thụt theo cùng lề với mục thường. */
.o-loc__nhom > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.o-loc__nhom + .o-loc__nhom {
  margin-top: var(--kc-1);
  border-top: 1px solid var(--mau-vien);
}

.o-loc__ten-nhom {
  display: block;
  padding: var(--kc-2) var(--kc-3) var(--kc-1);
  color: var(--mau-chu-phu);
  font-size: var(--co-phu);
  font-weight: 600;
}

.o-loc__dem {
  margin: var(--kc-1) 0 0;
  color: var(--mau-chu-phu);
  font-size: var(--co-phu);
}

.o-loc__dem:empty {
  display: none;
}

@media (forced-colors: active) {
  .o-loc__muc--dang-tro {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* Trang mẫu giao diện (chỉ máy phát triển). */
.mau-gd section + section {
  margin-top: var(--kc-7);
}

.mau-gd__o-mau {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--kc-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mau-gd__o-mau li {
  padding: var(--kc-3);
  border: 1px solid var(--mau-vien);
  border-radius: var(--bo-goc);
  background: var(--mau-the);
  font-size: var(--co-phu);
}

.mau-gd__o-mau span {
  display: block;
  height: 2.5rem;
  margin-bottom: var(--kc-2);
  border-radius: var(--bo-goc-to);
}

.mau-gd__mau--nen {
  background: var(--mau-nen);
}

.mau-gd__mau--the {
  background: var(--mau-the);
}

.mau-gd__mau--chu {
  background: var(--mau-chu);
}

.mau-gd__mau--chu-phu {
  background: var(--mau-chu-phu);
}

.mau-gd__mau--vien {
  background: var(--mau-vien);
}

.mau-gd__mau--chinh {
  background: var(--mau-chinh);
}

.mau-gd__mau--loi {
  background: var(--mau-loi);
}

.mau-gd__mau--canh-bao {
  background: var(--mau-canh-bao);
}

.mau-gd__mau--thanh-cong {
  background: var(--mau-thanh-cong);
}

.mau-gd__mau--ket-thuc {
  background: var(--mau-ket-thuc);
}

.mau-gd__mau {
  border: 1px solid var(--mau-vien);
}

.mau-gd__co--lon {
  font-size: var(--co-lon);
}

.mau-gd__co--h1 {
  font-size: var(--co-h1);
}

.mau-gd__co--h2 {
  font-size: var(--co-h2);
}

.mau-gd__co--phu {
  font-size: var(--co-phu);
}

.mau-gd__co--to-de {
  font-family: var(--phong-to-de);
  font-size: var(--co-to-de);
}

.mau-gd__thang p {
  margin: 0 0 var(--kc-2);
}

/* Điện thoại: tờ đề tràn khung, khối quyết định xếp dọc, nút rộng hết khung. */
@media (max-width: 40rem) {
  .to-de {
    margin-right: calc(-1 * var(--kc-4));
    margin-left: calc(-1 * var(--kc-4));
    padding: var(--kc-5) var(--kc-4);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 1.0625rem;
  }

  /* Dòng hẹp (~35 ký tự): căn đều làm khoảng trắng loang nên căn trái; máy tính và bản in vẫn căn đều. */
  .to-de__dan,
  .to-de__hoi {
    text-align: start;
  }

  .to-de__phuong-an {
    grid-template-columns: 2rem 1fr;
  }

  .to-de__dung {
    grid-column: 2;
  }

  .khoi-lich-su__than {
    padding-left: 0;
  }

  .khoi-quyet-dinh {
    padding: var(--kc-4);
  }

  .khoi-quyet-dinh .nut {
    width: 100%;
  }
}

/* In trang xem câu: chỉ phân loại, tờ đề, giải thích và dấu nước. */
@page {
  margin: 18mm 16mm;
}

@media print {
  body {
    background: #fff;
    color: #000;
  }

  /* Bản in luôn căn đều như đề in, kể cả khổ giấy hẹp. */
  .to-de__dan,
  .to-de__hoi {
    text-align: justify;
  }

  .dau-trang,
  .chan-trang,
  .canh-bao-phien,
  .vai-tro-dang-thao-tac,
  .bo-qua,
  .thong-bao,
  .nut,
  .khoi-lich-su,
  .khoi-quyet-dinh,
  .khong-in {
    display: none !important;
  }

  .noi-dung {
    padding: 0;
  }

  .to-de {
    max-width: none;
    padding: 0;
    border: 0;
    box-shadow: none;
    color: #000;
  }

  .to-de__phuong-an {
    margin-left: 0;
  }

  .to-de__phuong-an--dung {
    background: none;
  }

  .phan-loai-cau,
  .phan-loai-cau dd {
    color: #000;
  }
}