/* THANTAI88 brand system: vermilion, deep red, fortune gold, warm ivory. */
:root {
  --tt-red: #9a0909;
  --tt-red-deep: #620000;
  --tt-red-rich: #b51d16;
  --tt-gold: #f7cf70;
  --tt-gold-bright: #ffd97f;
  --tt-gold-deep: #b98225;
  --tt-ivory: #fff8e9;
  --tt-cream: #f5ead7;
  --tt-ink: #432218;
  --tt-muted: #775040;
  --primary-blue: var(--tt-red) !important;
  --secondary-blue: #7e180e !important;
  --accent-red: var(--tt-gold-deep) !important;
  --gold: var(--tt-gold) !important;
  --bg-light: var(--tt-cream) !important;
  --card-bg: #fffdf7 !important;
  --text-dark: var(--tt-ink) !important;
  --text-muted: var(--tt-muted) !important;
  --border-color: #ead29f !important;
}

html { background: var(--tt-cream); }
body {
  background:
    radial-gradient(circle at 8% 0%, rgba(247, 207, 112, .28), transparent 31rem),
    linear-gradient(180deg, #fffaf0 0%, var(--tt-cream) 58%, #eee0cb 100%) !important;
  color: var(--tt-ink) !important;
}

::selection { background: var(--tt-red); color: #fff; }
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--tt-gold-bright) !important;
  outline-offset: 3px;
}

