/* ============================================================
   LOL Betting dashboard — "restrained terminal" theme (FE rebuild M1).
   Dark-first (betting-room default), light supported.
   Rules: quiet chrome, data loud; text wears text tokens, never series
   color; status colors reserved + always paired with icon/label;
   AMBER IS EXCLUSIVELY FOR THE "LẬT" (flip) CONCEPT — small-sample and
   staleness states use the neutral badge, never amber.
   Exception (So kèo redesign, user 25/10/2026): "ít trận" cells keep their % and
   are highlighted with --few-wash (yellow); ⚠️ data-gap lines / chips use --warning,
   as .em-warn / .rm-lineup-diff already did.
   Token names --series-1 / --border / --text-secondary are read by
   app.js via getComputedStyle — NEVER rename them.
   ============================================================ */

:root {
  color-scheme: dark;
  /* elevation — cool graphite (+~5%L per step) */
  --page: #0b0c0f;
  --surface-1: #12141a;
  --surface-2: #191c23;
  --surface-3: #21252e;
  --overlay: #262b35;
  /* hairlines (alpha-white — scales across surfaces) */
  --border: rgba(255, 255, 255, 0.10);
  --border-hairline: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.16);
  /* text ladder */
  --text-primary: #eceef2;
  --text-secondary: #b7bdc9;
  --text-muted: #98a0b0;
  --text-faint: #5d6470;
  /* single interactive accent (Primer-blue family, APCA-bumped one step) */
  --series-1: #79b8ff;
  --accent-hover: #9ecbff;
  --accent-contrast: #0b0c0f;
  --accent-soft: rgba(121, 184, 255, 0.13);
  --accent-ring: rgba(121, 184, 255, 0.40);
  /* semantic — light variants legible on near-black (APCA-checked) */
  --good: #56d364;
  --good-wash: rgba(86, 211, 100, 0.12);
  --bad: #ff9d96;
  --bad-wash: rgba(255, 157, 150, 0.12);
  --warning: #e3b341;
  --warn-wash: rgba(210, 153, 34, 0.14);
  --neutral-badge: rgba(255, 255, 255, 0.07);
  --highlight: rgba(121, 184, 255, 0.14);
  /* type */
  --font-ui: "Inter", system-ui, "Segoe UI", sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, Consolas, monospace;
  /* shape & depth */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.55);
  --glow-accent: 0 0 24px rgba(121, 184, 255, 0.16);
  --topbar-bg: rgba(11, 12, 15, 0.82);
  /* motion (M4 consumes; declared now so transitions share one vocabulary) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 320ms;
  --dur-data: 600ms;
  --stagger: 90ms;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --page: #f8f9fb;
    --surface-1: #ffffff;
    --surface-2: #eef0f4;
    --surface-3: #e4e7ec;
    --overlay: #ffffff;
    --border: rgba(15, 18, 25, 0.12);
    --border-hairline: rgba(15, 18, 25, 0.08);
    --border-strong: rgba(15, 18, 25, 0.20);
    --text-primary: #17191f;
    --text-secondary: #3d434f;
    --text-muted: #6a7181;
    --text-faint: #9aa1af;
    --series-1: #0969da;
    --accent-hover: #0550ae;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(9, 105, 218, 0.10);
    --accent-ring: rgba(9, 105, 218, 0.35);
    --good: #1a7f37;
    --good-wash: rgba(26, 127, 55, 0.10);
    --bad: #cf222e;
    --bad-wash: rgba(207, 34, 46, 0.10);
    --warning: #9a6700;
    --warn-wash: rgba(154, 103, 0, 0.12);
    --neutral-badge: rgba(15, 18, 25, 0.06);
    --highlight: rgba(9, 105, 218, 0.10);
    --shadow: 0 0 0 1px rgba(15, 18, 25, 0.06), 0 12px 32px rgba(15, 18, 25, 0.10);
    --glow-accent: 0 0 24px rgba(9, 105, 218, 0.12);
    --topbar-bg: rgba(248, 249, 251, 0.85);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f8f9fb;
  --surface-1: #ffffff;
  --surface-2: #eef0f4;
  --surface-3: #e4e7ec;
  --overlay: #ffffff;
  --border: rgba(15, 18, 25, 0.12);
  --border-hairline: rgba(15, 18, 25, 0.08);
  --border-strong: rgba(15, 18, 25, 0.20);
  --text-primary: #17191f;
  --text-secondary: #3d434f;
  --text-muted: #6a7181;
  --text-faint: #9aa1af;
  --series-1: #0969da;
  --accent-hover: #0550ae;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(9, 105, 218, 0.10);
  --accent-ring: rgba(9, 105, 218, 0.35);
  --good: #1a7f37;
  --good-wash: rgba(26, 127, 55, 0.10);
  --bad: #cf222e;
  --bad-wash: rgba(207, 34, 46, 0.10);
  --warning: #9a6700;
  --warn-wash: rgba(154, 103, 0, 0.12);
  --neutral-badge: rgba(15, 18, 25, 0.06);
  --highlight: rgba(9, 105, 218, 0.10);
  --shadow: 0 0 0 1px rgba(15, 18, 25, 0.06), 0 12px 32px rgba(15, 18, 25, 0.10);
  --glow-accent: 0 0 24px rgba(9, 105, 218, 0.12);
  --topbar-bg: rgba(248, 249, 251, 0.85);
}

/* ---------- fonts (self-hosted, VN-safe — no CDN) ---------- */

@font-face {
  font-family: "Inter";
  src: url("/static/vendor/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/vendor/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/vendor/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font: 14px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
main[hidden], [hidden] { display: none; }

::selection { background: var(--accent-soft); }

/* ---------- topbar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
  padding: 10px 24px;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  font-size: 18px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
.brand-tag { font-size: 11px; color: var(--text-muted); }
/* ---------- i18n: EN | VI switch + no flash of the wrong language (spec sokeo-bilingual D3, §9) ---------- */
/* i18n.js sets data-i18n-pending in <head> and removes it after its first applyDom, so the static
   English literal never flashes on the Vietnamese LAN page; without JS nothing is hidden */
html[data-i18n-pending] [data-i18n],
html[data-i18n-pending] [data-i18n-html] { visibility: hidden; }
.lang-switch { display: inline-flex; flex: none; margin-left: auto; }
html[data-lang-lock] .lang-switch { display: none !important; }
.lang-btn {
  min-width: 40px; min-height: 32px; padding: 0 10px;
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  font-size: .85rem; font-weight: 600; cursor: pointer;
}
.lang-btn:first-child { border-radius: 8px 0 0 8px; }
.lang-btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.lang-btn[aria-pressed="true"] { position: relative; border-color: var(--series-1); color: var(--series-1); }
.lang-btn:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--accent-ring); outline-offset: 1px; }
@media (max-width: 900px) {
  /* first row: mark, name, switch (top right); the navs wrap to a row of their own */
  .brand { flex-wrap: wrap; row-gap: 8px; }
  .brand-text { flex: 1 1 0; min-width: 0; }
  .brand::after { content: ""; order: 1; flex-basis: 100%; }
  .brand > nav { order: 2; }
}

#pick-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.matchup-input {
  display: flex; align-items: center; gap: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px;
}
.matchup-input:focus-within {
  border-color: var(--series-1);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
#pick-form input {
  background: transparent; color: var(--text-primary);
  border: 0; border-radius: 8px; padding: 8px 12px;
  min-width: 165px; font: inherit; outline: none;
}
#pick-form input::placeholder { color: var(--text-muted); }
.vs {
  color: var(--text-muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  flex: none;
}

button {
  background: var(--series-1); color: var(--accent-contrast);
  border: 0; border-radius: 10px;
  padding: 9px 16px; cursor: pointer;
  font: inherit; font-weight: 600;
  transition: filter var(--dur-fast) var(--ease-out), transform 50ms var(--ease-out);
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: wait; filter: none; }
button:focus-visible {
  outline: 2px solid var(--series-1); outline-offset: 2px;
}
#refresh-btn {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border);
}
#refresh-btn:hover { background: var(--surface-2); color: var(--text-primary); }

/* ---------- notices ---------- */

.banner {
  margin: 14px auto 0; max-width: 1240px;
  padding: 10px 16px 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-secondary);
}
.banner-error {
  background: var(--bad-wash);
  border: 1px solid var(--bad);
  border-left-width: 3px;
  color: var(--text-primary);
}
.banner-warn {
  /* neutral — amber is reserved for the LAT concept; the warning icon in
     the text carries the meaning */
  background: var(--neutral-badge);
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
}
.banner-info {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-left-color: var(--series-1);
  display: flex; align-items: center; gap: 10px;
  color: var(--text-primary);
}
.banner-info .spinner {
  width: 14px; height: 14px; flex: none;
  border: 2px solid var(--border-strong);
  border-top-color: var(--series-1);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .banner-info .spinner { animation: none; } }
#warnings, #error, #loading { padding: 0 24px; }

