/* Mau lay tu Bo nhan dien thuong hieu SANCOPACK V2.079
   (do truc tiep tu vector fill trong LOGO CHUAN.ai) */
:root{
  --xanh:#203F9A;        /* Xanh Pack - chu dao, tin cay */
  --xanh-dam:#1A4E78;    /* Xanh dam Sanco - chu phu */
  --navy:#12275F;        /* Navy nen - header, footer */
  --navy-d:#0d1c46;
  --cam:#F5821F;         /* Cam Sanco - nhan, hanh dong */
  --cam-d:#d96f16;
  --cam-nhat:#FDEBD9;
  --xanh-nhat:#E8EDF8;
  --red:#ce1c22;
  --bg:#f2f4f9; --card:#fff; --text:#0F172A; --muted:#4A5568;
  --line:#CBD2DC; --ok:#0f8a54; --warn:#b7791f;
  --r:14px; --sh:0 1px 3px rgba(18,39,95,.08),0 6px 18px rgba(18,39,95,.07);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font:15px/1.5 Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--bg); color:var(--text);
  overscroll-behavior-y:contain;
}
.hide{display:none!important}

/* ---------- khung chung ---------- */
.app{display:flex;flex-direction:column;height:100dvh;max-width:760px;margin:0 auto;background:var(--bg)}
header{
  background:var(--navy);color:#fff;padding:calc(env(safe-area-inset-top,0px) + 13px) 16px 13px;
  display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;
  border-bottom:3px solid var(--cam)   /* dai cam - mo tuyp nhan dien */
}
header .logo{height:26px;width:auto;flex:none;display:block}
header .logo-ss{height:30px;width:auto;flex:none;display:block}
header .ten-sp{font-size:15.5px;font-weight:700;letter-spacing:.2px;line-height:1.2}
header .sub{font-size:11.5px;opacity:.8;margin-top:3px;letter-spacing:.2px}
header .who{margin-left:auto;text-align:right;font-size:12px;opacity:.92;line-height:1.35}

/* 30/09/2026 (anh Phước: "để phiên bản lên em") — ô phiên bản đang chạy.
   Đặt làm HÀNG RIÊNG bên dưới chứ không chen vào hàng logo: logo, "Sancopack Sign" và
   .who (#hdName/#hdRole) giữ đúng toạ độ cũ ở CẢ HAI trạng thái — kể cả khi ô đổi thành thẻ
   cam "Có bản mới — chạm để cập nhật" (dài hơn tên sản phẩm). Chen vào hàng trên thì
   ở 375 px thẻ bị cắt chữ và chức vụ bên phải bị đẩy xuống ba dòng.
   Bình thường là chữ mờ, disabled — không phải nút. Có bản mới mới thành nút cam.
   row-gap đè phần hàng của gap:12px ở trên; khoảng cách NGANG vẫn là 12 px như cũ. */
header{flex-wrap:wrap;row-gap:4px}
/* 30/09/2026 (anh Phước): hàng 1 là MỘT khối chiếm trọn bề ngang, bên trong tự xếp ngang — nên tên
   người dùng dài tới đâu cũng không rơi xuống hàng như lúc chưa bọc. Các thuộc tính ngang (gap 12px,
   canh giữa trục dọc) lấy y nguyên của header cũ. */
header .hd-tren{flex:0 0 100%;display:flex;align-items:center;gap:12px;min-width:0}
header .pb-hang{flex:0 0 100%;min-width:0}
.pb-o{
  /* display:block + fit-content: inline-block sẽ ăn theo line-height 1.5 của khối cha,
     header cao thêm 4 px mà không để làm gì */
  display:block;width:-webkit-fit-content;width:fit-content;
  max-width:100%;margin:0;padding:0;border:0;background:none;
  font:inherit;font-size:11px;line-height:1.4;letter-spacing:.2px;text-align:left;
  color:inherit;opacity:.66;cursor:default;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-appearance:none;appearance:none;
  -webkit-text-fill-color:currentColor   /* iOS lam xam chu cua nut disabled */
}
.pb-o.moi{
  padding:3px 10px;border-radius:999px;background:var(--cam);color:#fff;
  opacity:1;font-size:11px;font-weight:600;cursor:pointer
}
.pb-o.moi:active{background:var(--cam-d)}
/* cac man truoc khi dang nhap (#login, #quenmk, #datlai, #dangky): nen sang nen phai doi mau chu */
.ft .pb-o{color:var(--muted);opacity:1;font-size:12px;margin:5px auto 0}
.ft .pb-o.moi{color:#fff;font-size:11.5px}

main{flex:1;overflow-y:auto;padding:16px 16px 90px;-webkit-overflow-scrolling:touch}

nav.tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  background:#fff;border-top:1px solid var(--line);
  display:flex;padding-bottom:var(--safe-b);
  max-width:760px;margin:0 auto
}
nav.tabs button{
  flex:1;background:none;border:0;padding:10px 4px 8px;font:inherit;font-size:11px;
  color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer
}
nav.tabs button svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7}
nav.tabs button.on{color:var(--xanh);font-weight:650}

/* ---------- thanh phan ---------- */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin-bottom:14px}
.card h2{font-size:15px;margin:0 0 4px;font-weight:650}
.card p.note{color:var(--muted);font-size:13px;margin:0 0 14px}

