/* môtchut caphe — HRM chấm công. Tông màu ấm Will House + đỏ logo môtchut */
:root{
  --cream:#faf4ec; --cream2:#fffdf9; --card:#fffdf9; --card2:#f6ede0;
  --ink:#43301f; --ink2:#454f5e; --muted:#977f66; --line:#eaddcb;
  --brand:#fd9800; --brand2:#b4622d;         /* cam Will House -> đất nung */
  --red:#c1121c; --redsoft:#fbe9e8;          /* đỏ logo môtchut */
  --tan:#c6a685; --gold:#d9a24a;
  --ok:#2fa36b; --warn:#e0a500; --bad:#d1495b;
  --tile1:#fff1dd; --tile2:#ffe3d0; --tile3:#eef6ee; --tile4:#f1ecff;
  --r:20px; --shadow:0 12px 30px rgba(126,67,16,.14);
}
@media (prefers-color-scheme: dark){
  :root{ --cream:#1b130d; --cream2:#241a10; --card:#271c11; --card2:#33261a;
    --ink:#f5ece0; --ink2:#e4d7c6; --muted:#b39a80; --line:#3d2e1e;
    --redsoft:#3a1614;
    --tile1:#3a2a17; --tile2:#3d2418; --tile3:#22311f; --tile4:#282340;
    --shadow:0 12px 30px rgba(0,0,0,.4);}
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(253,152,0,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(193,18,28,.08), transparent 55%),
    var(--cream);
  color:var(--ink); min-height:100dvh; -webkit-font-smoothing:antialiased;
}
.app{max-width:520px; margin:0 auto; padding:0 16px calc(94px + env(safe-area-inset-bottom)); position:relative}

/* Header */
.top{display:flex; align-items:center; gap:12px; padding:18px 6px 12px}
.brandmark{height:38px}
.top .hello{font-size:16px;margin:0;font-weight:800;color:var(--ink)}
.top .sub{font-size:12px;color:var(--muted);margin-top:1px}
.top .spacer{flex:1}
.iconbtn{background:var(--card);border:1px solid var(--line);color:var(--ink);width:40px;height:40px;
  border-radius:13px;font-size:17px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:17px;margin:13px 0;box-shadow:var(--shadow)}
.card h2{font-size:15px;margin:0 0 12px;font-weight:800;color:var(--ink)}
.muted{color:var(--muted)} .small{font-size:12px}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between} .wrap{flex-wrap:wrap} .grow{flex:1}
.pill{font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;display:inline-block}
.pill.ok{background:color-mix(in srgb,var(--ok) 18%,var(--card));color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 20%,var(--card));color:#a97a00}
.pill.bad{background:var(--redsoft);color:var(--red)}
.pill.brand{background:color-mix(in srgb,var(--brand) 20%,var(--card));color:var(--brand2)}

/* Buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:16px;border-radius:15px;
  border:none;font-size:16px;font-weight:800;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 10px 22px rgba(253,152,0,.34)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--card2);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ok{background:linear-gradient(135deg,#37c98a,#1f9d66);box-shadow:0 10px 22px rgba(47,163,107,.3)}
.btn.red{background:linear-gradient(135deg,#e0424c,var(--red));box-shadow:0 10px 22px rgba(193,18,28,.3)}
.btn.sm{padding:11px 15px;font-size:14px;width:auto;border-radius:13px}
.btn[disabled]{opacity:.55}

/* Clock */
.clock{text-align:center;padding:6px 0 2px}
.clock .time{font-size:46px;font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.clock .date{color:var(--muted);font-size:13px;margin-top:2px}
.status{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:8px;font-size:13px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.dot.live{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 25%,transparent);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 40%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Inputs */
label.field{display:block;margin:11px 0}
label.field span{font-size:12px;color:var(--muted);display:block;margin-bottom:6px;font-weight:700}
input,textarea,select{width:100%;padding:13px;border-radius:13px;border:1px solid var(--line);
  background:var(--cream2);color:var(--ink);font-size:15px;font-family:inherit}
textarea{min-height:76px;resize:vertical}
.check{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:13px;margin:7px 0;background:var(--cream2)}
.check input{width:22px;height:22px;accent-color:var(--brand)}

/* Photo capture */
.photo-box{border:2px dashed var(--tan);border-radius:15px;padding:16px;text-align:center;background:var(--card2);margin:7px 0}
.photo-box .cam{font-size:34px}
.photo-box img{max-width:100%;border-radius:12px;margin-top:10px;box-shadow:var(--shadow)}
.photo-hint{font-size:12px;color:var(--muted);margin-top:4px}
.photos-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:10px}
.photos-grid img{width:74px;height:74px;object-fit:cover;border-radius:10px;margin:0;box-shadow:var(--shadow)}

/* Bàn phím PIN đăng nhập */
.pin-dots{text-align:center;font-size:26px;letter-spacing:4px;color:var(--brand2);min-height:34px;
  margin:4px 0 14px;font-weight:800}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:320px;margin:0 auto}
