:root{--navy:#1F3864;--blue:#2E5FA3;--grey:#f3f4f6;--line:#d9d9d9;--red:#c00000;--green:#2f7d32;--yellow:#fff2cc}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;font-size:13.5px;color:#222;background:#f7f8fa}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
header{background:var(--navy);color:#fff;padding:0 18px;display:flex;align-items:center;gap:18px;height:50px;position:sticky;top:0;z-index:5}
header .brand{font-weight:700;font-size:15px;margin-right:8px}
header nav a{color:#dbe4f5;padding:6px 10px;border-radius:6px}header nav a.on,header nav a:hover{background:rgba(255,255,255,.15);color:#fff;text-decoration:none}
header .ct{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px}
header select{padding:4px 6px;border-radius:5px;border:none}
main{padding:16px 18px;max-width:1500px;margin:0 auto}
h1{font-size:19px;color:var(--navy);margin:0 0 12px}h2{font-size:15px;color:var(--navy);margin:16px 0 8px}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:14px}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{flex:1 1 240px}
label{display:block;font-size:12px;color:#444;margin:6px 0 2px}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],select,textarea{width:100%;padding:6px 8px;border:1px solid #bbb;border-radius:5px;font:inherit;background:#fff}
input.y,select.y,textarea.y{background:var(--yellow)}
textarea{min-height:80px}
.hint{font-size:11.5px;color:#666;margin-top:2px}
.btn{display:inline-block;padding:7px 13px;border-radius:6px;border:1px solid var(--blue);background:var(--blue);color:#fff;font:inherit;cursor:pointer}
.btn:hover{filter:brightness(1.1);text-decoration:none}
.btn.sec{background:#fff;color:var(--blue)}.btn.red{background:var(--red);border-color:var(--red)}.btn.green{background:var(--green);border-color:var(--green)}.btn.sm{padding:4px 9px;font-size:12px}
.flash{padding:9px 12px;border-radius:6px;margin-bottom:12px}.flash.ok{background:#e6f4ea;color:#1e4620}.flash.err{background:#fde8e8;color:#8a1c1c}.flash.warn{background:#fff4e0;color:#7a4b00}
table{border-collapse:collapse;width:100%;background:#fff}th,td{border:1px solid var(--line);padding:5px 7px;text-align:left;vertical-align:middle}
th{background:var(--blue);color:#fff;font-weight:600;font-size:12px;position:sticky;top:50px;z-index:3}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr.tong td{font-weight:700;background:#fce4d6}
.tbl-wrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:6px}
.tbl-wrap td,.tbl-wrap th{white-space:nowrap}.tbl-wrap th{top:0}
.stat{display:flex;gap:12px;flex-wrap:wrap}.stat .box{flex:1 1 160px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.stat .box b{display:block;font-size:20px;color:var(--navy)}.stat .box span{font-size:12px;color:#666}
/* Ghim cột Mã + Họ tên khi kéo bảng rộng sang phải (chấm công, bảng lương) */
.cc td:nth-child(1),.cc th:nth-child(1){position:sticky;left:0;z-index:2;background:#fff;width:62px;min-width:62px;max-width:62px}
.cc td:nth-child(2),.cc th:nth-child(2){position:sticky;left:62px;z-index:2;background:#fff;box-shadow:3px 0 5px -3px rgba(0,0,0,.35)}
.cc th:nth-child(1),.cc th:nth-child(2){background:var(--blue);z-index:4}
.bl tr:not(.tong) td:nth-child(1),.bl th:nth-child(1){position:sticky;left:0;z-index:2;background:#fff;width:30px;min-width:30px;max-width:30px;text-align:center}
.bl tr:not(.tong) td:nth-child(2),.bl th:nth-child(2){position:sticky;left:30px;z-index:2;background:#fff;width:66px;min-width:66px;max-width:66px}
.bl tr:not(.tong) td:nth-child(3),.bl th:nth-child(3){position:sticky;left:96px;z-index:2;background:#fff;box-shadow:3px 0 5px -3px rgba(0,0,0,.35)}
.bl th:nth-child(1),.bl th:nth-child(2),.bl th:nth-child(3){background:var(--blue);z-index:4}
.cc td{padding:0}.cc input{width:34px;height:26px;border:none;text-align:center;font:inherit;font-size:12px;padding:0}
.cc th.d{min-width:34px;text-align:center;padding:3px 0;font-size:11px}.cc .wk{background:#e5e5e5}.cc .le{background:#fce4d6}
.cc .ot input{width:52px}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:10px}.tabs a{padding:7px 12px;border-radius:6px 6px 0 0;background:#eee;color:#333}.tabs a.on{background:var(--blue);color:#fff}
.small{font-size:12px}.muted{color:#666}.warn{color:var(--red);font-weight:600}
.inline{display:inline-block;width:auto}
details summary{cursor:pointer;color:var(--blue);font-weight:600}

.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:8px}
.qr svg{max-width:260px;height:auto;border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff}
.pin input{font-size:28px;letter-spacing:8px;text-align:center;max-width:260px}
@media (max-width:820px){
 header{height:auto;flex-wrap:wrap;padding:6px 10px;gap:6px}
 header .brand{font-size:14px;margin:0}
 header nav{order:3;flex:1 1 100%;display:flex;overflow-x:auto;white-space:nowrap;gap:2px;padding-bottom:3px;scrollbar-width:none}
 header nav a{padding:6px 9px;font-size:13px}
 header .ct{font-size:12px;max-width:60%;gap:5px}header .ct span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;display:inline-block;vertical-align:middle}header .ct select{max-width:150px}
 .cc td:first-child,.cc th:first-child{position:sticky;left:0;z-index:2;background:#fff}.cc th:first-child{background:var(--blue)}
 main{padding:10px 8px}
 h1{font-size:17px}
 .row>*{flex-basis:100%}
 th{position:static}
 .btn{padding:9px 13px}.btn.sm{padding:6px 10px}
 input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],select,textarea{padding:9px 8px;font-size:16px}
 .cc input{width:32px;height:32px;font-size:14px}
 .stat .box{flex-basis:46%}.stat .box b{font-size:17px}
 .tbl-wrap{max-height:none}
 .tabs{overflow-x:auto;white-space:nowrap}
}

.tbl-scroll th{position:static}
header .user{background:rgba(255,255,255,.15);padding:3px 8px;border-radius:6px}