:root {
  /* Surfaces & Paper (Dark L 10% - 22%) */
  --color-paper:          oklch(10% 0.012 45);  /* Nền trang chính */
  --color-paper-2:        oklch(14% 0.016 45);  /* Card cấp 1, dải phụ */
  --color-paper-3:        oklch(18% 0.020 45);  /* Card nổi bật, dropdown */
  --color-paper-elevated: oklch(22% 0.024 45);  /* Dialog, header sticky */

  /* Borders & Dividers */
  --color-rule:           oklch(26% 0.030 45);  /* Đường viền khung, divider */
  --color-rule-subtle:    oklch(18% 0.018 45);  /* Viền ngăn cách nhẹ */

  /* Typography / Inks (Contrast >= 4.5:1) */
  --color-ink:            oklch(95% 0.012 45);  /* Body chính, Contrast 12.8:1 vs Paper */
  --color-ink-dim:        oklch(76% 0.018 45);  /* Nhãn phụ, Contrast 6.8:1 vs Paper */
  --color-ink-muted:      oklch(56% 0.015 45);  /* Caption, icon phụ, Contrast 4.6:1 vs Paper */

  /* Anchor Hue: 45deg (Gold / Amber) */
  --color-anchor:         oklch(76% 0.160 45);  /* Vàng kim chính (nút, ticker, badge) */
  --color-anchor-hover:   oklch(82% 0.180 45);  /* Hover vàng sáng */
  --color-anchor-ink:     oklch(12% 0.020 45);  /* Chữ tối trên nền vàng kim, Contrast 7.2:1 */

  /* Secondary Hue: 10deg (Ruby / Crimson) */
  --color-secondary:      oklch(62% 0.200 10);  /* Điểm nhấn khuyến mãi đặc biệt */
  --color-secondary-ink:  oklch(96% 0.010 10);  /* Chữ sáng trên nền đỏ ruby, Contrast 5.1:1 */

  /* Functional / Status */
  --color-ok:             oklch(72% 0.160 142); /* Trạng thái online, nạp rút tức thì */
  --color-danger:         oklch(62% 0.220 25);  /* Trực tiếp, cảnh báo */
  --color-focus:          oklch(80% 0.180 45);  /* Outline focus ring 2px */

  /* Typography Stacks */
  --font-display:         "Anton", sans-serif;
  --font-body:            "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing Scale (Base 4pt) */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Elevation / Depth (Hairline depth, không shadow nhòe) */
  --shadow-subtle: 0 1px 2px oklch(0% 0 0 / 0.35);
  --shadow-card:   0 4px 12px oklch(0% 0 0 / 0.45);

  /* Motion Easings */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro:  120ms;
  --dur-short:  220ms;
  --dur-marquee: 28s;
}

/* Hallmark · macrostructure: Ticker + Promo Triad + Jackpot Band · nav: N14 · footer: Ft11 · hero: H2
   · theme: Dark Gold Portal (R1) · knobs: tiles=7, ticker=amber-marquee, dual-qr=true
   · pre-emit: P4 H5 E5 S4 R4 V5
   · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */

/* ==========================================================================
   0. RESET & BASE RULES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: clip; /* Khắc phục triệt để tràn ngang mà vẫn giữ sticky */
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}

