:root{
  --nen:#0a0f1a; --nen2:#111827; --the:#151d2c; --the2:#1a2336; --vien:#253044;
  --chu:#e8edf7; --mo:#7d8aa5; --nhan:#a3b0ca;
  --xanh:#2b6fff; --xanhdam:#1a56d6; --xanhnhat:#5b93ff;
  --luc:#1aa85a; --lucnhat:#3ddc84; --cam:#e08a1e; --do:#e0455a; --vang:#f0b429;
  --bk:8px;
  --bong:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--nen);color:var(--chu);
  font:14px/1.6 "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",
       -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--xanhnhat);text-decoration:none}
a:hover{color:var(--xanh)}

/* ── logo ── */
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.2px}
.logo svg{flex:0 0 auto}
.logo .tx{font-size:19px;line-height:1}
.logo .tx b{color:var(--xanhnhat);font-weight:800}

/* ── thanh trên ── */
.thanh{display:flex;align-items:center;gap:16px;padding:0 22px;height:56px;
  background:var(--nen2);border-bottom:1px solid var(--vien);position:sticky;top:0;z-index:30}
.thanh .phai{margin-left:auto;display:flex;align-items:center;gap:16px;color:var(--mo);font-size:13px}
.vach{width:1px;height:18px;background:var(--vien)}
.khung{max-width:1300px;margin:0 auto;padding:22px}

/* ── chuyển ngôn ngữ ── */
.nn{display:inline-flex;border:1px solid var(--vien);border-radius:6px;overflow:hidden}
.nnbtn{background:transparent;border:0;color:var(--mo);padding:4px 10px;font-size:12px;
  cursor:pointer;font-family:inherit;line-height:1.7;transition:.15s}
