:root{
  --blue:#2f6bff; --blue-d:#1f56e0; --bg:#eef1f6; --card:#fff;
  --text:#1b2330; --muted:#8a93a3; --line:#eceff4; --ok:#15b56a; --err:#e5484d;
  --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:16px; line-height:1.4;
}
.wrap{max-width:440px; margin:0 auto; min-height:100vh; background:var(--card);
  display:flex; flex-direction:column; box-shadow:0 0 40px rgba(20,30,50,.05)}
.card{background:var(--card); border-radius:var(--radius); }
.pad{padding:20px 22px}

/* Header */
.app-head{text-align:center; padding:22px 20px 4px}
.app-head h1{color:var(--blue); font-size:19px; margin:0 0 3px; font-weight:700;
  letter-spacing:-.2px}
.app-head .date{color:var(--muted); font-weight:500; font-size:13px; letter-spacing:.2px}
.clock{color:var(--text); font-size:37px; font-weight:700; text-align:center;
  letter-spacing:.5px; padding:10px 0 6px; font-variant-numeric:tabular-nums}

/* Field rows (kiểu harawork, tinh gọn) — dải phân cách thụt vào cho tinh tế */
.field{position:relative; display:flex; align-items:center; gap:12px; padding:11px 20px}
.field + .field::before{content:""; position:absolute; top:0; left:64px; right:20px;
  height:1px; background:var(--line)}
