/* ============================================================================
   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) minmax(0, 1fr); min-height: 100vh; }
/* Cột nội dung không được nở theo min-content của con (lưới auto-fit, bảng rộng…) — nở là cả trang
   tràn sang phải, phần bên phải bị cắt (3.40) */
#ung-dung > div { min-width: 0; }

#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; }
/* 4.0.3: logo công ty nằm đầu thanh bên (thay huy hiệu NS + tên module) — đầu trang chỉ còn logo ở điện thoại */
.rail-dau .rail-logo { border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; flex: 1; min-width: 0; }
.rail-dau .rail-logo img { height: 30px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.rail-dau .an-han { display: none; }
.rail-dau .huy-hieu { display: none; }
@media (max-width: 1080px) { .rail-dau .huy-hieu { display: grid; } }
.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); }
/* KHÔNG đặt lại position ở đây: dòng này trước ghi "position: relative" và nó
   đè lên "position: sticky" khai ở trên (cùng độ ưu tiên, dòng sau thắng), nên
   trang nào có bảng dài là cuộn xuống menu trôi mất theo. Sticky cũng tự làm
   gốc toạ độ cho phần tử con đặt tuyệt đối, nên chẳng cần 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); }
/* MỤC LỚN hai cấp (MES 1.6): cha sổ ra / thu vào, con thụt vào có vạch dọc; cha sáng nhẹ khi đang ở một màn con */
.rail-cha { font-weight: 600; color: var(--chu); }
.rail-cha .rail-mui { margin-left: auto; font-size: 11px; color: var(--chu-3); }
.rail-cha-khoi.con-on > .rail-cha { color: var(--chinh); }
.rail-cha-khoi .rail-con { display: none; margin-left: 17px; padding-left: 4px; border-left: 2px solid var(--vien); }
.rail-cha-khoi.mo .rail-con { display: block; }
.rail-cha-khoi.con-on .rail-con { border-left-color: var(--chinh-nhat); }
.rail-muc-con { padding: 6px 8px; font-size: 13px; }
.rail-muc-con .bt { font-size: 14px; }
#rail.gon .rail-cha-khoi .rail-con { margin-left: 0; padding-left: 0; border-left: 0; }
#rail.gon .rail-cha .rail-mui { display: none; }

/* ===================== 4.3.2: ẨN / GHIM MENU TRÁI =====================
   Máy tính: mặc định menu trái ẨN (rộng chỗ cho bảng), bấm ☰ trên đầu trang thì
   trượt ra như ngăn kéo (tấm phủ mờ, bấm ngoài / chọn mục là đóng). Nút 📌 trong
   ngăn kéo GHIM lại = luôn hiện như trước; trạng thái nhớ theo tài khoản
   (localStorage qlns_rail_ghim:<mã>). Điện thoại (≤720px) giữ thanh dưới, không đổi. */
.rail-dau .rail-ghim { border: 0; background: none; padding: 4px 6px; border-radius: 8px; cursor: pointer; font-size: 15px;
  line-height: 1; color: var(--chu-3); flex: none; opacity: .55; transition: opacity .12s, background .12s; }