ul {
  list-style: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Typography Headings */
.section-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.25;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ==========================================================================
   1. BUTTON SYSTEM & AFFORDANCES (Đủ 5 trạng thái tương tác)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap; /* Cấm xuống dòng nhãn nút */
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn--solid {
  background-color: var(--color-anchor);
  color: var(--color-anchor-ink);
  border-color: var(--color-anchor);
}

.btn--solid:hover {
  background-color: var(--color-anchor-hover);
  border-color: var(--color-anchor-hover);
}

.btn--solid:active {
  background-color: oklch(70% 0.15 45);
  border-color: oklch(70% 0.15 45);
}

.btn--solid:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--outline {
  background-color: transparent;
  color: var(--color-anchor);
  border-color: var(--color-anchor);
}

.btn--outline:hover {
  background-color: oklch(76% 0.16 45 / 0.12);
  color: var(--color-anchor-hover);
  border-color: var(--color-anchor-hover);
}

.btn--outline:active {
  background-color: oklch(76% 0.16 45 / 0.2);
}

.btn--outline:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--lg {
  padding: 0.85rem 1.75rem;
  font-size: 1.05rem;
}

/* ==========================================================================
   2. NAV ARCHETYPE: N14 TICKER MAST
   ========================================================================== */
.masthead-wrap {
  position: sticky;
  top: 0;
  z-index: 300; /* --z-sticky-nav */
  background-color: var(--color-paper);
}

/* 2.1 Masthead Utility Bar */
.mast-top {
  background-color: oklch(8% 0.01 45);
  border-bottom: 1px solid var(--color-rule-subtle);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

.mast-top__inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0.35rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1;
}

.mast-top__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.mast-top__link:hover {
  color: var(--color-anchor);
}

/* 2.2 Full-width Gold Ticker */
.ticker-strip {
  background-color: var(--color-anchor);
  color: var(--color-anchor-ink);
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 38px;
  border-bottom: 1px solid oklch(65% 0.15 45);
}

.ticker-strip__badge {
  flex-shrink: 0;
  background-color: var(--color-paper);
  color: var(--color-anchor);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0 var(--space-sm);
  height: 100%;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.05em;
  white-space: nowrap;
  z-index: 2;
}

.ticker-strip__viewport {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.ticker-strip__track {
  display: inline-flex;
  will-change: transform;
  animation: marquee var(--dur-marquee) linear infinite;
}

.ticker-strip__track:hover {
  animation-play-state: paused;
}

.ticker-strip__item {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  padding-left: var(--space-2xl);
  white-space: nowrap;
}

/* 2.3 Main Nav */
.nav-main {
  background-color: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
}

.nav-main__inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-main__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}

.nav-main__wordmark {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-anchor);
  letter-spacing: 0.02em;
}

.nav-main__tld {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--color-ink-dim);
}

.nav-main__menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-main__link {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-ink-dim);
  white-space: nowrap;
}

.nav-main__link:hover {
  color: var(--color-anchor);
}

.nav-main__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.nav-main__cta-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-main__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
}

.burger-bar {
  width: 100%;
  height: 2px;
  background-color: var(--color-anchor);
}

/* ==========================================================================
   3. HERO SPLIT SECTION (Copy trái / Dealer phải)
   ========================================================================== */
.hero-split {
  padding: var(--space-2xl) var(--space-md) var(--space-3xl);
  background: radial-gradient(circle at 80% 30%, oklch(18% 0.04 45) 0%, var(--color-paper) 70%);
}

.hero-split__inner {
  max-width: 1366px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--space-xl);
  align-items: center;
}

.hero-split__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--color-anchor);
  background-color: oklch(18% 0.03 45);
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  margin-bottom: var(--space-md);
}

.hero-split__headline {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
  overflow-wrap: anywhere;
  min-width: 0;
}

.hero-split__lead {
  font-size: 1.1rem;
  color: var(--color-ink-dim);
  max-width: 65ch;
  margin-bottom: var(--space-xl);
}

.hero-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.hero-split__visual {
  display: flex;
  justify-content: center;
}

.hero-split__char-box {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.hero-split__placeholder-art {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-anchor);
  letter-spacing: 0.05em;
}

/* ==========================================================================
   4. PROMO TRIAD (3 thẻ: 6% / 50฿ / VIP)
   ========================================================================== */
.promo-triad {
  max-width: 1366px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.promo-triad__header {
  margin-bottom: var(--space-lg);
}

.promo-triad__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.promo-card {
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  padding: var(--space-xl) var(--space-lg);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.promo-card--featured {
  background-color: var(--color-paper-3);
  border-color: var(--color-anchor);
  position: relative;
}

.promo-card__tag {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--color-anchor);
  margin-bottom: var(--space-xs);
}

.promo-card__figure {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4vw, 3.8rem);
  line-height: 1.05;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-xs);
}

.promo-card__title {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}

.promo-card__desc {
  font-size: 0.95rem;
  color: var(--color-ink-dim);
}

/* ==========================================================================
   5. MATCH STRIP (3 thẻ thể thao có giờ)
   ========================================================================== */
.match-strip {
  max-width: 1366px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-2xl);
}

.match-strip__header {
  margin-bottom: var(--space-md);
}

