/* PHONG THI NGHIEM - lop nhin
   San nha may la TRUNG TAM, chiem gan het man hinh. Ben hong chi con mot thu:
   bang xep hang token da chay xa nhat. Ket qua di tuan cua claude khong co
   panel rieng nua - no noi ngay tren san, canh con bot.
   Khong nap font tu internet: lab chay 127.0.0.1. */

:root {
  --nen: #070a10;
  --the: #0e131c;
  --the2: #131a25;
  --vien: #1c2431;
  --vien2: #26303f;
  --chu: #ccd6e4;
  --mo: #62718a;
  --mo2: #47546b;

  --lam: #22d3ee;
  --xanh: #34d399;
  --do: #f8717a;
  --vang: #fbbf24;
  --tim: #a78bfa;
  --hong: #f472b6;

  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
  --sans: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--nen);
  color: var(--chu);
  font-family: var(--sans);
  font-size: 13px;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 560px at 20% -10%, rgba(34, 211, 238, 0.06), transparent 70%),
    radial-gradient(900px 460px at 92% 110%, rgba(167, 139, 250, 0.055), transparent 70%);
}

/* ══════════ KHUNG ══════════ */

#khung {
  position: relative;
  height: 100%;
  display: grid;
  /* auto, khong phai 50px co dinh: man hep thi thanh tren xuong hai dong thay
     vi cat mat cac chi so ben phai. */
  grid-template-rows: auto minmax(0, 1fr);
}

#chinh {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 23vw, 360px);
  gap: 9px;
  padding: 0 9px 9px;
  min-height: 0;
}

/* ══════════ THANH TREN ══════════ */

#dinh {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 17px;
  min-height: 50px;
  padding: 6px 15px;
  border-bottom: 1px solid var(--vien);
  background: linear-gradient(180deg, rgba(19, 26, 37, 0.9), rgba(7, 10, 16, 0.6));
  position: relative;
  z-index: 2;
}

.hieu {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 12px;
}

.hieu .cham {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--mo2);
  box-shadow: 0 0 0 3px rgba(98, 113, 138, 0.14);
}
.hieu.song .cham { background: var(--xanh); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16); animation: tho 2.4s ease-in-out infinite; }
.hieu.chet .cham { background: var(--do); box-shadow: 0 0 0 3px rgba(248, 113, 122, 0.18); }
/* Mat ket noi toi may chu lab - KHAC voi "bot chet". Phai phan biet duoc, neu
   khong nguoi xem nhin so cu dong bang ma tuong bot van dang chay. */
.hieu.mat { color: var(--vang); }
.hieu.mat .cham { background: var(--vang); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18); animation: tho 1s ease-in-out infinite; }

