/* Khung, khoảng cách và tên lớp lấy nguyên từ reggmc/stripe.ccmecomglobal.com để mấy app
   nội bộ nhìn như một. Khác đúng một chỗ: màu nhấn đổi sang xanh PayPal, vì đây là việc
   PayPal. Đổi màu thì đổi ở khối biến này, đừng rắc mã màu vào từng quy tắc. */
:root{
  --tim:#0070ba; --tim-dam:#005b96; --tim-nhat:#E4F1FA;
  --nen:#F6F9FC; --the:#FFFFFF; --vien:#E3E8EE; --vien-dam:#C1C9D2;
  --chu:#3C4257; --chu-dam:#1A1F36; --chu-mo:#697386; --chu-nhat:#8792A2;

  --ok-nen:#CBF4C9;   --ok-chu:#0E6245;
  --cho-nen:#F8E5B9;  --cho-chu:#983705;
  --hong-nen:#FDE2DD; --hong-chu:#A41C4E;
  --trung-nen:#E3E8EE;--trung-chu:#4F566B;
  --tin-nen:#D6ECFF;  --tin-chu:#0055BC;

  --xanh:#0E6245; --do:#A41C4E; --cam:#983705; --lam:#0055BC;
  /* Vàng của TIỀN BỊ GIỮ — đậm hơn vàng cảnh báo để đọc rõ trên nền trắng ở cỡ chữ bảng */
  --vang:#8A6100;

  --bong:0 1px 3px rgba(50,50,93,.08), 0 1px 0 rgba(0,0,0,.02);
  --bong-cao:0 4px 12px rgba(50,50,93,.10), 0 1px 3px rgba(0,0,0,.06);
  --bo:8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
  background:var(--nen);color:var(--chu);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
.an{display:none !important}
button{font:inherit;cursor:pointer}
h1,h2,h3{color:var(--chu-dam);font-weight:600;letter-spacing:-.01em}
a{color:var(--tim)}
code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--nen);
  border:1px solid var(--vien);border-radius:4px;padding:1px 5px}

/* ---------- đăng nhập ---------- */
.man-hinh-dn{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.the-dn{background:var(--the);border-radius:12px;padding:36px;width:380px;box-shadow:var(--bong-cao)}
.the-dn h1{margin:0;font-size:21px}
.the-dn .phu{margin:4px 0 26px;color:var(--chu-mo);font-size:13px}
.the-dn label{display:block;margin-bottom:16px;font-size:13px;font-weight:500;color:var(--chu)}
.the-dn input{display:block;width:100%;margin-top:6px;padding:9px 12px;border:1px solid var(--vien);
  border-radius:6px;font-size:14px;color:var(--chu-dam);background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.03)}
.the-dn input:focus{outline:0;border-color:var(--tim);box-shadow:0 0 0 3px var(--tim-nhat)}
.the-dn button{width:100%;padding:10px;border:0;border-radius:6px;background:var(--tim);color:#fff;
  font-weight:600;font-size:14px;margin-top:8px;box-shadow:var(--bong)}
.the-dn button:hover{background:var(--tim-dam)}
.loi{color:var(--do);margin:14px 0 0;font-size:13px}

/* ---------- khung ---------- */
header{display:flex;align-items:center;gap:20px;background:var(--the);border-bottom:1px solid var(--vien);
  padding:0 24px;height:56px;position:sticky;top:0;z-index:30}
.hieu{font-weight:600;color:var(--chu-dam);font-size:15px;white-space:nowrap;letter-spacing:-.01em}
.hieu b{color:var(--tim)}
.phai{margin-left:auto;display:flex;align-items:center;gap:10px;white-space:nowrap}
.phu{color:var(--chu-mo)} .nho{font-size:12px}
.phu-nut{border:1px solid var(--vien);background:var(--the);border-radius:6px;padding:6px 12px;
  color:var(--chu);font-weight:500;font-size:13px;box-shadow:var(--bong)}
.phu-nut:hover{background:var(--nen);color:var(--chu-dam)}
.phu-nut:disabled{opacity:.55;cursor:default}
.nut{border:0;border-radius:6px;padding:7px 14px;background:var(--tim);color:#fff;font-weight:600;
  font-size:13px;box-shadow:var(--bong)}
