/* KNF Check-in v7.7 — Correct O/X reasons, dashboard detail popovers, stronger pastel rows. */
:root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel-soft:#f8fbff;
  --text:#111827;
  --muted:#64748b;
  --line:#dbe4f0;
  --accent:#0071ce;
  --accent-2:#004f9f;
  --accent-soft:#eaf5ff;
  --good:#15803d;
  --good-soft:#ecfdf3;
  --warn:#b45309;
  --warn-soft:#fff7ed;
  --bad:#dc2626;
  --bad-soft:#fef2f2;
  --shadow:0 10px 28px rgba(15,23,42,.07);
  --radius:18px;
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{min-height:100%;margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:13px}.full{width:100%}.bg-grid:before,.orb,body:after{display:none!important}
.page{min-height:100dvh;padding:22px}.center{display:grid;place-items:center}.shell{width:min(1080px,100%);margin:auto}.shell.wide{width:min(1380px,100%)}
.auth-page{min-height:100dvh;display:grid;place-items:center;padding:22px}.login-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow)}.mobile-login-card{width:min(360px,calc(100vw - 32px))}.auth-brand{justify-content:center;text-align:center}.brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}.brand h1{font-size:24px;line-height:1.15;margin:0;font-weight:750;letter-spacing:-.02em}.brand p{margin:4px 0 0;color:var(--muted);font-size:14px}.logo{width:74px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}.logo img{max-width:82%;max-height:82%;object-fit:contain}.user-brand .logo{width:68px;height:44px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}.userbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 14px;min-width:150px}.userbox strong{display:block;font-weight:750}.userbox span{display:block;color:var(--muted);font-size:13px;margin-top:2px}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.compact-actions{gap:6px}.split{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.split h2,.split h3{margin-top:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.card h2,.card h3{margin:0 0 10px;font-weight:750;letter-spacing:-.01em}.card p{line-height:1.45}.grid{display:grid;gap:14px}.grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.three,.form-grid .three{grid-template-columns:repeat(3,minmax(0,1fr))}.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}.admin-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:18px;align-items:start}
label{display:block;font-size:13px;font-weight:650;color:var(--muted);margin:12px 0 7px}input,select,textarea{width:100%;min-height:44px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--text);padding:11px 12px;outline:none}textarea{min-height:92px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,113,206,.14)}input::placeholder{color:#94a3b8}.checkline{display:flex;align-items:center;gap:10px;margin:10px 0;color:var(--text)}.checkline input{width:auto;min-height:auto}.password-field{position:relative}.password-field input{padding-right:76px}.password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:34px;border:1px solid var(--line);border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:700;cursor:pointer}.login-submit,.forgot-toggle{min-height:48px}.forgot-toggle{margin-top:10px}
.btn{border:0;border-radius:14px;background:var(--accent);color:#fff;font-weight:750;padding:12px 16px;min-height:44px;cursor:pointer;box-shadow:none}.btn:hover{background:var(--accent-2);text-decoration:none}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.48;cursor:not-allowed}.btn.secondary{background:var(--accent-soft);color:var(--accent);border:1px solid #bfddf5}.btn.secondary:hover{background:#dff0ff}.btn.danger{background:var(--bad);color:#fff}.btn.danger:hover{background:#b91c1c}.small-btn{font-size:13px;padding:8px 11px;min-height:34px}.big-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.big-btn{min-height:150px;border:1px solid var(--line);border-radius:24px;background:#fff;color:var(--text);box-shadow:var(--shadow);font-size:24px;font-weight:780;cursor:pointer;text-align:left;padding:24px}.big-btn:hover{border-color:#a8d5f6;background:var(--panel-soft)}.big-btn span{display:block;margin-top:8px;font-size:14px;color:var(--muted);font-weight:500}
.msg{margin-top:10px;min-height:20px;font-size:14px;color:var(--muted)}.msg.good{color:var(--good)}.msg.bad{color:var(--bad)}.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#f8fafc;color:var(--muted);border-radius:999px;padding:6px 10px;font-size:12.5px;font-weight:750;white-space:nowrap}.pill.good{background:var(--good-soft);border-color:#bbf7d0;color:var(--good)}.pill.warn{background:var(--warn-soft);border-color:#fed7aa;color:var(--warn)}.pill.bad{background:var(--bad-soft);border-color:#fecaca;color:var(--bad)}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}.stat b{display:block;margin-top:6px;font-size:28px;letter-spacing:-.03em}.stat span{font-size:13px;color:var(--muted)}.mini-panel{background:var(--panel-soft);border:1px solid var(--line);border-radius:18px;padding:16px}.dashboard-alerts{border-left:4px solid var(--accent)}
.sidebar{position:sticky;top:18px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:10px}.navgroup{border-bottom:1px solid #edf2f7;padding:6px 0}.navgroup:last-child{border-bottom:0}.navgroup-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;background:#f8fbff;border:0;color:#0f172a;font-weight:850;cursor:pointer;padding:9px 10px;border-radius:12px}.navgroup-toggle:hover{background:var(--panel-soft)}.navgroup-items{display:grid;gap:5px;margin-top:4px}.navbtn{width:100%;text-align:left;border:0;border-radius:12px;background:transparent;color:#0f172a;font-weight:760;padding:10px 11px;cursor:pointer}.navbtn:hover{background:var(--panel-soft)}.navbtn.active{background:var(--accent);color:#fff}.view{min-width:0}
.table-wrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}.table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}.table th,.table td{padding:12px 13px;border-bottom:1px solid #edf2f7;text-align:left;vertical-align:top;font-size:14px;overflow-wrap:anywhere}.table th{position:sticky;top:0;background:#f8fbff;color:#334155;font-weight:760;z-index:1}.table tr:last-child td{border-bottom:0}.table img{width:86px;max-height:86px;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block}.total-row td{font-weight:750;background:#f8fbff}.date-col{white-space:nowrap}
.dash-list{display:grid;gap:10px}.dash-item,.dash-checkin-item,.today-checkin-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}.dash-meta{font-size:13px;color:var(--muted);margin-top:3px}.dash-meta.bad{color:var(--bad)}.dash-thumb{width:58px;height:58px;border-radius:14px;object-fit:cover;background:#eef6ff;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);font-weight:800;flex:0 0 auto}.dash-thumb-empty{background:#f1f5f9;color:#94a3b8}.dash-empty{background:#fff;border:1px dashed var(--line);border-radius:16px;padding:14px;color:var(--muted)}.dash-empty.bad{color:var(--bad);border-color:#fecaca;background:#fffafa}.warn-soft{background:var(--warn-soft)}.warn{color:var(--warn)!important}
.camera-wrap{display:grid;gap:12px}.video-box{background:#0f172a;border-radius:20px;border:1px solid var(--line);min-height:260px;display:grid;place-items:center;overflow:hidden}.video-box video,.video-box canvas{width:100%;max-height:64vh;object-fit:cover}.result-img{width:100%;border-radius:16px;border:1px solid var(--line)}.retake-checkin-btn{margin-top:8px}.today-checkins img{width:58px;height:58px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.map{height:440px;border:1px solid var(--line);border-radius:18px;background:#eef6ff;overflow:hidden}.mini-map{height:320px}.restricted-user-map{height:auto;min-height:220px}.static-map-img{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}.static-map-img svg{display:block;width:100%;height:auto;min-height:220px}.static-map-img .ban-zone{fill:rgba(220,38,38,.13);stroke:#dc2626;stroke-width:3}.static-map-img .ban-center{fill:#fff;stroke:#dc2626;stroke-width:2}.static-map-img .allow-zone{fill:rgba(34,197,94,.13);stroke:#16a34a;stroke-width:3}.static-map-img .allow-center{fill:#fff;stroke:#16a34a;stroke-width:2}.static-map-img .ban-label,.static-map-img .map-title{fill:#111827;font-weight:800;font-size:18px}.static-map-img .map-title{fill:var(--accent);font-size:21px}.static-map-legend{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--line);font-size:13px;background:#fff}.static-map-legend span{padding:5px 9px;border-radius:999px;background:var(--bad-soft);border:1px solid #fecaca;color:#991b1b}.static-map-legend span.allow-item{background:#dcfce7;border-color:#bbf7d0;color:#166534}.static-map-legend span.ban-item{background:var(--bad-soft);border-color:#fecaca;color:#991b1b}.static-map-empty{min-height:220px;display:grid;place-items:center;text-align:center;background:#fff;color:var(--muted);padding:20px}.static-map-empty b{display:block;color:var(--accent);font-size:20px;margin-bottom:6px}.leaflet-container{font-family:inherit}
.rule-details{display:grid;gap:10px}.rule-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #edf2f7}.rule-row:last-child{border-bottom:0}.rule-title{font-weight:750}.footer-note,.privacy-footer{position:static;max-width:min(1080px,calc(100% - 44px));margin:0 auto 18px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;color:var(--muted);font-size:13px;display:flex;gap:10px;align-items:center}.privacy-icon{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:0 0 auto;font-weight:800}.privacy-copy b{color:var(--text)}
.knf-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px}.knf-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.36)}.knf-modal__panel{position:relative;z-index:1;width:min(520px,100%);box-shadow:0 24px 80px rgba(15,23,42,.22)}
.badge,.cell-ok,.cell-bad{border-radius:999px;padding:4px 8px;font-size:12px;font-weight:750}.cell-ok{background:var(--good-soft);color:var(--good)}.cell-bad{background:var(--bad-soft);color:var(--bad)}
@media (max-width:980px){.page{padding:14px}.topbar{align-items:flex-start;flex-direction:column}.topbar .actions{width:100%}.userbox{flex:1}.admin-layout{grid-template-columns:1fr}.sidebar{position:static;display:block}.navgroup-items{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.grid.cols2,.grid.cols3,.form-grid,.form-grid.three{grid-template-columns:1fr}.big-actions{grid-template-columns:1fr}.big-btn{min-height:118px}.split{flex-direction:column}.actions .btn{flex:1}.table{min-width:680px}.brand h1{font-size:21px}}
@media (max-width:560px){.page{padding:12px}.card,.login-card{border-radius:18px;padding:16px}.brand{gap:10px}.logo{width:60px;height:40px}.actions{width:100%}.actions .btn{width:100%;justify-content:center}.topbar .userbox{width:100%}.table th,.table td{padding:10px;font-size:13px}.video-box{min-height:220px}.privacy-footer{max-width:calc(100% - 24px);align-items:flex-start}.filters{grid-template-columns:1fr}.stat b{font-size:24px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
/* v6.3: bản đồ thật cho khu vực không được tính check-in trên màn user, vẫn không chạy GPS/live liên tục. */
.real-user-map{height:420px!important;min-height:320px!important;background:#eef6ff}
@media(max-width:720px){.real-user-map{height:340px!important;min-height:300px!important}}
/* v6.4: cảnh báo thiết bị phải hiện rõ tên từng tài khoản dùng chung, không gom vào pill một dòng. */
.device-warning-block{border:1px solid var(--line);border-radius:14px;padding:9px 11px;background:#fff;line-height:1.35;max-width:520px}
.device-warning-block b{display:block;margin-bottom:5px;font-size:13px}
.device-warning-block ul{margin:6px 0 0 18px;padding:0;display:grid;gap:4px}
.device-warning-block li{white-space:normal;overflow-wrap:anywhere;color:var(--text)}
.device-warning-block.bad{background:var(--bad-soft);border-color:#fecaca;color:#991b1b}
.device-warning-block.warn{background:var(--warn-soft);border-color:#fed7aa;color:#92400e}

/* v6.5: menu trái đậm hơn, cảnh báo thiết bị gọn một dòng rõ tên người dùng chung. */
.navgroup-toggle{letter-spacing:.01em}.navbtn{letter-spacing:.005em}.device-warning-block b{font-size:13.5px}.device-warning-block .small{margin-top:4px;color:#7f1d1d}

/* v6.7: battery saver - fewer paints, smaller camera/map workload. */
:root{--shadow:0 6px 16px rgba(15,23,42,.045)}
.card,.big-btn,.sidebar,.login-card{box-shadow:var(--shadow)}
.restricted-lite-map{min-height:220px!important;background:#fff}
.video-box{contain:content;background:#111827}
.video-box::before{content:'Camera chỉ mở khi bấm nút để tiết kiệm pin';color:#cbd5e1;font-size:14px;text-align:center;padding:12px;grid-area:1/1}.video-box video:not(.hidden),.video-box canvas:not(.hidden){grid-area:1/1;z-index:1}.video-box video.hidden,.video-box canvas.hidden{display:none!important}
img{content-visibility:auto}
@media (max-width:560px){.map{height:300px}.real-user-map{height:300px!important;min-height:260px!important}.restricted-user-map{min-height:200px}.page{padding:10px}.big-btn{min-height:106px}.video-box{min-height:200px}}


/* v6.9: Cần xử lý hôm nay dễ nhìn hơn - mỗi nhân viên một màu pastel nhạt, dùng chung cho bảng và dashboard đội. */
.table tr.alert-row-pastel-0 td,.dash-item.alert-row-pastel-0{background:#f8fbff}
.table tr.alert-row-pastel-1 td,.dash-item.alert-row-pastel-1{background:#f7fff8}
.table tr.alert-row-pastel-2 td,.dash-item.alert-row-pastel-2{background:#fffaf2}
.table tr.alert-row-pastel-3 td,.dash-item.alert-row-pastel-3{background:#fff7fb}
.table tr.alert-row-pastel-4 td,.dash-item.alert-row-pastel-4{background:#f7fbff}
.table tr.alert-row-pastel-5 td,.dash-item.alert-row-pastel-5{background:#fbf8ff}
.table tr.alert-row-pastel-6 td,.dash-item.alert-row-pastel-6{background:#f6fffd}
.table tr.alert-row-pastel-7 td,.dash-item.alert-row-pastel-7{background:#fff8f3}
.table tr.alert-row-pastel-8 td,.dash-item.alert-row-pastel-8{background:#f9fff4}
.table tr.alert-row-pastel-9 td,.dash-item.alert-row-pastel-9{background:#f7f8ff}
.table tr.alert-row-pastel-10 td,.dash-item.alert-row-pastel-10{background:#fffdf4}
.table tr.alert-row-pastel-11 td,.dash-item.alert-row-pastel-11{background:#f8fffb}
.table tr[class*="alert-row-pastel"] td{border-bottom-color:#e6eef7}
.dash-item[class*="alert-row-pastel"]{border-color:#d9e8f5}

/* v7.0: khung chụp ảnh mở ngay dưới nút, giao diện tối giản kiểu iPhone nhưng vẫn nhẹ pin. */
.iphone-camera-card{
  max-width:520px;
  margin-left:0!important;
  border-radius:28px;
  padding:14px;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}
.iphone-camera-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:4px 4px 10px;
}
.iphone-camera-head h2{
  margin:0 0 4px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
}
.camera-close-btn{min-height:36px;padding:8px 12px;border-radius:999px}
.iphone-camera-wrap{gap:10px}
.iphone-preview{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  min-height:0!important;
  max-height:min(62vh,640px);
  border-radius:34px;
  background:#0b1220;
  border:6px solid #111827;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 28px rgba(15,23,42,.14);
}
.iphone-preview::before{
  content:'Mở camera để chụp';
  position:absolute;
  inset:auto 16px 46%;
  text-align:center;
  color:#cbd5e1;
  font-size:14px;
  z-index:0;
  pointer-events:none;
}
.iphone-preview video,.iphone-preview canvas{
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  border-radius:27px;
}
.iphone-camera-controls{
  display:grid;
  grid-template-columns:1fr 82px 1fr;
  align-items:center;
  gap:10px;
  padding:6px 2px 0;
}
.camera-pill-btn{
  min-height:42px;
  border:1px solid #bfddf5;
  border-radius:999px;
  background:#eaf5ff;
  color:#0066b3;
  font-weight:800;
  cursor:pointer;
  padding:9px 12px;
}
.camera-pill-btn:active,.shutter-btn:active{transform:scale(.98)}
.shutter-btn{
  width:74px;
  height:74px;
  border-radius:999px;
  border:5px solid #e5e7eb;
  background:#ffffff;
  color:#0f172a;
  font-size:13px;
  font-weight:850;
  box-shadow:inset 0 0 0 4px #0f172a,0 6px 14px rgba(15,23,42,.12);
  cursor:pointer;
  justify-self:center;
  padding:0;
}
.shutter-btn:disabled{opacity:.5;cursor:not-allowed}
.camera-tip{
  text-align:center;
  font-size:12.5px;
  color:var(--muted);
  margin-top:2px;
}
.iphone-camera-card .msg{text-align:center;min-height:18px;margin-top:4px}
.iphone-camera-card #checkResult .card{border-radius:22px}
@media(max-width:720px){
  .iphone-camera-card{max-width:100%;border-radius:24px;padding:12px}
  .iphone-preview{border-radius:30px;max-height:58vh;border-width:5px}
  .iphone-preview video,.iphone-preview canvas{border-radius:24px}
  .iphone-camera-controls{grid-template-columns:1fr 78px 1fr}
  .shutter-btn{width:70px;height:70px}
  .camera-pill-btn{font-size:13px;padding:8px 10px}
}

/* v7.4: user tự xóa ảnh cập nhật ngay tại chỗ, nút Xóa đổi thành Hoàn tác. */
#todayBox,#home,#notificationsBox,#locationBox,#rulesBox,#restrictedMapCard,#offlineBox{margin-bottom:14px!important}
#todayStats.grid.cols3{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#todayStats .stat{padding:12px;border-radius:16px;background:#fbfdff}
#todayStats .stat b{font-size:23px;margin-top:4px}
#todayStats .stat span{font-size:12.5px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:4px 0 10px}
.section-head h3{margin:0!important;font-size:16px;font-weight:850;letter-spacing:-.01em}
.section-head p{margin:0!important;font-size:12.5px;max-width:560px;text-align:right}
.today-checkin-item{align-items:center;border-radius:18px;background:#fbfdff;padding:10px 12px}
.today-checkin-item.is-deleted-row{background:#fff7f7;border-color:#fecaca}
.checkin-photo-wrap{position:relative;width:60px;height:60px;flex:0 0 60px;border-radius:14px;overflow:hidden;background:#f1f5f9;border:1px solid var(--line)}
.checkin-photo-wrap .dash-thumb{width:100%;height:100%;border:0;border-radius:0;display:block;object-fit:cover}
.checkin-photo-wrap.is-deleted img{filter:grayscale(1);opacity:.38}
.deleted-stamp{position:absolute;inset:auto 5px 5px;display:block;text-align:center;background:rgba(220,38,38,.92);color:#fff;border-radius:999px;font-size:11px;font-weight:850;padding:2px 6px;line-height:1.2}
.dash-thumb.is-deleted{background:#fee2e2!important;color:#b91c1c!important;border-color:#fecaca!important;font-size:12px;text-align:center;padding:4px}
.checkin-card-body{min-width:0;flex:1;display:grid;gap:4px}
.checkin-card-title{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
.checkin-card-title b{font-size:14.5px;letter-spacing:-.01em}.checkin-card-title .pill{font-size:11.5px;padding:4px 8px}
.today-actions{margin-top:6px}.today-actions .btn{min-height:36px;padding:8px 11px;border-radius:999px;font-size:13px}.undo-btn{font-weight:850;background:#ecfdf3!important;color:#15803d!important;border-color:#bbf7d0!important}
.notify-item{border-color:#fed7aa;background:#fffaf4}.notify-item .dash-thumb{width:42px;height:42px;border-radius:999px;background:#fff7ed;color:#b45309}
.big-actions{gap:12px}.big-btn{min-height:118px;border-radius:22px;padding:20px;font-size:22px}.big-btn span{font-size:13.5px}
@media(max-width:720px){
  #todayStats.grid.cols3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-head{display:block}.section-head p{text-align:left;margin-top:3px!important}
  .today-checkin-item{align-items:flex-start}.today-actions .btn{flex:1;min-width:96px}
}

/* v7.4 self-delete immediate visual lock */
.today-checkin-item.is-deleted-row .self-delete-checkin-btn{display:none!important}
.today-checkin-item.is-deleted-row .deleted-note-self{display:block}
.today-checkin-item.is-deleted-row .checkin-photo-wrap{border-color:#fecaca;background:#fee2e2}

/* v7.5: Báo cáo công gọn: chỉ O/X trên màn hình, lý do nằm trong Chi tiết. */
.work-compact-cell{text-align:center;min-width:76px}
.work-symbol{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:28px;border-radius:999px;font-size:16px;font-weight:900;line-height:1}
.work-symbol.ok{background:var(--good-soft);color:var(--good);border:1px solid #bbf7d0}
.work-symbol.bad{background:var(--bad-soft);color:var(--bad);border:1px solid #fecaca}
.work-symbol.neutral{background:#f8fafc;color:var(--muted);border:1px solid var(--line)}
.work-detail{margin-top:5px;font-size:12.5px;text-align:left;color:var(--muted)}
.work-detail summary{cursor:pointer;color:var(--accent);font-weight:750;list-style:none;text-align:center}
.work-detail summary::-webkit-details-marker{display:none}
.work-detail div{margin-top:5px;padding:7px 8px;border-radius:10px;background:#f8fafc;border:1px solid var(--line);line-height:1.35;color:#334155}
#workMatrixTable .work-compact-cell{vertical-align:middle}
.work-o-reason{display:none!important;margin-top:4px;font-size:11.5px;line-height:1.25;color:var(--bad);text-align:center;max-width:150px;white-space:normal;word-break:break-word}

/* v7.6: Báo cáo công chỉ O/X; lý do hiện bằng popup khi bấm hoặc hover. Dashboard stat cũng có popup danh sách người. */
.stat-click{width:100%;text-align:left;border:1px solid var(--line);background:#fff;cursor:pointer}
.stat-click:hover{border-color:#b7d8f2;background:#fbfdff;text-decoration:none}
.stat-click:focus-visible{outline:3px solid rgba(0,113,206,.18);outline-offset:2px}
.mini-popover{position:fixed;z-index:9999;background:#fff;border:1px solid #cfe1f1;border-radius:14px;box-shadow:0 14px 36px rgba(15,23,42,.16);padding:10px 12px;min-width:220px;max-height:min(340px,70vh);overflow:auto;color:var(--text);font-size:13px;line-height:1.35}
.mini-pop-title{font-weight:850;color:#004f9f;margin-bottom:7px;letter-spacing:-.01em}
.mini-pop-body ul{margin:0;padding-left:18px;display:grid;gap:5px}
.mini-pop-body li{margin:0}.stat-pop-empty{color:var(--muted)}
.work-compact-cell{position:relative;text-align:center;min-width:54px;cursor:default}.work-o-cell{cursor:pointer}
.work-compact-cell .work-symbol{margin:auto}
#workMatrixTable .work-detail{display:none!important}
#workMatrixTable .work-compact-cell{vertical-align:middle;padding:9px 10px}
#workMatrixTable .work-symbol{min-width:34px;height:30px;font-size:17px}
@media(hover:hover){.work-o-cell:hover .work-symbol{box-shadow:0 0 0 3px rgba(220,38,38,.09)}}
@media(max-width:560px){.mini-popover{left:12px!important;right:12px!important;max-width:none!important;width:auto}.work-compact-cell{min-width:48px}}


/* v7.7: popup phải hiện khi rê chuột vào toàn bộ ô từ mọi hướng; màu dòng pastel đậm hơn chút. */
.mini-popover{pointer-events:none!important}
.work-compact-cell[data-pop-title],.stat-click[data-pop-title]{cursor:pointer}
.work-compact-cell[data-pop-title]:hover{background:#fff7f7}
.table tr.alert-row-pastel-0 td,.dash-item.alert-row-pastel-0{background:#eef6ff!important}
.table tr.alert-row-pastel-1 td,.dash-item.alert-row-pastel-1{background:#edfff2!important}
.table tr.alert-row-pastel-2 td,.dash-item.alert-row-pastel-2{background:#fff2dd!important}
.table tr.alert-row-pastel-3 td,.dash-item.alert-row-pastel-3{background:#ffedf7!important}
.table tr.alert-row-pastel-4 td,.dash-item.alert-row-pastel-4{background:#edf8ff!important}
.table tr.alert-row-pastel-5 td,.dash-item.alert-row-pastel-5{background:#f3edff!important}
.table tr.alert-row-pastel-6 td,.dash-item.alert-row-pastel-6{background:#eafffb!important}
.table tr.alert-row-pastel-7 td,.dash-item.alert-row-pastel-7{background:#fff0e8!important}
.table tr.alert-row-pastel-8 td,.dash-item.alert-row-pastel-8{background:#f0ffe6!important}
.table tr.alert-row-pastel-9 td,.dash-item.alert-row-pastel-9{background:#eef0ff!important}
.table tr.alert-row-pastel-10 td,.dash-item.alert-row-pastel-10{background:#fff8d8!important}
.table tr.alert-row-pastel-11 td,.dash-item.alert-row-pastel-11{background:#eafff3!important}


/* v7.8: cứu lỗi ổn định + menu trái cuộn được + tô màu đề mục lớn. */
.sidebar{
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:#bfdbfe;border-radius:999px}
.navgroup-toggle{
  color:#083f75;
  background:#e8f4ff;
  border:1px solid #c7e2fb;
  font-weight:900;
}
.navgroup:nth-of-type(2) .navgroup-toggle{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.navgroup:nth-of-type(3) .navgroup-toggle{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.navgroup:nth-of-type(4) .navgroup-toggle{background:#f5f3ff;border-color:#ddd6fe;color:#5b21b6}
.navgroup-toggle span{font-size:14px;text-transform:none;letter-spacing:.01em}
.navgroup-toggle b{font-size:18px;line-height:1}
.navbtn{font-weight:780;color:#0f2f4d}
.navbtn.active{background:#0071ce!important;color:#fff!important}
@media (max-width:980px){.sidebar{max-height:none;overflow:visible}}


/* v7.9: menu thu gọn thật, tooltip rõ, dòng xóa có Hoàn tác. */
.navgroup:not(.open) .navgroup-items{display:none!important}
.navgroup.open .navgroup-items{display:grid!important}
.work-compact-cell[data-pop-title]{cursor:pointer;position:relative}
.work-compact-cell[data-pop-title]:hover,.stat-click[data-pop-title]:hover{outline:2px solid rgba(0,113,206,.18);outline-offset:-2px}
.today-checkin-item.is-deleted-row .self-restore-checkin-btn{display:inline-flex!important}


/* v8.7: Báo cáo công chỉ hiện O/X trên màn hình; lý do chỉ hiện trong popup khi hover/click. */
#workRows .work-detail,.work-o-reason{display:none!important}
.work-o-cell[data-pop-title]{cursor:pointer}

/* v9.5: sửa lỗi một số điện thoại mở camera nhưng không thấy nút chụp.
   Giữ nút chụp cố định trong màn hình khi khung camera đang mở. */
@media (max-width:720px){
  body.camera-open{overflow:hidden;overscroll-behavior:contain;touch-action:manipulation}
  body.camera-open #checkinPanel.iphone-camera-card:not(.hidden){
    position:fixed!important;
    inset:0!important;
    z-index:9999!important;
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:calc(env(safe-area-inset-top,0px) + 10px) 12px calc(env(safe-area-inset-bottom,0px) + 10px)!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#f8fbff!important;
  }
  body.camera-open #checkinPanel .iphone-camera-head{
    flex:0 0 auto;
    padding:2px 2px 8px;
  }
  body.camera-open #checkinPanel .iphone-camera-head h2{font-size:18px;margin-bottom:2px}
  body.camera-open #checkinPanel .iphone-camera-head p{font-size:12px;line-height:1.25;margin:0}
  body.camera-open #checkinPanel .camera-close-btn{min-height:36px;padding:8px 12px;flex:0 0 auto}
  body.camera-open #checkinPanel .iphone-camera-wrap{
    flex:1 1 auto;
    min-height:0;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  body.camera-open #checkinPanel .iphone-preview{
    flex:1 1 auto;
    min-height:180px!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    border-radius:24px!important;
    border-width:4px!important;
  }
  body.camera-open #checkinPanel .iphone-preview video,
  body.camera-open #checkinPanel .iphone-preview canvas{border-radius:20px!important;max-height:none!important}
  body.camera-open #checkinPanel .iphone-camera-controls{
    flex:0 0 auto;
    position:relative!important;
    z-index:10001!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    padding:8px!important;
    border:1px solid rgba(191,221,245,.9);
    border-radius:24px;
    background:rgba(248,251,255,.96);
    box-shadow:0 8px 24px rgba(15,23,42,.16);
  }
  body.camera-open #checkinPanel .shutter-btn{
    width:72px!important;
    height:72px!important;
    display:grid!important;
    place-items:center!important;
    opacity:1!important;
    visibility:visible!important;
  }
  body.camera-open #checkinPanel .camera-pill-btn{
    min-height:42px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    opacity:1!important;
    visibility:visible!important;
    padding:8px 8px!important;
    font-size:12.5px!important;
    white-space:normal;
    line-height:1.15;
  }
  body.camera-open #checkinPanel .camera-tip{font-size:11.5px;margin:0;flex:0 0 auto}
  body.camera-open #checkinPanel .msg{font-size:12.5px;line-height:1.25;min-height:16px;margin-top:0;flex:0 0 auto}
  body.camera-open #checkinPanel #checkResult{max-height:32dvh;overflow:auto;flex:0 1 auto}
}

/* v9.6: fallback cho điện thoại/WebView bị đẩy video camera ra màn hình đen làm mất nút Chụp. */
.camera-native-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  width:100%;
  border:1px solid #c7ddff;
  border-radius:999px;
  background:#eef6ff;
  color:#0f4f9f;
  font-weight:850;
  cursor:pointer;
  padding:9px 12px;
}
.camera-native-btn:active{transform:scale(.99)}
.video-box video::-webkit-media-controls,
.video-box video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none!important}
@media (max-width:720px){
  body.camera-open #checkinPanel .camera-native-btn{
    flex:0 0 auto;
    display:inline-flex!important;
    position:relative!important;
    z-index:10002!important;
    box-shadow:0 6px 18px rgba(15,23,42,.10);
  }
  body.camera-open #checkinPanel .iphone-camera-controls,
  body.camera-open #checkinPanel .camera-native-btn,
  body.camera-open #checkinPanel .camera-tip,
  body.camera-open #checkinPanel .msg{transform:translateZ(0)}
}

.checkin-action-wrap{position:relative;display:flex;flex-direction:column;gap:8px}.checkin-action-wrap .big-btn{width:100%}.checkin-countdown{align-self:flex-start;border:1px solid #f3d0a5;background:#fff7ed;color:#9a3412;border-radius:999px;padding:7px 11px;font-size:13px;font-weight:750;box-shadow:0 8px 18px rgba(154,52,18,.08)}.big-btn.cooldown-disabled{opacity:.55;filter:grayscale(.15);cursor:not-allowed;background:#f8fafc}.big-btn.cooldown-disabled:hover{border-color:var(--line);background:#f8fafc}
@media (max-width:980px){.checkin-countdown{font-size:12.5px;padding:6px 10px}}
/* v10.5: xem ảnh bằng popup trong app, không mở tab/cửa sổ mới */
.photo-modal-open{overflow:hidden}
.photo-preview-modal{z-index:12000}
.photo-preview-modal .knf-modal__backdrop{background:rgba(15,23,42,.72)}
.photo-preview-panel{width:min(96vw,980px)!important;max-height:92vh;padding:12px!important;display:grid;place-items:center;background:#0f172a!important;border-color:rgba(255,255,255,.12)!important}
.photo-preview-panel img{display:block;max-width:100%;max-height:86vh;object-fit:contain;border-radius:14px;background:#0f172a}
.photo-preview-close{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.94);color:#0f172a;font-size:28px;line-height:1;cursor:pointer;z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.photo-thumb-btn{border:0;background:transparent;padding:0;cursor:pointer;display:inline-block;border-radius:12px}
.photo-thumb-btn:focus{outline:3px solid rgba(0,113,206,.22);outline-offset:3px}
@media(max-width:560px){.photo-preview-panel{width:100vw!important;max-height:100vh;border-radius:0!important}.photo-preview-panel img{max-height:92vh;border-radius:10px}.photo-preview-close{top:calc(8px + env(safe-area-inset-top));right:8px}}


/* KNF v11.1 — Lite Friendly UI
   Mục tiêu: đẹp hơn nhưng vẫn nhẹ cho máy Android/iOS cũ.
   Không dùng font ngoài, không video/ảnh nền, không blur, không background fixed, không animation. */
:root{
  --bg:#f6f8fb;
  --panel:#ffffff;
  --panel-soft:#f9fbff;
  --text:#111827;
  --muted:#667085;
  --line:#d8e2ee;
  --accent:#0a84ff;
  --accent-2:#0066cc;
  --accent-soft:#eaf4ff;
  --good:#14804a;
  --good-soft:#edfdf5;
  --warn:#a15c07;
  --warn-soft:#fff8eb;
  --bad:#c92a2a;
  --bad-soft:#fff1f1;
  --shadow:0 4px 14px rgba(15,23,42,.045);
  --radius:18px;
}
html.power-save *,html.power-save *::before,html.power-save *::after{animation:none;transition:none;scroll-behavior:auto}
body{background:#f6f8fb;background-image:none;background-attachment:scroll;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
body::before,body::after,.orb,.bg-grid::before{display:none}
.card,.login-card,.sidebar,.big-btn,.stat,.userbox{box-shadow:var(--shadow);background:#fff;border-color:var(--line)}
.card{border-radius:18px}.login-card{border-radius:22px}
.brand h1,.card h2,.card h3{letter-spacing:-.015em;color:#101828}
.brand p,.muted{color:var(--muted)}
.btn{background:var(--accent);color:#fff;border:0;box-shadow:none}
.btn:hover,.btn:focus{background:var(--accent-2);color:#fff;text-decoration:none}
.btn.secondary{background:#fff;color:var(--accent);border:1px solid #b9d8ff}
.btn.secondary:hover{background:var(--accent-soft);color:var(--accent-2)}
.btn.danger{background:var(--bad);color:#fff}
input,select,textarea{background:#fff;color:var(--text);border-color:var(--line)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,132,255,.12)}
.big-btn{background:#fff;color:var(--text);min-height:136px;border-radius:22px}
.big-btn span{color:var(--muted)}
.big-btn:hover{background:#f9fbff;border-color:#a7cdfd}.big-btn::after{display:none}
.stat b{color:#0b5cad}.stat-click{background:#fff}.stat-click:hover{background:#f9fbff;border-color:#a7cdfd}
.pill{background:#f8fafc;color:#526070;border-color:#d8e2ee}.pill.good{background:var(--good-soft);color:var(--good);border-color:#b8f3d2}.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:#ffdca3}.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:#ffc9c9}
.navgroup-toggle{background:#f8fbff;color:#175cd3;border:1px solid #d8e2ee}.navbtn{color:#1f2937}.navbtn:hover{background:#f3f7fd}.navbtn.active{background:var(--accent);color:#fff}
.table-wrap{background:#fff}.table th{background:#f8fbff;color:#344054}.table td{color:#111827}.table tr:hover td{background:#fbfdff}.table img,.dash-thumb,.today-checkins img{background:#f1f5f9}
.video-box{background:#111827}.video-box::before{color:#cbd5e1}.map,.real-user-map,.restricted-lite-map{background:#eef6ff}
.iphone-camera-card{background:#fff}.iphone-preview{background:#111827;box-shadow:none}.iphone-camera-controls{background:#fff;box-shadow:var(--shadow)}.camera-pill-btn{background:#fff;color:#175cd3;border-color:#c7d7ea}.shutter-btn{background:#0a84ff;color:#fff;box-shadow:none;border-color:#dbeafe}
.knf-modal__backdrop{background:rgba(15,23,42,.55)}.photo-preview-panel{background:#111827}.photo-preview-close{background:#fff;color:#111827}
.checkin-photo-wrap.is-deleted img{filter:none;opacity:.45}.big-btn.cooldown-disabled{filter:none;opacity:.52}
@media(max-width:560px){.page{padding:10px}.big-btn{min-height:108px}.card,.login-card{padding:16px}.table th,.table td{font-size:13px}}

/* Admin table filter/sort styles moved from inline HTML to shared CSS, still lightweight. */
.table th.sortable-col{cursor:pointer;position:relative;vertical-align:top}
.table th.sortable-col::after{content:' ↕';font-size:11px;color:#94a3b8}
.table th.sort-asc::after{content:' ↑';color:#2563eb}
.table th.sort-desc::after{content:' ↓';color:#2563eb}
.table-filter-row input{width:100%;min-width:72px;border:1px solid #dbeafe;border-radius:10px;padding:6px 8px;background:#f8fbff;font-size:12px;color:#111827}
.device-compat-card{margin:12px 0;padding:12px;border:1px solid #dbeafe;border-radius:16px;background:#fff}
.device-compat-bad{background:#fff1f2;border-color:#fecdd3}
.device-compat-warn{background:#fff7ed;border-color:#fed7aa}
.inspector-undo-notice{position:fixed;right:18px;bottom:18px;z-index:9999;max-width:380px;padding:14px 16px;border:1px solid #bfdbfe;border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 18px 45px rgba(15,23,42,.18);color:#111827}
.inspector-undo-notice .actions{margin-top:10px;gap:8px}

/* v11.6: popup báo ảnh chưa đạt điều kiện check-in, không lưu ảnh */
.checkin-reject-modal{z-index:12500}
.checkin-reject-modal .knf-modal__backdrop{background:rgba(15,23,42,.55)}
.checkin-reject-panel{width:min(92vw,460px)!important;text-align:center;border:1px solid #fecaca!important;background:#fff!important}
.checkin-reject-icon{width:54px;height:54px;margin:0 auto 10px;border-radius:999px;display:grid;place-items:center;background:#fee2e2;color:#b91c1c;font-weight:900;font-size:30px}
.checkin-reject-panel h2{margin:4px 0 8px;color:#991b1b;font-size:21px}
.checkin-reject-panel p{margin:0;color:#374151;line-height:1.5;font-size:15px}
.checkin-reject-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:999px;background:#f3f4f6;color:#111827;font-size:24px;line-height:1;cursor:pointer}
@media(max-width:560px){.checkin-reject-panel{width:calc(100vw - 28px)!important;border-radius:18px!important;padding:18px!important}.checkin-reject-panel h2{font-size:19px}.checkin-reject-panel p{font-size:14px}}

/* v11.7 check-in status popup: lightweight, no animation-heavy effect */
.checkin-status-modal{z-index:12500}
.checkin-status-modal .knf-modal__backdrop{background:rgba(15,23,42,.45)}
.checkin-status-panel{width:min(92vw,460px)!important;text-align:center;border:1px solid #bbf7d0!important;background:#fff!important}
.checkin-status-icon{width:54px;height:54px;margin:0 auto 10px;border-radius:999px;display:grid;place-items:center;font-weight:900;font-size:30px}
.checkin-status-icon.good{background:#dcfce7;color:#15803d}
.checkin-status-icon.warn{background:#fef3c7;color:#b45309}
.checkin-status-icon.bad{background:#fee2e2;color:#b91c1c}
.checkin-status-panel h2{margin:4px 0 8px;color:#111827;font-size:21px}
.checkin-status-panel p{margin:0;color:#374151;line-height:1.5;font-size:15px}
.checkin-status-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:999px;background:#f3f4f6;color:#111827;font-size:24px;line-height:1;cursor:pointer}
@media(max-width:560px){.checkin-status-panel{width:calc(100vw - 28px)!important;border-radius:18px!important;padding:18px!important}.checkin-status-panel h2{font-size:19px}.checkin-status-panel p{font-size:14px}}
.today-photos-actions{margin-top:12px}
.today-photo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(180deg,#ffffff,#f8fbff);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.today-photo-toolbar.is-empty{justify-content:flex-start;border-style:dashed;background:#fff}
.today-photo-toolbar b{display:block;font-size:14.5px;margin-bottom:2px}
.today-photo-toolbar .btn{white-space:nowrap}
@media(max-width:640px){.today-photo-toolbar{align-items:stretch;flex-direction:column}.today-photo-toolbar .btn{width:100%}}



.permission-guide-modal{z-index:12600}
.permission-guide-modal .knf-modal__backdrop{background:rgba(15,23,42,.48)}
.permission-guide-panel{width:min(92vw,560px)!important;border:1px solid #dbeafe!important;background:#fff!important}
.permission-guide-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:999px;background:#f3f4f6;color:#111827;font-size:24px;line-height:1;cursor:pointer}
.permission-guide-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.permission-guide-content{background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:12px;text-align:left}
.permission-guide-block h3{margin:0 0 8px;font-size:16px;color:#0f172a}
.permission-guide-block ol{margin:0 0 0 20px;padding:0;color:#334155;line-height:1.55;font-size:14px}
.permission-guide-block li{margin:6px 0}.camera-native-btn.secondary{background:#f8fafc;color:#334155;border-color:#dbeafe}
@media(max-width:560px){.permission-guide-panel{width:calc(100vw - 28px)!important;border-radius:18px!important;padding:18px!important}.permission-guide-block ol{font-size:13.5px}.permission-guide-tabs .btn{flex:1}}

/* v12.3.5: không để input camera display:none; một số iPhone/Android WebView không bắn sự kiện change sau khi chụp nếu input bị ẩn cứng. */
.native-camera-file-input{
  position:fixed!important;
  left:-10000px!important;
  top:0!important;
  width:1px!important;
  height:1px!important;
  opacity:.01!important;
  pointer-events:none!important;
}

/* v12.3.6: popup chúc mừng khi nhân viên hoàn thành đủ công trong ngày. */
.checkin-status-icon.celebrate{background:#fff7ed;color:#b45309;font-size:28px;box-shadow:0 0 0 7px rgba(251,191,36,.16)}
.workday-complete-modal .checkin-status-panel{overflow:hidden;border-color:#fed7aa!important;background:linear-gradient(180deg,#fff 0%,#fff7ed 100%)!important}
.workday-complete-modal .checkin-status-panel::before{content:'✨';position:absolute;left:18px;top:14px;font-size:26px;opacity:.85;animation:workdaySparkle 1.5s ease-in-out infinite alternate}
.workday-complete-modal .checkin-status-panel::after{content:'🎊';position:absolute;right:20px;top:15px;font-size:25px;opacity:.85;animation:workdaySparkle 1.7s ease-in-out infinite alternate-reverse}
.workday-confetti-layer{position:fixed;inset:0;z-index:13000;pointer-events:none;overflow:hidden}
.workday-confetti-piece{position:absolute;top:-18px;width:9px;height:15px;border-radius:3px;background:var(--c,#16a34a);opacity:.95;animation:workdayConfettiFall 3s cubic-bezier(.16,.72,.24,1) forwards}
.workday-firework{position:absolute;width:7px;height:7px;border-radius:999px;background:#f59e0b;box-shadow:0 -24px 0 #f59e0b,0 24px 0 #22c55e,24px 0 0 #2563eb,-24px 0 0 #ef4444,17px 17px 0 #8b5cf6,-17px -17px 0 #06b6d4,17px -17px 0 #f97316,-17px 17px 0 #14b8a6;transform:scale(.1);opacity:0;animation:workdayFirework 1.25s ease-out forwards}
@keyframes workdayConfettiFall{0%{transform:translate3d(0,-24px,0) rotate(0deg);opacity:1}100%{transform:translate3d(var(--x,0),105vh,0) rotate(var(--r,360deg));opacity:.15}}
@keyframes workdayFirework{0%{transform:scale(.05);opacity:0}18%{opacity:1}85%{transform:scale(1.7);opacity:.9}100%{transform:scale(2.05);opacity:0}}
@keyframes workdaySparkle{from{transform:translateY(0) rotate(-5deg);opacity:.6}to{transform:translateY(5px) rotate(7deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.workday-confetti-layer{display:none!important}.workday-complete-modal .checkin-status-panel::before,.workday-complete-modal .checkin-status-panel::after{animation:none!important}}

/* v12.3.10: sửa nhanh phân quyền Nhân viên sale / Quản lý đội trong Quản lý user. */
.inline-edit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:230px}
.small-select{min-height:36px;border-radius:10px;padding:7px 10px;font-size:13px;min-width:145px}
.table td .inline-edit .btn{white-space:nowrap}
/* v12.3.18 MCP pen drawing */
.btn.active{outline:2px solid rgba(37,99,235,.35);box-shadow:0 0 0 4px rgba(37,99,235,.10)}
#adminMcpMap{min-height:420px}

/* MCP v12.3.19 */
.mcp-assign-grid .field{display:flex;flex-direction:column;gap:6px;font-weight:700;color:#0f172a}
.mcp-assign-grid .field span{font-size:12px;color:#475569}
.mcp-small-map-title{font-weight:800;margin:10px 0 8px;color:#0f172a}
.mcp-assign-map{height:340px;min-height:300px;border-radius:14px;border:1px solid #dbe7ff;background:#eef6ff;margin-bottom:10px}
@media(max-width:720px){.mcp-assign-map{height:320px}.mcp-assign-grid{grid-template-columns:1fr!important}}


/* v12.3.21 MCP: ghim nhẹ bằng CSS, màu theo thứ; popup nhỏ gọn để giảm tải điện thoại. */
.mcp-day-marker-shell{background:transparent!important;border:0!important}
.mcp-day-marker{position:relative;display:block;width:22px;height:22px;background:var(--mcp-color,#2563eb);border:2px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 7px rgba(15,23,42,.28)}
.mcp-day-marker::after{content:'';position:absolute;width:7px;height:7px;border-radius:999px;background:#fff;left:5.5px;top:5.5px;opacity:.9}
.leaflet-popup-content .mcp-popup-compact{width:240px;max-width:76vw;font-size:12px;line-height:1.35;color:#0f172a}
.mcp-pop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:5px}
.mcp-pop-head b{font-size:13px;line-height:1.25}.mcp-day-pill{white-space:nowrap;border-radius:999px;padding:2px 7px;color:#fff;background:var(--mcp-color,#2563eb);font-weight:800;font-size:11px}
.mcp-pop-line{margin:2px 0;color:#334155;word-break:break-word}.mcp-pop-line strong{color:#0f172a}.mcp-pop-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.mcp-pop-actions a{font-weight:700;color:#2563eb;text-decoration:none}.mcp-more{margin-top:6px;border-top:1px solid #e2e8f0;padding-top:5px}.mcp-more summary{cursor:pointer;color:#475569;font-weight:700}
.mcp-more-grid{max-height:138px;overflow:auto;margin-top:5px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:2px 7px}.mcp-more-grid b{color:#64748b;font-weight:700}.mcp-more-grid span{color:#0f172a;word-break:break-word}
@media(max-width:560px){.leaflet-popup-content .mcp-popup-compact{width:218px;font-size:11.5px}.mcp-more-grid{max-height:116px;grid-template-columns:64px minmax(0,1fr)}}
/* v12.3.22 MCP import UI: nhẹ, chỉ tạo hiệu ứng viền ngắn khi bấm Import trên đầu trang. */
.attention-flash{box-shadow:0 0 0 3px rgba(37,99,235,.18),0 0 0 6px rgba(37,99,235,.08)!important;transition:box-shadow .18s ease}
@media(max-width:720px){#view-mcp .grid.cols2{grid-template-columns:1fr!important}}

/* v12.3.23 MCP: phóng lớn bản đồ vẽ vùng, tách import xuống dưới để thao tác dễ hơn nhưng vẫn nhẹ. */
#view-mcp .mcp-config-stack{grid-template-columns:1fr!important;gap:14px}
#view-mcp .mcp-assign-panel{width:100%}
#view-mcp .mcp-assign-grid{grid-template-columns:minmax(220px,1fr) minmax(160px,.65fr) minmax(260px,1.15fr)!important;align-items:end}
#view-mcp .mcp-assign-map{height:580px;min-height:520px;width:100%;border-radius:16px;margin-bottom:12px}
#view-mcp .mcp-small-map-title{margin:12px 0 8px;font-size:15px}
#view-mcp .mcp-assign-panel .actions{position:relative;z-index:2;gap:10px;flex-wrap:wrap}
#view-mcp #mcpImportPanel{width:100%}
@media(max-width:980px){
  #view-mcp .mcp-assign-grid{grid-template-columns:1fr!important}
  #view-mcp .mcp-assign-map{height:42vh;min-height:320px}
}


/* v12.3.26 lightweight face-photo markers */
.avatar-map-marker-wrap{background:transparent;border:none}
.avatar-map-marker{width:40px;height:40px;border-radius:999px;overflow:hidden;border:2px solid #fff;box-shadow:0 0 0 3px var(--ring,#2563eb), 0 2px 7px rgba(0,0,0,.18);background:#fff;display:flex;align-items:center;justify-content:center;outline:none;position:relative}
.avatar-map-marker img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 38%;background:#f1f5f9;transform:none;will-change:auto}
.avatar-map-marker img.face-detected{transform:none;object-position:var(--avatar-pos-x,50%) var(--avatar-pos-y,38%)}
.avatar-map-marker.is-fallback{font-size:12px;font-weight:800;color:#fff;letter-spacing:0;background:var(--ring,#2563eb);text-shadow:0 1px 1px rgba(0,0,0,.18)}
.avatar-map-marker.is-small{width:34px;height:34px;border-width:2px;box-shadow:0 0 0 3px var(--ring,#2563eb), 0 2px 6px rgba(0,0,0,.16)}

/* v12.3.36 user avatar management */
.user-avatar-cell{display:flex;align-items:center;gap:8px;min-width:130px}
.user-avatar-preview{width:34px;height:34px;border-radius:999px;object-fit:cover;background:#e5edff;border:2px solid #fff;outline:1px solid rgba(37,99,235,.25);box-shadow:0 1px 3px rgba(15,23,42,.16)}
.user-avatar-placeholder{width:34px;height:34px;border-radius:999px;background:#eef2ff;color:#2563eb;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;outline:1px solid rgba(37,99,235,.25)}
.user-avatar-actions{display:flex;gap:6px;flex-wrap:wrap}
.user-avatar-file{display:none}

/* v12.5.9: System Admin bấm trực tiếp X để mở modal chuyển thành O. */
.work-x-cell[data-workday-action="uncount"]{cursor:pointer}
.work-x-cell[data-workday-action="uncount"]:hover .work-symbol,
.work-x-cell[data-workday-action="uncount"]:focus .work-symbol{box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.work-compact-cell[role="button"]:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}

/* v12.5.9: khóa đúng ô ngày công đang xử lý, không ảnh hưởng ô khác. */
.work-compact-cell.is-processing{cursor:wait;opacity:.72;pointer-events:none}


/* v12.5.9: modal xác nhận X → O và phân đội độc lập. */
body.workday-uncount-open{overflow:hidden}
.workday-uncount-modal{z-index:12850}
.workday-uncount-panel{width:min(92vw,560px);max-height:min(88vh,720px);overflow:auto;padding:20px}
.workday-uncount-head{align-items:flex-start}
.workday-uncount-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:16px 0}
.workday-uncount-summary>div{border:1px solid var(--line);border-radius:12px;padding:10px;background:#f8fafc;min-width:0}
.workday-uncount-summary span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.workday-uncount-summary strong{display:block;color:var(--text);word-break:break-word}
.workday-uncount-panel textarea{width:100%;resize:vertical;min-height:84px}
.workday-uncount-actions{justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.workday-uncount-actions .btn{min-height:42px}
.team-inline-edit{min-width:250px}
@media(max-width:560px){
  .workday-uncount-panel{width:calc(100vw - 24px);max-height:calc(100vh - 24px);padding:16px;border-radius:16px}
  .workday-uncount-summary{grid-template-columns:1fr}
  .workday-uncount-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .workday-uncount-actions .btn{width:100%;min-height:46px}
  .team-inline-edit{min-width:210px}
}


/* ==========================================================================
   KNF SKIN v14 — LỚP NỀN DÙNG CHUNG (admin + nhân viên)
   Chỉ đổi giao diện, không đụng chức năng. Nạp sau cùng nên thắng.
   ========================================================================== */

:root{
  --knf-red:#C8202A; --knf-red-h:#AC1A23; --knf-red-d:#8E1319;
  --knf-red-soft:#FDECEE; --knf-red-line:#F2C6CA;

  --knf-ink:#141419;      --knf-ink-2:#3C3B45;   --knf-ink-3:#6C6B77;   --knf-ink-4:#95939F;
  --knf-line:#E4E3E9;     --knf-line-2:#D3D1DA;  --knf-hair:#F0EFF3;
  --knf-paper:#FFFFFF;    --knf-paper-2:#FAFAFC; --knf-ground:#EFEFF3;

  --knf-good:#12673A; --knf-good-bg:#E8F5EE; --knf-good-line:#BEE0CD;
  --knf-warn:#8A5300; --knf-warn-bg:#FDF3E2; --knf-warn-line:#EBD5AB;
  --knf-bad:#98241C;  --knf-bad-bg:#FDECEB;  --knf-bad-line:#F0C6C2;
  --knf-info:#1B5480; --knf-info-bg:#EAF2F9; --knf-info-line:#C0D6E7;

  --knf-r:6px; --knf-r-lg:10px; --knf-r-xl:14px;
  --knf-sh-1:0 1px 2px rgba(20,20,25,.05);
  --knf-sh-2:0 2px 4px rgba(20,20,25,.05),0 6px 16px rgba(20,20,25,.06);
  --knf-sh-3:0 10px 34px rgba(20,20,25,.16);
  --knf-ring:0 0 0 3px rgba(200,32,42,.15);

  --color-primary:var(--knf-red); --color-primary-hover:var(--knf-red-h);
  --color-primary-dark:var(--knf-red-d); --color-primary-soft:var(--knf-red-soft);
  --color-bg:var(--knf-ground); --color-surface:var(--knf-paper);
  --color-surface-muted:var(--knf-paper-2);
  --color-text:var(--knf-ink); --color-text-muted:var(--knf-ink-3);
  --color-border:var(--knf-line); --color-border-strong:var(--knf-line-2);
  --color-success:var(--knf-good); --color-warning:var(--knf-warn);
  --color-danger:var(--knf-bad);   --color-info:var(--knf-info);
  --radius-sm:4px; --radius-md:var(--knf-r); --radius-lg:var(--knf-r-lg); --radius-xl:var(--knf-r-xl);
  --radius:var(--knf-r-lg);
  --shadow-sm:var(--knf-sh-1); --shadow-md:var(--knf-sh-2); --shadow:var(--knf-sh-1);

  --bg:var(--knf-ground); --panel:var(--knf-paper); --panel-soft:var(--knf-paper-2);
  --text:var(--knf-ink); --muted:var(--knf-ink-3); --line:var(--knf-line);
  --accent:var(--knf-red); --accent-2:var(--knf-red-h); --accent-soft:var(--knf-red-soft);
  --good:var(--knf-good); --good-soft:var(--knf-good-bg);
  --warn:var(--knf-warn); --warn-soft:var(--knf-warn-bg);
  --bad:var(--knf-bad);   --bad-soft:var(--knf-bad-bg);
}

html{-webkit-text-size-adjust:100%}
body{background:var(--knf-ground);color:var(--knf-ink);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.005em}
body::before,body::after,.orb,.bg-grid::before{display:none!important;content:none!important}
::selection{background:var(--knf-red);color:#fff}
h1,h2,h3,h4{letter-spacing:-.018em;color:var(--knf-ink)}
.muted{color:var(--knf-ink-3)}
.small{font-size:12.5px}
a{color:var(--knf-red)}
a:hover{color:var(--knf-red-h)}
:focus-visible{outline:2px solid var(--knf-red);outline-offset:2px;border-radius:3px}

/* Số liệu thẳng cột */
.table td,.table th,.stat b,.stat span,.pill,input[type=number],.permission-code{font-variant-numeric:tabular-nums}

/* ---------- Nút ---------- */
.btn,.camera-pill-btn,.camera-native-btn{
  border-radius:var(--knf-r);font-weight:600;font-size:13.5px;padding:8px 15px;min-height:36px;
  letter-spacing:-.005em;
  transition:background .13s ease,border-color .13s ease,color .13s ease,box-shadow .13s ease,transform .09s ease}
.btn{background:var(--knf-red);border:1px solid var(--knf-red);color:#fff;box-shadow:0 1px 2px rgba(200,32,42,.22)}
.btn:hover{background:var(--knf-red-h);border-color:var(--knf-red-h);box-shadow:0 2px 6px rgba(200,32,42,.26);transform:none}
.btn:active{background:var(--knf-red-d);border-color:var(--knf-red-d);box-shadow:none;transform:translateY(1px)}
.btn.secondary{background:#fff;border:1px solid var(--knf-line-2);color:var(--knf-ink-2);box-shadow:var(--knf-sh-1)}
.btn.secondary:hover,.btn.secondary:focus{background:var(--knf-paper-2);border-color:#BAB8C3;color:var(--knf-ink)}
.btn.ghost{background:transparent;border:1px solid transparent;color:var(--knf-ink-3);box-shadow:none}
.btn.ghost:hover{background:var(--knf-paper-2);color:var(--knf-ink)}
.btn.outline{background:transparent;border:1px solid var(--knf-line-2);color:var(--knf-ink-2);box-shadow:none}
.btn.danger{background:#fff;border:1px solid var(--knf-bad-line);color:var(--knf-bad);box-shadow:var(--knf-sh-1)}
.btn.danger:hover{background:var(--knf-bad-bg);border-color:var(--knf-bad);color:var(--knf-bad)}
.small-btn{padding:5px 11px;min-height:30px;font-size:12.5px;border-radius:5px;box-shadow:none}
.btn:disabled,.camera-pill-btn:disabled,.camera-native-btn:disabled{opacity:.45;box-shadow:none;transform:none}
.actions{gap:8px}
.table td .actions{flex-wrap:wrap;gap:6px}

/* ---------- Thẻ ---------- */
.card,.mini-panel{background:#fff;border:1px solid var(--knf-line);border-radius:var(--knf-r-lg);
  box-shadow:var(--knf-sh-1);padding:20px}
.card h2{font-size:15px;font-weight:700;margin:0 0 16px;padding:0 0 13px;
  border-bottom:1px solid var(--knf-hair);display:flex;align-items:center;gap:9px;
  width:100%;flex:1 0 100%;align-self:stretch}
.card h2::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--knf-red);flex:0 0 3px}
.card h3{font-size:13.5px;font-weight:650;color:var(--knf-ink-2)}
.card p{font-size:13.5px;color:var(--knf-ink-3)}
.split{gap:16px}
.grid{gap:14px}

/* ---------- Ô nhập ---------- */
label{font-size:12.5px;font-weight:600;color:var(--knf-ink-3);letter-spacing:0}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
select,textarea{border-radius:var(--knf-r);border:1px solid var(--knf-line-2);padding:8px 11px;
  font-size:13.5px;min-height:36px;background:#fff;color:var(--knf-ink);box-shadow:none;
  transition:border-color .13s ease,box-shadow .13s ease}
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:#BAB8C3}
input:focus,select:focus,textarea:focus{border-color:var(--knf-red);box-shadow:var(--knf-ring);outline:0}
input::placeholder,textarea::placeholder{color:#A5A3AE}
input[type=checkbox],input[type=radio]{width:16px;height:16px;min-height:0;padding:0;
  accent-color:var(--knf-red);vertical-align:middle;cursor:pointer}
select[multiple],select[size]{min-height:0;height:auto;padding:5px;font-size:13px}
select[multiple] option,select[size] option{padding:3px 7px;border-radius:4px}
select[multiple] option:checked,select[size] option:checked{background:var(--knf-red-soft);color:var(--knf-red)}
textarea{min-height:80px;line-height:1.55}
.form-grid,.filters{gap:14px}
.msg:empty,.field-hint:empty,.warning-hint:empty{display:none!important}
.password-toggle{border-radius:5px;background:var(--knf-paper-2);color:var(--knf-ink-3);
  border:1px solid var(--knf-line);font-weight:600;font-size:12.5px;min-height:30px}
.password-toggle:hover{background:var(--knf-red-soft);color:var(--knf-red);border-color:var(--knf-red-line)}

/* ---------- Bảng ---------- */
.table-wrap{background:#fff;border:1px solid var(--knf-line);border-radius:var(--knf-r-lg);
  overflow:auto;-webkit-overflow-scrolling:touch;box-shadow:none}
.table{font-size:13px;border-collapse:separate;border-spacing:0;width:100%}
.table th{background:var(--knf-paper-2);color:var(--knf-ink-3);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:11px 14px;white-space:nowrap;
  border-bottom:1px solid var(--knf-line);position:static}
.table td{padding:11px 14px;border-bottom:1px solid var(--knf-hair);vertical-align:middle;color:var(--knf-ink-2)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover td,.table tr:hover td{background:#FAFAFC}
.table td:first-child{color:var(--knf-ink);font-weight:550}
.table img{border-radius:5px}
.table thead input:not([type=checkbox]),.table thead select{min-height:30px;padding:5px 9px;
  font-size:12.5px;border-radius:5px;background:#fff}

/* Dòng cảnh báo: bỏ nền pastel loang lổ, thay bằng vạch màu bên trái */
.table tr[class*="alert-row-pastel"] td{background:#fff!important}
.table tr[class*="alert-row-pastel"]:hover td{background:#FAFAFC!important}
.table tr[class*="alert-row-pastel"] td:first-child{box-shadow:inset 3px 0 0 var(--knf-line-2)}
.table tr.alert-row-pastel-0 td:first-child{box-shadow:inset 3px 0 0 #7C97B8}
.table tr.alert-row-pastel-1 td:first-child{box-shadow:inset 3px 0 0 #6FAE8C}
.table tr.alert-row-pastel-2 td:first-child{box-shadow:inset 3px 0 0 #C9A55E}
.table tr.alert-row-pastel-3 td:first-child{box-shadow:inset 3px 0 0 #BE8AA9}
.table tr.alert-row-pastel-4 td:first-child{box-shadow:inset 3px 0 0 #6BA6BA}
.table tr.alert-row-pastel-5 td:first-child{box-shadow:inset 3px 0 0 #9A8CC0}
.table tr.alert-row-pastel-6 td:first-child{box-shadow:inset 3px 0 0 #64B4A7}
.table tr.alert-row-pastel-7 td:first-child{box-shadow:inset 3px 0 0 #CE9271}
.table tr.alert-row-pastel-8 td:first-child{box-shadow:inset 3px 0 0 #92B673}
.table tr.alert-row-pastel-9 td:first-child{box-shadow:inset 3px 0 0 #8494C6}
.table tr.alert-row-pastel-10 td:first-child{box-shadow:inset 3px 0 0 #C2B569}
.dash-item[class*="alert-row-pastel"]{background:#fff!important;border-left:3px solid var(--knf-line-2)}

/* ---------- Nhãn trạng thái ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:100px;font-size:11.5px;
  font-weight:600;padding:3px 10px;border:1px solid var(--knf-line);
  background:var(--knf-paper-2);color:var(--knf-ink-3);box-shadow:none;white-space:nowrap}
.pill.good{background:var(--knf-good-bg);color:var(--knf-good);border-color:var(--knf-good-line)}
.pill.warn{background:var(--knf-warn-bg);color:var(--knf-warn);border-color:var(--knf-warn-line)}
.pill.bad{background:var(--knf-bad-bg);color:var(--knf-bad);border-color:var(--knf-bad-line)}
.good{color:var(--knf-good)}
.bad{color:var(--knf-bad)}

/* ---------- Thông báo ---------- */
.msg{border-radius:var(--knf-r);font-size:13px;padding:10px 13px;border:1px solid var(--knf-line);
  background:var(--knf-paper-2);color:var(--knf-ink-2)}
.msg.good{background:var(--knf-good-bg);color:var(--knf-good);border-color:var(--knf-good-line)}
.msg.bad{background:var(--knf-bad-bg);color:var(--knf-bad);border-color:var(--knf-bad-line)}

/* ---------- Đăng nhập ---------- */
.login-card{border-radius:var(--knf-r-xl);box-shadow:var(--knf-sh-3);padding:30px 28px;
  border:1px solid var(--knf-line);background:#fff}
.login-card::before{display:none}
.auth-brand h1{font-size:20px;font-weight:700}
.auth-kicker{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--knf-ink-4);font-weight:600}
.login-submit{min-height:44px;font-size:14.5px;font-weight:650}
.forgot-toggle{min-height:38px;font-size:13px;background:transparent;
  border:1px solid var(--knf-line-2);color:var(--knf-ink-3);box-shadow:none}
.forgot-toggle:hover{background:var(--knf-paper-2);color:var(--knf-ink)}

/* ---------- Bản đồ / camera ---------- */
.map,.real-user-map,.restricted-lite-map{border-radius:var(--knf-r-lg);border:1px solid var(--knf-line);overflow:hidden}
.iphone-preview{border-radius:var(--knf-r-lg)}
.camera-pill-btn,.shutter-btn{box-shadow:none}

/* ---------- Hộp thoại ---------- */
.knf-modal__backdrop{background:rgba(18,17,22,.5);backdrop-filter:none;-webkit-backdrop-filter:none}
.knf-modal__panel,.permission-modal-panel{border-radius:var(--knf-r-xl);box-shadow:var(--knf-sh-3);
  border:1px solid var(--knf-line);background:#fff}
.permission-modal-head,.permission-modal-foot{background:var(--knf-paper-2);border-color:var(--knf-line)}
.permission-group{border-radius:var(--knf-r);border-color:var(--knf-line)}
.permission-group>summary{font-size:13px;font-weight:650}
.permission-row{border-color:var(--knf-hair)}
.permission-row.dangerous{background:var(--knf-bad-bg);border-color:var(--knf-bad-line)}
.permission-segment{border-radius:var(--knf-r);border:1px solid var(--knf-line-2);overflow:hidden}
.permission-segment label{font-size:12.5px;border-radius:0}
.permission-segment label:has(input:checked){background:var(--knf-red);color:#fff}
.permission-code{font-size:11px;color:var(--knf-ink-4);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- Nút chấm công (màn hình nhân viên) ---------- */
.big-btn,#btnCheckin{border-radius:var(--knf-r-xl);box-shadow:var(--knf-sh-1);
  transition:background .13s ease,box-shadow .13s ease,transform .09s ease}
.big-btn{background:#fff;border:1px solid var(--knf-line-2);color:var(--knf-ink)}
.big-btn:hover{background:var(--knf-paper-2);transform:none;box-shadow:var(--knf-sh-2)}
.big-btn:active{transform:translateY(1px)}
#btnCheckin,#btnCheckin:focus{background:var(--knf-red);border:1px solid var(--knf-red);color:#fff;
  box-shadow:0 2px 8px rgba(200,32,42,.3)}
#btnCheckin:hover{background:var(--knf-red-h);box-shadow:0 4px 14px rgba(200,32,42,.34)}
#btnCheckin.is-offline{background:#6B6A73;border-color:#6B6A73;box-shadow:none}
.big-btn-copy strong{font-weight:700}
#btnCheckin .big-btn-icon,#btnCheckin .big-btn-icon svg,#btnCheckin .big-btn-copy,
#btnCheckin .big-btn-copy strong{color:#fff;stroke:#fff}
#btnCheckin>span,#btnCheckin small,#checkinHint,
#btnCheckin .big-btn-copy>span,#btnCheckin .big-btn-copy p{color:rgba(255,255,255,.92)}
.big-btn .big-btn-copy>span{color:var(--knf-ink-3)}

/* Ô số liệu (dùng chung, admin ghi đè riêng bên dưới) */
.stat{background:#fff;border:1px solid var(--knf-line);border-radius:var(--knf-r-lg);padding:14px 16px;
  box-shadow:var(--knf-sh-1)}
.stat::before{display:none}
.stat span,#todayStats .stat span,#stats .stat span{font-size:11px;font-weight:650;letter-spacing:.07em;
  text-transform:uppercase;color:var(--knf-ink-4)}
.stat b,#todayStats .stat b,#stats .stat b{font-size:26px;font-weight:700;letter-spacing:-.03em;
  color:var(--knf-ink);line-height:1.15;margin-top:5px;display:block;
  word-break:break-word;overflow-wrap:anywhere}
#todayStats .stat,#stats .stat{background:#fff;border:1px solid var(--knf-line);border-radius:var(--knf-r-lg)}

/* ---------- Điện thoại ---------- */
@media (max-width:900px){
  .card{padding:16px;border-radius:var(--knf-r)}
  .card h2{font-size:14.5px;margin-bottom:13px}
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px;min-height:42px}
  input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0}
  .btn,.camera-pill-btn,.camera-native-btn{min-height:42px;font-size:14px}
  .small-btn{min-height:34px}
  .table th,.table td{padding:9px 11px}
  .stat b,#todayStats .stat b,#stats .stat b{font-size:20px}
  .stat span,#todayStats .stat span,#stats .stat span{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.power-save *,.power-save *::before,.power-save *::after{animation:none!important;transition:none!important}

@media print{
  .sidebar,.topbar,.mobile-bottom-nav,.privacy-footer,.btn,.filters{display:none!important}
  .card,.table-wrap{border:0;box-shadow:none;padding:0}
  .table th{background:#eee;color:#000}
  .table th,.table td{border:1px solid #ccc}
}