.toast {
  position: fixed; top: 70px; right: 20px; z-index: 40;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--series-1);
  border-radius: var(--radius-sm);
  padding: 12px 16px; max-width: 380px;
  font-size: 13.5px;
  box-shadow: var(--shadow);
  animation: slide-in 0.2s ease;
}
@keyframes slide-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- layout ---------- */

main { padding: 20px 24px 48px; max-width: 1240px; margin: 0 auto; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.card-head {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 14px;
}
.qnum {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--series-1);
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.qnum-icon { font-size: 14px; }
.card-head-text { min-width: 0; }
.card-head h2 { font-size: 16px; font-weight: 650; margin: 3px 0 2px; letter-spacing: -0.01em; }
.sub { font-size: 12.5px; font-weight: 400; color: var(--text-muted); margin: 0; }

/* ---------- hero versus (FE rebuild M3) ---------- */

.hero {
  position: relative; overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 24px 14px;
  margin-bottom: 18px;
}
.hero::before, .hero::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 32%;
  pointer-events: none; opacity: 0.5;
}
.hero::before { left: 0; background: linear-gradient(90deg, var(--accent-soft), transparent); }
.hero::after { right: 0; background: linear-gradient(-90deg, var(--accent-soft), transparent); }
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr minmax(260px, auto) 1fr;
  gap: 20px; align-items: start;
}
.team-side h3 { margin: 0 0 2px; font-size: 22px; letter-spacing: -0.015em; }
.team-side.right { text-align: right; }
.team-side ul {
  margin: 8px 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.team-side.right ul { justify-content: flex-end; }
.team-side li {
  font-size: 11.5px; color: var(--text-secondary);
  background: var(--surface-2); border: 1px solid var(--border-hairline);
  border-radius: 999px; padding: 2px 9px;
}
.team-side .src { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }
.roster-alert {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; padding: 3px 10px;
  border-radius: 999px;
  background: var(--neutral-badge);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 12px;
}

/* verdict module (center) — #live-odds giữ id cũ, đổi vai trò */
.verdict { text-align: center; padding: 0 8px; }
.verdict .price {
  font: 700 46px/1.1 var(--font-num);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--glow-accent);
  margin: 4px 0 2px;
}
.verdict .american { font: 500 13.5px var(--font-num); color: var(--text-muted); }
.verdict .zone-tag {
  display: inline-block; margin-top: 8px;
  padding: 3px 12px; border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
  color: var(--series-1);
  font: 600 12px var(--font-num);
}
.verdict .muted { font-size: 12px; }
.gap-line {
  font-size: 12.5px; color: var(--text-secondary);
  max-width: 300px; margin: 6px auto 0; text-wrap: balance;
}
.delta-badge {
  font: 600 13px var(--font-num); font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
}
.delta-badge.up { color: var(--good); background: var(--good-wash); }
.delta-badge.down { color: var(--bad); background: var(--bad-wash); }
.updated {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-faint); margin-top: 6px;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.updated.stale, .delta-badge.stale { color: var(--text-muted); background: var(--neutral-badge); }
.updated.stale .live-dot { background: var(--text-faint); animation: none; }

.h2h-chips {
  position: relative; z-index: 1;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border-hairline);
}
.chip {
  font-size: 12px; color: var(--text-secondary);
  background: var(--surface-2); border: 1px solid var(--border-hairline);
  border-radius: 999px; padding: 4px 12px; cursor: pointer;
  text-decoration: none;
}
.chip:hover { border-color: var(--accent-ring); color: var(--text-primary); }
.chip b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* matchup tournament filter (spec matchup-tournament-filter) */
.tour-filter {
  position: relative; z-index: 1;
  display: flex; gap: 8px; align-items: center; justify-content: center;
  margin-top: 12px;
}
.tour-filter label { font-size: 12px; color: var(--text-secondary); }
.tour-filter select {
  font-size: 12px; color: var(--text-primary);
  background: var(--surface-2); border: 1px solid var(--border-hairline);
  border-radius: 8px; padding: 5px 10px; cursor: pointer;
  max-width: 340px;
}
.tour-filter select:hover { border-color: var(--accent-ring); }

/* ---------- FE logos: team logos + champion icons ---------- */

.team-logo {
  width: 36px; height: 36px; object-fit: contain;
  vertical-align: middle; flex: none;
}
.team-side h3 { display: flex; align-items: center; gap: 8px; }
.team-side.right h3 { flex-direction: row-reverse; }
.logo-sm { width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; }
.champ-icon {
  width: 22px; height: 22px; border-radius: 4px;
  border: 1px solid var(--border-hairline);
  object-fit: cover; vertical-align: middle; margin-right: 6px;
}

/* ---------- section nav (scrollspy) ---------- */

.section-nav {
  position: sticky; top: 57px; z-index: 19;
  display: flex; gap: 2px; overflow-x: auto;
  padding: 0 24px;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-hairline);
}
.section-nav[hidden] { display: none; }
.section-nav a {
  padding: 7px 12px 9px; font-size: 12.5px; font-weight: 500;
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.section-nav a:hover { color: var(--text-secondary); }
.section-nav a.active { color: var(--series-1); border-bottom-color: var(--series-1); font-weight: 600; }
.nav-spacer { margin-left: auto; }
.nav-tool {
  flex: none; align-self: center;
  font: 500 11.5px var(--font-ui); color: var(--text-muted);
  background: none; border: 1px solid var(--border-hairline);
  border-radius: 999px; padding: 3px 10px; margin: 4px 0 4px 6px;
  cursor: pointer; white-space: nowrap;
}
.nav-tool:hover { color: var(--text-secondary); border-color: var(--border-strong); }

/* ---------- collapsible sections (úp/mở từng mục) ---------- */

section.card .card-head { cursor: pointer; }
.collapse-btn {
  flex: none; margin-left: auto; align-self: center;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  font-size: 13px; line-height: 1;
  color: var(--text-muted);
  background: none; border: 1px solid transparent;
  border-radius: var(--radius-xs); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.card-head:hover .collapse-btn { color: var(--text-secondary); border-color: var(--border-hairline); }
.lvl-toggle ~ .collapse-btn { margin-left: 10px; }
section.card.collapsed .collapse-btn { transform: rotate(-90deg); }
section.card.collapsed > :not(.card-head) { display: none; }
section.card.collapsed .card-head { margin-bottom: 0; }

/* ---------- level toggle + per-market accordion ---------- */

.lvl-toggle {
  margin-left: auto; display: flex; gap: 2px; flex: none;
  background: var(--surface-2); border: 1px solid var(--border-hairline);
  border-radius: 999px; padding: 2px;
}
.lvl-btn {
  background: transparent; color: var(--text-muted);
  border: 0; border-radius: 999px; padding: 4px 12px;
  font: 600 12px var(--font-ui); cursor: pointer;
}
.lvl-btn:hover { filter: none; color: var(--text-secondary); }
.lvl-btn.active { background: var(--accent-soft); color: var(--series-1); }
.beat-note { font-size: 12px; color: var(--text-secondary); margin: 2px 0 8px; }
.beat-dir { display: inline-block; width: 1.2em; }
/* khối "Nhịp trong ván theo sổ lệnh" (tick-zone-touch): 3 nút hạng dùng lại pill .lvl-btn */
.tick-grades { display: inline-flex; margin: 4px 0 8px; }
/* tick-last-exit: the game block's 5-column table must never paint over the next team's column */
.tick-block .tick-view { overflow-x: auto; }
.tick-coverage { color: var(--text-primary); font-size: 13px; }
.tick-median { white-space: nowrap; }
.tick-last { white-space: normal; }
.tick-last-val { display: block; white-space: nowrap; }
.tick-last-n { white-space: nowrap; font-size: 12px; }
/* touch-ladder: "Tỉ lệ thắng theo mốc giá đã đi qua" */
.tick-ladder { margin-top: 12px; overflow-x: auto; }
.tick-ladder h5 { margin: 8px 0 4px; font-size: 13px; }
.tick-ladder-range { display: block; font-size: 11px; white-space: nowrap; }
.tick-ladder-table td:first-child { white-space: nowrap; }
.delta-chip.muted { color: var(--text-muted); }
/* touch-stability: "Chạm mốc rồi có ổn định không" — nút mốc dùng chung hai đội, bảng cuộn ngang trong khung */
.tick-stab { margin-top: 14px; min-width: 0; }
.tick-stab h5 { margin: 8px 0 4px; font-size: 13px; }
/* rev 1.2: bảng nằm cuối mục "Mở ván ở X" — một đường kẻ mảnh tách khỏi bảng ▼/▲ phía trên */
.open-zone > .tick-stab { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border-hairline); }
.tick-stab-empty { margin: 4px 0; font-size: 12px; }
.tick-stab-pointer { margin-top: 8px; }
.stab-btns {
  display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 8px; max-width: 100%;
  background: var(--surface-2); border: 1px solid var(--border-hairline);
  border-radius: 999px; padding: 2px;
}
.stab-btn {
  background: transparent; color: var(--text-muted);
  border: 0; border-radius: 999px; padding: 4px 12px;
  font: 600 12px var(--font-ui); cursor: pointer;
}
.stab-btn:hover { filter: none; color: var(--text-secondary); }
.stab-btn.active { background: var(--accent-soft); color: var(--series-1); }
/* rev 2.0: nhãn "mở O" giữa mốc ▼ (trái) và mốc ▲ (phải) — chỉ để đọc, không phải nút */
.stab-open {
  padding: 4px 8px; font: 600 12px var(--font-ui); color: var(--text-secondary);
  border-left: 1px solid var(--border-hairline); border-right: 1px solid var(--border-hairline);
  cursor: default; user-select: none; white-space: nowrap;
}
.stab-btn[data-dir="down"] { color: var(--text-secondary); }
.stab-btn[data-dir="down"].active { color: var(--series-1); }
.tick-stab-scroll { overflow-x: auto; max-width: 100%; }
.tick-stab-table td:first-child { white-space: nowrap; }
.tick-stab-table .tick-ladder-range { display: inline; margin-left: 4px; }
.tick-stab-share { white-space: nowrap; font-size: 12px; color: var(--text-secondary); }
.tick-stab-table td.clickable { cursor: pointer; }
.tick-stab-table td.clickable:hover { color: var(--text-primary); }
.tick-stab-note { margin: 8px 0 4px; font-size: 12px; color: var(--text-secondary); }
.tick-stab-note summary { cursor: pointer; }
.zone-group td { padding-top: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); border-bottom: none; }
.beat-summary { margin: 4px 0 10px; }
.beat-summary .row { display: flex; gap: 8px; align-items: center; margin: 3px 0; }
.beat-summary .row .lbl { min-width: 200px; font-size: 13px; }
details.lvl {
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  padding: 6px 12px; margin: 8px 0; background: var(--surface-2);
}
details.lvl summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--text-secondary); }
details.lvl summary:hover { color: var(--text-primary); }