.nut:hover{background:var(--tim-dam)}
.nut:disabled{opacity:.55;cursor:default}
.nut.nhat{background:var(--tim-nhat);color:var(--tim-dam)}
.nut.nhat:hover{background:#d3e7f5}
.nut.canh{background:var(--do)} .nut.canh:hover{background:#8c1741}

nav{display:flex;gap:4px;background:var(--the);border-bottom:1px solid var(--vien);
  padding:0 24px;position:sticky;top:56px;z-index:29;overflow-x:auto}
nav button{border:0;background:none;padding:12px 2px;margin-right:20px;color:var(--chu-mo);
  font-weight:500;font-size:14px;white-space:nowrap;border-bottom:2px solid transparent;border-radius:0}
nav button:hover{color:var(--chu-dam)}
nav button.chon{color:var(--tim);border-bottom-color:var(--tim);font-weight:600}
nav .dem{background:var(--hong-nen);color:var(--hong-chu);border-radius:10px;padding:1px 6px;
  font-size:11px;font-weight:700;margin-left:6px}

.thanh-loc{display:flex;gap:10px;align-items:center;padding:16px 24px 4px;flex-wrap:wrap}
.thanh-loc select,.thanh-loc input,.thanh-loc input[type=text],.thanh-loc input[type=date],
.thanh-loc input[type=search]{width:auto;padding:7px 10px;border:1px solid var(--vien);border-radius:6px;
  background:var(--the);font:inherit;font-size:13px;color:var(--chu);box-shadow:var(--bong)}
.thanh-loc select:focus,.thanh-loc input:focus{outline:0;border-color:var(--tim);box-shadow:0 0 0 3px var(--tim-nhat)}
.thanh-loc input.tim{width:auto;min-width:240px;flex:1 1 240px;max-width:380px}
.thanh-loc label.phu{white-space:nowrap}
.thanh-loc label.phu input[type=checkbox]{width:auto;margin-right:4px}
main{padding:16px 24px 64px}

/* ---------- ô số ---------- */
.o-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--vien);
  border:1px solid var(--vien);border-radius:var(--bo);overflow:hidden;margin-bottom:20px;box-shadow:var(--bong)}
.o{background:var(--the);padding:16px 18px}
.o .nhan-o{color:var(--chu-mo);font-size:12px;font-weight:500;margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.04em}
.o .so{font-size:24px;font-weight:600;color:var(--chu-dam);letter-spacing:-.02em;line-height:1.15}
.o .so.xanh{color:var(--xanh)} .o .so.do{color:var(--do)} .o .so.cam{color:var(--cam)}
.o .duoi{font-size:12px;color:var(--chu-mo);margin-top:5px}

/* Ô số bấm được = một bộ lọc của bảng ngay bên dưới (tab Tài khoản). Ô nào đang bằng 0 thì
   `oSo` không gắn `data-loc-o` nên không có lớp này — trông vẫn y như cũ, không mời bấm. */
.o-loc{cursor:pointer}
.o-loc:hover{background:var(--tim-nhat)}
.o-loc:focus-visible{outline:2px solid var(--tim);outline-offset:-2px}
/* Vạch bên trái chứ không đổi nền đậm: ô đang lọc phải nổi lên mà con số trong ô vẫn giữ
   nguyên màu nghiệp vụ (đỏ/cam/vàng) — đổi nền mạnh là nuốt mất mấy màu ấy. */
.o.dang-loc{background:var(--tim-nhat);box-shadow:inset 3px 0 0 var(--tim)}

/* ---------- thẻ & bảng ---------- */
.the{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);
  box-shadow:var(--bong);margin-bottom:20px;overflow:hidden}
.the > .dau{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--vien)}
.the > .dau h3{margin:0;font-size:15px}
.the > .dau .phu{font-size:12px}
.the > .dau .phai{margin-left:auto}
.the > .than{padding:16px 18px}
.cuon{overflow-x:auto}

table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;padding:9px 12px;background:var(--nen);color:var(--chu-mo);font-weight:600;
  font-size:12px;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--vien);
  white-space:nowrap;position:sticky;top:0;z-index:2}
