/* DFS OS — giao diện dùng chung
   Màu thương hiệu: xanh ngọc lam #1FA8BC (chính), cam vàng #FFB000 (nhấn), nền trắng.
   Không dùng font ngoài và không tải tài nguyên từ internet. */

:root {
  --chinh: #1FA8BC;
  --chinh-dam: #157f8f;
  --chinh-nhat: #e6f7fa;
  --nhan: #FFB000;
  --nhan-nhat: #fff4dd;
  --chu: #1b2733;
  --chu-phu: #5b6b7b;
  --vien: #dbe3ea;
  --nen: #f5f8fa;
  --trang: #ffffff;
  --do: #d64545;
  --do-nhat: #fdeaea;
  --luc: #1f9254;
  --luc-nhat: #e7f6ee;
  --vang: #b7791f;
  --vang-nhat: #fdf3e0;
  --tim: #6b4fbb;
  --tim-nhat: #efecfb;
  --xam: #64748b;
  --xam-nhat: #eef2f6;
  --ban-kinh: 10px;
  --bong: 0 1px 2px rgba(16, 42, 67, .06), 0 4px 14px rgba(16, 42, 67, .06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--chu);
  background: var(--nen);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--chinh-dam); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 .75rem; }

.bo-qua {
  position: absolute; left: -9999px;
}
.bo-qua:focus {
  left: 8px; top: 8px; z-index: 100; background: var(--trang);
  padding: 8px 12px; border-radius: 6px;
}

/* ------------------------------ Thanh trên ------------------------------ */

.thanh-tren {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--trang);
  border-bottom: 1px solid var(--vien);
  position: sticky; top: 0; z-index: 20;
}
.thanh-tren .logo { display: flex; align-items: center; }
.thanh-tren .logo img { height: 34px; width: auto; }
.ten-he-thong {
  font-weight: 700; color: var(--chinh);
  border-left: 2px solid var(--nhan);
  padding-left: 10px; letter-spacing: .3px;
  /* Không cho xuống dòng: hạ xuống hai dòng thì thanh trên cao gấp đôi và lệch
     so với logo. Màn quá hẹp thì ẩn hẳn — xem mốc 430px bên dưới. */
  white-space: nowrap;
}
.thanh-tren__phai { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.nut-menu {
  display: none; background: none; border: 1px solid var(--vien);
  border-radius: 8px; font-size: 18px; padding: 4px 10px; cursor: pointer;
}

.chuong { position: relative; font-size: 18px; text-decoration: none; }
.chuong__dem {
  position: absolute; top: -6px; right: -10px;
  background: var(--do); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 10px; padding: 0 5px; min-width: 16px; text-align: center;
}

.nguoi-dung { display: flex; align-items: center; gap: 8px; }
.nguoi-dung__ten { font-size: 13px; line-height: 1.2; }
.nguoi-dung__ten small { display: block; color: var(--chu-phu); font-size: 11px; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--chinh-nhat); color: var(--chinh-dam); font-weight: 700;
}
.dang-xuat { margin: 0; }

/* ------------------------------ Bố cục ------------------------------ */

.than { display: flex; min-height: calc(100dvh - 57px); }

.menu {
  width: 236px; flex: 0 0 236px;
  background: var(--trang);
  border-right: 1px solid var(--vien);
  padding: 12px 0 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.menu__tieu-de {
  margin: 0; padding: 0 16px 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--chu-phu); font-weight: 700;
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; color: var(--chu); font-size: 14px;
}
.menu a:hover { background: var(--xam-nhat); text-decoration: none; }
.menu a.dang-mo {
  background: var(--chinh-nhat); color: var(--chinh-dam);
  font-weight: 600; box-shadow: inset 3px 0 0 var(--chinh);
}
.menu__icon { width: 18px; text-align: center; color: var(--chinh); }
.menu__chan {
  margin-top: auto; padding: 12px 16px 0; border-top: 1px solid var(--vien);
  font-size: 12px; color: var(--chu-phu); display: flex; flex-direction: column; gap: 4px;
}