.rail-dau .rail-ghim:hover { opacity: 1; background: var(--the-2); }
body.rail-ghim .rail-dau .rail-ghim { opacity: 1; color: var(--chinh); background: var(--chinh-nhat); }
#rail-phu { display: none; }
@media (min-width: 721px) {
  #dau-trang #nut-menu { display: inline-flex; }
  #dau-trang #nut-lui { display: inline-flex; }
  body.rail-an #ung-dung { grid-template-columns: minmax(0, 1fr); }
  body.rail-an #rail { display: none; }
  body.rail-an.rail-tam #rail { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: 250px; height: 100vh;
    box-shadow: var(--bong-3); z-index: 70; border-right: 1px solid var(--vien); animation: rail-truot .16s ease-out; }
  body.rail-an.rail-tam #rail-phu { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 69; }
  body.rail-an.rail-tam #rail .rail-dau b, body.rail-an.rail-tam #rail .rail-dau .rail-logo, body.rail-an.rail-tam #rail .rail-muc .nh,
  body.rail-an.rail-tam #rail .rail-nhom, body.rail-an.rail-tam #rail .rail-cha .rail-mui { display: revert; }
  body.rail-an.rail-tam #rail .rail-chan { display: block; }
  body.rail-an.rail-tam #rail .rail-muc { justify-content: flex-start; padding: 7px 10px; }
  body.rail-an.rail-tam #rail .rail-cha-khoi .rail-con { margin-left: 17px; padding-left: 4px; border-left: 2px solid var(--vien); }
  body.rail-an.rail-tam #rail .rail-dau .huy-hieu { display: none; }
}
@keyframes rail-truot { from { transform: translateX(-30px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (max-width: 720px) { .rail-dau .rail-ghim, #rail-phu, #dau-trang #nut-menu { display: none !important; } }

/* 4.13.6: nút Back — viên thuốc mũi tên + chữ, cùng tông với các nút đầu trang; điện thoại chỉ còn mũi tên */
#dau-trang .nut-lui { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 11px 0 6px; border: 1px solid var(--vien);
  border-radius: 99px; background: var(--the); color: var(--chu-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; flex: none;
  transition: background .12s, color .12s, border-color .12s; }
#dau-trang .nut-lui:hover { background: var(--chinh-nhat); color: var(--chinh); border-color: var(--chinh-vien); }
#dau-trang .nut-lui:active { transform: translateY(1px); }
@media (max-width: 720px) { #dau-trang .nut-lui { padding: 0 6px; width: 30px; justify-content: center; } #dau-trang .nut-lui span { display: none; } }

/* ===================== 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; }

/* ---- Đồng hồ phiên xem lương -----------------------------------------------
   Mở khoá lương xong là có một cửa sổ ngắn rồi tự đóng. Trước đây không ai
   biết còn mấy phút, đang xem dở thì bảng trắng ra đòi mật khẩu. Nay đếm
   ngược ngay cạnh nút tải lại, bấm vào là khoá luôn cho yên tâm khi rời máy. */
.chip-khoa {
  display: inline-flex; align-items: center; gap: 5px; height: 28px;
  padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--xanh); background: var(--xanh-nhat); color: var(--xanh);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1; white-space: nowrap;
}
.chip-khoa:hover { filter: brightness(.96); }
.chip-khoa .ck-bt { font-size: 12.5px; }
/* Còn dưới một phút thì chuyển vàng và nhấp nháy nhẹ — đủ để liếc thấy */
.chip-khoa.sap { border-color: var(--vang); background: var(--vang-nhat); color: var(--vang);
  animation: ck-nhay 1s ease-in-out infinite; }
.chip-khoa.dong { border-color: var(--vien-dam); background: var(--the-2); color: var(--chu-2);
  cursor: default; animation: none; }
@keyframes ck-nhay { 50% { opacity: .55; } }
@media (max-width: 640px) { .chip-khoa { padding: 0 8px; font-size: 11.5px; } }

.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 {
  position: relative; overflow: hidden;
  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;
}
.chu-cai i { font-style: normal; }
/* Có ảnh thì ảnh phủ kín, chữ cái nằm dưới làm nền lúc ảnh chưa về */
.chu-cai img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.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 104px; }   /* 4.3.2: bỏ max-width 1560 — ẩn menu rồi mà bên phải vẫn trống thì vô lý */   /* đáy chừa bong bóng chat (56px + 30px) — cuối trang không bị đè */
.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);
}
/* Nhãn của ô số trùng tên lớp với cái NHÃN dạng viên thuốc (.nhan) nên bị ăn
   nền và viền của nó — trên ô nhấn mạnh thì thành chữ trắng trên nền trắng,
   đọc không ra. Trả nó về đúng một dòng chữ. */
.o-so .nhan { display: block; background: none; border: 0; padding: 0; border-radius: 0;
  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.cam  { background: var(--cam, #d97706); border-color: var(--cam, #d97706); color: #fff; }
/* Ô nhập tiền: số dóng phải, chữ số đều nhau — đọc 35.000.000 không phải đếm */
.o-tien { text-align: right; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.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: 8px; }
/* 3.20: tab nhỏ lại (12.5px, đệm 5×10) — màn nhiều tab hiện đủ trên một hàng, nhường chỗ cho nội dung */
.tab button {
  border: 0; background: none; padding: 5px 10px; cursor: pointer; white-space: nowrap;
  color: var(--chu-2); font-size: 12.5px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab button:hover { color: var(--chu); }
/* Tab đang chọn có NỀN chứ không chỉ đổi màu chữ: trên màn sáng, chữ xanh
   nhạt cạnh chữ xám đen rất khó nhận ra đang đứng ở tab nào. */
.tab button.on { color: var(--chinh); border-bottom-color: var(--chinh); font-weight: 600;
  background: var(--chinh-nhat); border-radius: 9px 9px 0 0; }

/* ===================== 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; }
.nhan.cam  { background: #ffedd5; color: #c2410c; 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;
  /* Cột lưới KHÔNG được rộng hơn màn hình. Mặc định grid cho ô rộng bằng nội
     dung nhỏ nhất, nên một bảng rộng trong hộp thoại đẩy cả hộp ra ngoài mép
     phải — trên điện thoại là mất luôn nút ✕ và hàng nút dưới đáy. */
  grid-template-columns: minmax(0, 1fr);
}
.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-width: 100%; min-width: 0; box-sizing: border-box;
  max-height: 88vh; max-height: min(88vh, calc(100svh - 24px));
  display: flex; flex-direction: column; overflow: hidden; justify-self: center;
  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); flex: none;
}
.hop-dau > div:first-child { min-width: 0; }
.hop-dau h3 { overflow-wrap: anywhere; }
.hop-dau .dong { flex: none; }
.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; }
/* Nút đóng hộp: to, dễ bấm — máy tính là vòng tròn 40px, điện thoại là nút "Đóng ✕" có chữ */
.hop-dau .nut.dong { width: 40px; height: 40px; font-size: 20px; line-height: 1; border: 1px solid var(--vien); background: var(--the-2); color: var(--chu-2); }
.hop-dau .nut.dong:hover { background: var(--do-nhat, #fee2e2); color: var(--do); border-color: var(--do); }
@media (max-width: 600px) {
  .hop-dau .nut.dong { width: auto; height: 36px; border-radius: 10px; padding: 0 12px; font-size: 13.5px; font-weight: 650; }
  .hop-dau .nut.dong::before { content: "Đóng "; }
}
/* Thân hộp cuộn cả hai chiều: bảng rộng thì cuộn ngang TRONG hộp, không đẩy
   hộp rộng ra; min-height 0 để thân co lại nhường chỗ cho đầu và chân hộp. */
.hop-than { padding: 14px; overflow: auto; flex: 1 1 auto; min-height: 0; min-width: 0;
  -webkit-overflow-scrolling: touch; }
/* Ảnh trong hộp thoại không bao giờ được đẩy hộp rộng ra ngoài màn hình */
.hop-than img { max-width: 100%; height: auto; }
.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; flex: none;
}
.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: auto; min-width: 48px; padding: 0 12px; height: 48px; border-radius: 14px; margin-bottom: 16px;
  justify-self: start; letter-spacing: .04em;
  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; }
/* THANH NHANH trên đầu trang (3.32) — máy tính: 6 ô giữa logo và góc phải, cùng bộ với thanh dưới điện thoại */
#thanh-nhanh { flex: 0 1 auto; margin: 0 auto; min-width: 0; display: flex; justify-content: safe center; gap: 2px; align-self: stretch; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#thanh-nhanh::-webkit-scrollbar { display: none; }
/* 5.3.27: hai khung — [📧 Email · 📌 Nhắc việc] dùng chung mọi module, tách hẳn khỏi [menu của module đang mở] */
#thanh-nhanh .tn-khung { display: flex; gap: 2px; align-items: center; flex: none; border: 1px solid var(--vien); border-radius: 12px; padding: 2px; background: var(--the); }
#thanh-nhanh .tn-khung + .tn-khung { margin-left: 8px; }
#thanh-nhanh .tn-chung { background: var(--chinh-nhat); border-color: var(--chinh-vien); }
/* điện thoại: khung Email · Nhắc việc nằm trên đầu, cạnh logo (thay nhãn đổi module đã bỏ) */
.dau-chung { display: none; gap: 2px; align-items: center; margin-left: 6px; padding: 2px; border: 1px solid var(--chinh-vien); background: var(--chinh-nhat); border-radius: 12px; flex: none; }
.dau-chung button { position: relative; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 8px; border-radius: 9px; font-size: 10px; line-height: 1.1; color: var(--chu-2); cursor: pointer; }
.dau-chung button .bt { font-size: 17px; line-height: 1.1; }
.dau-chung button.on { background: var(--the); color: var(--chinh); font-weight: 650; }
.dau-chung .hh { position: absolute; top: -5px; right: 0; margin: 0; min-width: 16px; height: 16px; font-size: 10px; }
@media (max-width: 700px) { .dau-chung { display: flex; } }
body.gd-dt .dau-chung { display: flex; }
/* 5.3.29: Module Email — bỏ hẳn thanh dưới trên điện thoại, trả lại chỗ trống ở đáy */
body.mod-email #thanh-duoi { display: none !important; }
@media (max-width: 720px) { body.mod-email #than { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; } }
body.gd-dt.mod-email #than { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
#dau-trang .nguoi-dung { flex: none; } #dau-trang .nguoi-dung .ten, #dau-trang .nguoi-dung .vai { white-space: nowrap; }
@media (max-width: 1000px) { #thanh-nhanh button { padding: 4px 7px; } }
#thanh-nhanh button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 13px; border-radius: 10px;
  font: inherit; font-size: 10.5px; color: var(--chu-3); cursor: pointer; position: relative; white-space: nowrap; line-height: 1.2; }
#thanh-nhanh button .bt { font-size: 19px; line-height: 1.15; }
#thanh-nhanh button:hover { background: var(--the-2); color: var(--chu); }
#thanh-nhanh button.on { color: var(--chinh); background: var(--chinh-nhat); font-weight: 650; }
#thanh-nhanh .hh { position: absolute; top: 0; right: 4px; margin: 0; min-width: 16px; height: 16px; font-size: 10px; }
@media (max-width: 700px) { #thanh-nhanh { display: none; } }
/* bảng ô to của một nhóm (Của tôi · Quản lý · HCNS · Thêm) */
.nn-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nn-nhom { grid-column: 1 / -1; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--chu-3); margin: 6px 2px 0; }
.nn-o { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--vien); border-radius: 13px; background: var(--the-2);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--chu); cursor: pointer; text-align: center; position: relative; line-height: 1.25; min-height: 78px; justify-content: center; }
.nn-o .bt { font-size: 28px; line-height: 1; } .nn-o:hover { border-color: var(--chinh); background: var(--chinh-nhat); } .nn-o:active { transform: translateY(1px); }
.nn-o .hh { position: absolute; top: 6px; right: 6px; margin: 0; }
/* 3.78.12: điện thoại 3 cột, ô nhỏ gọn hơn (icon 22px, chữ 11.5px) — nhìn một màn được nhiều mục hơn */
@media (max-width: 700px) { .nn-luoi { grid-template-columns: repeat(3, 1fr); gap: 6px; } .nn-o { min-height: 68px; padding: 8px 4px; font-size: 11.5px; line-height: 1.25; border-radius: 10px; gap: 3px; } .nn-o .bt { font-size: 22px; } .nn-nhom { font-size: 11px; } }
@media (max-width: 400px) { .nn-o { font-size: 11px; } }