.nnbtn:hover{color:var(--chu);background:var(--the)}
.nnbtn.on{background:var(--xanh);color:#fff;font-weight:600}

/* ── tab ── */
.tabs{display:flex;gap:2px;margin-bottom:18px;border-bottom:1px solid var(--vien)}
.tab{padding:10px 18px;cursor:pointer;color:var(--mo);font-weight:600;font-size:13.5px;
  user-select:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.tab:hover{color:var(--chu)}
.tab.on{color:var(--xanhnhat);border-bottom-color:var(--xanh)}

/* ── thẻ ── */
.the{background:var(--the);border:1px solid var(--vien);border-radius:var(--bk);
  padding:18px;margin-bottom:18px;box-shadow:var(--bong)}
.the h3{margin:0 0 14px;font-size:12px;color:var(--mo);font-weight:700;letter-spacing:1px}
.o{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.so{background:var(--the2);border:1px solid var(--vien);border-radius:var(--bk);padding:16px}
.so .nhan{color:var(--mo);font-size:12px;margin-bottom:8px}
.so .gt{font-size:23px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.so .phu{color:var(--mo);font-size:12px;margin-top:4px}
.luc{color:var(--lucnhat)} .cam{color:var(--cam)} .do{color:var(--do)} .mo{color:var(--mo)}

/* ── bảng ── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:10px 12px;background:var(--the2);color:var(--mo);
  font-weight:600;border-bottom:1px solid var(--vien);white-space:nowrap;font-size:12px;letter-spacing:.3px}
td{padding:10px 12px;border-bottom:1px solid rgba(37,48,68,.6);vertical-align:middle}
tbody tr:hover td,tr:hover td{background:rgba(43,111,255,.045)}
.cuon{overflow-x:auto}
.phai-can{text-align:right;font-variant-numeric:tabular-nums}
code,.ma{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}

/* ── huy hiệu ── */
.hh{display:inline-block;padding:2px 9px;border-radius:4px;font-size:11.5px;font-weight:600;white-space:nowrap}
.hh-ok{background:rgba(26,168,90,.15);color:var(--lucnhat)}
.hh-cho{background:rgba(224,138,30,.15);color:var(--cam)}
.hh-fail{background:rgba(224,69,90,.15);color:#ff7d8d}
.hh-mo{background:rgba(125,138,165,.15);color:var(--mo)}

/* ── nhập liệu ── */
input,select,textarea{background:var(--nen2);border:1px solid var(--vien);color:var(--chu);
  padding:8px 11px;border-radius:6px;font-size:13px;font-family:inherit;outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--xanh);box-shadow:0 0 0 3px rgba(43,111,255,.12)}
input::placeholder{color:#5a6885}
label{display:block;color:var(--mo);font-size:12px;margin-bottom:6px}
.hang{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.nut{background:var(--xanh);border:0;color:#fff;padding:9px 20px;border-radius:6px;
  cursor:pointer;font-weight:600;font-size:13px;font-family:inherit;transition:.15s}
.nut:hover{background:var(--xanhdam)}
.nut.phu{background:var(--the2);border:1px solid var(--vien);color:var(--nhan)}
.nut.phu:hover{background:var(--vien);color:var(--chu)}
.nut.do{background:transparent;border:1px solid var(--do);color:#ff7d8d}
.nut.do:hover{background:var(--do);color:#fff}
.nut:disabled{opacity:.45;cursor:not-allowed}

/* ── đăng nhập: hai cột ── */
.dn{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}

/* cột thương hiệu */
.dn-trai{position:relative;overflow:hidden;padding:44px 56px;display:flex;flex-direction:column;
  background:linear-gradient(155deg,#0c1732 0%,#123160 45%,#0a1428 100%)}
.dn-trai::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(120,170,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,170,255,.055) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 75% 60% at 25% 20%,#000 35%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 25% 20%,#000 35%,transparent 100%)}
.dn-trai::after{content:"";position:absolute;width:640px;height:640px;right:-260px;bottom:-320px;
  border-radius:50%;background:radial-gradient(circle,rgba(43,111,255,.26),transparent 66%)}
.dn-trai>*{position:relative;z-index:1}
.dn-trai .logo .tx{font-size:21px;letter-spacing:.3px}

.dn-khau{margin-top:62px;font-size:33px;font-weight:700;line-height:1.28;letter-spacing:-.8px;max-width:11em}
.dn-sub{margin-top:14px;color:#8fa4c9;font-size:14px;line-height:1.7;max-width:26em}

.dn-dd{margin-top:44px;display:grid;gap:20px;max-width:400px}
.dn-dd .m{display:flex;gap:14px;align-items:flex-start}
.dn-dd .ic{flex:0 0 36px;height:36px;border-radius:9px;
  background:linear-gradient(145deg,rgba(91,147,255,.20),rgba(91,147,255,.06));
  border:1px solid rgba(120,170,255,.22);display:flex;align-items:center;justify-content:center}
.dn-dd .t{font-weight:600;font-size:14.5px;margin-bottom:3px;letter-spacing:.2px}
.dn-dd .d{color:#8ba0c4;font-size:12.5px;line-height:1.55}

.dn-so{margin-top:auto;padding-top:34px;display:flex;gap:40px;flex-wrap:wrap}
.dn-so .v{font-size:21px;font-weight:700;letter-spacing:-.3px;color:#dce6f8}
.dn-so .l{color:#7d93b8;font-size:11.5px;margin-top:3px;letter-spacing:.3px}
.dn-chan{margin-top:26px;padding-top:18px;border-top:1px solid rgba(120,160,230,.13);
  color:#6d82a8;font-size:11.5px;display:flex;align-items:center;gap:8px}

/* cột form */
.dn-phai{display:flex;flex-direction:column;padding:26px 30px;background:var(--nen)}
.dn-phai .top{display:flex;justify-content:flex-end}
.dn-hop{margin:auto;width:100%;max-width:392px;
  background:var(--the);border:1px solid var(--vien);border-radius:14px;padding:38px 36px 32px;
  box-shadow:0 1px 3px rgba(0,0,0,.35),0 14px 44px rgba(0,0,0,.34)}
.dn-hop h1{font-size:23px;margin:0 0 5px;font-weight:700;letter-spacing:-.3px}
.dn-hop .sub{color:var(--mo);font-size:13px;margin-bottom:26px}
.dn-hop label{margin-top:17px;font-size:12.5px}
.o-nhap{position:relative;display:block}
.o-nhap>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.55}
.o-nhap input{width:100%;padding:11px 13px 11px 40px;font-size:14px;border-radius:8px}
.o-nhap .hien{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;
  border:0;color:var(--mo);cursor:pointer;padding:6px 9px;font-size:11.5px;font-family:inherit;border-radius:6px}
.o-nhap .hien:hover{color:var(--chu);background:var(--nen2)}
.dn-hop .nut{width:100%;padding:12px;margin-top:26px;font-size:14.5px;letter-spacing:3px;border-radius:8px}
.dn-caps{margin-top:8px;color:var(--vang);font-size:11.5px;display:none}
.dn-caps.hien{display:block}
.dn-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--vien);
  color:#5f6d8a;font-size:11.5px;text-align:center;line-height:1.7}
.dn-ban{text-align:center;color:#46536e;font-size:11px;margin-top:20px}

.loi{background:rgba(224,69,90,.1);border:1px solid rgba(224,69,90,.28);color:#ff8f9d;
  padding:10px 13px;border-radius:7px;font-size:13px;margin-bottom:4px}
.ok-hop{background:rgba(26,168,90,.1);border:1px solid rgba(26,168,90,.28);color:var(--lucnhat);
  padding:10px 13px;border-radius:7px;font-size:13px;margin-bottom:14px}

.trang{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:16px;color:var(--mo);font-size:13px}
.trang button{background:var(--the2);border:1px solid var(--vien);color:var(--nhan);
  padding:6px 13px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:12.5px}
.trang button:hover:not(:disabled){border-color:var(--xanh);color:var(--chu)}
.trang button:disabled{opacity:.35;cursor:not-allowed}
.trong{text-align:center;color:var(--mo);padding:34px}

@media(max-width:1000px){
  .dn{grid-template-columns:1fr}
  .dn-trai{padding:28px 26px;min-height:auto}
  .dn-trai::after{display:none}
  .dn-khau{font-size:23px;margin-top:26px;max-width:none}
  .dn-sub{margin-top:10px}
  .dn-dd{margin-top:26px;gap:14px}
  .dn-so{margin-top:28px;padding-top:0;gap:28px}
  .dn-chan{margin-top:20px}
  .dn-phai{padding:26px 22px}
}
@media(max-width:700px){.khung{padding:14px}.thanh{padding:0 14px}.dn-dd{display:none}}

/* ── biểu đồ cột ── */
.bd{display:flex;align-items:flex-end;gap:10px;height:168px;padding:8px 2px 0;overflow-x:auto}
.bd .ct{flex:1 0 34px;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:2px}
.bd .cot{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;flex:1}
.bd .n{border-radius:3px 3px 0 0;background:linear-gradient(180deg,#31c06e,#1aa85a);min-height:2px;transition:.25s}
.bd .r{border-radius:3px 3px 0 0;background:linear-gradient(180deg,#f0a83c,#e08a1e);min-height:2px;transition:.25s}
.bd .ct:hover .n{background:#3ddc84}
.bd .ct:hover .r{background:#ffb84d}
.bd .nh{text-align:center;color:var(--mo);font-size:10.5px;padding-top:6px;white-space:nowrap}
.bd-ch{display:flex;gap:18px;margin-top:10px;color:var(--mo);font-size:12px}
.bd-ch i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}