/* ---------- content blocks ---------- */

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pair[hidden] { display: none; }
.team-block { min-width: 0; }
.team-block h3 {
  margin: 4px 0 10px; font-size: 14.5px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--series-1);
  display: inline-block;
}
.team-block h4 {
  margin: 16px 0 6px; font-size: 13px;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.team-block p.muted { margin: 6px 0; }

/* ---------- tables ---------- */

table {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: 13px;
  margin: 4px 0 10px;
}
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border-hairline); }
th {
  color: var(--text-muted);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
tbody tr { transition: background var(--dur-fast) linear; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; }
tr.highlight { background: var(--highlight); box-shadow: inset 3px 0 0 var(--series-1); }
tr.highlight:hover { background: var(--highlight); }
tr.highlight td { color: var(--text-primary); }
td.clickable {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--text-muted);
}
td.clickable:hover { color: var(--series-1); text-decoration-color: var(--series-1); }
.insufficient { color: var(--text-muted); }
.warn-ic { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.muted { color: var(--text-muted); font-size: 12.5px; }
span.clickable { text-decoration: underline dotted; text-underline-offset: 3px; }
span.clickable:hover { color: var(--series-1); }

/* ---------- delta chip + n badge (the win-rate cell itself is .sc-* below) ---------- */

.delta-chip { font: 600 12px var(--font-num); white-space: nowrap; }
.delta-chip.up { color: var(--good); }
.delta-chip.down { color: var(--bad); }
.n-badge {
  font: 600 10.5px var(--font-num);
  color: var(--text-muted); background: var(--neutral-badge);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.current-pill {
  font: 600 10.5px var(--font-ui); color: var(--series-1);
  background: var(--accent-soft); border-radius: 999px;
  padding: 2px 9px; margin-left: 8px; white-space: nowrap;
}

/* ---------- hold/flip segmented meter (FE rebuild M2) ---------- */

.meter {
  display: flex; height: 20px; min-width: 160px;
  border-radius: var(--radius-xs); overflow: hidden;
  background: var(--surface-3);
  font: 600 11px var(--font-num);
}
.seg-hold, .seg-flip {
  display: grid; place-items: center; overflow: hidden; white-space: nowrap;
  flex-basis: 0;
}
.seg-hold { background: var(--good-wash); color: var(--good); flex-grow: var(--w, 0); }
.seg-flip { background: var(--warn-wash); color: var(--warning); flex-grow: var(--w, 0); }
.seg-flip.muted-seg { background: var(--surface-3); }
.meter-empty { color: var(--text-faint); font-size: 12px; }
td.meter-td { min-width: 200px; }

/* ---------- exclusions ---------- */

details.excl {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 8px 12px;
}
details.excl summary {
  cursor: pointer; color: var(--text-secondary);
  font-size: 13.5px;
}
details.excl summary:hover { color: var(--text-primary); }
details.excl ul { margin: 8px 0 2px; padding-left: 20px; }
details.excl li { color: var(--text-muted); font-size: 13px; padding: 2px 0; }
details.excl a { color: var(--series-1); }

/* ---------- empty state ---------- */

#result:not([hidden]) ~ #empty-state { display: none; }
.empty {
  max-width: 560px; margin: 9vh auto 0; padding: 0 24px;
  text-align: center;
  animation: rise 0.3s ease both;
}
.empty-icon { font-size: 44px; margin-bottom: 10px; }
.empty h2 { font-size: 20px; margin: 0 0 8px; }
.empty p { color: var(--text-secondary); margin: 0 0 18px; }
.empty-hints {
  list-style: none; margin: 0; padding: 0;
  display: inline-flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.empty-hints li {
  color: var(--text-muted); font-size: 13.5px;
  padding: 8px 14px 8px 34px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
}
.empty-hints li::before {
  content: "→";
  position: absolute; left: 14px;
  color: var(--series-1);
}

/* ---------- drill-down dialog ---------- */

dialog#drilldown {
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  width: min(920px, 94vw); max-height: 88vh;
  overflow: auto; padding: 0;
  box-shadow: var(--shadow);
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
.dd-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.dd-head h3 { margin: 0; font-size: 15px; }
#dd-close {
  flex: none;
  background: var(--surface-2); color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
}
#dd-close:hover { color: var(--text-primary); background: var(--surface-3); }
.dd-body { padding: 14px 18px 18px; }
#dd-list table { font-size: 13px; }
#dd-list .win { color: var(--good); white-space: nowrap; }
#dd-list .loss { color: var(--bad); white-space: nowrap; }
#dd-list .flip { color: var(--warning); font-weight: 700; white-space: nowrap; }
#dd-list tr.selected { background: var(--highlight); box-shadow: inset 3px 0 0 var(--series-1); }
#dd-list a { color: var(--series-1); }
#dd-chart-note { margin: 6px 0 2px; }
/* chart series nhiều ván: tab "Cả trận | Ván N" (vẽ lại từ cùng payload) */
.dd-chart-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.dd-chart-tabs[hidden] { display: none; }
.dd-tab {
  font: 600 12px var(--font-ui); padding: 3px 10px; cursor: pointer;
  color: var(--text-secondary); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.dd-tab[aria-pressed="true"] {
  color: var(--text-primary); background: var(--highlight); border-color: var(--series-1);
}
.chart-wrap {
  margin-top: 10px; height: 280px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
}
.match-id { font: 11px var(--font-num); color: var(--text-muted); word-break: break-all; }

/* drill-down: per-match lineup sub-row (đội hình đã ra sân) — own 5 shown
   inline, "cả 2 đội + tướng" expands per-game with champions */
#dd-list tr.dd-lineup > td { padding: 3px 10px 9px 12px; }
.lu-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px;
  font-size: 12px; color: var(--text-secondary);
}
.lu-icon { opacity: 0.85; }
.lu-p { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.lu-summary .lu-p + .lu-p::before,
.lu-side .lu-p + .lu-p::before {
  content: "·"; color: var(--text-faint); margin-right: 3px;
}
.lu-role {
  font: 600 9.5px var(--font-ui); letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--text-faint);
}
.lu-champ { color: var(--text-muted); font-size: 11px; margin-left: 2px; }
.lu-kda {
  color: var(--text-secondary); font-size: 11px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lu-varies {
  font-size: 10.5px; color: var(--warning);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 6px;
}
.lu-toggle {
  margin-left: auto; flex: none;
  background: var(--surface-2); color: var(--series-1);
  border: 1px solid var(--border); border-radius: 999px;
  font: 600 11px var(--font-ui); padding: 2px 11px; cursor: pointer;
}
.lu-toggle:hover { background: var(--surface-3); }
.lu-detail { margin-top: 6px; display: grid; gap: 6px; }
.lu-game {
  display: flex; flex-direction: column; gap: 5px; padding: 7px 9px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.lu-ghead {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); padding-bottom: 4px;
}
.lu-gtag {
  font: 600 10.5px var(--font-ui); color: var(--text-muted); white-space: nowrap;
}
/* series row: bấm "Ván N" → chart riêng ván đó */
.lu-ghead-chart { cursor: pointer; }
.lu-ghead-chart:hover .lu-gtag, .lu-ghead-chart:focus-visible .lu-gtag {
  color: var(--series-1); text-decoration: underline;
}
.lu-gchart {
  margin-left: auto; font: 600 11px var(--font-ui); color: var(--series-1); white-space: nowrap;
}
.lu-winner { font: 600 11.5px var(--font-ui); color: var(--text-primary); }
.lu-winner.muted { color: var(--text-faint); font-weight: 500; }
/* drilldown-open-prices: opening of the series / each game */
.dd-open { white-space: nowrap; }
.dd-gopen { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; font-size: 12px; }
.dd-gopen-item { white-space: nowrap; color: var(--text-secondary); }
.lu-gopen { font: 500 11.5px var(--font-ui); color: var(--text-secondary); white-space: nowrap; }
.dd-gopen-item.muted, .lu-gopen.muted { color: var(--text-faint); }
.dd-game {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  font: 600 11px var(--font-ui); color: var(--text-secondary);
  background: var(--surface-2); white-space: nowrap; vertical-align: middle;
}
.lu-side {
  display: flex; flex-wrap: wrap; gap: 4px 7px;
  align-items: baseline; font-size: 12px;
}
.lu-tname { font-weight: 600; color: var(--text-secondary); min-width: 88px; }
.lu-sidetag {
  font: 600 10px var(--font-ui); padding: 0 5px; border-radius: 999px;
  border: 1px solid var(--border); white-space: nowrap;
}
.side-blue { color: var(--series-1); border-color: var(--series-1); }
.side-red  { color: var(--bad); border-color: var(--bad); }
.lu-res { font: 600 10.5px var(--font-ui); }
.lu-kdar {
  margin-left: 4px; padding: 0 4px; border-radius: var(--radius-xs);
  background: var(--surface-3); color: var(--text-muted);
  font-size: 10px; font-variant-numeric: tabular-nums;
}

/* ============================================================
   FE rebuild M4 — motion system. One-shot, data-driven, no loops
   (tru .live-dot pulse). HARD RULE "content never stays invisible":
   trang thai an CHI ton tai qua animation-fill-mode:both cua .anim —
   JS chet truoc khi them .anim -> moi section hien binh thuong.
   .below-fold CHI duoc JS gan khi IntersectionObserver kha dung.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  #result.anim .anim-sec {
    animation: rise var(--dur-base) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * var(--stagger));
  }
  @keyframes hold-hidden {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 0; transform: translateY(14px); }
  }
  /* hidden CHI qua animation-fill (reduce-motion safety net animation:none
     cung tu dong go trang thai an nay) */
  #result.anim .anim-sec.below-fold { animation: hold-hidden 1ms linear both; }
  #result.anim .anim-sec.below-fold.is-visible {
    animation: rise var(--dur-base) var(--ease-out) both;
    animation-delay: 0s;
  }
  .live-dot { animation: pulse 2s ease-out infinite; }
  @keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(86, 211, 100, 0); } }
  dialog#drilldown {
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out),
      overlay var(--dur-slow) allow-discrete, display var(--dur-slow) allow-discrete;
  }
  dialog#drilldown[open] { opacity: 1; transform: translateY(0) scale(1); }
  @starting-style {
    dialog#drilldown[open] { opacity: 0; transform: translateY(12px) scale(0.98); }
  }
  dialog#drilldown:not([open]) { opacity: 0; transform: translateY(12px) scale(0.98); }
}

