/* ============================================================
   theme.css — Quản trị vận hành · Nguyên Nhật
   ============================================================
   Viết cho module nhân sự (nqt-module-nhan-su). Tên lớp theo đúng quy ước
   trong references/04-giao-dien.md của module, để mã HTML của module dán vào
   là chạy, không phải sửa từng chỗ.

   ⚠️ KHÔNG dùng thư viện, không tải gì từ mạng. CSS thuần.
   ⚠️ Bảng màu đo TỪ CHÍNH LOGO công ty: xanh #00a15e · đỏ #ff0000.
   ============================================================ */

/* 🔒 DÒNG BẮT BUỘC. Thiếu nó thì mọi nút lẽ ra phải ẩn theo quyền
   đều hiện ra hết, mà không phép kiểm tự động nào bắt được.
   Cổng đẩy (cong-cu/day-len.sh) soi đúng dòng này. */
[hidden]{display:none!important}

:root{
  --chinh:#00a15e;  --chinh-dam:#008a50;  --chinh-nhat:#daefe4;
  --do-hieu:#ff0000;
  --xanh:#00ac69;   --xanh-nhat:#daefed;
  --lam:#00cfd5;    --lam-nhat:#daf2f8;
  --vang:#f4a100;   --vang-nhat:#faf1dd;
  --do:#e81500;     --do-nhat:#f8e3e0;

  --xam-100:#f2f6fc; --xam-200:#e0e5ec; --xam-300:#d4dae3; --xam-400:#c5ccd6;
  --xam-500:#a7aeb8; --xam-600:#69707a; --xam-700:#4a515b; --xam-800:#363d47;
  --xam-900:#212832;

  --nen:var(--xam-100);
  --vien:rgba(33,40,50,.125);
  --vien-nhac:#d8a33a;          /* viền vàng: đang chờ duyệt */
  --vien-xau:#e81500;           /* viền đỏ: bị trả lại */
  --chu:var(--xam-900);
  --chu-mo:var(--xam-600);

  --bo:.35rem;
  --thanh-tren:3.625rem;
  --cot:15rem;

  --bong:0 .15rem 1.75rem 0 rgba(33,40,50,.15);
  --bong-nhe:0 .15rem .5rem 0 rgba(33,40,50,.1);
  --dai-mau:linear-gradient(135deg,#00a15e 0%,rgba(0,186,148,.8) 100%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--nen); color:var(--chu);
  font:1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit; color:inherit}
svg{flex:0 0 auto}
code{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  background:var(--xam-100); padding:.1rem .35rem; border-radius:.2rem; font-size:.85em;
}

/* ============================================================
   MÀN VÀO — đăng nhập · quên mật khẩu · đổi mật khẩu
   ============================================================ */
.man-vao{
  min-height:100dvh; display:grid; place-items:center; padding:1.5rem 1rem;
  /* Màu nền lót trước: mạng yếu chưa tải được ảnh thì vẫn ra xanh, không loè trắng. */
  background-color:#005d33;
  background-image:url("/hinh/nen-dang-nhap-nho.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
@media (min-width:768px){ .man-vao{background-image:url("/hinh/nen-dang-nhap.jpg")} }

.the-vao{
  width:100%; max-width:26rem; background:#fff;
  border:1px solid var(--vien); border-radius:var(--bo);
  box-shadow:var(--bong); overflow:hidden;
}
.the-vao .dau{
  padding:1.75rem 1.35rem 1.35rem; border-bottom:1px solid var(--vien);
  background:rgba(33,40,50,.03); text-align:center;
}
.the-vao .dau .logo{height:4.5rem; width:auto; max-width:100%; margin-bottom:1rem}
.the-vao .dau h1{margin:0; font-size:1.15rem; font-weight:500}
.the-vao .dau p{margin:.35rem 0 0; font-size:.85rem; color:var(--chu-mo)}
.the-vao .than{padding:1.35rem}
.the-vao .nhom + .nhom{margin-top:1rem}
.the-vao label{
  display:block; margin-bottom:.4rem; font-size:.8rem;
  font-weight:600; color:var(--xam-700);
}

/* Ô mã 4 số: chữ to, giãn đều, ngón tay bấm trên điện thoại không trượt. */
.o-ma{
  text-align:center; letter-spacing:.6em; text-indent:.6em;
  font-size:1.6rem; font-weight:600; padding:.7rem 1rem;
}

/* ---------- ô mật khẩu có nút con mắt ---------- */
.o-co-mat{position:relative; display:block}
.o-co-mat .o-nhap{padding-right:3.5rem}
.o-co-mat .o-nhap::-ms-reveal,
.o-co-mat .o-nhap::-ms-clear{display:none}
/* 2.75rem = 44px — mức tối thiểu cho ngón tay bấm trên điện thoại. */
.nut-mat{
  position:absolute; top:50%; right:.25rem; transform:translateY(-50%);
  width:2.75rem; height:2.75rem; display:grid; place-items:center;
  border:0; border-radius:var(--bo); background:transparent;
  color:var(--xam-500); cursor:pointer; padding:0;
}
.nut-mat:hover{color:var(--xam-800); background:var(--xam-100)}
.nut-mat[aria-pressed="true"]{color:var(--chinh)}

.luat-mk{
  list-style:none; margin:1.1rem 0 0; padding:0;
  display:grid; gap:.35rem; font-size:.8rem; color:var(--xam-600);
}
.luat-mk li{display:flex; align-items:center; gap:.5rem}
.luat-mk li::before{
  content:"○"; font-size:.9rem; line-height:1; color:var(--xam-400);
  width:1rem; text-align:center; flex:0 0 1rem;
}
.luat-mk li.dat{color:var(--xanh)}
.luat-mk li.dat::before{content:"✓"; color:var(--xanh); font-weight:700}

.lien-ket{
  display:block; width:100%; margin-top:.9rem; padding:.2rem;
  background:none; border:0; color:var(--chinh-dam);
  font-size:.85rem; text-align:center; cursor:pointer; text-decoration:underline;
}
.lien-ket:hover{color:var(--chinh)}

/* ============================================================
   KHUNG APP
   ============================================================ */
.khung{min-height:100dvh; display:flex; flex-direction:column}

.thanh-tren{
  position:sticky; top:0; z-index:1039;
  height:var(--thanh-tren); flex:0 0 var(--thanh-tren);
  display:flex; align-items:center; gap:.5rem; padding:0 1rem 0 .5rem;
  background:#fff; border-bottom:1px solid var(--vien);
  box-shadow:var(--bong-nhe); font-size:.9rem;
}
.hieu{
  display:flex; align-items:center; gap:.6rem; min-width:0;
  font-weight:600; font-size:.95rem; color:var(--xam-900);
}
.hieu .logo{height:2.1rem; width:auto; flex:0 0 auto}
.hieu .chu{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:575.98px){ .hieu .chu{display:none} }

.nut-tron{
  width:2.25rem; height:2.25rem; flex:0 0 2.25rem;
  display:grid; place-items:center;
  border:0; border-radius:var(--bo); background:transparent;
  color:var(--xam-600); cursor:pointer;
}
.nut-tron:hover{background:var(--xam-100); color:var(--xam-900)}
.goc-phai{margin-left:auto; display:flex; align-items:center; gap:.6rem}
.chu-cai{
  width:2.25rem; height:2.25rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--chinh-nhat); color:var(--chinh); font-weight:700; font-size:.85rem;
}
.ten-toi{font-size:.85rem; color:var(--xam-700); white-space:nowrap}

.than-khung{flex:1; display:flex; min-height:0}

.cot-trai{
  flex:0 0 var(--cot); width:var(--cot);
  background:#fff; border-right:1px solid var(--vien);
  font-size:.9rem; overflow-y:auto; padding-bottom:1.5rem;
}
.nhom-menu{
  padding:1.75rem 1rem .75rem;
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--xam-500);
}
.muc{
  position:relative; width:100%; display:flex; align-items:center; gap:.65rem;
  padding:.75rem 1rem; border:0; background:none;
  color:var(--xam-900); text-align:left; cursor:pointer; line-height:normal;
}
.muc .hinh{color:var(--xam-500); display:flex}
.muc:hover{background:var(--xam-100)}
.muc[aria-current="true"]{font-weight:600}
.muc[aria-current="true"] .hinh{color:var(--chinh)}
.muc[aria-current="true"]::before{
  content:""; position:absolute; left:0; width:3px; height:2.75rem;
  background:var(--chinh); border-radius:0 3px 3px 0;
}
.muc .dem-nho{
  margin-left:auto; font-size:.7rem; font-weight:700;
  padding:.1rem .45rem; border-radius:1rem;
  background:var(--vang-nhat); color:#8a6100;
}
.chan-cot{
  margin:1rem 1rem 0; padding-top:1rem; border-top:1px solid var(--vien);
  font-size:.75rem; color:var(--xam-500); line-height:1.4;
}
.chan-cot b{display:block; color:var(--xam-700); font-size:.8rem}

.noi-dung{flex:1; min-width:0; padding:1.5rem; max-width:82rem; width:100%; margin:0 auto}

/* ============================================================
   QUY ƯỚC LỚP CỦA MODULE — xem references/04-giao-dien.md mục 8
   ============================================================ */

/* ---------- đỉnh mỗi màn ---------- */
.dinh{
  display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.35rem;
}
.dinh h1{margin:0; font-size:1.6rem; font-weight:500; line-height:1.25}
.dinh .phu{margin:.25rem 0 0; font-size:.9rem; color:var(--chu-mo)}
.day-ra{margin-left:auto; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.day-nut{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.9rem}

/* ---------- thẻ ---------- */
.the{
  background:#fff; border:1px solid var(--vien); border-radius:var(--bo);
  box-shadow:var(--bong-nhe); padding:1.35rem;
}
.the + .the{margin-top:1.35rem}
/* Thẻ chìm: khối phụ nằm bên trong một thẻ khác. */
.the.chim{background:var(--xam-100); border:0; box-shadow:none; padding:1rem}
.the-dinh{
  display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.1rem;
}
.the-dinh h2{margin:0; font-size:1.05rem; font-weight:600}
.the-dinh .phu{margin:.25rem 0 0; font-size:.85rem; color:var(--chu-mo); line-height:1.5}

/* ---------- lưới ---------- */
.luoi{display:grid; gap:1.1rem}
.luoi.c2{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.luoi.c3{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.luoi.c4{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}

/* ---------- ô nhập ---------- */
.khoi-nhap{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.nhan-o{
  display:block; font-size:.75rem; font-weight:700;
  letter-spacing:.02em; color:var(--xam-700);
}
.o-nhap{
  width:100%; padding:.7rem .9rem; border:1px solid var(--xam-300);
  border-radius:var(--bo); background:#fff; color:var(--chu);
  /* 16px — dưới mức này Safari trên iPhone tự phóng to trang khi bấm vào ô. */
  font-size:1rem;
}
.o-nhap:focus{outline:0; border-color:var(--chinh); box-shadow:0 0 0 .2rem var(--chinh-nhat)}
.o-nhap:disabled,.o-nhap[readonly]{
  background:var(--xam-100); color:var(--xam-800);
  border-color:var(--xam-200); -webkit-text-fill-color:var(--xam-800); opacity:1;
}
.o-nhap::placeholder{color:var(--xam-500)}
/* Ô nhạy cảm: số CCCD, số tài khoản, thư điện tử. Viền đậm hơn cho nhìn ra. */
.o-cccd{font-family:"SFMono-Regular",Consolas,Menlo,monospace; letter-spacing:.04em}

.so-nho-phu{display:block; font-size:.78rem; line-height:1.5; color:var(--chu-mo)}
.mo{color:var(--chu-mo); font-size:.9rem; margin:0; padding:.9rem 0}
.tach{border:0; border-top:1px solid var(--xam-200); margin:1.1rem 0}
.trong{padding:2.5rem 1rem; text-align:center; color:var(--chu-mo)}
.so-lon{font-size:1.35rem; font-weight:600; line-height:1.3}
.vua{font-size:.95rem}

/* ---------- nút ---------- */
.nut{
  padding:.6rem 1.05rem; border:1px solid var(--chinh); border-radius:var(--bo);
  background:var(--chinh); color:#fff; font-size:.9rem; cursor:pointer;
  line-height:1.35;
}
.nut:hover{background:var(--chinh-dam); border-color:var(--chinh-dam)}
.nut[disabled]{opacity:.55; cursor:not-allowed}
.nut.phu{background:#fff; border-color:var(--xam-300); color:var(--xam-700)}
.nut.phu:hover{background:var(--xam-100); color:var(--chu)}
.nut.nguy{background:#fff; border-color:var(--do); color:var(--do)}
.nut.nguy:hover{background:var(--do); color:#fff}
.nut.to{width:100%; padding:.8rem 1rem; font-size:1rem}

/* Nút nhỏ trong một hàng danh sách. */
.chip{
  padding:.35rem .7rem; border:1px solid var(--xam-300); border-radius:1rem;
  background:#fff; color:var(--xam-700); font-size:.78rem;
  cursor:pointer; white-space:nowrap; line-height:1.4;
}
.chip:hover{background:var(--xam-100); color:var(--chu)}
.chip[disabled]{opacity:.55; cursor:not-allowed}
.chip.nhan{border-color:var(--chinh); color:var(--chinh-dam); background:var(--chinh-nhat)}
.chip.nguy{border-color:var(--do); color:var(--do)}
.chip.nguy:hover{background:var(--do); color:#fff}
.chip.lam-viec{border-color:var(--xanh); color:#00805a; background:var(--xanh-nhat)}
.chip.chim{border-color:var(--xam-200); color:var(--xam-500); background:var(--xam-100)}
.chip.dang-chon{background:var(--chinh); border-color:var(--chinh); color:#fff}

/* ---------- nhãn viên thuốc ---------- */
.huy{
  display:inline-block; font-size:.7rem; font-weight:700;
  padding:.2rem .55rem; border-radius:1rem; letter-spacing:.02em;
  background:var(--xam-200); color:var(--xam-700);
}
.huy.tot{background:var(--xanh-nhat); color:#00805a}
.huy.cho{background:var(--vang-nhat); color:#8a6100}
.huy.xau{background:var(--do-nhat);   color:#8a0d00}
.huy.nhan{background:var(--lam-nhat); color:#00696d}

/* ---------- hàng trong danh sách ---------- */
.hang{
  display:flex; align-items:center; gap:.9rem;
  padding:.85rem 0; border-bottom:1px solid var(--xam-200);
}
.hang:last-child{border-bottom:0; padding-bottom:0}
.hang:first-child{padding-top:0}
.hang .anh{
  width:2.5rem; height:2.5rem; flex:0 0 2.5rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--chinh-nhat); color:var(--chinh); font-weight:700; font-size:.8rem;
}
.hang .anh.chim{background:var(--xam-200); color:var(--xam-500)}
.hang .giua{flex:1; min-width:0}
.hang .ten{font-weight:600; display:flex; align-items:center; gap:.45rem; flex-wrap:wrap}
.hang .duoi{font-size:.8rem; color:var(--chu-mo); margin-top:.15rem; word-break:break-word}
.hang .ben{display:flex; gap:.45rem; flex-wrap:wrap; flex:0 0 auto; justify-content:flex-end}
/* Viền trái báo trạng thái của cả hàng. */
.hang.cho{border-left:3px solid var(--vien-nhac); padding-left:.75rem}
.hang.xau{border-left:3px solid var(--vien-xau);  padding-left:.75rem}

/* ---------- ảnh CCCD ---------- */
.khung-anh{
  width:100%; aspect-ratio:1.585;   /* đúng tỉ lệ thẻ căn cước */
  display:grid; place-items:center; overflow:hidden; padding:1rem;
  border:2px dashed var(--xam-300); border-radius:var(--bo);
  background:var(--xam-100); color:var(--chu-mo); font-size:.85rem;
  text-align:center; cursor:pointer;
}
.khung-anh.co-anh{border-style:solid; border-color:var(--vien); padding:0; background:var(--xam-200)}
.khung-anh img{width:100%; height:100%; object-fit:cover; display:block}

/* ---------- khối tick quyền ---------- */
.khoi-q + .khoi-q{margin-top:1.35rem}
.khoi-q > h3{
  margin:0 0 .75rem; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--xam-500);
}
.the-quyen{display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.dong-quyen{
  display:flex; gap:.7rem; align-items:flex-start;
  border:1px solid var(--vien); border-radius:var(--bo); padding:.8rem .9rem;
  background:#fff; cursor:pointer;
}
.dong-quyen:hover{background:var(--xam-100)}
.dong-quyen input{margin-top:.2rem; width:1.05rem; height:1.05rem; flex:0 0 auto; accent-color:var(--chinh)}
.dong-quyen .ten-q{font-size:.9rem; font-weight:600; line-height:1.35}
.dong-quyen .mo-ta-q{font-size:.78rem; color:var(--chu-mo); margin-top:.2rem; line-height:1.5}
.dong-quyen.nang{border-color:rgba(232,21,0,.35); background:#fffbfa}
.dong-quyen.nang .ten-q::after{content:" ⚠"; color:var(--do)}

/* ---------- so sánh trước → sau ở màn duyệt ---------- */
.doi-o{
  display:grid; gap:.35rem .9rem; grid-template-columns:11rem 1fr;
  padding:.6rem 0; border-bottom:1px solid var(--xam-200); font-size:.875rem;
}
.doi-o:last-child{border-bottom:0}
.doi-o .ten-o{color:var(--chu-mo); font-weight:600}
.doi-o .cu{color:var(--xam-500); text-decoration:line-through}
.doi-o .moi{font-weight:600; color:var(--chinh-dam)}
/* Ba ô nguy hiểm nhất — viền đỏ để người duyệt buộc phải nhìn kỹ.
   Lý do: đổi số tài khoản ngay trước kỳ chuyển lương là cách ăn cắp lương
   kinh điển. Không phải để che, mà để bắt dừng lại. */
.doi-o.nhay{
  border-left:3px solid var(--vien-xau); padding-left:.7rem;
  background:#fffbfa; border-radius:var(--bo);
}
.doi-o.nhay .ten-o::after{content:" ⚠"; color:var(--do)}

/* ---------- báo lỗi ---------- */
.bao-loi{
  margin:1rem 0 0; padding:.75rem 1rem; border-radius:var(--bo);
  background:var(--do-nhat); color:#8a0d00; font-size:.875rem;
  border:1px solid rgba(232,21,0,.2);
}
.bao-loi strong{display:block; margin-bottom:.15rem}
.loi-nhac{
  margin:0 0 1.25rem; padding:.85rem 1rem; border-radius:var(--bo);
  background:var(--vang-nhat); color:#7a5600; font-size:.85rem; line-height:1.45;
  border:1px solid rgba(244,161,0,.3);
}
.bao-tot{
  margin:1rem 0 0; padding:.75rem 1rem; border-radius:var(--bo);
  background:var(--xanh-nhat); color:#00664a; font-size:.875rem;
  border:1px solid rgba(0,172,105,.25);
}
/* Mật khẩu tạm hiện ĐÚNG MỘT LẦN — phải đập vào mắt, không lẫn vào nền. */
.mk-tam{
  font-family:"SFMono-Regular",Consolas,Menlo,monospace;
  font-size:1.35rem; font-weight:700; letter-spacing:.08em;
  display:block; margin:.5rem 0; color:var(--xam-900);
  background:#fff; border:1px dashed var(--chinh); border-radius:var(--bo);
  padding:.7rem 1rem; text-align:center; user-select:all;
}

/* ---------- màn che khi mở cột trái trên điện thoại ---------- */
.man-che{position:fixed; inset:0; z-index:1037; background:rgba(33,40,50,.5); border:0; padding:0}

/* ---------- hộp hỏi lại ---------- */
.nen-hop{
  position:fixed; inset:0; z-index:1050; background:rgba(33,40,50,.55);
  display:grid; place-items:center; padding:1rem;
}
.hop{
  width:100%; max-width:32rem; max-height:85dvh; overflow:auto;
  background:#fff; border-radius:var(--bo); box-shadow:var(--bong); padding:1.35rem;
}
.hop h2{margin:0 0 .5rem; font-size:1.1rem}
.hop .than-hop{font-size:.9rem; color:var(--xam-700); line-height:1.55}

/* ============================================================
   ĐIỆN THOẠI & MÁY TÍNH BẢNG (< 992px)
   ============================================================ */
@media (max-width:991.98px){
  .cot-trai{
    position:fixed; top:var(--thanh-tren); bottom:0; left:0; z-index:1038;
    transform:translateX(-15rem); transition:transform .15s ease-in-out;
    box-shadow:var(--bong);
  }
  .khung.mo-cot .cot-trai{transform:translateX(0)}
  .noi-dung{padding:1rem}
  .dinh h1{font-size:1.35rem}
  .day-ra{margin-left:0; width:100%}
  .day-ra .nut{flex:1}
  .ten-toi{display:none}
  .the{padding:1rem}
  .luoi{gap:.9rem}
  .luoi.c2,.luoi.c3,.luoi.c4{grid-template-columns:1fr}
  .hang{flex-wrap:wrap}
  .hang .ben{width:100%; padding-left:3.4rem; justify-content:flex-start}
  .the-quyen{grid-template-columns:1fr}
  .doi-o{grid-template-columns:1fr; gap:.15rem}
}

@media (min-width:992px){
  #nut-menu{display:none}
  .man-che{display:none!important}
}