label{display:block;font-size:13px;font-weight:600;margin:0 0 6px;color:#38445c}
input,select,textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:16px;background:#fbfcfe;color:var(--text)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--xanh);outline-offset:-1px;background:#fff}
.field{margin-bottom:14px}
.row{display:flex;gap:10px}
.row>*{flex:1}

button.btn{
  width:100%;padding:14px;border:0;border-radius:11px;background:var(--xanh);color:#fff;
  font:inherit;font-size:15.5px;font-weight:650;cursor:pointer;min-height:48px
}
button.btn:active{background:var(--navy)}
button.btn[disabled]{opacity:.5}
button.btn.ghost{background:var(--xanh-nhat);color:var(--xanh)}
button.btn.cam{background:var(--cam)}
button.btn.cam:active{background:var(--cam-d)}
button.btn.danger{background:var(--red)}
button.sm{width:auto;padding:9px 14px;font-size:13.5px;min-height:0;border-radius:9px}
/* 15/10/2026 (anh Phuoc): nut quay ve ten cu trong hop dat ten. Phai NHO hon nut "Dung ten nay" - no la
   duong lui chu khong phai viec chinh, de to ngang nhau thi nguoi dung phan van khong biet bam cai nao.
   Van du cao cham bang ngon tay (36px) vi anh em ky bang dien thoai. */
button.nut-ten-cu{width:100%;margin:8px 0 12px;padding:9px 12px;min-height:36px;font-size:13px;
  line-height:1.35;text-align:left;white-space:normal;word-break:break-word;border-radius:9px;
  background:var(--xanh-nhat);color:var(--xanh);border:0;font-weight:600}

.msg{padding:11px 13px;border-radius:10px;font-size:13.5px;margin-bottom:12px;display:none}
.msg.err{background:#fdecec;color:#9b1c1c;border:1px solid #f6cfcf;display:block}
.msg.ok{background:#e8f6ef;color:#0b6b41;border:1px solid #bfe5d2;display:block}
.msg.info{background:#eef3fb;color:#1c3f75;border:1px solid #cfdcf1;display:block}
.msg.w{background:#fdf4e3;color:#8a5a00;border:1px solid #f3e2bf;display:block}

.pill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:650}
.pill.ok{background:#e8f6ef;color:var(--ok)} .pill.no{background:#fdecec;color:var(--red)}
.pill.w{background:#fdf4e3;color:var(--warn)}

/* ---------- chon file ---------- */
.drop{
  border:2px dashed #b9c4dc;border-radius:var(--r);background:#fff;
  padding:30px 18px;text-align:center;cursor:pointer
}
.drop svg{width:42px;height:42px;stroke:var(--xanh);fill:none;stroke-width:1.5;opacity:.85}
.drop b{display:block;margin:10px 0 4px;font-size:15px}
.drop span{color:var(--muted);font-size:13px}

/* ---------- dat chu ky ---------- */
.stage{position:relative;background:#5a6172;border-radius:12px;overflow:hidden;touch-action:pan-y;line-height:0}
/* 11/09/2026: truoc day ca khung trang touch-action:none -> tren Android vuot len xuong
   tren trang PDF khong cuon duoc (vu anh Thanh BN). Gio chi o chu ky + nut keo chan cu chi. */
.stage img{width:100%;display:block;user-select:none;-webkit-user-drag:none}
.sigbox{
  position:absolute;border:2px solid var(--xanh);background:rgba(32,63,154,.14);
  border-radius:5px;cursor:move;touch-action:none;
  display:grid;place-items:center
}
.sigbox .tag{
  font-size:11px;font-weight:700;color:#fff;background:var(--xanh);
  padding:2px 8px;border-radius:99px;white-space:nowrap;pointer-events:none;line-height:1.5
}
.sigbox .grip{
  position:absolute;right:-11px;bottom:-11px;width:26px;height:26px;border-radius:50%;
  background:var(--cam);border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);touch-action:none
}
.pagebar{display:flex;align-items:center;justify-content:center;gap:14px;margin:11px 0 2px;font-size:13.5px;color:var(--muted)}
.pagebar button{border:1px solid var(--line);background:#fff;border-radius:8px;width:38px;height:34px;font-size:17px;cursor:pointer;color:var(--xanh)}
.pagebar button[disabled]{opacity:.35}

/* ---------- danh sach ---------- */
.item{background:#fff;border-radius:12px;box-shadow:var(--sh);padding:13px 14px;margin-bottom:10px}
.item .t{font-weight:650;font-size:14px;margin-bottom:3px;word-break:break-word}
.item .m{color:var(--muted);font-size:12.5px;line-height:1.6}
.empty{text-align:center;color:var(--muted);padding:42px 20px;font-size:14px}

/* ---------- modal PIN ---------- */
.mask{position:fixed;inset:0;background:rgba(12,20,36,.55);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{
  background:#fff;width:100%;max-width:760px;border-radius:18px 18px 0 0;
  padding:20px 18px calc(20px + var(--safe-b));animation:up .22s ease
}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet h3{margin:0 0 4px;font-size:16px}
.sheet p{color:var(--muted);font-size:13px;margin:0 0 15px}
.pin{letter-spacing:9px;text-align:center;font-size:23px!important;font-weight:700;padding:14px!important}

.spin{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px;margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}

.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.kv:last-child{border:0}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{font-weight:600;text-align:right;word-break:break-all}
details.help{background:#fff;border-radius:12px;box-shadow:var(--sh);padding:13px 15px;margin-bottom:14px}
details.help summary{font-weight:650;font-size:14px;cursor:pointer}
details.help div{font-size:13.5px;color:#414d63;line-height:1.65;margin-top:10px}
details.help code{background:var(--xanh-nhat);padding:1px 5px;border-radius:4px;font-size:12.5px}

/* ---------- man dang nhap / dang ky ---------- */
main.giua{display:flex;flex-direction:column;justify-content:center;padding:24px 20px 40px}
.brand{text-align:center;margin-bottom:22px}
.brand-logo{width:min(260px,72%);height:auto;display:block;margin:0 auto 12px}
.brand-sub{color:var(--xanh-dam);font-size:14.5px;font-weight:600;letter-spacing:.2px}
.ft{text-align:center;color:var(--muted);font-size:12.5px;margin-top:8px;line-height:1.6}

/* ---------- nhat ky ---------- */
.log{background:#fff;border-radius:12px;box-shadow:var(--sh);padding:13px 14px;margin-bottom:10px;
     border-left:3px solid var(--xanh)}
.log.nguoikhac{border-left-color:var(--line)}
.log .t{font-weight:650;font-size:14px;margin-bottom:4px;word-break:break-word;line-height:1.4}
.log .m{color:var(--muted);font-size:12.5px;line-height:1.65}
.log .m b{color:var(--text);font-weight:600}
.log .hash{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;color:#8a93a4;word-break:break-all}
.log .act{margin-top:9px}
#lsTim{font-size:15px}

/* ---------- thong ke ---------- */
.tk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.tk{background:#fff;border-radius:12px;box-shadow:var(--sh);padding:13px 14px;border-top:3px solid var(--xanh)}
.tk.cam{border-top-color:var(--cam)}
.tk .so{font-size:26px;font-weight:750;line-height:1.15;color:var(--navy)}
.tk .nh{font-size:12px;color:var(--muted);margin-top:3px}
/* 30/09/2026 (anh Phước: "thống kê chữ ký theo ngày"): mỗi cột rộng ra đủ chỗ ghi SỐ LƯỢT trên đầu và ngày dd/mm
   dưới chân — đọc được trên điện thoại 375 px, vuốt ngang để xem đủ 30 ngày. */
.chart{display:flex;align-items:flex-end;gap:4px;height:136px;padding-top:6px;overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.chart .col{flex:1 0 30px;min-width:30px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.chart .col .n{font-size:10px;font-weight:700;color:var(--xanh);text-align:center;line-height:13px;
  min-height:13px;margin-bottom:2px}
.chart .bar{background:var(--xanh);border-radius:3px 3px 0 0;min-height:2px;transition:height .2s}
.chart .col.khong .bar{background:var(--line)}
.chart .col .d{font-size:9.5px;color:var(--muted);text-align:center;margin-top:4px;white-space:nowrap}
/* 30/09/2026 (anh Phước: "nhớ cho màu phân biệt nha"): MỘT màu xanh thương hiệu cho cả biểu đồ, riêng
   HÔM NAY cột cam. Ngày cao nhất chỉ in đậm (trước đây cũng cam nên lẫn với hôm nay).
   Chữ số và chân cột hôm nay để màu chữ thường in đậm + ghi thẳng chữ "Hôm nay": cỡ chữ 9,5–10 px mà tô cam
   thì tương phản chỉ ~2,6:1, không đọc được — màu nằm ở cột, nghĩa nằm ở chữ. */
.chart .col.hom-nay .bar{background:var(--cam)}
.chart .col.hom-nay .n,.chart .col.hom-nay .d{color:var(--text);font-weight:800}
.chart .col.dinh .n{font-weight:800}
.tk-ngay-tong{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 10px}
.tk-ngay-tong b{color:var(--text)}
.tk-ngay-ghi{font-size:11.5px;color:var(--muted);margin-top:8px}

/* 30/09/2026 (anh Phước: "các phiếu ký của tôi theo ngày, hoặc chọn mới nhất lên trên, chọn theo người gởi ký"):
   hàng lọc của "Phiếu của tôi" + dòng tiêu đề từng ngày. Vừa màn 375 px, không đẩy trang trượt ngang. */
.loc-phieu{display:flex;flex-direction:column;gap:7px;margin:0 0 12px}
.loc-phieu .loc-hang{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.loc-phieu select{flex:1 1 140px;width:auto;min-width:0;font-size:13.5px;padding:8px 9px;background:#fff}
.loc-phieu .loc-nhanh button{flex:1 1 auto;font:inherit;font-size:12.5px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;white-space:nowrap}
.loc-phieu .loc-nhanh button.on{background:var(--xanh-nhat);border-color:var(--xanh);color:var(--xanh);font-weight:650}
.loc-phieu .loc-khoang input[type=date]{flex:1 1 118px;width:auto;min-width:0;font-size:13px;padding:7px 8px;
  background:#fff}
.loc-phieu .loc-khoang .den{color:var(--muted);font-size:13px;flex:none}
.loc-phieu .loc-khoang .btn{flex:none}
.loc-bao{font-size:12.5px;color:var(--muted);margin:12px 0 0;text-align:center}
.ngay-dau{position:sticky;top:-1px;z-index:2;display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;margin:12px 0 7px;padding:5px 10px;background:var(--xanh-nhat);border-radius:8px;
  font-size:12.5px;font-weight:650;color:var(--xanh)}
.ngay-dau b{font-weight:600;font-size:11.5px;color:var(--muted);white-space:nowrap}
.nguoi{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.nguoi:last-child{border:0}
.nguoi .av{width:36px;height:36px;border-radius:50%;background:var(--xanh-nhat);color:var(--xanh);
  display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.nguoi .n{flex:1;min-width:0}
.nguoi .n b{font-size:13.5px;display:block}
.nguoi .n span{font-size:11.5px;color:var(--muted)}
.nguoi .c{font-weight:700;color:var(--xanh);font-size:15px}

/* ---------- o ve chu ky ---------- */
.pad-wrap{position:relative;border:2px dashed #b9c4dc;border-radius:12px;background:#fcfdff;overflow:hidden}
#pad{display:block;width:100%;height:190px;touch-action:none;cursor:crosshair}
.pad-line{position:absolute;left:8%;right:8%;bottom:34%;border-bottom:1.5px solid var(--line);pointer-events:none}
.pad-hint{position:absolute;left:9%;bottom:calc(34% + 5px);font-size:11.5px;color:#aab3c2;pointer-events:none}
.pad-wrap.co-net .pad-hint{display:none}
.ck-xem{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px;margin-bottom:11px;
  display:grid;place-items:center;min-height:96px}
.ck-xem img{max-width:100%;max-height:130px}

.brand-sp{display:flex;align-items:center;justify-content:center;gap:9px;margin:2px 0 7px}
.brand-sp img{height:30px;width:auto}
.brand-sp span{font-size:19px;font-weight:750;color:var(--navy);letter-spacing:.2px}

/* ---------- tai anh chu ky co san ---------- */
.xem-trong{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:grid;place-items:center;min-height:150px;padding:10px;
  /* nen ca-ro de thay ro vung da trong suot */
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#eceff4 25%,transparent 25%,transparent 75%,#eceff4 75%),
    linear-gradient(45deg,#eceff4 25%,transparent 25%,transparent 75%,#eceff4 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;
}
#cvAnh{max-width:100%;max-height:210px;display:block}
input[type=range].truot{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;padding:0;
  background:var(--line);border-radius:99px;border:0;outline:none
}
input[type=range].truot::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--cam);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:pointer
}
input[type=range].truot::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--cam);
  border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:pointer
}
.sl{float:right;font-weight:700;color:var(--xanh);font-variant-numeric:tabular-nums}
.ck-hang{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;margin:2px 0 0}
.ck-hang input{width:19px;height:19px;flex:none}

/* ---------- goi y gui Zalo tren may tinh ---------- */
.goi-y{
  background:var(--xanh-nhat);border-radius:11px;padding:13px 14px;margin-top:12px;
  font-size:12.5px;color:#37445c;line-height:1.6;text-align:left
}
.goi-y > b{display:block;color:var(--navy);font-size:13.5px;margin-bottom:4px}
.goi-y .cach{display:flex;gap:9px;margin-top:9px;align-items:flex-start}
.goi-y .cach > span{
  width:19px;height:19px;border-radius:50%;background:var(--xanh);color:#fff;flex:none;
  display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:1px
}

/* ---------- chuyen ky ---------- */
.cho-ky{background:#fff;border:1px solid var(--line);border-left:3px solid var(--cam);
  border-radius:11px;padding:12px 13px;margin-bottom:9px}
.cho-ky .t{font-weight:650;font-size:13.5px;margin-bottom:3px;word-break:break-word}
.cho-ky .m{font-size:12.5px;color:var(--muted);line-height:1.6}
.cho-ky .m b{color:var(--text);font-weight:600}
.cho-ky .act{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.nguoi-chon{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:7px;cursor:pointer;background:#fff}
.nguoi-chon:hover{background:var(--xanh-nhat);border-color:var(--xanh)}
.nguoi-chon .av{width:34px;height:34px;border-radius:50%;background:var(--xanh-nhat);color:var(--xanh);
  display:grid;place-items:center;font-weight:700;font-size:13.5px;flex:none}
.nguoi-chon .n{flex:1;min-width:0}
.nguoi-chon .n b{display:block;font-size:13.5px}
.nguoi-chon .n span{font-size:11.5px;color:var(--muted)}

/* ---------- canh bao sai quy trinh ---------- */
.bang-do{
  background:#FDECEC;border:1px solid #E9B6B6;border-left:4px solid var(--red);
  border-radius:11px;padding:13px 14px;margin-bottom:12px
}
.bang-do .td{font-weight:700;font-size:14px;color:#9B1C1C;margin-bottom:5px;
  display:flex;align-items:center;gap:8px}
.bang-do .td .cham{width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.bang-do .nd{font-size:12.8px;color:#7A2222;line-height:1.62}
.bang-do .nd b{color:#5E1414}
.bang-vang{background:#FDF4E3;border-color:#EBD6A6;border-left-color:var(--warn)}
.bang-vang .td{color:#8A5A12}
.bang-vang .td .cham{background:var(--warn)}
.bang-vang .nd{color:#7A5418}
.bang-vang .nd b{color:#5E3F10}

/* danh sach nguoi ky da chon */
.da-chon{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 11px}
.the-nguoi{display:flex;align-items:center;gap:7px;background:var(--xanh);color:#fff;
  border-radius:99px;padding:5px 6px 5px 11px;font-size:12.5px;font-weight:600}
.the-nguoi .stt{background:rgba(255,255,255,.28);border-radius:50%;width:17px;height:17px;
  display:grid;place-items:center;font-size:10.5px}
.the-nguoi button{background:rgba(255,255,255,.25);border:0;color:#fff;width:19px;height:19px;
  border-radius:50%;cursor:pointer;font-size:13px;line-height:1;padding:0}
.the-nguoi button:hover{background:rgba(255,255,255,.45)}
.nguoi-chon.da{background:var(--xanh-nhat);border-color:var(--xanh)}
.nguoi-chon .cap{font-size:10.5px;color:var(--muted);background:#eef1f7;
  border-radius:99px;padding:2px 7px;white-space:nowrap}

/* tien do day chuyen */
.tien-do{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.buoc{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.buoc .o{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex:none}
.buoc.xong .o{background:var(--ok);border-color:var(--ok)}
.buoc.dang .o{border-color:var(--cam);background:#fff;box-shadow:0 0 0 3px rgba(245,130,31,.2)}
.buoc.xong{color:var(--ok)}
.buoc.dang{color:var(--cam);font-weight:650}

/* ---------- nhac cho ky ---------- */
.oTab{position:relative;display:inline-flex}
nav.tabs button .huy{
  position:absolute;top:-5px;right:-9px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;line-height:1;box-shadow:0 0 0 2px #fff
}

.moi-nhac{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:space-between;
  background:var(--cam-nhat, #FDEBD9);border:1px solid #F2C99E;border-radius:11px;
  padding:11px 12px;margin-bottom:11px
}
.moi-nhac b{display:block;font-size:13.5px;color:#8A5A12;margin-bottom:2px}
.moi-nhac span{display:block;font-size:12.2px;color:#7A5418;line-height:1.5}
.moi-nhac .nut{display:flex;gap:7px;flex:none}

.o-nhac{
  position:fixed;left:12px;right:12px;bottom:calc(66px + var(--safe-b));z-index:60;
  max-width:520px;margin:0 auto;
  background:var(--xanh);color:#fff;border-radius:12px;padding:12px 14px;
  box-shadow:0 8px 26px rgba(18,39,95,.32);
  font-size:13.5px;line-height:1.5;cursor:pointer;
  animation:nhacLen .22s ease-out
}
.o-nhac b{display:block;font-size:14px;margin-bottom:2px}
@keyframes nhacLen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- dong co o danh dau ---------- */
.dong-chon{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.8px;
  font-weight:600;color:#38445c}
.dong-chon input{width:19px;height:19px;margin:0;flex:none;accent-color:var(--xanh)}

/* 5 tab thi chu nho lai mot chut cho vua man hinh hep */
nav.tabs button{font-size:10.5px}
nav.tabs button svg{width:22px;height:22px}
@media (max-width:340px){nav.tabs button{font-size:9.5px}}

/* 11/09/2026: danh xung Ong/Ba dung truoc o ho ten (in len khoi chu ky thay chu Ky boi) */
.dx-ten{display:flex;gap:6px}
.dx-ten select{flex:none;width:112px}
.dx-ten input{flex:1;min-width:0}
/* 11/09/2026: chuoi da dung gan day trong hop chon day chuyen */
.ls-chuoi{margin:0 0 12px}
.ls-chuoi .btn{display:block;width:100%;text-align:left;margin-top:6px;white-space:normal;line-height:1.35}
.nguoi-chon .cap.hay{background:#EEF3FB;color:var(--xanh)}
.buoc-cuoi-note{font-size:12.5px;color:var(--muted);margin:4px 0 0}
/* 11/09/2026: hop HOI KY (chon nguoi -> email -> Zalo) */
.hk-dong{padding:9px 0;border-bottom:1px solid var(--line)}
.hk-dong small,.hk-dong-kq small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.hk-kq{margin:12px 0;background:var(--xanh-nhat);border-radius:11px;padding:10px 12px}
.hk-dong-kq{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0}
.hk-dong-kq .btn{flex:none;width:auto}
/* 11/09/2026: canh bao chua dong bo Google Drive */
.cb-nut{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.cb-nut .btn{width:auto;margin:0}
#canhBaoDrive .nd b{font-weight:700}
/* 11/09/2026: chep loi nhan Zalo khi trinh duyet khong cho chep tu dong */
.hk-dong-kq{flex-wrap:wrap}
.hk-chep{flex-basis:100%;width:100%;min-height:72px;font-size:12.5px;margin-top:4px}
/* 11/09/2026: the kho luu tru Drive (quan tri) */
.kho-tieu{margin:12px 0 4px;font-weight:650;font-size:13px}
#khoDs .kv small{color:var(--muted)}
#cardKho .cb-nut{margin:12px 0 4px}
/* 11/09/2026: vung chu ky da co tren trang - tranh ky chong len */
.da-ky-o{position:absolute;border:1.5px dashed #8a93a6;background:rgba(110,120,140,.18);
  pointer-events:none;border-radius:4px;font-size:10.5px;font-weight:700;color:#4a5568;
  display:flex;align-items:flex-start;justify-content:flex-end;padding:2px 4px;box-sizing:border-box}

/* 11/09/2026 (anh Phuoc - quy trinh don gian): goi y cham la chon, trang thai tung nguoi, xem ban da ky */
.goi-y-nhanh{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.chip-nguoi{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #d6dce8;background:#fff;border-radius:99px;
  padding:7px 12px;font:inherit;font-size:13.5px;cursor:pointer;color:inherit;line-height:1.2}
.chip-nguoi small{color:var(--muted);font-size:11.5px}
.chip-nguoi .stt{display:none;min-width:20px;height:20px;border-radius:50%;background:#F5821F;color:#fff;font-size:12px;
  font-weight:700;align-items:center;justify-content:center}
.chip-nguoi.da{border-color:#F5821F;background:#FFF4E8}
.chip-nguoi.da .stt{display:inline-flex}
.gui-nhanh{margin:10px 0 9px;padding:11px 12px;border:1px solid #F0CFA8;background:#FFFAF3;border-radius:12px}
.gn-tieu{font-weight:650;margin-bottom:2px}
.gn-thu-tu{font-size:13px;color:var(--muted);margin:0 0 8px}
.ds-chon-nguoi{max-height:38vh;overflow-y:auto}
.them-tuy-chon{margin-top:12px;border-top:1px dashed #d6dce8;padding-top:6px}
.them-tuy-chon summary{cursor:pointer;font-weight:600;padding:7px 0}
.ds-nguoi-tt{margin:7px 0 2px;display:flex;flex-direction:column;gap:3px}
.nguoi-tt{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:13.5px}
.nguoi-tt .dau{width:16px;text-align:center;font-weight:700;color:var(--muted)}
.nguoi-tt.xong .dau{color:var(--ok)} .nguoi-tt.dang .dau{color:var(--warn)} .nguoi-tt.loi .dau{color:var(--red)}
.nguoi-tt .tt{color:var(--muted);font-size:12.5px}
.nguoi-tt.dang .tt{color:var(--warn);font-weight:600}
.nguoi-tt.loi .tt{color:var(--red)}
.xb-sheet{max-width:780px;width:100%;max-height:94vh;display:flex;flex-direction:column;gap:8px}
.xb-dau{display:flex;justify-content:space-between;align-items:center;gap:10px}
.xb-khung{flex:1;overflow:auto;background:#eef1f6;border-radius:10px;min-height:220px}
.xb-khung img{max-width:100%;display:block;margin:0 auto}
.xb-nut{display:flex;justify-content:space-between;align-items:center;gap:8px}

/* 16/09/2026 (anh Phuoc): ky rieng nhieu file (bo file), chon nhieu muc Cho toi ky, canh bao chua dong bo Drive */
/* dai file tren man dat o ky - cuon ngang, 375px van vua */
.bo-chip{display:flex;gap:7px;overflow-x:auto;padding:2px 1px 9px;margin-bottom:3px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
/* 06/11/2026 (anh Phuoc): nut lat GIUA CAC FILE trong bo + "File X/N" */
.file-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 9px;font-size:13px;color:var(--muted)}
.file-pager b{color:var(--xanh)}
.file-pager button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 13px;font-size:13px;font-weight:650;cursor:pointer;color:var(--xanh)}
.file-pager button[disabled]{opacity:.4;cursor:default}
.bo-chip-o{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:92px;max-width:168px;
  border:1.5px solid #d6dce8;background:#fff;border-radius:11px;padding:6px 10px;font:inherit;cursor:pointer;color:inherit;
  text-align:left;line-height:1.25}
.bo-chip-o b{display:block;max-width:100%;font-size:12.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bo-chip-o small{font-size:11px;color:var(--muted)}
.bo-chip-o.dang-mo{border-color:var(--xanh);background:var(--xanh-nhat);box-shadow:0 0 0 2px rgba(32,63,154,.15)}
.bo-chip-o.dang small{color:var(--cam);font-weight:600}
.bo-chip-o.xong small{color:var(--ok);font-weight:600}
.bo-chip-o.loi small{color:var(--red);font-weight:600}
.bo-chip-o.can-dat small{color:var(--warn);font-weight:600}
.bo-chip-o.nhac{animation:boNhac .45s ease 2}
@keyframes boNhac{0%,100%{transform:none}30%{transform:translateX(-4px)}70%{transform:translateX(4px)}}
/* tom tat cac phieu nhan trong bo */
.bo-tom-tat{background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:10px;
  font-size:12.8px;line-height:1.55;color:#37445c}
.bo-tt-dong{padding:4px 0 0;margin-top:4px;border-top:1px dashed #e3e7ef;word-break:break-word}
.bo-tt-dong.dang-mo{font-weight:650;color:var(--xanh)}
.bo-tt-dong .do{color:var(--red)}
/* man ket qua bo file */
.bo-kq{text-align:left;margin:2px 0 12px}
.bo-kq-dong{background:#fff;border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:11px;
  padding:10px 12px;margin-bottom:8px}
.bo-kq-dong.loi{border-left-color:var(--red)}
.bo-kq-dong.cho{border-left-color:var(--line)}
.bo-kq-dong .t{display:flex;gap:7px;align-items:baseline;font-weight:650;font-size:13.5px;word-break:break-word}
.bo-kq-dong .t .dau{flex:none;font-weight:800;color:var(--ok)}
.bo-kq-dong.loi .t .dau{color:var(--red)}
.bo-kq-dong.cho .t .dau{color:var(--muted)}
.bo-kq-dong .pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.bo-kq-dong .m{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:4px}
.bo-kq-soat,.bo-kq-loi{font-size:12.5px;color:var(--red);font-weight:600;line-height:1.5;margin-top:5px}
.bo-kq-dong .act{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.bo-drive{font-size:12.5px;color:var(--muted);margin-top:7px}
.bo-drive.ok{color:var(--ok)} .bo-drive.loi{color:var(--red)}
#btnBoGui{margin-top:9px}
/* chon nhieu muc Cho toi ky */
.o-chon-cho{display:inline-flex;align-items:center;margin:0 8px 0 0;padding:2px;vertical-align:-4px;cursor:pointer}
.o-chon-cho input{width:19px;height:19px;margin:0;padding:0;accent-color:var(--cam)}
.chon-tat-ca{margin:0 0 9px;font-size:13px}
.cho-ky:has(.o-chon-cho input:checked){border-color:#F0CFA8;background:#FFFAF3}
.nut-ky-chon{position:fixed;left:16px;right:16px;bottom:calc(66px + var(--safe-b, 0px));max-width:728px;margin:0 auto;z-index:31}
button.btn.nut-ky-chon{width:auto;box-shadow:0 6px 18px rgba(18,39,95,.28)}
#tab-cho.co-nut-chon{padding-bottom:150px}
#app:has(#tab-cho:not(.hide) #btnKyChon:not(.hide)) #oNhac{display:none!important}
#app:has(#tab-cho:not(.hide) .bar-ky-chon:not(.hide)) #oNhac{display:none!important}

/* 24/09/2026: Thanh thao tac ky hang loat & goi ky hang loat */
.bar-ky-chon{position:fixed;left:16px;right:16px;bottom:calc(66px + var(--safe-b, 0px));max-width:740px;margin:0 auto;z-index:31;
  background:#fff;border-radius:14px;box-shadow:0 8px 26px rgba(18,39,95,.25);border:1.5px solid #d2deed;padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;animation:slideUp .2s ease-out}
.bar-ky-chon-trai{font-weight:700;font-size:13.5px;color:var(--cam);display:flex;align-items:center;gap:6px}
.bar-ky-chon-nut{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bar-ky-chon.hide{display:none!important}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}

.hl-progress-wrap{background:#e2e8f0;border-radius:8px;height:10px;overflow:hidden;margin-bottom:12px}
.hl-progress-fill{background:linear-gradient(90deg, var(--cam), #ff9436);height:100%;width:0%;transition:width .25s ease}
.hl-ds-item{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #edf2f7;font-size:13px}
.hl-ds-item:last-child{border-bottom:none}
.hl-badge-ok{color:#0e7043;background:#e8f6ef;padding:2px 7px;border-radius:6px;font-size:11.5px;font-weight:600;white-space:nowrap}
.hl-badge-err{color:#c5221f;background:#fce8e6;padding:2px 7px;border-radius:6px;font-size:11.5px;font-weight:600;white-space:nowrap}
.hl-badge-dang{color:#b45309;background:#fef3c7;padding:2px 7px;border-radius:6px;font-size:11.5px;font-weight:600;white-space:nowrap}
/* nguoi chua dong bo Drive: dau "!" nho + dong chu (dien thoai khong co tooltip) */
.drive-cham{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;background:var(--warn);
  color:#fff;font-size:10.5px;font-weight:800;line-height:1;margin-left:4px;vertical-align:1px}
.nguoi-chon .n .drive-nhan{display:block;font-size:11.5px;color:#8A5A12;font-weight:600;margin-top:1px}
.gn-drive{text-align:left;font-size:12.5px;margin:0 0 9px}
.cho-ky .m.drive-phieu{color:#8A5A12;margin-top:5px}
/* 30/09/2026 (anh Phuoc): phieu da ky xong ma may chu khong con giu tep - noi ro tep nam o Drive */
.cho-ky .m.phieu-kho{color:var(--muted);margin-top:5px}
.kho-ly-do{color:#8A5A12}
#canhBaoDriveKy .nd b{font-weight:700}

/* 17/09/2026 (anh Phuoc): nhieu chu ky tay - danh sach o tab Chung thu, o chon chu ky o man ky, xem truoc trong o ky */
/* the Chung thu: moi dong = anh nen ca-ro + ten + nut (nut tu xuong dong o 375px) */
.ck-ds{margin:0 0 12px}
.ck-dong{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:center;padding:10px;
  border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:8px}
.ck-dong.mac-dinh{border-color:var(--xanh);box-shadow:0 0 0 2px rgba(32,63,154,.12)}
.ck-dong-anh.xem-trong{min-height:0;height:64px;padding:4px;border-radius:9px}
.ck-dong-anh img{max-width:100%;max-height:54px;display:block}
.ck-dong-ten{font-size:14px;line-height:1.35;word-break:break-word;margin-bottom:7px}
.ck-dong-ten b{font-weight:650}
.ck-dong-ten .pill{margin-left:3px;vertical-align:1px}
.ck-dong-nut{display:flex;flex-wrap:wrap;gap:6px}
.ck-dong-nut .btn.sm{padding:7px 11px;font-size:13px}
/* man ky: dong "Chu ky dung lan nay" (anh + ten + nut Doi) */
.chon-ck{display:flex;align-items:center;gap:10px}
.chon-ck-anh.xem-trong{flex:none;width:92px;height:46px;min-height:0;padding:3px;border-radius:8px}
.chon-ck-anh img{max-width:100%;max-height:38px;display:block}
.chon-ck-ten{flex:1;min-width:0;font-size:14px;line-height:1.3}
.chon-ck-ten b{display:block;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chon-ck-ten small{display:block;font-size:11.5px;color:var(--muted)}
.chon-ck .btn.sm{flex:none}
/* bang chon chu ky: dong lon, cham la chon */
.ck-chon-dong{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;
  margin-bottom:8px;background:#fff;cursor:pointer}
.ck-chon-dong.dang-chon{border-color:var(--xanh);background:var(--xanh-nhat)}
.ck-chon-dong:focus-visible{outline:2px solid var(--xanh);outline-offset:1px}
.ck-chon-anh.xem-trong{flex:none;width:112px;height:60px;min-height:0;padding:4px;border-radius:9px}
.ck-chon-anh img{max-width:100%;max-height:52px;display:block}
.ck-chon-tt{flex:1;min-width:0;font-size:14px;line-height:1.35;word-break:break-word}
.ck-chon-tt b{display:block;font-weight:650;margin-bottom:3px}
.ck-chon-tt small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.ck-chon-dau{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff}
.ck-chon-dong.dang-chon .ck-chon-dau{background:var(--xanh)}
.ck-lk{background:none;border:0;padding:4px 0;font:inherit;font-size:12.5px;font-weight:600;color:var(--xanh);
  text-decoration:underline;cursor:pointer}
.ck-lk[disabled]{opacity:.6;text-decoration:none}
.ck-xem-dong{cursor:default}
.sheet p.ck-qt-so{margin:0 0 8px;font-weight:600}
/* bang dat ten / xoa chu ky */
.ck-goi-y{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ck-md-hang{margin:0 0 12px}
.ck-xoa-anh.xem-trong{min-height:0;height:96px;margin:6px 0 12px;padding:6px}
.ck-xoa-anh img{max-width:100%;max-height:82px;display:block}
/* anh chu ky se dung, trong nua tren o ky; khong bat cham nen keo / doi co o ky nhu cu */
.sigbox .sig-xem{position:absolute;left:50%;top:2px;transform:translateX(-50%);width:auto;height:auto;
  max-width:70%;max-height:50%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.sigbox.co-anh{align-items:end;padding-bottom:2px}

/* 17/09/2026 (anh Phuoc): huy phieu (pill xam) + luong ky mau (hang chip khi ky xong, the va bang quan tri) */
.pill.xam{background:#eceff4;color:#5b6577}
.cho-ky.phieu-huy{border-left-color:#9aa3b2}
.cho-ky .m.phieu-huy-ly-do{margin-top:5px}
/* hang chip luong ky mau: o goi y nhanh (the can giua) + bang chon nguoi ky */
.luong-mau{text-align:left;margin:0 0 10px;padding:0 0 9px;border-bottom:1px dashed #F0CFA8}
.sheet .luong-mau{border-bottom-color:#d6dce8}
.lm-tieu{font-weight:650;font-size:13.5px;margin-bottom:6px}
.lm-chip{display:flex;flex-wrap:wrap;gap:7px}
.chip-mau{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;border:1.5px solid #d6dce8;background:#fff;
  border-radius:10px;padding:7px 11px;font:inherit;font-size:13.5px;cursor:pointer;color:inherit;line-height:1.25;
  text-align:left;max-width:100%}
.chip-mau b{font-weight:650;word-break:break-word}
.chip-mau small{color:var(--muted);font-size:11px;font-weight:600}
.chip-mau.dang{border-color:var(--xanh);background:var(--xanh-nhat);box-shadow:0 0 0 2px rgba(32,63,154,.12)}
.chip-mau.dang b{color:var(--xanh)}
.lm-mo-ta{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.lm-mo-ta b{color:var(--text)}
.lm-canh{font-size:12.5px;color:#8A5A12;background:#FDF4E3;border:1px solid #F3E2BF;border-radius:9px;padding:6px 9px;
  margin-top:7px;line-height:1.5}
.lm-sua{display:inline-block;font-size:12px;font-weight:650;color:var(--warn);margin-top:7px}
.gn-nxl{font-size:13px;color:var(--muted);margin:0 0 8px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.gn-nxl b{color:var(--text)}
.gn-bo-nxl{border:0;background:#eef1f7;color:var(--muted);width:24px;height:24px;border-radius:50%;cursor:pointer;
  font-size:15px;line-height:1;padding:0}
/* quan tri: danh sach luong mau + bang them / sua (375px: nut xuong dong) */
.lm-item.lm-tat{opacity:.72}
.lm-nut{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
#cardLuongMau #btnThemLuongMau{margin-top:4px}
.lm-ky{display:flex;flex-direction:column;gap:6px;margin:0 0 9px}
.lm-ky-dong{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:7px 8px;background:#fff}
.lm-ky-dong.loi{border-color:#E9B6B6;background:#FDECEC}
.lm-ky-dong .stt{flex:none;width:22px;height:22px;border-radius:50%;background:var(--xanh);color:#fff;display:grid;
  place-items:center;font-size:12px;font-weight:700}
.lm-ky-dong .ten{flex:1;min-width:0;font-size:13.5px;line-height:1.3;word-break:break-word}
.lm-ky-dong .ten small{display:block;font-size:11.5px;color:var(--muted)}
.lm-ky-dong.loi .ten small{color:var(--red)}
.lm-ky-dong button{flex:none;width:34px;height:34px;border:1px solid var(--line);background:#f5f7fb;border-radius:8px;
  font-size:15px;cursor:pointer;color:var(--xanh);padding:0}
.lm-ky-dong button[disabled]{opacity:.35;cursor:default}
.lm-ds{max-height:30vh;margin-top:8px}
.lm-nhan,.lm-nhom-tieu{font-size:13px;font-weight:600;color:#38445c;margin:0 0 6px}
.lm-nhom-tieu{margin:12px 0 6px}
.lm-chon{margin-top:8px;padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:#fbfcfe}
.lm-cb{display:flex;flex-direction:column;gap:7px;max-height:32vh;overflow-y:auto}
.lm-sheet .dong-chon{margin:5px 0}
.lm-cb-dong{font-weight:500}
.lm-cb-dong small{color:var(--muted);font-weight:400}
.lm-trong{font-size:12.5px;color:var(--muted);padding:4px 0}
.lm-hong{color:var(--red);font-weight:600;font-size:12px}

/* 17/09/2026 (anh Phuoc: "luong nay the hien duoc nhac tren luc ky"): o nhac luong dau the tuy chon o man dat o ky.
   Gon o 375px: tieu de + day nguoi viet lien mot doan (xuong dong duoc, ten khong ngat giua) + dong "ky xong ..." */
.nhac-luong{margin:0 0 12px;padding:8px 10px;border:1px solid #d6dce8;border-left:3px solid var(--xanh);border-radius:10px;
  background:var(--xanh-nhat);font-size:13px;line-height:1.45;color:var(--text);text-align:left}
.nl-dong{display:flow-root;word-break:break-word}
.nl-tieu b{font-weight:650}
.nl-doi{float:right;background:none;border:0;padding:4px 2px 4px 8px;margin:-4px 0 -4px 6px;font:inherit;font-size:12.5px;
  font-weight:650;color:var(--xanh);text-decoration:underline;cursor:pointer}
.nl-day{color:#38445c}
.nl-n{white-space:nowrap}
.nl-toi{font-weight:700;color:var(--xanh)}
.nl-da{color:var(--ok);font-weight:700}
.nl-mui{color:var(--muted)}
.nl-gon{background:none;border:0;padding:3px 0;margin:-3px 0;font:inherit;color:var(--xanh);font-weight:600;
  text-decoration:underline dotted;cursor:pointer;white-space:nowrap}
.nl-trong{color:var(--muted)}
.nl-sau{margin-top:2px;font-weight:600}
.nl-sau b{color:var(--xanh)}
.nl-canh{margin-top:3px;font-size:11.5px;color:var(--muted);line-height:1.4}
.nl-chon-dong .ck-chon-tt small{word-break:break-word}
/* the quan tri: dong nhac luong mau hien o dau */
#cardLuongMau p.lm-nhac-hien{margin:0 0 6px;font-size:12.5px}

/* 24/09/2026 (anh Phuoc: "phan ky them phan tai them file, nut noi file, co the noi (n) file"): hang nut tren
   man dat o ky + danh sach cac phan se noi. Gon o 375px: ten file ellipsis, danh sach tu cuon khi nhieu phan. */
.dat-nut{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:7px}
.dat-nut .btn{white-space:nowrap}
.bo-noi{display:flex;justify-content:flex-end;margin:-1px 0 9px}
.noi-tep{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line)}
.noi-ds{display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow-y:auto;margin-bottom:10px;
  padding-right:1px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.noi-dong{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe}
.noi-so{flex:none;width:21px;height:21px;border-radius:50%;background:var(--xanh-nhat);color:var(--xanh);
  font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.noi-ten{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.noi-ten b{display:block;max-width:100%;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.noi-ten .do{font-size:11px;color:var(--red);font-weight:700}
.noi-trang{flex:none;font-size:11.5px;color:var(--muted);white-space:nowrap}
.noi-nut{flex:none;display:flex;gap:3px}
.noi-b{width:29px;height:29px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);
  font:inherit;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.noi-b:disabled{opacity:.35;cursor:default}
.noi-b.bo{color:var(--red)}
.noi-nhac{margin:8px 0 0;font-size:12px;color:var(--muted);text-align:center}
#noiTep #noiMsg{margin:10px 0 0}
.noi-hanh-dong{display:flex;gap:8px;align-items:center}
.noi-hanh-dong button:first-child{flex:1}

/* 24/09/2026: bang cap nhat PWA khi co ban moi */
.bang-cap-nhat{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:var(--cam);color:#fff;font-weight:600;font-size:13.5px;
  text-align:center;padding:10px 16px;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
  display:flex;align-items:center;justify-content:center;gap:8px;
  animation:truotXuong .3s ease-out;
}
@keyframes truotXuong{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* 24/09/2026: danh sach tai lieu dang do */
.dang-do-dong{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;gap:8px}
.dang-do-ten{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dang-do-phu{font-size:11.5px;color:var(--muted);white-space:nowrap}

/* ================================================================================================
   30/09/2026 (anh Phước) — bốn việc anh giao: bộ lọc cho mọi danh sách, tràn màn hình trên máy tính,
   ảnh nhỏ xem trước trên thẻ, và màu phân biệt. Tất cả phần TRÀN MÀN HÌNH nằm trong @media từ 1024 px
   trở lên — điện thoại (375) và máy tính bảng (768) không đổi một điểm ảnh nào.
   ================================================================================================ */

/* ---------- thanh lọc / sắp xếp do app.js tự dựng (dùng lại đúng khuôn .loc-phieu ở trên) ---------- */
.loc-ds input.loc-tim{-webkit-appearance:none;appearance:none}
.loc-ds .loc-khoang:empty{display:none}

/* ---------- ảnh nhỏ xem trước trên thẻ ("có priver file ký trước cho người ký nhìn qua biết file nào") --
   56x72 trên điện thoại (đúng cỡ anh nói), to hơn trên máy tính. Tên file vẫn là chữ ngay bên cạnh —
   ảnh chỉ để liếc qua, không thay chữ. Ảnh chưa nạp thì ô vẫn là một trang giấy trắng, không bao giờ
   ra biểu tượng "ảnh vỡ". */
.the-dau{display:flex;align-items:flex-start;gap:11px}
.the-dau .the-chu{flex:1;min-width:0}
.the-anh{flex:none;width:56px;height:72px;padding:0;line-height:0;cursor:pointer;display:block;
  border:1px solid var(--line);border-radius:7px;background:#fff;overflow:hidden}
.the-anh img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;background:#fff}
.the-anh img:not([src]){visibility:hidden}
.the-anh.the-anh-trong{background:var(--xanh-nhat)}
.the-anh:focus-visible{outline:2px solid var(--xanh);outline-offset:1px}

/* ---------- 01/10/2026 (anh Phước: "nhưng giờ không có chỗ đổi tên file trên Sign ạ") ----------
   Tên tài liệu trên màn đặt ô ký + nút "Đổi tên" nhỏ ngay cạnh; và ô xem trang đầu trong hộp đặt tên
   (chia sẻ 2-3 file sang cùng lúc thì nhìn ảnh mới biết đang đặt tên cho file nào). */
/* 01/10/2026 (anh Phước): them nut "Doi ten" lam vo man ky tren dien thoai - hang dau co toi 6 nut nen
   cot trai bi bop con 29px, #fName ve 0px (ten chung tu BIEN MAT) va nut "Doi ten" de len "Tai them file",
   cham giua nut lai mo hop chon file. Nay cho hang dau XUONG DONG khi chat: khoi ten giu it nhat 190px,
   dai nut tut xuong hang duoi; trong khoi ten thi nut "Doi ten" tut xuong khi ten con duoi 150px. */
.dat-dau{flex-wrap:wrap}
.dat-dau>.dat-dau-ten{min-width:0;flex:1 1 190px}   /* khong de style inline nua: inline de len CSS */
.ten-tep-dong{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.ten-tep-dong>#fName{min-width:0;flex:1 1 150px}
.nut-doi-ten{flex:none}
.dat-ten-xem{display:flex;align-items:center;gap:11px;margin-top:10px;padding:9px;
  border:1px solid var(--line);border-radius:9px;background:var(--xanh-nhat)}
.dat-ten-xem img{flex:none;width:62px;height:80px;object-fit:cover;object-position:top center;
  border:1px solid var(--line);border-radius:6px;background:#fff;display:block}
.dat-ten-xem img:not([src]){visibility:hidden}
.dat-ten-tt{font-size:12.5px;color:var(--muted);line-height:1.5;min-width:0}

/* ---------- màu phân biệt trạng thái ("nhớ cho màu phân biệt nha") ----------
   Chỉ dùng các màu đã có sẵn trong bảng ở đầu tệp. Màu KHÔNG BAO GIỜ là thứ duy nhất mang nghĩa: thẻ nào
   cũng còn nguyên chữ ("đang chuyền" / "đã ký xong" / "đã huỷ" / "bị từ chối" / "chờ tôi ký"), dòng từng
   người cũng còn nguyên chữ ("✓ đã ký" / "⏳ đang chờ" / "chưa tới lượt"). */
.cho-ky.tt-chuyen{border-left-color:var(--cam)}
.cho-ky.tt-xong{border-left-color:var(--ok)}
.cho-ky.tt-huy,.cho-ky.phieu-huy{border-left-color:var(--muted)}
.cho-ky.tt-tu-choi{border-left-color:var(--red)}
/* việc đang chờ CHÍNH MÌNH ký: mạnh nhất màn hình — nền cam nhạt + vạch cam dày */
.cho-ky.toi-ky{background:var(--cam-nhat);border-left-width:5px;border-left-color:var(--cam)}
/* đã tick để ký hàng loạt: nền giữ nguyên (đã là cam nhạt), đánh dấu bằng viền sáng bên ngoài */
.cho-ky.toi-ky:has(.o-chon-cho input:checked){background:var(--cam-nhat);box-shadow:0 0 0 2px var(--cam)}
/* từng người trong thẻ: đã ký = xanh lá Ở DẤU ✓ (dòng 420), chưa tới lượt / đã huỷ = xám.
   30/09/2026 (anh Phuoc): KHÔNG tô --ok cho chữ "đã ký" — #0f8a54 trên nền trắng chỉ được 4,39:1,
   dưới ngưỡng AA 4,5:1 ở cỡ 12,5 px; để chữ ở --muted (7,53:1), màu chỉ nằm ở dấu ✓. */
.nguoi-tt.xong .tt{font-weight:600}
.nguoi-tt.chua,.nguoi-tt.chua b,.nguoi-tt.chua .tt{color:var(--muted)}
.nguoi-tt.chua b{font-weight:600}
/* dòng tiêu đề ngày: thêm vạch xanh bên trái cho ranh giới ngày nổi hẳn khi cuộn */
.ngay-dau{border-left:3px solid var(--xanh)}

/* ================== TỪ 1024 px: DÙNG HẾT BỀ NGANG MÀN HÌNH ==================
   Chặn ở 1720 px để một thẻ không bị kéo dài ra 2000 px. Màn đăng nhập / đăng ký giữ nguyên 760 px. */
@media (min-width:1024px){
  #app{max-width:1720px}
  #app nav.tabs{max-width:1720px}
  main{padding:16px 28px 90px}
  .tk-grid{grid-template-columns:repeat(4,1fr)}

  /* danh sách thẻ -> lưới. Dòng tiêu đề ngày, tiêu đề nhóm, dòng báo lọc trải HẾT hàng. */
  .luoi-the{display:grid;grid-template-columns:repeat(var(--cot,1),minmax(0,1fr));gap:0 14px;align-items:start}
  .luoi-the>.ngay-dau,.luoi-the>.kho-tieu,.luoi-the>.empty,.luoi-the>.loc-bao,
  .luoi-the>.cho-chon-hang-loat,.luoi-the>.msg{grid-column:1/-1}

  /* MÀN KÝ (máy tính bảng / dưới 1180px): thẻ tài liệu 713 px. Trên máy tính (≥1180px) thẻ nở rộng ở
     media query phía dưới — đặt ô ký theo TỈ LỆ nên phóng to KHÔNG làm lệch. */
  #step-dat .dat-tai-lieu{width:713px;max-width:100%}

  .the-anh{width:72px;height:93px}
}
@media (min-width:1100px){ .luoi-the{--cot:2} }
@media (min-width:1180px){
  /* 05/11/2026 (anh Phước: "khung xem văn bản to ra... ưu tiên xem văn bản để ký cho rộng" -> "cho dãn full"):
     tài liệu bên trái DÃN FULL lấp đầy chỗ trống (chặn chung ở #app max-width 1720px phía trên), cột điều khiển
     bên phải THU HẸP cố định 320 px, dính theo khi cuộn. Đặt ô ký theo TỈ LỆ (nx,ny ∈ 0..1 × bề ngang thật của
     .stage — xem drawBox / xử lý chạm trong app.js) nên phóng to KHÔNG lệch. Ảnh trang tải ở dpi=150 (app.js
     renderPage) để dãn rộng vẫn nét. Điện thoại / máy tính bảng (<1180px) xếp dọc, KHÔNG đổi. */
  #step-dat{display:flex;align-items:flex-start;gap:18px}
  #step-dat>.dat-trai{flex:1 1 auto;min-width:0}
  #step-dat>.dat-trai .dat-tai-lieu{width:100%}
  #step-dat>.dat-phai{flex:none;width:320px;min-width:0;position:sticky;top:0}
}
@media (min-width:1600px){ .luoi-the{--cot:3} }