/* ===================== ĐIỆN THOẠI ===================== */
@media (max-width: 1080px) {
  :root { --rail: 62px; }
  .rail-dau b, .rail-dau small, .rail-dau .rail-logo, .rail-muc .nh, .rail-nhom, .rail-chan, .rail-cha .rail-mui { display: none; }
  .rail-muc { justify-content: center; padding: 10px 0; }
  .rail-cha-khoi .rail-con { margin-left: 0; padding-left: 0; border-left: 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; }
  /* Chừa chỗ cho thanh dưới (cao ~56px) cộng vạch home của iPhone, nếu không
     thì dòng cuối mọi trang bị che */
  #than { padding: 10px 10px calc(74px + env(safe-area-inset-bottom, 0px)); }
  #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; }
  /* Điện thoại: hộp thành tấm kéo từ đáy, cao tối đa gần hết màn hình THẬT
     (svh/dvh — trừ thanh địa chỉ), chừa vạch home của iPhone. */
  .hop { max-height: 94vh; max-height: calc(100dvh - 10px); width: 100%; border-radius: 16px 16px 0 0; align-self: flex-end; }
  .man-che { padding: 0; align-items: flex-end; }
  .hop-dau { padding: 12px 14px; }
  .hop-than { padding: 12px; }
  .hop-chan { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .hop-chan .nut { flex: 1; min-width: 0; }

  /* 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;
    text-align: left; justify-content: flex-start; }
  /* Nhãn chỉ chiếm ĐÚNG BỀ RỘNG CỦA NÓ (tối thiểu 76px, tối đa 40%) chứ không
     ăn cứng 40% — dán cứng thì tên dự án dài bị bóp thành năm dòng trong khi
     nửa bên phải bỏ trống. */
  table.bang.phieu td::before {
    content: attr(data-nhan); flex: 0 0 auto; min-width: 76px; max-width: 40%;
    color: var(--chu-3);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  }
  table.bang.phieu td.so, table.bang.phieu td.phai, table.bang.phieu td.giua {
    text-align: left; justify-content: flex-start;
  }
  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; grid-auto-columns: minmax(0, 1fr); 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; min-width: 0;
    padding: 5px 0; color: var(--chu-3); font-size: 10.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #thanh-duoi button .bt { font-size: 19px; }
  #thanh-duoi button.on { color: var(--chinh); font-weight: 650; }
}

/* ===== 5.2.3: GIAO DIỆN ĐIỆN THOẠI CHO MÁY GẬP / MÁY BẢNG CẢM ỨNG =====
   Galaxy Z Fold mở ra rộng ~884px — hơn mốc 720px nên app tưởng là máy tính: bày thanh bên,
   giấu mất thanh menu dưới, thành ra nửa máy tính nửa điện thoại và không còn chỗ bấm menu.
   Máy KHÔNG CÓ CHUỘT thì thanh bên vô dụng. JS (App.apGiaoDien) gắn class này khi màn rộng hơn
   720px mà vẫn là màn chạm, hoặc khi người dùng tự chọn «kiểu điện thoại» trong menu tài khoản. */
body.gd-dt #ung-dung { grid-template-columns: minmax(0, 1fr); }
body.gd-dt #rail, body.gd-dt #rail-phu { display: none !important; }
body.gd-dt #dau-trang #nut-menu, body.gd-dt .rail-dau .rail-ghim { display: none !important; }
body.gd-dt #thanh-nhanh { display: none !important; }
body.gd-dt #dau-trang .logo-cty { display: flex; }
body.gd-dt #than { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
body.gd-dt #thanh-duoi {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); 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));
}
body.gd-dt #thanh-duoi button {
  border: 0; background: none; display: grid; gap: 2px; justify-items: center; min-width: 0;
  padding: 5px 0; color: var(--chu-3); font-size: 11.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.gd-dt #thanh-duoi button .bt { font-size: 21px; }
