:root {
  --bg: #0a1220; --panel: #111c2f; --panel2: #17243a; --hover: #21324e; --line: #22334f; --text: #e6ecf5; --muted: #8492a8;
  --accent: #22b8cf; --up: #0ecb81; --down: #f6465d; --ref: #f0b90b;
  --up-bg: rgba(14, 203, 129, .14); --down-bg: rgba(246, 70, 93, .14); --tint: rgba(255, 255, 255, .05); --dim: #3a4d6b; --on-accent: #04222a; --tint2: rgba(255, 255, 255, .035);
  color-scheme: dark;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="light"] {
  --bg: #e9eef5; --panel: #f8fafd; --panel2: #eff3f9; --hover: #dfe6f0; --line: #d3dce8; --text: #13233b; --muted: #5d6d85;
  --accent: #0b8fa3; --up: #03a66d; --down: #cf304a; --ref: #b88400;
  --up-bg: rgba(3, 166, 109, .13); --down-bg: rgba(207, 48, 74, .12); --tint: rgba(0, 0, 0, .04); --dim: #a6b3c6; --on-accent: #ffffff; --tint2: rgba(0, 0, 0, .03);
  color-scheme: light;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--hover) transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
button, input { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.up { color: var(--up); } .down { color: var(--down); } .ref { color: var(--ref); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; letter-spacing: .2px; }
.logo { color: var(--accent); font-size: 18px; }
.tag { font-size: 11px; font-weight: 500; color: var(--ref); border: 1px solid var(--ref); border-radius: 2px; padding: 0 5px; }

.btn { border: 1px solid var(--line); background: var(--panel2); border-radius: 4px; padding: 7px 14px; cursor: pointer; font-weight: 500; }
.btn:hover { background: var(--hover); } .btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); width: 100%; padding: 10px; font-weight: 600; }
.btn.ghost { background: transparent; } .btn.mini { padding: 2px 9px; font-size: 12px; }
.btn.buy { background: var(--up); border-color: var(--up); color: #fff; font-weight: 600; }
.btn.sell { background: var(--down); border-color: var(--down); color: #fff; font-weight: 600; }
.btn.buy:hover, .btn.sell:hover, .btn.primary:hover { filter: brightness(1.1); }
.btn.submit { width: 100%; padding: 11px; font-size: 14px; }
input { background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 7px 10px; width: 100%; outline: none; }
input:hover { border-color: var(--dim); } input:focus { border-color: var(--accent); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.err { color: var(--down); font-size: 12px; min-height: 16px; }

.seg { display: flex; border: 1px solid var(--line); border-radius: 4px; padding: 2px; gap: 2px; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 3px; padding: 6px 4px; cursor: pointer; color: var(--muted); font-weight: 500; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--hover); color: var(--text); }
.seg.small button { padding: 3px 9px; font-size: 12px; }
.seg.side button.on.buy { background: var(--up); color: #fff; }
.seg.side button.on.sell { background: var(--down); color: #fff; }

.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 360px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.login-card p { margin: 0 0 4px; }

.app { height: 100%; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; padding: 0 14px; height: 46px; border-bottom: 1px solid var(--line); background: var(--panel); gap: 22px; flex: none; }
.nav { display: flex; gap: 4px; height: 100%; }
.nav button { border: 0; background: transparent; padding: 0 10px; cursor: pointer; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; border-top: 2px solid transparent; }
.nav button:hover { color: var(--text); } .nav button.on { color: var(--text); border-bottom-color: var(--accent); }
.top-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.conn { font-size: 12px; color: var(--muted); } .conn.ok { color: var(--up); } .conn.bad { color: var(--down); }
.acc { font-weight: 500; font-variant-numeric: tabular-nums; }
.link { color: var(--accent); text-decoration: none; }

.grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 4px; padding: 4px; }
.watch { display: flex; flex-direction: column; min-height: 0; padding: 8px 0 0; }
.watch .search { margin: 0 8px 8px; width: auto; }
.thead, .wrow { display: grid; grid-template-columns: minmax(0, 1fr) 66px 54px; gap: 6px; align-items: center; }
.thead { font-size: 12px; color: var(--muted); padding: 2px 10px 6px; } .thead span:not(:first-child) { text-align: right; }
.list { overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; }
.wrow { padding: 6px 10px; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; }
.wrow > span:first-child { min-width: 0; }
.wrow:hover { background: var(--panel2); } .wrow.on { background: var(--panel2); box-shadow: inset 2px 0 0 var(--accent); }
.wrow b { display: block; font-weight: 500; } .wrow small { color: var(--muted); font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow .p, .wrow .c { text-align: right; font-variant-numeric: tabular-nums; } .wrow .c { font-size: 12px; }

.center { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; }
.symbar { display: flex; align-items: center; gap: 18px; padding: 8px 14px; flex-wrap: wrap; }
.sym { font-weight: 600; font-size: 16px; }
.big { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chg { font-variant-numeric: tabular-nums; }
.stats { display: flex; gap: 16px; color: var(--muted); font-size: 12px; flex: 1 1 250px; flex-wrap: wrap; }
.stats span { white-space: nowrap; } .stats b { color: var(--text); font-weight: 500; margin-left: 3px; font-variant-numeric: tabular-nums; }
.mid { flex: 1; min-height: 240px; display: flex; gap: 4px; }
.chartBox { flex: 1; min-width: 0; position: relative; overflow: hidden; }
#chart { position: absolute; inset: 0; }
.empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }

.depth { width: 236px; flex: none; display: flex; flex-direction: column; min-height: 0; overflow: hidden; font-size: 12px; }
.dtitle { padding: 8px 12px 6px; font-weight: 500; font-size: 13px; }
.dhead, .drow { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0 12px; }
.dhead { color: var(--muted); padding-bottom: 4px; } .dhead span:not(:first-child), .drow span:not(:first-child) { text-align: right; }
.dside { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.dside.asks { justify-content: flex-end; }
.drow { border: 0; width: 100%; height: 20px; line-height: 20px; cursor: pointer; text-align: left; font-variant-numeric: tabular-nums; flex: none;
  background: linear-gradient(to left, var(--bar) var(--w, 0%), transparent var(--w, 0%)); }
.drow:hover { box-shadow: inset 0 0 0 999px var(--tint); }
.drow.ask { --bar: var(--down-bg); } .drow.ask span:first-child { color: var(--down); }
.drow.bid { --bar: var(--up-bg); } .drow.bid span:first-child { color: var(--up); }
.dmid { display: flex; align-items: baseline; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 3px 0; }
.dmid b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .dmid span { color: var(--muted); }
/* ---- che do Pro ---- */
body:not(.pro) .proOnly { display: none !important; }
.modeSeg { margin-left: 16px; flex: none; }
.dtabs { padding: 0 6px; } .dtabs button { padding: 8px 8px 6px; font-size: 12px; }
.dpane { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 6px; }
.tape { flex: 1; min-height: 0; overflow-y: auto; } .tape .drow { cursor: default; }
.quick { width: 104px; flex: none; padding: 6px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; overflow-y: auto; }
.quick .qbtn { padding: 5px 2px; font-size: 12px; width: 100%; font-variant-numeric: tabular-nums; }
.quick .qpx { padding: 7px 2px; font-size: 13px; }
.quick .qstep { padding: 1px; font-size: 10px; color: var(--muted); line-height: 14px; }
.qquote { border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; }
.qquote div { display: flex; justify-content: space-between; line-height: 17px; } .qquote span { color: var(--muted); } .qquote b { font-weight: 500; font-variant-numeric: tabular-nums; }
.qqty { display: flex; border: 1px solid var(--line); border-radius: 4px; }
.qqty button { border: 0; background: transparent; color: var(--muted); width: 24px; cursor: pointer; font-size: 14px; } .qqty button:hover { color: var(--text); }
.qqty input { flex: 1; min-width: 0; width: 0; border: 0; background: transparent; text-align: center; padding: 4px 0; color: var(--text); font: inherit; font-weight: 600; -moz-appearance: textfield; }
.qqty input::-webkit-outer-spin-button, .qqty input::-webkit-inner-spin-button, .domQty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quick select { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 4px; font: inherit; width: 100%; }
.qchk { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.qtpsl { display: flex; flex-direction: column; gap: 4px; } .qtpsl label { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.qtpsl input { flex: 1; min-width: 0; width: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; color: var(--text); padding: 3px 5px; font: inherit; }
.qtpsl small { color: var(--muted); font-size: 10px; line-height: 1.3; }
body.pro .depth { width: 250px; }
.domBar { display: flex; flex-direction: column; gap: 5px; padding: 0 8px 6px; }
.domQty { display: flex; align-items: center; gap: 3px; color: var(--muted); }
.domQty button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 3px; padding: 1px 6px; cursor: pointer; font-size: 12px; }
.domQty button.on { background: var(--hover); color: var(--text); }
.domQty input { flex: 1; min-width: 0; width: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; color: var(--text); padding: 2px 4px; font: inherit; text-align: center; -moz-appearance: textfield; }
.domHead, .domRow { display: grid; grid-template-columns: 26px 1fr 64px 1fr 26px; text-align: center; }
.domHead { color: var(--muted); padding: 0 6px 3px; border-bottom: 1px solid var(--line); }
.domRows { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px; }
.domRow { height: 20px; line-height: 20px; font-variant-numeric: tabular-nums; border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent); }
.domRow span { cursor: pointer; }
.domRow .bs { color: var(--up); background: var(--up-bg); } .domRow .as { color: var(--down); background: var(--down-bg); }
.domRow .bs:empty, .domRow .as:empty { background: transparent; }
.domRow .bs:hover, .domRow .mine:first-child:hover { box-shadow: inset 0 0 0 1px var(--up); }
.domRow .as:hover, .domRow .mine:last-child:hover { box-shadow: inset 0 0 0 1px var(--down); }
.domRow .mine { color: var(--ref); font-weight: 600; }
.domRow .pr { color: var(--text); } .domRow.last .pr { background: var(--ref); color: #1a1300; font-weight: 600; border-radius: 2px; }
.domFoot { display: flex; gap: 4px; padding: 6px; } .domFoot .btn { flex: 1; padding: 6px 2px; font-size: 12px; }
.dnote { color: var(--muted); padding: 6px 12px; font-size: 11px; line-height: 1.35; }

.bottom { height: 236px; display: flex; flex-direction: column; min-height: 0; flex: none; }
.tabs { display: flex; gap: 4px; padding: 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto; flex: none; }
.tabs button { border: 0; background: transparent; padding: 9px 10px 7px; cursor: pointer; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button:hover { color: var(--text); } .tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs i { font-style: normal; font-size: 11px; background: var(--hover); border-radius: 2px; padding: 0 5px; margin-left: 3px; }
.tabBody { flex: 1; overflow: auto; min-height: 0; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--muted); font-weight: 400; font-size: 12px; padding: 6px 10px; position: sticky; top: 0; background: var(--panel); white-space: nowrap; }
td { padding: 6px 10px; border-top: 1px solid var(--panel2); white-space: nowrap; font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: var(--panel2); }
td.r, th.r { text-align: right; } th.c { text-align: center; }
.nodata { padding: 34px; text-align: center; color: var(--muted); }
.pill { font-size: 11px; border-radius: 2px; padding: 1px 6px; background: var(--hover); color: var(--muted); }
.pill.bot { color: var(--accent); }

.right { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: auto; }
.ticket { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk { border: 1px solid var(--line); background: transparent; border-radius: 4px; padding: 6px 9px; text-align: left; cursor: pointer; }
.bk:hover { border-color: var(--dim); }
.bk small { display: block; font-size: 11px; color: var(--muted); } .bk b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bk em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 6px; }
.bk.buy b { color: var(--up); } .bk.sell b { color: var(--down); }
.kv { display: flex; justify-content: space-between; color: var(--muted); } .kv b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.acct { padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.bar { height: 3px; background: var(--hover); border-radius: 2px; overflow: hidden; } .bar div { height: 100%; width: 0; background: var(--up); transition: width .3s; }

.botRow { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--panel2); }
.botRow input { width: 70px; padding: 4px 8px; } .botRow b { font-weight: 500; }
.note { padding: 10px 12px; font-size: 12px; color: var(--muted); }

/* ---------- Bang gia ---------- */
.board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 4px; }
.bcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px; flex: none; }
.bcard { padding: 10px 14px; cursor: pointer; text-align: left; color: inherit; }
.bcard:hover { border-color: var(--dim); } .bcard.on { border-color: var(--accent); }
.bcard .h { display: flex; justify-content: space-between; align-items: baseline; }
.bcard .h span { font-weight: 500; } .bcard .h b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bcard .meter { display: flex; height: 3px; gap: 2px; margin: 8px 0 6px; }
.bcard .meter i { display: block; height: 100%; border-radius: 2px; min-width: 0; }
.bcard .meter .u { background: var(--up); } .bcard .meter .f { background: var(--hover); } .bcard .meter .d { background: var(--down); }
.bcard small { font-size: 12px; color: var(--muted); }
.bpanel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bfilter { display: flex; gap: 4px; flex-wrap: wrap; }
.bfilter button { border: 0; background: transparent; border-radius: 4px; padding: 5px 10px; cursor: pointer; color: var(--muted); font-weight: 500; }
.bfilter button:hover { color: var(--text); } .bfilter button.on { background: var(--hover); color: var(--text); }
.bbar .search { width: 220px; }
.bscroll { flex: 1; min-height: 0; overflow: auto; }
.btable th { padding: 5px 12px; } .btable thead tr:first-child th { padding-top: 9px; } .btable thead tr:nth-child(2) th { top: 29px; padding-bottom: 7px; }
.btable th.grp { color: var(--text); font-weight: 500; }
.btable td { padding: 0 12px; height: 34px; cursor: pointer; }
.btable .hl { background: var(--panel2); } .btable tbody tr:hover td { background: var(--hover); }
.btable td.sym { font-weight: 600; } .btable td.last { font-weight: 600; } .btable td.name small { color: var(--muted); font-size: 13px; }
.btable .star { border: 0; background: transparent; cursor: pointer; color: var(--dim); font-size: 15px; padding: 0 2px; line-height: 1; }
.btable .star:hover { color: var(--muted); } .btable .star.on { color: var(--ref); }
/* phan biet nhom nganh: dong tieu de + vach mau doc theo nhom */
.bcard .h span::before, .gname::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--g); margin-right: 8px; }
.btable tr.ghead td { height: 34px; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--g); cursor: pointer; }
.btable tbody tr.ghead:hover td { background: var(--panel2); }
.btable tbody tr.ghead:first-child td { border-top: 0; }
.ghead .garrow { color: var(--muted); display: inline-block; width: 16px; }
.ghead .gname { font-weight: 600; font-size: 13px; letter-spacing: .2px; }
.ghead .gsub { color: var(--muted); font-size: 12px; margin-left: 14px; }
.ghead b { font-weight: 600; margin-left: 14px; }
.btable tr.grow.palt td { background: var(--tint2); }
.btable tr.grow.pfirst td { border-top: 1px solid var(--line); }
.btable tr.grow:not(.pfirst) td.name .pn { color: var(--muted); }
.btable tr.grow.pfirst td.name .pn { font-weight: 600; }
.btable tr.grow td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--g) 45%, transparent); }
@keyframes flashUp { from { background: var(--up-bg); } } @keyframes flashDown { from { background: var(--down-bg); } }
.btable td.fu { animation: flashUp .6s ease-out; } .btable td.fd { animation: flashDown .6s ease-out; }