/* skeleton — cau truc ngoai guard, shimmer trong guard */
.skeleton .sk-line {
  height: 12px; border-radius: 6px; background: var(--surface-3);
  position: relative; overflow: hidden; margin: 6px auto;
}
.sk-line.lg { height: 40px; width: 120px; }
.sk-line.sm { width: 90px; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton .sk-line::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    animation: shimmer 1.4s linear 3; /* finite — live-dot là loop duy nhất */
  }
  @keyframes shimmer { to { transform: translateX(100%); } }
}
/* reduce-motion price feedback: mau tinh thay flash */
.price-changed-up { color: var(--good); }
.price-changed-down { color: var(--bad); }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--border);
  padding: 18px 24px 22px;
  text-align: center;
}
.disclaimer { color: var(--text-secondary); font-size: 12px; margin: 0 0 4px; }
.attribution { color: var(--text-muted); font-size: 12px; margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .topbar { padding: 10px 16px; }
  .brand { width: 100%; }
  #pick-form { width: 100%; }
  .matchup-input { flex: 1; }
  #pick-form input { min-width: 0; flex: 1; }
  main { padding: 16px 16px 40px; }
  #warnings, #error { padding: 0 16px; }
  .pair { grid-template-columns: 1fr; }
  .hero { padding: 16px 16px 12px; }
  .hero-grid { grid-template-columns: 1fr; }
  .verdict { order: -1; }
  .team-side.right { text-align: left; }
  .team-side.right ul { justify-content: flex-start; }
  .section-nav { padding: 0 16px; }
  .card { padding: 14px 14px; }
  .toast { left: 16px; right: 16px; max-width: none; }
}
@media (max-width: 600px) {
  /* the team pair takes its own row and may shrink below its content: the two inputs' intrinsic width used to
     push the page to 501 px at 390 px (sokeo-i18n A1, AC-4). At these widths the buttons already wrapped below. */
  .matchup-input { flex-basis: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- champion patch signals (M3) ---------- */

.player-link {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--text-primary); cursor: pointer;
  text-decoration: underline dotted var(--text-muted);
  text-underline-offset: 3px;
}
.player-link:hover { color: var(--accent, #7aa2ff); text-decoration-style: solid; }

.champ-controls {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end;
  margin: 10px 0 14px;
}
.champ-controls label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-muted);
}
.champ-controls select, .champ-controls input[type="number"] {
  background: var(--neutral-badge); color: var(--text-primary);
  border: 1px solid var(--border, rgba(128,128,128,.25));
  border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px;
}
#cp-window-n, #pp-window-n { width: 72px; }

.champ-table { width: 100%; }
.champ-row, .pp-row { cursor: pointer; }
.champ-row:hover td, .pp-row:hover td { background: var(--neutral-badge); }
.champ-games table, .pp-games td table { font-size: 12.5px; margin: 6px 0; }
.note-line { margin: 2px 0; font-size: 13px; }

#champ-pool { max-width: 860px; width: min(92vw, 860px); }
#champ-pool .dd-body { max-height: 70vh; overflow-y: auto; }
.pp-sort { cursor: pointer; user-select: none; }
.pp-sort:hover { color: var(--text-primary); }

/* ---------- editable-lineup-pool: pool editor ---------- */
.pool-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.pool-edit, .pool-reset {
  background: var(--surface-2); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.pool-edit:hover, .pool-reset:hover { color: var(--text-primary); background: var(--surface-3); }
.pool-badge {
  display: inline-block; background: var(--accent-soft); color: var(--accent-hover);
  border: 1px solid var(--accent-ring); border-radius: 999px;
  padding: 2px 10px; font-size: 12px;
}
dialog#pool-dialog {
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 16px;
  width: min(560px, 94vw); max-height: 88vh; overflow: auto; padding: 0;
  box-shadow: var(--shadow);
}
#pool-dialog > .muted { padding: 0 18px; margin: 8px 0; font-size: 12px; }
.pool-body { padding: 6px 18px 4px; display: grid; gap: 10px; }
.pool-role { border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 6px 10px 10px; }
.pool-role legend { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 0 4px; }
.pool-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-xs); cursor: pointer;
}
.pool-chip:hover { background: var(--surface-2); }
.pool-chip .pc-name { flex: 1; font-size: 13px; }
.pool-chip small { color: var(--text-faint); font-size: 11px; }
.pool-chip.st-starter .pc-name { color: var(--text-primary); font-weight: 600; }
.pool-chip.st-recent small { color: var(--warning); }
.pool-dlg-foot {
  position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 10px;
  padding: 12px 18px; background: var(--surface-1); border-top: 1px solid var(--border);
}
.pool-dlg-foot button {
  border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; cursor: pointer; border: 1px solid var(--border);
}
#pool-apply { background: var(--series-1); color: var(--accent-contrast); border-color: transparent; font-weight: 600; }
#pool-apply:hover { background: var(--accent-hover); }
.pool-dlg-foot .ghost { background: var(--surface-2); color: var(--text-secondary); }
.pool-dlg-foot .ghost:hover { color: var(--text-primary); background: var(--surface-3); }
#pool-dlg-note:empty { display: none; }
#pool-dlg-note { padding: 0 18px; color: var(--bad); font-size: 12px; }

/* re-analysis (pool change): dim the stale result while the new view computes */
#result.updating { opacity: .5; transition: opacity .15s ease; pointer-events: none; }

/* ============ Team recent-form page ("Phong độ đội") ============ */
.mode-btn {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text-secondary);
  font-size: .85rem; cursor: pointer;
}
.mode-btn.active {
  border-color: var(--series-1); color: var(--text-primary);
  background: var(--accent-soft);
}
/* team mode swaps which header form + which main view is visible (CSS drives
   it so the matchup #result.hidden logic is never touched) */
