/* Chấm Công Quin Shop — bản 3.1 (18/09/2026): hồng hoa hồng · mauve · kem · vàng đồng. MÀU PHẲNG, KHÔNG gradient, KHÔNG font có chân (anh chốt).
   Giữ nguyên mọi tên lớp/id của bản 2 để app.js không đổi. Biến --cam giữ tên cũ (nay là màu hồng chủ đạo). */
:root{
  --cam:#e5007e;            /* hồng Quin Shop (logo #ec008c, dịu 1 nấc) */
  --cam-dam:#b5005f;
  --cam-nhat:#fdeaf4;
  --mauve:#2b2127;          /* đen logo — dùng cho nút Chấm RA */
  --hong-mem:#f9c9e2;
  --nen:#fdf7fa;            /* trắng hồng rất nhạt */
  --giay:#ffffff;
  --muc:#2b2127;            /* than ấm */
  --muc2:#6f5f68;
  --muc3:#a89aa2;
  --vien:#f0e2e8;
  --vang:#b8862b;           /* vàng đồng */
  --vang-nhat:#fbf1dc;
  --ok:#3d8a62;
  --loi:#c0394b;
  --r:16px;
  --bong:0 8px 24px rgba(229,0,126,.08);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--nen);color:var(--muc);
  font:16px/1.55 "Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--vien);border-radius:12px;background:var(--giay);color:var(--muc);font-size:16px;min-height:46px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cam);box-shadow:0 0 0 3px rgba(229,0,126,.14)}
