:root {
  --bg: #fbfbf9;
  --surface: #fcfcfb;
  --text: #1c1917;
  --text-muted: #666e7d;
  --border: #e2e5ea;
  --accent: #2f6fed;
  --accent-weak: #eaf1ff;
  --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);
  --radius: 20px;
  /* 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;
  --control-radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #171a21;
    --text: #eef0f4;
    --text-muted: #97a0b3;
    --border: #2a2e38;
    --accent: #5b8def;
    --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(--text) and
   follows light/dark without shipping two files. */
.topnav-logo {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--text);
  -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");
  transform: rotate(45deg);
}

/* Full link row on desktop; the hamburger takes over only once the row
   would no longer fit. Both markups exist in the HTML and swap at NAV_BP. */
.nav-inline {
  display: none;
  align-items: center;
  gap: 2px;
}

.nav-inline a {
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.nav-inline a:hover {
  background: var(--accent-weak);
  color: var(--accent);
}

.nav-inline a.active {
  background: var(--accent-weak);
  color: var(--accent);
}

.nav-inline .nav-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 6px;
}

/* The nav is three short links (~246px with the logo), so it fits inline on
   any normal phone; the hamburger is only a fallback for very narrow
   screens. Raise this again if links are ever added back. */
@media (min-width: 360px) {
  .nav-inline { display: flex; }
  .menu { display: none; }
}

.menu {
  position: relative;
}

.menu-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  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: 10px;
  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: 6px;
  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;
}

.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);
  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: 999px;
  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: 50%;
  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(--control-radius);
  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: 9px;
  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: #fff;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 700;
  padding: var(--control-pad-y) var(--control-pad-x);
  border-radius: var(--control-radius);
}

.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: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: var(--control-pad-y) var(--control-pad-x);
  border-radius: var(--control-radius);
  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: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 10px 20px;
  border-radius: 12px;
  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: 6px;
  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: 999px;
  cursor: pointer;
}

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

.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: 6px;
  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: 4px;
  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: 4px 4px 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);
  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: 10px;
  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: 8px;
  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: 999px;
  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: 4px;
  overflow: hidden;
}

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

.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(--control-radius);
  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(--control-radius);
  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(--control-radius);
  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. */
.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;
}

.footer-version {
  margin-top: 6px !important;
  font-size: 11.5px !important;
  color: var(--text-muted);
  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;
}