/* ============================================================================
   QUẢN LÝ NHÂN SỰ — HỆ THỐNG GIAO DIỆN
   ----------------------------------------------------------------------------
   Một bộ dùng cho cả máy tính và điện thoại. Không có bản "mobile" riêng:
   cùng một trang, bố cục tự đổi theo bề ngang màn hình.

   Điểm gãy:  ≤ 720px  điện thoại — thanh dưới, thẻ xếp dọc, bảng thành phiếu
              ≤ 1080px máy tính bảng — thanh trái thu về biểu tượng
              > 1080px máy tính — thanh trái đầy đủ

   Màu: khai báo bằng biến, đổi sang nền tối chỉ là đổi bộ biến.
   ========================================================================== */

:root {
  --nen:        #f1f5f9;
  --the:        #ffffff;
  --the-2:      #f8fafc;
  --vien:       #e2e8f0;
  --vien-dam:   #cbd5e1;
  --chu:        #0f172a;
  --chu-2:      #475569;
  --chu-3:      #94a3b8;

  --chinh:      #1d4ed8;
  --chinh-dam:  #1e40af;
  --chinh-nhat: #eff6ff;
  --chinh-vien: #bfdbfe;

  --xanh:       #059669;
  --xanh-nhat:  #ecfdf5;
  --vang:       #b45309;
  --vang-nhat:  #fffbeb;
  --do:         #dc2626;
  --do-nhat:    #fef2f2;
  --tim:        #7c3aed;
  --tim-nhat:   #f5f3ff;

  --bong:       0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --bong-2:     0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --bong-3:     0 20px 45px rgba(15,23,42,.18);

  --r:          10px;
  --r-2:        14px;
  --rail:       220px;
  --dau-trang:  48px;

  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}

[data-nen="toi"] {
  --nen: #0b1120; --the: #111827; --the-2: #0f172a;
  --vien: #1f2937; --vien-dam: #334155;
  --chu: #e5e7eb; --chu-2: #9ca3af; --chu-3: #6b7280;
  --chinh: #60a5fa; --chinh-dam: #3b82f6; --chinh-nhat: #172554; --chinh-vien: #1e3a8a;
  --xanh: #34d399; --xanh-nhat: #064e3b;
  --vang: #fbbf24; --vang-nhat: #451a03;
  --do: #f87171; --do-nhat: #450a0a;
  --tim: #a78bfa; --tim-nhat: #2e1065;
  --bong: 0 1px 2px rgba(0,0,0,.4);
  --bong-2: 0 4px 12px rgba(0,0,0,.5);
  --bong-3: 0 20px 45px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--nen); color: var(--chu);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: var(--chinh); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--vien-dam); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }

/* ===================== KHUNG ỨNG DỤNG ===================== */
#ung-dung { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }

#rail {
  background: var(--the); border-right: 1px solid var(--vien);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 30;
}
.rail-dau {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--vien); min-height: var(--dau-trang);
}
.rail-dau .huy-hieu {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--chinh), var(--tim));
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px;
}
.rail-dau b { font-size: 13.5px; display: block; line-height: 1.25; }
.rail-dau small { color: var(--chu-3); font-size: 11px; }

/* Menu dài hơn màn hình thì phải nhìn ra là còn cuộn được nữa, không thì
   người dùng tưởng nhóm cuối cùng là hết — đúng ca "không thấy Ca làm việc". */