@keyframes tho { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.vach { width: 1px; height: 22px; background: var(--vien); }

.o { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.o b {
  font-family: var(--mono);
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.o span {
  font-size: 8.5px;
  letter-spacing: 0.13em;
  color: var(--mo2);
  text-transform: uppercase;
}

.chips { display: flex; gap: 5px; margin-left: auto; flex-wrap: wrap; }
.chip {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 7px;
  border: 1px solid var(--vien);
  border-radius: 20px;
  color: var(--mo);
  background: var(--the);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip b { color: var(--chu); font-weight: 600; }

/* ══════════ SAN NHA MAY ══════════ */

#sanBoc {
  position: relative;
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 9px;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
#tranh { display: block; width: 100%; height: 100%; }


/* ══════════ COT BEN HONG ══════════ */

#hong {
  display: grid;
  /* LIVE NOW nhinh hon mot chut - no la cai doi tung giay. */
  /* LIVE NOW rong hon: moi hang cua no cao ba dong (ten · chi tiet · dev). */
  grid-template-rows: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 9px;
  min-height: 0;
  min-width: 0;
}

.the {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.the > h2 {
  margin: 0;
  padding: 10px 12px 9px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--mo);
  border-bottom: 1px solid var(--vien);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.nut { margin-left: auto; display: flex; gap: 3px; }
.nut button {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--vien2);
  background: transparent;
  color: var(--mo2);
  cursor: pointer;
}
.nut button:hover { color: var(--chu); border-color: var(--mo2); }
.nut button.chon { color: var(--nen); background: var(--lam); border-color: var(--lam); font-weight: 700; }

.the > h2 em {
  font-style: normal;
  margin-left: auto;
  letter-spacing: 0.04em;
  color: var(--mo2);
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: none;
}

#xepHang, #dangChay { flex: 1; overflow-y: auto; min-height: 0; padding: 5px 0 4px; }
#xepHang::-webkit-scrollbar, #dangChay::-webkit-scrollbar { width: 7px; }
#xepHang::-webkit-scrollbar-thumb, #dangChay::-webkit-scrollbar-thumb { background: var(--vien2); border-radius: 4px; }
#xepHang::-webkit-scrollbar-track, #dangChay::-webkit-scrollbar-track { background: transparent; }

.chan {
  flex: 0 0 auto;
  padding: 7px 12px 9px;
  border-top: 1px solid var(--vien);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
  color: var(--mo2);
}

/* ---- mot dong xep hang ---- */

.hang {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 1px 8px;
  align-items: center;
  padding: 7px 12px 8px;
  border-bottom: 1px solid rgba(28, 36, 49, 0.6);
  font-family: var(--mono);
  overflow: hidden;
}
.hang:last-child { border-bottom: 0; }

.hang .thanh {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.13), rgba(52, 211, 153, 0));
  pointer-events: none;
}
.hang.top1 .thanh { background: linear-gradient(90deg, rgba(251, 191, 36, 0.20), rgba(251, 191, 36, 0)); }
.hang.top2 .thanh { background: linear-gradient(90deg, rgba(203, 213, 225, 0.13), rgba(203, 213, 225, 0)); }
.hang.top3 .thanh { background: linear-gradient(90deg, rgba(244, 114, 182, 0.13), rgba(244, 114, 182, 0)); }

.hang .hg {
  grid-row: 1 / 3;
  font-size: 12px;
  font-weight: 700;
  color: var(--mo2);
  text-align: right;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.hang.top1 .hg { color: var(--vang); }
.hang.top2 .hg { color: #cbd5e1; }
.hang.top3 .hg { color: var(--hong); }

.hang .ten { font-size: 12px; font-weight: 600; color: var(--chu); position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hang .boi {
  font-size: 14px; font-weight: 700; color: var(--xanh);
  font-variant-numeric: tabular-nums; text-align: right; position: relative; white-space: nowrap;
}
.hang.top1 .boi { color: var(--vang); }
.hang .chi { grid-column: 2 / 4; font-size: 9.5px; color: var(--mo2); position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hang .chi b { color: var(--mo); font-weight: 400; }
.hang .im { color: var(--hong); }

/* ---- mot dong LIVE NOW ---- */

.song {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1px 7px;
  align-items: center;
  padding: 6px 12px 7px;
  border-bottom: 1px solid rgba(28, 36, 49, 0.6);
  font-family: var(--mono);
  overflow: hidden;
}
.song:last-child { border-bottom: 0; }

.song .thanh { position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; }
.song.len .thanh { background: linear-gradient(90deg, rgba(52, 211, 153, 0.14), rgba(52, 211, 153, 0)); }
.song.xuong .thanh { background: linear-gradient(90deg, rgba(248, 113, 122, 0.10), rgba(248, 113, 122, 0)); }

.song .ten { font-size: 11.5px; font-weight: 600; color: var(--chu); position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song .boi { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; position: relative; white-space: nowrap; }
.song.len .boi { color: var(--xanh); }
.song.xuong .boi { color: var(--do); }
.song.bay .boi { color: var(--vang); }

.song .doi {
  position: relative;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.song .doi.up { color: var(--xanh); background: rgba(52, 211, 153, 0.11); }
.song .doi.dn { color: var(--do); background: rgba(248, 113, 122, 0.10); }
.song .doi.eq { color: var(--mo2); }

.song .chi { grid-column: 1 / 4; font-size: 9.5px; color: var(--mo2); position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song .chi b { color: var(--mo); font-weight: 400; }
.song .im { color: var(--hong); }

/* ---- dong DEV cua token dang chay ---- */
.song .dev {
  grid-column: 1 / 4;
  position: relative;
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px dashed rgba(38, 48, 63, 0.85);
  font-size: 9px;
  color: var(--mo2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song .dev .tt { color: var(--vien2); letter-spacing: 0.1em; margin-right: 3px; }
.song .dev b { color: var(--mo); font-weight: 600; }
.song .dev .cd {
  margin-left: 6px;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 8px;
  letter-spacing: 0.09em;
  font-weight: 700;
}
.song .dev .cd.x { color: var(--do); background: rgba(248, 113, 122, 0.13); }
.song .dev .cd.n { color: var(--vang); background: rgba(251, 191, 36, 0.11); }
.song .dev .cd.i { color: var(--xanh); background: rgba(52, 211, 153, 0.10); }
.song .dev .cd.u { color: var(--mo2); background: rgba(98, 113, 138, 0.10); }

.trong { color: var(--mo2); font-size: 10.5px; font-family: var(--mono); padding: 14px 13px; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════
   ADDITIONS FOR THE PUBLIC SIGNALS PAGE
   Everything above this line is the lab stylesheet, unchanged.
   ══════════════════════════════════════════════════════════════════ */

/* ── the pitch ─────────────────────────────────────────────────── */
#loiMo {
  border-bottom: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(34,197,94,.10), transparent 70%),
    radial-gradient(50% 100% at 88% 10%, rgba(239,68,68,.07), transparent 70%);
  padding: 26px 0 22px;
}
.loiMo-in { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

.ve {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  font-family: Orbitron, sans-serif; font-weight: 900; font-size: 14px;
  letter-spacing: .04em; color: #94a3b8; text-decoration: none;
  transition: color .2s;
}
.ve:hover { color: #f8fafc; }
.ve svg { width: 15px; height: 15px; }

#loiMo h1 {
  font-family: Orbitron, sans-serif; font-weight: 900;
  font-size: clamp(23px, 3.4vw, 38px); line-height: 1.1;
  margin: 8px 0 12px; color: #f8fafc; letter-spacing: -.01em;
}
#loiMo h1 .do { color: #ef4444; }
#loiMo p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: #94a3b8; max-width: 74ch; }
#loiMo p b { color: #f8fafc; }

/* The disclaimer is the most important text on the page, so it is styled to be
   read rather than skipped. */
.canh {
  display: flex; gap: 9px; align-items: flex-start;
  border-left: 3px solid rgba(245,158,11,.55);
  background: rgba(245,158,11,.05);
  padding: 10px 12px; border-radius: 8px;
  font-size: 12.5px !important; color: #cbd5e1 !important; max-width: 88ch !important;
}
.canh svg { width: 16px; height: 16px; flex: none; color: #f59e0b; margin-top: 2px; }
.canh b { color: #fbbf24 !important; }

/* ── data age ──────────────────────────────────────────────────── */
.o.tuoi b { color: #34d399; }
.o.tuoi b.hoicu { color: #fbbf24; }
.o.tuoi b.cu { color: #ef4444; }

/* ── contract + copy ───────────────────────────────────────────── */
.ca {
  display: flex; align-items: center; gap: 7px;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,.08);
  position: relative; z-index: 2;
}
.ca .tt {
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #475569; flex: none;
}
.ca code {
  font-size: 10px; color: #94a3b8; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca .cp {
  flex: none; min-height: 26px; padding: 0 9px; cursor: pointer;
  font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: .1em;
  color: #94a3b8; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12); border-radius: 5px;
  transition: color .18s, border-color .18s, background .18s;
}
.ca .cp:hover { color: #f8fafc; border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.10); }
.ca .cp.xong { color: #34d399; border-color: rgba(52,211,153,.6); background: rgba(52,211,153,.14); }

/* ── milestone toasts ──────────────────────────────────────────── */
#mocHop {
  position: fixed; top: 14px; right: 14px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  width: min(330px, calc(100vw - 28px)); pointer-events: none;
}
.moc {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px; border-radius: 11px;
  background: #0b1b12; border: 1px solid rgba(52,211,153,.42);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.9), 0 0 22px -8px rgba(52,211,153,.4);
  opacity: 0; transform: translateX(18px);
  transition: opacity .3s ease-out, transform .3s cubic-bezier(.16,1,.3,1);
}
.moc.vao { opacity: 1; transform: none; }
.moc > svg { width: 17px; height: 17px; flex: none; color: #34d399; margin-top: 1px; }
.moc .noi { flex: 1; min-width: 0; }
.moc .noi b {
  display: block; font-family: Orbitron, sans-serif; font-weight: 700;
  font-size: 13px; color: #6ee7b7; letter-spacing: .01em; margin-bottom: 3px;
}
.moc .noi span { display: block; font-size: 10.5px; color: #94a3b8; line-height: 1.5; }
.moc .dong {
  flex: none; width: 22px; height: 22px; cursor: pointer;
  background: none; border: 0; color: #475569; font-size: 15px; line-height: 1;
  border-radius: 5px; transition: color .18s;
}
.moc .dong:hover { color: #f8fafc; }

/* ── footer ────────────────────────────────────────────────────── */
#chan {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px 22px; border-top: 1px solid rgba(255,255,255,.07);
  margin-top: 10px;
}
#chan > span:first-child {
  font-family: Orbitron, sans-serif; font-weight: 900; font-size: 16px;
  letter-spacing: .2em; color: #475569;
}
#chan .nho { font-size: 11px; color: #475569; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .moc { transition-duration: .001ms; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE
   The lab had no breakpoint - it was built for one wide monitor, where
   #chinh is a grid of "canvas | 250px sidebar". On a phone that sidebar
   is narrower than a contract row, which pushed the COPY button off the
   screen entirely. Copying a contract is the whole point of this page,
   so below 860px the two panes stack and the sidebar gets full width.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  #chinh {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  /* The mascot animation stays - it is the character of the page - but it
     no longer eats the whole first screen. */
  #sanBoc { height: 46vh; min-height: 260px; }
  #hong { grid-template-rows: auto auto; }
  .the { max-height: 78vh; }

  .ca { min-width: 0; flex-wrap: wrap; row-gap: 5px; }
  .ca code { flex: 1 1 100%; order: 3; font-size: 10.5px; }
  .ca .tt { order: 1; }
  /* Full-width tap target: 44px tall, comfortably hittable with a thumb. */
  .ca .cp { order: 2; margin-left: auto; min-height: 34px; padding: 0 14px; }
}

@media (max-width: 520px) {
  #dinh { gap: 6px 12px; padding: 6px 12px; }
  #loiMo { padding: 18px 0 16px; }
  #mocHop { top: 10px; right: 10px; left: 10px; width: auto; }
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT FIXES
   The lab was a full-viewport dashboard: html/body/#khung were all
   height:100%, with #khung the only child of body. This page puts a
   pitch section above it, so hero + 100vh exceeded the window - and
   because body used `height` rather than `min-height`, the overflow
   was clipped with no way to scroll to it. The bottom third of the
   pipeline was simply unreachable.
   ══════════════════════════════════════════════════════════════════ */
html, body {
  height: auto;
  min-height: 100%;
  /* THE ACTUAL BUG behind every "layout is cut / cannot scroll" report.
     The lab set overflow:hidden here because it was a single-screen cockpit
     that never scrolled. This page is taller than the window, so with that
     rule there is no scrollbar and the wheel does nothing - scrollTo() from
     an anchor link still moves the page, which is why clicking "How this
     works" jumped down and then appeared to freeze. */
  overflow-x: hidden;   /* still no sideways scroll */
  overflow-y: auto;     /* but let the page scroll vertically */
}
#khung {
  /* A DEFINITE height, not flex:1 with auto height. The panels inside are
     grid rows of minmax(0,1fr) and they only scroll internally when the
     frame has a real height to divide - with `auto` they expanded to fit all
     48 rows and the page became 5400px tall with a stretched canvas. */
  height: min(86vh, 900px);
  min-height: 620px;
  /* On an ultrawide monitor the ring stretched into a near-empty rectangle
     with the stations flung to the corners. Cap it and centre. */
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
}

/* A `1fr` grid column keeps min-width:auto, so it refuses to shrink below its
   content even when that content already has text-overflow:ellipsis. That is
   what pushed the multiplier column past the right edge of the panel. */
.song { grid-template-columns: minmax(0, 1fr) auto auto; }
.hang { grid-template-columns: 22px minmax(0, 1fr) auto; }

/* Static explainer. Real content for people who land here from search, and it
   lifts the page above the thin-content threshold: everything else in the two
   panels is rendered by script, so a crawler saw ~158 words before this. */
/* Wrapper below the dashboard. The explainer used to sit in the hero, where
   its 300px pushed the whole cockpit off the first screen no matter where you
   scrolled. Down here it can be as long as it likes and nothing moves. */
#giai-thich-boc{
  max-width:1560px; width:100%; margin:0 auto;
  padding:26px 18px 4px; border-top:1px solid rgba(255,255,255,.07);
}
.giai-thich{max-width:78ch; scroll-margin-top:20px}
.giai-thich h2{
  font-family:Orbitron, sans-serif; font-weight:700; font-size:15px;
  letter-spacing:.12em; text-transform:uppercase; color:#94a3b8;
  margin:0 0 10px;
}
.giai-thich p{font-size:13px; line-height:1.75; color:#94a3b8; margin:0 0 10px; max-width:78ch}
.giai-thich strong{color:#f8fafc}
.giai-thich em{color:#fbbf24; font-style:normal}

/* The mascot signing off in its own voice. */
.giai-thich .loi-hua{
  margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07);
  color:#6ee7b7; font-size:12.5px;
}

/* "How this works" jump link in the hero warning. */
.canh a{color:#fbbf24; text-decoration:none; border-bottom:1px solid rgba(251,191,36,.4); white-space:nowrap}
.canh a:hover{color:#fde68a; border-bottom-color:#fde68a}

/* Quick row on the signals page: the project's own contract and links, so a
   member who lands here from search does not have to go back to the homepage
   to find them. Same .cp button class as the signal rows, so the existing
   copy handler picks it up without new script. */
.lien-ket{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:14px; padding:10px 12px; border-radius:10px;
  background:#0e131c; border:1px solid #1c2431;
}
.lien-ket .ca-label{
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:#22c55e; font-weight:700; flex:none;
}
.lien-ket code{
  font-size:11px; color:#94a3b8; flex:1 1 240px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lien-ket a{
  flex:none; min-height:30px; display:inline-flex; align-items:center; padding:0 12px;
  font-size:10px; font-weight:700; letter-spacing:.1em; text-decoration:none;
  color:#94a3b8; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12); border-radius:6px;
  transition:color .18s, border-color .18s, background .18s;
}
.lien-ket a:hover{color:#f8fafc; border-color:rgba(52,211,153,.5); background:rgba(52,211,153,.10)}
@media(max-width:560px){ .lien-ket code{flex:1 1 100%; order:3} }