body.team-mode #pick-form,
body.team-mode #result,
body.team-mode #section-nav,
body.team-mode #empty-state,
body.team-mode #sec-pick-perf { display: none !important; }
body:not(.team-mode) #team-form-view,
body:not(.team-mode) #team-pick-form { display: none !important; }
body.team-mode #team-pick-form { display: flex !important; }
/* override the initial `hidden` attribute on the team view in team mode */
body.team-mode #team-form-view { display: block !important; }

#team-form-view { max-width: 1100px; margin: 0 auto; padding: 18px; }

/* ---- entry-timing map (mode "Điểm vào") ---- */
body.entry-mode #pick-form,
body.entry-mode #result,
body.entry-mode #section-nav,
body.entry-mode #empty-state,
body.entry-mode #sec-pick-perf,
body.entry-mode #team-form-view,
body.entry-mode #team-pick-form { display: none !important; }
body:not(.entry-mode) #entry-view { display: none !important; }
body.entry-mode #entry-view { display: block !important; }

#entry-view { max-width: 1180px; margin: 0 auto; padding: 18px; }
#entry-view h2 { font-size: 1.15rem; margin: 0 0 4px; }
#entry-view .em-sub { color: var(--text-secondary); font-size: .86rem; max-width: 80ch; margin: 0 0 8px; }
#entry-view .em-warn { font-size: .82rem; color: var(--text-secondary); background: var(--warn-wash);
  border-left: 3px solid var(--warning); border-radius: 6px; padding: 8px 12px; margin: 0 0 8px; max-width: 82ch; }
.em-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-top: 12px; overflow-x: auto; }
.em-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.em-btn { font: inherit; font-size: .8rem; padding: 4px 11px; border: 1px solid var(--border);
  background: var(--surface-3); color: var(--text-secondary); border-radius: 16px; cursor: pointer; }
.em-btn.on { background: var(--series-1); color: var(--accent-contrast); border-color: var(--series-1); }
.em-row { display: flex; align-items: center; height: 22px; }
.em-lab { width: 210px; flex: 0 0 210px; font-size: .74rem; display: flex; gap: 6px; align-items: baseline;
  white-space: nowrap; overflow: hidden; }
.em-lab b { font-weight: 600; color: var(--text-primary); }
.em-badge { font-size: .62rem; padding: 1px 5px; border-radius: 4px; background: var(--surface-3); color: var(--text-muted); }
.em-track { position: relative; flex: 1; height: 16px; display: flex; }
.em-cell { flex: 1; height: 16px; }
.em-flag { position: absolute; top: -3px; width: 0; height: 22px; border-left: 2px solid var(--good); }
.em-flag::after { content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px;
  background: var(--good); border-radius: 50%; }
.em-guard { position: absolute; top: -2px; height: 20px; border-left: 2px dashed var(--warning); z-index: 2; }
.em-thin { flex: 1; background: var(--surface-3); color: var(--text-muted); font-size: .68rem;
  display: flex; align-items: center; justify-content: center; }
.em-axis { display: flex; margin-left: 210px; color: var(--text-muted); font-size: .66rem;
  font-variant-numeric: tabular-nums; justify-content: space-between; margin-top: 2px; }
.em-legend { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: .76rem;
  color: var(--text-secondary); margin-top: 10px; }
.em-ramp { display: inline-block; width: 120px; height: 12px; border-radius: 3px;
  background: linear-gradient(90deg, var(--surface-3), #2a5a95, #256abf, #79b8ff); vertical-align: -1px; }
.em-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; }
.em-tip { position: fixed; pointer-events: none; background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong); padding: 5px 8px; border-radius: 6px; font-size: .74rem; opacity: 0;
  transition: opacity .08s; z-index: 60; font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-explain { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-top: 12px; }
.em-ex-txt { flex: 1 1 300px; font-size: .8rem; color: var(--text-secondary); }
.em-ex-txt b { color: var(--text-primary); }
.em-ex-txt p { margin: 8px 0 0; }
.em-ex-charts { flex: 1 1 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 280px; }
.em-mini figcaption { font-size: .68rem; color: var(--text-secondary); margin-bottom: 2px; font-weight: 600; }
.em-mini svg { display: block; width: 100%; height: auto; }
.em-note { font-size: .8rem; color: var(--text-secondary); background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: 8px;
  padding: 12px 14px; margin-top: 16px; }

/* ---- open-zone win-rate card (mode "🎯 Kèo mở") ---- */
body.oz-mode #pick-form,
body.oz-mode #result,
body.oz-mode #section-nav,
body.oz-mode #empty-state,
body.oz-mode #sec-pick-perf,
body.oz-mode #team-form-view,
body.oz-mode #team-pick-form,
body.oz-mode #entry-view { display: none !important; }
body:not(.oz-mode) #oz-view { display: none !important; }
body.oz-mode #oz-view { display: block !important; }

#oz-view { max-width: 1180px; margin: 0 auto; padding: 18px; }
#oz-view h2 { font-size: 1.15rem; margin: 0 0 4px; }
#oz-view .em-sub { color: var(--text-secondary); font-size: .86rem; max-width: 84ch; margin: 0 0 8px; }
#oz-view .em-warn { font-size: .82rem; color: var(--text-secondary); background: var(--warn-wash);
  border-left: 3px solid var(--warning); border-radius: 6px; padding: 8px 12px; margin: 0 0 10px; max-width: 84ch; }
.oz-ctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.oz-ctl .oz-hint { font-size: .78rem; color: var(--text-muted); }
.oz-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-secondary); cursor: pointer; }
.oz-block { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 12px 0; overflow-x: auto; }
.oz-sub-block { background: var(--surface-1); margin: 8px 0 8px 14px; padding: 8px 12px; }
.oz-h { font-size: .98rem; margin: 0 0 8px; color: var(--text-primary); font-weight: 700; }
.oz-h-combined { color: var(--series-1); }
.oz-sub-block .oz-h { font-size: .84rem; font-weight: 600; color: var(--text-secondary); }
.oz-h-meta { font-weight: 400; font-size: .76rem; color: var(--text-muted); }
.oz-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.oz-table th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: .74rem;
  border-bottom: 1px solid var(--border); padding: 4px 8px; white-space: nowrap; }