#rail nav, #rail-menu { flex: 1; overflow-y: auto; padding: 8px; scrollbar-width: thin; }
#rail nav::-webkit-scrollbar, #rail-menu::-webkit-scrollbar { width: 8px; }
#rail nav::-webkit-scrollbar-thumb, #rail-menu::-webkit-scrollbar-thumb {
  background: var(--vien-dam); border-radius: 4px;
  border: 2px solid var(--the);
}
#rail nav::-webkit-scrollbar-thumb:hover, #rail-menu::-webkit-scrollbar-thumb:hover { background: var(--chu-3); }
#rail { position: relative; }
/* dải mờ ở đáy: còn mục bên dưới thì thấy ngay */
#rail-menu.con-nua, #rail nav.con-nua { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
.rail-nhom { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--chu-3); padding: 14px 10px 6px; font-weight: 700; }
.rail-muc {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; background: none; border-radius: 8px;
  cursor: pointer; color: var(--chu-2); text-align: left; font-size: 13.5px;
  transition: background .12s, color .12s;
}
.rail-muc:hover { background: var(--the-2); color: var(--chu); }
.rail-muc.on { background: var(--chinh-nhat); color: var(--chinh); font-weight: 600; }
.rail-muc .bt { width: 18px; text-align: center; font-size: 15px; flex: none; }
.rail-muc .so { margin-left: auto; background: var(--do); color: #fff; font-size: 10.5px;
  min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 5px; }
.rail-chan { padding: 10px; border-top: 1px solid var(--vien); font-size: 11px; color: var(--chu-3); }

/* ===================== THANH TRÊN ===================== */
#dau-trang {
  position: sticky; top: 0; z-index: 25; background: var(--the);
  border-bottom: 1px solid var(--vien); min-height: var(--dau-trang);
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
}
#dau-trang .tim-nhanh { flex: 1; max-width: 460px; position: relative; }
#dau-trang .tim-nhanh input {
  width: 100%; height: 36px; padding: 0 12px 0 34px; border-radius: 999px;
  border: 1px solid var(--vien); background: var(--the-2); outline: none;
}
#dau-trang .tim-nhanh input:focus { border-color: var(--chinh); background: var(--the); }
#dau-trang .tim-nhanh .bt { position: absolute; left: 11px; top: 8px; color: var(--chu-3); }
.dau-phai { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.nguoi-dung {
  display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px;
  border: 1px solid var(--vien); border-radius: 999px; background: var(--the); cursor: pointer;
}
.nguoi-dung:hover { background: var(--the-2); }
.chu-cai {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--chinh); color: #fff; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700;
}
.nguoi-dung .ten { font-size: 13px; font-weight: 600; line-height: 1.1; }
.nguoi-dung .vai { font-size: 10.5px; color: var(--chu-3); }

/* ===================== NỘI DUNG ===================== */
#than { padding: 12px 16px 72px; max-width: 1560px; }
.trang-dau { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.trang-dau h1 { font-size: 19px; }
.trang-dau p { margin: 1px 0 0; color: var(--chu-2); font-size: 12.5px; }
.trang-dau .viec { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ===================== THẺ ===================== */
.the {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--r-2);
  box-shadow: var(--bong); overflow: hidden;
}
.the + .the { margin-top: 10px; }
.the-dau {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-bottom: 1px solid var(--vien); background: var(--the-2);
}
.the-dau h3 { font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--chu-2); }
.the-dau .viec { margin-left: auto; display: flex; gap: 8px; }
.the-than { padding: 12px 14px; }
.the-than.khit { padding: 0; }

.luoi { display: grid; gap: 10px; }
.luoi.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.luoi.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.luoi.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.luoi.trai-phai { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }

/* Ô số liệu */
.o-so {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--r-2);
  padding: 10px 12px; box-shadow: var(--bong);
}
.o-so .nhan { font-size: 11.5px; color: var(--chu-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.o-so .so { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: 1px; }
.o-so .phu { font-size: 11.5px; color: var(--chu-2); margin-top: 1px; }
.o-so.nhan-manh { background: linear-gradient(135deg, var(--chinh), var(--chinh-dam)); border-color: transparent; color: #fff; }
.o-so.nhan-manh .nhan, .o-so.nhan-manh .phu { color: rgba(255,255,255,.85); }

/* ===================== NÚT ===================== */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--vien); background: var(--the); color: var(--chu);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.nut:hover { background: var(--the-2); border-color: var(--vien-dam); }
.nut:active { transform: translateY(1px); }
.nut:disabled { opacity: .5; cursor: not-allowed; }
.nut.chinh { background: var(--chinh); border-color: var(--chinh); color: #fff; font-weight: 600; }
.nut.chinh:hover { background: var(--chinh-dam); }
.nut.nguy { background: var(--do); border-color: var(--do); color: #fff; }
.nut.phang { border-color: transparent; background: none; }
.nut.phang:hover { background: var(--the-2); }
.nut.nho { height: 30px; padding: 0 10px; font-size: 12.5px; }
.nut.tron { width: 36px; padding: 0; border-radius: 50%; }
.nhom-nut { display: inline-flex; border: 1px solid var(--vien); border-radius: 9px; overflow: hidden; }
.nhom-nut .nut { border: 0; border-radius: 0; }
.nhom-nut .nut + .nut { border-left: 1px solid var(--vien); }
.nhom-nut .nut.on { background: var(--chinh-nhat); color: var(--chinh); font-weight: 600; }

/* ===================== TAB ===================== */
.tab { display: flex; gap: 2px; border-bottom: 1px solid var(--vien); overflow-x: auto; margin-bottom: 10px; }
.tab button {
  border: 0; background: none; padding: 7px 12px; cursor: pointer; white-space: nowrap;
  color: var(--chu-2); font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab button:hover { color: var(--chu); }
.tab button.on { color: var(--chinh); border-bottom-color: var(--chinh); font-weight: 600; }

/* ===================== BẢNG ===================== */
.bang-cuon { overflow-x: auto; }
table.bang { width: 100%; border-collapse: collapse; font-size: 13px; }
table.bang th {
  text-align: left; padding: 6px 10px; background: var(--the-2); color: var(--chu-2);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  border-bottom: 1px solid var(--vien); white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.bang th.xep { cursor: pointer; user-select: none; }
table.bang th.xep:hover { color: var(--chinh); }
table.bang td { padding: 6px 10px; border-bottom: 1px solid var(--vien); vertical-align: middle; }
table.bang tbody tr:hover { background: var(--the-2); }
table.bang tbody tr.bam { cursor: pointer; }
table.bang .so { text-align: right; font-variant-numeric: tabular-nums; }
table.bang .ma { font-family: var(--mono); font-size: 12px; color: var(--chu-2); }
.bang-trong { padding: 24px 14px; text-align: center; color: var(--chu-3); }
.bang-trong .bt { font-size: 30px; display: block; margin-bottom: 8px; opacity: .5; }

/* ===================== NHÃN TRẠNG THÁI ===================== */
.nhan {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--the-2); color: var(--chu-2);
  border: 1px solid var(--vien); white-space: nowrap;
}
.nhan.xanh { background: var(--xanh-nhat); color: var(--xanh); border-color: transparent; }
.nhan.vang { background: var(--vang-nhat); color: var(--vang); border-color: transparent; }
.nhan.do   { background: var(--do-nhat);   color: var(--do);   border-color: transparent; }
.nhan.lam  { background: var(--chinh-nhat);color: var(--chinh);border-color: transparent; }
.nhan.tim  { background: var(--tim-nhat);  color: var(--tim);  border-color: transparent; }

/* ===================== Ô NHẬP ===================== */
.o { margin-bottom: 9px; }
.o > label { display: block; font-size: 12px; font-weight: 600; color: var(--chu-2); margin-bottom: 5px; }
.o > label .bb { color: var(--do); }
.o input, .o select, .o textarea, input.o-nhap, select.o-nhap {
  width: 100%; height: 38px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--vien); background: var(--the); outline: none;
}
.o textarea { height: auto; padding: 9px 11px; resize: vertical; min-height: 84px; line-height: 1.55; }
.o input:focus, .o select:focus, .o textarea:focus { border-color: var(--chinh); box-shadow: 0 0 0 3px var(--chinh-nhat); }
.o input:disabled, .o select:disabled { background: var(--the-2); color: var(--chu-2); }
.o .goi-y { font-size: 11.5px; color: var(--chu-3); margin-top: 4px; }
.o.loi input, .o.loi select { border-color: var(--do); }
.o.loi .goi-y { color: var(--do); }
.hang { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.chon-dong { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.chon-dong input { width: 16px; height: 16px; accent-color: var(--chinh); }

/* ===================== HỘP THOẠI ===================== */
.man-che {
  position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px);
  display: grid; place-items: center; z-index: 100; padding: 16px; animation: hien .12s ease;
}
.man-che.lop2 { z-index: 120; background: rgba(15,23,42,.45); }
@keyframes hien { from { opacity: 0 } }
.hop {
  background: var(--the); border-radius: 16px; box-shadow: var(--bong-3);
  width: min(720px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  animation: len .16s cubic-bezier(.2,.8,.3,1);
}
.hop.rong { width: min(1080px, 100%); }
.hop.hep  { width: min(460px, 100%); }
@keyframes len { from { transform: translateY(12px) scale(.99); opacity: 0 } }
.hop-dau {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--vien);
}
.hop-dau h3 { font-size: 15.5px; }
.hop-dau .phu { font-size: 12px; color: var(--chu-3); margin-top: 2px; }
.hop-dau .dong { margin-left: auto; }
.hop-than { padding: 14px; overflow-y: auto; flex: 1; }
.hop-chan {
  display: flex; gap: 9px; justify-content: flex-end; padding: 13px 18px;
  border-top: 1px solid var(--vien); background: var(--the-2); flex-wrap: wrap;
}
.hop-chan .trai { margin-right: auto; }

/* ===================== VÙNG KÉO THẢ TỆP ===================== */
.tha-tep {
  border: 2px dashed var(--vien-dam); border-radius: 14px; background: var(--the-2);
  padding: 30px 20px; text-align: center; cursor: pointer; position: relative;
  transition: border-color .15s, background .15s, transform .06s;
}
.tha-tep:hover { border-color: var(--chinh); background: var(--chinh-nhat); }
.tha-tep:active { transform: scale(.995); }
.tha-tep input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tha-tep .bt-lon { font-size: 34px; line-height: 1; display: block; margin-bottom: 10px; opacity: .8; }
.tha-tep .loi-moi { font-size: 15px; font-weight: 600; }
.tha-tep .goi { font-size: 12.5px; color: var(--chu-3); margin-top: 5px; }
.tha-tep .nut { margin-top: 12px; pointer-events: none; }

/* Đang rê tệp qua: cả vùng sáng lên để biết thả được */
.tha-tep.dang-keo {
  border-color: var(--chinh); background: var(--chinh-nhat);
  border-style: solid; box-shadow: 0 0 0 4px var(--chinh-nhat);
}
.tha-tep.dang-keo .bt-lon { transform: translateY(-3px); }

/* Đã chọn tệp: đổi hẳn sang thẻ thông tin, không còn giống ô trống */
.tha-tep.co-tep {
  border-style: solid; border-color: var(--xanh); background: var(--xanh-nhat);
  text-align: left; padding: 14px 16px; display: flex; align-items: center; gap: 13px;
}
.tha-tep.co-tep .bt-lon { margin: 0; font-size: 27px; }
.tha-tep.co-tep .ten-tep { font-weight: 650; font-size: 14px; word-break: break-all; }
.tha-tep.co-tep .co-tep-phu { font-size: 12px; color: var(--chu-2); margin-top: 2px; }
.tha-tep .doi-tep {
  margin-left: auto; flex: none; position: relative; z-index: 2; pointer-events: auto;
}
.tha-tep.loi-tep { border-color: var(--do); background: var(--do-nhat); }

@media (max-width: 720px) {
  .tha-tep { padding: 24px 14px; }
  .tha-tep .bt-lon { font-size: 30px; }
}

/* ===================== NHẮN NHANH ===================== */
#khay-nhan { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.nhan-nhanh {
  background: var(--chu); color: var(--nen); padding: 10px 16px; border-radius: 10px;
  box-shadow: var(--bong-3); font-size: 13.5px; max-width: 90vw; animation: len .16s;
}
.nhan-nhanh.loi { background: var(--do); color: #fff; }
.nhan-nhanh.xong { background: var(--xanh); color: #fff; }

/* ===================== LỜI NHẮC TRONG TRANG ===================== */
.loi-nhac {
  display: flex; gap: 9px; padding: 9px 12px; border-radius: var(--r);
  background: var(--chinh-nhat); border: 1px solid var(--chinh-vien); font-size: 13px; line-height: 1.55;
}
.loi-nhac.canh { background: var(--vang-nhat); border-color: transparent; }
.loi-nhac.nguy { background: var(--do-nhat); border-color: transparent; }
.loi-nhac.xong { background: var(--xanh-nhat); border-color: transparent; }
.loi-nhac .bt { font-size: 16px; line-height: 1.2; }

/* ===================== ĐĂNG NHẬP ===================== */
#man-dang-nhap {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(1200px 600px at 20% -10%, var(--chinh-nhat), var(--nen));
}
.hop-dang-nhap {
  width: min(400px, 100%); background: var(--the); border: 1px solid var(--vien);
  border-radius: 18px; box-shadow: var(--bong-2); padding: 28px;
}
.hop-dang-nhap .hieu {
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px;
  background: linear-gradient(140deg, var(--chinh), var(--tim));
  color: #fff; display: grid; place-items: center; font-weight: 800;
}
.hop-dang-nhap h1 { font-size: 20px; }
.hop-dang-nhap p.phu { color: var(--chu-2); font-size: 13px; margin: 4px 0 20px; }

/* ===================== THANH DƯỚI (ĐIỆN THOẠI) ===================== */
#thanh-duoi { display: none; }

/* ===================== ĐIỆN THOẠI ===================== */
@media (max-width: 1080px) {
  :root { --rail: 62px; }
  .rail-dau b, .rail-dau small, .rail-muc .nh, .rail-nhom, .rail-chan { display: none; }
  .rail-muc { justify-content: center; padding: 10px 0; }
  .luoi.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .luoi.trai-phai { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  #ung-dung { grid-template-columns: 1fr; }
  #rail { display: none; }
  #than { padding: 10px 10px 76px; }
  #dau-trang { padding: 0 12px; }
  #dau-trang .tim-nhanh { max-width: none; }
  .nguoi-dung .ten, .nguoi-dung .vai { display: none; }
  .nguoi-dung { padding: 4px; border: 0; }
  .luoi.c2, .luoi.c3, .luoi.c4 { grid-template-columns: 1fr; }
  /* Ô số liệu thì xếp hai cột cho đỡ phải cuộn — bốn ô gọn trong hai hàng */
  .luoi.c2:has(.o-so), .luoi.c3:has(.o-so), .luoi.c4:has(.o-so) {
    grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px;
  }
  .o-so .so { font-size: 19px; }
  .trang-dau h1 { font-size: 17px; }
  .trang-dau .viec { width: 100%; margin-left: 0; }
  .hop { max-height: 94vh; width: 100%; border-radius: 16px 16px 0 0; align-self: flex-end; }
  .man-che { padding: 0; align-items: flex-end; }
  .hop-chan .nut { flex: 1; }

  /* Bảng thành phiếu: mỗi dòng một khối, có nhãn cột ở trước */
  table.bang.phieu, table.bang.phieu tbody, table.bang.phieu tr, table.bang.phieu td { display: block; width: 100%; }
  table.bang.phieu thead { display: none; }
  table.bang.phieu tr {
    border: 1px solid var(--vien); border-radius: var(--r); margin-bottom: 7px;
    padding: 4px 9px; background: var(--the);
  }
  table.bang.phieu td { border: 0; padding: 3px 0; display: flex; gap: 10px; align-items: baseline; }
  table.bang.phieu td::before {
    content: attr(data-nhan); flex: none; width: 40%; color: var(--chu-3);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  }
  table.bang.phieu td.chinh { font-weight: 650; font-size: 14.5px; }
  table.bang.phieu td.chinh::before { display: none; }

  /* Cột phụ: trên điện thoại ẩn đi cho phiếu ngắn lại, máy tính vẫn hiện đủ */
  .an-dt { display: none !important; }

  #thanh-duoi {
    display: grid; grid-auto-flow: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--the); border-top: 1px solid var(--vien);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  #thanh-duoi button {
    border: 0; background: none; display: grid; gap: 2px; justify-items: center;
    padding: 5px 0; color: var(--chu-3); font-size: 10.5px; cursor: pointer;
  }
  #thanh-duoi button .bt { font-size: 19px; }
  #thanh-duoi button.on { color: var(--chinh); font-weight: 650; }
}

/* ===================== IN ===================== */
@media print {
  #rail, #dau-trang, #thanh-duoi, .trang-dau .viec, .nut { display: none !important; }
  #ung-dung { display: block; }
  #than { padding: 0; }
  .the { box-shadow: none; border-color: #ccc; page-break-inside: avoid; }
}

/* ===================== TIỆN ÍCH ===================== */
.chu-mo { color: var(--chu-3); }
.chu-nho { font-size: 12px; }
.mono { font-family: var(--mono); }
.giua { text-align: center; }
.phai { text-align: right; }
.dam { font-weight: 650; }
.gian { display: flex; align-items: center; gap: 8px; }
.gian.doc { flex-direction: column; align-items: stretch; }
.gian.giua { justify-content: center; }
.gian.day { justify-content: space-between; }
.gian.quan { flex-wrap: wrap; }
.day-du { width: 100%; }
.tach { height: 1px; background: var(--vien); margin: 10px 0; }
.an { display: none !important; }
.dang-tai { display: grid; place-items: center; padding: 28px; color: var(--chu-3); }
.vong {
  width: 22px; height: 22px; border: 2.5px solid var(--vien); border-top-color: var(--chinh);
  border-radius: 50%; animation: quay .7s linear infinite; margin-bottom: 10px;
}
@keyframes quay { to { transform: rotate(360deg) } }


/* ---------------------------------------------------------------------------
   Ô chọn có gõ tìm — dùng thay dropdown khi danh sách dài
   ------------------------------------------------------------------------ */
.tim-chon { position: relative; }
.tim-chon .tc-o { padding-right: 26px; }
.tim-chon .tc-bo {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--chu-3); cursor: pointer;
  font-size: 12px; padding: 3px 5px; border-radius: 6px; line-height: 1;
}
.tim-chon .tc-bo:hover { background: var(--the-2); color: var(--do); }
.tim-chon .tc-ds {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 3px);
  z-index: 90; max-height: 260px; overflow: auto;
  background: var(--the); border: 1px solid var(--vien-dam);
  border-radius: 10px; box-shadow: var(--bong-3); padding: 4px;
}
.tim-chon .tc-ds.mo { display: block; }
.tc-dong {
  display: flex; align-items: center; gap: 7px; padding: 5px 7px;
  border-radius: 7px; cursor: pointer; font-size: 12.5px; white-space: nowrap;
}
.tc-dong:hover, .tc-dong.nhay { background: var(--the-2); }
.tc-dong.on { background: var(--chinh-nhat); }
.tc-dong.tc-trong { color: var(--chu-3); font-style: italic; }
.tc-ma { font-size: 11px; color: var(--chinh); min-width: 62px; }
.tc-ten { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tc-phu { font-size: 11px; color: var(--chu-3); }
.tc-them { padding: 6px 8px; font-size: 11.5px; color: var(--chu-3); }