.match-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.match-card {
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  padding: var(--space-md);
}

.match-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-rule-subtle);
}

.match-card__league {
  color: var(--color-anchor);
}

.match-card__time {
  color: var(--color-danger);
}

.match-card__teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
}

.team-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.match-odds {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-anchor);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   6. JACKPOT BAND (Hero size number + Live Dealer)
   ========================================================================== */
.jackpot-band {
  background-color: var(--color-paper-2);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-2xl) var(--space-md);
  margin-bottom: var(--space-2xl);
}

.jackpot-band__inner {
  max-width: 1366px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: var(--space-xl);
  align-items: center;
}

.jackpot-band__label {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--color-anchor);
  margin-bottom: var(--space-2xs);
}

.jackpot-band__counter {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.8rem);
  line-height: 1.05;
  color: var(--color-anchor);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-xs);
  overflow-wrap: anywhere;
  min-width: 0;
}

.jackpot-band__note {
  color: var(--color-ink-dim);
  font-size: 1rem;
}

.jackpot-band__dealer {
  display: flex;
  justify-content: center;
}

.jackpot-band__avatar-placeholder {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--color-anchor);
  background-color: var(--color-paper-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: var(--color-ink-dim);
}

/* ==========================================================================
   7. PROVIDERS (5 ô) & NEW GAMES (7 ô nhỏ)
   ========================================================================== */
.providers-strip {
  max-width: 1366px;
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--space-md);
}

.providers-strip__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-md);
}

.provider-box {
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  padding: var(--space-md);
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--color-ink-dim);
  border-radius: 4px;
}

.games-grid {
  max-width: 1366px;
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--space-md);
}

.games-grid__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.link-more {
  color: var(--color-anchor);
  font-weight: 700;
  font-size: 0.9rem;
}

.games-grid__track {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-sm);
}

.game-item__thumb {
  aspect-ratio: 3 / 4;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2xs);
}

.game-item__title {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   8. EVENT BANNER & TRUST QUAD (4 cột)
   ========================================================================== */
.event-banner {
  max-width: 1366px;
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--space-md);
}

.event-banner__box {
  background: linear-gradient(90deg, var(--color-paper-3) 0%, oklch(20% 0.03 10) 100%);
  border: 1px solid var(--color-rule);
  border-left: 4px solid var(--color-anchor);
  border-radius: 6px;
  padding: var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
}

.event-banner__tag {
  font-family: var(--font-display);
  color: var(--color-secondary);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.event-banner__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: var(--space-3xs) 0;
}

.event-banner__desc {
  color: var(--color-ink-dim);
  font-size: 0.95rem;
}

.trust-strip {
  max-width: 1366px;
  margin: 0 auto var(--space-3xl);
  padding: 0 var(--space-md);
}

.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.trust-card {
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  padding: var(--space-lg) var(--space-md);
}

.trust-card__num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-anchor);
  margin-bottom: var(--space-xs);
}

.trust-card__title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: var(--space-2xs);
}

.trust-card__text {
  font-size: 0.9rem;
  color: var(--color-ink-dim);
}

/* ==========================================================================
   9. APP DOWNLOAD (QR đôi + Mockup) & PARTNERS
   ========================================================================== */
.app-download {
  background-color: var(--color-paper-2);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-2xl) var(--space-md);
  margin-bottom: var(--space-2xl);
}

.app-download__inner {
  max-width: 1366px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-xl);
  align-items: center;
}

.app-download__lead {
  font-size: 1.05rem;
  color: var(--color-ink-dim);
  margin: var(--space-md) 0 var(--space-xl);
}

.app-download__qr-group {
  display: flex;
  gap: var(--space-xl);
}

.qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.qr-item__box {
  width: 120px;
  height: 120px;
  background-color: var(--color-paper-3);
  border: 2px solid var(--color-anchor);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-anchor);
}

.qr-item__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink-dim);
  white-space: nowrap;
}

.app-download__mockup {
  display: flex;
  justify-content: center;
}

.app-download__phone-frame {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9 / 18;
  border: 3px solid var(--color-rule);
  border-radius: 24px;
  background-color: var(--color-paper-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: var(--color-ink-muted);
}

.partners-strip {
  max-width: 1366px;
  margin: 0 auto var(--space-3xl);
  padding: 0 var(--space-md);
}

.partners-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  border-top: 1px solid var(--color-rule-subtle);
  padding-top: var(--space-lg);
}