.noi-dung { flex: 1; padding: 20px 24px 48px; min-width: 0; }

/* ------------------------------ Khối ------------------------------ */

.dau-trang {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.dau-trang h1 { margin: 0; }
.dau-trang__phu { color: var(--chu-phu); font-size: 13px; margin: 0; }
.dau-trang__nut { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.the, .khoi {
  background: var(--trang); border: 1px solid var(--vien);
  border-radius: var(--ban-kinh); box-shadow: var(--bong);
  padding: 16px; margin-bottom: 16px;
}
.the__dau { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.the__dau h2, .the__dau h3 { margin: 0; }
.the__dau .nut { margin-left: auto; }

.luoi { display: grid; gap: 16px; }
.luoi--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.luoi--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.luoi--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.so-lieu { background: var(--trang); border: 1px solid var(--vien); border-radius: var(--ban-kinh); padding: 14px 16px; }
.so-lieu__nhan { font-size: 12px; color: var(--chu-phu); text-transform: uppercase; letter-spacing: .04em; }
.so-lieu__gia-tri { font-size: 26px; font-weight: 700; color: var(--chinh-dam); line-height: 1.2; }
.so-lieu__phu { font-size: 12px; color: var(--chu-phu); }
.so-lieu--nhan .so-lieu__gia-tri { color: var(--nhan); }
.so-lieu--do .so-lieu__gia-tri { color: var(--do); }
.so-lieu--luc .so-lieu__gia-tri { color: var(--luc); }

/* ------------------------------ Nút ------------------------------ */

.nut {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid transparent;
  background: var(--chinh); color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: none;
}
.nut:hover { background: var(--chinh-dam); text-decoration: none; }
.nut:disabled { opacity: .55; cursor: not-allowed; }
.nut--nhe { background: var(--trang); color: var(--chu); border-color: var(--vien); }
.nut--nhe:hover { background: var(--xam-nhat); }
.nut--nhan { background: var(--nhan); color: #4a3300; }
.nut--nhan:hover { background: #e59d00; }
.nut--nguy { background: var(--do); }
.nut--nguy:hover { background: #b93a3a; }
.nut--nho { padding: 4px 10px; font-size: 13px; }
.nut--rong { width: 100%; justify-content: center; }

/* Nút đang bị khoá: thẻ <a> không có thuộc tính disabled nên phải tự làm mờ,
   nếu không người dùng thấy một nút trông bấm được mà bấm vào không mở ra gì. */
.nut[aria-disabled="true"], .nut[disabled] {
  opacity: .5; cursor: not-allowed; text-decoration: none;
}

/* ------------------------------ Biểu mẫu ------------------------------ */

.bieu-mau { display: flex; flex-direction: column; gap: 12px; }
.o { display: flex; flex-direction: column; gap: 4px; }
.o label { font-size: 13px; font-weight: 600; color: var(--chu); }
.o small { color: var(--chu-phu); font-size: 12px; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="tel"], input[type="url"],
select, textarea {
  width: 100%; padding: 9px 11px; font-family: inherit; font-size: 15px;
  color: var(--chu); background: var(--trang);
  border: 1px solid var(--vien); border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--chinh); outline-offset: 1px; border-color: var(--chinh);
}
textarea { min-height: 90px; resize: vertical; }
.hang { display: flex; gap: 12px; flex-wrap: wrap; }
.hang > * { flex: 1 1 200px; }
/* Nút nằm trong một ô của hàng ngang không nên kéo hết chiều ngang của ô: nút phá
   huỷ (Huỷ việc, Xoá việc) trông như một dải đỏ khổng lồ và rất dễ bấm nhầm.
   Cho nút bám theo nội dung của nó thay vì giãn ra. */
.hang > .o > .nut { align-self: flex-start; }

.kiem { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.kiem input { width: auto; }

/* Hộp kiểm và biểu mẫu nằm lẫn trong một hàng (bảng nhân sự, nhóm trạng thái ở bộ
   lọc). Lớp này được dùng từ trước nhưng CHƯA TỪNG được định nghĩa, nên nhãn hộp
   kiểm dính sát nhau và biểu mẫu trong ô bảng chiếm cả dòng. */
.an-trong-hang {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; font-weight: 400; white-space: nowrap;
}

/* Bộ lọc dùng lưới thay cho flex.
   Vì sao: với flex, mỗi ô chỉ được 180px rồi bị co tiếp khi hàng quá chật — ô
   "Từ ngày"/"Đến ngày" co lại còn vài chục pixel, chữ dd/mm/yyyy tràn ra ngoài, và
   nhãn dài như "Từ khoá trong tên hoặc mô tả" xuống ba dòng làm cả hàng cao lệch.
   Lưới giữ mỗi ô tối thiểu 190px, tự xuống hàng khi hẹp, và không co dưới ngưỡng. */
.bo-loc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 12px;
  align-items: end;
  margin-bottom: 12px;
}
.bo-loc .o { flex: none; min-width: 0; }
/* Ô tìm kiếm cần rộng hơn ô chọn; nhóm hộp kiểm trạng thái trải hết một hàng. */
.bo-loc .o:has(input[type="search"]) { grid-column: span 2; }
.bo-loc .o:has(input[type="checkbox"]) { grid-column: 1 / -1; }
.bo-loc .de-muc { gap: 6px 16px; }
.bo-loc .de-muc label { font-size: 14px; }

/* ------------------------------ Ô chọn vùng đào tạo ------------------------------ */

/* Ô vùng là một liên kết nhưng phải trông như thẻ bấm được, không phải chữ gạch chân. */
.o-vung { display: block; text-decoration: none; color: inherit; }
.o-vung:hover {
  text-decoration: none;
  border-color: var(--chinh);
  box-shadow: 0 2px 4px rgba(16, 42, 67, .08), 0 8px 22px rgba(16, 42, 67, .10);
}
.o-vung h3 { margin: 0 0 2px; color: var(--chinh-dam); }
.o-vung .thanh-tien-do { margin-top: 10px; }

/* ------------------------------ Bảng ------------------------------ */

.bang-boc { overflow-x: auto; }
table.bang { width: 100%; border-collapse: collapse; font-size: 14px; }
table.bang th, table.bang td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--vien); vertical-align: top;
}
table.bang th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--chu-phu); background: var(--xam-nhat);
}
table.bang tbody tr:hover { background: #fafcfd; }
table.bang td.so { text-align: right; font-variant-numeric: tabular-nums; }
table.bang .hanh-dong { display: flex; gap: 6px; flex-wrap: wrap; }
.trong { padding: 24px; text-align: center; color: var(--chu-phu); }

/* ------------------------------ Nhãn ------------------------------ */

.nhan {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--xam-nhat); color: var(--xam);
  white-space: nowrap;
}
.nhan--xanh { background: var(--chinh-nhat); color: var(--chinh-dam); }
.nhan--luc { background: var(--luc-nhat); color: var(--luc); }
.nhan--do { background: var(--do-nhat); color: var(--do); }
.nhan--vang { background: var(--vang-nhat); color: var(--vang); }
.nhan--tim { background: var(--tim-nhat); color: var(--tim); }
.nhan--xam { background: var(--xam-nhat); color: var(--xam); }
.nhan--nhan { background: var(--nhan-nhat); color: #8a6000; }

/* ------------------------------ Thông báo ------------------------------ */

.thong-bao {
  padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px;
  border: 1px solid transparent;
}
.thong-bao--tot { background: var(--luc-nhat); color: #14663c; border-color: #bfe3cf; }
.thong-bao--loi { background: var(--do-nhat); color: #8f2c2c; border-color: #f2c9c9; }

.canh-bao {
  padding: 10px 14px; border-radius: 8px; margin-bottom: 14px;
  background: var(--nhan-nhat); border: 1px solid #f0d69a; color: #6b4a00; font-size: 14px;
}

/* ------------------------------ Trang ngoài khung ------------------------------ */

body.khung-ngoai {
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 24px 16px;
  background: linear-gradient(180deg, #eef7f9 0%, var(--nen) 60%);
}
.the-ngoai {
  width: 100%; max-width: 460px; background: var(--trang);
  border: 1px solid var(--vien); border-radius: 14px; box-shadow: var(--bong);
  padding: 24px;
}
.the-ngoai__dau { text-align: center; margin-bottom: 18px; }
.the-ngoai__dau img { height: 44px; width: auto; }
.the-ngoai__dau h1 { font-size: 1.15rem; margin: 10px 0 2px; color: var(--chinh-dam); }
.the-ngoai__phu { color: var(--chu-phu); font-size: 13px; margin: 0; }
.the-ngoai__chan { text-align: center; color: var(--chu-phu); font-size: 12px; margin-top: 16px; }
.the-ngoai__chan a { display: block; margin-top: 6px; }

/* ------------------------------ Đồng hồ tập trung ------------------------------ */

.dong-ho {
  text-align: center; padding: 16px; border-radius: var(--ban-kinh);
  background: linear-gradient(180deg, var(--chinh-nhat), #fff);
  border: 1px solid #cfeaf0;
}
.dong-ho__so {
  font-size: 44px; font-weight: 700; color: var(--chinh-dam);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.dong-ho__nhan { color: var(--chu-phu); font-size: 13px; margin-bottom: 10px; }
.dong-ho__nut { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------ Biểu đồ ------------------------------ */

.bieu-do { width: 100%; height: auto; display: block; }
.bieu-do text { font-family: var(--font); fill: var(--chu-phu); font-size: 11px; }
.bieu-do .cot { fill: var(--chinh); }
.bieu-do .cot--nhan { fill: var(--nhan); }
.bieu-do .luoi { stroke: var(--vien); stroke-width: 1; }
.bieu-do .truc { stroke: var(--chu-phu); stroke-width: 1; }

.thanh-tien-do { background: var(--xam-nhat); border-radius: 999px; height: 10px; overflow: hidden; }
.thanh-tien-do span { display: block; height: 100%; background: var(--chinh); }
.thanh-tien-do span.tot { background: var(--luc); }
.thanh-tien-do span.canh-bao { background: var(--nhan); }
.thanh-tien-do span.xau { background: var(--do); }

/* ------------------------------ Nội dung bài học ------------------------------ */

.bai-hoc { max-width: 74ch; }
.bai-hoc h2 { margin-top: 1.4em; color: var(--chinh-dam); }
.bai-hoc h3 { margin-top: 1.2em; }
.bai-hoc ul, .bai-hoc ol { padding-left: 1.4em; }
.bai-hoc code { background: var(--xam-nhat); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.bai-hoc blockquote {
  margin: 1em 0; padding: 8px 14px; border-left: 3px solid var(--nhan);
  background: var(--nhan-nhat);
}
.bai-hoc table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; }
.bai-hoc th, .bai-hoc td { border: 1px solid var(--vien); padding: 6px 9px; text-align: left; }

/* ------------------------------ Câu hỏi kiểm tra ------------------------------ */

.cau-hoi { border: 1px solid var(--vien); border-radius: var(--ban-kinh); padding: 14px; margin-bottom: 12px; }
.cau-hoi__dau { font-weight: 600; margin-bottom: 8px; }
.cau-hoi__lua-chon { display: flex; flex-direction: column; gap: 6px; }
.cau-hoi__lua-chon label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; cursor: pointer; }

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

dialog.hop {
  border: none; border-radius: 12px; padding: 0; max-width: 560px; width: calc(100% - 32px);
  box-shadow: 0 12px 40px rgba(16, 42, 67, .25);
}
dialog.hop::backdrop { background: rgba(16, 42, 67, .45); }
.hop__dau { padding: 16px 18px 0; }
.hop__than { padding: 12px 18px; }
.hop__chan { padding: 0 18px 16px; display: flex; gap: 8px; justify-content: flex-end; }

/* ------------------------------ Tiện ích ------------------------------ */

.phu { color: var(--chu-phu); font-size: 13px; }
.nho { font-size: 12px; }
.dam { font-weight: 600; }
.phai { text-align: right; }
.giua { text-align: center; }
.mt { margin-top: 12px; }
.mb { margin-bottom: 12px; }
.an { display: none !important; }
.chi-man-hinh-doc { display: none; }
.de-muc { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ============================================================================
   GIAO DIỆN THÍCH ỨNG — điện thoại và máy tính bảng
   ----------------------------------------------------------------------------
   Ba mốc, đặt theo thiết bị thật đang dùng:
     · trên 1100px  : máy tính, menu luôn hiện, lưới 4 cột
     · 768–1100px   : máy tính bảng (iPad dọc 820, iPad ngang 1024–1194). Menu vẫn
                      hiện vì màn đủ rộng; bảng giữ nguyên dạng bảng.
     · dưới 768px   : điện thoại. Menu thu vào nút ☰, bảng chuyển thành thẻ, lưới
                      số liệu 2 cột.
   Mốc cũ là 900px nên iPad dọc (820px) bị coi là điện thoại và mất luôn menu —
   đó là lý do phải hạ mốc xuống 768px.
   ========================================================================== */

/* Vùng an toàn: iPhone có tai thỏ và thanh trang chủ. Không chừa chỗ thì thanh
   trên bị tai thỏ che và nội dung cuối trang bị thanh trang chủ đè. */
.thanh-tren {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.noi-dung { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
body.khung-ngoai { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

@media (max-width: 1100px) {
  .menu { width: 200px; flex: 0 0 200px; }
  .noi-dung { padding: 18px 18px 40px; }
  /* 4 cột ở màn hẹp làm thẻ số liệu chật, chữ nhãn xuống dòng liên tục. */
  .luoi--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

@media (max-width: 767px) {
  .nut-menu { display: inline-block; }
  .than { flex-direction: column; }
  .menu {
    width: 100%; flex: none; border-right: none; border-bottom: 1px solid var(--vien);
    display: none;
    /* Menu dài phải tự cuộn, nếu không nó đẩy toàn bộ nội dung xuống dưới. */
    max-height: calc(100dvh - 57px); overflow-y: auto;
  }
  .menu.mo { display: flex; }
  .menu a { padding: 12px 16px; min-height: 46px; }
  .menu__chan { margin-top: 0; }

  .noi-dung { padding: 16px 14px calc(40px + env(safe-area-inset-bottom)); }
  .nguoi-dung__ten { display: none; }
  .chi-man-hinh-doc { display: block; }

  .dau-trang { gap: 8px; margin-bottom: 12px; }
  .dau-trang__nut { margin-left: 0; width: 100%; }
  .dau-trang__nut .nut { flex: 1 1 auto; justify-content: center; }

  /* Nhãn iOS tự phóng to trang khi ô nhập có cỡ chữ dưới 16px. Đây là lỗi thấy rõ
     nhất khi dùng trên iPhone: chạm vào ô là cả trang bị zoom. */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="date"], input[type="datetime-local"], input[type="tel"], input[type="url"],
  select, textarea { font-size: 16px; }

  /* Ngón tay không bấm trúng nút cao 26px. Nâng mọi nút lên tối thiểu 40px. */
  .nut, .nut--nho { min-height: 40px; justify-content: center; }
  .nut--rong { min-height: 44px; }
  .bieu-mau .nut { min-height: 44px; }

  .bo-loc { grid-template-columns: 1fr; }
  .bo-loc .o:has(input[type="search"]) { grid-column: auto; }
  .hang > * { flex: 1 1 100%; }
  .the, .khoi { padding: 14px; }
  .the__dau { flex-wrap: wrap; }
  .the__dau .nut { margin-left: 0; }

  /* Thẻ số liệu 2 cột: 6 thẻ xếp một cột chiếm gần 700px chiều cao vô ích. */
  .luoi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .so-lieu { padding: 12px 13px; }
  .so-lieu__gia-tri { font-size: 22px; }
  .so-lieu__nhan { font-size: 11px; }

  /* Bảng viết tay (không gắn được nhãn cột) vẫn phải cuộn ngang cho đọc được,
     thay vì bị bóp cho vừa khung. */
  table.bang:not(.bang--the) { min-width: 640px; }

  /* Bảng khoá–giá trị viết tay: nhãn là <th> nằm ngay trong <tbody>, mỗi dòng chỉ
     có hai ô. Trần 640px ở trên sinh ra cho bảng nhiều cột, áp vào loại bảng này
     thì trình duyệt chia bề rộng theo nội dung và cho cột nhãn tới 421px, đẩy toàn
     bộ giá trị ra ngoài màn hình 390px: người dùng thấy "Hạn hoàn thành", "Định
     mức" mà không thấy giá trị nào. Bỏ trần đó và ghim nhãn ở 45% để cả nhãn lẫn
     giá trị cùng nằm trong tầm nhìn.
     Dấu :has() phân biệt đúng loại bảng này — bảng nhiều cột để nhãn ở <thead> nên
     không khớp, vẫn giữ nguyên hành vi cuộn ngang. */
  table.bang:not(.bang--the):has(> tbody > tr > th) { min-width: 0; }
  table.bang > tbody > tr > th { width: 45%; white-space: normal; }

  /* ------------------------------------------------------------------------
     Bảng dựng bằng hàm `bang()` chuyển thành từng thẻ.
     Bảng 9 cột trên màn 390px nếu giữ dạng bảng thì mỗi cột rộng ~40px, chữ dồn
     thành cột dọc và cột "Thao tác" chứa nút Duyệt bị đẩy ra ngoài tầm nhìn.
     Mỗi dòng thành một thẻ, mỗi ô một dòng có nhãn lấy từ `data-nhan`.
     ---------------------------------------------------------------------- */
  table.bang--the { min-width: 0; }
  table.bang--the thead { display: none; }
  table.bang--the, table.bang--the tbody, table.bang--the tr, table.bang--the td {
    display: block; width: 100%;
  }
  table.bang--the tr {
    border: 1px solid var(--vien); border-radius: var(--ban-kinh);
    padding: 10px 12px; margin-bottom: 10px; background: var(--trang);
  }
  table.bang--the tr:hover { background: var(--trang); }
  table.bang--the td {
    border: none; padding: 5px 0;
    display: flex; gap: 12px; align-items: flex-start;
  }
  table.bang--the td + td { border-top: 1px dashed var(--vien); }
  table.bang--the td::before {
    content: attr(data-nhan);
    flex: 0 0 104px;
    font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
    color: var(--chu-phu); font-weight: 600;
    padding-top: 2px;
  }
  /* Ô chứa nút thao tác: nhãn nằm trên, nút trải hết chiều ngang cho dễ bấm. */
  table.bang--the td .hanh-dong { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
  table.bang--the td .hanh-dong .nut { flex: 1 1 auto; }
  table.bang--the td:has(.hanh-dong) { display: block; }
  table.bang--the td:has(.hanh-dong)::before { display: block; margin-bottom: 6px; }
}

/* Màn rất hẹp (iPhone SE 320px, iPhone 15 390px): thanh trên phải nằm gọn một
   hàng. Logo đã đủ nhận diện nên ẩn chữ "DFS OS" để nhường chỗ cho chuông, ảnh
   đại diện và nút Đăng xuất. */
@media (max-width: 430px) {
  .ten-he-thong { display: none; }
  .thanh-tren { gap: 10px; }
}

@media (max-width: 380px) {
  .thanh-tren { gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .thanh-tren .logo img { height: 26px; }
  .thanh-tren__phai { gap: 6px; }
  /* Giữ nút Đăng xuất trên một dòng: hạ xuống hai dòng làm thanh trên cao gấp đôi. */
  .dang-xuat .nut { padding: 8px 8px; font-size: 12px; white-space: nowrap; }
  table.bang--the td::before { flex-basis: 88px; }
}

@media print {
  .thanh-tren, .menu, .dau-trang__nut, .nut { display: none !important; }
  .noi-dung { padding: 0; }
  .the, .khoi { box-shadow: none; border-color: #999; }
  body { background: #fff; font-family: "Times New Roman", Times, serif; }
}