.toasts { position: fixed; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 9; }
.toast { background: var(--panel2); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 4px; padding: 8px 12px; max-width: 320px; }
.toast.bad { border-left-color: var(--down); } .toast.good { border-left-color: var(--up); }

@media (max-width: 1100px) { .depth { width: 200px; } .grid { grid-template-columns: 220px minmax(0, 1fr) 280px; } }
@media (max-width: 900px) {
  html, body { height: auto; }
  .app { height: auto; }
  .top { flex-wrap: wrap; height: auto; padding: 6px 12px; gap: 10px; } .nav { height: 34px; }
  .grid { grid-template-columns: 1fr; }
  .watch { max-height: 240px; } .mid { flex-direction: column; flex: none; } .chartBox { height: 300px; flex: none; }
  .depth { width: auto; height: 470px; } .right { overflow: visible; }
  .board { flex: none; } .bpanel { flex: none; } .bscroll { max-height: 70vh; }
}

.themeBtn { width: 30px; padding: 5px 0; text-align: center; }

/* ---- bieu do: thanh cong cu, chi bao, cong cu ve ---- */
.chartBox { display: flex; flex-direction: column; }
.chartBox.full { position: fixed; inset: 0; z-index: 60; border-radius: 0; }
.ctool { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-bottom: 1px solid var(--line); flex: none; flex-wrap: wrap; }
.ctool .seg { border: 0; padding: 0; } .ctool .seg button { padding: 3px 7px; font-size: 12px; flex: none; }
.ctool .seg button.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.csel { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 3px 4px; font: inherit; font-size: 12px; }
.csep { width: 1px; height: 18px; background: var(--line); } .cgrow { flex: 1; }
.cbtn { border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 4px; padding: 3px 7px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.cbtn:hover { color: var(--text); background: var(--tint); } .cbtn.ico { font-size: 14px; padding: 2px 6px; line-height: 18px; }
.cbtn.on { color: #fff; background: var(--up); }
.cmenuWrap { position: relative; }
.cmenu { position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px; padding: 6px; min-width: 190px; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.cmenu label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 3px; cursor: pointer; white-space: nowrap; } .cmenu label:hover { background: var(--tint); }
.cbody { flex: 1; min-height: 0; display: flex; }
.cdraw { width: 30px; flex: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; overflow-y: auto; }
.cdraw button { width: 24px; height: 24px; border: 0; background: transparent; color: var(--muted); border-radius: 4px; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.cdraw button:hover { color: var(--text); background: var(--tint); } .cdraw button.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.csepH { width: 18px; height: 1px; background: var(--line); margin: 3px 0; }
.cwrap { flex: 1; min-width: 0; position: relative; overflow: hidden; }
.csvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.csvg.active { pointer-events: all; cursor: crosshair; }
.dshape line, .dshape rect, .dshape circle { stroke: var(--accent); stroke-width: 1.5; fill: none; pointer-events: stroke; cursor: pointer; }
.dshape rect { fill: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: all; }
.dshape circle { fill: var(--accent); } .dshape line.dash { stroke-dasharray: 4 4; opacity: .6; }
.dshape text { fill: var(--accent); font-size: 10px; pointer-events: none; font-variant-numeric: tabular-nums; }
.csvg.active .dshape * { pointer-events: none; }
.dshape:hover line, .dshape:hover rect { stroke-width: 2.5; }
.cinfo { position: absolute; top: 8px; right: 70px; z-index: 5; padding: 10px 12px; width: 230px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.pospill { margin-left: auto; border: 1px solid var(--line); border-radius: 12px; padding: 3px 10px; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pospill.up { color: var(--up); border-color: var(--up); } .pospill.down { color: var(--down); border-color: var(--down); }

/* ---- menu tai khoan + trang Tai khoan ---- */
.amenuWrap { position: relative; }
.accBtn { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.avatar { width: 22px; height: 22px; border-radius: 4px; background: var(--hover); display: grid; place-items: center; font-size: 10px; font-weight: 600; }
.caret { color: var(--muted); font-size: 10px; }
.amenu { position: absolute; right: 0; top: 100%; margin-top: 6px; width: 270px; z-index: 70; padding: 8px; display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }
.amHead { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 8px; } .amHead b { font-size: 14px; }
.amStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.amStats span { display: block; color: var(--muted); font-size: 11px; } .amStats b { font-weight: 500; font-variant-numeric: tabular-nums; }
.amenu > button, .amenu > a { border: 0; background: transparent; text-align: left; padding: 8px; border-radius: 4px; cursor: pointer; color: var(--text); text-decoration: none; font: inherit; }
.amenu > button:hover, .amenu > a:hover { background: var(--tint); }
.amenu .amOut { color: var(--down); border-top: 1px solid var(--line); border-radius: 0 0 4px 4px; margin-top: 6px; }
.acctPage { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 4px; padding: 4px; }
.apLeft { padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.apHead { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .apHead b { font-size: 15px; }
.apRatio { text-align: right; display: flex; flex-direction: column; } .apRatio b { font-size: 16px; }
.apBig { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.apBarRow { display: flex; justify-content: space-between; align-items: center; } .apBarRow b { font-weight: 600; letter-spacing: .3px; }
.apRows { margin-top: 10px; } .apRows .kv { padding: 11px 0; border-top: 1px solid var(--line); } .apRows .kv b { font-size: 14px; }
.apRight { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.apBar2 { display: flex; align-items: center; gap: 14px; padding: 10px 12px 4px; flex-wrap: wrap; } .apBar2 b { font-variant-numeric: tabular-nums; }
.apRight .tabBody { border-top: 1px solid var(--line); margin-top: 8px; }
@media (max-width: 900px) { .acctPage { grid-template-columns: 1fr; overflow-y: auto; } }

/* ---- sao ke / thong ke ---- */
.apRight .tabs { flex: none; }
.apSum { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.apSum > div { border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; min-width: 128px; background: var(--panel2); }
.apSum span { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; } .apSum b { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stPart { margin-bottom: 14px; } .stTitle { padding: 10px 12px 4px; font-weight: 600; }
.stBarCell { width: 22%; min-width: 90px; position: relative; padding: 0 !important; }
.stBar { position: absolute; top: 25%; height: 50%; border-radius: 2px; } .stBar.pos { left: 50%; background: var(--up); } .stBar.neg { right: 50%; background: var(--down); }
.stBarCell::before { content: ""; position: absolute; left: 50%; top: 15%; bottom: 15%; width: 1px; background: var(--line); }
tr.stBest td { background: var(--tint2); }
.apRight .note { padding: 10px 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }

tr.stMe td { background: color-mix(in srgb, var(--accent) 10%, transparent); } tr.stMe td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.gtag { display: inline-block; border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; margin: 1px 4px 1px 0; font-size: 11px; line-height: 18px; white-space: nowrap; }

.apSum > div.big { min-width: 300px; padding: 8px 14px; border-color: var(--dim); }
.apSum > div.big > b { font-size: 22px; line-height: 28px; display: block; }
.apSum .sub { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 3px; }
.apSum .sub span { display: inline; font-size: 12px; } .apSum .sub i { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
.apSum .sub i.up { color: var(--up); } .apSum .sub i.down { color: var(--down); }

.accBtn .acc { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amRename { display: flex; gap: 6px; padding: 2px 8px 8px; } .amRename input { flex: 1; min-width: 0; }

/* ---- anh dai dien ---- */
.avatar { overflow: hidden; flex: none; } .avatar.emo { font-size: 14px; background: var(--panel2); } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.accBtn .avatar { width: 26px; height: 26px; border-radius: 6px; }
.amAvatar { padding: 2px 8px 8px; } .avGrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.avGrid button { border: 1px solid var(--line); background: var(--panel2); border-radius: 4px; height: 28px; font-size: 15px; cursor: pointer; padding: 0; } .avGrid button:hover { border-color: var(--accent); }
.avActs { display: flex; gap: 6px; margin-top: 6px; }
.whoCell { display: flex; align-items: center; gap: 8px; } .whoCell .avatar { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; background: var(--hover); font-size: 10px; font-weight: 600; } .whoCell .avatar.emo { font-size: 16px; }

/* ---- KLineChart ---- */
.cmHead { color: var(--muted); font-size: 11px; padding: 6px 6px 2px; text-transform: uppercase; letter-spacing: .4px; }
.cdraw button { font-size: 13px; }

/* ---- mau chung tu sao ke ---- */
.docPrint { display: none; } /* mau chung tu chi hien khi in / xuat file */
.doc { max-width: 1080px; margin: 0 auto; background: var(--panel); border: 1px solid var(--dim); padding: 26px 30px 22px; }
.docHead { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--text); }
.docOrg { display: flex; gap: 10px; align-items: flex-start; } .docOrg .logo { font-size: 26px; line-height: 1; }
.docOrg b { font-size: 17px; letter-spacing: .3px; } .docOrg div div, .docNo { color: var(--muted); font-size: 12px; line-height: 1.55; }
.docNo { text-align: right; white-space: nowrap; } .docNo b { color: var(--text); font-variant-numeric: tabular-nums; }
.docTitle { text-align: center; font-size: 19px; font-weight: 600; letter-spacing: 1px; margin: 18px 0 2px; }
.docPeriod { text-align: center; color: var(--muted); margin-bottom: 14px; font-style: italic; }
.docSec { font-weight: 600; letter-spacing: .4px; margin: 16px 0 6px; }
.doc table { width: 100%; border-collapse: collapse; }
.docGrid th, .docGrid td, .docBody th, .docBody td { border: 1px solid var(--dim); padding: 6px 9px; height: auto; }
.docGrid th { text-align: left; font-weight: 500; color: var(--muted); background: var(--panel2); width: 22%; white-space: nowrap; }
.docGrid td { width: 28%; font-variant-numeric: tabular-nums; } .docGrid td.r { text-align: right; font-weight: 500; }
.docGrid .strong { font-weight: 600; color: var(--text); } .docGrid td.strong { font-size: 15px; } .docGrid td.strong.up { color: var(--up); } .docGrid td.strong.down { color: var(--down); }
.docBody thead th { background: var(--panel2); color: var(--text); font-weight: 600; position: static; text-align: center; white-space: nowrap; }
.docBody thead th.r { text-align: center; } .docBody td { font-variant-numeric: tabular-nums; }
.docBody .stt { width: 44px; text-align: center; color: var(--muted); }
.docBody tbody tr:hover td { background: var(--tint2); }
.docBody .nodata { border: 1px solid var(--dim); padding: 22px; text-align: center; color: var(--muted); }
.docBody .stPart { margin-bottom: 12px; } .docBody .stTitle { padding: 8px 0 5px; font-weight: 600; }
.docBody .note { padding: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; font-style: italic; }
.docBody .stBarCell { border-left: 0; } .docBody tr.stMe td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.docFoot { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--dim); color: var(--muted); font-size: 12px; }
.docSign { display: flex; justify-content: space-around; margin-top: 16px; text-align: center; } .docSign div { display: flex; flex-direction: column; gap: 34px; min-width: 200px; }
.docSign b { color: var(--text); letter-spacing: .5px; } .docSign span { color: var(--text); }
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  html, body { height: auto !important; background: #fff !important; }
  :root, :root[data-theme] { --bg: #fff; --panel: #fff; --panel2: #f2f2f2; --text: #000; --muted: #444; --dim: #555; --line: #999; --up: #006b3f; --down: #b00020; --tint2: transparent; --accent: #005b6b; color-scheme: light; }
  .top, .apLeft, #apTabs, .apBar2, #toasts, .grid, #board, #cfSum, #cfBody { display: none !important; }
  .docPrint { display: block !important; }
  .app, .acctPage, .apRight, .apRight .tabBody { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; border: 0 !important; background: #fff !important; }
  .doc { border: 0; padding: 0; max-width: none; }
  .docBody tr { break-inside: avoid; } .docSign { break-inside: avoid; }
  .stBar.pos { background: #006b3f !important; } .stBar.neg { background: #b00020 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.doc { min-width: 760px; } .docGrid tr.main td { font-size: 16px; }

/* ---- bo loc thoi gian trang Tai khoan ---- */
.apBar2 .seg { flex: none; } .apBar2 .seg button { flex: none; padding: 4px 10px; }
.cfDate { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.cfDate input { width: 132px; padding: 3px 6px; font-size: 12px; color-scheme: inherit; }

.cfDate { flex-direction: row; } .apBar2 { gap: 8px 10px; }

.cfExp { display: flex; gap: 6px; flex: none; } .cfDate input { width: 122px; } .apBar2 .seg button { padding: 4px 8px; }

/* ---- form dang ky ---- */
.regFields { display: flex; flex-direction: column; gap: 12px; } .regFields i { color: var(--down); font-style: normal; }
.login-card { max-height: calc(100vh - 24px); overflow-y: auto; }
.err.okmsg { color: var(--up); }

/* ---- vi the: dong vi the bam mo ra tung lenh con ---- */
tr.prow { cursor: pointer; } tr.prow:hover td { background: var(--tint2); } tr.prow.open td { background: var(--tint2); border-bottom-color: transparent; }
tr.prow .garrow { display: inline-block; width: 16px; color: var(--muted); }
tr.lrow td { background: color-mix(in srgb, var(--accent) 5%, transparent); font-size: 12px; padding-top: 4px; padding-bottom: 4px; }
tr.lrow td:first-child { padding-left: 30px; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
tr.lrow .ltime { font-variant-numeric: tabular-nums; }

/* ---- cap them tien ---- */
.amTopup { padding: 2px 8px 10px; display: flex; flex-direction: column; gap: 6px; } .amTopup form { display: flex; flex-direction: column; gap: 8px; }
.amTopup form.hidden { display: none; } .tpPre { display: flex; gap: 4px; } .tpPre button { flex: 1; border: 1px solid var(--line); background: var(--panel2); border-radius: 4px; padding: 3px 0; cursor: pointer; font-size: 12px; color: var(--text); }
.tpPre button:hover { border-color: var(--accent); } #topupBadge { margin-left: 6px; color: var(--ref); border-color: var(--ref); }
.amenu { max-height: calc(100vh - 70px); overflow-y: auto; }

/* ---- o xac thuc Cloudflare + xac thuc email ---- */
.cfBox { min-height: 65px; display: flex; justify-content: center; color: var(--muted); font-size: 12px; }
.verifyBox { border: 1px solid var(--accent); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.verifyBox #fCode { font-size: 20px; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.vActs { display: flex; gap: 8px; } .vActs .btn { flex: 1; }