body.gd-dt #thanh-duoi button.on { color: var(--chinh); font-weight: 650; }

/* ===== 5.3.28: BẢN TEST — nhìn là biết ngay đang thao tác trên dữ liệu thử =====
   Viền đỏ ôm cả màn hình (không chắn chuột) + dải chữ dưới đáy. Cố tình để chói: người dùng sang
   đây bằng mật khẩu, nhưng lỡ để tab mở cả ngày thì vẫn phải nhớ mình đang ở bản test. */
body.ban-test::before {
  content: ""; position: fixed; inset: 0; border: 4px solid #dc2626; border-radius: 4px;
  pointer-events: none; z-index: 9998; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .35);
}
#dai-test {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 9999;
  background: #dc2626; color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 14px calc(3px + env(safe-area-inset-bottom, 0px)); border-radius: 8px 8px 0 0;
  pointer-events: none; box-shadow: 0 -2px 10px rgba(220, 38, 38, .35);
  white-space: nowrap; max-width: 96vw; overflow: hidden; text-overflow: ellipsis;
}
#dai-test b { font-weight: 800; }
/* 5.3.33: ĐIỆN THOẠI có thanh menu dưới — nâng dải lên trên thanh, kẻo che mất nhãn các ô menu.
   Module Email giấu thanh dưới nên ở đó dải vẫn nằm sát đáy như trên máy tính. */