.key{padding:16px 0;font-size:22px;font-weight:800;border-radius:15px;border:1px solid var(--line);
  background:var(--cream2);color:var(--ink);cursor:pointer;box-shadow:var(--shadow)}
.key:active{transform:translateY(1px);background:var(--card2)}
.key-ok{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border:none;font-size:16px}
.key-sub{font-size:18px;color:var(--muted)}

/* Login grid */
.emps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.emp{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:17px;text-align:center;cursor:pointer;
  transition:transform .1s;box-shadow:var(--shadow)}
.emp:active{transform:scale(.97)}
.emp .av{width:56px;height:56px;border-radius:50%;margin:0 auto 9px;display:grid;place-items:center;font-weight:800;font-size:21px;color:#fff}
.emp .nm{font-weight:800;font-size:14px;color:var(--ink)}
.emp .rl{font-size:11px;color:var(--muted)}

/* Leaderboard */
.lb{display:flex;align-items:center;gap:12px;padding:13px;border-radius:15px;background:var(--card2);margin:9px 0}
.lb .rank{width:30px;text-align:center;font-weight:800;font-size:16px}
.lb .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff}
.lb .pts{font-weight:800;color:var(--brand2)}
.lb.gold{background:linear-gradient(135deg,#fff3d6,var(--card2));border:1px solid var(--gold)}
.lb.silver{background:linear-gradient(135deg,#f0f0f4,var(--card2));border:1px solid #c9cdd6}
.lb.bronze{background:linear-gradient(135deg,#f7e4d3,var(--card2));border:1px solid #d9a373}

/* Tam giác thi đua "Đường lên đỉnh" */
.pyramid-wrap{position:relative;height:358px;margin:10px 0 4px}
.pyramid-tri{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  width:100%;height:286px;
  background:linear-gradient(180deg,#ffd98a,#fd9800 55%,#b4622d);
  clip-path:polygon(50% 0,0 100%,100% 100%);opacity:.92;
  box-shadow:0 14px 30px rgba(180,98,45,.3)}
.pyramid-tri .stripe{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.28)}
.peak-flag{position:absolute;left:50%;top:-6px;transform:translateX(-50%);text-align:center;z-index:3}
.peak-flag .f{font-size:26px;line-height:1}
.peak-flag .p{font-size:11px;font-weight:800;color:var(--brand2);background:var(--cream2);
  padding:2px 8px;border-radius:999px;border:1px solid var(--line);display:inline-block;margin-top:2px}
.peak-flag .champ{font-size:12px;font-weight:900;letter-spacing:.5px;color:#fff;
  background:linear-gradient(135deg,#e0424c,var(--red));padding:4px 12px;border-radius:999px;
  display:inline-block;box-shadow:0 6px 14px rgba(193,18,28,.4);white-space:nowrap}
.base-line{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:11px;color:var(--muted);z-index:4}
.climber{position:absolute;transform:translateX(-50%);text-align:center;z-index:2;transition:bottom .8s cubic-bezier(.34,1.2,.5,1),left .8s ease}
.climber .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;
  font-size:15px;border:3px solid var(--cream2);box-shadow:0 6px 14px rgba(0,0,0,.28);margin:0 auto}
.climber .nm{font-size:10px;font-weight:800;color:var(--ink);margin-top:3px;white-space:nowrap;
  background:var(--cream2);padding:1px 6px;border-radius:999px;box-shadow:var(--shadow)}
.climber .crown{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:18px}
.climber.me .av{border-color:var(--red)}

/* Ô chi tiết nhân viên (overlay) */
.overlay{position:fixed;inset:0;background:rgba(30,20,10,.55);z-index:150;display:flex;align-items:flex-start;
  justify-content:center;overflow:auto;padding:34px 14px;backdrop-filter:blur(3px)}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;max-width:460px;width:100%;box-shadow:var(--shadow)}
.member{cursor:pointer}

/* Thanh mục tiêu đội */
.teambar{height:12px;border-radius:999px;background:var(--card2);overflow:hidden;margin-top:5px;border:1px solid var(--line)}
.teambar-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--ok));border-radius:999px;transition:width .8s ease}

/* Lịch tháng */
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:10px 0 5px}
.cal-head div{text-align:center;font-size:11px;font-weight:700;color:var(--muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-cell{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--card2);border:1px solid var(--line)}
.cal-cell .cal-d{font-size:13px;font-weight:700;color:var(--ink)}
.cal-cell .cal-sub{font-size:9px;color:var(--muted);margin-top:1px}
.cal-cell.future{opacity:.45}
.cal-cell.nodata{background:var(--cream2)}
.cal-cell.g{background:color-mix(in srgb,var(--ok) 30%,var(--card2))}
.cal-cell.b{background:color-mix(in srgb,#4f9cff 30%,var(--card2))}
.cal-cell.y{background:color-mix(in srgb,var(--warn) 32%,var(--card2))}
.cal-cell.r{background:color-mix(in srgb,var(--bad) 26%,var(--card2))}
.cal-cell.today{border:2px solid var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.cal-cell.today .cal-d{color:var(--brand2)}
.cal-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;font-size:11px;color:var(--muted)}
.cal-legend span{display:flex;align-items:center;gap:4px}
.cal-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.cal-legend i.g{background:var(--ok)} .cal-legend i.b{background:#4f9cff}
.cal-legend i.y{background:var(--warn)} .cal-legend i.r{background:var(--bad)}
.cal-legend i.nodata{background:var(--cream2);border:1px solid var(--line)}

/* Hàng thành viên + % */
.members-row{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 6px}
.member{flex:0 0 auto;text-align:center;width:60px}
.member .mnm{font-size:11px;font-weight:700;color:var(--ink);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member .mpct{font-size:13px;font-weight:800}
.member.me .mnm{color:var(--red)}

/* Hàng công việc (ô tick + camera + ảnh) */
.task-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--line)}
.task-row:last-of-type{border-bottom:none}
.task-thumb{width:40px;height:40px;object-fit:cover;border-radius:9px;flex:none;border:1px solid var(--line)}

/* Thẻ ca làm */
.ca-card{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin:9px 0}
.ca-card.live{border-color:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}

/* Stat tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tile{border-radius:15px;padding:15px}
.tile:nth-child(1){background:var(--tile1)} .tile:nth-child(2){background:var(--tile2)}
.tile:nth-child(3){background:var(--tile3)} .tile:nth-child(4){background:var(--tile4)}
.tile .n{font-size:25px;font-weight:800;color:var(--ink)}
.tile .l{font-size:11px;color:var(--muted);margin-top:2px}

/* Tabbar */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--cream2) 88%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:9px 0 calc(9px + env(safe-area-inset-bottom))}
.tabbar .inner{max-width:520px;margin:0 auto;display:flex}
.tab{flex:1;background:none;border:none;color:var(--muted);font-size:10.5px;font-weight:700;
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.tab .ic{font-size:20px}
.tab.active{color:var(--brand2)}
.tab.active .ic{transform:translateY(-1px)}

/* Misc */
.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);background:#3a2c20;color:#fff;
  padding:13px 19px;border-radius:13px;font-size:14px;z-index:99;box-shadow:var(--shadow);max-width:90%;text-align:center}
.hidden{display:none !important} .center{text-align:center}
.divider{height:1px;background:var(--line);margin:13px 0}
.list-item{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.list-item:last-child{border-bottom:none}
.mini-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;font-size:13px;flex:none}
.thumb{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none;border:1px solid var(--line)}
a{color:var(--brand2)}

/* -------------------- KHO NGUYÊN LIỆU -------------------- */
.khotabs{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.khotab{flex:none;background:var(--card2);border:1px solid var(--line);color:var(--muted);
  padding:9px 14px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap}
.khotab.active{background:var(--brand);border-color:var(--brand);color:#fff}
.warncard{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,var(--card))}
.txt-warn{color:var(--bad)} .txt-ok{color:var(--ok)}
.ingrow{display:flex;gap:6px;align-items:center;margin:7px 0;flex-wrap:wrap}
.ingrow input{flex:1;min-width:82px}
.ingrow .w-unit{flex:none;width:58px} .ingrow .w-num{flex:none;width:74px}
.w-code{flex:none;width:92px} .w-count{flex:none;width:72px;text-align:right}
.countrow{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}
.countrow>.small{flex:none;min-width:22px}
.countrow:last-of-type{border-bottom:none}
.recipe{border:1px solid var(--line);border-radius:13px;padding:11px;margin:9px 0;background:var(--cream2)}

/* -------- Kho: ô tìm kiếm + nhóm xổ/thu TÔ MÀU CẢ KHỐI -------- */
.searchbox{display:flex;align-items:center;gap:9px;background:var(--cream2);
  border:1px solid var(--line);border-radius:13px;padding:2px 8px 2px 13px}
.searchbox input{flex:1;min-width:0;border:none;background:none;outline:none;
  padding:12px 0;font-size:15px;color:var(--ink);-webkit-appearance:none}
.searchbox input::-webkit-search-cancel-button{display:none}
.searchbox .iconbtn{width:34px;height:34px;flex:none;border:none;background:none}

/* Cả thẻ nhóm mang màu của nhóm: đầu mục nền đậm, phần nội dung nền nhạt cùng tông */
.gcard{padding:0;overflow:hidden;border:1px solid var(--gc);
  box-shadow:0 10px 24px color-mix(in srgb,var(--gc) 22%,transparent)}
.ghead{display:flex;align-items:center;gap:9px;width:100%;padding:15px;
  background:var(--gc);color:var(--gtext);border:none;text-align:left;font-family:inherit}
.ghead:active{filter:brightness(.93)}
.gname{font-weight:800;font-size:16px;letter-spacing:.2px}
.gmeta{margin-left:auto;font-size:12px;font-weight:700;opacity:.85}
.gbadge{font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;
  background:rgba(0,0,0,.22);color:var(--gtext)}
.gcaret{font-size:11px;width:13px;text-align:center;flex:none;opacity:.9}
.gbody{background:color-mix(in srgb,var(--gc) 13%,var(--card));padding:4px 15px 10px}
.gbody .muted{color:color-mix(in srgb,var(--ink) 62%,var(--gc))}
.ing-item:last-child .row,.ing-item:last-child .countrow{border-bottom:none}

/* -------------------- LỊCH LÀM VIỆC --------------------
   Bảng lưới: hàng = nhân viên, cột = 7 ngày. Điện thoại hẹp nên cột tên phải DÍNH
   bên trái (position:sticky) — cuốn ngang xem ngày cuối tuần vẫn biết đang xem ai. */
/* KHÔNG đặt padding/margin âm ở đây: cột dính (sticky) neo vào mép TRONG của vùng cuộn,
   nên dải padding bên trái sẽ để lọt nội dung ô khác trượt qua, đè lên cột tên ca. */
.lich-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lich-bang{border-collapse:separate;border-spacing:3px;width:100%}
.lich-bang th,.lich-bang td{text-align:center;white-space:nowrap;padding:0;font-size:12px}
.lich-bang th{font-weight:800;color:var(--muted);font-size:11px;line-height:1.25;padding-bottom:3px}
.lich-nho{font-size:10px;font-weight:600}
/* Cột đầu = tên ca. Dính bên trái để cuộn ngang vẫn biết đang xem ca nào. */
/* box-shadow bịt khe 3px của border-spacing bên phải — không thì ô kế bên lòi qua khe. */
.lich-ten{text-align:left !important;position:sticky;left:0;z-index:2;
  background:var(--card);box-shadow:3px 0 0 var(--card);
  padding-right:7px !important;width:72px;min-width:72px;
  white-space:normal !important;line-height:1.2}
.lich-ten b{font-size:12px}
.lich-ten .lich-nho{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lich-bang th.lich-homnay{color:#fff;background:var(--brand);border-radius:9px;padding:3px 4px}
.cham{width:8px;height:8px;border-radius:50%;flex:none}

/* Ô = 1 ca × 1 ngày: khung nét đứt như iPOS HRM, bên trong xếp chồng tên người + nút ＋ */
.lich-o2{display:flex;flex-direction:column;gap:4px;align-items:stretch;
  min-width:96px;min-height:46px;padding:5px;border-radius:11px;
  border:1px dashed var(--line);background:var(--cream2)}
.lich-thieu-o .lich-o2{border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}

/* Tên 1 người trong ô — nút khi sửa được, chữ chết khi chỉ được xem (nhìn y hệt nhau) */
.nguoichip{display:block;width:100%;padding:5px 6px;border-radius:8px;font-family:inherit;
  font-size:11px;font-weight:800;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  background:color-mix(in srgb,var(--c) 20%,var(--card));color:var(--c);border:1px solid var(--c)}
button.nguoichip{cursor:pointer}
button.nguoichip:active{transform:scale(.94)}
span.nguoichip{cursor:default}
.nguoichip-toi{box-shadow:0 0 0 2px var(--brand)}
/* Tự xin, quản lý chưa duyệt */
.nguoichip.sch-xin{background:transparent;border-style:dashed;border-width:2px;opacity:.8}

.lich-them{width:100%;padding:4px;border-radius:8px;border:1px dashed var(--line);
  background:transparent;color:var(--muted);font-size:14px;font-weight:800;
  font-family:inherit;cursor:pointer;line-height:1.1}
.lich-them:active{transform:scale(.94)}
.lich-them-on{background:var(--brand);border-color:var(--brand);color:#fff;border-style:solid}

/* Dải 7 ngày của riêng mình */
.daystrip{display:flex;gap:5px;margin-top:4px}
.daychip{flex:1;min-width:0;text-align:center;padding:7px 2px;border-radius:11px;
  border:1px solid var(--line);background:var(--cream2);color:var(--muted);font-size:12px;font-weight:800}
.daychip .dc-dow{display:block;font-size:10px;font-weight:600;opacity:.8;margin-bottom:2px}
.daychip-today{box-shadow:0 0 0 2px var(--brand)}
.daychip.sch-ca1{background:var(--tile1);color:#8a5a10;border-color:#e9c184}
.daychip.sch-ca2{background:var(--tile4);color:#4b3ba8;border-color:#c3bbf0}
.daychip.sch-ca3{background:var(--tile3);color:#1f6d47;border-color:#9fd3b6}
.daychip.sch-nhieu{background:var(--brand);color:#fff;border-color:var(--brand)}
.daychip.sch-xin{border-style:dashed;border-width:2px;opacity:.72}
/* Nền tile ở chế độ tối là màu ĐẬM — chữ nâu/tím/xanh đậm ở trên sẽ không đọc nổi */
@media (prefers-color-scheme: dark){
  .lich-o.sch-ca1,.daychip.sch-ca1{color:#f0c489;border-color:#6b4a1c}
  .lich-o.sch-ca2,.daychip.sch-ca2{color:#c3bbf0;border-color:#463c78}
  .lich-o.sch-ca3,.daychip.sch-ca3{color:#8fd8b0;border-color:#2c5c42}
}

/* -------------------- BẢNG LƯƠNG -------------------- */
.luongdong{display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.luongdong:last-of-type{border-bottom:none}
.luongdong span{color:var(--muted)}

/* -------------------- BẢNG CHẤM CÔNG (kiểu iPOS) --------------------
   Ô trạng thái: chấm vuông bo góc, 3 cái xếp dọc trong 1 ngày = 3 ca.
   Màu phải phân biệt được cả khi mù màu đỏ-lục ⇒ ĐỎ dùng thêm viền đậm,
   và mọi ô đều có title (chạm giữ hiện chữ) + bảng chi tiết ghi rõ chữ. */
.cc-cot{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;
  width:100%;min-width:40px;min-height:46px;padding:6px 3px;border-radius:10px;
  border:1px dashed var(--line);background:var(--cream2);cursor:pointer;font-family:inherit}
.cc-cot:active{transform:scale(.94)}
.cc-o{display:block;width:22px;height:9px;border-radius:3px;background:var(--line);flex:none}
.cc-xanh {background:var(--ok)}
.cc-cam  {background:var(--warn)}
.cc-do   {background:var(--bad);box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 35%,transparent)}
.cc-ngoc {background:#2bb3a3}
.cc-duong{background:#4b7bd8}
.cc-xam  {background:color-mix(in srgb,var(--muted) 40%,transparent)}

/* Nhãn chữ trong bảng chi tiết — KHÔNG chỉ dựa vào màu để truyền tin */
.cc-nhan{display:inline-block;padding:4px 11px;border-radius:999px;
  font-size:12px;font-weight:800;color:#fff}
.cc-nhan.cc-xam{color:var(--ink)}

/* Chú thích màu dưới lưới */
.cc-chu{display:flex;flex-wrap:wrap;gap:5px 13px;margin-top:11px}
.cc-chu-i{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.cc-chu-i .cc-o{width:14px;height:8px}

/* Nút chữ nhỏ (xoá phiếu lương...) */
.linkbtn{background:none;border:none;color:var(--bad);font-size:11px;font-weight:700;
  font-family:inherit;cursor:pointer;padding:2px 6px;text-decoration:underline}

/* Ô chọn chức vụ trong danh sách nhân viên */
.chonchucvu{margin-top:5px;padding:5px 8px;font-size:12px;font-weight:700;
  border-radius:9px;width:auto;min-width:110px}

/* Chuyển kỳ Tuần / Tháng ở bảng chấm công */
.ccky{display:flex;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;width:fit-content}
.ccky-n{padding:7px 20px;border:none;background:var(--cream2);color:var(--muted);
  font-size:13px;font-weight:800;font-family:inherit;cursor:pointer}
.ccky-n.on{background:var(--brand);color:#fff}
/* Chế độ tháng: 28–31 cột nên ô phải hẹp lại, cuộn ngang */
.cc-cot.cc-hep{min-width:26px;padding:5px 2px;gap:2px}
.cc-cot.cc-hep .cc-o{width:15px;height:7px}

/* ============================================================
   MÀN HÌNH LỚN (máy tính / máy tính bảng nằm ngang)
   App vốn dựng cho điện thoại (.app max-width 520px) nên mở trên PC
   nó nằm bé tí giữa màn hình. Từ 900px trở lên thì:
     • thanh tab dưới → CỘT ĐIỀU HƯỚNG bên trái (bấm chuột dễ hơn, không che nội dung)
     • nội dung rộng ra, thẻ số liệu dàn nhiều cột
     • bảng lưới (chấm công / lịch) được rộng hơn nên đỡ phải cuộn ngang
   TẤT CẢ nằm trong media query — điện thoại KHÔNG bị đụng tới một dòng nào.
   ============================================================ */
@media (min-width: 900px){
  .app{ max-width:1040px; margin-left:236px; margin-right:auto;
        padding:0 26px 40px; }

  /* Thanh điều hướng dọc bên trái */
  .tabbar{ top:0; right:auto; bottom:0; width:220px;
           border-top:none; border-right:1px solid var(--line);
           padding:18px 12px; overflow-y:auto; }
  .tabbar .inner{ max-width:none; flex-direction:column; gap:4px; }
  .tab{ flex:none; flex-direction:row; justify-content:flex-start; gap:12px;
        font-size:14px; padding:12px 14px; border-radius:13px; text-align:left; }
  .tab .ic{ font-size:20px; }
  .tab.active{ background:color-mix(in srgb,var(--brand) 14%,transparent); }
  .tab.active .ic{ transform:none; }

  /* Thẻ số liệu: 2 cột trên điện thoại → 4 cột trên PC */
  .tiles, .stat-grid{ grid-template-columns:repeat(4,1fr); }
  .emps{ grid-template-columns:repeat(4,1fr); }

  /* Bảng lưới rộng hết khung, ô to hơn cho dễ bấm bằng chuột */
  .lich-ten{ width:150px; min-width:150px; }
  .lich-ten b{ font-size:13px; }
  .cc-cot{ min-width:52px; min-height:54px; }
  .cc-cot.cc-hep{ min-width:30px; }
  .lich-o{ min-width:52px; padding:11px 4px; font-size:13px; }
  .lich-o2{ min-width:118px; }

  /* Nút bấm bằng chuột không cần cao như ngón tay, và KHÔNG nên dài hết 1180px
     (nút "Check-in" trải ngang cả màn hình trông rất kỳ). Chỉ bó nút là con TRỰC TIẾP
     của card — nút nằm trong .row vẫn tự do co giãn theo hàng của nó. */
  .btn{ padding:13px; font-size:15px; }
  .card > .btn{ max-width:460px; margin-left:auto; margin-right:auto; }
  .card > .btn.block{ max-width:460px; }

  /* Khối chữ dài đọc mỏi mắt khi trải 1180px — bó lại cho dễ đọc */
  .card > p, .card > .muted{ max-width:780px; }

  /* Toast hiện góc dưới phải thay vì giữa màn hình */
  .toast{ left:auto; right:26px; bottom:26px; transform:none; }

  /* Ảnh báo cáo xem lớn hơn */
  .photos-grid img{ width:104px; height:104px; }
}

/* Màn rất rộng (≥1400px): cho nội dung thở thêm chút nữa */
@media (min-width: 1400px){
  .app{ max-width:1180px; }
  .tiles, .stat-grid{ grid-template-columns:repeat(6,1fr); }
}

/* Ảnh báo cáo tự do trong ca — có nút xoá ở góc */
.anh-o{position:relative;display:inline-block}
.anh-xoa{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--card);background:var(--bad);color:#fff;font-size:11px;font-weight:800;
  line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}

/* Nút đăng ký ca của chính mình — đã đăng ký thì nổi bật hẳn lên */
.lich-them.dk-cua-toi{background:var(--ok);border-color:var(--ok);color:#fff;border-style:solid}
/* Nghỉ có phép — vàng, để phân biệt hẳn với đỏ "quên check-in" */
.cc-vang{background:var(--gold)}

/* Avatar + tên ở header = lối vào Hồ sơ (đã bỏ tab "Hồ sơ" dưới thanh) */
.nut-hoso{display:flex;align-items:center;gap:12px;background:none;border:none;padding:5px 7px;
  border-radius:15px;cursor:pointer;font-family:inherit;color:inherit;text-align:right}
.nut-hoso:active{transform:scale(.97)}
.nut-hoso.on{background:color-mix(in srgb,var(--brand) 15%,transparent)}
.nut-hoso.on img,.nut-hoso.on>div:first-child{box-shadow:0 0 0 2px var(--brand)}
/* Điện thoại: giữ 1 dòng, giấu dòng chức vụ cho khỏi xuống hàng vỡ header */
@media (max-width:520px){
  .nut-hoso{gap:8px;padding:4px 6px;min-width:0;flex:0 1 auto}
  .nut-hoso>div{min-width:0}
  .nut-hoso .hello{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
  .nut-hoso .sub{display:none}
  .nut-hoso .chao-pre{display:none}   /* màn hẹp: chỉ để tên, khỏi bị cắt mất */
  .top .brandmark{flex:0 0 auto}
}

/* ============ NHẬT KÝ THAO TÁC (nhatky.js) ============ */
.nk-dieu-huong{display:flex;align-items:center;gap:10px}
.nk-dieu-huong .btn{min-width:44px}          /* đủ to để bấm bằng ngón cái */
.nk-ngay{padding-top:14px;padding-bottom:14px}

.nk-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.chip{font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card2);color:var(--fg);font-family:inherit;white-space:nowrap}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#1a1207}

.nk-dong{align-items:flex-start;gap:10px}
.nk-gio{font-variant-numeric:tabular-nums;font-weight:800;font-size:12px;opacity:.75;
  min-width:42px;padding-top:2px}
.pill.nk-khu{background:color-mix(in srgb,var(--brand) 18%,transparent);
  color:var(--brand);border:1px solid color-mix(in srgb,var(--brand) 35%,transparent)}
/* "từ gì → sang gì": cũ gạch mờ, mới đậm — liếc là thấy đổi cái gì */
.nk-doi{font-size:13px;margin-top:3px;word-break:break-word}
.nk-truoc{opacity:.6;text-decoration:line-through}
.nk-sau{font-weight:700}