/* ==========================================================
   TECAPRO — Cổng thông tin nội bộ
   ========================================================== */
:root{
  --luc-sau:#1E5A2C;  --luc-toi:#17472380; --luc:#2F7D32;
  --luc-nhat:#EAF3EA; --nau:#6B2F1F;
  --giay:#F6F7F5;     --the:#FFFFFF;
  --muc:#1C1F1C;      --muc-mo:#6C736C;   --vien:#E2E7E2;
  --do:#A8352A;       --vang:#9A7209;     --lam:#1F5F8B;
  --bong:0 1px 2px rgba(28,31,28,.05), 0 1px 8px rgba(28,31,28,.04);
  --bong-noi:0 4px 16px rgba(28,31,28,.10);
  --tren:60px; --ben:236px; --bo:9px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:15px; line-height:1.62; color:var(--muc); background:var(--giay);
  min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--luc);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--luc);outline-offset:2px;border-radius:3px}
.an-nhin{position:absolute;left:-9999px}
.an-nhin:focus{left:8px;top:8px;z-index:200;background:#fff;padding:10px 16px;
  border-radius:var(--bo);box-shadow:var(--bong-noi)}

/* ===== THANH TRÊN ===== */
.thanh-tren{
  height:var(--tren); background:var(--the); border-bottom:1px solid var(--vien);
  position:sticky; top:0; z-index:60; display:flex; align-items:center;
  padding:0 22px; gap:16px;
}
.hieu{display:flex;align-items:center;gap:12px;flex-shrink:0}
.hieu:hover{text-decoration:none}
.hieu img{height:36px;width:auto;display:block}
.hieu-chu{font-size:21px;font-weight:800;color:var(--nau);letter-spacing:1.5px}
.hieu-phu{font-size:13px;color:var(--muc-mo);padding-left:13px;
  border-left:1px solid var(--vien);line-height:1.25;white-space:nowrap}