@media (max-width: 720px) {
  #dai-test { font-size: 11px; padding: 2px 10px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); border-radius: 8px; }
  #dai-test .dai-dai { display: none; }   /* chữ dài chỉ để trên máy tính — màn hẹp cắt mất chữ */
  body.mod-email #dai-test { bottom: 0; padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)); border-radius: 8px 8px 0 0; }
}
body.gd-dt #dai-test { font-size: 11px; padding: 2px 10px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); border-radius: 8px; }
body.gd-dt #dai-test .dai-dai { display: none; }
body.gd-dt.mod-email #dai-test { bottom: 0; padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)); border-radius: 8px 8px 0 0; }

/* ===================== IN ===================== */
@media print {
  #rail, #dau-trang, #thanh-duoi, .trang-dau .viec, .nut { display: none !important; }
  #ung-dung { display: block; }
  #than { padding: 0; max-width: none; }
  .the { box-shadow: none; border-color: #ccc; page-break-inside: avoid; }
  /* Bảng rộng: khung cuộn phải mở hết ra, cột dính (sticky) trả về tĩnh, nếu
     không giấy chỉ in được phần đang nhìn thấy trên màn hình. */
  .bang-cuon { overflow: visible !important; }
  table.bang th, table.bang td { position: static !important; }
  /* Màu nền ô (ngày nghỉ, cột sáng, giờ theo đơn) phải ra giấy */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===================== 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); }
/* Hộp kết quả gắn thẳng vào <body> (xem timChon ở lib.js) — z-index phải cao
   hơn hộp thoại lớp 2 (120) và thấp hơn khay nhắn (200) */