.field .ico{width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; color:#8b95a6;
  background:#f5f7fb}
.field .ico svg{width:18px; height:18px}
.field .body{flex:1; min-width:0}
.field label{display:block; color:var(--muted); font-size:12px; margin-bottom:1px}
.field select,.field input,.field textarea{
  width:100%; border:none; outline:none; background:transparent; font-size:15px;
  color:var(--text); font-weight:500; padding:1px 0; resize:none; font-family:inherit;
  line-height:1.35}
/* Bỏ mũi tên mặc định của <select> (đã có mũi tên .chev riêng) */
.field select{appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:none; padding-right:4px}
.field select::-ms-expand{display:none}
.field .chev{width:17px; height:17px; color:#c2c9d4; flex:0 0 17px}
.field select:disabled,.field textarea:disabled{color:#98a1b0;
  -webkit-text-fill-color:#98a1b0; opacity:1; cursor:default}
.field.locked .chev{display:none}

/* Quote box */
.quote{margin:16px 20px 0; background:#f5f7fb; border-radius:12px; padding:12px 16px;
  text-align:center; color:#828b99; font-size:13px; line-height:1.5}

/* Buttons */
.btn{display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; border:none; border-radius:14px; padding:13px; font-size:16px;
  font-weight:600; cursor:pointer; color:#fff; background:var(--blue);
  box-shadow:0 4px 12px rgba(47,107,255,.18); transition:filter .15s, box-shadow .15s}
.btn svg{width:19px; height:19px}
.btn:active{filter:brightness(.94)}
.btn[disabled]{opacity:.55; cursor:not-allowed; box-shadow:none}
.btn.ghost{background:transparent; color:var(--blue); font-weight:600; box-shadow:none}
.btn.out{background:#f0663c; box-shadow:0 4px 12px rgba(240,102,60,.18)}
.btn.gray{background:#6b7482; box-shadow:none}
.actions{padding:16px 20px 4px}
.link-center{text-align:center; padding:8px 0 20px; font-size:13.5px}
.link-center a{color:var(--blue); font-weight:600; text-decoration:none}

/* Status banner */
.banner{margin:14px 22px 0; padding:12px 14px; border-radius:12px; font-size:14px;
  font-weight:600}
.banner.ok{background:#e6f7ee; color:#0f8c50}
.banner.err{background:#fdeaea; color:#c23a3e}
.banner.warn{background:#fff5e6; color:#b26a00}

/* Login */
.login-box{max-width:360px; margin:9vh auto; padding:0 24px}
.login-box h1{color:var(--blue); text-align:center; font-size:24px; margin-bottom:4px;
  letter-spacing:-.2px}
.login-box p.sub{text-align:center; color:var(--muted); margin-top:0; margin-bottom:24px;
  font-size:14px}
.input-group{margin-bottom:14px}
.input-group label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
.input-group input{width:100%; padding:13px 14px; border:1px solid #e1e5ec; border-radius:12px;
  font-size:15.5px; outline:none; transition:border-color .15s}
.input-group input:focus{border-color:var(--blue)}

/* Camera / liveness */
.cam-wrap{position:relative; width:100%; aspect-ratio:3/4; background:#000;
  border-radius:20px; overflow:hidden; margin:0 auto}
.cam-wrap video,.cam-wrap canvas{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover}
.cam-wrap video{transform:scaleX(-1)}
.cam-oval{position:absolute; inset:8% 14%; border:3px dashed rgba(255,255,255,.8);
  border-radius:50%; pointer-events:none; transition:border-color .2s}
.cam-oval.good{border-color:var(--ok); border-style:solid}
.step-pill{position:absolute; top:12px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.55); color:#fff; padding:7px 14px; border-radius:18px;
  font-weight:600; font-size:13.5px; white-space:nowrap; backdrop-filter:blur(2px)}
.arrow{position:absolute; top:50%; transform:translateY(-50%); font-size:44px;
  color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5); animation:pulse 1s infinite;
  transition:left .25s ease, right .25s ease, top .25s ease, bottom .25s ease}
.arrow.left{left:12px} .arrow.right{right:12px}
.arrow.side{left:50%; transform:translate(-50%,-50%)}
.arrow.up{top:14px; left:50%; transform:translateX(-50%)}
.arrow.down{top:auto; bottom:14px; left:50%; transform:translateX(-50%); animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.dots{display:flex; gap:7px; justify-content:center; margin:14px 0}
.dot{width:9px; height:9px; border-radius:50%; background:#dbe0e8; transition:background .2s}
.dot.done{background:var(--ok)}
.dot.active{background:var(--blue)}
.enroll-title{text-align:center; padding:18px 20px 2px}
.enroll-title h2{margin:0 0 4px; color:var(--blue); font-size:19px; font-weight:700}
.enroll-title p{margin:0; color:var(--muted); font-size:13px; line-height:1.5}

/* Màn quét khuôn mặt toàn màn hình (kiểu harawork) */
.scan{position:fixed; inset:0; z-index:50; background:#000; overflow:hidden}
.scan video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
.scan-shade{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0) 26%, rgba(0,0,0,0) 58%, rgba(0,0,0,.6))}
.scan-x{position:absolute; top:16px; left:16px; width:40px; height:40px; border:none;
  border-radius:50%; background:rgba(255,255,255,.2); color:#fff; font-size:17px; cursor:pointer;
  z-index:4; display:flex; align-items:center; justify-content:center; text-decoration:none}
.scan-rec{position:absolute; top:24px; right:22px; width:12px; height:12px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.25); animation:pulse 1.3s infinite; z-index:4}
/* Vòng tròn quét (thay cho elip) */
.scan-ring{position:absolute; top:44%; left:50%; transform:translate(-50%,-50%);
  width:72vw; max-width:300px; aspect-ratio:1/1; border-radius:50%;
  border:4px dashed rgba(255,255,255,.85); z-index:2; transition:border-color .3s, box-shadow .3s}
.scan-ring.good{border-color:var(--ok); border-style:solid; box-shadow:0 0 0 4px rgba(21,181,106,.22)}
.scan-title{color:#fff; font-size:15px; font-weight:700; margin-bottom:6px;
  text-shadow:0 1px 6px rgba(0,0,0,.55)}
.scan-help{margin:16px auto 0; max-width:360px}
.scan-frame{position:absolute; top:46%; left:50%; transform:translate(-50%,-50%);
  width:76vw; max-width:330px; aspect-ratio:1/1.35; z-index:2; color:#fff; transition:color .25s}
.scan-frame.good{color:var(--ok)}
.scan-frame .cnr{position:absolute; width:42px; height:42px; overflow:visible}
.scan-frame .cnr path{fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.scan-frame .cnr.tl{top:0; left:0}
.scan-frame .cnr.tr{top:0; right:0; transform:scaleX(-1)}
.scan-frame .cnr.bl{bottom:0; left:0; transform:scaleY(-1)}
.scan-frame .cnr.br{bottom:0; right:0; transform:scale(-1,-1)}
.scan-bottom{position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:22px 24px calc(34px + env(safe-area-inset-bottom)); text-align:center}
.scan-step{color:#fff; font-size:18px; font-weight:500; line-height:1.45;
  text-shadow:0 1px 6px rgba(0,0,0,.55)}
.scan-step b{font-weight:700}
.scan-err{margin:12px auto 0; max-width:340px; color:#fff; background:rgba(229,72,77,.92);
  padding:11px 14px; border-radius:12px; font-weight:600; font-size:14.5px; line-height:1.4}
.scan .dots{margin-top:16px}
.scan .dot{background:rgba(255,255,255,.4)}
.scan .dot.done{background:var(--ok)} .scan .dot.active{background:#fff}

/* History table */
.hist{padding:4px 0 28px}
.hist .row{display:flex; justify-content:space-between; align-items:center;
  padding:13px 20px; border-top:1px solid var(--line)}
.hist .k{font-weight:600; font-size:14px}
.hist .k.in{color:var(--ok)} .hist .k.out{color:#f0663c}
.hist .meta{color:var(--muted); font-size:12.5px}
.hist .t{font-weight:600; font-variant-numeric:tabular-nums}

/* Lịch sử kiểu Harawork */
.hist-wrap{padding:12px 16px 20px}
.sum-card{background:#eafaf0; border:1px solid #cdeed9; border-radius:16px; padding:15px 18px}
.sum-card .lbl{color:#0f8c50; font-size:12px; font-weight:700; letter-spacing:.3px}
.sum-card .big{color:#0f8c50; font-size:34px; font-weight:800; margin-top:2px; line-height:1.1}
.sum-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.sum-stat{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 8px; text-align:center}
.sum-stat .n{font-size:20px; font-weight:800; color:var(--text)}
.sum-stat .t{font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.3}
.day-head{color:var(--muted); font-weight:700; font-size:12px; letter-spacing:.4px; text-align:center;
  background:#f1f3f7; border-radius:10px; padding:8px; margin:18px 0 10px}
.day-card{border:1px solid var(--line); border-radius:16px; padding:15px 16px;
  box-shadow:0 2px 10px rgba(20,30,50,.04)}
.dc-head{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.dc-shift{color:var(--blue); font-weight:800; font-size:13.5px; text-transform:uppercase;
  line-height:1.35; flex:1}
.dc-badge{font-size:11px; font-weight:700; padding:4px 11px; border-radius:20px; white-space:nowrap}
.dc-badge.ok{background:#e6f7ee; color:#0f8c50}
.dc-badge.open{background:#fff4e5; color:#c47f17}
.dc-time{display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; margin:11px 0 2px}
.dc-time svg{width:18px; height:18px; color:var(--muted); flex:0 0 18px}
.dc-tag{display:inline-block; background:#eaf2ff; color:var(--blue); font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:20px; margin-left:auto}
.dc-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--line)}
.dc-cell .k{color:var(--muted); font-size:11.5px; margin-bottom:2px; letter-spacing:.2px}
.dc-cell .v{font-weight:600; font-size:14px; font-variant-numeric:tabular-nums}
.dc-cell .v.in{color:var(--ok)} .dc-cell .v.out{color:#f0663c}
.tag-late{color:var(--err); font-weight:600; font-size:12.5px}
.tag-early{color:#d98016; font-weight:600; font-size:12.5px}
.dc-note{margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
  color:#6b7482; font-size:13px}

/* Admin */
.admin{max-width:1000px; margin:0 auto; background:var(--card); min-height:100vh}
.admin-head{display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; border-bottom:1px solid var(--line)}
.admin-head h1{font-size:20px; margin:0; color:var(--blue)}
.tabs{display:flex; gap:6px; flex-wrap:wrap; padding:12px 22px; border-bottom:1px solid var(--line)}
.tab{padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:600; color:var(--muted)}
.tab.active{background:var(--blue); color:#fff}
.panel{padding:18px 22px; display:none}
.panel.active{display:block}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-weight:600; font-size:13px}
.tbtn{border:none; background:var(--blue); color:#fff; padding:7px 12px; border-radius:8px;
  cursor:pointer; font-size:13px; font-weight:600}
.tbtn.del{background:var(--err)} .tbtn.gray{background:#5b6473}
.tinput{padding:8px 10px; border:1px solid #d9dee7; border-radius:8px; font-size:14px; width:100%}
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.hidden{display:none!important}
.thumb{width:44px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--line); cursor:pointer}

/* Thẻ nhân viên (khối) */
.emp-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.emp-card{border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:#fff}
.emp-card.off{opacity:.58}
.emp-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap}
.emp-name{font-weight:700; font-size:15px}
.emp-sub{color:var(--muted); font-size:13px; margin-top:2px}
.badge{display:inline-block; background:#eaf0ff; color:var(--blue); font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:20px; vertical-align:middle}
.emp-checks{display:flex; flex-wrap:wrap; gap:14px; margin:12px 0}
.emp-checks label{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; cursor:pointer}
.emp-checks label.ro{color:var(--muted); cursor:default}
.emp-checks input{width:17px; height:17px; accent-color:var(--blue)}
.emp-actions{display:flex; gap:8px; flex-wrap:wrap}

/* Ảnh khuôn mặt trong dialog sửa nhân viên */
.emp-modal{width:420px; max-width:100%; max-height:88vh; overflow-y:auto}
.face-thumbs{display:flex; gap:8px; flex-wrap:wrap}
.face-fig{margin:0; text-align:center}
.face-thumb{width:62px; height:78px; object-fit:cover; border-radius:8px; border:1px solid var(--line); cursor:pointer}
.face-fig figcaption{font-size:11px; color:var(--muted); margin-top:3px}
.muted-txt{color:var(--muted); font-size:13px}

/* Bảng cuộn ngang trên màn nhỏ */
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tbl-scroll table{width:auto; min-width:100%; white-space:nowrap}

/* Responsive điện thoại */
@media (max-width:640px){
  .admin-head{flex-wrap:wrap; gap:8px; padding:12px 14px}
  .admin-head h1{font-size:18px}
  .tabs{padding:10px 12px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch}
  .tab{white-space:nowrap}
  .panel{padding:14px 12px}
  .emp-list{grid-template-columns:1fr}
  .toolbar{gap:8px}
  .toolbar .tinput{flex:1 1 140px; width:auto!important}
}

/* Kéo-thả danh mục */
.drag{cursor:grab; color:#9aa3b2; font-size:20px; user-select:none; padding:0 4px}
.drag:active{cursor:grabbing}
.cat-row.drop-target{outline:2px dashed var(--blue); outline-offset:-2px; background:#f2f6ff}
.hint-drag{color:var(--muted); font-size:13px; margin:0 0 10px}
.dirty-hint{color:#b26a00; font-size:13px; font-weight:600}
.spinner{width:22px;height:22px;border:3px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.center-msg{text-align:center; padding:40px 20px; color:var(--muted)}