.oz-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.oz-table tr.oz-empty td { color: var(--text-muted); }
.oz-zn { font-weight: 700; font-variant-numeric: tabular-nums; }
.oz-n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.oz-fav b { color: var(--good); font-variant-numeric: tabular-nums; }
.oz-dog { font-variant-numeric: tabular-nums; }
.oz-sub2 { color: var(--text-muted); font-size: .72rem; }
.oz-thin { color: var(--warning); font-size: .72rem; }
.oz-note { font-size: .76rem; color: var(--text-muted); margin: 2px 0 8px 14px; }
/* ---- sub-tab "Tỉ số BO3/BO5" ---- */
.oz-tabs { display: flex; gap: 8px; margin: 10px 0 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
#oz-pane-bo[hidden], #oz-pane-game[hidden], #oz-pane-touch[hidden] { display: none; }
.oz-bo-table { font-size: .82rem; }
.oz-bo-table th, .oz-bo-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.oz-bo-fav { color: var(--good); font-weight: 600; }
.oz-bo-dog { color: var(--text-secondary); }
.oz-bo-tot { color: var(--text-primary); font-weight: 600; }
/* vạch đôi tách 2 cột phe khỏi cột GỘP (gộp = bỏ qua ai thắng, đọc cho kèo số ván) */
.oz-bo-table th.oz-bo-gap, .oz-bo-table td.oz-bo-gap { border-left: 2px solid var(--border); padding-left: 10px; }
/* ---- sub-tab "Chạm 95¢" ---- */
.oz-th-table { font-size: .82rem; }
.oz-th-table th, .oz-th-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.oz-th-lab, .oz-th-team { white-space: normal; font-weight: 600; }
/* ROI is the cell that decides the bet — the only one carrying colour */
.oz-th-good { color: var(--good); font-weight: 700; }
.oz-th-bad { color: var(--bad); font-weight: 700; }
.oz-th-warn { color: var(--warning); font-size: .72rem; font-weight: 400; }
.oz-th-sub { margin: 14px 0 4px; font-size: .8rem; color: var(--text-secondary); font-weight: 600; }
.oz-th-flips > summary { cursor: pointer; font-size: .72rem; font-weight: 400; color: var(--text-muted); }
.oz-mgroup { margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.oz-mgroup > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: .86rem; color: var(--text-primary); }
.oz-mtable { width: 100%; border-collapse: collapse; font-size: .8rem; }
.oz-mtable td { padding: 4px 10px; border-top: 1px solid var(--border); white-space: nowrap; vertical-align: baseline; }
.oz-md { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.oz-mg { color: var(--text-muted); font-size: .72rem; }
.oz-mz { font-weight: 700; font-variant-numeric: tabular-nums; }
.oz-mt { white-space: normal; }
.oz-favt { font-weight: 700; }
.oz-p { color: var(--text-muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.oz-vs { color: var(--text-muted); font-size: .74rem; }
.tf-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin: 6px 0 14px; font-size: 12px; color: var(--text-muted);
}
.tf-strip .fd-label { margin-right: 4px; }
.tf-strip .fd {
  width: 13px; height: 13px; border-radius: 3px; display: inline-block;
  border: 1px solid var(--border-hairline);
}
.tf-strip .fd-w { background: var(--good-wash); border-color: var(--good); }
.tf-strip .fd-l { background: var(--bad-wash); border-color: var(--bad); }
.tf-strip .fd-x { background: var(--surface-3); }

.tf-list { display: flex; flex-direction: column; gap: 8px; }
.tf-row {
  display: grid;
  grid-template-columns: 30px minmax(150px, 1fr) 54px auto auto 1fr auto;
  align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 14px; border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text-primary); cursor: pointer;
  font-size: 14px;
}
.tf-row:hover { border-color: var(--border-strong); background: var(--surface-3); }
.tf-row.tf-win { border-left-color: var(--good); }
.tf-row.tf-loss { border-left-color: var(--bad); }
.tf-row .tf-badge { font-size: 15px; }
.tf-row .tf-opp { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.tf-row .tf-score { font-variant-numeric: tabular-nums; font-weight: 700; }
.tf-row .tf-open {
  color: var(--series-1); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tf-row .tf-date { color: var(--text-muted); font-size: 12.5px; }
.tf-row .tf-league { color: var(--text-secondary); font-size: 12.5px; }
.tf-row .tf-cta { color: var(--series-1); font-size: 12.5px; justify-self: end; }
#tf-more-wrap { margin-top: 14px; text-align: center; }
@media (max-width: 640px) {
  .tf-row { grid-template-columns: 26px 1fr auto auto; }
  .tf-row .tf-date, .tf-row .tf-league, .tf-row .tf-cta { display: none; }
}

/* ---- Top tuyển thủ (mode "players" — spec player-lane-ranking M5) ---- */
body.players-mode #pick-form,
body.players-mode #result,
body.players-mode #section-nav,
body.players-mode #empty-state,
body.players-mode #sec-pick-perf,
body.players-mode #team-form-view,
body.players-mode #team-pick-form { display: none !important; }
body:not(.players-mode) #players-view { display: none !important; }
body.players-mode #players-view { display: block !important; }

#players-view { max-width: 1180px; margin: 0 auto; padding: 18px; }
#players-view h2 { font-size: 1.15rem; margin: 0 0 4px; }
.pr-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
.pr-controls select { font: inherit; font-size: .82rem; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  color: var(--text-primary); }
.pr-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
  color: var(--text-secondary); font-size: .78rem; margin: 4px 0 2px; }
.pr-meta .pr-stale { color: var(--warning); font-weight: 600; }
.pr-meta .pr-attrib { color: var(--text-muted); }
.pr-note { color: var(--text-muted); font-size: .78rem; margin: 4px 0; }
.pr-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.pr-table th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: .72rem;
  padding: 5px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pr-table td { padding: 5px 8px; border-bottom: 1px solid var(--border);
  vertical-align: baseline; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-row.pr-dim { opacity: .55; }

/* bảng cuộn ngang trên mobile (thẻ Tướng meta) */
.lh2h-scroll { overflow-x: auto; }

/* ---- So kèo extras: "10 trận gần nhất" + "Tướng mạnh theo lane" (spec so-keo-form-meta) ---- */
#q-recent.is-stale, #lm-body.is-stale {
  opacity: .55; transition: opacity var(--dur-fast) var(--ease-out);
}
.lm-tabs { margin: 8px 0 4px; margin-left: 0; width: fit-content; flex-wrap: wrap; }
.lm-table td.lm-num, .lm-table th { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.lm-table td.lm-num { white-space: nowrap; }  /* "4 / 10" never splits on a phone */
.lm-table th { text-align: left; vertical-align: bottom; }
.lm-table td.lm-champ { font-family: var(--font-ui); font-weight: 600; }
.lm-table .lm-champ-in { display: inline-flex; align-items: center; gap: 6px; }
.lm-table .lm-pct { color: var(--text-secondary); }
.lm-table .lm-dim, .lm-table .lm-dim strong { color: var(--text-faint); }
.lm-table .lm-why { font-family: var(--font-ui); font-size: 12px; font-weight: 400; }
.lm-player {
  background: none; border: 0; padding: 0; color: var(--series-1); cursor: pointer;
  font: inherit; font-weight: 700; text-decoration: underline dotted; text-underline-offset: 3px;
}
.lm-player:hover { color: var(--accent-hover); }
.lm-more {
  margin-top: 8px; background: var(--surface-2); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px;
  cursor: pointer;
}
.lm-more:hover { border-color: var(--border-strong); color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) {
  button.rm-row, #q-recent.is-stale, #lm-body.is-stale { transition: none; }
}

/* ============ So kèo redesign (spec so-keo-redesign, option A) ============
   Scope: the matchup tab — #result, #sec-pick-perf, #section-nav, #tip-layer.
   Tokens only. --few-wash = the "ít trận" highlight (user 25/10/2026). */
:root { --few-wash: rgba(234, 179, 8, 0.30); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --few-wash: #ffef9e; } }
:root[data-theme="light"] { --few-wash: #ffef9e; }

/* "ít trận": the value keeps its bar and %, highlighted instead of dimmed */
.few { background: var(--few-wash); color: var(--text-primary); border-radius: 4px; box-shadow: 0 0 0 2px var(--few-wash); }

/* ---- tooltips: highlighted title + "?" (pseudo-element: never part of the title text) ---- */
button.tip-t, .tip-look {
  display: inline; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit;
  background: linear-gradient(transparent 58%, var(--accent-soft) 58%);
  border: 0; border-radius: 3px; padding: 0 3px; margin: 0 -3px; cursor: help;
}
button.tip-t:hover, .tip-look:hover { filter: none; background: var(--accent-soft); }
button.tip-t:active { transform: none; }
button.tip-t::after, .tip-look::after {
  content: "?"; display: inline-grid; place-items: center;
  width: 1.1em; height: 1.1em; margin-left: .35em; vertical-align: .08em;
  border: 1.5px solid var(--series-1); border-radius: 50%;
  color: var(--series-1); font: 800 .62em/1 var(--font-ui);
}
button.tip-chip {
  /* inline-block, not flex: text-overflow only cuts the text of a block container */
  display: inline-block; vertical-align: middle; max-width: 100%;
  background: var(--surface-2); color: var(--text-secondary);
  border: 1px solid var(--border-hairline); border-radius: 999px;
  padding: 3px 11px; font: 500 13px var(--font-ui); cursor: help;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.tip-chip::before {
  content: "i"; display: inline-grid; place-items: center; vertical-align: -3px; margin-right: 6px;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid currentColor; font: 800 10px/1 var(--font-ui);
}
button.tip-chip:hover { filter: none; color: var(--text-primary); border-color: var(--border-strong); }
button.tip-chip:active { transform: none; }
button.tip-chip.warn { background: var(--warn-wash); color: var(--warning); border-color: transparent; }
/* a fail-closed ⚠️ note: always visible text, on its own line (flex-basis wraps it in flex rows) */
.warn-line { display: block; flex-basis: 100%; margin: 2px 0; font-size: 14px; color: var(--warning); }
.tip-h { cursor: help; }
#tip-layer {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: max-content; max-width: min(360px, calc(100vw - 16px));
  padding: 10px 13px; border-radius: var(--radius-sm);
  background: var(--overlay); color: var(--text-primary);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  font: 400 13.5px/1.55 var(--font-ui); text-align: left; white-space: normal;
  pointer-events: none; opacity: 0; transform: translateY(-3px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
#tip-layer.on { opacity: 1; transform: none; }
#tip-layer p { margin: 0 0 6px; }
#tip-layer p:last-child { margin-bottom: 0; }
/* every tooltip line is a bullet: small hanging indent, ~4px between items, no extra top margin */
#tip-layer ul.tip-list { margin: 0; padding: 0; list-style: none; }
#tip-layer ul.tip-list > li { position: relative; margin: 0 0 4px; padding-left: 14px; }
#tip-layer ul.tip-list > li:last-child { margin-bottom: 0; }
#tip-layer ul.tip-list > li::before { content: "•"; position: absolute; left: 2px; top: 0; }
#tip-layer b { font-weight: 650; }

/* ---- type scale (user: chữ thân 16px, chú thích ≥ 13px) + card heads without paragraphs ---- */
#result, #sec-pick-perf { font-size: 16px; }
#result .muted, #sec-pick-perf .muted { font-size: 13px; }
#result .card-head, #sec-pick-perf .card-head { align-items: center; flex-wrap: wrap; row-gap: 8px; margin-bottom: 12px; }
#result .card-head h2, #sec-pick-perf .card-head h2 { font-size: 18px; margin: 0; }
.head-ctrls { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.head-ctrls .lvl-toggle { margin-left: 0; }
.head-ctrls + .collapse-btn { margin-left: 10px; }
#sec-pick-perf { width: min(1192px, calc(100% - 48px)); margin: 0 auto 24px; }

/* ---- pairs of cards side by side (A); a deep order-book view needs the full width ---- */
.duo-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin-bottom: 18px; }
.duo-row.ld { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.duo-row > .card { margin-bottom: 0; }
/* a card with an open filter box stacks above its later siblings (the popup may overflow the card) */
#result section.card:has(.filter-box[open]), #sec-pick-perf:has(.filter-box[open]) { position: relative; z-index: 31; }
/* BLV stays usable while a re-analysis dims the page — its 10 picks are typed by hand */
#result.updating #sec-caster { pointer-events: auto; }

/* ---- filter boxes: one chip in the head opens the existing selects ---- */
.filter-box { position: relative; }
.filter-box > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.filter-box > summary::-webkit-details-marker { display: none; }
.filter-box > summary::after { content: "▾"; font-size: 11px; color: var(--text-muted); }
.filter-pop.champ-controls {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: max-content; max-width: min(620px, calc(100vw - 32px)); margin: 0;
  padding: 12px 14px; background: var(--overlay);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}

/* ---- win-rate cell shared by the duo tables / tiles ---- */
.sc-l1 { display: flex; align-items: center; gap: 8px; }
.sc-l2 { display: block; margin-top: 2px; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.sc-bar { position: relative; flex: none; width: 70px; height: 7px; border-radius: 4px; background: var(--surface-3); }
.sc-bar.wide { width: 100%; }
.sc-fill { position: absolute; inset: 0; border-radius: 4px; background: var(--series-1); transform-origin: left; transform: scaleX(var(--wr, 0)); }
.sc-fill.lite { opacity: .55; }
.sc-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; left: calc(var(--base, .5) * 100%); margin-left: -1px; background: var(--text-primary); border-radius: 1px; }
.sc-pct { font: 650 15px var(--font-num); font-variant-numeric: tabular-nums; }
.sc-d { font: 600 13px var(--font-num); white-space: nowrap; }
.sc-d.up { color: var(--good); }
.sc-d.down { color: var(--bad); }
.duo-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.duo-legend span { display: inline-flex; align-items: center; gap: 6px; }
.duo-legend i { display: inline-block; }
.lg-fill { width: 16px; height: 7px; border-radius: 4px; background: var(--series-1); }
.lg-few { width: 18px; height: 12px; border-radius: 3px; background: var(--few-wash); }
.duo-notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---- section nav: pills ---- */
html { scroll-padding-top: 118px; }
.section-nav { gap: 6px; padding: 8px 24px; }
.section-nav a {
  padding: 5px 13px; font-size: 13.5px; color: var(--text-secondary);
  border: 1px solid var(--border-hairline); border-radius: 999px;
}
.section-nav a:hover { border-color: var(--accent-ring); color: var(--text-primary); }
.section-nav a.active { background: var(--series-1); border-color: var(--series-1); color: var(--accent-contrast); }

@media (prefers-reduced-motion: no-preference) {
  .sc-fill { transition: transform var(--dur-data) var(--ease-out); }
  #result.anim:not(.bars-armed) .sc-fill { transform: scaleX(0); }
  /* hover lift uses `translate` (not `transform`): the entrance animation keeps transform filled */
  #result section.card, #sec-pick-perf { transition: translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  #result section.card:hover, #sec-pick-perf:hover { translate: 0 -2px; box-shadow: var(--shadow); }
}
@media (max-width: 1180px) {
  .duo-row, .duo-row.ld { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  #sec-pick-perf { width: calc(100% - 32px); }
  .section-nav { padding: 8px 16px; }
}

/* ---- hero (A) ---- */
.hero::before, .hero::after { display: none; }
.hero-foot {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-hairline);
}
.hero-foot .h2h-chips { margin: 0; padding: 0; border: 0; }
.hero-foot .tour-filter { margin: 0; justify-content: flex-start; }
.hero-foot .tour-filter select { font-size: 14px; }
.team-side h3 { font-size: 24px; }
.team-side .rec { font-size: 14px; color: var(--text-secondary); margin-top: 2px; min-height: 1.3em; }
.lu-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; max-width: 470px; }
.team-side.right .lu-grid { margin-left: auto; }
button.lu-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0;
  padding: 5px 8px; background: var(--surface-2); color: var(--text-primary);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  font: 600 14.5px var(--font-ui); text-decoration: none; text-align: left;
}
button.lu-chip:hover { filter: none; border-color: var(--accent-ring); color: var(--text-primary); }
.lu-chip b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lu-role { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.lu-role:empty { display: none; }
.lu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.team-side.right .lu-chips, .team-side.right .pool-actions { justify-content: flex-end; }
.lo-label { font-size: 14px; color: var(--text-secondary); }
/* H2H: "Đối đầu ?" title + two cards (small label over a big score) */
.hero-foot .h2h-chips { align-items: center; gap: 10px; }
.h2h-card {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 132px; padding: 6px 14px; border-radius: var(--radius-sm); text-align: left;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.h2h-lbl { font: 500 12px var(--font-ui); color: var(--text-secondary); }
.h2h-card .h2h-score { font: 700 20px/1.2 var(--font-num); color: var(--text-primary); }
button.h2h-chip:not([aria-disabled="true"]):hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, .08); }
button.h2h-chip:not([aria-disabled="true"]) .h2h-score::after { content: " ›"; color: var(--series-1); font-family: var(--font-ui); }
button.h2h-chip[aria-disabled="true"] { cursor: help; }
button.h2h-chip[aria-disabled="true"] .h2h-score, span.h2h-card .h2h-score { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {
  .h2h-card { transition: none; }
  button.h2h-chip:not([aria-disabled="true"]):hover { transform: none; }
}
@media (max-width: 900px) {   /* narrow: the title on its own line, the two cards side by side under it */
  .hero-foot .h2h-chips { display: grid; grid-template-columns: repeat(2, max-content); }
  .h2h-title { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 900px) {
  .team-side.right .lu-grid { margin-left: 0; }
  .team-side.right .lu-chips, .team-side.right .pool-actions { justify-content: flex-start; }
  .lu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==== [M3-M4] zone tables (Moneyline + Kèo từng ván): insert below this line ==== */
/* ---- duo zone tables ---- */
.duo-table { font-size: 15px; margin: 2px 0 6px; }
.duo-table th { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.duo-table th .team-logo { width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; }
.duo-table td { padding: 7px 8px; vertical-align: middle; }
.duo-table td.duo-zone { width: 84px; white-space: nowrap; }
.duo-zone b { display: block; font: 650 15px var(--font-num); }
.duo-zone .duo-range { display: block; font-size: 13px; color: var(--text-muted); }
/* the live "◉ vùng hiện tại" pill keeps its own look, on its own line in the narrow zone column */
.duo-zone .current-pill { display: block; width: max-content; margin-top: 3px; }
.duo-table td.clickable:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.duo-table td.clickable { text-decoration: none; cursor: pointer; }
.duo-table td.clickable:hover .sc-pct { color: var(--series-1); }
.duo-table tr.duo-total td { background: var(--surface-2); border-bottom: 0; }
.duo-table tr.duo-even td { border-top: 1px solid var(--border-hairline); }
.duo-table tr.highlight .duo-zone b { color: var(--series-1); }

/* ---- Kèo từng ván: level chips + folded order-book blocks ---- */
.duo-levels.lvl-toggle { margin: 0 0 10px; flex-wrap: wrap; width: fit-content; max-width: 100%; }
.duo-levels .lvl-btn.dim, .duo-levels .lvl-btn:disabled { opacity: .45; cursor: not-allowed; }
details.tick-wrap { margin-top: 14px; border-top: 1px solid var(--border-hairline); padding-top: 10px; }
details.tick-wrap > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 12px; font-weight: 600; font-size: 15px;
}
details.tick-wrap > summary::-webkit-details-marker { display: none; }
details.tick-wrap > summary::before { content: "▸"; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-out); }
details.tick-wrap[open] > summary::before { transform: rotate(90deg); }
.tick-wrap-sum { font-weight: 400; font-size: 13px; color: var(--text-muted); }
/* order-book block: coverage / source / counting-rule lines folded under one line (user 27/10) */
details.tick-meta, details.tick-fold { margin: 2px 0 8px; }
details.tick-meta > summary, details.tick-fold > summary { width: fit-content; cursor: pointer; font-size: 12px; color: var(--text-muted); }
details.tick-meta[open] > summary, details.tick-fold[open] > summary { margin-bottom: 4px; }
details.tick-wrap > .pair { margin-top: 12px; }

/* ==== [M5-M8] blocks (10 trận, Xanh/Đỏ, lane + BLV, Meta patch): insert below this line ==== */

/* ---- Xanh / Đỏ tiles ---- */
.side-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.side-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.side-head .logo-sm { margin-right: 0; }
.side-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
details.side-tile {
  min-width: 0; background: var(--surface-1);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}
details.side-tile:hover { border-color: var(--accent-ring); }
details.side-tile[open] { grid-column: 1 / -1; }
details.side-tile > summary { list-style: none; cursor: pointer; display: grid; gap: 6px; padding: 12px 14px; }
details.side-tile > summary::-webkit-details-marker { display: none; }
.st-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.side-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.side-dot.blue { background: var(--series-1); }
.side-dot.red { background: var(--bad); }
details.side-tile.red .sc-fill { background: var(--bad); }   /* the Đỏ bar is not drawn in the blue series colour */
.st-v { display: flex; align-items: baseline; gap: 8px; }
.st-v .sc-pct { font-size: 24px; }
.st-n { font-size: 13px; color: var(--text-muted); }
.side-games { overflow-x: auto; padding: 0 12px 10px; }
.side-games table { font-size: 13px; margin: 0; }
@media (max-width: 900px) { .side-panels { grid-template-columns: minmax(0, 1fr); } }

/* ---- 10 trận gần nhất (A): one line per match ---- */
.rm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 15px; }
.rm-head .rm-summary { color: var(--text-secondary); font-size: 14px; }
.rm-head .rm-strip { margin: 0 0 0 auto; display: inline-flex; gap: 3px; }
.rm-list { display: flex; flex-direction: column; }
.rm-row {
  /* fixed league width: every row (and the header) shares the same columns */
  display: grid; grid-template-columns: 58px 40px minmax(0, 1fr) 88px 46px 36px 70px;
  align-items: center; gap: 8px; width: 100%; padding: 7px 6px;
  border: 0; border-bottom: 1px solid var(--border-hairline); border-radius: 0;
  background: transparent; color: var(--text-primary); font: 400 14.5px var(--font-ui); text-align: left;
}
button.rm-row { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
button.rm-row:hover { filter: none; background: var(--surface-2); }
button.rm-row:active { transform: none; }
.rm-row.rm-hd { font-size: 13px; font-weight: 600; color: var(--text-muted); padding-top: 2px; }
.rm-res { font-size: 13px; font-weight: 700; text-align: center; border-radius: 6px; padding: 2px 0; }
.rm-row.is-win .rm-res { background: var(--good-wash); color: var(--good); }
.rm-row.is-loss .rm-res { background: var(--bad-wash); color: var(--bad); }
.rm-row.is-open .rm-res { background: var(--neutral-badge); color: var(--text-muted); }
.rm-score { font: 600 14px var(--font-num); }
.rm-opp { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rm-opp .logo-sm { margin-right: 0; }
.rm-opp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-flag {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: var(--neutral-badge); color: var(--text-muted); font: 700 12px var(--font-ui);
}
.rm-flag.diff { background: var(--warn-wash); color: var(--warning); }
.rm-flag.unk { border: 1px dashed var(--border-strong); background: transparent; }
.rm-row .warn-line { grid-column: 1 / -1; margin: 0; font-size: 13px; text-align: left; }
.rm-league {
  justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--text-secondary); background: var(--neutral-badge); border-radius: 6px; padding: 1px 7px;
}
.rm-row.rm-hd .rm-league, .rm-row.rm-hd .rm-res { background: none; }
.rm-row.rm-hd > span { font: inherit; color: inherit; }
.rm-date, .rm-bo { font: 13px var(--font-num); color: var(--text-muted); }
.rm-price { font: 600 14px var(--font-num); text-align: right; }
/* "mở 99.5¢" is 8 mono chars (~67px): one line; the long no-price notes still wrap */
.rm-price:not(.rm-noprice) { white-space: nowrap; }
.rm-price.rm-noprice { color: var(--text-faint); font-weight: 500; }
@media (max-width: 640px) {
  .rm-row { grid-template-columns: 54px 36px minmax(0, 1fr) 70px; }
  .rm-row .rm-league, .rm-row .rm-date, .rm-row .rm-bo { display: none; }
}

/* ---- lane meta in the A layout ---- */
#sec-lane-meta .lm-tabs { margin: 0 0 8px; }
.lm-table th button.tip-t { font-weight: 600; }
/* same header style as the Meta patch table (the presence header is a server sentence with "n=") */
.lm-table th { text-transform: none; letter-spacing: 0; }
.lm-table th:has(> button.tip-t) { min-width: 92px; }   /* "Hiện diện" stays on one line */
/* the lane card shares its row with BLV: its long filter summary is cut ("…", the open box shows it
   all) so the collapse button stays on the title line */
#sec-lane-meta .card-head { flex-wrap: nowrap; }
#sec-lane-meta .card-head-text, #sec-lane-meta .collapse-btn { flex: none; }
#sec-lane-meta .head-ctrls, #sec-lane-meta .filter-box { min-width: 0; }
#sec-lane-meta .filter-box > summary { max-width: 100%; }
#sec-lane-meta .filter-sum > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Meta patch (A) ---- */
#sec-pick-perf .champ-table td, #sec-pick-perf .champ-table th { padding: 7px 10px; }
#sec-pick-perf .champ-table th { font-size: 13px; text-transform: none; letter-spacing: 0; }
#pp-notes:empty { display: none; }

/* ---- QA fixes (V.T5, prod data 25/10) ---- */
/* `hidden` must win over the display these blocks set: the loading banner, the live box's empty zone
   pill and its live dot stayed on screen after load (the same on the old page); so did an empty
   tournament filter and the Meta patch controls (test §11 (d) sweeps every element the page hides) */
.banner[hidden], .verdict .zone-tag[hidden], .updated[hidden],
.tour-filter[hidden], .champ-controls[hidden] { display: none; }
/* narrow screens: a duo table (and the folded order-book block) scrolls inside its own box instead of
   widening the page */
#q-zones, #q-per-game, #q-per-game-ticks { overflow-x: auto; }
/* BLV's analysis (long text + wide tables) takes the whole row, ABOVE the lane card (its top edge stays
   where the reader is); the empty form stays beside the lane card. caster.css lays the result out as a
   one-track grid: the track must be allowed to shrink, or a wide table pushes the text past the card */
.duo-row.ld:has(#bl-out .bl-result) { grid-template-columns: minmax(0, 1fr); }
.duo-row.ld:has(#bl-out .bl-result) > #sec-caster { order: -1; }
#sec-caster .bl-result, #sec-caster #bl-sections { grid-template-columns: minmax(0, 1fr); }
/* BLV card is switched off (So kèo round 1, D9): the lane card takes the whole row */
.duo-row.ld:has(#sec-caster[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* h2h-ingame (spec D9): the head-to-head copies of the two in-game blocks reuse .tick-wrap / .obj-wrap /
   .pair; only their own note lines and the tick pair's scroll box are new (kept ABOVE the objective-zone
   section: test_objective_zone_ui.js reads that section to the end of the file) */
#q-per-game-ticks-h2h { overflow-x: auto; }
.h2h-note { margin: 10px 0 0; }

/* ============ objective-zone block: "Sau khi ăn Baron / Rồng — giá 45 giây sau" (spec objective-zone) ============
   Scope: #pg-objzone / .obj-*. Tokens only; both tables scroll inside .obj-scroll (no page-wide horizontal scroll at 375 px). */
.obj-wrap .obj-kinds, .obj-wrap .obj-zones { margin-top: 12px; }
.obj-wrap .obj-zones { margin-top: 0; }
.obj-h { margin: 14px 0 6px; font-size: 14px; font-weight: 600; }
.obj-h .muted { font-weight: 400; }
.obj-scroll { overflow-x: auto; max-width: 100%; }
.obj-table { width: 100%; font-size: 14px; border-collapse: collapse; }
.obj-table th { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap; text-align: left; }
.obj-table th .team-logo { width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; }
.obj-table td { padding: 7px 8px; vertical-align: top; border-bottom: 1px solid var(--border-hairline); }
.obj-table td.obj-zone-td, .obj-table td.obj-zone-td-static { width: 84px; white-space: nowrap; }
.obj-table td.obj-zone-td { cursor: pointer; }
.obj-table td.obj-zone-td:focus-visible, .obj-table td.obj-team.clickable:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.obj-table td.obj-team { min-width: 150px; }
.obj-table td.obj-team.clickable { cursor: pointer; }
.obj-table td.obj-team.clickable:hover .sc-pct { color: var(--series-1); }
.obj-table td.obj-team-note { vertical-align: middle; color: var(--text-muted); font-size: 13px; }
.obj-table td.obj-world { white-space: nowrap; color: var(--text-secondary); }
.obj-table tr.obj-sel .obj-zone-td b { color: var(--series-1); }
.obj-range { display: block; font-size: 12px; }
.obj-entry { white-space: nowrap; }
.obj-err { color: var(--warning); font-size: 13px; }
.obj-share-v { font-weight: 600; }
.obj-reasons, .obj-foot p { margin: 6px 0 0; }
.obj-foot { margin-top: 10px; }
.obj-reload { margin: 10px 0 0; }
.dd-extra { margin-top: 2px; font-size: 12px; }