.partner-badge {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-ink-muted);
  letter-spacing: 0.08em;
}

/* ==========================================================================
   10. FOOTER ARCHETYPE: FT11 (4 cột + Social Row + Partner Strip)
   ========================================================================== */
.portal-footer {
  background-color: oklch(8% 0.01 45);
  border-top: 1px solid var(--color-rule);
  padding: var(--space-3xl) var(--space-md) var(--space-xl);
}

.portal-footer__grid {
  max-width: 1366px;
  margin: 0 auto var(--space-2xl);
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: var(--space-2xl);
}

.footer-col__brand {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-anchor);
  margin-bottom: var(--space-md);
}

.footer-col__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.footer-col__text {
  font-size: 0.9rem;
  color: var(--color-ink-dim);
  line-height: 1.65;
}

.footer-col__list li {
  margin-bottom: var(--space-xs);
}

.footer-col__list a {
  font-size: 0.9rem;
  color: var(--color-ink-dim);
  white-space: nowrap;
}

.footer-col__list a:hover {
  color: var(--color-anchor);
}

.footer-col__contact-badge {
  display: inline-block;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-anchor);
  color: var(--color-anchor);
  font-family: var(--font-display);
  font-size: 1rem;
  padding: 0.5rem 0.85rem;
  border-radius: 4px;
  margin-top: var(--space-sm);
  white-space: nowrap;
}

.portal-footer__bottom {
  max-width: 1366px;
  margin: 0 auto;
  border-top: 1px solid var(--color-rule-subtle);
  padding-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.portal-footer__social {
  display: flex;
  gap: var(--space-md);
}

.social-link {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--color-ink-dim);
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  white-space: nowrap;
}

.social-link:hover {
  border-color: var(--color-anchor);
  color: var(--color-anchor);
}

.portal-footer__copyright {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  text-align: center;
}

/* ==========================================================================
   11. KEYFRAMES & REDUCED MOTION RULES (Mục 6 yêu cầu)
   ========================================================================== */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-strip__track {
    animation: none;
  }
  .ticker-strip__viewport {
    overflow-x: auto;
  }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   12. RESPONSIVE ENGINE (Desktop 1366px & Mobile 390px - Mục 5 yêu cầu)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-split__inner,
  .jackpot-band__inner,
  .app-download__inner {
    grid-template-columns: 1fr;
  }

  .hero-split__visual,
  .jackpot-band__dealer,
  .app-download__mockup {
    order: -1;
  }

  .providers-strip__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .games-grid__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .portal-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .mast-top {
    display: none;
  }

  .nav-main__menu {
    display: none;
  }

  .nav-main__burger {
    display: flex;
  }

  .promo-triad__grid,
  .match-strip__grid,
  .trust-strip__grid {
    grid-template-columns: 1fr;
  }

  .event-banner__box {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile Viewport 390px (iPhone 12/13/14) */
@media (max-width: 480px) {
  .nav-main__wordmark {
    font-size: 1.75rem;
  }

  .nav-main__cta-group .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  .providers-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .games-grid__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-download__qr-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .portal-footer__grid {
    grid-template-columns: 1fr;
  }

  .portal-footer__social {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --- assembler additions (Claude) --- */
.game-item__thumb{overflow:hidden;position:relative}
.game-item__thumb img{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block}
.hero-split__char-box{overflow:hidden}
.hero-split__char-box img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.jackpot-band__avatar-placeholder{overflow:hidden;padding:0}
.jackpot-band__avatar-placeholder img{width:100%;height:100%;object-fit:cover;display:block}
.jackpot-band__dealer .jackpot-band__avatar-placeholder{display:none}
.jackpot-band__dealer img{width:100%;height:auto;max-width:260px;aspect-ratio:1;border-radius:50%;border:3px solid var(--color-anchor);object-fit:cover;display:block;margin:0 auto}
.provider-box{background-color:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:4px;
  display:flex;align-items:center;justify-content:center;padding:.9rem .5rem;font-family:var(--font-display);
  color:var(--color-ink-dim);font-size:.85rem;text-align:center;min-height:64px}
.article-wrap{max-width:860px;margin:0 auto;padding:var(--space-2xl) var(--space-md) var(--space-3xl)}
.article-wrap h1{font-family:var(--font-body);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.35rem);
  color:var(--color-ink);line-height:1.3;margin-bottom:var(--space-md)}
.article-wrap h2{font-family:var(--font-body);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.5rem);
  color:var(--color-anchor);margin:var(--space-xl) 0 var(--space-sm);line-height:1.35}
.article-wrap p{color:var(--color-ink-dim);margin-bottom:var(--space-md);line-height:1.75;overflow-wrap:anywhere}
.article-wrap .crumb{font-size:.82rem;color:var(--color-ink-muted);margin-bottom:var(--space-lg)}
.article-wrap .crumb a{color:var(--color-ink-muted)}
.article-wrap .crumb a:hover{color:var(--color-anchor)}
.article-wrap a{color:var(--color-anchor);text-decoration:underline;text-underline-offset:2px}
.child-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);margin:var(--space-lg) 0}
.child-cards a{display:block;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:6px;
  padding:var(--space-md);text-decoration:none;color:var(--color-ink)}
