:root {
  --bg: #0a0f16; --panel: #111a26; --panel2: #162131; --line: #1f2d40;
  --text: #e3ebf5; --muted: #8493a8; --up: #2ecc9a; --down: #ff6b6b; --warn: #f5b942; --blue: #4aa3ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { padding: 10px 10px 24px; min-width: 320px; }
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.lg { width: 22px; height: 22px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }

.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; color: var(--text); }
.brand .ic { color: var(--up); }
.top-actions { display: flex; gap: 6px; }
.icon-btn { background: var(--panel); border: 1px solid var(--line); color: var(--muted); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { color: var(--text); border-color: #2c4060; }

.controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.sym-box { display: flex; gap: 6px; }
input[type=text], input:not([type]), input[type=number], select {
  background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 10px; font: inherit; width: 100%;
}
#symInput { text-transform: uppercase; font-weight: 600; letter-spacing: .3px; }
input:focus, select:focus { outline: none; border-color: var(--blue); }
.btn { background: var(--blue); color: #04101f; border: 0; border-radius: 8px; padding: 7px 14px; font-weight: 650; cursor: pointer; font: inherit; font-weight: 650; }
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: var(--panel2); color: var(--text); }
.seg { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; }
.seg button { flex: 1; background: none; border: 0; color: var(--muted); padding: 5px 0; border-radius: 6px; cursor: pointer; font: inherit; }
.seg button.on { background: var(--panel2); color: var(--text); font-weight: 600; }

.price-row { display: flex; align-items: flex-end; justify-content: space-between; margin: 4px 2px 6px; }
.px { font-size: 24px; font-weight: 700; letter-spacing: .2px; }
.px-sub { font-size: 12px; color: var(--muted); }
.up { color: var(--up); } .down { color: var(--down); }
.live { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgba(46,204,154,.6); animation: pulse 1.8s infinite; }
.live.off i { background: #596579; animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(46,204,154,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,154,0); } }

.chart-wrap { margin-bottom: 10px; }
.chart-box { height: clamp(460px, 72vh, 760px); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0d131c; }
canvas { display: block; cursor: crosshair; }
.layers { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.layers label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; cursor: pointer; }
.layers input { accent-color: var(--blue); margin: 0; }
.hint { color: #5b6a80; font-size: 11px; margin-top: 3px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.card h3 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; gap: 7px; font-weight: 650; }
.card h3 .ic { color: var(--muted); }

.status-head { display: flex; align-items: center; gap: 10px; }
.status-head > div:nth-child(2) { flex: 1; }
.status-title { font-weight: 700; font-size: 15px; }
.score { font-size: 22px; font-weight: 700; }
.status.good .ic.lg, .status.good .score, .status.good .status-title { color: var(--up); }
.status.bad .ic.lg, .status.bad .score, .status.bad .status-title { color: var(--down); }
.status.neutral .ic.lg, .status.neutral .score, .status.neutral .status-title { color: var(--warn); }
.meter { height: 6px; background: var(--panel2); border-radius: 4px; margin: 10px 0 6px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--warn); transition: width .4s, background .4s; }
.status.good .meter i { background: var(--up); } .status.bad .meter i { background: var(--down); }
.notes { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; }

.zone-body .zrow { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.zone-body .zrow:last-child { border: 0; }
.zone-body .zrow b { font-variant-numeric: tabular-nums; }
.zone-note { margin-top: 8px; padding: 8px 10px; background: var(--panel2); border-radius: 8px; color: var(--muted); font-size: 12px; }
.zone-note.warn { color: var(--warn); }
.tag { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--panel2); color: var(--muted); margin-left: 6px; }
.tag.good { background: rgba(46,204,154,.15); color: var(--up); }
.tag.bad { background: rgba(255,107,107,.15); color: var(--down); }

.alert-list { display: flex; flex-direction: column; gap: 7px; }
.alert { display: flex; gap: 9px; padding: 9px 10px; border-radius: 9px; background: var(--panel2); border-left: 3px solid var(--muted); }
.alert .ic { margin-top: 2px; }
.alert.danger { border-color: var(--down); } .alert.danger .ic { color: var(--down); }
.alert.warn { border-color: var(--warn); } .alert.warn .ic { color: var(--warn); }
.alert.good { border-color: var(--up); } .alert.good .ic { color: var(--up); }
.alert.info .ic { color: var(--blue); } .alert.info { border-color: var(--blue); }
.alert b { display: block; font-size: 12.5px; }
.alert span { color: var(--muted); font-size: 12px; }
.empty { color: var(--muted); padding: 6px 2px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--panel2); border-radius: 9px; padding: 8px 10px; }
.stat .k { color: var(--muted); font-size: 11.5px; }
.stat .v { font-weight: 650; font-size: 14px; font-variant-numeric: tabular-nums; }
.profile-body { margin-top: 10px; }

.level-list { display: flex; flex-direction: column; gap: 4px; }
.lv { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 7px; background: var(--panel2); font-variant-numeric: tabular-nums; }
.lv.cur { background: #1b2a40; border: 1px solid #2c4060; }
.lv .k { color: var(--muted); font-size: 11.5px; }
.lv.s b { color: var(--up); } .lv.r b { color: var(--down); }

.disclaimer { display: flex; gap: 8px; color: #6c7b90; font-size: 11.5px; padding: 4px 4px 0; }
.disclaimer p { margin: 0; }
.disclaimer .ic { margin-top: 2px; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 14px; z-index: 10; }
.modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; width: 100%; max-width: 420px; max-height: calc(100vh - 28px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-card h3 { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 14px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row input { width: auto; accent-color: var(--blue); transform: scale(1.2); }
.col { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: -16px; background: var(--panel); padding: 10px 0 2px; }

/* Long / Short tiềm năng */
.bias .ic.lg, .bias .status-title { color: var(--warn); }
.bias.good .ic.lg, .bias.good .status-title { color: var(--up); }
.bias.short .ic.lg, .bias.short .status-title { color: var(--down); }
.bias.bad .ic.lg, .bias.bad .status-title { color: var(--down); }
.dual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.dual-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); }
.dual-top b { font-size: 18px; color: var(--text); }
.dual-col .meter { margin: 6px 0 0; }
.dual-col.long .meter i { background: var(--up); }
.dual-col.short .meter i { background: var(--down); }
.card.side.long { border-left: 3px solid var(--up); }
.card.side.short { border-left: 3px solid var(--down); }
.card.side.long h3 .ic { color: var(--up); }
.card.side.short h3 .ic { color: var(--down); }
.card.side h3 .tag { margin-left: auto; }
.zrow b.conf { font-weight: 500; text-align: right; max-width: 55%; color: var(--text); font-size: 12px; }
.zone-body .notes { margin-top: 8px; }
.side-warn { margin-top: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,107,107,.08); }

.lev-box { margin-top: 10px; padding: 8px 10px; border: 1px dashed #3a2b2b; border-radius: 10px; background: rgba(255,107,107,.04); }
.lev-title { font-weight: 650; font-size: 12px; color: var(--warn); margin-bottom: 4px; }
.lev-box .zone-note { margin-top: 8px; }

/* Thanh lý */
.liq-seg { margin-bottom: 10px; }
.liq-block { margin-bottom: 10px; }
.liq-title { font-size: 12px; font-weight: 650; color: var(--muted); margin-bottom: 4px; }
.liq-nums { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.liq-nums i { font-style: normal; color: var(--muted); }
.split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 5px; background: var(--panel2); }
.split .l { background: var(--down); }
.split .s { background: var(--up); }
.liq-top { margin: 2px 0 8px; }
.liq-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.liq-row { display: grid; grid-template-columns: 62px 48px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 7px; background: var(--panel2); font-size: 12px; font-variant-numeric: tabular-nums; border-left: 3px solid var(--muted); }
.liq-row.long { border-color: var(--down); }
.liq-row.short { border-color: var(--up); }
.liq-row b { font-weight: 650; }
.liq-row em { font-style: normal; font-weight: 650; }
.liq-row.long em { color: var(--down); }
.liq-row.short em { color: var(--up); }
.liq-note { margin: 10px 0 0; }

/* Thẻ đa khung */
.mtf .grade { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:10px; font-size:22px; font-weight:800; margin-right:10px; background:#2a2412; color:#f5b942; border:1px solid #6b5520; }
.mtf .grade.A { background:#10301f; color:#2ecc9a; border-color:#1f6b4a; }
.mtf .grade.B { background:#162a3a; color:#4aa3ff; border-color:#2a5a86; }
.mtf .grade.D { background:#2a1717; color:#ff8b8b; border-color:#6b2a2a; }
.mtf .best-head { display:flex; align-items:center; margin-bottom:8px; }
.mtf .best-head b { font-size:14px; display:block; }
.mtf .best-head span { color:var(--muted); font-size:12px; }
.mtf table.tf { width:100%; border-collapse:collapse; font-size:12px; margin:8px 0; }
.mtf table.tf th, .mtf table.tf td { text-align:left; padding:4px 6px; border-bottom:1px solid #1f2a3a; }
.mtf table.tf th { color:var(--muted); font-weight:500; }
.mtf .chk { list-style:none; margin:6px 0; padding:0; font-size:12.5px; }
.mtf .chk li { padding:2px 0 2px 22px; position:relative; }
.mtf .chk li::before { content:""; position:absolute; left:2px; top:5px; width:12px; height:12px; border-radius:50%; background:#2a3547; }
.mtf .chk li.ok::before { background:#2ecc9a; }
.mtf .chk li.no::before { background:#ff6b6b; }
.mtf .chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.mtf .chip { background:#172233; border:1px solid #26364d; border-radius:999px; padding:3px 9px; font-size:11.5px; }
.mtf .reasons { margin:6px 0; padding-left:18px; font-size:12.5px; color:var(--muted); }
.mtf .reasons .p { color:#2ecc9a; } .mtf .reasons .m { color:#ff8b8b; }

/* Gọn thông tin */
.mini { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mini > div { background:var(--panel2); border-radius:8px; padding:6px 9px; min-width:0; }
.mini span { display:block; color:var(--muted); font-size:11px; margin-bottom:1px; }
.mini b { font-size:13px; font-variant-numeric:tabular-nums; }
.fold { margin-top:8px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.015); }
.fold > summary { cursor:pointer; list-style:none; padding:7px 10px; display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); }
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::after { content:""; width:6px; height:6px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); margin:4px 2px 0 6px; flex:none; transition:transform .15s; }
.fold[open] > summary::after { transform:rotate(-135deg); margin-top:7px; }
.fold > summary em { font-style:normal; margin-left:auto; font-weight:600; }
.fold > :not(summary) { margin-left:10px; margin-right:10px; }
.fold > :last-child { margin-bottom:10px; }
.zone-body .zone-note { margin-top:6px; padding:6px 9px; }
.card { padding:10px 12px; margin-bottom:8px; }
.mini .tag { display:inline-block; margin:0 0 0 4px; font-size:10.5px; }

/* AI */
.ai-bar { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ai-bar .btn[disabled] { opacity:.6; cursor:wait; }
.ai .verdict { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.ai .verdict .v { font-weight:800; font-size:15px; padding:4px 12px; border-radius:8px; }
.ai .verdict .v.long { background:#10301f; color:#2ecc9a; } .ai .verdict .v.short { background:#2a1717; color:#ff8b8b; } .ai .verdict .v.wait { background:#2a2412; color:#f5b942; }
.ai .sc { background:var(--panel2); border-radius:8px; padding:7px 10px; margin-top:6px; font-size:12.5px; }
.ai .sc b { display:block; margin-bottom:2px; }
.ai .sc span { display:block; color:var(--muted); }
.ai ul { margin:6px 0 0; padding-left:18px; font-size:12.5px; color:var(--muted); }
.ai .err { color:var(--down); font-size:12.5px; }

/* SL ẩn */
.hid { margin-top:8px; padding:8px 10px; border:1px dashed #5a4a86; border-radius:10px; background:rgba(180,140,255,.06); }
.hid .t { font-weight:650; font-size:12px; color:#b48cff; margin-bottom:4px; }
.hid .zrow b.p { color:#b48cff; }
.pos .prow { background:var(--panel2); border-radius:9px; padding:8px 10px; margin-top:6px; font-size:12.5px; }
.pos .prow .h { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.pos .prow .g { display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; color:var(--muted); margin-top:4px; font-size:12px; }
.pos .prow .g b { color:var(--text); font-variant-numeric:tabular-nums; }
.pos .x { background:none; border:0; color:var(--muted); cursor:pointer; font-size:12px; text-decoration:underline; }

/* Quyết định hướng thời gian thực */
.dec .big { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.dec .vd { font-weight:800; font-size:20px; padding:6px 16px; border-radius:10px; letter-spacing:.5px; }
.dec .vd.long { background:#10301f; color:#2ecc9a; border:1px solid #1f6b4a; } .dec .vd.short { background:#2a1717; color:#ff8b8b; border:1px solid #6b2a2a; } .dec .vd.wait { background:#2a2412; color:#f5b942; border:1px solid #6b5520; }
.dec .cd { font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--muted); line-height:1.5; }
.dec .cd b { color:var(--text); font-size:15px; }
.dec .bar { height:6px; border-radius:4px; background:#1b2636; overflow:hidden; margin:2px 0 8px; }
.dec .bar i { display:block; height:100%; background:linear-gradient(90deg,#4aa3ff,#b48cff); }
.dec .sc2 { display:grid; gap:4px; margin-top:6px; }
.dec .sc2 div { background:var(--panel2); border-radius:8px; padding:6px 10px; font-size:12.5px; border-left:3px solid #3a4a62; }
.dec .sc2 div.long { border-color:#2ecc9a; } .dec .sc2 div.short { border-color:#ff6b6b; }
.dec .sc2 b { display:block; } .dec .sc2 span { color:var(--muted); }
.dec table.tf2 { width:100%; border-collapse:collapse; font-size:12px; margin-top:8px; }
.dec table.tf2 th, .dec table.tf2 td { text-align:left; padding:4px 5px; border-bottom:1px solid #1f2a3a; vertical-align:top; }
.dec table.tf2 th { color:var(--muted); font-weight:500; }
.dec .ent { background:var(--panel2); border-radius:8px; padding:7px 10px; margin-top:6px; font-size:12.5px; }
.dec .ent .h { display:flex; justify-content:space-between; gap:8px; }
.dec .ent .g { display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; color:var(--muted); font-size:11.5px; margin-top:4px; }
.dec .ent .g b { display:block; color:var(--text); font-size:12px; font-variant-numeric:tabular-nums; }
.dec .ent .st { font-size:11px; padding:1px 7px; border-radius:999px; background:#1b2636; color:var(--muted); white-space:nowrap; }
.dec .ent .st.active { background:#10301f; color:#2ecc9a; } .dec .ent .st.dead, .dec .ent .st.poor { background:#2a1717; color:#ff8b8b; }

.dec .hist-row { background:var(--panel2); border-radius:8px; padding:7px 10px; margin-top:6px; font-size:12.5px; }
.dec .hist-row b { display:block; } .dec .hist-row span { color:var(--muted); display:block; }
.dec .hist-row .v-good { color:#2ecc9a; } .dec .hist-row .v-bad { color:#ff8b8b; }