/* KN Signal Hub — mobile-first. Khong dung framework, khong can build. */
:root {
  /* (07/10) bang mau kninvestos.top DANG CHAY = lop 'MONOCHROME — den trang sang trong': nen den, chu trang, kinh trang */
  --bg: #0a0a0b;
  --bg-soft: #111113;
  --card: rgba(255,255,255,.05);
  --card-2: rgba(255,255,255,.085);
  --line: rgba(255,255,255,.12);
  --text: #f4f4f6;
  --muted: #8b8b93;
  --brand: #ffffff;
  --brand-2: #d4d4d8;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #fb7185;
  --radius: 18px;
  --primary-2: #d4d4d8;
  --glow: rgba(255,255,255,.22);
  --glass-bd: rgba(255,255,255,.16);
  --glass-hi: rgba(255,255,255,.42);
  --nav-h: 62px;
  --font: "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
:root[data-theme="light"] {
  --bg: #f4f8fb; --bg-soft: #ffffff; --card: #ffffff; --card-2: #eef5f9;
  --line: #d9e6ee; --text: #0a1a24; --muted: #557081;
  --brand: #18181b; --brand-2: #3f3f46; --glow: rgba(0,0,0,.15);   /* (07/10) giao dien sang: diem nhan den (den trang nhu kninvestos) */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}
a { color: var(--brand-2); text-decoration: none; }
h1, h2, h3 { margin: 0 0 6px; line-height: 1.25; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 600; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); font-size: 13px; }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.hide { display: none !important; }

/* ---------- layout ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: rgba(7,13,26,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
:root[data-theme="light"] .topbar { background: rgba(255,255,255,.92); }
.topbar .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.topbar .brand b { color: var(--brand-2); }
.topbar .spacer { flex: 1; }
.icon-btn {
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  cursor: pointer; font-size: 15px;
}
main { padding: 14px; max-width: 1180px; margin: 0 auto; }
.page-head { margin-bottom: 12px; }
.grid { display: grid; gap: 12px; }
.grid.c2 { grid-template-columns: 1fr; }
.grid.c3 { grid-template-columns: 1fr 1fr; }
.grid.c4 { grid-template-columns: 1fr 1fr; }

/* ---------- card ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px;
}
.card.tight { padding: 12px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .label { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.stat .value { font-size: 20px; font-weight: 700; font-family: var(--mono); }
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; border: 1px solid var(--line); background: var(--card-2);
}
.badge.ok { color: var(--ok); border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); }
.badge.bad { color: var(--bad); border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }
.badge.warn { color: var(--warn); border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }

/* ---------- form ---------- */
label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 5px; }
input, select, textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--text); font-size: 15px; font-family: var(--font);
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(255,255,255,.45); border-color: var(--brand); }
.field-row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 16px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--card-2); color: var(--text); font-weight: 600; font-size: 14px;
  cursor: pointer; min-height: 44px;
}
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: #fda4a4; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 7px 11px; min-height: 34px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.help { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- bottom nav (mobile) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid;
  grid-template-columns: repeat(5, 1fr); background: rgba(13,22,40,.96);
  border-top: 1px solid var(--line); backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="light"] .tabbar { background: rgba(255,255,255,.97); }
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--nav-h); color: var(--muted); font-size: 10.5px; font-weight: 600;
}
.tabbar a.active { color: var(--brand-2); }
.tabbar svg { width: 21px; height: 21px; }
.sidebar { display: none; }