.child-cards a:hover{border-color:var(--color-anchor)}
.trust-line{font-size:.85rem;color:var(--color-ink-muted);margin-top:var(--space-xl);
  border-top:1px solid var(--color-rule-subtle);padding-top:var(--space-md)}
.trust-line a{color:var(--color-ink-dim);text-decoration:underline}
.faq-item{margin-bottom:var(--space-lg)}
.faq-item dt{font-weight:700;color:var(--color-ink);margin-bottom:.35rem}
.faq-item dd{color:var(--color-ink-dim);margin:0;line-height:1.7}
.article-media{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-sm);margin:var(--space-lg) 0}
.article-media img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:4px;border:1px solid var(--color-rule)}
.jackpot-band h2,.providers-strip h2,.trust-strip h2,.app-download__lead h2,.event-banner__desc h2{
  font-family:var(--font-body);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.5rem);
  color:var(--color-ink);margin-bottom:var(--space-sm);line-height:1.35}
.jackpot-band p,.providers-strip p,.trust-strip p,.app-download__lead p,.event-banner__desc p{
  color:var(--color-ink-dim);line-height:1.7;max-width:900px}
.providers-strip,.trust-strip{max-width:1366px;margin:0 auto var(--space-2xl);padding:0 var(--space-md)}
.qr-item__box{padding:0;overflow:hidden}
.qr-item__box img{width:100%;height:100%;object-fit:contain;background:#fff;padding:6px;border-radius:2px;display:block}
.hero-split__eyebrow{font-size:.78rem;color:var(--color-ink-muted);letter-spacing:.04em;margin-bottom:var(--space-sm)}
.promo-card__figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin-bottom:var(--space-sm);display:block}
.provider-box{flex-direction:column;gap:.4rem;padding:.6rem}
.provider-box img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:4px;display:block}
.provider-box span{font-size:.72rem}
.partner-badge__img{width:64px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:4px;display:block}
.event-banner__box{display:flex;gap:var(--space-lg);align-items:center;flex-wrap:wrap}
.event-banner__media img{width:120px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.trust-card svg{color:var(--color-anchor);margin-bottom:var(--space-xs)}
@media (max-width:768px){
  .nav-main__inner{flex-wrap:wrap;row-gap:.5rem}
  .nav-main__menu{display:flex !important;flex-wrap:wrap;gap:.3rem .6rem;font-size:.72rem;
    width:100%;order:3;min-width:0}
  .nav-main__menu li{min-width:0}
  .nav-main__link{white-space:normal;overflow-wrap:anywhere}
  .nav-main__cta-group{order:2;margin-left:auto}
  .child-cards{grid-template-columns:1fr}
  .article-media{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* CTA aff header FIX (SOP5, agy 3.8-high) */
/* thu hep tu ".btn" global (agy de xuat) ve dung nut aff trong header:
   .btn global se doi MOI nut tren site, rui ro vo layout khac. */
header a.btn[href*="trochoihay.link"],
.nav-main a.btn[href*="trochoihay.link"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
}