tbody td{padding:9px 12px;border-bottom:1px solid var(--vien);vertical-align:top}
tbody tr:hover{background:#FAFCFE}
td.so,th.so{text-align:right;white-space:nowrap}
/* Ô MỐC GIỜ không được xuống dòng. Tiêu đề cột đã rút ngắn nên cột hẹp hơn nội dung, và
   "≥ 28/08 06:59" tự bẻ thành ba dòng — dòng bảng cao gấp rưỡi mà chẳng thêm thông tin gì. */
td.gio-mot-dong{white-space:nowrap}
td.giua{text-align:center}
.tong-dong td{font-weight:700;background:#FFFBEB;border-top:2px solid var(--vien-dam)}
.trong{padding:36px;text-align:center;color:var(--chu-mo)}

/* ---------- chọn nhiều dòng ---------- */
/* Thanh này CHÈN THÊM giữa đầu thẻ và bảng chứ không thay chỗ của gì cả: nó chỉ hiện
   khi có dòng đang chọn, và bảng dài 106 dòng thì nó phải nằm ở TRÊN — cuối bảng là
   chỗ người ta không nhìn tới sau khi tích mấy ô đầu. */
.thanh-chon{display:flex;align-items:center;gap:10px;padding:10px 18px;font-size:13px;
  background:var(--tim-nhat);border-bottom:1px solid var(--vien);color:var(--chu-dam)}
.thanh-chon .phai{margin-left:auto}
td.o-chon,th.o-chon{width:34px;padding-left:14px;padding-right:0}
td.o-chon input,th.o-chon input{width:15px;height:15px;margin:0;cursor:pointer;accent-color:var(--tim)}
/* Dòng đang chọn phải tô đậm hơn màu hover, không thì rê chuột qua là hết phân biệt
   được dòng nào mình đã tích. */
tbody tr.dong-chon,tbody tr.dong-chon:hover{background:var(--tim-nhat)}

/* ---------- đổ màu dòng tài khoản ----------
   Nền rất nhạt có chủ ý: chữ tiền trên dòng vẫn mang màu nghiệp vụ (đỏ/xanh/vàng),
   nền đậm là nuốt sạch mấy màu ấy. Khoá màu trùng MAU_TK trong app.js + lib/tk.js. */
tbody tr.mau-do,   tbody tr.mau-do:hover  {background:#FBE3DF}
tbody tr.mau-cam,  tbody tr.mau-cam:hover {background:#FDECD4}
tbody tr.mau-vang, tbody tr.mau-vang:hover{background:#FDF3CF}
tbody tr.mau-xanh, tbody tr.mau-xanh:hover{background:#DCF2DE}
tbody tr.mau-lam,  tbody tr.mau-lam:hover {background:#DDEBF9}
tbody tr.mau-tim,  tbody tr.mau-tim:hover {background:#E9E2F9}
tbody tr.mau-hong, tbody tr.mau-hong:hover{background:#FADFEC}
tbody tr.mau-xam,  tbody tr.mau-xam:hover {background:#E8EBEF}
/* Dòng ĐANG CHỌN phải thắng màu đổ — lặp lại quy tắc .dong-chon Ở SAU khối màu vì hai
   bên cùng bậc ưu tiên, CSS lấy quy tắc đứng sau; thiếu dòng này là chọn dòng đã tô
   màu mà không thấy gì đổi. */
tbody tr.dong-chon, tbody tr.dong-chon:hover{background:var(--tim-nhat)}

td.o-mau,th.o-mau{width:30px;padding-left:10px;padding-right:2px}
.cham-mau{width:15px;height:15px;border-radius:50%;border:1px solid var(--vien-dam);
  padding:0;cursor:pointer;vertical-align:middle;background:transparent}
.cham-mau.trong{background:transparent}
.cham-mau:hover{transform:scale(1.25);border-color:var(--tim)}
.cham-mau.mau-do  {background:#DC5A4E;border-color:#DC5A4E}
.cham-mau.mau-cam {background:#E8923C;border-color:#E8923C}
.cham-mau.mau-vang{background:#E2B93B;border-color:#E2B93B}
.cham-mau.mau-xanh{background:#4CAF6D;border-color:#4CAF6D}
.cham-mau.mau-lam {background:#4A90D9;border-color:#4A90D9}
.cham-mau.mau-tim {background:#8E6AD0;border-color:#8E6AD0}
.cham-mau.mau-hong{background:#D66BA6;border-color:#D66BA6}
.cham-mau.mau-xam {background:#8792A2;border-color:#8792A2}

/* hộp chọn màu — neo theo toạ độ cái chấm, do moBangMau đặt left/top */
.bang-mau{position:fixed;z-index:60;display:flex;gap:6px;padding:8px 10px;
  background:var(--the);border:1px solid var(--vien-dam);border-radius:8px;box-shadow:var(--bong-cao)}
.bang-mau .o-mau-chon{width:22px;height:22px;border-radius:50%;border:1px solid var(--vien-dam);
  padding:0;cursor:pointer}
.bang-mau .o-mau-chon:hover{transform:scale(1.15)}
.bang-mau .o-mau-chon.dang{outline:2px solid var(--chu-dam);outline-offset:2px}
.bang-mau .o-mau-chon.mau-do  {background:#DC5A4E}
.bang-mau .o-mau-chon.mau-cam {background:#E8923C}
.bang-mau .o-mau-chon.mau-vang{background:#E2B93B}
.bang-mau .o-mau-chon.mau-xanh{background:#4CAF6D}
.bang-mau .o-mau-chon.mau-lam {background:#4A90D9}
.bang-mau .o-mau-chon.mau-tim {background:#8E6AD0}
.bang-mau .o-mau-chon.mau-hong{background:#D66BA6}
.bang-mau .o-mau-chon.mau-xam {background:#8792A2}
.bang-mau .o-mau-chon.bo{background:var(--the);color:var(--chu-mo);font-size:12px;line-height:1}


/* ---------- nhãn trạng thái ---------- */
.nhan{display:inline-block;padding:2px 8px;border-radius:11px;font-size:11px;font-weight:600;
  white-space:nowrap;letter-spacing:.01em}
.nhan.ok{background:var(--ok-nen);color:var(--ok-chu)}
.nhan.cho{background:var(--cho-nen);color:var(--cho-chu)}
.nhan.xau{background:var(--hong-nen);color:var(--hong-chu)}
.nhan.trung{background:var(--trung-nen);color:var(--trung-chu)}
.nhan.tin{background:var(--tin-nen);color:var(--tin-chu)}

/* Dòng dispute trong bảng giao dịch — tô nền như Sheet cũ để mắt nhận ra ngay */
tr.d-mo   td{background:#FDF3F2}
tr.d-thang td{background:#F0F9F1}
tr.d-hoan td{background:#FEF9E7}

/* ---------- ngăn kéo / hộp thoại ---------- */
.man-che{position:fixed;inset:0;background:rgba(26,31,54,.42);z-index:60;display:flex;
  align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.hop{background:var(--the);border-radius:12px;box-shadow:var(--bong-cao);width:min(980px,100%);
  max-height:calc(100vh - 80px);display:flex;flex-direction:column}
.hop > .dau{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--vien)}
.hop > .dau h3{margin:0;font-size:16px}
.hop > .dau .phai{margin-left:auto;display:flex;gap:8px}
.hop > .than{padding:18px 20px;overflow-y:auto}
.hop > .chan{padding:14px 20px;border-top:1px solid var(--vien);display:flex;gap:8px;justify-content:flex-end}

/* ---------- form ---------- */
.luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.luoi.hai{grid-template-columns:repeat(2,1fr)}
label.o-nhap{display:block;font-size:12px;font-weight:600;color:var(--chu-mo);
  text-transform:uppercase;letter-spacing:.03em}
label.o-nhap > span{display:block;margin-bottom:5px}
label.o-nhap.rong{grid-column:1/-1}
/* `input:not([type])` phải có trong danh sách này: <input> không khai type MẶC ĐỊNH là text
   nhưng bộ chọn thuộc tính không khớp — và mã dựng form hay quên khai. Thiếu nó thì ô ấy
   tụt về khung mặc định của trình duyệt (hẹp, khác hẳn ô bên cạnh) mà không có lỗi nào bật
   ra: form Sửa tài khoản đã sống như thế với 4 ô lệch khung. */
input:not([type]),input[type=text],input[type=password],input[type=number],input[type=email],input[type=date],select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--vien);border-radius:6px;background:#fff;
  font:inherit;font-size:13px;color:var(--chu-dam);text-transform:none;letter-spacing:normal;font-weight:400}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--tim);box-shadow:0 0 0 3px var(--tim-nhat)}
textarea{min-height:96px;resize:vertical;line-height:1.5}
.goi-y{font-size:12px;color:var(--chu-mo);margin-top:5px;font-weight:400;text-transform:none;letter-spacing:normal}

/* ---------- vụn ---------- */
.dai{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.moc{border-left:2px solid var(--vien);padding-left:14px;margin-left:4px}
.moc .diem{position:relative;padding-bottom:14px}
.moc .diem::before{content:'';position:absolute;left:-19px;top:5px;width:8px;height:8px;
  border-radius:50%;background:var(--tim);box-shadow:0 0 0 3px var(--the)}
.moc .khi{font-size:12px;color:var(--chu-mo)}
.canh-bao{background:#FFF8E6;border:1px solid #F5D48A;color:#7A4B06;border-radius:6px;
  padding:10px 12px;font-size:13px;margin-bottom:14px}
.canh-bao.do{background:#FDF2F4;border-color:#F3C2CE;color:#8C1741}
.canh-bao.xanh{background:#F0FAF3;border-color:#B6E3C2;color:#0E6245}
.mo{color:var(--chu-nhat)}
.dam{font-weight:600;color:var(--chu-dam)}
.ma{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.o-bam{cursor:pointer}
.o-bam:hover{color:var(--tim);text-decoration:underline}

/* ---------- ghi chú tài khoản ---------- */
/* ---------- màu của NGƯỜI GHI ----------
   Tám màu cố định, chọn theo tên người ghi (xem `mauNguoi` trong app.js). Màu ở đây mang
   ĐÚNG MỘT tin: ai viết dòng này — cùng nếp với màu của tiền, đừng rắc màu cho vui mắt.

   Vì sao đáng có: cột ghi chú xếp chồng nhiều dòng của nhiều người, mà tên người thì chỉ
   in ra khi ĐỔI (in mỗi dòng là nhiễu). Vạch màu bên trái mang phần "ai" chạy suốt cả
   chồng, nên chỗ đổi người nhìn phát ra ngay mà không phải đọc chữ.

   Đặt bằng biến `--ng` chứ không tô thẳng: biến xuyên qua được `display:contents` xuống
   cả hai ô của lưới, mà tô thẳng thì phải nhắc màu ở bốn năm chỗ. */
.ng0{--ng:#0070BA} .ng1{--ng:#0E6245} .ng2{--ng:#983705} .ng3{--ng:#A41C4E}
.ng4{--ng:#5A3E9B} .ng5{--ng:#0F6E7B} .ng6{--ng:#8A6100}
/* "không rõ" (mấy dòng chuyển từ ô ghi chú cũ) giữ riêng một màu XÁM, không nằm trong
   vòng cấp phát — cho nó mượn màu của một nhân viên đang làm là gán việc cho người
   không làm. */
.ng-kr{--ng:#8792A2}

/* Cột trên bảng giữ CẢ dòng thời gian: mỗi ghi chú một dòng, mốc giờ thành một cột hẹp
   để mắt dò xuống theo mép trái. Lưới hai cột chứ không phải hai thẻ cạnh nhau — có thế
   thì mốc giờ của mọi dòng mới thẳng hàng, kể cả khi câu chữ xuống dòng. */
td.o-note{max-width:460px;min-width:240px;vertical-align:top;padding-top:9px;padding-bottom:9px}
/* gap NGANG bằng 0, giãn cách bằng padding của chính hai ô: nền của một dòng phải liền
   mạch qua cả hai cột, mà khe gap thì không tô nền được nên nó cắt đôi dải màu. */
.note-ds{display:grid;grid-template-columns:auto 1fr;row-gap:2px;font-size:12px;line-height:1.45}
.note-ds .mot{display:contents}
.note-ds .khi,.note-ds .chu{padding:2px 0;border-radius:0}
.note-ds .khi{color:var(--chu-nhat);white-space:nowrap;font-variant-numeric:tabular-nums;
  border-left:3px solid var(--ng,var(--vien-dam));padding-left:7px;padding-right:9px;
  border-top-left-radius:4px;border-bottom-left-radius:4px}
.note-ds .chu{color:var(--chu-mo);padding-right:7px;
  border-top-right-radius:4px;border-bottom-right-radius:4px}
/* Tên người chỉ in khi ĐỔI, và in bằng chính màu của người ấy — chữ với vạch cùng màu thì
   không phải đối chiếu bảng màu mới hiểu vạch kia là ai. */
.note-ds .chu i{font-style:normal;color:var(--ng,var(--chu-nhat));font-weight:500}
/* Dòng CUỐI là tình hình HIỆN TẠI: nền nhạt chạy hết dòng + chữ đậm. Lướt qua 106 dòng
   bảng thì mắt bắt được ngay dòng này, mấy dòng trên lùi về làm nền lịch sử. */
.note-ds .moi .khi,.note-ds .moi .chu{background:var(--tim-nhat)}
.note-ds .moi .khi{color:var(--chu-mo)}
.note-ds .moi .chu{color:var(--chu-dam);font-weight:500}
.note-con{font-size:11px;color:var(--chu-nhat);margin-bottom:4px;font-style:italic}
.thanh-note{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.o-tick{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--chu-mo);cursor:pointer}
.o-tick input{margin:0}
.note-chu{white-space:pre-wrap;color:var(--chu-dam)}
/* Chấm trên dòng thời gian của hộp dùng ĐÚNG màu người ghi như cột ngoài bảng — hai màn
   hình nói cùng một thứ tiếng thì không ai phải học lại. */
.moc .diem{--cham:var(--ng,var(--tim))}
.moc .diem::before{background:var(--cham)}
.hop .note-ai{font-weight:600;color:var(--ng,var(--chu-mo))}
/* Dòng mới nhất trong hộp: cùng dải nền với dòng đậm ngoài bảng. */
.moc .diem.moi .note-chu{background:var(--tim-nhat);border-radius:5px;
  padding:4px 8px;margin:-2px -8px 2px}
/* Ghi chú đã xoá vẫn đọc được nhưng phải NHÌN LÀ BIẾT — mờ và gạch ngang, không thì
   người ta đọc nhầm một câu đã bị gỡ như thể nó vẫn đang có hiệu lực. */
.note-da-xoa .note-chu{color:var(--chu-nhat);text-decoration:line-through}
.note-da-xoa::before{background:var(--vien-dam) !important}

.cot-sua{background:#FFFDF2;box-shadow:inset 2px 0 0 #E8B931}
.dau-sua{color:#B58100;font-weight:700;margin-left:4px;cursor:help}
.thanh-tien{display:flex;gap:18px;flex-wrap:wrap;padding:12px 18px;background:var(--nen);
  border-bottom:1px solid var(--vien);font-size:13px}
.thanh-tien b{color:var(--chu-dam)}
.dang-chay{display:inline-block;width:12px;height:12px;border:2px solid var(--vien-dam);
  border-top-color:var(--tim);border-radius:50%;animation:quay .7s linear infinite;vertical-align:-2px}
@keyframes quay{to{transform:rotate(360deg)}}
.trang{display:flex;gap:8px;align-items:center;justify-content:center;padding:14px}

/* ---------- đèn đường sống ---------- */
/* Chấm nhỏ trên thanh đầu: xanh = đang nhận cập nhật đẩy, cam nhấp nháy = mất kết nối và
   đang tự nối lại. Không có nó thì "live" hỏng nhìn y hệt "live nhưng chưa có gì đổi". */
.den-song{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--vien-dam);
  flex:none;transition:background .3s}
.den-song.song{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.den-song.dut{background:var(--cam);animation:nhapnhay 1.4s ease-in-out infinite}
@keyframes nhapnhay{0%,100%{opacity:1}50%{opacity:.25}}

/* Mức tăng/giảm số dư */
.lech-len{color:var(--xanh);font-weight:600}
.lech-xuong{color:var(--do);font-weight:600}

/* ---------- màu của tiền ----------
   Ba luật, áp ở mọi chỗ ba khái niệm này xuất hiện (bảng tài khoản, ô số tổng quan,
   bảng giao dịch):

     khả dụng / net  âm → ĐỎ, dương → XANH
     bị giữ          → VÀNG
     0.00            → MỜ

   Số 0 cố ý KHÔNG tô. Tô xanh cho 0.00 thì cả cột toàn màu xanh, và mắt hết nhận ra
   dòng nào thật sự có tiền — đúng chỗ mà màu lẽ ra phải giúp. */
.tien-am    {color:var(--do);   font-weight:600}
.tien-duong {color:var(--xanh); font-weight:600}
.tien-giu   {color:var(--vang); font-weight:600}
.tien-khong {color:var(--chu-nhat)}

/* Trong ô số lớn ở đầu trang, màu đã do lớp .tien-* quyết định — bỏ màu mặc định của .so
   đi, không thì quy tắc nào thắng là chuyện của thứ tự khai báo chứ không phải của ý đồ. */
.o .so .tien-am, .o .so .tien-duong, .o .so .tien-giu, .o .so .tien-khong{font-weight:inherit}
.o .duoi .tien-am, .o .duoi .tien-duong, .o .duoi .tien-giu{font-weight:600}

/* ---------- chuông thông báo ---------- */
/* Số chưa đọc nằm TRÊN cái chuông chứ không đứng cạnh: thanh đầu đã chật, và một con số
   trôi bên phải nút thì mắt không nối được nó với cái chuông. */
.chuong{position:relative;padding:6px 10px;font-size:15px;line-height:1}
.chuong .dem{position:absolute;top:-6px;right:-6px;background:var(--hong-nen);color:var(--hong-chu);
  border-radius:10px;padding:1px 5px;font-size:10px;font-weight:700;border:1px solid var(--the)}

.bang-chuong{position:fixed;top:52px;right:16px;width:420px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 80px);display:flex;flex-direction:column;
  background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);
  box-shadow:var(--bong-cao);z-index:60}
.bang-chuong .dau{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--vien)}
.bang-chuong .dau h3{margin:0;font-size:14px}
.bang-chuong .cuon-tb{overflow:auto;flex:1}
.bang-chuong .chan-tb{border-top:1px solid var(--vien);padding:10px 14px;display:flex;
  align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--chu-mo)}

.tb-dong{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--vien);cursor:pointer}
.tb-dong:last-child{border-bottom:0}
.tb-dong:hover{background:var(--nen)}
/* Vạch màu bên trái thay cho biểu tượng: đọc được ở mọi cỡ chữ và không tốn bề ngang,
   mà bảng này thì cột nào cũng chật. */
.tb-dong .vach{width:3px;border-radius:2px;flex:none;background:var(--trung-nen)}
.tb-dong.xau .vach{background:var(--do)}
.tb-dong.canh_bao .vach{background:var(--cam)}
.tb-dong.tin .vach{background:var(--xanh)}
.tb-dong.moi{background:var(--tim-nhat)}
.tb-dong.moi:hover{background:#D8E9F6}
.tb-dong .tieu{font-weight:600;color:var(--chu-dam);font-size:13px}
.tb-dong .than{color:var(--chu-mo);font-size:12px;margin-top:3px;line-height:1.45}
.tb-dong .luc{color:var(--chu-nhat);font-size:11px;margin-top:4px}

/* ---------- riêng app "Quản lý tài khoản PayPal" ----------
   Ô bí mật: mặc định là tám dấu chấm, bấm Hiện mới ra chữ. Cho nó font đơn cách khi đã
   hiện — mật khẩu hay có l/I/1 và O/0 đứng cạnh nhau, đọc bằng font thường là đọc nhầm. */
.bi-mat{letter-spacing:.08em;color:var(--chu-nhat)}
.bi-mat.hien{font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;
  color:var(--chu-dam);background:var(--tim-nhat);padding:2px 6px;border-radius:4px;user-select:all}
/* Mã 2FA phải to và tách nhóm ba số: người ta đọc nó rồi gõ sang cửa sổ khác trong 30 giây */
.ma-2fa{font:17px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
  letter-spacing:.06em;color:var(--tim-dam)}
.hop .than h4{margin:18px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--chu-mo)}
.hop .than h4:first-child{margin-top:0}

/* ================= KHUNG QUẢN TRỊ KIỂU CMS (04/09/2026) =================
   Bản đầu dùng thanh tab ngang như mấy app số liệu (paypal, reggmc). App này thì khác:
   nó chỉ có MỘT việc — quản trị hồ sơ tài khoản — nên đi theo khuôn CMS quen mắt: menu
   dọc bên trái, thanh tiêu đề mang nút của đúng trang đang mở, và trang sửa là một TRANG
   thật (cột form + cột hộp Lưu) chứ không phải hộp thoại nổi.

   Mấy quy tắc của bản cũ (header/nav ngang) vẫn còn ở trên và KHÔNG dùng nữa — giữ lại vì
   `.the`, `.nhan`, `.o-so`, bảng… đều dùng chung; đừng xoá nhầm. */

#mh-chinh{min-height:100vh}

/* ---------- menu dọc ----------
   `position:fixed` chứ không phải `sticky` trong một flex: sticky + height:100vh thì phần
   trang DÀI HƠN một màn hình để lộ nền trắng bên dưới cột menu — trông như thanh menu bị
   cụt giữa chừng. Cố định rồi chừa lề trái đúng bề rộng của nó cho vùng làm việc. */
#ben{width:224px;background:var(--chu-dam);color:#D7DCE8;display:flex;
  flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:40}
.ben-hieu{padding:18px 20px 16px;font-size:15px;font-weight:600;color:#fff;line-height:1.25;
  border-bottom:1px solid rgba(255,255,255,.08)}
.ben-hieu b{color:#5EB7F0;font-weight:600}
.ben-phu{display:block;font-size:11px;font-weight:400;color:#8792A2;text-transform:uppercase;
  letter-spacing:.06em;margin-top:3px}
#menu{display:flex;flex-direction:column;padding:10px 0;gap:1px;overflow-y:auto}
#menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;
  padding:9px 20px;color:#D7DCE8;font-size:13.5px;font-weight:500;text-align:left;border-radius:0;
  border-left:3px solid transparent}
#menu button i{font-style:normal;width:16px;text-align:center;opacity:.85;font-size:13px}
#menu button:hover{background:rgba(255,255,255,.06);color:#fff}
#menu button.chon{background:rgba(94,183,240,.14);color:#fff;border-left-color:#5EB7F0;font-weight:600}
#menu .dem{margin-left:auto;background:rgba(255,255,255,.14);color:#fff;border-radius:10px;
  padding:1px 7px;font-size:11px;font-weight:700}
.ben-chan{margin-top:auto;padding:14px 20px 18px;border-top:1px solid rgba(255,255,255,.08)}
.ben-toi{font-size:13px;color:#fff;font-weight:600;margin-bottom:9px}
.ben-nut{border:1px solid rgba(255,255,255,.16);background:transparent;color:#C7CDDD;
  border-radius:6px;padding:5px 10px;font-size:12px;font-weight:500}
.ben-nut:hover{background:rgba(255,255,255,.1);color:#fff}

/* ---------- vùng làm việc ---------- */
#khung{margin-left:224px;min-width:0;display:flex;flex-direction:column}
#thanh-tren{display:flex;align-items:center;gap:14px;background:var(--the);
  border-bottom:1px solid var(--vien);padding:0 24px;height:58px;position:sticky;top:0;z-index:30}
#tieu-de{margin:0;font-size:17px;font-weight:600;color:var(--chu-dam);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- trang hồ sơ: cột form + cột hộp Lưu ---------- */
.hs{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
@media (max-width:1100px){ .hs{grid-template-columns:1fr} }
.hs-ben{position:sticky;top:74px;display:flex;flex-direction:column;gap:20px}
.hs-ben .the{margin-bottom:0}
.hs-ben .luoi{grid-template-columns:1fr}

/* Hàng "nhãn — giá trị" của khối chỉ đọc (số dư, mốc giờ) */
.hang{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13px;
  border-bottom:1px dashed var(--vien)}
.hang:last-child{border-bottom:0}
.hang > span:first-child{color:var(--chu-mo)}
.hang > span:last-child{text-align:right;font-weight:500;color:var(--chu-dam)}

/* Tên hồ sơ trên thanh tiêu đề: nhãn to, mail nhỏ ngay dưới */
.tieu-phu{display:block;font-size:12px;font-weight:400;color:var(--chu-mo);margin-top:1px}

/* Ô nhập bị khoá (không đủ quyền mở bí mật) phải TRÔNG như bị khoá */
input:disabled,select:disabled{background:var(--nen);color:var(--chu-nhat);cursor:not-allowed}

/* ---------- giấy tờ đính kèm ---------- */
.giay-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.giay-o{border:1px solid var(--vien);border-radius:var(--bo);padding:12px;background:var(--nen)}
.giay-dau{font-size:12px;font-weight:600;color:var(--chu-mo);text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:8px}
/* Ô ảnh có bề cao tối thiểu để khối không nhảy chồm lên lúc ảnh vừa nạp xong */
.giay-anh{min-height:104px;display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px dashed var(--vien-dam);border-radius:6px;background:var(--the);padding:8px;overflow:hidden}
.giay-anh img{max-width:100%;max-height:280px;border-radius:4px;display:block}
.giay-nut{margin-top:10px;gap:6px}
/* Ô chọn tệp nấp trong nhãn: nút trông như mọi nút khác thay vì khung "Choose File" của trình duyệt */
.giay-nut label.phu-nut{cursor:pointer;display:inline-block}

/* ================= LỚP RÕ RÀNG (04/09/2026) =================
   Sếp Peter: "giao diện trực quan rõ ràng, font chữ, màu sắc". Bản kế thừa từ app paypal
   là bảng số liệu dày đặc: chữ 13px, nhãn ô nhập 12px VIẾT HOA màu xám. Đọc bảng tiền thì
   ổn, đọc một FORM hồ sơ thì mỏi mắt — nhất là chữ Việt có dấu viết hoa. Lớp này đặt SAU
   cùng để đè lên mọi quy tắc trên: cỡ chữ lớn hơn một bậc, nhãn viết thường và đậm hơn,
   màu chữ tối hơn, màu trạng thái tách bạch hẳn nhau. Đổi màu thì đổi ở khối biến này. */
:root{
  --chu:#2A3140; --chu-dam:#101828; --chu-mo:#5A6474; --chu-nhat:#8B94A6;
  --tim:#0B6FB8; --tim-dam:#08538C; --tim-nhat:#E2EFFA;
  --nen:#F2F5F9; --vien:#D8DEE7; --vien-dam:#B7C0CD;
  --ok-nen:#D8F3E1;   --ok-chu:#0F6B3A;      /* đang sống — xanh lá rõ */
  --cho-nen:#FFEFC2;  --cho-chu:#7A4E00;     /* chờ / thiếu — vàng đậm */
  --hong-nen:#FBDDDD; --hong-chu:#B01F1F;    /* limited — đỏ */
  --trung-nen:#E5E8EE;--trung-chu:#3A4353;   /* trung tính */
  --tin-nen:#DCE9FF;  --tin-chu:#1A4FBF;     /* mới tạo — lam */
  --cam-nen:#FFE3CC;  --cam-chu:#9A3D00;     /* bị hạn chế — cam */
  --xanh:#0F6B3A; --do:#B01F1F; --cam:#9A3D00; --lam:#1A4FBF; --vang:#7A4E00;
}
body{font-size:15px;line-height:1.5;color:var(--chu)}
.phu{color:var(--chu-mo)} .nho{font-size:13px} .mo{color:var(--chu-nhat)}

/* ---- menu dọc ---- */
#ben{color:#E4E9F2}
.ben-hieu{font-size:16px;padding:20px 20px 16px}
.ben-phu{font-size:11.5px;color:#9AA4B8}
#menu button{font-size:14.5px;padding:11px 18px;color:#E4E9F2;gap:11px}
#menu button svg{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
#menu button.chon{background:rgba(94,183,240,.18);color:#fff}
#menu .dem{font-size:12px}
.ben-toi{font-size:14px}
.ben-nut{font-size:13px;padding:6px 11px;color:#E4E9F2}

/* ---- thanh tiêu đề & nút ---- */
#thanh-tren{height:62px}
#tieu-de{font-size:19px}
.tieu-phu{font-size:13px}
.nut{font-size:14px;padding:9px 16px;border-radius:7px}
.phu-nut{font-size:14px;padding:8px 13px;border-radius:7px;color:var(--chu-dam)}
.phu-nut.nho{font-size:12.5px;padding:3px 8px}

/* ---- thanh lọc ---- */
.thanh-loc{padding:16px 24px 6px;gap:10px}
.thanh-loc select,.thanh-loc input,.thanh-loc input[type=search]{font-size:14px;padding:8px 11px;
  border-color:#C6CFDB;color:var(--chu-dam)}
.thanh-loc label.phu{font-size:14px;color:var(--chu)}

/* ---- thẻ ---- */
.the{border-color:var(--vien);box-shadow:0 1px 2px rgba(16,24,40,.06)}
.the > .dau{padding:15px 20px}
.the > .dau h3{font-size:16px;color:var(--chu-dam)}
.the > .dau .phu{font-size:13px}
.the > .than{padding:18px 20px}

/* ---- bảng: chữ 14px, đầu bảng viết thường đậm, sọc kẻ cho dễ dò hàng ---- */
table{font-size:14px}
thead th{font-size:13px;text-transform:none;letter-spacing:0;font-weight:700;color:var(--chu);
  background:#EDF1F6;padding:11px 12px;border-bottom:2px solid var(--vien-dam)}
tbody td{padding:11px 12px;color:var(--chu-dam);line-height:1.45}
tbody tr:nth-child(even):not([class*="mau-"]):not(.dong-chon){background:#F8FAFC}
tbody tr:hover:not([class*="mau-"]):not(.dong-chon){background:#EEF4FB}
tbody td .nho.phu{color:var(--chu-mo)}

/* ---- nhãn trạng thái: to hơn, viền mảnh cùng tông để nổi trên nền trắng lẫn nền sọc ---- */
.nhan{font-size:12.5px;padding:3px 10px;border-radius:12px;font-weight:700;letter-spacing:0;
  border:1px solid transparent;line-height:1.4}
.nhan.ok{border-color:#A9E3BF}
.nhan.cho{border-color:#F3D98A}
.nhan.xau{border-color:#F2B4B4}
.nhan.tin{border-color:#B8CFF8}
.nhan.trung{border-color:#CBD2DD}
.nhan.cam{background:var(--cam-nen);color:var(--cam-chu);border-color:#F5C29A}
.nhan.die{background:#3A4353;color:#fff;border-color:#3A4353}

/* ---- ô số ---- */
.o{padding:18px 20px}
.o .nhan-o{font-size:13px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--chu)}
.o .so{font-size:28px}
.o .duoi{font-size:13px}

/* ---- form: nhãn viết THƯỜNG, đậm, tối; ô nhập 14.5px ---- */
label.o-nhap{font-size:13.5px;font-weight:600;color:var(--chu-dam);text-transform:none;letter-spacing:0}
label.o-nhap > span{margin-bottom:6px}
input:not([type]),input[type=text],input[type=password],input[type=number],input[type=email],
input[type=date],input[type=search],select,textarea{font-size:14.5px;padding:9px 12px;border-color:#C6CFDB;
  color:var(--chu-dam);border-radius:7px}
input::placeholder,textarea::placeholder{color:#9AA3B5}
.goi-y{font-size:12.5px;color:var(--chu-mo);margin-top:6px;line-height:1.4}
.luoi{gap:16px 18px}
.hang{font-size:14px;padding:8px 0}
.giay-dau{font-size:13px;text-transform:none;letter-spacing:0;color:var(--chu-dam)}
.giay-anh{min-height:110px}

/* ---- ghi chú / mốc thời gian ---- */
.moc .diem{font-size:14px}
.moc .khi{font-size:12.5px}

/* ---- cảnh báo ---- */
.canh-bao{font-size:14px;padding:11px 14px;line-height:1.45}

/* ---- đăng nhập ---- */
.the-dn{width:400px;padding:38px}
.the-dn h1{font-size:22px}
.the-dn label{font-size:14px}
.the-dn input{font-size:15px;padding:10px 13px}
.the-dn button{font-size:15px;padding:11px}

/* ---- ô bí mật đã hiện: font đơn cách to hơn một chút ---- */
input.hien{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;background:#EEF6FC}
.ma-2fa{font-size:19px}