:root {
  /* Corner radius, Fibonacci, same scale as spacing so that
     inner = outer - padding lands on another step.
     See branding/tokens.css. */
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 13px;
  --radius-lg: 21px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --bg: #fbfbf9;
  --surface: #fcfcfb;
  --text: #1c1917;
  /* Màu của mark D4T0 — token riêng, KHÔNG dùng --text (21/08/2026). Xem
     branding/tokens.css. */
  --logo-color: #293133;
  --text-muted: #6f6b64;
  --border: #dfdbd3;
  --accent: #286aec;
  --accent-weak: #f7faff;
  /* Label on an accent FILL (primary button, active pill). Its own token since
     22/08/2026: this project hardcoded #fff, which is 3.23:1 on the lightened
     dark-mode accent -- below AA. See branding/tokens.css. */
  --on-accent: #ffffff;
  --accent-strong: #1d4ed8;
  --hot: #d64545;
  --hot-weak: #fdeaea;
  --warn-bg: #fff8e6;
  --warn-text: #8a5a00;
  --warn-border: #f3dd9e;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  /* One scale for every card/button/gap so sections can't drift apart. */
  --card-pad: 22px;
  --card-gap: 14px;
  --section-gap: 40px;
  --control-pad-y: 11px;
  --control-pad-x: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #171a21;
    --text: #eef0f4;
    --logo-color: #eef0f4;
    --text-muted: #a2a3a8;
    --border: #34363c;
    --accent: #5b8def;
    --on-accent: #0f1115;   /* the page ground, not white: white is 3.23:1 here */
    --accent-weak: #1b2740;
    --accent-strong: #7ea6f5;
    --hot: #f0716a;
    --hot-weak: #331616;
    --warn-bg: #2a2210;
    --warn-text: #e8c260;
    --warn-border: #4a3d17;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Deliberately narrower than the content would allow: a shorter line length
   keeps the eye centred instead of sweeping across a wide table of digits. */
.page {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
}

.topnav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

/* The mark is a masked shape, not an <img>, so it takes var(--logo-color) and
   follows light/dark without shipping two files.
   36×36 is the repo-wide size (branding/chrome.css, 22/08/2026). */
.topnav-logo {
  display: block;
  width: 36px;
  height: 36px;
  background-color: var(--logo-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("/logo.svg");
  mask-image: url("/logo.svg");
  /* Không xoay ở đây: logo.svg sinh ra đã xoay 45° sẵn
     (branding/build-icons.py, LOGO_ROTATE). Xoay thêm lần nữa là ra 90°. */
}

/* One nav, two shapes. This used to be two parallel markups -- a `.nav-inline`
   row plus a `.menu` dropdown, both present in every page's HTML, swapping at
   360px -- which meant every nav change had to be made twice in four files, and
   a 360px breakpoint that put the "desktop" row on essentially every phone.
   Replaced 22/08/2026 by the repo-wide pattern (branding/chrome.css): one
   `.menu-panel`, restyled by CSS at 720px. */
.menu {
  position: relative;
}

/* No border, no fill (22/08/2026, repo-wide — branding/chrome.css). */
.menu-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.menu-btn span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 16px;
  height: 1.5px;
  margin: -0.75px 0 0 -8px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.25s ease;
}

.menu-btn span:nth-child(1) { transform: translateY(-4px); }
.menu-btn span:nth-child(2) { transform: translateY(3px); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

.menu-panel {
  position: absolute;
  top: 44px;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  z-index: 20;
}

.menu-panel[hidden] { display: none; }

.menu-panel a {
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.menu-panel a:hover,
.menu-panel a.active {
  background: var(--accent-weak);
  color: var(--accent);
}

.menu-panel-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

/* Desktop: no hamburger, links laid out in a row (branding/chrome.css, 720px).
   CSS only — the button and panel keep their ids, so menu.js is untouched and
   still drives the dropdown below the breakpoint.

   Both `.menu-panel` and `.menu-panel[hidden]` have to be overridden: [hidden]
   is a UA default that a bare class rule loses to, and the failure mode is a
   nav that looks empty rather than an error. */
@media (min-width: 720px) {
  .menu-btn {
    display: none;
  }

  .menu-panel,
  .menu-panel[hidden] {
    display: flex;
  }

  .menu-panel {
    position: static;
    flex-direction: row;
    align-items: center;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }

  .menu-panel a {
    padding: 8px 10px;
  }

  .menu-panel-divider {
    width: 1px;
    height: 14px;
    margin: 0 4px;
  }
}

.hero {
  text-align: center;
  margin: 12px 0 28px;
}

.hero h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.subtitle {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.subtitle strong { color: var(--text); }

.section { margin: 0 0 var(--section-gap); }

.section h2,
.sec > summary h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.section h3,
.sub > summary h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
}

/* Stacking gap for cards that follow one another in normal flow. Inside a
   grid the siblings sit side by side, where the same margin would offset
   every card after the first and break the row's alignment. */
.card + .card { margin-top: var(--card-gap); }
.suggest-grid > .card + .card { margin-top: 0; }

/* ---- collapsible sections ----
   Native details/summary: open by default, keyboard-accessible for free,
   and no JS needed to keep the chevron in sync with the open state. */
.sec { margin: 0 0 var(--section-gap); }
.sub { margin: 26px 0 0; }

.sec > summary,
.sub > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  margin-bottom: var(--card-gap);
}

.sec > summary::-webkit-details-marker,
.sub > summary::-webkit-details-marker { display: none; }

.summary-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sec > summary:hover .chevron,
.sub > summary:hover .chevron { background-color: var(--accent); }

/* Heroicons chevron as a mask (the repo's icon convention), so it picks up
   theme colour from background-color. The earlier hand-rolled version was
   two rotated bars, which left a notch where they met at the apex. */
.chevron {
  flex: none;
  width: 20px;
  height: 20px;
  background-color: var(--text-muted);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  transition: background-color 0.15s ease;
}

details[open] > summary .chevron {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 15.75 7.5-7.5 7.5 7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 15.75 7.5-7.5 7.5 7.5'/%3E%3C/svg%3E");
}

/* ---- countdown ---- */

.latest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--card-gap);
}

.countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  box-shadow: var(--shadow);
}

.countdown-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.countdown-time {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.countdown.is-live .countdown-time { color: var(--hot); }

/* Live pill: a slow pulse while the draw is running, so the state reads at a
   glance without shouting. */
.countdown.is-live {
  border-color: var(--hot);
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: var(--shadow), 0 0 0 0 rgba(214, 69, 69, 0.32); }
  50%      { box-shadow: var(--shadow), 0 0 0 7px rgba(214, 69, 69, 0); }
}

.countdown.is-live .countdown-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: var(--radius-circle);
  background: var(--hot);
  vertical-align: middle;
}

/* ---- new-result reveal ---- */

/* Digits are mid-roll: dimmed and slightly compressed so the settle reads as
   a snap into place. */
.rolling {
  color: var(--text-muted) !important;
  opacity: 0.65;
}

.settled { animation: settle 0.42s cubic-bezier(0.22, 1.2, 0.36, 1); }

@keyframes settle {
  0%   { transform: translateY(-3px) scale(1.14); }
  60%  { transform: translateY(0) scale(0.97); }
  100% { transform: translateY(0) scale(1); }
}

.db-badge.settled { animation-duration: 0.55s; }

/* A brief wash over the card the moment a new draw lands. */
.just-landed { animation: landed 2.4s ease-out; }

@keyframes landed {
  0%   { background: var(--accent-weak); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .countdown.is-live,
  .settled,
  .just-landed { animation: none; }
}

/* ---- calendar ---- */

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: var(--card-gap);
}

button.cal-cell {
  font-family: inherit;
  cursor: pointer;
}

button.cal-cell:hover {
  border-color: var(--accent);
}

.cal-title {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cal-nav {
  display: flex;
  gap: 6px;
}

/* Shared square icon button -- calendar month nav and the result panel's
   day stepper, so the two sit on the same control scale. */
.icon-btn {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
}

.icon-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.cal-dow {
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: 4px;
}

.cal-cell {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--bg);
  padding: 2px;
}

.cal-cell.empty {
  border: none;
  background: transparent;
}

.cal-cell.has-draw {
  background: var(--surface);
  border-color: var(--border);
}