label{display:block;margin:12px 0 0;font-size:13.5px;color:var(--muc2);font-weight:500;letter-spacing:.01em}
label>input,label>select,label>textarea{margin-top:5px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{display:inline-block;width:100%;padding:14px 16px;border:0;border-radius:14px;background:var(--cam);color:#fff;font-weight:600;letter-spacing:.01em;cursor:pointer;margin-top:12px;box-shadow:0 6px 16px rgba(229,0,126,.25);transition:transform .08s,box-shadow .15s,filter .15s}
.btn:active{transform:translateY(1px) scale(.995);filter:brightness(.95);box-shadow:0 3px 10px rgba(229,0,126,.2)}
.btn.ghost{background:var(--giay);color:var(--cam);border:1.5px solid var(--hong-mem);box-shadow:none}
.btn.small{width:auto;padding:9px 16px;margin-top:8px;font-size:14px;border-radius:999px}
.btn.big{font-size:22px;padding:22px;border-radius:18px;letter-spacing:.02em}
.btn.out{background:var(--mauve);box-shadow:0 6px 16px rgba(43,33,39,.25)}
.btn.warnbtn{background:var(--vang);box-shadow:0 6px 16px rgba(184,134,43,.22)}
.btn:disabled{opacity:.5;box-shadow:none}
.ibtn{background:none;border:0;font-size:22px;padding:6px 12px;cursor:pointer;color:var(--cam)}
.muted{color:var(--muc2);font-size:14px}
.loi{color:var(--loi);font-size:14px;min-height:1em;margin:8px 0 0}
.center{text-align:center}
.card{background:var(--giay);border:1px solid var(--vien);border-radius:var(--r);padding:16px;margin:12px 0;box-shadow:var(--bong)}
.card.warn{background:var(--vang-nhat);border-color:#ecd9a6;color:#6b4d12;box-shadow:none}
h3{margin:22px 0 8px;font-size:15px;color:var(--muc2);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
code{background:var(--cam-nhat);color:var(--cam-dam);padding:1px 6px;border-radius:6px;font-size:13px}
a{color:var(--cam);font-weight:600;text-decoration:none}

/* login */
.login{position:fixed;inset:0;height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--cam-nhat)}
body:has(.login:not([hidden])){overflow:hidden;position:fixed;inset:0}
.login-box{width:100%;max-width:400px;max-height:calc(100dvh - 32px);overflow:hidden;background:var(--giay);border-radius:24px;padding:22px 22px 20px;box-shadow:0 20px 50px rgba(229,0,126,.16);border:1px solid #fff}
.login-box .logo-brand{width:120px;height:auto;display:block;margin:0 auto 2px}
.login-box h1{font-weight:700;font-size:22px;text-align:center;margin:4px 0 2px;color:var(--cam-dam);letter-spacing:.01em}
.login-box .brand{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--vang);margin:0 0 10px;font-weight:500}
.login-box label{margin-top:8px}
.login-box .btn{margin-top:12px}
.login-box .muted{font-size:13px;margin:8px 0 0}
.login-box .chips{margin:4px 0 2px}
.login-box .chips button{padding:7px 12px;font-size:13.5px}

/* app */
.app{display:flex;flex-direction:column;min-height:100vh}
.top{position:sticky;top:0;z-index:5;background:var(--cam);color:#fff;padding:calc(env(safe-area-inset-top) + 14px) 18px 14px;border-radius:0 0 22px 22px;box-shadow:0 8px 22px rgba(229,0,126,.22)}
.top-title{font-weight:700;font-size:22px;letter-spacing:.01em}
.top-sub{font-size:13px;opacity:.88;margin-top:2px}
main{flex:1;padding:14px 16px calc(100px + env(safe-area-inset-bottom));max-width:640px;width:100%;margin:0 auto}
.bottom{position:fixed;bottom:0;left:0;right:0;z-index:5;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--vien);padding-bottom:env(safe-area-inset-bottom)}
.bottom button{position:relative;background:none;border:0;padding:9px 0 7px;color:var(--muc3);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.bottom button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bottom button.on .ring{background:var(--cam-dam)}
.bottom button span{font-size:11px;font-weight:500;letter-spacing:.01em}
.bottom button.on{color:var(--cam)}
.bottom button.fab{padding-top:0}
.bottom button.fab .ring{width:54px;height:54px;border-radius:50%;background:var(--cam);display:flex;align-items:center;justify-content:center;margin-top:-20px;box-shadow:0 6px 16px rgba(229,0,126,.35);border:4px solid #fff}
.bottom button.fab .ring svg{width:26px;height:26px;stroke:#fff;stroke-width:2;margin:0}
.bottom button.fab span{color:var(--cam);margin-top:4px}
.dot{position:absolute;top:6px;right:22%;width:9px;height:9px;border-radius:50%;background:var(--loi);border:2px solid #fff}
.hello{font-size:22px;font-weight:700;margin:8px 0 14px;color:var(--cam-dam)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:var(--giay);border:1px solid var(--vien);border-radius:var(--r);padding:14px;box-shadow:var(--bong);position:relative;overflow:hidden}
.tile::after{content:"";position:absolute;right:-18px;top:-18px;width:56px;height:56px;border-radius:50%;background:var(--cam-nhat)}
.tile .k{font-size:12px;color:var(--muc2);letter-spacing:.02em}
.tile .v{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--cam-dam);margin-top:2px}

/* chấm công */
.cham-card{text-align:center;padding:22px 16px 18px}
.cham-ngay{color:var(--muc2);font-size:14px;letter-spacing:.02em}
.cham-gio{font-size:56px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1.1;margin:4px 0 2px;color:var(--cam-dam)}
.cham-vaora{display:flex;justify-content:center;gap:28px;margin:8px 0 14px;font-size:15px;color:var(--muc2)}
.cham-vaora b{font-variant-numeric:tabular-nums;color:var(--muc)}
.done{color:var(--ok);font-weight:600;font-size:18px;padding:14px}
.cham-gps{font-size:13px;color:var(--muc2);margin-top:12px;min-height:1em}
.ca-row{display:flex;justify-content:space-between;align-items:center;background:var(--giay);border:1px solid var(--vien);border-radius:14px;padding:12px 14px;margin:10px 0;font-size:14px;box-shadow:var(--bong);border-left:4px solid var(--hong-mem)}
.ca-row .t{font-weight:600}
.ca-row .s{color:var(--muc2);font-size:12px}
.ca-row .g{text-align:right;font-variant-numeric:tabular-nums;color:var(--muc2)}

/* ra ngoài có việc — chỉ ghi nhận, không phạt */
.ra-ngoai{margin-top:14px;padding-top:12px;border-top:1px dashed var(--vien)}
.ra-ngoai .btn.small{margin-top:0}
.ra-ngoai-dang{display:inline-block;background:var(--vang-nhat);color:#6b4d12;border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:500;margin-bottom:10px}
.ra-ngoai-ds{font-size:12.5px;margin-top:8px}

/* công tắc (thay nút Bật/Tắt) */
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.switch{position:relative;display:inline-block;width:52px;height:30px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;border-radius:999px;background:#e5dbe0;transition:background .2s;cursor:pointer}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .2s}
.switch input:checked+.track{background:var(--cam)}
.switch input:checked+.track::after{transform:translateX(22px)}
.switch input:disabled+.track{opacity:.5}
.ra-ngoai-dang.sap-het{background:#fde8ea;color:#7f1d2a}

/* tổng quan của chủ */
.tiles-4{grid-template-columns:1fr 1fr}
.qc-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 96px;gap:8px;align-items:center;background:var(--giay);border:1px solid var(--vien);border-radius:14px;padding:10px 12px;margin:8px 0;font-size:13.5px;box-shadow:var(--bong)}
.qc-row .n{font-weight:600}
.qc-row .s{color:var(--muc2);font-size:12px}
.qc-row .g{font-variant-numeric:tabular-nums;color:var(--muc2);font-size:12.5px}
.tt-chip{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.tt-chip.xong{background:#e3f3ea;color:#1f5a3a}.tt-chip.dang_lam{background:var(--cam-nhat);color:var(--cam-dam)}.tt-chip.ra_ngoai{background:var(--vang-nhat);color:#6b4d12}
.tt-chip.chua_vao,.tt-chip.vang{background:#fde8ea;color:#8a1c2b}.tt-chip.cho{background:#f3eef1;color:var(--muc2)}.tt-chip.nghi_tuan,.tt-chip.nghi_phep,.tt-chip.don,.tt-chip.khong_ca{background:#f3eef1;color:var(--muc2)}.tt-chip.ra_som{background:#fde8ea;color:#8a1c2b}
.qc-row .muon{color:var(--loi);font-weight:600}

/* lịch tuần sau */
.lt-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.lt-ngay{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:10px 0 4px}
.lt-ngay button{border:1.5px solid var(--vien);background:var(--giay);border-radius:12px;padding:8px 0 6px;font-size:11px;color:var(--muc2);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.lt-ngay button b{font-size:14px;color:var(--muc)}
.lt-ngay button.lam{border-color:var(--cam);background:var(--cam-nhat)}.lt-ngay button.lam b{color:var(--cam-dam)}
.lt-ngay button.nghi{background:#f3eef1;color:var(--muc3)}.lt-ngay button.nghi b{color:var(--muc3);text-decoration:line-through}
.lt-ngay button.nua{border-color:var(--cam);border-style:dashed;background:#fff5fa}.lt-ngay button.nua b{color:var(--cam-dam)}
.lt-dem{margin:2px 0 8px;font-size:13px}
.lt-ngay button.le{border-color:#ecd9a6;background:var(--vang-nhat)}
.lt-ngay button.don{border-style:dashed}
.lt-ngay button:disabled{opacity:.6;cursor:default}
.o .t{font-size:9.5px;color:var(--muc3);line-height:1.1}
.o .t.lam{color:var(--cam-dam)}
.o .b{display:inline-block;font-size:9px;font-weight:700;border-radius:6px;padding:0 4px;line-height:14px}
.o .b.m{background:#fde8ea;color:#8a1c2b}.o .b.s{background:var(--vang-nhat);color:#6b4d12}.o .b.ok{background:#e3f3ea;color:#1f5a3a}
.o.don{border-style:dashed}
.ct-line{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--vien);font-size:14px}
.ct-line:last-child{border:0}

label.radio{display:flex;gap:10px;align-items:flex-start;margin:8px 0 0;padding:10px 12px;border:1.5px solid var(--vien);border-radius:12px;color:var(--muc);cursor:pointer}
label.radio input{width:auto;min-height:0;margin-top:3px;accent-color:var(--cam)}
label.radio:has(input:checked){border-color:var(--cam);background:var(--cam-nhat)}

/* chips chọn 1 (thay <select> xấu của iOS) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.chips button{border:1.5px solid var(--vien);background:var(--giay);border-radius:999px;padding:9px 14px;font-size:14px;color:var(--muc2);cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.chips button small{font-size:10.5px;color:var(--muc3);font-weight:400}
.chips button.on{border-color:var(--cam);background:var(--cam-nhat);color:var(--cam-dam);font-weight:600}
.chips button.on small{color:var(--cam)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f5f68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.ibtn.refresh{font-size:18px;padding:2px 8px;line-height:1;border:1.5px solid var(--vien);border-radius:999px;color:var(--cam)}
.ibtn.refresh.quay{animation:quay .8s linear infinite}
@keyframes quay{to{transform:rotate(360deg)}}
.subtabs.sticky{position:sticky;top:calc(env(safe-area-inset-top) + 64px);z-index:4;background:var(--nen);padding:8px 0 6px;margin:-8px 0 6px}
details.thang{border:1px solid var(--vien);border-radius:12px;background:var(--giay);margin:8px 0;padding:0 12px}
details.thang summary{cursor:pointer;padding:10px 0;font-weight:600;color:var(--muc2);list-style:none;display:flex;justify-content:space-between}
details.thang summary::after{content:"▸";color:var(--muc3)}
details.thang[open] summary::after{content:"▾"}
.o .n{font-size:10px;line-height:1.2}
.o .n.m{color:var(--loi)}.o .n.s{color:var(--vang)}

/* khoá kỳ */
.khoa-ky p.muted{margin:6px 0 10px;line-height:1.5}
.khoa-thang{display:flex;align-items:center;gap:10px;margin:4px 0 10px}
.khoa-thang .ibtn.refresh{font-size:22px;padding:0 12px;height:40px}
.khoa-thang-ten{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--vien);border-radius:14px;padding:9px 14px;background:var(--giay)}
.khoa-thang-ten b{font-size:15px;white-space:nowrap}
.khoa-thang-ten .tt-chip{font-size:11px;padding:3px 9px;white-space:nowrap}
.khoa-buoc{background:var(--nen);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;color:var(--muc2);margin-bottom:6px}
.khoa-buoc b{color:var(--muc)}
.khoa-buoc .ok{color:var(--ok);font-weight:600}.khoa-buoc .loi-t{color:var(--loi);font-weight:600}
.khoa-buoc ul{margin:6px 0 0;padding-left:18px}
.khoa-ky .row2 .btn{margin-top:4px;width:100%}
/* hộp thoại chỉ có 1 nút */
.modal-box .row2.mot{grid-template-columns:1fr}

.banner-safari{margin:0;border-radius:0;padding:10px 16px calc(10px + env(safe-area-inset-top));font-size:13.5px;position:sticky;top:0;z-index:6}
.lt-card+.lt-card{margin-top:12px}

/* khuôn mặt */
.mat-tien-trinh{display:flex;gap:6px;justify-content:center;margin:-4px 0 8px}
.mat-tien-trinh span{width:34px;height:6px;border-radius:3px;background:var(--vien)}
.mat-tien-trinh span.on{background:var(--cam)}
.cam-wrap.ok{border-color:var(--ok)}.cam-wrap.xau{border-color:var(--loi)}
.anh-selfie{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.anh-selfie figure{margin:0;text-align:center;font-size:11px;color:var(--muc2)}
.anh-selfie img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:2px solid var(--vien);display:block}
.anh-selfie img.nghi{border-color:var(--loi)}
.anh-selfie img.ok{border-color:var(--ok)}

/* lịch đăng ký cả đội (chủ) */
.ltc-legend{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px;font-size:11.5px}
.ltc-legend span{padding:2px 8px;border-radius:999px}
.ltc-bang{display:grid;grid-template-columns:minmax(96px,1.4fr) repeat(7,1fr);gap:3px;font-size:11px}
.ltc-bang .h{text-align:center;color:var(--muc3);font-size:10.5px;padding:2px 0}
.ltc-bang .h b{display:block;color:var(--muc2);font-size:12px}
.ltc-bang .h.today b{color:var(--cam)}
.ltc-bang .nv{padding:5px 6px;border-radius:8px;background:var(--giay);border:1px solid var(--vien);display:flex;flex-direction:column;justify-content:center;line-height:1.15;overflow:hidden}
.ltc-bang .nv b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ltc-bang .nv small{color:var(--muc3);font-size:10px}
.ltc-bang .nv.chua{border-color:#f3c0c6}
.ltc-bang .o{min-height:38px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:600;padding:0;cursor:default}
.ltc-bang .o small{font-weight:400;font-size:9.5px;opacity:.8}
.o-lam,.ltc-bang .o.lam{background:#e3f3ea;color:#1f5a3a}
.o-nghi,.ltc-bang .o.nghi{background:#f3eef1;color:var(--muc3)}
.o-nua,.ltc-bang .o.nghi_sang,.ltc-bang .o.nghi_chieu{background:#eef6f1;color:#1f5a3a;border:1px solid #b9dcc8}
.o-don,.ltc-bang .o.don-nghi{background:var(--vang-nhat);color:#6b4d12;border:1px solid #e6cf95}
.ltc-bang .o.co-don{box-shadow:inset 0 -3px 0 #d9b46a}
.o-chua,.ltc-bang .o.chua{background:#fde8ea;color:#8a1c2b}
.ltc-bang .o.le{background:var(--vang-nhat);color:#6b4d12}
.ltc-bang .tong{text-align:center;font-size:11px;color:var(--muc2);padding-top:4px;border-top:1px dashed var(--vien)}
.ltc-bang .tong b{color:var(--cam-dam);font-size:12px}

/* bảng công */
.thang-nav{display:flex;justify-content:space-between;align-items:center;margin:4px 0 12px;font-size:17px;font-weight:600;color:var(--cam-dam)}
.lich{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:10px}
.lich .h{font-size:11px;text-align:center;color:var(--muc3);letter-spacing:.04em;text-transform:uppercase}
.o{background:var(--giay);border:1px solid var(--vien);border-radius:10px;min-height:62px;padding:5px 3px;font-size:10.5px;line-height:1.25;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.o .d{font-weight:600;font-size:12px;color:var(--muc2)}
.o .c{font-weight:700;color:var(--ok);font-size:12px}
.o .c.zero{color:var(--loi)}
.o .m{color:var(--vang)}
.o.nghi{background:#f5f1f3;color:var(--muc3)}
.o.le{background:var(--vang-nhat)}
.o.today{outline:2px solid var(--cam);outline-offset:-1px;background:var(--cam-nhat)}
.o.future{opacity:.7}
.o.blank{background:transparent;border:0;cursor:default}

/* đơn từ */
.subtabs{display:flex;gap:8px;margin-bottom:10px}
.chip{background:var(--giay);border:1.5px solid var(--vien);border-radius:999px;padding:8px 14px;font-size:14px;cursor:pointer;position:relative;color:var(--muc2);font-weight:500}
.chip.on{background:var(--cam);color:#fff;border-color:var(--cam);box-shadow:0 4px 12px rgba(229,0,126,.25)}
.badge{background:var(--loi);color:#fff;border-radius:999px;font-size:11px;padding:0 6px;margin-left:4px}
.don{background:var(--giay);border:1px solid var(--vien);border-radius:var(--r);padding:14px;margin:10px 0;font-size:14px;box-shadow:var(--bong)}
.don .t{font-weight:600}
.don .tt{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;margin-left:6px;font-weight:500}
.tt.cho_duyet{background:var(--vang-nhat);color:#6b4d12}.tt.duyet{background:#e3f3ea;color:#1f5a3a}.tt.tu_choi{background:#fde8ea;color:#7f1d2a}
.don .a{display:flex;gap:8px;margin-top:10px}
.don .a .btn{margin:0;padding:10px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(43,33,39,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:20;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-box{background:var(--giay);border-radius:22px;padding:20px;width:100%;max-width:420px;box-shadow:0 24px 60px rgba(43,33,39,.3)}
.modal-box h3{margin-top:0;text-transform:none;letter-spacing:0;font-size:18px;color:var(--muc)}
.cam-wrap{width:260px;height:260px;border-radius:50%;overflow:hidden;margin:0 auto;background:#000;border:4px solid var(--cam)}
.cam-wrap video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.toast{position:fixed;left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));background:#fff;color:var(--muc);padding:12px 14px 12px 16px;border-radius:14px;border:1.5px solid var(--vien);border-left:5px solid var(--cam);z-index:30;font-size:14px;line-height:1.4;font-weight:500;box-shadow:0 12px 28px rgba(43,33,39,.18)}
.qt-row{display:grid;grid-template-columns:1.4fr 1fr 1fr .6fr;gap:6px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--vien);font-variant-numeric:tabular-nums}
.qt-row.h{color:var(--muc3);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
ul.muted{padding-left:18px}
ul.muted li{margin:4px 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* ca lẻ theo giờ (18/09) */
.lt-ngay button.gio{border-color:var(--cam);background:#fff5fa;box-shadow:inset 0 -3px 0 var(--cam)}
.lt-ngay button.gio span:last-child{font-size:10px;color:var(--cam-dam);font-weight:600;white-space:nowrap}
.lt-cale{margin:4px 0 6px;padding:8px 10px;border:1.5px dashed var(--vien);border-radius:12px;font-size:13px}
.cale-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:600;color:var(--cam-dam)}
.cale-head .btn.small{margin-top:0;padding:5px 12px;font-size:13px}
.cale-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--vien)}
.cale-row:first-of-type{border-top:0;margin-top:4px}
.cale-row .x{border:0;background:none;color:var(--muc3);font-size:16px;padding:2px 6px;cursor:pointer}
.lt-cale .muted{margin-top:4px}
.ltc-bang .o small.dk{color:var(--cam-dam);opacity:1;font-weight:600;letter-spacing:-.02em}

/* 18/09 v4.4: nhóm theo phòng ban (thu gọn), thiết bị gọn, ô lịch cả đội đều nhau */
details.pb{border:1.5px solid var(--vien);border-radius:14px;background:#fff;margin:8px 0;overflow:hidden}
details.pb>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 12px;font-weight:600;background:var(--giay)}
details.pb>summary::-webkit-details-marker{display:none}
details.pb>summary::before{content:"▸";color:var(--cam);font-size:14px;width:12px}
details.pb[open]>summary::before{content:"▾"}
details.pb>summary .pb-ten{flex:1}
details.pb>summary .pb-tom{font-weight:500;font-size:12px;color:var(--muc2);white-space:nowrap}
details.pb>summary .pb-tom b{color:var(--cam-dam)}
details.pb .qc-row{margin:0;border:0;border-top:1px solid var(--vien);border-radius:0;box-shadow:none;background:#fff}
.tb-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 12px;border-top:1px solid var(--vien);font-size:13px}
.tb-row .tb-ten{flex:1 1 100%;min-width:0}
.tb-row .tb-ten b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-row .tb-ten small{display:block;color:var(--muc3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-row .tb-act{display:flex;gap:6px;flex:none;width:100%}
.tb-row .tb-act button{border:1.5px solid var(--vien);background:#fff;color:var(--cam-dam);border-radius:999px;padding:4px 9px;font-size:11.5px;font-weight:600;white-space:nowrap;cursor:pointer;font-family:inherit}
.tb-row .tb-act button:active{background:var(--cam-nhat)}
.tb-row .tb-mat{color:var(--ok);font-size:11.5px}.tb-row .tb-chua{color:var(--muc3);font-size:11.5px}
.ltc-bang .o{border:1px solid transparent;box-sizing:border-box;height:44px;min-height:44px;font-size:11px;line-height:1.1}
.ltc-bang .nv{height:44px;min-height:44px;box-sizing:border-box;padding:4px 6px}
.ltc-bang .nv small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ltc-bang .o.don-nghi{font-size:10.5px}
.ltc-bang .pb-h{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:6px 8px;margin-top:4px;border-radius:8px;background:var(--giay);border:1px solid var(--vien);font-weight:600;font-size:12px;cursor:pointer}
.ltc-bang .pb-h::before{content:"▸";color:var(--cam)}
.ltc-bang .pb-h.mo::before{content:"▾"}
.ltc-bang .pb-h small{font-weight:500;color:var(--muc2);margin-left:auto}
.ltc-bang .an{display:none}

/* 19/09 v4.5: bảng chọn (sheet) đồng bộ, thay hộp chọn hệ điều hành */
.sheet[hidden]{display:none}
.sheet{position:fixed;inset:0;background:rgba(43,33,39,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet-box{background:#fff;width:100%;max-width:560px;border-radius:22px 22px 0 0;padding:6px 0 calc(12px + env(safe-area-inset-bottom));max-height:78vh;display:flex;flex-direction:column;box-shadow:0 -10px 30px rgba(43,33,39,.2)}
.sheet-box::before{content:"";width:40px;height:4px;border-radius:2px;background:var(--vien);margin:6px auto 4px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 10px;border-bottom:1px solid var(--vien)}
.sheet-head b{font-size:16px}
.sheet-x{border:0;background:var(--giay);color:var(--muc2);width:32px;height:32px;border-radius:50%;font-size:14px;cursor:pointer}
.sheet-ds{overflow:auto;padding:6px 10px}
.sheet-ds button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;padding:13px 10px;border-radius:12px;font-family:inherit;font-size:15px;color:var(--muc);cursor:pointer}
.sheet-ds button+button{border-top:1px solid var(--vien)}
.sheet-ds button .sdot{width:20px;height:20px;border-radius:50%;border:2px solid var(--vien);flex:none;display:inline-flex;align-items:center;justify-content:center}
.sheet-ds button.on{background:var(--cam-nhat);color:var(--cam-dam);font-weight:600}
.sheet-ds button.on .sdot{border-color:var(--cam);background:var(--cam)}
.sheet-ds button.on .sdot::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.sheet-ds button small{display:block;font-weight:400;color:var(--muc2);font-size:12.5px;margin-top:2px}
.sheet-ds button:disabled{opacity:.45;cursor:default}
select{cursor:pointer;color:var(--muc);font-weight:500}
/* 19/09: chống tràn ngang — ô ngày trong thẻ lịch + input ngày iOS */
.lt-ngay button{min-width:0;overflow:hidden}
.row2>label{min-width:0}
input[type=date],input[type=time],input[type=month]{min-width:0;width:100%;-webkit-appearance:none;appearance:none}
.o .t.phep{color:var(--ok);font-weight:600}
.o .t.kp{color:var(--loi);font-weight:700}
.o .b.phep{background:#e3f3ea;color:#1f5a3a}
.tb-row .tb-act{flex-wrap:nowrap;overflow-x:auto;gap:5px;scrollbar-width:none}
.tb-row .tb-act::-webkit-scrollbar{display:none}
.tb-row .tb-act button.on{background:var(--cam);color:#fff;border-color:var(--cam)}

/* 19/09 v4.6: lịch & giờ tự vẽ trong sheet, chọn tuần đăng ký */
.lich-nav{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 8px}
.lich-nav b{font-size:16px}
.lich-nav button{border:1.5px solid var(--vien);background:#fff;color:var(--cam);width:36px;height:36px;border-radius:50%;font-size:20px;cursor:pointer;font-family:inherit}
.lich-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 4px}
.lich-grid .th{text-align:center;font-size:11px;color:var(--muc3);padding:4px 0}
.lich-grid button{border:0;background:none;height:42px;border-radius:12px;font-size:15px;font-family:inherit;color:var(--muc);cursor:pointer}
.lich-grid button.hn{color:var(--cam);font-weight:700}
.lich-grid button.on{background:var(--cam);color:#fff;font-weight:700}
.lich-grid button:disabled{opacity:.3}
.lich-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 4px}
.lich-foot .btn.small{margin:0}
.gio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px}
.gio-grid button{border:1.5px solid var(--vien);background:#fff;padding:11px 0;border-radius:12px;font-size:15px;font-family:inherit;color:var(--muc);cursor:pointer;font-variant-numeric:tabular-nums}
.gio-grid button.on{background:var(--cam);border-color:var(--cam);color:#fff;font-weight:700}
.sheet-ds .gio-grid button+button{border-top:1.5px solid var(--vien)}
.lt-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 2px;font-size:12.5px}
.lt-nav .ibtn.refresh{font-size:20px;padding:0 12px;height:34px}
.lt-nav .ibtn:disabled{opacity:.3}
input[readonly]{background:#fff;color:var(--muc)}
/* ghi đè kiểu nút danh sách của sheet cho lưới lịch/giờ (specificity cao hơn .sheet-ds button+button) */
.sheet-ds .lich-grid button,.sheet-ds .gio-grid button,.sheet-ds .lich-nav button,.sheet-ds .lich-foot button{display:block;text-align:center;width:auto;padding:0;border-top-width:inherit}
.sheet-ds .lich-grid button{border:0;width:100%}
.sheet-ds .lich-grid button.on{background:var(--cam);color:#fff}
.sheet-ds .gio-grid button{border:1.5px solid var(--vien);width:100%;padding:11px 0}
.sheet-ds .gio-grid button.on{background:var(--cam);border-color:var(--cam);color:#fff}
.sheet-ds .lich-nav button{border:1.5px solid var(--vien);width:36px;height:36px;padding:0}
.sheet-ds .lich-foot .btn.small{display:inline-block;width:auto;padding:7px 14px;border:1.5px solid var(--hong-mem)}

/* 19/09 v4.7 */
.lich .o{min-width:0;overflow:hidden}
.o .t{white-space:normal;overflow-wrap:anywhere;text-align:center}
label.check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muc2);margin:2px 0 8px;cursor:pointer}
label.check input{width:20px;height:20px;accent-color:var(--cam);margin:0}
body.la-chu .bottom{grid-template-columns:repeat(4,1fr)}
body.la-chu .bottom [data-tab="cham"]{display:none}
.ct-tom{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muc2);margin:0 0 8px}
.ct-tom b{color:var(--muc)}
.ct-gon{display:grid;grid-template-columns:minmax(0,1fr) 88px 96px;grid-template-rows:auto;align-items:center;gap:2px 8px;padding:8px 10px;border-top:1px solid var(--vien);font-size:13px;min-height:46px}
.ct-gon .ghi{grid-column:1/-1;font-size:11.5px;color:var(--muc2);line-height:1.3}
.ct-gon .ten{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-gon .gio{text-align:right;font-variant-numeric:tabular-nums;color:var(--muc2);font-size:12.5px;line-height:1.25;white-space:nowrap}
.ct-gon .tt-chip{font-size:10.5px;padding:3px 8px}
#hop-them details.pb{margin:6px 0}
#hop-them details.pb>summary{padding:8px 10px;font-size:13.5px}
/* 19/09 v4.8: hộp thoại cao quá màn hình ⇒ cuộn bên trong, nút luôn thấy (lỗi thật: chi tiết ngày của chủ không đóng được) */
#hop .modal-box{max-height:calc(100vh - 32px - env(safe-area-inset-bottom));display:flex;flex-direction:column;min-height:0}
#hop-them{overflow:auto;-webkit-overflow-scrolling:touch;min-height:0;flex:1 1 auto;overscroll-behavior:contain}
#hop .row2{flex:none;margin-top:10px}
.ct-gon+.anh-selfie{padding:0 10px 8px}
.ct-gon+.anh-selfie img{width:44px;height:44px;border-radius:10px}
.ct-gon+.anh-selfie figure{font-size:10px}

/* 19/09 v4.9: cửa sổ xem ảnh */
.anh-xem[hidden]{display:none}
.anh-xem{position:fixed;inset:0;background:rgba(20,10,15,.88);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.anh-xem-box{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:520px;width:100%}
.anh-xem-box img{max-width:100%;max-height:70vh;border-radius:16px;background:#fff;object-fit:contain;min-height:120px}
.anh-xem-box p{color:#fff;margin:0;text-align:center;font-size:14px}
.anh-xem-box .btn{width:auto;padding:10px 28px;margin-top:0}
.anh-selfie figure{cursor:pointer}
.anh-selfie img{background:var(--giay)}

/* 19/09 v4.10: cột giờ & chip thẳng hàng */
.qc-row .g{white-space:nowrap}
.qc-row .tt-chip{justify-self:end;white-space:nowrap}
.ct-gon{grid-template-columns:minmax(0,1fr) 88px 96px}
.ct-gon .tt-chip{justify-self:end}

/* 19/09 v4.13: cửa sổ chi tiết ngày — gọn, hàng đều, giờ căn giữa */
#hop .modal-box{padding:16px 14px 14px}
#hop h3{margin:0 0 8px;font-size:18px}
#hop-nd:empty{display:none}
#hop-them .ct-tom{margin:0 0 6px;font-size:12.5px;gap:4px 12px}
#hop-them details.pb{margin:6px 0 0;border-radius:12px}
#hop-them details.pb>summary{padding:7px 10px;font-size:13px}
.ct-gon{grid-template-columns:auto minmax(0,1fr) 108px 84px;gap:0 8px;padding:6px 8px;min-height:54px;align-items:center}
.ct-gon .ten{font-size:13.5px}
.ct-gon .gio{text-align:center;white-space:normal;line-height:1.2;justify-self:center}
.ct-gon .gio b{display:block;font-weight:600;color:var(--muc);white-space:nowrap}
.ct-gon .gio small{display:block;font-size:10.5px;color:var(--muc2);margin-top:2px}
.ct-gon .tt-chip{font-size:10px;padding:3px 7px;justify-self:end;white-space:nowrap}
.ct-gon .ghi{display:none}
.ct-anh{display:flex;gap:3px;align-items:center;width:auto}
.ct-anh figure{margin:0;width:38px;height:38px;border-radius:10px;overflow:hidden;border:2px solid var(--vien);background:var(--giay);cursor:pointer;flex:none}
.ct-anh figure.ok{border-color:var(--ok)}.ct-anh figure.nghi{border-color:var(--loi)}
.ct-anh figure img{width:100%;height:100%;object-fit:cover;display:block}
.ct-anh .ct-trong{display:block;width:38px;height:38px;border-radius:10px;background:var(--giay);border:2px dashed var(--vien)}
.ct-gon{grid-template-columns:auto minmax(0,1fr) 92px 74px;gap:0 6px;padding:6px 6px}
.ct-gon .ten{font-size:13px;white-space:normal;line-height:1.15;overflow:visible}
.ct-gon .tt-chip{font-size:9.5px;padding:3px 6px}
.ct-gon .gio b{font-size:12.5px}
.ct-anh figure{width:34px;height:34px;border-radius:9px}
.ct-anh figure+figure{margin-left:-12px;box-shadow:0 0 0 2px #fff}
.ct-anh .ct-trong{width:34px;height:34px;border-radius:9px}
/* 19/09 v4.13.1: ảnh vào/ra đặt cạnh nhau, không chồng; cột ảnh cố định 2 ô để tên thẳng hàng */
.ct-gon{grid-template-columns:72px minmax(0,1fr) 92px 74px}
.ct-anh{width:72px;gap:4px;justify-content:flex-start}
.ct-anh figure+figure{margin-left:0;box-shadow:none}
/* 19/09 v4.13.2: cột giờ chiếm trọn bề rộng cột, chữ căn giữa theo cùng 1 trục */
.ct-gon .gio{justify-self:stretch;width:100%;text-align:center}
.ct-gon .gio b,.ct-gon .gio small{text-align:center}
/* 19/09 v4.14: ô "Đơn" trong lưới đội dính kiểu thẻ .don của tab Đơn từ (margin/box-shadow) ⇒ lệch — ghi đè */
.ltc-bang .o.don{margin:0;box-shadow:none;padding:0;border-radius:8px}
.lt-nav{font-size:11.5px}
.lt-nav span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ltc-bang .o.don-nghi small.dk,.ltc-bang .o.co-don small.dk{color:#6b4d12;font-size:8.5px;letter-spacing:0;white-space:nowrap}

.tb-row .tb-act button.nguy{color:var(--loi);border-color:#f3c0c6}

/* 19/09 v4.17: ảnh xếp chồng + thư viện */
.ct-gon{grid-template-columns:76px minmax(0,1fr) 92px 74px}
.ct-anh-chong{width:76px;gap:0;cursor:pointer;position:relative}
.ct-anh-chong figure{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--vien)}
.ct-anh-chong figure.ok{box-shadow:0 0 0 1.5px var(--ok)}.ct-anh-chong figure.nghi{box-shadow:0 0 0 1.5px var(--loi)}
.ct-anh-chong figure+figure{margin-left:-14px}
.ct-anh-chong .them{font-style:normal;font-size:10px;font-weight:700;color:var(--cam-dam);margin-left:2px}
.anh-xem-box{max-height:88vh;overflow:auto}
.tv-tt{color:#fff;font-weight:700;font-size:16px;margin:0}
.tv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%}
.tv-grid figure{margin:0;background:#fff;border-radius:14px;overflow:hidden;border:3px solid var(--vien)}
.tv-grid figure.ok{border-color:var(--ok)}.tv-grid figure.nghi{border-color:var(--loi)}
.tv-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--giay)}
.tv-grid figcaption{font-size:12px;padding:6px 8px;color:var(--muc2);line-height:1.3}
.tv-grid figcaption b{color:var(--muc)}
.tt-chip.giua_ca{background:#eef6f1;color:#1f5a3a}

/* 19/09 v4.18 */
.ct-anh-chong{overflow:hidden}
.ct-anh-chong .them{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--cam);color:#fff;font-size:10px;margin-left:-8px;border:2px solid #fff;flex:none;z-index:1}
.tv-xn{background:#fff;border-radius:14px;padding:10px 12px;width:100%;font-size:13px;color:var(--muc)}
.tv-xn p{margin:0 0 8px}
.tv-xn .btn.small{width:100%;margin:0}
.tv-xn .btn.nguy{color:var(--loi);border-color:#f3c0c6}

/* 19/09 v4.18.1: khối xác nhận mặt thiết kế lại */
.tv-xn{background:#fff;border-radius:18px;padding:14px;width:100%;color:var(--muc);display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.tv-xn p{display:none}
.tv-xn-h{display:flex;gap:10px;align-items:flex-start}
.tv-xn-h b{font-size:15px;display:block;color:var(--muc)}
.tv-xn-h small{color:var(--muc2);font-size:12.5px;line-height:1.35;display:block;margin-top:2px}
.tv-xn-i{width:34px;height:34px;border-radius:50%;background:var(--vang-nhat);color:#8a6a1a;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.tv-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border-radius:14px;padding:11px 14px;font-family:inherit;cursor:pointer;border:1.5px solid transparent}
.tv-btn .ic{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:none}
.tv-btn b{display:block;font-size:14.5px}
.tv-btn small{display:block;font-size:12px;opacity:.85;margin-top:1px}
.tv-btn.ok{background:var(--cam);color:#fff}
.tv-btn.ok .ic{background:rgba(255,255,255,.25);color:#fff}
.tv-btn.sai{background:#fff;border-color:#f3c0c6;color:var(--loi)}
.tv-btn.sai .ic{background:#fbe6e8;color:var(--loi)}
.tv-btn:active{transform:scale(.99)}

/* 20/09 v4.19 */
/* 21/09: nút ra ngoài / quay lại to bằng Chấm RA, màu riêng (xem .btn.rn-btn cuối file) */
.ra-ngoai #btn-ra-ngoai,.ra-ngoai #btn-quay-lai{width:100%;margin:10px 0 4px}
.chon-doc{display:flex;flex-direction:column;gap:8px;margin:4px 0}
.chon-doc .tv-btn.ngoai{background:#fff;border-color:var(--hong-mem);color:var(--cam-dam)}
.chon-doc .tv-btn.ngoai .ic{background:var(--cam-nhat)}
.tk{font-size:13.5px;line-height:1.45;display:flex;flex-direction:column;gap:4px}
.tk-ca{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:6px 8px;border:1px solid var(--vien);border-radius:10px;margin-top:2px;font-size:12.5px}
.tk-ca b{grid-column:1/-1}
.tk-ca .ok{color:var(--ok);font-weight:600}.tk-ca .loi{color:var(--loi);font-weight:600}
.tk-tong{font-size:15px;margin-top:6px;padding:8px 10px;background:var(--cam-nhat);border-radius:10px}
.tk-tong b{color:var(--cam-dam);font-size:18px}
.lt-ngay button.gio span:last-child{font-size:9px;letter-spacing:-.2px}
.ltc-bang .o small.dk{font-size:8.5px;letter-spacing:-.3px;white-space:nowrap}
.tk-ca{grid-template-columns:1fr}
.tk-ca span{white-space:normal}

/* ===== 21/09 v4.21: tổng quan theo tháng, ô bấm được, thông báo, ra ngoài, tổng kết ngày, PT giờ ===== */
.tile-btn{font-family:inherit;text-align:left;cursor:pointer;color:inherit;width:100%}
.tile-btn:active{transform:scale(.99)}
.tile-btn::before{content:"›";position:absolute;right:12px;bottom:10px;color:var(--muc3);font-size:20px;line-height:1;z-index:1}
.tile.zero .v{color:var(--muc3)}
.tile.zero::before{opacity:.35}
#tq-nv .thang-nav{margin:6px 0 10px}
.tb-card{border-color:var(--hong-mem)}
.tb-item{padding:9px 10px 9px 14px;border-radius:12px;margin:6px 0;background:var(--nen);border-left:4px solid var(--vien);font-size:13.5px}
.tb-item.moi{background:#fff;border-left-color:var(--cam);box-shadow:var(--bong)}
.tb-item.m{border-left-color:var(--loi)}.tb-item.ok{border-left-color:var(--ok)}.tb-item.s{border-left-color:var(--vang)}
.tb-item .tb-t{font-weight:700}.tb-item .tb-n{color:var(--muc2);margin-top:2px;line-height:1.4}.tb-item .tb-l{color:var(--muc3);font-size:11.5px;margin-top:3px}
.tb-list{max-height:52vh;overflow:auto}
.badge:empty{display:none}
/* nút Ra ngoài có việc: to bằng Chấm RA, màu vàng đồng; Đã quay lại: xanh đậm */
.ra-ngoai{border-top:0;padding-top:0;margin-top:8px}
.btn.rn-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--cam-dam);color:#fff;box-shadow:0 6px 16px rgba(181,0,95,.25);margin-top:10px;font-size:21px}
.btn.rn-btn.ve{background:var(--mauve);box-shadow:0 6px 16px rgba(43,33,39,.25)}
.btn.rn-btn svg{flex:none}
.rn-card[hidden]{display:none}
.rn-card{background:var(--vang-nhat);border:1.5px solid #ecd9a6;border-radius:16px;padding:12px 14px;margin-top:12px;text-align:left;color:#4a3a12}
.rn-card .rn-h{font-weight:700;font-size:14px;letter-spacing:.02em;margin-bottom:6px;color:#6b4d12}
.rn-card .rn-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}
.rn-card .rn-grid span{color:#8a6f2e}.rn-card .rn-grid b{font-variant-numeric:tabular-nums}
.rn-card .rn-con{margin-top:8px;font-weight:700;font-size:15px;color:#6b4d12}
.rn-card .rn-con.qua{color:var(--loi)}
/* hộp chọn: icon svg, nút xếp dọc */
.tv-btn .ic svg{display:block}
.tv-btn.ngoai{background:#fff;border-color:var(--hong-mem);color:var(--cam-dam)}.tv-btn.ngoai .ic{background:var(--cam-nhat);color:var(--cam-dam)}
#hop .row2.doc{grid-template-columns:1fr;gap:8px}
#hop .row2.doc .btn{white-space:nowrap}
/* giờ + phút */
.gp-w{margin-top:12px}.gp-tt{font-size:13.5px;color:var(--muc2);font-weight:500;margin-bottom:6px}
.gp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gp-grid select{text-align:center;font-weight:600;font-size:17px}
/* tổng kết hôm nay (dưới nút ra ngoài) */
.tk-card{padding:14px 16px}
.tk-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.tk-head b{font-size:15px}
.tk-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--vien);font-size:14px;align-items:baseline}
.tk-row:first-of-type{border-top:0}
.tk-row span{color:var(--muc2);flex:none}.tk-row b{text-align:right;font-weight:600}
.tk-row b small{display:block;font-weight:400;color:var(--muc2);font-size:12px}
.tk-row i{font-style:normal;font-weight:700}.tk-row i.ok,.ct-list .ok,.tk-tong .ok{color:var(--ok)}.tk-row i.m,.ct-list .m,.tk-tong .m{color:var(--loi)}.tk-row i.s,.ct-list .s{color:var(--vang)}.tk-row i.muted{color:var(--muc3);font-weight:500}
.tk-row.zero b{color:var(--muc3)}
.tk-note{margin:8px 0;padding:9px 12px;border-radius:12px;background:var(--nen);font-size:13.5px;line-height:1.45}
.tk-note.ok{background:#e3f3ea;color:#1f5a3a}.tk-note.loi{background:#fde8ea;color:#7f1d2a}
.tk-tong{margin-top:8px;padding-top:8px;border-top:1.5px solid var(--vien);font-size:14.5px}
.tk-phat{margin-top:8px;padding:9px 12px;border-radius:12px;background:#fde8ea;color:#7f1d2a;font-size:13.5px;line-height:1.5}
.tk-phat b{display:block;margin-bottom:2px}
.ct-list{margin:4px 0}.ct-list .tk-row{padding:8px 0}.ct-gc{font-size:12px;color:var(--muc2);margin:-4px 0 4px}
.ct-phat{padding:10px 0;border-top:1px solid var(--vien);font-size:14px}.ct-phat:first-child{border-top:0}
.ct-phat .btn.small{margin-top:6px}
.ct-phat .tt{font-size:11.5px;padding:1px 8px;border-radius:999px;margin-left:4px;vertical-align:middle}
/* PT: giờ từng ngày */
.lt-ptgio{margin-top:10px;border:1.5px dashed var(--hong-mem);border-radius:14px;padding:10px 12px}
.ptgio-row{display:grid;grid-template-columns:64px 1fr 18px 1fr;gap:6px;align-items:center;margin:6px 0;font-size:13.5px}
.ptgio-row span{text-align:center;color:var(--muc3)}
.ptgio-row input{min-height:40px;padding:6px 8px;text-align:center;font-size:15px}
.ptgio-row.thieu input:placeholder-shown,.ptgio-row.thieu input[value=""]{border-color:#f3c0c6;background:#fff7f8}
.ptgio-list{max-height:48vh;overflow:auto}
.lt-ngay button.lam:not(.gio) span:last-child{font-size:10.5px}
.tile .v{white-space:nowrap}
.tile .v.dai{font-size:19px;letter-spacing:-.01em}
.tile-btn .v{padding-right:14px}
#tq-tiles .tile{min-height:78px}
.tt-chip.bo_ve{background:#fde8ea;color:#8a1c2b}
/* 21/09 sáng: nút quay chụp to như Chấm VÀO, hồng nhạt viền hồng (tone hồng–đen) */
.btn.qc-btn{background:var(--cam-dam);color:#fff;border:0;box-shadow:0 6px 16px rgba(181,0,95,.25);padding:14px 12px;margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2}
.btn.qc-btn b{font-size:21px;font-weight:700;letter-spacing:.02em}.btn.qc-btn small{font-size:12.5px;font-weight:400;opacity:.9;white-space:normal}
.btn.qc-btn.den{background:var(--mauve);box-shadow:0 6px 16px rgba(43,33,39,.25)}
.btn.qc-btn:active{filter:brightness(.97)}
.ltc-bang .o.co-don{cursor:pointer}
/* 21/09 sáng: PT ô giờ:phút gọn; thông báo ẩn/hiện/xoá/khiếu nại */
.ptgio-row{grid-template-columns:52px 1fr 14px 1fr;gap:4px}
.ptgio-row b{font-size:12.5px;white-space:nowrap}
.gp2{display:inline-flex;align-items:center;gap:2px;min-width:0}
.gp2 select{min-height:38px;padding:4px 2px;text-align:center;text-align-last:center;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;border-radius:10px;appearance:none;-webkit-appearance:none;background-image:none}
.gp2 i{font-style:normal;font-weight:700;color:var(--muc2)}
.ptgio-row.thieu .gp2 select{border-color:#f3c0c6;background:#fff7f8}
.tb-nut{display:flex;gap:6px}.tb-nut .btn.small{margin-top:0;padding:5px 11px;font-size:12.5px}
.tb-item{position:relative;padding-right:30px}
.tb-x{position:absolute;top:6px;right:6px;border:0;background:none;color:var(--muc3);font-size:13px;cursor:pointer;padding:4px 6px}
.tb-kn{margin-top:6px}.tb-kn .btn.small{margin-top:0;padding:5px 12px;font-size:12.5px}
.tb-kq{display:inline-block;font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:999px}
.tb-kq.ok{background:#e3f3ea;color:#1f5a3a}.tb-kq.cho{background:var(--vang-nhat);color:#6b4d12}.tb-kq.loi{background:#fde8ea;color:#8a1c2b}
/* 21/09 chiều: ô lịch NV chỉ ghi số công */
.lich .o .c{font-size:17px;font-weight:700;color:var(--cam-dam)}.lich .o .c.zero{color:var(--loi)}
.lich .o .b.m{font-size:9.5px}
.cham-card .cham-gps{margin-top:12px;font-size:12.5px}
.done{font-size:16px;padding:10px}
/* 21/09 15:00: lưới tuần chủ — ô cố định 3 dòng, giờ đăng ký 1 dòng, cuộn ngang khi hẹp; ô tháng cố định; chữ GPS cân dòng */
.ltc-bang{overflow-x:auto;grid-template-columns:88px repeat(7,minmax(50px,1fr));padding-bottom:4px;-webkit-overflow-scrolling:touch}
.ltc-bang .nv,.ltc-bang .h:first-child{position:sticky;left:0;z-index:1;background:var(--giay)}
.ltc-bang .h:first-child{background:var(--nen)}
.ltc-bang .o{height:48px;min-height:48px;justify-content:center;gap:1px}
.ltc-bang .nv{height:48px;min-height:48px}
.ltc-bang .o small.dk,.ltc-bang .o.don-nghi small.dk,.ltc-bang .o.co-don small.dk{font-size:8.5px;letter-spacing:-.3px;white-space:nowrap;line-height:1.1;max-width:100%;overflow:hidden}
.ltc-bang .o small:not(.dk){font-size:9px;line-height:1.1}
.ltc-bang .pb-h{position:sticky;left:0}
.lich .o{height:68px;min-height:68px;justify-content:flex-start}
.lich .o .n{font-size:10.5px;font-weight:700}
.cham-card .cham-gps{text-align:center;text-wrap:balance;padding:0 12px}
#lg-form form{margin:0}
.row2 .gp2 select{min-width:56px;flex:1}
/* 21/09 15:40 */
.ltc-bang .pb-h{box-sizing:border-box}
.tk-tong{margin-bottom:10px}
.tk-card>.muted:last-child{margin-top:6px}
/* 21/09 tối: ô tháng của chủ — số nhỏ 2/3, M trái S phải */
.lich .o .c.chu{font-size:12px;letter-spacing:-.01em}
.o .ms{display:flex;justify-content:space-between;width:100%;margin-top:auto}
.o .ms .n{font-size:10px;font-weight:700}
.tt-chip.som_phep{background:var(--vang-nhat);color:#6b4d12}
/* 24/09: báo cáo công việc trong ngày (marketing) */
.bc-card{border-color:var(--hong-mem)}
.bc-card .btn.small{margin-top:10px}
.bc-xong b{color:var(--ok)}
.bc-nd{margin-top:6px;padding:9px 12px;border-radius:12px;background:var(--nen);font-size:13.5px;line-height:1.45;white-space:pre-wrap}
#hop-them textarea{width:100%;padding:12px 14px;border:1.5px solid var(--vien);border-radius:12px;background:var(--giay);color:var(--muc);font-size:16px;font-family:inherit;resize:vertical}
#hop-them textarea:focus{outline:none;border-color:var(--cam);box-shadow:0 0 0 3px rgba(229,0,126,.14)}
/* 24/09 (anh chốt): mọi nút chấm CÙNG kích thước; màu xen kẽ hồng ↔ đen (không 2 nút cùng tone cạnh nhau) */
.cham-card .btn.big{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:100%;height:80px;min-height:80px;padding:10px 12px;border-radius:18px;font-size:21px;font-weight:700;letter-spacing:.02em;line-height:1.15;margin-top:10px;white-space:nowrap;overflow:hidden}
.cham-card .btn.big b{font-size:21px;font-weight:700;letter-spacing:.02em;line-height:1.2}
.cham-card .btn.big small{font-size:11.5px;font-weight:400;opacity:.9;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cham-card .btn.big.mau1{background:var(--cam);color:#fff;border:0;box-shadow:0 6px 16px rgba(229,0,126,.25)}
.cham-card .btn.big.mau2{background:var(--mauve);color:#fff;border:0;box-shadow:0 6px 16px rgba(43,33,39,.25)}
.cham-card .btn.big.mau3{background:var(--ok);color:#fff;border:0;box-shadow:0 6px 16px rgba(61,138,98,.28)}   /* 24/09 (anh chốt): 3 màu = hồng · đen · xanh lá */
.ra-ngoai #btn-ra-ngoai,.ra-ngoai #btn-quay-lai{margin-top:10px}
/* 24/09 (anh chốt): chủ đọc báo cáo công việc marketing ngay trong Tổng quan */
#qc-bc-card h3{margin:0 0 8px;font-size:14.5px}
.bc-item{padding:8px 0;border-top:1px solid var(--vien)}
.bc-item:first-child{border-top:0;padding-top:0}
.bc-ten{font-weight:600;font-size:13.5px}
/* 24/09 (anh chốt): vào rồi không chấm ra, đã quá giờ tan ca ⇒ "Về không phép" (đỏ), không còn "Đang làm" */
.tt-chip.ve_khong_phep{background:#fde8ea;color:#8a1c2b}
/* 24/09 (anh chốt): bảng chọn giờ / phút nhỏ gọn, rộng bằng ô, cao giới hạn, không tràn màn hình */
.gp-pop{position:fixed;z-index:60;background:#fff;border:1.5px solid var(--vien);border-radius:12px;box-shadow:0 10px 26px rgba(43,33,39,.18);overflow:auto;padding:4px;-webkit-overflow-scrolling:touch}
.gp-pop button{display:block;width:100%;border:0;background:none;padding:9px 4px;border-radius:8px;font:inherit;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;text-align:center;color:var(--muc);cursor:pointer}
.gp-pop button.on{background:var(--cam-nhat);color:var(--cam-dam)}
.gp-pop button:disabled{opacity:.3;cursor:default}
/* 24/09: hàng 3 cột cho đơn đi muộn / về sớm (Buổi · Xin · Giờ dự kiến đứng cạnh nhau) */
.row3{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.row3 > label{margin-top:10px}
.row3 .gp-o{display:block;margin-top:5px}
.row3 .gp2 select{min-height:46px;font-size:15px;min-width:44px}
.gp-o .gp2{display:inline-flex}
label > .gp-o .gp2 select{min-height:46px;font-size:16px}
.row2 .gp-o{display:block;margin-top:5px}
.row3 > label > select{font-size:15px;padding-left:10px;padding-right:26px;background-position:right 7px center}
/* 24/09 (anh chốt): đơn đi muộn / về sớm — Ngày | Buổi một hàng, Xin | Giờ một hàng;
   cột phải bắt đầu ở trục giữa, chữ và ô căn TRÁI trong cột (không dính lề phải) */
.row2 > label.phai{text-align:left}
.row2 > label.phai > select{text-align:left;text-align-last:left}
.row2 > label.phai > .gp-o{display:flex;justify-content:flex-start}
.row2 > label.phai > .gp-o .gp2 select{min-width:64px;min-height:46px;font-size:16px}
/* 30/09 (anh chốt): lịch tuần ghi rõ đơn nghỉ — từ ngày/giờ nào đến hết ngày nào */
.lt-nghi{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.lt-nghi > div{background:var(--nen);border-radius:12px;padding:8px 11px;font-size:13px;line-height:1.45}
.lt-nghi .tt-chip{font-size:10.5px;padding:2px 8px;margin-left:4px}
.hd p{margin:0 0 9px;font-size:14px;line-height:1.5}
.hd ul{margin:0 0 9px;padding-left:18px;font-size:13.5px;line-height:1.5}
.hd li{margin-bottom:5px}
.lien-ket{color:var(--cam);font-weight:600;text-decoration:underline}
.nho{font-size:12.5px;margin:8px 0 14px;line-height:1.5}
#d-ly-nghi-mo-ta{display:block;margin-top:8px;font-size:12.5px;line-height:1.5}
#d-sau-ly-do{margin-top:14px}
#d-sau-ly-do > label,#d-sau-ly-do > .row2,#d-sau-ly-do > #d-kieu-w{margin-bottom:4px}
#d-kieu-w{margin-top:6px}
#d-kieu-w > label:first-child{margin-bottom:6px;display:block}
#d-huong-dan-w{margin:14px 0 4px}

/* v4.55 — thẻ cảnh báo giờ part time cho chủ */
.card.canh-bao { border: 1px solid var(--vang); background: var(--vang-nhat); }
.card.canh-bao h3 { color: var(--vang); }
.cb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--vien); }
.cb-row:last-of-type { border-bottom: 0; }
.cb-row b { font-variant-numeric: tabular-nums; }
.cb-row.vuot b { color: var(--loi); }