.tc-ds {
  display: none; position: fixed; z-index: 150; max-height: 260px; overflow: auto;
  background: var(--the); border: 1px solid var(--vien-dam);
  border-radius: 10px; box-shadow: var(--bong-3); padding: 4px; font-size: 13px;
}
.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; }
/* Tên không được bị chữ phụ (công ty · bộ phận · chức vụ) đè mất: tên giữ tối
   thiểu 45% bề rộng, chữ phụ co lại và cắt "…" khi hộp hẹp */
.tc-ten { flex: 1 1 45%; min-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.tc-phu { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--chu-3); }
.tc-them { padding: 6px 8px; font-size: 11.5px; color: var(--chu-3); }
/* Chữ khớp khi tìm nhanh (toSangTim ở lib.js) */
mark.tim, .tim-sang mark { background: rgba(250,204,21,.55); color: inherit; border-radius: 2px; padding: 0 1px; }

/* Nhãn loại đơn — ba màu: tăng ca cam, xác nhận công xanh dương, xin nghỉ xanh lá */
.nhan.don-tc { background: #fff1e0; color: #b45309; border-color: #f6c58a; }
.nhan.don-xn { background: #e8f0ff; color: #1d4ed8; border-color: #a9c2f5; }
/* Xin nghỉ để màu ĐỎ: trong bảng đơn dày đặc, nghỉ là thứ người duyệt phải
   nhìn ra trước tiên (mất người ngày đó), xanh lá đọc như "đã xong". */
.nhan.don-nghi { background: #fdeaea; color: #b91c1c; border-color: #f3b6b6; }

/* Điện thoại: trang KHÔNG trượt ngang — chỉ bảng (.bang-cuon) tự cuộn trong khung của nó */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; }
  #than { overflow-x: hidden; max-width: 100vw; }
  .luoi > *, .hang > *, .the, .the-than { min-width: 0; }
  .bang-cuon { max-width: 100%; -webkit-overflow-scrolling: touch; }
  .trang-dau .viec { flex-wrap: wrap; max-width: 100%; }
  .thanh-thang { max-width: 100%; }
  .thanh-thang input[type=month] { max-width: 150px; }
}

/* iPhone: chạm vào ô nhập có chữ nhỏ hơn 16px là Safari tự phóng to cả trang — đặt 16px cho mọi ô nhập trên điện thoại */
@media (max-width: 600px) {
  input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { font-size: 16px; }
}

/* Tấm "Thêm" trên điện thoại: thanh dưới vẫn nổi lên trên để chuyển nhanh */
@media (max-width: 600px) {
  body.menu-day-du #thanh-duoi { z-index: 130; box-shadow: 0 -8px 22px rgba(15,23,42,.18); }
  body.menu-day-du .man-che { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  body.menu-day-du .hop { max-height: calc(100dvh - 70px); }
}

/* Logo công ty trên thanh trên — đổi được ở Danh mục & tổ chức */
#dau-trang .logo-cty { border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; flex: none; }
#dau-trang .logo-cty img { height: 30px; width: auto; max-width: 190px; object-fit: contain; display: block; }
@media (max-width: 600px) { #dau-trang .logo-cty img { height: 26px; max-width: 150px; } }
/* 4.16.11: góc phải thanh đầu trên điện thoại có 🔒 🔍 ⚡ ↻ 🔔 + ảnh — thu nút lại, giấu ◐ (có sẵn trong menu tài khoản) để không tràn mất chuông / ảnh */
@media (max-width: 600px) {
  #dau-trang { gap: 6px; }
  .dau-phai { gap: 2px; }
  .dau-phai .nut.tron { width: 30px; height: 30px; font-size: 15px; }
  .dau-phai #nut-nen { display: none; }
}
@media (max-width: 420px) { #dau-trang .logo-cty img { max-width: 112px; } }
/* 4.9.1: điện thoại dùng logo vuông (ung-dung.js logoTheoManHinh) — ô vuông 34px, bo góc */
/* 4.9.3: logo vuông ăn gần hết chiều cao thanh trên (thanh − 8px), vuông đều, bo góc */
#dau-trang .logo-cty img.vuong { height: 40px; width: 60px; max-width: 60px; object-fit: contain; object-position: left center; border-radius: 8px; }   /* 4.9.4: ô 60×40, ảnh giữ tỷ lệ */
/* 4.0.4: logo đầu trang chỉ hiện khi thanh bên ẩn (≤720px) — máy tính đã có logo ở thanh bên */
@media (min-width: 721px) { #dau-trang .logo-cty { display: none; } }
/* 4.3.2: menu trái đang ẩn (chưa ghim) → logo về lại đầu trang cạnh ☰ */
@media (min-width: 721px) { body.rail-an #dau-trang .logo-cty { display: flex; } }
@media print { #dau-trang .logo-cty { display: none; } }

/* Huy hiệu số việc đang chờ — trên thực đơn và thanh dưới */
.hh {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--do); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 1; margin-left: 6px; flex: none;
}
/* [hidden] của trình duyệt yếu hơn display của .hh — phải nói rõ, không thì
   huy hiệu rỗng vẫn hiện thành chấm đỏ trên mọi nút */
.hh[hidden] { display: none !important; }
.rail-muc .hh { margin-left: auto; }
#rail.gon .rail-muc .hh { position: absolute; top: 4px; right: 4px; margin: 0; }
#rail.gon .rail-muc { position: relative; }
#thanh-duoi button { position: relative; }
#thanh-duoi .hh { position: absolute; top: 0; right: 22%; margin: 0; min-width: 16px; height: 16px; font-size: 10px; }

/* ===========================================================================
   THU GỌN CHO ĐIỆN THOẠI
   ---------------------------------------------------------------------------
   Hai chỗ ăn màn hình nhất trên máy 6 inch:

     · THANH LỌC — sáu ô lọc, mỗi ô một dòng, hết nửa màn hình trước khi thấy
       được dòng dữ liệu đầu tiên. Xếp hai ô một hàng, ô thấp và chữ nhỏ lại;
       riêng ô tìm kiếm giữ trọn một dòng vì đó là ô gõ nhiều nhất.

     · HỘP THOẠI GỬI ĐƠN — nhãn to gần bằng nội dung, ba thẻ tab không đủ chỗ
       nên chữ bị cắt cụt, ô ngày thì iOS căn giữa lệch hẳn so với ô khác.

   Chỉ đụng từ 600px trở xuống; máy tính giữ nguyên.
   ========================================================================= */
@media (max-width: 600px) {
  /* ---- Thanh lọc: hai ô một hàng ---- */
  .the-dau > select.o-nhap, .the-dau > input.o-nhap,
  .trang-dau .viec > select.o-nhap, .trang-dau .viec > input.o-nhap,
  .trang-dau .viec > input[type="month"], .trang-dau .viec > input[type="date"] {
    /* Mấy ô lọc này đặt height và max-width thẳng trong thẻ (style="…"), mà
       kiểu viết trong thẻ thắng bảng kiểu — nên hai dòng này phải !important,
       không thì thu gọn xong vẫn y nguyên. */
    height: 31px !important; max-width: none !important;
    font-size: 12.5px; padding: 0 8px; min-width: 0; width: auto;
    flex: 1 1 calc(50% - 5px);
  }
  /* Ô tìm kiếm ăn trọn một dòng và LÊN ĐẦU: nó là ô gõ nhiều nhất, mà để nằm
     giữa thì nó cắt đôi hàng, đẩy ô đứng trước phải nằm trơ một mình. */
  .the-dau > input.o-nhap[placeholder*="Tìm"],
  .the-dau > input.o-nhap[placeholder*="tìm"],
  .trang-dau .viec > input.o-nhap[placeholder*="Tìm"] { flex-basis: 100%; order: -1; }
  .the-dau { gap: 6px; padding: 7px 10px; }
  .the-dau > .nut.nho { height: 31px; padding: 0 10px; font-size: 12.5px; }
  .trang-dau .viec { gap: 6px; }

  /* ---- Hộp thoại ---- */
  .hop-dau h3 { font-size: 14.5px; }
  .hop-dau .phu { font-size: 11.5px; }
  .hop-than .o { margin-bottom: 7px; }
  .hop-than .o > label { font-size: 11.5px; margin-bottom: 3px; }
  .hop-than .o input, .hop-than .o select { height: 34px; padding: 0 9px; }
  .hop-than .o textarea { min-height: 62px; padding: 7px 9px; }
  .hop-than .o .goi-y { font-size: 11px; margin-top: 3px; }
  /* Hai ô ngắn (giờ vào / giờ ra, từ ngày / đến ngày) đứng cạnh nhau được */
  .hop-than .hang { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .hop-than .loi-nhac { padding: 8px 10px; font-size: 12px; gap: 7px; }
  .hop-than .loi-nhac .bt { font-size: 14px; }
  .hop-than .tab { margin-bottom: 8px; }
  /* Ba thẻ tab phải đủ chỗ trên một dòng — cắt cụt chữ "Xin nghỉ" thì người
     dùng không biết còn thẻ thứ ba */
  .hop-than .tab { gap: 0 }
  .hop-than .tab button { padding: 6px 5px; font-size: 11.5px; }
  .hop-than .chip-gio .chip { font-size: 11px; padding: 4px 7px; }
  .hop-than .chon-dong { font-size: 12.5px; }
  /* iOS căn giữa chữ trong ô ngày / giờ — lệch hẳn so với mọi ô khác */
  .hop-than input[type="date"], .hop-than input[type="month"],
  .hop-than input[type="time"] { text-align: left; }
}

/* Biểu tượng ↻ trên thanh đầu xoay trong lúc chờ tải lại */
@keyframes xoay { to { transform: rotate(360deg); } }

/* ===========================================================================
   ĐIỆN THOẠI — 3.20: thanh lọc NHỎ, bỏ lời hướng dẫn, dành chỗ cho nội dung
   ---------------------------------------------------------------------------
   Trên màn 6 inch, một hàng lọc 38px + hai dòng gợi ý là mất một phần tư màn
   trước khi thấy dữ liệu. Ở đây ô lọc / tab / nút lọc đều thu về 28–30px chữ
   12px, còn các câu "ℹ hướng dẫn", phụ đề trang, gợi ý dưới ô nhập thì ẩn hẳn —
   ai cần đọc thì đọc trên máy tính.
   ======================================================================== */
@media (max-width: 720px) {
  .trang-dau p { display: none; }
  .trang-dau h1 { font-size: 17px; }
  .loi-nhac:not(.nguy):not(.canh):not(.xong) { display: none; }
  .o .goi-y, .the-dau .phu, .the-dau > div > .phu { display: none; }
  .the-dau h3 { font-size: 12.5px; }
  /* mọi ô lọc trong đầu thẻ, thanh lọc, đầu trang */
  .the-dau .o-nhap, .the-dau .viec .o-nhap, .rv-loc .o-nhap, .trang-dau .viec .o-nhap,
  .the-dau input[type="date"], .the-dau input[type="month"], .the-dau select {
    height: 29px !important; min-height: 0; font-size: 12px !important; padding: 0 7px !important; border-radius: 7px;
  }
  .the-dau .viec, .rv-loc { gap: 5px !important; padding: 6px 8px; }
  .the-dau .viec .nut, .the-dau .viec .nut.nho, .rv-loc .nut, .thanh-thang .nut, .thanh-thang .nut.nho,
  .trang-dau .viec .nut { height: 29px !important; padding: 0 8px; font-size: 12px; }
  .thanh-thang input[type="month"] { height: 29px !important; font-size: 12px; }
  .tab { margin-bottom: 6px; }
  .tab button { padding: 6px 8px; font-size: 12px; }
  .tab .rv-dem, .tab .ph-dem { min-width: 15px; height: 15px; font-size: 10px; }
  .rv-so-hang, .ph-so-hang { gap: 5px; }
  .rv-so b, .ph-so b { font-size: 17px; } .rv-so i, .ph-so i { display: none; }
  .luoi-loc, .bo-loc { gap: 5px; }
}

/* ---- Điện thoại, đợt 2 (3.20): chữ nhỏ hơn trên hộp thoại, đầu thẻ ---- */
@media (max-width: 720px) {
  .trang-dau .viec .nut, .trang-dau .viec .nut.chinh { height: 32px; font-size: 12.5px; padding: 0 10px; }
  .the > .the-dau h3, .the-dau h3 { font-size: 12px; letter-spacing: .3px; }
  .hop-dau .phu { display: none; }
  .hop-dau h3 { font-size: 14px; }
  .hop-dau .nut.dong { width: auto; height: 32px; padding: 0 10px; font-size: 13px; }
  .hop-than { padding: 8px; }
  .hop-chan .nut { height: 36px; font-size: 13px; padding: 0 12px; }
  .hop-than .o > label { font-size: 10.5px; margin-bottom: 2px; }
  .hop-than .o input, .hop-than .o select, .hop-than .o textarea, .hop-than .tim-chon .tc-o, .hop-than input.o-nhap, .hop-than select.o-nhap { height: 30px !important; font-size: 12px !important; padding: 0 7px; border-radius: 7px; }
  .hop-than .o textarea { height: auto !important; padding: 6px 7px; }
  .hop-than .chon-dong { font-size: 12px; } .hop-than .chon-dong input { width: 15px; height: 15px; }
  .bang.phieu td { font-size: 12.5px; }
}
/* 4.11.6: biểu tượng khuôn mặt (kiểu Face ID) thay emoji ở nút / tiêu đề đăng nhập bằng khuôn mặt */
.bt-mat{vertical-align:-5px;margin-right:7px;flex:none}