.cal-day {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1;
}

.cal-db {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cal-cell.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent);
}

.cal-note {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 14px 0 0;
}

/* ---- paid archive ---- */

.cal-cell.locked {
  background: repeating-linear-gradient(
    45deg,
    var(--bg),
    var(--bg) 4px,
    var(--border) 4px,
    var(--border) 5px
  );
  border-style: dashed;
  opacity: 0.7;
}

.cal-cell.locked .cal-day { opacity: 0.6; }

.cal-lock {
  width: 11px;
  height: 11px;
  background-color: var(--text-muted);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.gate {
  text-align: center;
  padding: 26px 20px 22px;
}

.gate-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}

.gate-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 auto 18px;
  max-width: 420px;
}

.gate-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 700;
  padding: var(--control-pad-y) var(--control-pad-x);
  border-radius: var(--radius-sm);
}

.gate-cta:hover { background: var(--accent-strong); }

/* ---- contact page ---- */

.prose p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 14px;
}

.prose p:last-child { margin-bottom: 0; }

.prose ul {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

.prose li { margin-bottom: 6px; }

.prose a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.prose a:hover { text-decoration: underline; }

/* Scoped under .prose so it outranks `.prose a`, which would otherwise
   repaint the label accent-blue on an accent-blue button. */
.prose a.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: var(--control-pad-y) var(--control-pad-x);
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

.prose a.contact-cta:hover {
  background: var(--accent-strong);
  text-decoration: none;
}

/* ---- latest draw ---- */

.latest-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.latest-date {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 600;
}

.db-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.prize-grid {
  display: grid;
  grid-template-columns: 52px 1fr;
  row-gap: 10px;
  column-gap: 12px;
  font-size: 14px;
}

.prize-label {
  font-weight: 700;
  color: var(--text-muted);
  align-self: start;
  padding-top: 3px;
}

.prize-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prize-nums span {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---- recent table ---- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  text-align: left;
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

tr:last-child td { border-bottom: none; }

.table-scroll { overflow-x: auto; }

.mono-strong { font-weight: 700; }

/* ---- range tabs ---- */

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tab-btn {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.range-meta {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 14px;
}

/* ---- heatmap ---- */

/* minmax(0, 1fr), not 1fr: a bare 1fr carries an implicit `auto` minimum, so
   every track was floored at the cell's min-content (~27px at the full type
   size). Ten of those plus the gaps overflowed the card and pushed the whole
   page into horizontal scroll below ~360px. */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
}

.heatmap-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  cursor: default;
  border: 1px solid var(--border);
}

.heatmap-cell .n { font-size: 12.5px; }
.heatmap-cell .c { font-size: 9px; font-weight: 600; opacity: 0.75; }

/* Below 360px a cell is only ~20px wide -- not enough for the number and the
   count stacked, and all-time counts are 4 digits ("2348"), which spill over
   into the neighbouring cells. Drop the count at that size: the cell's colour
   still encodes it and every cell keeps its title tooltip ("00: 2330"), so no
   figure becomes unreachable. Written as max-width so nothing at 360px and up
   changes. */
@media (max-width: 359px) {
  .heatmap-cell .n { font-size: 11px; }
  .heatmap-cell .c { display: none; }
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.legend-scale {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-xs);
  background: linear-gradient(to right, var(--surface), var(--accent));
  border: 1px solid var(--border);
}

/* ---- dau/duoi bars ---- */

.digit-bars {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  align-items: end;
  height: 110px;
  margin-bottom: 6px;
}

/* Tổng ĐB runs 0-18, so it needs 19 columns rather than the digit charts' 10. */
.digit-bars.wide {
  grid-template-columns: repeat(19, 1fr);
  gap: 3px;
}

.digit-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.digit-bar {
  width: 100%;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: var(--accent);
  min-height: 2px;
}

.digit-bar-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 600;
}

.dau-duoi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 560px) {
  .dau-duoi-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- suggestions ---- */

.disclaimer {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.disclaimer strong { color: var(--warn-text); }

.suggest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 700px) {
  .suggest-grid { grid-template-columns: repeat(3, 1fr); }
}

.suggest-card {
  display: flex;
  flex-direction: column;
}

.suggest-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}

