/* 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}

/* ---------- 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}
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)}

/* ---------- 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}
.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}