/* ---------- toast ---------- */
#toasts {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 12px); z-index: 60;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  background: var(--card-2); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 10px; padding: 11px 13px; font-size: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.35);
  animation: slideUp .18s ease-out;
}
.toast.err { border-left-color: var(--bad); }
.toast.ok { border-left-color: var(--ok); }
@keyframes slideUp { from { transform: translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0; z-index: 70; background: rgba(3,7,16,.72);
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
.modal {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px 18px 0 0;
  width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto; padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.modal-head { display: flex; align-items: center; margin-bottom: 6px; }
.modal-head .spacer { flex: 1; }

/* ---------- misc ---------- */
.stepper { display: grid; gap: 8px; }
.step { display: flex; align-items: center; gap: 10px; }
.step .dot {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line);
  display: grid; place-items: center; font-size: 11px; flex: none;
}
.step.done .dot { border-color: var(--ok); color: var(--ok); }
.step.active .dot { border-color: var(--brand); color: var(--brand-2); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); }
.secret-box {
  font-family: var(--mono); font-size: 12.5px; word-break: break-all; background: var(--bg-soft);
  border: 1px dashed var(--line); border-radius: 10px; padding: 10px; margin-top: 6px;
}
.empty { text-align: center; padding: 34px 14px; color: var(--muted); }
.empty .big { font-size: 30px; margin-bottom: 6px; }
.chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 58vh; overflow-y: auto; padding-right: 2px; }
.bubble { padding: 10px 12px; border-radius: 12px; max-width: 88%; font-size: 14px; }
.bubble.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.bubble.ai { align-self: flex-start; background: var(--card-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.pill-row { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0; }
.pill { border: 1px solid var(--line); background: var(--card-2); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; }
.pill.on { border-color: var(--accent, #ffffff); color: var(--text, #fff); background: rgba(255,255,255,.16); font-weight: 600; }
.auth-wrap { max-width: 1080px; margin: 0 auto; }
.auth-card { max-width: 460px; margin: 0 auto; }
.hero { text-align: center; padding: 26px 8px 14px; }
.hero h1 { font-size: 26px; }
.hero .grad { background: linear-gradient(92deg, var(--brand-2), #d4d4d8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-lg { font-size: 15px; font-weight: 700; letter-spacing: .4px; margin-bottom: 14px; }
.brand-lg b { color: var(--brand-2); }
.auth-facts { display: none; }
.fact { display: flex; flex-direction: column; gap: 2px; }
.fact b { font-family: var(--mono); font-size: 24px; color: var(--brand-2); }
.fact span { font-size: 12.5px; color: var(--muted); }
.trust { display: grid; gap: 8px; margin-top: 14px; }
.trust-item { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; }
.trust-item .ic { color: var(--ok); flex: none; }

/* ---------- tablet / desktop ---------- */
@media (min-width: 680px) {
  .grid.c2 { grid-template-columns: 1fr 1fr; }
  .grid.c3 { grid-template-columns: repeat(3, 1fr); }
  .grid.c4 { grid-template-columns: repeat(4, 1fr); }
  .modal-back { align-items: center; padding: 20px; }
  .modal { border-radius: 18px; }
}
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  /* grid phai dat tren #app vi sidebar va noi dung deu la con cua #app */
  #app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
  /* trang dang nhap khong co sidebar: bo luoi, dan hero + form thanh 2 cot */
  #app.auth-mode { display: block; }
  #app.auth-mode main { display: grid; place-items: center; min-height: 100vh; }
  .auth-wrap {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center;
    width: 100%; padding: 20px 0;
  }
  .auth-wrap .hero { text-align: left; padding: 0; }
  .auth-wrap .hero h1 { font-size: 40px; line-height: 1.15; }
  .auth-wrap .hero p { font-size: 15.5px; max-width: 430px; }
  .auth-facts { display: grid; grid-template-columns: repeat(3, auto); gap: 26px; margin-top: 26px; justify-content: start; }
  .auth-card { max-width: 440px; margin: 0; }
  .sidebar {
    display: flex; flex-direction: column; gap: 3px; padding: 14px 12px;
    border-right: 1px solid var(--line); background: var(--bg-soft); min-height: 100vh;
    position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  }
  .sidebar .logo { display: flex; align-items: center; gap: 9px; font-weight: 700; padding: 6px 8px 14px; }
  .sidebar a {
    display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 10px;
    color: var(--muted); font-size: 14px; font-weight: 550;
  }
  .sidebar a.active { background: var(--card); color: var(--text); border: 1px solid var(--line); }
  .sidebar .sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding: 14px 11px 5px; }
  .sidebar svg { width: 18px; height: 18px; }
  .tabbar { display: none; }
  .app-col { min-width: 0; }
  main { padding: 20px 24px 40px; }
  #toasts { left: auto; right: 20px; bottom: 20px; width: 380px; }
  h1 { font-size: 26px; }

  /* the trang thai rong phai chiem ca hang, khong nam thut nua man */
  .grid > .card.span-all { grid-column: 1 / -1; }
  /* tieu de va nut hanh dong nam cung hang tren man rong */
  .head-row { display: flex; align-items: flex-end; gap: 16px; justify-content: space-between; }
  .head-row .page-head { margin-bottom: 0; }
  /* khung chat cao hon cho do trong trai */
  .chat-log { min-height: 46vh; max-height: 56vh; }
  /* khoi tai khoan duoi chan sidebar */
  .side-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
  .side-foot .who { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-foot .pkg { font-size: 11.5px; color: var(--muted); }
}

/* ============================================================
   BANG XEP HANG KIEU SAN DAU — trinh bay bam theo doi thu,
   nhung so lieu ben duoi la lenh THAT da tru phi.
   ============================================================ */
.marquee {
  overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-soft);
  padding: 7px 0; font-size: 12.5px; white-space: nowrap;
}
.marquee-track { display: inline-flex; gap: 40px; animation: run 42s linear infinite; }
.marquee-track span { color: var(--muted); }
.marquee-track b { color: var(--ok); font-family: var(--mono); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes run { from { transform: translateX(0) } to { transform: translateX(-50%) } }

.podium { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 10px; }
.rank-card {
  position: relative; background: linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 14px 14px;
  transition: transform .18s ease, border-color .18s ease;
}
.rank-card:hover { border-color: #3f3f46; }   /* (07/10) the dung yen khi re chuot */
.rank-card .rank-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; font-family: var(--mono); color: #0b1020;
  border: 2px solid var(--bg);
}
.rank-1 { border-color: rgba(250,204,21,.5); box-shadow: 0 0 0 1px rgba(250,204,21,.14), 0 10px 34px -12px rgba(250,204,21,.4); }
.rank-1 .rank-badge { background: linear-gradient(150deg, #fde68a, #f59e0b); }
.rank-2 { border-color: rgba(148,163,184,.45); }
.rank-2 .rank-badge { background: linear-gradient(150deg, #e2e8f0, #94a3b8); }
.rank-3 { border-color: rgba(217,119,6,.38); }
.rank-3 .rank-badge { background: linear-gradient(150deg, #fdba74, #c2410c); }
.rank-card .rk-name { font-weight: 700; font-size: 14.5px; text-align: center; margin-top: 4px; }
.rank-card .rk-sub { text-align: center; font-size: 11.5px; color: var(--muted); }
.rank-card .rk-tags { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.big-pnl { text-align: center; font-family: var(--mono); font-weight: 700; font-size: 25px; margin: 6px 0 2px; }
.big-pnl.up { color: #34d399; text-shadow: 0 0 26px rgba(52,211,153,.3); }
.big-pnl.down { color: #f87171; }
.rk-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 10px; background: var(--line); border-radius: 10px; overflow: hidden; }
.rk-foot div { background: var(--card); padding: 7px 8px; text-align: center; }
.rk-foot .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.rk-foot .v { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.rk-note { text-align: center; font-size: 10.5px; color: var(--muted); margin-top: 8px; font-family: var(--mono); }

.spark { display: block; width: 100%; height: 46px; }
.spark-lg { height: 62px; }

.donut { position: relative; width: 54px; height: 54px; flex: none; }
.donut svg { transform: rotate(-90deg); }
.donut .lbl { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-family: var(--mono); font-weight: 700; font-size: 13px; line-height: 1; }
.donut .lbl small { display: block; font-size: 8px; color: var(--muted); font-weight: 600; letter-spacing: .4px; }

.rank-row { display: grid; grid-template-columns: 26px 1fr 84px 92px; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: 0; }
.rank-row .no { font-family: var(--mono); color: var(--muted); font-size: 12px; text-align: center; }
.rank-row .nm { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .nm small { display: block; color: var(--muted); font-weight: 500; font-size: 11px; }
.rank-row .pn { text-align: right; font-family: var(--mono); font-weight: 700; font-size: 13.5px; }

.card.accent { background: linear-gradient(155deg, rgba(255,255,255,.10), transparent 62%), var(--card); }
.card.accent-ok { background: linear-gradient(155deg, rgba(34,197,94,.10), transparent 62%), var(--card); }
.stat .value.xl { font-size: 26px; }

.status-chips { display: flex; gap: 6px; align-items: center; }
.chip { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--mono); display: inline-flex; align-items: center; gap: 5px; }
.chip .dot-live { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.8s infinite; }
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.chip.on { color: #34d399; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.chip.off { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
/* (06/10) nhan dau trang: khong bao gio gay 2 dong; dien thoai bo chu dai ('LIVE', 'ACTIVE', 'CO') */
.chip { white-space: nowrap; text-decoration: none; }
.chip-ngan { display: none; }
.b-quay-lai { font-size: 24px; line-height: 1; padding-bottom: 3px; margin-right: -2px; }   /* (06/10) nut quay lai canh KN Hub */
@media (max-width: 679px) {
  .chip-dai { display: none; }
  .chip-ngan { display: inline; }
  .topbar { gap: 8px; }
}
/* (06/10) khung 'Them': the noi GIUA man hinh (ca tren dien thoai) + nut con nhong chia nhom */
.modal-back.giua { align-items: center; padding: 16px; }
.modal-back.giua .modal { border-radius: 20px; max-width: 420px; padding-bottom: 16px; }
.menu-them .mt-nhom { font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin: 12px 4px 8px; }
.menu-them .mt-nhom:first-child { margin-top: 2px; }
.mt-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt-pill {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px 9px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--text); font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; font-family: inherit; min-width: 0;
}
.mt-pill svg { width: 18px; height: 18px; flex: none; color: var(--brand-2); }
.mt-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-pill:hover { border-color: var(--brand); }
.mt-pill.on { border-color: var(--brand); background: rgba(255,255,255,.16); color: var(--brand-2); }
.mt-luoi > .mt-pill:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }   /* nut le cuoi nhom trai du hang */
.mt-thoat { width: 100%; justify-content: center; margin-top: 14px; color: #f87171; border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); }
.mt-thoat svg { color: #f87171; }

@media (min-width: 680px) {
  .podium { grid-template-columns: 1fr 1.14fr 1fr; align-items: center; }
  .podium .rank-card:nth-child(2) { padding-top: 24px; padding-bottom: 18px; }
  .podium .rank-card:nth-child(2) .big-pnl { font-size: 30px; }
}

/* ============================================================
   COVERFLOW 3D — port tu component React anh gui sang vanilla JS.
   Dung cho bang xep hang bot; du lieu ben trong van la lenh THAT.
   ============================================================ */
.cf-section {
  position: relative; width: 100%; overflow: hidden; border-radius: 16px;
  padding: 22px 0 18px; background: #070d1a; border: 1px solid var(--line);
}
:root[data-theme="light"] .cf-section { background: #0b1220; }
.cf-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cf-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(7,13,26,.25) 0%, rgba(7,13,26,.96) 100%);
}
.cf-glow {
  position: absolute; left: 50%; top: 42%; width: 620px; height: 340px; transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.30), transparent 72%); filter: blur(34px);
}
.cf-inner { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; }
.cf-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cf-eyebrow span.ln { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-2)); }
.cf-eyebrow span.ln.r { background: linear-gradient(90deg, var(--brand-2), transparent); }
.cf-eyebrow h3 {
  font-size: .72rem; font-weight: 800; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brand-2); margin: 0;
}
.cf-stage {
  position: relative; width: 100%; height: 400px; display: flex; justify-content: center;
  align-items: center; margin-bottom: 16px; perspective: 1400px;
}
.cf-card {
  position: absolute; width: 260px; height: 372px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(165deg, #16233d, #0d1628);
  border: 1px solid rgba(255,255,255,.12); transform-origin: center center;
  transition: transform 800ms cubic-bezier(.25,1,.5,1), opacity 800ms cubic-bezier(.25,1,.5,1),
              filter 800ms ease, box-shadow 400ms ease;
  padding: 16px 15px 15px; display: flex; flex-direction: column;
}
.cf-card.is-center { box-shadow: 0 25px 60px rgba(0,0,0,.85), 0 0 34px rgba(255,255,255,.26); cursor: default; }
.cf-card:not(.is-center) { cursor: pointer; box-shadow: 0 15px 35px rgba(0,0,0,.5); }
.cf-card.gold.is-center { box-shadow: 0 25px 60px rgba(0,0,0,.85), 0 0 36px rgba(250,204,21,.34); border-color: rgba(250,204,21,.45); }
.cf-rank {
  align-self: flex-end; font-family: var(--mono); font-size: .78rem; font-weight: 700;
  color: rgba(255,255,255,.9); text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
.cf-body { margin-top: auto; text-align: center; }
.cf-title {
  font-size: 1.16rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em;
  margin: 0; line-height: 1.12; color: #fff; text-shadow: 0 3px 12px rgba(0,0,0,.95);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-sub { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #cbd5f5; }
.cf-rule { width: 34px; height: 2px; border-radius: 2px; margin: 7px auto 6px; background: var(--brand-2); box-shadow: 0 0 8px rgba(228,228,231,.7); }
.cf-card.gold .cf-rule { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.75); }
.cf-desc { font-size: .78rem; color: rgba(255,255,255,.82); margin: 0 0 8px; line-height: 1.35; }
.cf-pnl { font-family: var(--mono); font-weight: 800; font-size: 1.6rem; margin: 2px 0 4px; }
.cf-pnl.up { color: #34d399; text-shadow: 0 0 24px rgba(52,211,153,.35); }
.cf-pnl.down { color: #f87171; }
.cf-cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px;
  background: linear-gradient(135deg, #e4e4e7 0%, #a1a1aa 100%); color: #06101f;
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border: 0; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4), 0 0 15px rgba(255,255,255,.3);
}
.cf-card.gold .cf-cta { background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%); }
.cf-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.2); color: #fff;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px);
  cursor: pointer; z-index: 40; font-size: 18px; line-height: 1;
}
.cf-nav.l { left: 10px; } .cf-nav.r { right: 10px; }
.cf-dots { display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 30; }
.cf-dot { height: 8px; width: 8px; border-radius: 999px; background: rgba(255,255,255,.25); border: 0; cursor: pointer; transition: all .3s ease; padding: 0; }
.cf-dot.on { width: 26px; background: var(--brand-2); box-shadow: 0 0 10px rgba(228,228,231,.7); }
.cf-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; margin-top: 8px; }
.cf-foot div { background: rgba(9,15,28,.86); padding: 6px 8px; text-align: center; }
.cf-foot .k { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.cf-foot .v { font-family: var(--mono); font-weight: 700; font-size: 13px; }

@media (min-width: 680px) {
  .cf-stage { height: 470px; }
  .cf-card { width: 300px; height: 430px; }
  .cf-nav.l { left: 22px; } .cf-nav.r { right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-card { transition: none; }
}

/* ============================================================
   LOP THI GIAC 2 — hoc y tuong tu kho 21st.dev, viet lai bang CSS thuan:
   nen aurora dong, the KPI co bieu do nen, the nghieng 3D theo chuot,
   vien phat sang, so dem tang dan.
   ============================================================ */

/* --- nen aurora: 3 khoi sang troi cham, chi dung transform nen nhe may --- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i {
  position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: .38;
  will-change: transform;
}
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -8vw; top: -12vw; background: #52525b; animation: au1 26s ease-in-out infinite; }
.aurora i:nth-child(2) { width: 38vw; height: 38vw; right: -6vw; top: 8vh; background: #7c3aed; animation: au2 32s ease-in-out infinite; opacity: .28; }
.aurora i:nth-child(3) { width: 42vw; height: 42vw; left: 32vw; bottom: -18vw; background: #a1a1aa; animation: au3 38s ease-in-out infinite; opacity: .22; }
@keyframes au1 { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(6vw,4vh,0) scale(1.15) } }
@keyframes au2 { 0%,100% { transform: translate3d(0,0,0) scale(1.1) } 50% { transform: translate3d(-5vw,6vh,0) scale(.95) } }
@keyframes au3 { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(-7vw,-5vh,0) scale(1.2) } }
:root[data-theme="light"] .aurora i { opacity: .18; }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }

/* --- luoi mo phia sau noi dung, kieu dashboard hien dai --- */
.gridlines {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(148,163,184,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(148,163,184,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* --- the KPI kieu 21st: so lon, bieu do chim duoi, vien sang --- */
.kpi {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card); padding: 14px 15px 12px;
  transition: border-color .2s ease, transform .2s ease;
}
.kpi:hover { border-color: #3f3f46; }
.kpi .k-label { font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.kpi .k-value { font-family: var(--mono); font-weight: 800; font-size: 27px; letter-spacing: -.5px; margin-top: 2px; line-height: 1.15; }
.kpi .k-sub { font-size: 12px; color: var(--muted); }
.kpi .k-chart { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; opacity: .5; pointer-events: none; }
.kpi.pos { background: linear-gradient(165deg, rgba(52,211,153,.10), transparent 60%), var(--card); }
.kpi.neg { background: linear-gradient(165deg, rgba(248,113,113,.10), transparent 60%), var(--card); }
.kpi.brand { background: linear-gradient(165deg, rgba(228,228,231,.12), transparent 60%), var(--card); }

/* --- vien phat sang chay quanh the noi bat --- */
.glow-border { position: relative; }
.glow-border::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 62%, var(--brand-2) 78%, #d4d4d8 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
  animation: spin-ang 6s linear infinite;
}
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin-ang { to { --ang: 360deg } }
@media (prefers-reduced-motion: reduce) { .glow-border::before { animation: none; } }

/* --- the nghieng 3D theo chuot --- */
/* (07/10) bo hieu ung nghieng the theo chuot (anh Lam: 'de yen cho no chay') */

/* --- bento: o lon nho xen ke --- */
.bento { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 680px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento .b-2 { grid-column: span 2; }
  .bento .b-4 { grid-column: span 4; }
}

/* --- chu gradient dung cho tieu de trang --- */
.grad-text {
  background: linear-gradient(96deg, var(--text) 20%, var(--brand-2) 60%, #d4d4d8 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}



/* ============================================================
   LOP 3D THAT SU — the lat, nut co do day, modal bay vao theo truc Z,
   cot bieu do 3D, hero xoay theo chuot.
   ============================================================ */

/* --- the lat 2 mat --- */
.flip { perspective: 1200px; }
.flip-in { position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.flip.on .flip-in { transform: rotateY(180deg); }
.flip-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-back {
  position: absolute; inset: 0; transform: rotateY(180deg); overflow: auto;
  background: var(--card); border-radius: var(--radius); padding: 14px;
}
.flip-btn {
  position: absolute; top: 10px; right: 10px; z-index: 5; width: 28px; height: 28px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--card-2);
  color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1;
}

/* --- nut co do day, an xuong khi bam --- */
.btn3d {
  position: relative; border: 0; border-radius: 12px; padding: 11px 18px; cursor: pointer;
  font-weight: 700; font-size: 14px; color: #06101f;
  background: linear-gradient(180deg, #f4f4f5, #ffffff);
  box-shadow: 0 5px 0 #1e40af, 0 10px 22px rgba(37,99,235,.35);
  transform: translateZ(0); transition: transform .1s ease, box-shadow .1s ease;
}
.btn3d:active { transform: translateY(4px); box-shadow: 0 1px 0 #1e40af, 0 4px 12px rgba(37,99,235,.3); }
.btn3d.ghost3d { background: linear-gradient(180deg, var(--card-2), #101a2e); color: var(--text); box-shadow: 0 5px 0 #0a1120, 0 10px 20px rgba(0,0,0,.4); }
.btn3d.ghost3d:active { box-shadow: 0 1px 0 #0a1120; }

/* --- modal bay vao theo truc Z --- */
.modal-back { perspective: 1200px; }
.modal { animation: zoomIn .28s cubic-bezier(.2,.9,.3,1); }
@keyframes zoomIn { from { transform: translateZ(-220px) rotateX(9deg); opacity: 0 } to { transform: none; opacity: 1 } }

/* --- lich PnL dang cot 3D --- */
.cal3d { perspective: 900px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; transform: rotateX(16deg); transform-style: preserve-3d; }
.cal-cell {
  position: relative; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card-2); display: grid; place-items: center; font-family: var(--mono);
  font-size: 11px; color: var(--muted); transition: transform .2s ease, box-shadow .2s ease;
  transform-style: preserve-3d;
}
.cal-cell.win { background: linear-gradient(180deg, rgba(52,211,153,.30), rgba(52,211,153,.08)); border-color: rgba(52,211,153,.4); color: #d1fae5; }
.cal-cell.loss { background: linear-gradient(180deg, rgba(248,113,113,.30), rgba(248,113,113,.08)); border-color: rgba(248,113,113,.4); color: #fee2e2; }
.cal-cell:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.35); z-index: 5; }
.cal-cell b { font-size: 13px; display: block; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-head span { text-align: center; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* --- hero xoay nhe theo chuot --- */
.scene { perspective: 1000px; }
.scene-layer { transition: transform .2s ease-out; will-change: transform; }

/* --- danh sach tin hieu --- */
.sig-row {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px;
  background: var(--card); transition: transform .18s ease, border-color .18s ease;
}
.sig-row:hover { border-color: #3f3f46; }
.sig-side { font-family: var(--mono); font-weight: 800; font-size: 12px; padding: 5px 0; text-align: center; border-radius: 8px; }
.sig-side.buy { color: #34d399; background: rgba(52,211,153,.12); }
.sig-side.sell { color: #f87171; background: rgba(248,113,113,.12); }
.sig-px { font-family: var(--mono); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .flip-in, .modal, .cal-cell, .scene-layer, .sig-row { transition: none; animation: none; }
  .cal-grid { transform: none; }
}

/* khoi mo tai khoan san doi tac KN */
.san-box{margin-top:14px;padding:12px 14px;border:1px solid var(--line,#22334F);border-radius:10px;background:rgba(255,255,255,.03)}
.san-head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;font-size:13px}
.san-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.san-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line,#22334F);border-radius:8px;text-decoration:none;color:inherit;font-size:12.5px;transition:.15s}
.san-item:hover{border-color:#ffffff}
.san-item span{color:#8FA3BF;font-size:11.5px}
.san-item em{font-style:normal;color:#ffffff;font-weight:600;margin-top:4px;font-size:12px}
@media(max-width:600px){.san-grid{grid-template-columns:1fr}}

.vet-lead{border-color:var(--accent,#ffffff);box-shadow:0 0 0 1px var(--accent,#ffffff) inset}
.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dotted var(--line,#22334F);font-size:13px}
.kv:last-child{border-bottom:none}
.kv span{color:#8FA3BF}
.tbl{border-collapse:collapse;width:100%;font-size:12.5px}
.tbl th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#8FA3BF;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line,#22334F);white-space:nowrap}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--line,#22334F);white-space:nowrap;vertical-align:top}
.tbl tr:last-child td{border-bottom:none}

/* chon cach noi MT5 */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 14px; }
.mode-item { text-align: left; display: grid; gap: 6px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.mode-item b { font-size: 14px; } .mode-item span { font-size: 12px; color: var(--muted); line-height: 1.45; } .mode-item span em { color: var(--text); font-style: normal; }
.mode-item i { font-style: normal; font-size: 11px; color: var(--brand-2); letter-spacing: .3px; }
.mode-item.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.mode-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 560px) { .mode-pick { grid-template-columns: 1fr; } }
label.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-top: 10px; cursor: pointer; }
label.check input { width: auto; margin-top: 3px; }
.step.err .dot { border-color: var(--bad); color: var(--bad); }

/* ---------- (05/10) mobile chinh chu — anh Lam: "lam ca giao dien cho mobile nua cho chinh chu" ---------- */
@media (max-width: 679px) {
  input, select, textarea { font-size: 16px; }              /* iPhone khong tu phong to khi bam vao o nhap (<16px la phong to) */
  .field-row { grid-template-columns: 1fr; gap: 0; }        /* 2 o canh nhau tren dien thoai bi cat chu goi y */
  .hero { padding: 12px 4px 6px; }
  .hero h1 { font-size: 22px; }
  .hero > p.muted { display: none; }                        /* dua form len som; y chinh da co o dong badge */
  .brand-lg { margin-bottom: 8px; }
  .btn-row .btn { flex: 1 1 auto; }
  .pill { padding: 8px 14px; font-size: 13.5px; }           /* nut tab de bam bang ngon tay */
  .bento { grid-template-columns: 1fr 1fr; gap: 10px; }     /* o so lieu nho 2 cot, o lon (b-2) van tron hang */
  .bento > .b-2, .bento > .b-4 { grid-column: span 2; }
  .kpi .k-value { font-size: 22px; }
  .bento > div:not(.b-2):not(.b-4) .kpi .k-value { font-size: 19px; }
  .page-head h1 { font-size: 21px; }
  .page-head p { font-size: 13px; }
  .grid.c3.goi-grid { grid-template-columns: 1fr; }                /* goi dich vu 1 cot cho de doc */
  .tbl-kiem th:nth-child(n+6):nth-child(-n+11), .tbl-kiem td:nth-child(n+6):nth-child(-n+11) { display: none; }  /* bang kiem dinh: dien thoai chi giu Bot/Khung/Lai/PF/DD/Ket luan */
  .tbl-kiem td:first-child { min-width: 150px !important; }
}

/* ---------- (07/10) Cho bot ---------- */
.cho-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .cho-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .cho-grid { grid-template-columns: repeat(3, 1fr); } }
.cho-the { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; transition: border-color .2s; }
.cho-the:hover { border-color: rgba(255,255,255,.45); }
.cho-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cho-ten { font-weight: 700; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.cho-tg { font-size: 12.5px; margin-top: 2px; }
.cho-gia { text-align: right; flex: none; line-height: 1.15; }
.cho-gia b { font-family: var(--mono); font-size: 20px; display: block; }
.cho-gia span { font-size: 11px; color: var(--muted); }
.cho-gia.lon { text-align: left; }
.cho-gia.lon b { font-size: 30px; }
.cho-so { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cho-so > div { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: rgba(255,255,255,.03); }
.cho-so span { display: block; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.cho-so b { font-family: var(--mono); font-size: 16px; }
.cho-duoi { font-size: 12.5px; }
.cho-luu-y { margin: 0 0 12px; padding: 10px 12px; border: 1px dashed var(--glass-bd); border-radius: 12px; }
.cho-chi-tiet { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }   /* minmax(0,..): bang/o so khong day cot rong hon man hinh */
.cho-chi-tiet > * { min-width: 0; }
@media (min-width: 1024px) { .cho-chi-tiet { grid-template-columns: 320px minmax(0, 1fr); align-items: start; } .cho-hop { position: sticky; top: 80px; } }
.cho-mo-ta { white-space: pre-wrap; font-size: 14px; line-height: 1.6; margin: 0; }
.cho-cs { margin-top: 12px; }
.cho-cs summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.cho-buoc { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) { .cho-buoc { grid-template-columns: repeat(4, 1fr); } }
.cho-so-buoc { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--glass-hi); display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; margin-bottom: 8px; }
.cho-cua-toi { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.cho-cua-toi:last-child { border-bottom: 0; }
.help.bad { color: var(--bad); } .help.warn { color: var(--warn); }
input[type=file] { padding: 8px; font-size: 13px; }
input[type=file]::file-selector-button { border: 1px solid var(--glass-bd); background: rgba(255,255,255,.08); color: var(--text);
  border-radius: 999px; padding: 7px 14px; margin-right: 10px; font: inherit; font-weight: 600; cursor: pointer; }
:root[data-theme="light"] input[type=file]::file-selector-button { background: #f1f1f3; border-color: var(--line); }
/* (07/10) bang chuan len cho: dien thoai xep nhan tren, gia tri duoi (nhan hep bi gay 'Do / tren') */
@media (max-width: 679px) { .cho-chuan .kv { flex-direction: column; gap: 1px; } .cho-chuan .kv .k { font-size: 12px; } }
.cho-chi-tiet table { min-width: 0; }   /* bang so do 4-6 cot ngan: vua man dien thoai, khong can keo ngang */
.cho-chi-tiet td, .cho-chi-tiet th { padding-left: 8px; padding-right: 8px; }
/* (07/10) trang master tren dien thoai: nut hanh dong xuong DUOI thong tin bot (truoc xep doc ben phai, ep chu con 1 nua man) */
@media (max-width: 679px) {
  .cho-cua-toi .cho-top { flex-direction: column; align-items: stretch; }
  .cho-cua-toi .cho-top > .btn-row { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .cho-cua-toi .cho-top > .btn-row .btn { flex: 1 1 auto; }
}
.cho-buoc-gon summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.cho-buoc-gon[open] summary { margin-bottom: 10px; }
/* (07/10) bang Cho bot trong Quan tri: cot nut ghim mep phai (bang rong cuon ngang van bam duoc), ly do 1 dong */
.cho-admin td:last-child, .cho-admin th:last-child { position: sticky; right: 0; background: var(--bg-soft); box-shadow: -8px 0 12px -10px rgba(0,0,0,.6); }
.cho-admin td:last-child .btn { margin: 2px 0; }

/* ============================================================
   (09/10) LOP GIAO DIEN KIEU TRADINGVIEW — anh Lam: "soi ki giao dien trading view tung muc tung phan, lam giao dien hub
   gan nhu vay, ca mau sac lan moi thu". So do tu tradingview.com/pricing (getComputedStyle 09/10):
   nen #000 · chu #DBDBDB · chu phu #8C8C8C · duong ke #3D3D3D · tieu de trang 600, gian chu -0.02em · nut trang #F2F2F2 chu #0F0F0F
   bo 8px cao 48px · menu tren 64px, muc 16px/500 bo 36px, muc dang chon #5B9CF6 · the bo 16px, vien gradient #2962FF 30% -> #D500F9,
   quang sang xanh tim rgb(20,44,108) -> rgb(23,17,56) o mep · thanh tien do 4px. Mau lai/lo theo TradingView: xanh #22AB94, do #F23645.
   Lop nay THAY lop kinh trang den 07/10 (da go). Khong dung logo / ten / phong chu cua TradingView.
   ============================================================ */
:root {
  --bg: #000000; --bg-soft: #0f0f0f; --card: #0f0f0f; --card-2: #1a1a1a; --card-3: #1e1e1e;
  --line: #2e2e2e; --line-2: #3d3d3d; --text: #dbdbdb; --text-hi: #ffffff; --muted: #8c8c8c; --faint: #575757;
  --brand: #2962ff; --brand-2: #5b9cf6; --violet: #d500f9; --grad: linear-gradient(90deg, #2962ff 30%, #d500f9);
  --btn-bg: #f2f2f2; --btn-fg: #0f0f0f; --hover: rgba(255,255,255,.07);
  --pos: var(--ok); --neg: var(--bad); --accent: var(--brand-2);
  --ok: #22ab94; --bad: #f23645; --warn: #ff9800; --glow: rgba(41,98,255,.35);
  --aurora: radial-gradient(at 50% 0%, rgb(20,44,108) 0px, rgb(23,17,56) 40%, rgba(0,0,0,0) 70%);
  --radius: 16px; --nav-h: 62px; --head-h: 64px;
  --num: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ffffff; --bg-soft: #f8f9fd; --card: #ffffff; --card-2: #f0f3fa; --card-3: #e9edf6;
  --line: #e0e3eb; --line-2: #d1d4dc; --text: #131722; --text-hi: #000000; --muted: #6a6d78; --faint: #b2b5be;
  --brand: #2962ff; --brand-2: #1e53e5; --btn-bg: #0f0f0f; --btn-fg: #ffffff; --hover: rgba(19,23,34,.06);
  --ok: #089981; --bad: #f23645; --warn: #f57c00; --glow: rgba(41,98,255,.18);
  --aurora: radial-gradient(at 50% 0%, rgba(41,98,255,.12) 0px, rgba(213,0,249,.05) 40%, rgba(255,255,255,0) 70%);
  color-scheme: light;
}
body { background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; }
:root:not([data-theme="light"]) body { background-color: #000; }
a { color: var(--brand-2); }
.muted { color: var(--muted); }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); }
h1, h2, h3 { font-family: var(--font); color: var(--text-hi); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 28px; letter-spacing: -.02em; line-height: 1.12; }
h2 { font-size: 19px; line-height: 1.25; }
h3 { font-size: 16px; }
.page-head { margin-bottom: 18px; }
.page-head h1 { margin-bottom: 8px; }
.page-head p { color: var(--muted); font-size: 15px; max-width: 760px; }
.grad-text, .hero .grad { background: none; -webkit-text-fill-color: currentColor; color: var(--text-hi); }
/* so: phong tieu de, chu so deu cot (nhu bang gia TradingView) — ma/khoa van dung chu mono */
.mono, .stat .value, .kpi .k-value, .big-pnl, .cf-pnl, .rk-foot .v, .cf-foot .v, .rank-row .pn, .fact b, .cho-gia b, .cho-so b,
.sig-px, .donut .lbl, .rank-row .no, .rk-tags, .rk-note, .marquee-track b, .chip, .cf-rank, .sig-side {
  font-family: var(--num); font-variant-numeric: tabular-nums;
}
code, pre, kbd, .secret-box { font-family: var(--mono); }

/* --- nen: den tuyet doi + quang xanh tim o dinh trang (thay 3 khoi aurora + luoi mo) --- */
.gridlines { display: none; }
.aurora { z-index: -1; }
.aurora i { display: none; }
.aurora::before { content: ""; position: absolute; left: 50%; top: -18vh; width: 120vw; height: 70vh; transform: translateX(-50%);
  background: var(--aurora); opacity: .55; }

/* --- thanh menu tren cung (64px) --- */
#app { display: block; }
.tv-head {
  position: sticky; top: 0; z-index: 40; height: var(--head-h); display: flex; align-items: center; gap: 10px;
  padding: 0 16px; background: rgba(0,0,0,.94); border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
:root[data-theme="light"] .tv-head { background: rgba(255,255,255,.95); border-bottom-color: var(--line); }
.tv-logo { display: flex; align-items: center; gap: 9px; color: var(--text-hi); font-weight: 700; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; text-decoration: none; }
.tv-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--text-hi); color: var(--bg);
  font-size: 13px; font-weight: 800; letter-spacing: -.03em; }
.tv-ten { font-weight: 600; }
.tv-search {
  display: none; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 0;
  background: #2e2e2e; color: #b2b2b2; font: inherit; font-size: 15px; cursor: pointer; min-width: 210px; margin-left: 18px;
}
.tv-search:hover { background: #3a3a3a; }
:root[data-theme="light"] .tv-search { background: var(--card-2); color: var(--muted); }
.tv-search svg { width: 18px; height: 18px; flex: none; }
.tv-search span { flex: 1; text-align: left; }
.tv-search kbd { font-size: 11.5px; color: var(--muted); background: transparent; border: 1px solid #4a4a4a; border-radius: 6px; padding: 1px 6px; }
:root[data-theme="light"] .tv-search kbd { border-color: var(--line-2); }
.tv-nav { display: none; align-items: center; gap: 2px; margin-left: 10px; }
.tv-link {
  display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 8px 16px; border-radius: 36px; border: 0; background: transparent;
  color: var(--text-hi); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.tv-link:hover { background: var(--hover); }
.tv-link.on { color: var(--brand-2); }
:root[data-theme="light"] .tv-link.on { color: var(--brand); }
.tv-link svg { width: 16px; height: 16px; opacity: .7; }
.tv-dd { position: relative; }
.tv-dd-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 300px; padding: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 48px rgba(0,0,0,.6);
}
:root[data-theme="light"] .tv-dd-panel { box-shadow: 0 18px 44px rgba(19,23,34,.14); }
.tv-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* cau noi chuot tu nut xuong bang */
.tv-dd:hover .tv-dd-panel, .tv-dd:focus-within .tv-dd-panel { display: block; }
.tv-dd-panel a, .tim-ds a {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text-hi); text-decoration: none;
}
.tv-dd-panel a:hover, .tim-ds a:hover, .tim-ds a.on { background: var(--hover); }
.tv-dd-panel a.on b { color: var(--brand-2); }
.tv-dd-panel svg, .tim-ds svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--muted); }
.tv-dd-panel span, .tim-ds span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tv-dd-panel b, .tim-ds b { font-size: 15px; font-weight: 600; }
.tv-dd-panel small, .tim-ds small { font-size: 13px; color: var(--muted); }
.tv-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn { border: 1px solid var(--line); background: transparent; color: var(--text-hi); border-radius: 999px; width: 36px; height: 36px; }
.icon-btn:hover { background: var(--hover); }
.tv-icon { border-color: transparent; }
.tv-icon svg { width: 19px; height: 19px; }
.tv-avatar {
  position: relative; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: linear-gradient(135deg, #2962ff, #d500f9); color: #fff; font: inherit; font-weight: 700; font-size: 15px;
}
.tv-avatar.cham::after { content: ""; position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bad); border: 2px solid var(--bg); }   /* cham do = MT5 chua ket noi (nhu cham bao cua TradingView) */
.b-quay-lai { width: 36px; height: 36px; font-size: 24px; border-color: transparent; }
.status-chips { gap: 6px; }
.chip { font-size: 12px; font-weight: 600; letter-spacing: 0; padding: 5px 10px; border: 0; border-radius: 999px; background: var(--card-3); color: var(--text); }
.chip.on { color: var(--ok); background: rgba(34,171,148,.13); }
.chip.off { color: var(--warn); background: rgba(255,152,0,.13); }
@media (max-width: 679px) {
  .tv-head { padding: 0 10px; gap: 6px; }
  .tv-ten { display: none; }
  .tv-right { gap: 4px; }
  .tv-right .icon-btn { width: 34px; height: 34px; }
}
@media (min-width: 1024px) {
  .tv-head { padding: 0 24px; }
  .tv-nav { display: flex; }
  .tv-tim-nho { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .tv-link { font-size: 15px; padding: 8px 11px; }
  .tv-nav { margin-left: 2px; }
  .chip-dai { display: none; } .chip-ngan { display: inline; }
}
@media (min-width: 1280px) { .tv-search { display: inline-flex; } }

/* --- dai chu chay duoi menu (kieu bang gia chay cua TradingView) --- */
.marquee { background: var(--bg); border-bottom: 1px solid rgba(255,255,255,.06); padding: 8px 0; font-size: 13px; }
:root[data-theme="light"] .marquee { border-bottom-color: var(--line); }
.marquee-track span { color: var(--muted); }
.marquee-track b { color: var(--text-hi); font-weight: 600; }

/* --- vung noi dung --- */
main { max-width: 1280px; padding: 20px 16px 32px; }
@media (min-width: 1024px) {
  main { padding: 32px 32px 56px; }
  h1 { font-size: 36px; }
  .page-head h1 { font-size: 40px; }
  #toasts { right: 24px; bottom: 24px; }
}

/* --- the --- */
.card, .kpi, .rank-card, .flip-back, .sig-row, .san-box, .san-item, .mode-item, .cho-so > div {
  background: var(--card); border: 1px solid var(--line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.card, .kpi, .rank-card { border-radius: var(--radius); }
.card { padding: 20px; }
.card.tight { padding: 14px; }
.card.accent, .card.accent-ok { background: var(--card); }
.card:hover, .kpi:hover, .rank-card:hover, .sig-row:hover { border-color: var(--line-2); }
.cho-the:hover { border-color: var(--line-2); }
/* the noi bat: vien gradient xanh -> tim nhu the goi tren bang gia TradingView (khong chay vong, dung yen) */
.glow-border, .kpi.brand, .vet-lead, .cf-card.is-center {
  border: 1.5px solid transparent !important;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box !important;
  box-shadow: 0 0 0 0 transparent, 0 18px 50px -24px var(--glow);
}
.glow-border::before { display: none; }
.stat .label, .kpi .k-label { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.stat .value { font-size: 24px; font-weight: 600; color: var(--text-hi); letter-spacing: -.01em; }
.kpi { padding: 18px 20px 16px; }
.kpi .k-value { font-size: 30px; font-weight: 600; color: var(--text-hi); letter-spacing: -.02em; margin-top: 4px; }
.kpi .k-sub { font-size: 13px; color: var(--muted); }
.kpi.pos, .kpi.neg { background: var(--card); }
.kpi.pos .k-value { color: var(--ok); } .kpi.neg .k-value { color: var(--bad); }
.kpi .k-chart { opacity: .35; }
.bento, .grid { gap: 14px; }

/* --- o "Xin chao" Tong quan = khoi tieu de bang gia TradingView: den, quang xanh tim mep tren, vien gradient --- */
.hero-kos {
  position: relative; overflow: hidden; border-radius: var(--radius); margin-bottom: 16px; padding: 28px 22px;
  border: 1.5px solid transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--aurora) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box;
}
.hero-kos::before, .hero-kos .meteor, .hero-kos .grid-overlay, .hero-kos .hero-glow { display: none; }
.h-eyebrow { font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
.h-eyebrow::before { display: none; }
.h-display { font-family: var(--font); font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.08; margin: 8px 0 10px;
  color: var(--text-hi); background: none; -webkit-text-fill-color: currentColor; animation: none; }
.dotline { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-family: var(--font); font-size: 14px; letter-spacing: 0; text-transform: none; }
.dotline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px rgba(34,171,148,.6); }
.hero-kos p { margin: 10px 0 0; }
@media (min-width: 680px) { .hero-kos { padding: 44px 44px 40px; } .h-display { font-size: 48px; } }
@media (min-width: 1024px) { .h-display { font-size: 56px; } }
:root[data-theme="light"] .hero-kos { background: var(--aurora) padding-box, linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; }

/* --- nut --- */
.btn {
  min-height: 44px; padding: 0 20px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text-hi);
  font-weight: 500; font-size: 15px; transition: background .15s, border-color .15s, color .15s; box-shadow: none;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: none; }
.btn.primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); font-weight: 500; box-shadow: none; position: relative; overflow: hidden; }
.btn.primary::before, .btn.primary::after { content: none; display: none; }
.btn.primary:hover { background: #ffffff; border-color: #ffffff; box-shadow: none; }
:root[data-theme="light"] .btn.primary:hover { background: #2e2e2e; border-color: #2e2e2e; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn.danger { background: transparent; border-color: rgba(242,54,69,.55); color: var(--bad); }
.btn.danger:hover { background: rgba(242,54,69,.09); }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.btn:disabled { opacity: .45; }
/* nut gradient = nut "Sign up" xanh -> tim cua TradingView: dung cho viec chinh nhat cua trang */
.btn3d, .btn.grad, .auth-card .btn.primary {
  background: var(--grad); border: 0; color: #fff; border-radius: 8px; min-height: 44px; padding: 0 20px; font-weight: 600; font-size: 15px;
  box-shadow: none; transform: none;
}
.btn3d:hover, .btn.grad:hover, .auth-card .btn.primary:hover { filter: brightness(1.12); background: var(--grad); }
.btn3d:active { transform: none; box-shadow: none; }
.btn3d.ghost3d { background: transparent; border: 1px solid var(--line-2); color: var(--text-hi); }
.flip-btn { border-radius: 8px; border-color: var(--line); background: transparent; }

/* --- o nhap --- */
label { font-size: 13px; color: var(--muted); }
input, select, textarea {
  min-height: 44px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text-hi);
  transition: border-color .15s, box-shadow .15s;
}
select { background-color: var(--bg); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; transform: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(41,98,255,.22); }
input[type=checkbox], input[type=radio] { min-height: 0; accent-color: var(--brand); }
input[type=file]::file-selector-button { border: 1px solid var(--line-2); background: transparent; color: var(--text-hi); border-radius: 8px; }

/* --- nhan, the tab con nhong --- */
.badge { border: 0; border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 600; background: var(--card-3); color: var(--text-hi); }
.badge.ok { color: var(--ok); background: rgba(34,171,148,.13); border: 0; }
.badge.bad { color: var(--bad); background: rgba(242,54,69,.13); border: 0; }
.badge.warn { color: var(--warn); background: rgba(255,152,0,.13); border: 0; }
.pill { border: 1px solid var(--line-2); background: transparent; border-radius: 36px; padding: 7px 16px; font-size: 14px; font-weight: 500; color: var(--text-hi); }
.pill:hover { background: var(--hover); }
.pill.on { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); font-weight: 600; }

/* --- bang --- */
table, .tbl { font-size: 14px; }
th, .tbl th { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); border-bottom: 1px solid var(--line); padding: 10px 12px; }
td, .tbl td { border-bottom: 1px solid var(--line); padding: 11px 12px; }
tbody tr:hover td { background: rgba(255,255,255,.025); }
:root[data-theme="light"] tbody tr:hover td { background: var(--card-2); }
.kv { border-bottom: 1px solid var(--line); font-size: 14px; padding: 8px 0; }
.kv .k, .kv span { color: var(--muted); }
.kv b { color: var(--text-hi); font-weight: 600; }
.san-item span { color: var(--muted); }
.san-item em { color: var(--brand-2); }
.san-item:hover { border-color: var(--line-2); }
.help { color: var(--muted); font-size: 13px; }
.secret-box { background: var(--bg-soft); border: 1px dashed var(--line-2); border-radius: 8px; }

/* --- thanh duoi (dien thoai) --- */
.tabbar { background: rgba(0,0,0,.96); border-top: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
:root[data-theme="light"] .tabbar { background: rgba(255,255,255,.97); border-top-color: var(--line); }
.tabbar a { color: var(--muted); font-size: 11px; font-weight: 500; position: relative; }
.tabbar a.active { color: var(--text-hi); text-shadow: none; }
.tabbar a.active::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: 2px; background: var(--grad); }

/* --- khung noi, thong bao --- */
.modal-back { background: rgba(0,0,0,.72); }
:root[data-theme="light"] .modal-back { background: rgba(19,23,34,.45); }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 24px 60px rgba(0,0,0,.6); padding: 20px;
  backdrop-filter: none; -webkit-backdrop-filter: none; animation: tvLen .2s ease-out; }
@keyframes tvLen { from { transform: translateY(12px); opacity: 0 } to { transform: none; opacity: 1 } }
.modal-head h2 { font-size: 20px; }
@media (min-width: 680px) { .modal { border-radius: 16px; } }
.modal-back.giua .modal { border-radius: 16px; }
.modal-back.tim { align-items: flex-start; padding-top: 12vh; }
.modal-back.tim .modal { max-width: 560px; }
.tim-ds { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow-y: auto; }
.toast { background: var(--card-3); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; }
.toast.ok { border-left-color: var(--ok); } .toast.err { border-left-color: var(--bad); }

/* --- menu "Them" (bam nut tron tai khoan) --- */
.mt-pill { border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text-hi); font-weight: 500; }
.mt-pill:hover { background: var(--hover); border-color: var(--line-2); }
.mt-pill svg { color: var(--muted); }
.mt-pill.on { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.mt-pill.on svg { color: var(--btn-fg); }
.menu-them .mt-nhom { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.mt-thoat { color: var(--bad); border-color: rgba(242,54,69,.45); background: transparent; }
.mt-thoat svg { color: var(--bad); }

/* --- trang dang nhap = phan tren bang gia TradingView: chu to ben trai, the dang ky ben phai --- */
.brand-lg { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--text-hi); }
.brand-lg b { color: var(--text-hi); font-weight: 600; }
.auth-wrap .hero h1 { color: var(--text-hi); font-weight: 600; letter-spacing: -.02em; }
.auth-wrap .hero p { color: var(--text); }
.auth-card { border-color: var(--line-2); border-radius: 16px; padding: 24px; background: var(--card); }
.fact b { color: var(--text-hi); font-weight: 600; font-size: 30px; letter-spacing: -.02em; }
.fact span { color: var(--muted); font-size: 14px; }
@media (min-width: 1024px) { .auth-wrap .hero h1 { font-size: 56px; line-height: 1; } .auth-wrap .hero p { font-size: 16px; } }

/* --- bang xep hang, coverflow, tin hieu, lich --- */
.cf-section { background: var(--aurora), #000; border-color: var(--line); border-radius: var(--radius); }
:root[data-theme="light"] .cf-section { background: var(--aurora), #0b0b0b; }
.cf-bg::after { background: radial-gradient(circle at center, rgba(0,0,0,.1) 0%, rgba(0,0,0,.92) 100%); }
.cf-glow { background: radial-gradient(closest-side, rgba(41,98,255,.35), transparent 72%); }
.cf-card { background: #0f0f0f; border: 1px solid var(--line); }
.cf-card.is-center { background: linear-gradient(#0f0f0f, #0f0f0f) padding-box, var(--grad) border-box !important; }
.cf-eyebrow h3 { color: var(--muted); font-family: var(--font); }
.cf-eyebrow span.ln, .cf-eyebrow span.ln.r { background: var(--line-2); }
.cf-rule { background: var(--grad); box-shadow: none; }
.cf-cta { background: var(--btn-bg); color: var(--btn-fg); border-radius: 8px; letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 600; box-shadow: none; }
.cf-dot.on { background: var(--grad); box-shadow: none; }
.cf-foot { background: var(--line); } .cf-foot div { background: #0f0f0f; }
.cf-nav { background: rgba(0,0,0,.6); border-color: var(--line-2); }
.big-pnl.up, .cf-pnl.up { color: var(--ok); text-shadow: none; }
.big-pnl.down, .cf-pnl.down { color: var(--bad); }
.rank-card { background: var(--card); }
.rk-foot { background: var(--line); } .rk-foot div { background: var(--card); }
.rank-row { border-bottom-color: var(--line); }
.sig-row { border-radius: 12px; }
.sig-side.buy { color: var(--ok); background: rgba(34,171,148,.13); }
.sig-side.sell { color: var(--bad); background: rgba(242,54,69,.13); }
.cal-cell { background: var(--card-2); border-color: var(--line); }
.cal-cell.win { background: rgba(34,171,148,.18); border-color: rgba(34,171,148,.45); color: var(--text-hi); }
.cal-cell.loss { background: rgba(242,54,69,.16); border-color: rgba(242,54,69,.45); color: var(--text-hi); }
.step.done .dot { border-color: var(--ok); color: var(--ok); }
.step.active .dot { border-color: var(--brand); color: var(--brand-2); }
.mode-item.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.mode-item i { color: var(--brand-2); }
.cho-luu-y { border-color: var(--line-2); }
.cho-so-buoc { border-color: var(--line-2); font-family: var(--num); }
.cho-admin td:last-child, .cho-admin th:last-child { background: var(--card); }
@media (prefers-reduced-motion: reduce) { .modal { animation: none; } }

/* --- trang Goi dich vu = bang gia TradingView: cac goi chung mot khung vien gradient, vach ngan doc #3D3D3D,
   gia 36px, nut trang cao 48px, danh sach tinh nang co dau tick + thanh do 4px --- */
.tv-plans {
  display: grid; grid-template-columns: 1fr; border-radius: var(--radius); overflow: hidden; border: 2px solid transparent;
  background: var(--aurora) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box;
}
.tv-plan { padding: 24px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; min-width: 0; }
.tv-plan:last-child { border-bottom: 0; }
.tv-plan-ten { font-size: 18px; font-weight: 600; color: var(--text-hi); }
.tv-gia { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 4px; flex-wrap: wrap; }
.tv-gia b { font-size: 36px; font-weight: 600; color: var(--text-hi); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tv-gia span { font-size: 14px; color: var(--muted); }
.tv-plan-phu { font-size: 14px; color: var(--muted); min-height: 42px; margin-bottom: 18px; }
.tv-plan-nut { width: 100%; min-height: 48px; font-size: 15px; }
.tv-dac { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.tv-dac li { font-size: 14px; color: var(--text); }
.tv-dac li span { display: flex; gap: 8px; align-items: baseline; }
.tv-dac li span::before { content: "✓"; color: var(--text-hi); font-weight: 600; }
.tv-dac i { display: block; height: 4px; border-radius: 8px; background: rgba(255,255,255,.2); margin-top: 8px; overflow: hidden; }
.tv-dac em { display: block; height: 100%; border-radius: 8px; background: #fff; }
:root[data-theme="light"] .tv-dac i { background: rgba(19,23,34,.1); }
:root[data-theme="light"] .tv-dac em { background: #0f0f0f; }
:root[data-theme="light"] .tv-plans { background: var(--aurora) padding-box, linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; }
@media (min-width: 680px) {
  .tv-plans { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
  .tv-plan { border-bottom: 0; border-right: 1px solid var(--line-2); }
  .tv-plan:last-child { border-right: 0; }
}
/* menu tha xuong cuoi cung: bang mo sang trai de khong tran mep phai man hinh */
.tv-nav .tv-dd:last-child .tv-dd-panel { left: auto; right: 0; }
@media (min-width: 1024px) { .auth-wrap .hero h1 { font-size: 48px; line-height: 1.05; } }
@media (min-width: 680px) { .tv-plan-phu { min-height: 66px; } }   /* mo ta 3 dong -> nut cac goi thang hang nhu bang gia TradingView */
.dotline.off::before { background: var(--warn); box-shadow: none; }   /* MT5 chua ket noi: cham cam, khong xanh */

/* --- (09/10) hieu ung luot the bang xep hang: keo/vuot the chay theo tay --- */
.cf-stage { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.cf-stage.keo { cursor: grabbing; }
.cf-stage.keo .cf-card { transition: none !important; }   /* dang keo: the bam sat ngon tay, tha ra moi chay chuyen dong */
.cf-card { will-change: transform, opacity; }
.cf-card img, .cf-card svg { -webkit-user-drag: none; pointer-events: none; }
.cf-hint { display: none; margin-top: 10px; font-size: 13px; color: var(--muted); }
@media (max-width: 679px) {
  .cf-nav { display: none; }            /* dien thoai: vuot la chinh, bo 2 nut de khong che the */
  .cf-hint { display: block; }
}

/* ============================================================
   (09/10) TOI UU DIEN THOAI — anh Lam: "toi uu giao dien cho ca mobile nua, tat ca nut an, scope, ui ux".
   Do bang bo soat tu dong 17 trang o 375px: nut dau trang 30-36px, nut nho 34px, nut the BXH 25-29px, cham tron 8px,
   chu thanh duoi 11px, lich 9-10px, nhan the 9,5px, bang Kiem dinh troi cot ten. Chuan: vung bam >= 44px (nut chinh),
   >= 40px (nut phu), chu >= 12px (o lich 11px), cot ten bang dinh trai, khong tran ngang.
   ============================================================ */
/* cham tron chuyen the: nut that 24x24, cham hien thi ben trong */
.cf-dot { width: 24px; height: 24px; padding: 0; background: none !important; border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: none !important; }
.cf-dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.28); transition: width .3s ease, background .3s ease; }
.cf-dot.on { width: 38px; }
.cf-dot.on::before { width: 26px; background: var(--grad); }
.cf-dots { gap: 2px; }
.cf-cta { min-height: 36px; padding: 0 16px; }
.cf-foot .k { font-size: 11px; }
/* nhan trang thai trong bang (khong phai nut): khong vien, khong doi mau khi re chuot */
.tbl-kiem .pill, td .pill { border: 0; background: var(--card-3); padding: 3px 9px; font-size: 12px; font-weight: 600; cursor: default; }
.tbl-kiem .pill:hover, td .pill:hover { background: var(--card-3); }
/* bang Kiem dinh: cot ten bot dinh trai khi cuon ngang */
.tbl-kiem th:first-child, .tbl-kiem td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 8px 0 12px -10px rgba(0,0,0,.7); }
:root[data-theme="light"] .tbl-kiem th:first-child, :root[data-theme="light"] .tbl-kiem td:first-child { box-shadow: 8px 0 12px -10px rgba(19,23,34,.25); }
.tbl-kiem thead th { position: sticky; top: 0; z-index: 2; background: var(--card); }
.tbl-kiem thead th:first-child { z-index: 3; }
/* bam tren man cam ung: co phan hoi nhe (khong co hover) */
@media (hover: none) {
  .btn:active, .pill:active, .mt-pill:active, .tv-link:active, .tabbar a:active, .icon-btn:active, .tv-avatar:active, .cf-cta:active { opacity: .75; }
  .card:hover, .kpi:hover, .rank-card:hover, .sig-row:hover, .cho-the:hover { border-color: var(--line); }
}
@media (max-width: 679px) {
  /* thanh dau trang: nut 44px; nut sang/toi chuyen vao menu tai khoan cho do chat */
  .tv-head { height: calc(var(--head-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); gap: 4px; }
  .tv-right .icon-btn, .b-quay-lai, .tv-avatar { width: 44px; height: 44px; }
  .tv-avatar { width: 40px; height: 40px; margin: 2px; }
  #b-theme { display: none; }
  .tv-logo { min-height: 44px; padding: 0 4px; }
  .tv-mark { width: 32px; height: 32px; }
  .status-chips { gap: 4px; }
  .chip { min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; font-size: 12.5px; }
  /* nut */
  .btn { min-height: 46px; font-size: 15px; }
  .btn.sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .btn-row { gap: 8px; }
  .pill { min-height: 40px; display: inline-flex; align-items: center; }
  .tbl-kiem .pill, td .pill { min-height: 0; }
  .icon-btn { width: 44px; height: 44px; }
  .modal-head .icon-btn { width: 40px; height: 40px; }
  input, select, textarea { min-height: 46px; }
  label.check { min-height: 32px; align-items: center; }
  label.check input { width: 20px; height: 20px; margin-top: 0; flex: none; }
  /* chu */
  .tabbar a { font-size: 12px; gap: 4px; }
  .tabbar svg { width: 22px; height: 22px; }
  [style*="font-size:11px"], [style*="font-size:11.5px"], [style*="font-size:10px"], [style*="font-size:9px"], [style*="font-size: 11px"] { font-size: 12px !important; }
  .muted { font-size: 13px; }
  .step .dot { font-size: 12px; width: 24px; height: 24px; }
  .san-item { padding: 12px; }
  .san-item span { font-size: 13px; }
  .cf-eyebrow h3 { font-size: 12px; letter-spacing: .16em; }
  .stat .label, .kpi .k-label { font-size: 13px; }
  th, .tbl th { font-size: 12.5px; }
  .tbl-kiem td, .tbl-kiem td span, .tbl-kiem td div { font-size: 12.5px; }
  /* lich lai lo: o hep -> 11px van doc duoc */
  .cal-head span { font-size: 12px; }
  .cal-cell { font-size: 11px; border-radius: 7px; }
  .cal-cell b { font-size: 12px; }
  .cal-cell [style*="font-size:9px"] { font-size: 11px !important; display: block; }
  /* khung noi = tam truot tu duoi len, co thanh nam keo */
  .modal { padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 88vh; }
  .modal-back:not(.giua) .modal::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin: -10px auto 12px; }
  .modal-back.tim { padding-top: 8vh; }
  #toasts { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px); }
  /* the, khoang cach */
  main { padding: 16px 14px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .card { padding: 16px; }
  .kpi { padding: 16px; }
  .page-head h1 { font-size: 28px; }
  .hero-kos { padding: 24px 18px; }
  .tv-plan { padding: 20px; }
  .tv-gia b { font-size: 32px; }
  /* menu tai khoan: o 44px */
  .mt-pill { min-height: 46px; }
}
@media (max-width: 379px) {   /* may nho 360px */
  .tv-head { padding-left: 6px; padding-right: 6px; gap: 2px; }
  .chip { padding: 0 8px; font-size: 12px; }
  .tv-right .icon-btn { width: 42px; }
}
@media (max-width: 679px) {
  .chip { min-height: 36px; }
  .cf-dot { width: 28px; height: 28px; } .cf-dot.on { width: 40px; }
  .donut { width: 60px; height: 60px; } .donut .lbl { font-size: 14px; } .donut .lbl small { font-size: 10px; }
  .xem-dk, .xem-dk-ban { display: inline-block; padding: 6px 0; }
}
.donut svg { width: 100%; height: 100%; }
/* (09/10) the bot: o thong so chu thuong (truoc la chu mono ngat giua tu 'R uoi ro'), nut chinh tren, nut phu duoi, Xoa do tach phai */
.bot-cfg { font-size: 13.5px; line-height: 1.5; color: var(--text); background: var(--card-2); border-radius: 8px; padding: 10px 12px; margin: 8px 0 4px; overflow-wrap: anywhere; }
.bot-nut-chinh { margin-top: 14px; }
.bot-nut-chinh .btn { flex: 1 1 0; }
.bot-nut-phu { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.bot-nut-phu .btn { flex: 1 1 0; }
.bot-nut-phu .bot-xoa { flex: 0 0 auto; margin-left: auto; padding: 0 18px; }
.bot-nut-phu .help { margin: 0; flex: 2 1 0; }
.cal-cell[data-ngay] { cursor: pointer; }
@media (max-width: 679px) { .grid.c3 > :last-child:nth-child(odd), .grid.c4 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }   /* o le cuoi luoi 2 cot: tron hang, khong bo nua man */

/* ============================================================
   (09/10) ART + HOAT CANH KIEU TRADINGVIEW — anh Lam: "sao chep ca art, mau sac va hieu ung hoat canh cua tat ca trading view".
   Hinh/video cua TradingView (cuc quang northern-lights, Trai Dat earth.mp4, market-board, anh san pham) la tai san co ban quyen
   -> KHONG chep tep. Tu dung lai cung tinh than bang CSS/SVG: cuc quang dong + sao lap lanh (trang bang gia), hanh tinh + mat troi moc
   (trang chu), nut cat xien mep phai (nut Get started), khoi xuong nhap nhay khi tai (logo pulsation 1s), khoi hien dan khi cuon,
   bieu do ve dan, menu tha xuong mo dan. Che do giam chuyen dong: tat het.
   ============================================================ */
/* (09/10 22h) anh Lam: "dung canva thiet ke may cai hinh anh cua hub ... xin nhu 1 ban clone cua trading view".
   3 anh AI tu tao tren Canva cua anh (KHONG phai tep cua TradingView), nen WebP o web/img/nen/ (tong ~105 KB):
   cuc-quang.webp = nen dau moi trang · bieu-do.webp = o chao Tong quan · trai-dat.webp = trang dang nhap.
   Chi dung transform/opacity de chay (card do hoa lo, khong ve lai moi khung); che do giam chuyen dong: dung yen. */
/* --- 1. cuc quang: anh that, 2 lop troi nguoc chieu (lop 2 lat guong, hoa sang) + lop sao lap lanh (chi giao dien toi) --- */
.aurora::before { display: none; }   /* quang toa ve bang CSS truoc day -> anh that thay */
.au-anh {
  position: absolute; left: -6vw; right: -6vw; top: 0; height: 80vh; display: block;
  background: url("../img/nen/cuc-quang.webp?v=1") 50% 0 / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 90%);
  transform-origin: 50% 0; will-change: transform, opacity; opacity: .6;
  animation: cqTroi 26s ease-in-out infinite alternate;
}
.au-anh-2 { mix-blend-mode: screen; transform: scaleX(-1); opacity: .28; animation: cqTroi2 34s ease-in-out -8s infinite alternate; }
@keyframes cqTroi {
  0% { transform: translateX(-2%) scaleY(1); opacity: .5; }
  50% { transform: translateX(1.5%) scaleY(1.07); opacity: .68; }
  100% { transform: translateX(0) scaleY(.95); opacity: .56; }
}
@keyframes cqTroi2 {
  0% { transform: scaleX(-1) translateX(2.5%) scaleY(1.06); opacity: .14; }
  100% { transform: scaleX(-1) translateX(-2.5%) scaleY(.94); opacity: .34; }
}
.aurora::after {
  content: ""; position: absolute; inset: 0; opacity: .5; animation: saoNhay 7s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1px 1px at 7% 12%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 19% 31%, #cfe3ff 60%, transparent 61%),
    radial-gradient(1.4px 1.4px at 28% 8%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 37% 22%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 46% 41%, #dfe8ff 60%, transparent 61%), radial-gradient(1.4px 1.4px at 55% 15%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 63% 33%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 72% 6%, #cfe3ff 60%, transparent 61%),
    radial-gradient(1.4px 1.4px at 81% 27%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 90% 44%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 96% 18%, #dfe8ff 60%, transparent 61%), radial-gradient(1px 1px at 3% 46%, #fff 60%, transparent 61%);
  background-size: 640px 520px;
}
@keyframes saoNhay { 0% { opacity: .35; } 100% { opacity: .7; } }
:root[data-theme="light"] .au-anh, :root[data-theme="light"] .aurora::after { display: none; }
/* chu xam duoi tieu de nam tren vung cuc quang sang -> bong toi nhe cho de doc */
:root:not([data-theme="light"]) .page-head h1, :root:not([data-theme="light"]) .page-head p { text-shadow: 0 1px 14px rgba(0,0,0,.85); }
:root:not([data-theme="light"]) .page-head p { color: #a8a8a8; }
@media (max-width: 679px) { .au-anh { height: 60vh; left: -12vw; right: -12vw; } }

/* --- 2. o chao Tong quan: anh bieu do nen phat sang, ve dan tu trai sang khi mo trang + vet sang quet qua 8 giay/lan --- */
.hero-kos { isolation: isolate; }
.hero-kos .hero-inner { position: relative; z-index: 3; }
.hero-anh {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: inherit;
  background: url("../img/nen/bieu-do.webp?v=1") 100% 100% / auto 116% no-repeat;
  mix-blend-mode: screen;   /* nen den cua anh tan vao quang tim cua o (khong de lai duong cat cung giua o) */
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 50%); mask-image: linear-gradient(90deg, transparent 6%, #000 50%);
  animation: heroVe 1.7s cubic-bezier(.3,.7,.2,1) .15s both;
}
.hero-anh::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 28%;
  background: linear-gradient(90deg, transparent, rgba(91,156,246,.16), transparent);
  transform: translateX(-120%); animation: heroQuet 8s ease-in-out 2.2s infinite;
}
@keyframes heroVe { from { clip-path: inset(0 100% 0 0); opacity: .3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes heroQuet { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(460%); } }
:root[data-theme="light"] .hero-anh { display: none; }
@media (max-width: 679px) {
  .hero-anh { background-size: auto 100%; opacity: .6;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.2), #000 78%); mask-image: linear-gradient(90deg, rgba(0,0,0,.2), #000 78%); }
}

/* --- 3. trang dang nhap: Trai Dat binh minh phu kin man hinh (duong chan troi ~80% chieu cao), tu tu nho len + mat troi tho --- */
.the-gioi { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #000; }
.tg-anh {
  position: absolute; left: 50%; bottom: -6vh; width: max(100vw, 189vh); aspect-ratio: 1680 / 944;   /* cao >= 106vh -> luon phu kin */
  background: url("../img/nen/trai-dat.webp?v=1") 50% 50% / 100% 100% no-repeat;
  transform: translateX(-50%); transform-origin: 50% 75.4%; will-change: transform;
  animation: tgLen 2.4s cubic-bezier(.2,.8,.2,1) both, tgTho 36s ease-in-out 2.4s infinite alternate;
}
@keyframes tgLen { from { transform: translateX(-50%) translateY(5%) scale(1.03); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes tgTho { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.045); } }
.tg-loe {   /* quang mat troi dat dung cho mat troi trong anh (50% ngang, 75,4% doc) */
  position: absolute; left: 50%; top: 75.4%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,244,220,.5) 0%, rgba(255,186,100,.2) 20%, transparent 58%);
  mix-blend-mode: screen; animation: matTroiTho 5s ease-in-out infinite alternate;
}
@keyframes matTroiTho { from { opacity: .55; } to { opacity: 1; } }
.tg-sao { position: absolute; inset: 0; opacity: .6; animation: saoNhay 6s ease-in-out infinite alternate;
  background-image: radial-gradient(1px 1px at 10% 20%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 30% 60%, #cfe3ff 60%, transparent 61%),
    radial-gradient(1.4px 1.4px at 52% 14%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 70% 40%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 86% 12%, #dfe8ff 60%, transparent 61%), radial-gradient(1.4px 1.4px at 93% 55%, #fff 60%, transparent 61%);
  background-size: 520px 420px; }
:root[data-theme="light"] .the-gioi { display: none; }
/* dien thoai: khung dang ky dai, che chan troi -> nen khung trong 22% de anh binh minh hat qua (KHONG dung backdrop-filter:
   nen phia sau dang chuyen dong, lam mo lai moi khung la nang may) */
@media (max-width: 679px) { :root:not([data-theme="light"]) .auth-card { background: rgba(15,15,15,.78); } }

/* --- 4. nut cat xien mep phai (nut Get started cua TradingView) --- */
.btn.xien, .auth-card .btn.primary, .btn3d { clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); border-radius: 8px 0 0 8px; padding-right: 32px; }

/* --- 5. khoi xuong nhap nhay khi dang tai trang --- */
.xuong i { display: block; height: 120px; border-radius: 16px; background: var(--card-2); margin-bottom: 14px; animation: xuongNhay 1s ease-in-out infinite alternate; }
.xuong i:first-child { height: 180px; } .xuong i:nth-child(2) { animation-delay: .15s; } .xuong i:nth-child(3) { animation-delay: .3s; }
@keyframes xuongNhay { from { opacity: 1; } to { opacity: .4; } }

/* --- 6. khoi hien dan khi cuon + bieu do ve dan --- */
.hien-dan { opacity: 0; transform: translateY(16px); transition: opacity .65s ease var(--tre, 0ms), transform .65s cubic-bezier(.2,.7,.2,1) var(--tre, 0ms); }
.hien-dan.da-hien { opacity: 1; transform: none; }
svg.cho-ve .spark-ve { stroke-dasharray: 1; stroke-dashoffset: 1; }
svg.cho-ve polygon { opacity: 0; }
svg.cho-ve.da-hien .spark-ve { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.3,.6,.2,1) .15s; }
svg.cho-ve.da-hien polygon { opacity: 1; transition: opacity .9s ease .6s; }

/* --- 7. menu tha xuong mo dan --- */
.tv-dd-panel { display: block; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.tv-dd:hover .tv-dd-panel, .tv-dd:focus-within .tv-dd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease, visibility 0s; }
.modal-back { animation: nenMo .18s ease-out; }
@keyframes nenMo { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .au-anh, .aurora::after, .tg-sao, .tg-anh, .tg-loe, .hero-anh, .hero-anh::after, .xuong i, .modal-back { animation: none !important; }
  .hien-dan { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 1024px) { .auth-wrap { max-width: 1180px; } .auth-wrap .hero h1 { font-size: 42px; } }

/* (12/10) Sao chep lenh (copy trade trong Hub) o trang Cho bot */
.sc-khoi { margin-bottom: 14px; }
.sc-khoi h2 .badge { margin-left: 6px; vertical-align: middle; }
.sc-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; margin: 12px 0; }
.sc-the { border: 1px solid var(--line-2, #2e2e2e); border-radius: 14px; padding: 14px 16px; background: var(--card-2, #1a1a1a); min-width: 0; }
.sc-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sc-dau b { font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.sc-the .btn-row { margin-top: 10px; }
.sc-the .btn-row .btn { width: 100%; justify-content: center; }

/* (13/10) Hub thanh san pham: suc khoe he thong (quan tri) + dai bao su co */
.suc-khoe .sk-so { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; margin: 12px 0 8px; }
.suc-khoe .sk-so > div { border: 1px solid var(--line-2, #2e2e2e); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.suc-khoe .sk-so span { font-size: 12.5px; }
.suc-khoe .sk-so b { font-size: 17px; }
.dai-su-co { margin: 0; padding: 10px 16px; font-size: 14px; text-align: center; border-bottom: 1px solid transparent; }
.dai-su-co.do { background: rgba(242, 54, 69, .14); border-color: rgba(242, 54, 69, .45); color: #ffb3b9; }
.dai-su-co.vang { background: rgba(255, 176, 32, .12); border-color: rgba(255, 176, 32, .4); color: #ffd58a; }
.dai-su-co a { color: inherit; text-decoration: underline; }
:root[data-theme="light"] .dai-su-co.do { color: #a3121f; }
:root[data-theme="light"] .dai-su-co.vang { color: #8a5a00; }

/* (13/10) Hub thanh san pham dot 2: trang gioi thieu, chuong thong bao, ho tro */
.gioi-thieu { max-width: 1180px; margin: 36px auto 24px; padding: 0 4px; }
.gioi-thieu h2 { font-size: 22px; margin: 28px 0 12px; }
.gt-buoc, .gt-hai { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.gt-o { border: 1px solid var(--line-2, #2e2e2e); border-radius: 16px; padding: 16px 18px; background: rgba(15, 15, 15, .82); min-width: 0; }
.gt-o > b { display: block; font-size: 16px; margin-bottom: 6px; }
.gt-o p { margin: 0; color: var(--muted, #8c8c8c); font-size: 14px; line-height: 1.55; }
.gt-so { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad, #2962ff); color: #fff; font-weight: 700; margin-bottom: 8px; }
.gt-hoi details { border: 1px solid var(--line-2, #2e2e2e); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; background: rgba(15, 15, 15, .82); }
.gt-hoi summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.gt-hoi p { margin: 8px 0 0; color: var(--muted, #8c8c8c); font-size: 14px; line-height: 1.55; }
.gt-rui-ro { margin-top: 20px; border: 1px solid rgba(255, 176, 32, .4); background: rgba(255, 176, 32, .08); border-radius: 12px; padding: 12px 16px; font-size: 13.5px; line-height: 1.55; }
.gt-chan { margin: 18px 0 8px; text-align: center; font-size: 13.5px; color: var(--muted, #8c8c8c); }
:root[data-theme="light"] .gt-o, :root[data-theme="light"] .gt-hoi details { background: #fff; }
.b-chuong { position: relative; }
.b-chuong .cham-so { display: none; position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #f23645; color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; line-height: 17px; text-align: center; }
.b-chuong.co .cham-so { display: block; }
.tb-ds { display: flex; flex-direction: column; gap: 6px; max-height: 65vh; overflow: auto; }
.tb-muc { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2, #2e2e2e); color: inherit; text-decoration: none; }
.tb-muc.moi { border-color: rgba(41, 98, 255, .6); background: rgba(41, 98, 255, .08); }
.tb-muc small { display: block; color: var(--muted, #8c8c8c); font-size: 12px; margin-top: 2px; }
.tb-ic { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--card-2, #1a1a1a); }
.tb-muc.ok .tb-ic { color: #22ab94; } .tb-muc.lo .tb-ic, .tb-muc.loi .tb-ic { color: #f23645; } .tb-muc.canh .tb-ic { color: #ffb020; } .tb-muc.ho_tro .tb-ic { color: #5b9cf6; }
.ho-tro-phieu { margin-top: 12px; } .ho-tro-phieu.ad { border-top: 1px solid var(--line-2, #2e2e2e); padding-top: 12px; }
.ht-tin { border-radius: 12px; padding: 8px 12px; margin: 6px 0; background: var(--card-2, #1a1a1a); white-space: pre-wrap; overflow-wrap: anywhere; }
.ht-tin.kn { background: rgba(41, 98, 255, .12); }
.ht-tin small { display: block; color: var(--muted, #8c8c8c); font-size: 12px; margin-bottom: 2px; }
.ht-tra { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .ht-tra input { flex: 1 1 200px; min-width: 0; }
.cf-nguon { font-size: 11.5px; color: var(--muted, #8c8c8c); margin-top: 2px; }