.suggest-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 14px;
}

/* Fixed 3-up grid rather than flex-wrap: the meta lines differ in width
   between cards ("15 kỳ chưa về" vs "15 lần"), so wrapping gave one card
   two-per-row and the others three, and the trio never lined up. */
.num-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: auto;
}

.num-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--accent-weak);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 6px;
  min-width: 0;
}

.num-chip-n {
  font-size: 19px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.num-chip-meta {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}

.suggest-note {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 14px 0 0;
}

/* ---- soi cầu ---- */

.cau-card { margin-bottom: 14px; }

.cau-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}

.cau-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 14px;
}

.num-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.num-pill {
  background: var(--accent-weak);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.cau-sub {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}

.cau-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 14px;
}

@media (min-width: 560px) {
  .cau-split { grid-template-columns: 1fr 1fr; }
}

.verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.verdict-badge {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.verdict-text {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* gan backtest table: the bar makes "these are all the same" visible at a
   glance, which a column of numbers alone does not. The bar sits inside a
   fixed-width track so its percentage width can't push the value label into
   the next column. */
.rate-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
}

.rate-track {
  flex: 1 1 auto;
  min-width: 60px;
  height: 18px;
  background: var(--bg);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.rate-bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-xs);
}

.rate-value {
  flex: none;
  width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.wd-cell {
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 7px 4px;
}

#weekday-table th { text-align: center; }
#weekday-table td:first-child { text-align: left; }

/* ---- distribution histogram ---- */

.dist-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
}

.dist-bar-wrap {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.dist-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--border);
}

.dist-bar.in-band { background: var(--accent); }

.dist-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
}

.dist-axis-mid { font-weight: 600; }

.chart-note {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 14px 0 0;
}

/* ---- per-number trend ---- */

.trend-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.trend-controls label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

select {
  font-size: 15px;
  font-family: inherit;
  padding: var(--control-pad-y) 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

select:focus {
  outline: none;
  border-color: var(--accent);
}

/* No padding here: bar heights and the reference line's `bottom` are both
   percentages of this box, so any padding would measure them from different
   baselines and float the line off the bars. Year labels hang below via
   negative offset instead, with margin reserving the room. */
.trend-plot {
  position: relative;
  height: 140px;
  margin-bottom: 20px;
}

.trend-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
}

.trend-bar-wrap {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.trend-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}

.trend-bar-label {
  position: absolute;
  bottom: -16px;
  font-size: 9.5px;
  color: var(--text-muted);
}

.trend-expected {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1.5px dashed var(--text-muted);
  pointer-events: none;
}

/* ---- result panel toolbar ---- */

.result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.result-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.result-date {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 178px;
  text-align: center;
}

.result-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-ghost {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.btn-ghost:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-ghost:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

input[type="date"] {
  font-size: 14px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
}

input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

.status {
  color: var(--text-muted);
  font-size: 14px;
  margin: 10px 0 0;
}

.status.error { color: var(--hot); }
.status[hidden] { display: none; }

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

/* Normal flow, not fixed to the viewport -- the shared convention across
   every project in this repo now (see root CLAUDE.md). margin-top:auto
   still parks it at the bottom of a short page, since .page is a
   full-height flex column. */
/* Centred (22/08/2026, repo-wide — branding/chrome.css). */
.footer {
  margin-top: auto;
  padding: 28px 20px 24px;
  background: var(--bg);
  text-align: center;
}

.footer p {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}

.footer-credit {
  font-size: 13.5px !important;
  color: var(--text) !important;
}

/* The version is part of the one footer line now, not a second paragraph under
   it (22/08/2026). CLAUDE.md §Footer has always asked for a single line
   `© 2026 Đạt Trần · v<version>`; this project rendered two, which was easy to
   miss while the footer was left-aligned and obvious once it was centred.
   `.footer-version` as a block rule is gone; the id keeps its own tiny styling
   so the digits still sit on tabular figures. */
#site-version {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.footer a {
  color: var(--accent);
  text-decoration: none;
}

.footer a:hover { text-decoration: underline; }

.skeleton {
  color: var(--text-muted);
  font-size: 14px;
  padding: 8px 0;
}