/* The campaign module gets a lacquer-red base; the promotion image stays untouched. */
.thantai88-campaign-hero > div {
  background: linear-gradient(122deg, var(--tt-red-deep), var(--tt-red) 48%, #7a0808) !important;
  border: 1px solid rgba(247, 207, 112, .78);
  box-shadow: 0 14px 34px rgba(92, 0, 0, .28) !important;
}
.thantai88-campaign-hero h2 { color: var(--tt-ivory) !important; }
.thantai88-campaign-hero p { color: #ffe9c4 !important; }
.thantai88-campaign-hero strong { color: var(--tt-gold-bright) !important; }
.thantai88-campaign-hero > div > a:last-child {
  background: linear-gradient(135deg, #ffe29a, var(--tt-gold-deep)) !important;
  color: #4a1608 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.65), 0 4px 12px rgba(0,0,0,.22);
}

/* Global navigation and the primary actions. */
.vsb-nav {
  background: linear-gradient(100deg, #620000, var(--tt-red) 48%, #710000) !important;
  border-bottom-color: var(--tt-gold) !important;
  box-shadow: 0 3px 12px rgba(73, 0, 0, .34);
}
.vsb-menu > li > a,
.vsb-dropdown-label,
.vsb-caret-btn { color: #fff0d2 !important; }
.vsb-menu > li > a:hover,
.vsb-menu > li > a.is-active,
.vsb-dropdown-label:hover,
.vsb-caret-btn:hover,
.vsb-has-dropdown.is-open .vsb-caret-btn { color: var(--tt-gold-bright) !important; }
.vsb-menu > li > a:hover,
.vsb-menu > li > a.is-active,
.vsb-dropdown-label:hover,
.vsb-caret-btn:hover,
.vsb-has-dropdown.is-open .vsb-caret-btn { background: rgba(255, 231, 174, .14) !important; }
.vsb-dropdown-menu { background: #700707 !important; border-color: rgba(247, 207, 112, .42) !important; }
.vsb-dropdown-menu li a { color: #fff0d2 !important; }
.vsb-dropdown-menu li a:hover { background: rgba(255, 231, 174, .12) !important; color: var(--tt-gold-bright) !important; }
.vsb-btn-primary {
  background: linear-gradient(135deg, #ffe8aa 0%, var(--tt-gold) 48%, #b97a16 100%) !important;
  color: #501705 !important;
  border: 1px solid #ffeec2;
  box-shadow: inset 0 1px rgba(255,255,255,.68), 0 4px 11px rgba(0,0,0,.24);
}
.vsb-btn-primary:hover { background: linear-gradient(135deg, #fff0bd, #e6ad42) !important; }
.vsb-btn-outline { border-color: var(--tt-gold) !important; color: var(--tt-gold-bright) !important; }
.vsb-btn-outline:hover { background: rgba(247, 207, 112, .16) !important; }

/* Article pages: turns the old blue editorial treatment into a brand editorial treatment. */
.header-hero {
  background: linear-gradient(125deg, #620000 0%, var(--tt-red) 56%, #7b0c08 100%) !important;
  border-bottom-color: var(--tt-gold) !important;
  box-shadow: inset 0 -1px rgba(255, 231, 174, .34);
}
.header-hero p,
.breadcrumb-nav,
.breadcrumb-nav a { color: #ffe8bf !important; }
.main-article,
.faq-block,
.blog-section,
.blog-card,
.toc-box {
  background: rgba(255, 253, 247, .97) !important;
  border-color: #ead29f !important;
  box-shadow: 0 8px 25px rgba(98, 0, 0, .08) !important;
}
.toc-box { border-left-color: var(--tt-gold-deep) !important; }
.toc-title,
.section-title,
.sub-title,
.faq-block h2 { color: var(--tt-red) !important; }
.section-title { border-bottom-color: var(--tt-gold-deep) !important; }
.section-title::after,
.vsb-mf-heading::after {
  content: "";
  display: block;
  width: 38%;
  height: 2px;
  margin-top: 7px;
  background: linear-gradient(90deg, var(--tt-gold), transparent);
}
.toc-box a,
.main-article a:not(.vsb-shine-btn),
.blog-card a { color: #8e1710 !important; }
.toc-box a:hover,
.main-article a:not(.vsb-shine-btn):hover,
.blog-card a:hover { color: var(--tt-gold-deep) !important; }
.main-article p,
.faq-card p,
.blog-card p { color: var(--tt-ink) !important; }
.highlight-box {
  background: #fff5df !important;
  border-left-color: var(--tt-red) !important;
}
.faq-card h3 { color: var(--tt-red) !important; }
.content-media img { border-color: #e7c981 !important; }

/* Use a single red-and-gold treatment for cards, controls, and live fixtures. */
.vsb-mfooter {
  background: linear-gradient(135deg, #420000 0%, #760707 58%, #4b0000 100%) !important;
  border-top: 3px solid var(--tt-gold);
}
.vsb-mf-heading { color: var(--tt-gold-bright) !important; }
.vsb-mf-heading::before { background: rgba(247, 207, 112, .36) !important; }
.vsb-mf-list a,
.vsb-mf-info a { color: #ffe1a0 !important; }
.vsb-mf-social a { border-color: rgba(247, 207, 112, .72) !important; color: #fff0d2 !important; }
.vsb-mf-social a:hover { border-color: #fff2c1 !important; color: var(--tt-gold-bright) !important; }
.vsb-mf-bottom { border-top-color: rgba(247, 207, 112, .28) !important; color: #f0c77d !important; }

#live_list { background: #4a0706 !important; }
#live_list .item {
  background: linear-gradient(110deg, rgba(95, 0, 0, .86), rgba(149, 9, 9, .52)), url(../wp-content/plugins/live-vsbet/assets/bg-match.webp) center / cover !important;
  border: 1px solid rgba(247, 207, 112, .32);
  color: #fff0d2 !important;
}
#live_list a,
#live_list .home,
#live_list .away { color: #fff5e3 !important; }
#live_list .competition,
.lineup-wrapper h3,
.player .number { background: #5d0000 !important; }
#live_list .live { background: var(--tt-red-rich) !important; }
#live_list .notStart { color: var(--tt-gold-bright) !important; }
#live_list .streamer .info,
#live_list .watch,
.streamer_list a {
  background: linear-gradient(135deg, #b67818, var(--tt-gold-deep)) !important;
  color: #4a1608 !important;
}
#day_filter div,
#sport_filter div { background: #790909 !important; border: 1px solid rgba(247, 207, 112, .25) !important; }
#day_filter div.active,
#sport_filter div:hover,
#sport_filter div.active { background: linear-gradient(135deg, #9a0909, #620000) !important; color: var(--tt-gold-bright) !important; }

/* The standalone navigation stays coherent at the mobile breakpoint. */
@media (max-width: 900px) {
  .vsb-menu { background: #6f0606 !important; border-bottom-color: var(--tt-gold) !important; }
  .vsb-dropdown-menu { background: #500000 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vsb-shine-btn::after { animation: none !important; }
}