.day{flex:1}
.khu-nd{display:flex;align-items:center;gap:11px}
.ten-nd{text-align:right;line-height:1.3}
.ten-nd b{display:block;font-size:13.5px;font-weight:600}
.ten-nd span{font-size:11.5px;color:var(--muc-mo)}
.anh-nd{width:34px;height:34px;border-radius:50%;background:var(--luc-nhat);
  color:var(--luc-sau);display:grid;place-items:center;font-weight:700;font-size:13px;
  flex-shrink:0;border:1px solid #d6e6d7}

/* ===== NÚT ===== */
.nut,.nut-nho{font-family:inherit;font-weight:600;cursor:pointer;border:0;
  display:inline-block;text-align:center;transition:background .14s,color .14s}
.nut{background:var(--luc);color:#fff;padding:9px 19px;border-radius:var(--bo);font-size:14px}
.nut:hover{background:var(--luc-sau);text-decoration:none;color:#fff}
.nut-nho{background:var(--luc);color:#fff;padding:6px 13px;border-radius:7px;font-size:12.5px}
.nut-nho:hover{background:var(--luc-sau);text-decoration:none;color:#fff}
.nut-phu{background:#EFF1EF;color:var(--muc)}
.nut-phu:hover{background:var(--vien);color:var(--muc)}
.nut-vien{background:transparent;color:var(--muc-mo);border:1px solid var(--vien)}
.nut-vien:hover{background:var(--giay);color:var(--muc)}
.nut-do{background:var(--do);color:#fff}
.nut-do:hover{background:#8A2A21;color:#fff}

/* ===== THÂN + THANH BÊN ===== */
.than{flex:1;display:flex;align-items:flex-start}
.thanh-ben{
  width:var(--ben); flex-shrink:0; background:var(--luc-sau);
  position:sticky; top:var(--tren); height:calc(100vh - var(--tren));
  display:flex; flex-direction:column; overflow:hidden;
}
.dieu-huong{flex:1;overflow-y:auto;padding:14px 0 8px}
.nhom-menu{font-size:11.5px;color:rgba(255,255,255,.5);padding:14px 22px 6px;
  font-weight:500;letter-spacing:.2px}
.dieu-huong ul{list-style:none}
.dieu-huong a{
  display:flex; align-items:center; gap:11px; padding:9px 22px;
  color:rgba(255,255,255,.82); font-size:14px; font-weight:500;
  border-left:3px solid transparent; transition:background .14s,color .14s;
}
.dieu-huong a:hover{background:rgba(0,0,0,.16);color:#fff;text-decoration:none}
.dieu-huong a.dang-xem{background:rgba(0,0,0,.25);color:#fff;font-weight:600;
  border-left-color:#8CC98F}
.dieu-huong svg{width:17px;height:17px;flex-shrink:0;opacity:.85}
.dieu-huong a.dang-xem svg{opacity:1}
.hoa-tiet{height:96px;flex-shrink:0;opacity:.13;pointer-events:none;
  display:block;width:100%}
.nut-menu{display:none}

/* ===== CỘT CHÍNH ===== */
.cot-chinh{flex:1;min-width:0;display:flex;flex-direction:column;min-height:calc(100vh - var(--tren))}
.noi-dung{flex:1;padding:28px 30px 44px;max-width:1160px;width:100%}

h1{font-size:25px;font-weight:700;letter-spacing:-.3px;line-height:1.28;margin-bottom:5px}
h2{font-size:19px;font-weight:700;margin-bottom:13px}
h3{font-size:15px;font-weight:600;margin-bottom:7px}
.mo-ta-trang{color:var(--muc-mo);font-size:14px;margin-bottom:24px}

/* ===== THẺ ===== */
.the{background:var(--the);border:1px solid var(--vien);border-radius:12px;
  padding:20px 22px;box-shadow:var(--bong);margin-bottom:18px}
.the-tieu-de{font-size:15.5px;font-weight:700;margin-bottom:15px;padding-bottom:11px;
  border-bottom:1px solid var(--vien);display:flex;justify-content:space-between;
  align-items:center;gap:12px}
.the-tieu-de a{font-size:13px;font-weight:500}
.luoi{display:grid;gap:18px}
.luoi-2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.luoi-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* ===== BẢNG ===== */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:9px 12px;background:var(--luc-nhat);font-weight:600;
  font-size:12.5px;color:var(--luc-sau);white-space:nowrap;
  border-bottom:1px solid #d6e6d7}
td{padding:11px 12px;border-bottom:1px solid var(--vien);vertical-align:top}
tbody tr:last-child td,table tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#FAFBFA}

/* ===== NHÃN ===== */
.nhan{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;
  font-weight:600;white-space:nowrap;line-height:1.65}
.nhan-xanh{background:var(--luc-nhat);color:var(--luc-sau)}
.nhan-vang{background:#FBF3DC;color:var(--vang)}
.nhan-do{background:#FBEAE8;color:var(--do)}
.nhan-lam{background:#E7F0F7;color:var(--lam)}
.nhan-xam{background:#EEF0EE;color:var(--muc-mo)}

/* ===== THÔNG BÁO ===== */
.bao{padding:13px 16px;border-radius:10px;font-size:14px;margin-bottom:18px;
  line-height:1.6;border:1px solid}
.bao-ok{background:#EDF6EE;border-color:#C4E0C6;color:#1A5122}
.bao-loi{background:#FBEAE8;border-color:#EFC7C2;color:#8A2A21}
.bao-y{background:#FDF6E3;border-color:#EDDCA8;color:#6E5206}
.trong{text-align:center;color:var(--muc-mo);padding:34px 16px;font-size:14px}

/* ===== BIỂU MẪU ===== */
label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
input[type=text],input[type=password],input[type=email],input[type=date],
input[type=time],input[type=datetime-local],input[type=tel],input[type=number],
select,textarea{
  width:100%;padding:9px 12px;font-size:14px;border:1px solid var(--vien);
  border-radius:8px;font-family:inherit;background:#fff;margin-bottom:15px;color:var(--muc)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--luc);
  box-shadow:0 0 0 3px rgba(47,125,50,.13)}
textarea{min-height:110px;resize:vertical;line-height:1.65}
::placeholder{color:#AEB4AE}

/* ===== DANH SÁCH ===== */
.ds{list-style:none}
.ds li{padding:12px 0;border-bottom:1px solid var(--vien)}
.ds li:last-child{border-bottom:0}
.ds-ngay{font-size:12.5px;color:var(--muc-mo);display:block;margin-top:4px}

/* ===== CHÂN TRANG ===== */
.chan-trang{border-top:1px solid var(--vien);padding:18px 30px;font-size:13px;
  color:var(--muc-mo);background:var(--the)}

/* ===== NÚT LÊN ĐẦU TRANG ===== */
.len-dau{
  position:fixed; right:24px; bottom:24px; width:44px; height:44px; z-index:70;
  border-radius:50%; background:var(--luc-sau); color:#fff; border:0; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--bong-noi);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s, transform .2s, visibility .2s, background .14s;
}
.len-dau.hien{opacity:1;visibility:visible;transform:none}
.len-dau:hover{background:var(--luc)}
.len-dau svg{width:19px;height:19px}

/* ===== ĐIỆN THOẠI ===== */
@media (max-width:860px){
  :root{--tren:56px}
  .thanh-tren{padding:0 14px;gap:10px}
  .hieu-phu,.ten-nd{display:none}
  .hieu img{height:30px}
  .nut-menu{display:grid;place-items:center;width:38px;height:38px;background:var(--giay);
    border:1px solid var(--vien);border-radius:8px;cursor:pointer;flex-shrink:0;order:-1}
  .nut-menu svg{width:19px;height:19px}
  .than{display:block}
  .thanh-ben{position:fixed;top:var(--tren);left:0;width:min(280px,82vw);
    height:calc(100vh - var(--tren));z-index:55;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:var(--bong-noi)}
  .thanh-ben.mo{transform:none}
  .man-che{position:fixed;inset:var(--tren) 0 0;background:rgba(0,0,0,.4);
    z-index:54;opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s}
  .man-che.mo{opacity:1;visibility:visible}
  .cot-chinh{min-height:auto}
  .noi-dung{padding:20px 15px 36px}
  .chan-trang{padding:16px 15px}
  h1{font-size:21px}
  .the{padding:17px;border-radius:11px}
  table{font-size:13px}
  th,td{padding:9px 10px}
  .len-dau{right:16px;bottom:16px;width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}

/* ===== HÀNG BỘ LỌC — căn đều chiều cao ô nhập và nút ===== */
.hang-loc{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.hang-loc .o-loc{flex:1;min-width:200px}
.hang-loc .o-hep{flex:0 0 180px;min-width:150px}
.hang-loc input,.hang-loc select{margin-bottom:0;height:42px}
.hang-loc .nut{height:42px;padding:0 20px;display:inline-flex;
  align-items:center;justify-content:center;white-space:nowrap}
@media (max-width:560px){
  .hang-loc .o-loc,.hang-loc .o-hep{flex:1 1 100%}
  .hang-loc .nut{flex:1}
}

/* ===== LƯỚI LỊCH THÁNG ===== */
.lich-thang{table-layout:fixed;border:1px solid var(--vien);border-radius:8px;overflow:hidden}
.lich-thang th{text-align:center;padding:9px 4px;font-size:12.5px}
.lich-thang td{height:104px;vertical-align:top;padding:6px 6px 4px;
  border:1px solid var(--vien);background:#fff}
.lich-thang tbody tr:hover td,.lich-thang tr:hover td{background:#fff}
.lich-thang td.o-trong{background:#FBFCFB}
.lich-thang td.cuoi-tuan{background:#FAFBFA}
.lich-thang td.hom-nay{background:var(--luc-nhat);box-shadow:inset 0 0 0 2px var(--luc)}
.lich-thang .so-ngay{font-size:12.5px;font-weight:600;color:var(--muc-mo);margin-bottom:4px}
.lich-thang td.hom-nay .so-ngay{color:var(--luc-sau);font-weight:700}
.viec-lich{font-size:11.5px;line-height:1.35;padding:3px 5px;border-radius:4px;
  margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
.viec-lich b{font-weight:700;margin-right:3px}
@media (max-width:860px){
  .lich-thang td{height:74px;padding:4px 3px}
  .lich-thang .so-ngay{font-size:11.5px}
  .viec-lich{font-size:10px;padding:2px 3px}
  .lich-thang th{font-size:11px;padding:7px 2px}
}

/* ===== Ô NGÀY BẤM ĐƯỢC ===== */
.lich-thang td{position:relative}
.lich-thang td.o-trong{pointer-events:none}
.phu-o{position:absolute;inset:0;z-index:1;border-radius:3px}
.phu-o:hover{background:rgba(47,125,50,.08);text-decoration:none}
.phu-o:focus-visible{outline:2px solid var(--luc);outline-offset:-2px}
.lich-thang .so-ngay,.viec-lich{position:relative;z-index:2;pointer-events:none}
.lich-thang td.dang-chon{box-shadow:inset 0 0 0 2px var(--luc);background:#F2F8F2}
.lich-thang td.hom-nay.dang-chon{background:var(--luc-nhat)}

/* ===== BẢNG CHẤM CÔNG ===== */
.cuon-bang{overflow-x:auto;border:1px solid var(--vien);border-radius:8px}
.bang-cong{border-collapse:separate;border-spacing:0;font-size:13px;min-width:100%}
.bang-cong th,.bang-cong td{border-bottom:1px solid var(--vien);
  border-right:1px solid var(--vien)}
.bang-cong thead th{position:sticky;top:0;z-index:3;background:var(--luc-nhat);
  padding:5px 2px;text-align:center;font-size:11px;white-space:nowrap}
.bang-cong .cot-ten{position:sticky;left:0;z-index:2;background:#fff;
  min-width:180px;max-width:180px;padding:7px 11px;text-align:left;
  box-shadow:1px 0 0 var(--vien)}
.bang-cong thead .cot-ten{z-index:4;background:var(--luc-nhat)}
.bang-cong .cot-ngay{width:30px;min-width:30px}
.bang-cong .cot-ngay .thu{display:block;font-size:9.5px;color:var(--muc-mo);font-weight:500}
.bang-cong .cot-ngay .ngay{display:block;font-size:12px;font-weight:700}
.bang-cong .cot-ngay.cuoi-tuan{background:#E4EAE4;color:var(--muc-mo)}
.bang-cong .cot-ngay.hom-nay{background:var(--luc);color:#fff}
.bang-cong .cot-ngay.hom-nay .thu{color:rgba(255,255,255,.8)}
.bang-cong .cot-tong{width:52px;min-width:52px;text-align:center;
  background:#FAFBFA;font-size:12.5px;padding:6px 4px}
.bang-cong thead .cot-tong{background:var(--luc-nhat)}
.bang-cong .hang-phong td{background:#F1F5F1;font-weight:700;font-size:12px;
  padding:5px 11px;color:var(--luc-sau);position:sticky;left:0}
.bang-cong .o-cong{position:relative;height:30px;text-align:center;padding:0;
  vertical-align:middle;background:#fff}
.bang-cong .o-cong.cuoi-tuan{background:#F4F6F4}
.bang-cong .o-cong.dang-chon{box-shadow:inset 0 0 0 2px var(--luc)}
.bang-cong tbody tr:hover td{background:inherit}
.bang-cong tbody tr:hover .cot-ten{background:#FAFBFA}
.phu-cong{position:absolute;inset:0;z-index:1}
.phu-cong:hover{background:rgba(47,125,50,.13);text-decoration:none}
.phu-cong:focus-visible{outline:2px solid var(--luc);outline-offset:-2px}
.ma-cong{position:relative;z-index:2;display:inline-block;min-width:22px;
  padding:1px 4px;border-radius:4px;font-size:11px;font-weight:700;
  line-height:1.5;pointer-events:none}
.ma-cong.ma-trong{background:#EEF0EE;min-width:22px;height:18px}
.ma-tc{position:absolute;right:1px;bottom:0;z-index:2;font-size:8.5px;
  font-weight:700;color:var(--do);pointer-events:none}
.chu-thich{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--vien);font-size:12.5px;
  color:var(--muc-mo);align-items:center}
.chu-thich>span{display:inline-flex;align-items:center;gap:6px}
@media (max-width:860px){
  .bang-cong .cot-ten{min-width:130px;max-width:130px;font-size:12px;padding:6px 8px}
  .bang-cong .cot-ngay{width:26px;min-width:26px}
  .bang-cong .o-cong{height:27px}
}

/* ===== GHIM 3 CỘT TỔNG BÊN PHẢI ===== */
.bang-cong .cot-tong{position:sticky;z-index:2;background:#FAFBFA}
.bang-cong .cot-tong:nth-last-child(1){right:0}
.bang-cong .cot-tong:nth-last-child(2){right:52px}
.bang-cong .cot-tong:nth-last-child(3){right:104px;
  box-shadow:-1px 0 0 var(--vien)}
.bang-cong thead .cot-tong{z-index:5;background:var(--luc-nhat)}
.bang-cong tbody tr:hover .cot-tong{background:#F4F6F4}
@media (max-width:860px){
  .bang-cong .cot-tong{width:46px;min-width:46px;font-size:11.5px;padding:5px 2px}
  .bang-cong .cot-tong:nth-last-child(2){right:46px}
  .bang-cong .cot-tong:nth-last-child(3){right:92px}
}

/* ===== GHIM HÀNG TIÊU ĐỀ + TÊN PHÒNG BAN ===== */
/* Cho khung cuộn được cả 2 chiều thì sticky dọc mới có tác dụng */
.cuon-bang{overflow:auto;max-height:calc(100vh - 230px)}

/* Ô góc trên trái: ghim cả 2 chiều */
.bang-cong thead .cot-ten{top:0;left:0;z-index:7}
/* 3 cột tổng ở hàng tiêu đề: ghim cả 2 chiều */
.bang-cong thead .cot-tong{top:0;z-index:7}
.bang-cong thead .cot-ngay{top:0;z-index:5}

/* Tên phòng ban: ô trải rộng nên ghim phần chữ bên trong */
.bang-cong .hang-phong td{position:static;padding:0}
.bang-cong .hang-phong span{position:sticky;left:0;display:inline-block;
  padding:6px 11px;background:#F1F5F1;z-index:3}

@media (max-width:860px){
  .cuon-bang{max-height:calc(100vh - 200px)}
}

/* ===== ĐƯỜNG KẺ NGĂN CÁCH NHÓM CỘT TỔNG ===== */
/* Dùng viền thật thay bóng đổ để không đứt quãng khi cuộn */
.bang-cong .cot-tong:nth-last-child(3){box-shadow:none;
  border-left:1px solid var(--vien)}
.bang-cong .hang-phong .cot-tong{background:#F1F5F1;border-bottom:1px solid var(--vien)}
.bang-cong .hang-phong .cot-tong:nth-last-child(3){border-left:1px solid var(--vien)}
/* Viền phải cột tên nhân viên cũng dùng viền thật */
.bang-cong .cot-ten{box-shadow:none;border-right:1px solid var(--vien)}
.bang-cong .hang-phong span{border-right:1px solid var(--vien);margin-right:-1px}

/* ===== SỬA THỨ TỰ CHỒNG LỚP BẢNG CHẤM CÔNG ===== */
/* Ô ngày và mọi thứ bên trong phải nằm DƯỚI các cột ghim */
.bang-cong .o-cong{z-index:0}
.bang-cong .o-cong .phu-cong{z-index:0}
.bang-cong .o-cong .ma-cong,
.bang-cong .o-cong .ma-tc{z-index:1}

/* Cột tên nhân viên: nền đặc, nổi trên ô ngày */
.bang-cong tbody .cot-ten{z-index:4;background:#fff}
.bang-cong tbody tr:hover .cot-ten{background:#FAFBFA}

/* 3 cột tổng: nền đặc, nổi trên ô ngày */
.bang-cong tbody .cot-tong{z-index:4;background:#FAFBFA}
.bang-cong tbody tr:hover .cot-tong{background:#F4F6F4}

/* Hàng tiêu đề luôn trên cùng */
.bang-cong thead .cot-ngay{z-index:6}
.bang-cong thead .cot-ten,
.bang-cong thead .cot-tong{z-index:8}

/* Hàng phòng ban: nền đặc kín cả hàng */
.bang-cong .hang-phong td{background:#F1F5F1}
.bang-cong .hang-phong span{z-index:4;background:#F1F5F1}
.bang-cong .hang-phong .cot-tong{z-index:4;background:#F1F5F1}