/* ============================================================
   theme.css — giao diện theo phong cách SB Admin Pro
   ============================================================
   ⚠️ KHÔNG chép mã của Start Bootstrap. Không Bootstrap, không thư viện,
      không tải gì từ mạng. Toàn bộ là CSS thuần viết cho app này.
      Chỉ lấy lại BẢNG MÀU và SỐ ĐO của mẫu để nhìn cho giống.
   ⚠️ Mẫu gốc dùng phông "Metropolis" (phông trả tiền, không tải được).
      Dùng đúng dãy phông dự phòng mà chính mẫu gốc khai báo.
   ============================================================ */

/* 🔒 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. */
[hidden]{display:none!important}

:root{
  /* --- màu chính lấy TỪ CHÍNH LOGO công ty (đo bằng máy, không đoán):
         xanh #00a15e · đỏ #ff0000. Mẫu gốc dùng xanh dương #0061f2, nhưng
         logo xanh lá đặt trên dải xanh dương thì chỏi — nên đổi màu chính,
         giữ nguyên mọi số đo còn lại của mẫu. --- */
  --chinh:#00a15e;  --chinh-dam:#008a50;  --chinh-nhat:#daefe4;
  --phu:#00ba94;
  --do-hieu:#ff0000;
  --xanh:#00ac69;   --xanh-nhat:#daefed;
  --lam:#00cfd5;    --lam-nhat:#daf2f8;
  --vang:#f4a100;   --vang-nhat:#f2eee3;
  --do:#e81500;     --do-nhat:#f1e0e3;

  --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);
  --the:#fff;
  --vien:rgba(33,40,50,.125);
  --dau-the:rgba(33,40,50,.03);
  --chu:var(--xam-900);
  --chu-mo:var(--xam-600);

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

  --do-bong:0 .15rem 1.75rem 0 rgba(33,40,50,.15);
  --do-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{font:inherit;color:inherit}
svg{flex:0 0 auto}

/* ============================================================
   MÀN ĐĂNG NHẬP
   ============================================================ */
.man-vao{
  min-height:100dvh; display:grid; place-items:center; padding:1.5rem 1rem;
  /* Màu nền đặt trước làm lớp lót: ảnh chưa tải xong, hay mạng yếu không tải
     được, thì màn vẫn ra màu xanh của ảnh chứ không loè trắng.
     #005d33 là màu trung bình đo được ở vùng giữa chính tấm ảnh. */
  background-color:#005d33;
  background-image:url("/hinh/nen-dang-nhap-nho.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* Màn rộng mới tải bản nét cao — điện thoại đỡ tốn 78KB không cần thiết. */
@media (min-width:768px){
  .man-vao{background-image:url("/hinh/nen-dang-nhap.jpg")}
}
.the-vao{
  width:100%; max-width:26rem; background:var(--the);
  border:1px solid var(--vien); border-radius:var(--bo);
  box-shadow:var(--do-bong); overflow:hidden;
}
.the-vao .dau{
  padding:1.75rem 1.35rem 1.35rem; border-bottom:1px solid var(--vien);
  background:var(--dau-the); 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 label{display:block; margin-bottom:.4rem; font-size:.8rem; font-weight:600; color:var(--xam-700)}
.the-vao .nhom + .nhom{margin-top:1rem}
.o-nhap{
  width:100%; padding:.75rem 1rem; border:1px solid var(--xam-300);
  border-radius:var(--bo); background:#fff; color:var(--chu);
}
.o-nhap:focus{
  outline:0; border-color:#7eb0f9;
  box-shadow:0 0 0 .25rem rgba(0,97,242,.25);
}

/* ---------- ô mật khẩu có nút con mắt ---------- */
.o-co-mat{position:relative; display:block}
/* Chừa chỗ cho nút, không thì chữ chạy xuống dưới con mắt.
   Trình duyệt Edge/IE tự thêm con mắt riêng — ẩn đi cho khỏi hai cái. */
.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.
   Ô cao 50px nên vẫn lọt gọn bên trong. */
.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)}
.nut-chinh{
  width:100%; margin-top:1.35rem; padding:.75rem 1rem; border:0;
  border-radius:var(--bo); background:var(--chinh); color:#fff;
  font-weight:500; cursor:pointer;
}
.nut-chinh:hover{background:var(--chinh-dam)}
.nut-chinh[disabled]{opacity:.65; cursor:progress}

.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}

/* ---------- màn bắt buộc đổi mật khẩu ---------- */
.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);
}
.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}
.nut-phu{
  width:100%; margin-top:.6rem; padding:.7rem 1rem;
  border:1px solid var(--xam-300); border-radius:var(--bo);
  background:transparent; color:var(--chu-mo); font-size:.875rem; cursor:pointer;
}
.nut-phu:hover{background:var(--xam-100); color:var(--chu)}

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

/* ---------- thanh trên ---------- */
.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(--do-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}
.hieu .phu{color:var(--xam-500); font-weight:400}
/* Trên màn hẹp chỉ giữ logo, bỏ chữ đi cho khỏi vỡ dòng */
@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}

/* ---------- thân: cột trái + nội dung ---------- */
.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{
  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{position:relative}
.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; display:flex; flex-direction:column}

/* ---------- dải tiêu đề trang (chỗ đặc trưng nhất của mẫu) ---------- */
.dai-dau{background:var(--dai-mau); color:#fff; padding:3rem 1.5rem 6rem}
.dai-dau .trong{max-width:82rem; margin:0 auto}
.dai-tieu-de{
  display:flex; align-items:center; gap:.85rem;
  font-size:2.25rem; font-weight:500; line-height:normal; margin:0;
}
.dai-tieu-de .hinh{color:rgba(255,255,255,.5); display:flex}
.dai-phu-de{font-size:1.15rem; margin:.25rem 0 0; color:rgba(255,255,255,.5)}

/* nội dung kéo TRỒI LÊN đè dải màu — dấu hiệu nhận ra mẫu này */
.than-trang{max-width:82rem; width:100%; margin:-4.5rem auto 0; padding:0 1.5rem 3rem}

/* ---------- thẻ ---------- */
.the{
  background:var(--the); border:1px solid var(--vien); border-radius:var(--bo);
  box-shadow:var(--do-bong-nhe); overflow:hidden;
}
.the + .the{margin-top:1.35rem}
.the-dau{
  padding:1rem 1.35rem; background:var(--dau-the);
  border-bottom:1px solid var(--vien);
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  font-weight:500;
}
.the-dau .dem{
  margin-left:auto; font-size:.75rem; font-weight:600;
  padding:.2rem .6rem; border-radius:1rem;
  background:var(--chinh-nhat); color:var(--chinh);
}
.the-than{padding:1.35rem}

/* ---------- hàng thẻ số liệu ---------- */
.hang-so{
  display:grid; gap:1.35rem; margin-bottom:1.35rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.the-so{
  background:var(--the); border:1px solid var(--vien); border-radius:var(--bo);
  box-shadow:var(--do-bong-nhe); padding:1.35rem;
  display:flex; align-items:center; gap:1rem;
}
.the-so .o-hinh{
  width:3rem; height:3rem; flex:0 0 3rem; border-radius:var(--bo);
  display:grid; place-items:center;
}
.the-so .nhan{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--xam-500)}
.the-so .so{font-size:1.6rem; font-weight:500; line-height:1.2}
.o-chinh{background:var(--chinh-nhat); color:var(--chinh)}
.o-xanh {background:var(--xanh-nhat);  color:var(--xanh)}
.o-vang {background:var(--vang-nhat);  color:#8a6100}
.o-lam  {background:var(--lam-nhat);   color:#00898d}

/* ---------- ô tìm ---------- */
.o-tim{
  width:100%; max-width:24rem; padding:.6rem .9rem;
  border:1px solid var(--xam-300); border-radius:var(--bo); background:#fff;
}
.o-tim:focus{outline:0; border-color:#7eb0f9; box-shadow:0 0 0 .25rem rgba(0,97,242,.25)}

/* ---------- bảng ---------- */
.cuon-ngang{overflow-x:auto}
.bang{width:100%; border-collapse:collapse; font-size:.9rem; min-width:52rem}
.bang th,.bang td{padding:.85rem 1.35rem; text-align:left; border-bottom:1px solid var(--xam-200); white-space:nowrap}
.bang th{
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--xam-600); background:var(--dau-the); border-bottom:1px solid var(--vien);
}
.bang tbody tr:hover{background:var(--xam-100)}
.bang tbody tr:last-child td{border-bottom:0}
.bang .ma{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:.85rem; color:var(--xam-600)}

/* ---------- thẻ nhân viên (điện thoại) ---------- */
.the-list{display:none; padding:1.35rem; gap:.85rem; grid-template-columns:1fr}
.the-nv{border:1px solid var(--vien); border-radius:var(--bo); padding:.9rem 1rem}
.the-nv .dong1{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.the-nv .ten{font-weight:600}
.the-nv .dong2{margin-top:.25rem; font-size:.875rem; color:var(--chu-mo)}
.the-nv .dong3{margin-top:.5rem; font-size:.8rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center}
.the-nv a{color:var(--chinh); text-decoration:none}

/* ---------- nhãn trạng thái ---------- */
.co{
  display:inline-block; font-size:.7rem; font-weight:700;
  padding:.25rem .6rem; border-radius:1rem; letter-spacing:.02em;
}
.co-lam {background:var(--xanh-nhat); color:#00805a}
.co-nghi{background:var(--vang-nhat); color:#8a6100}
.co-thoi{background:var(--do-nhat);   color:#8a0d00}

/* ---------- linh tinh ---------- */
.dang-tai{padding:1.35rem; color:var(--chu-mo); font-size:.9rem}
.trong-khong{padding:3rem 1.35rem; text-align:center; color:var(--chu-mo)}
.trong-khong .hinh{color:var(--xam-300); margin-bottom:.75rem; display:flex; justify-content:center}
.ghi-chu{
  margin-top:1.35rem; padding:1rem 1.35rem; border-radius:var(--bo);
  background:var(--lam-nhat); color:#00696d; font-size:.85rem;
  border:1px solid rgba(0,207,213,.25);
}
code{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  background:var(--xam-100); padding:.1rem .35rem; border-radius:.2rem; font-size:.85em;
}
.doi-chu{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.75rem 1.5rem; font-size:.9rem}
.doi-chu dt{color:var(--chu-mo)}
.doi-chu dd{margin:0; font-weight:600}
.ds-quyen{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.ds-quyen li{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid var(--vien); border-radius:var(--bo); padding:.7rem 1rem; font-size:.875rem;
}
.ds-quyen .dau-tick{color:var(--xanh); display:flex}

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

/* ============================================================
   ĐIỆN THOẠI & MÁY TÍNH BẢNG (< 992px)
   Cột trái trượt ra từ mép trái, đúng cách mẫu gốc làm.
   ============================================================ */
@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(--do-bong);
  }
  .khung.mo-cot .cot-trai{transform:translateX(0)}
  .dai-dau{padding:2rem 1rem 5rem}
  .dai-tieu-de{font-size:1.65rem}
  .dai-phu-de{font-size:1rem}
  .than-trang{margin-top:-3.75rem; padding:0 1rem 2rem}
  .ten-toi{display:none}
  .hang-so{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:.85rem}
  .the-so{padding:1rem; gap:.75rem}
  .the-so .o-hinh{width:2.5rem; height:2.5rem; flex-basis:2.5rem}
  .the-so .so{font-size:1.35rem}
  .cuon-ngang{display:none}
  .the-list{display:grid}
  .the-dau,.the-than{padding:1rem}
}

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