:root,
.palette-vn-lac-hong {
  --brand-bg: #0d0352;
  --brand-deep: #08022f;
  --brand-panel: #12075f;
  --brand-panel-2: #1a1266;
  --brand-panel-3: #211873;
  --brand-text: #f4f2ff;
  --brand-muted: #cbc8e8;
  --brand-accent: #fff77d;
  --brand-accent-2: #e9c650;
  --brand-link: #71b7ff;
  --brand-line: rgba(255, 247, 125, .18);
  --brand-soft-line: rgba(215, 211, 241, .12);
  --brand-shadow: 0 18px 48px rgba(3, 1, 24, .28);
  --bs-body-bg: var(--brand-bg);
  --bs-body-color: var(--brand-text);
  --bs-primary: var(--brand-accent);
  --bs-border-color: var(--brand-soft-line);
}

html { scroll-padding-top: 90px; overflow-x: hidden; }
body {
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 8%, rgba(93, 65, 177, .22), transparent 28rem),
    linear-gradient(180deg, #10065d 0%, var(--brand-bg) 38%, var(--brand-deep) 100%);
  color: var(--brand-text);
  font-family: "PingFang SC", "Noto Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 60%);
}

a { color: var(--brand-link); }
a:hover { color: #a8d4ff; }
p, li, td, th, .article-copy { color: var(--brand-muted); }
h1, h2, h3, h4, h5, h6, .fw-black, .hero-minimal-title {
  color: var(--brand-accent) !important;
  font-weight: 800;
  letter-spacing: -.025em;
}
h1 { font-size: clamp(2.15rem, 4.6vw, 4rem); line-height: 1.04; }
h2 { font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.16; }
h3 { font-size: clamp(1.15rem, 2vw, 1.42rem); line-height: 1.28; }

.container-xl { max-width: 1180px; }
.main { min-height: 58vh; overflow: hidden; }
.main *, .portal-nav * { min-width: 0; }
.main img { max-width: 100%; }
.main .lobby-tile-img,
.main .lobby-mosaic-tile img,
.main .lobby-carousel-card img,
.main .showcase-billboard-img,
.main .spotlight-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main h1, .main h2, .main h3, .main h4, .display-5, .breadcrumb-item { overflow-wrap: anywhere; word-break: normal; }
.main > .section { isolation: isolate; }
.main > .section + .section { border-top: 1px solid var(--brand-soft-line); }

.portal-nav {
  min-height: 76px;
  padding: .55rem 0;
  background: rgba(8, 2, 47, .92) !important;
  border-bottom: 1px solid var(--brand-line) !important;
  box-shadow: 0 10px 30px rgba(3, 1, 26, .32) !important;
  backdrop-filter: blur(16px);
}
.navbar-brand { min-width: 150px; }
.ju88-wordmark {
  display: inline-flex;
  align-items: center;
  gap: .36rem;
  color: #f5cd54;
  font-size: 1.72rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow: 0 2px 14px rgba(245,205,84,.18);
}
.ju88-wordmark::before { content: "♛"; color: var(--brand-accent); font-size: .86em; transform: translateY(-1px); }
.navbar-brand img {
  width: 142px !important;
  height: 46px !important;
  max-width: 142px !important;
  object-fit: contain;
  object-position: left center;
}
.navbar-nav { align-items: center; gap: .12rem; }
.nav-link {
  padding: .56rem .78rem !important;
  border: 1px solid transparent;
  color: #e6e3f8 !important;
  font-size: .86rem !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.nav-link:hover,
.nav-link.active {
  color: var(--brand-accent) !important;
  background: rgba(255, 247, 125, .09) !important;
  border-color: var(--brand-line);
}
.navbar-toggler {
  width: 44px;
  height: 42px;
  padding: 6px;
  border: 1px solid var(--brand-line) !important;
  border-radius: 10px;
  box-shadow: none !important;
}
.navbar-toggler-icon {
  position: relative;
  background-image: none !important;
  background: linear-gradient(var(--brand-accent), var(--brand-accent)) center / 22px 2px no-repeat !important;
  filter: none;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-accent);
  transform: translateX(-50%);
}
.navbar-toggler-icon::before { top: 7px; }
.navbar-toggler-icon::after { bottom: 7px; }
.breadcrumb { flex-wrap: wrap; row-gap: .3rem; }
.breadcrumb-item { overflow-wrap: anywhere; }
.breadcrumb-item.active { color: #c8c5e4 !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #8e89ba !important; }
.text-warning-emphasis { color: #e9c650 !important; }

.hero,
.inner-hero,
.hero-minimal-text {
  position: relative;
  background:
    radial-gradient(circle at 70% 20%, rgba(101, 72, 190, .24), transparent 35%),
    linear-gradient(135deg, #120762, var(--brand-bg) 58%, #090331) !important;
  border-bottom: 1px solid var(--brand-line) !important;
}
.hero::after,
.inner-hero::after,
.hero-minimal-text::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,247,125,.7), transparent);
}
.inner-hero { min-height: 430px; }
.inner-hero .container-xl { position: relative; z-index: 1; }
.hero-lede,
.hero .lead,
.section-lede { color: #d8d6ee !important; }
.hero-title-accent {
  background: linear-gradient(180deg, #fffbd0 0%, var(--brand-accent) 58%, var(--brand-accent-2) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.section-kicker {
  display: inline-flex !important;
  align-items: center;
  gap: .45rem;
  padding: .28rem .7rem !important;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: rgba(255, 247, 125, .07) !important;
  color: var(--brand-accent) !important;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.btn,
.btn-primary,
body.style-ju88 .btn,
body.style-ju88 .btn-primary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-primary,
body.style-ju88 .btn-primary {
  color: #211553 !important;
  background: linear-gradient(180deg, #fff78b, #e8c34d) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  box-shadow: 0 8px 22px rgba(229, 191, 67, .16) !important;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-outline-light {
  color: var(--brand-accent) !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,247,125,.56) !important;
}
.btn-outline-light:hover { color: #211553 !important; background: var(--brand-accent) !important; }

.brand-card,
.article-card,
.spotlight-card,
.eeat-card,
.support-card,
.phone-showcase,
.phone-showcase-flat,
.calculator-card,
.bonus-note,
.portal-table-wrap,
.portal-map,
.team-quote,
.comparison-card,
.provider-strip,
.alt-stripe,
.support-banner,
.comparison-cols,
.accordion-item {
  background: linear-gradient(145deg, rgba(35, 25, 116, .92), rgba(18, 8, 87, .96)) !important;
  border: 1px solid var(--brand-soft-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--brand-shadow) !important;
}
body.style-ju88 .card,
body.style-ju88 .brand-card,
body.style-ju88 .article-card,
body.style-ju88 .spotlight-card,
body.style-ju88 .eeat-card {
  border: 1px solid var(--brand-soft-line) !important;
  box-shadow: var(--brand-shadow) !important;
}
.brand-card,
.spotlight-card,
.eeat-card,
.support-card { overflow: hidden; }
.brand-card:hover,
.spotlight-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,247,125,.34) !important;
  box-shadow: 0 22px 54px rgba(3,1,25,.42) !important;
}
.inner-hero-visual,
.showcase-billboard-frame,
.hero-carousel-wrap {
  overflow: hidden;
  border: 1px solid rgba(255,247,125,.23) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 65px rgba(2,1,21,.38) !important;
}
.inner-hero-img { height: 340px; }
.spotlight-tiles-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.spotlight-tile,
.lobby-tile,
.lobby-mosaic-tile,
.lobby-carousel-card { border-color: var(--brand-soft-line) !important; border-radius: 14px !important; overflow: hidden; }
.lobby-tile-overlay,
.spotlight-tile-overlay { padding: .85rem !important; }
.badge { border-width: 1px !important; box-shadow: none !important; }
.badge.text-bg-primary {
  color: #211553 !important;
  background: var(--brand-accent) !important;
  border-color: rgba(255,255,255,.4) !important;
}
.badge.text-bg-light,
.badge.text-bg-secondary {
  color: #ebe9fb !important;
  background: rgba(255,255,255,.07) !important;
  border-color: var(--brand-soft-line) !important;
}

.toc-compact {
  top: 76px;
  background: rgba(8,2,47,.92) !important;
  border-bottom: 1px solid var(--brand-soft-line);
  backdrop-filter: blur(14px);
}
.toc-link { background: rgba(255,255,255,.04); border-color: var(--brand-soft-line); color: #dfddf2; }
.toc-nav {
  flex: 1 1 auto;
  width: 0;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
}
.toc-link {
  flex: 0 0 auto;
  max-width: min(78vw, 18rem);
  overflow: hidden;
  text-overflow: ellipsis;
  scroll-snap-align: start;
}
.toc-link:hover { color: var(--brand-accent); border-color: var(--brand-line); }
.payment-chip,
.stat-tile,
.card-stack-row,
.eeat-inline-item {
  background: rgba(255,255,255,.045) !important;
  border-color: var(--brand-soft-line) !important;
}
.payment-chip i,
.support-list-icon,
.card-stack-num,
.stat-value { color: var(--brand-accent) !important; }
.accordion-button {
  color: #f2efff !important;
  background: rgba(28,19,104,.94) !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) { color: var(--brand-accent) !important; border-bottom: 1px solid var(--brand-soft-line); }
.accordion-button::after { filter: invert(1) sepia(.6) saturate(2); }
.accordion-body { color: var(--brand-muted); background: rgba(12,4,68,.9) !important; }
.portal-table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.035);
  --bs-table-color: #dedcf1;
  --bs-table-border-color: var(--brand-soft-line);
}
.portal-table th { color: var(--brand-accent) !important; background: rgba(255,247,125,.06); }
.comparison-col-label { background: rgba(255,255,255,.05) !important; }

.alert.alert-primary {
  --bs-alert-color: var(--brand-text);
  --bs-alert-bg: transparent;
  --bs-alert-border-color: var(--brand-line);
  color: var(--brand-text) !important;
  background: linear-gradient(145deg, rgba(35, 25, 116, .96), rgba(18, 8, 87, .98)) !important;
  border: 1px solid var(--brand-line) !important;
  border-radius: 16px;
  box-shadow: var(--brand-shadow) !important;
}
.alert.alert-primary h1,
.alert.alert-primary h2,
.alert.alert-primary h3,
.alert.alert-primary h4 { color: var(--brand-accent) !important; }
.alert.alert-primary p,
.alert.alert-primary .legal-copy { color: #dedcf1 !important; }

.portal-footer {
  position: relative;
  background: #07022c !important;
  border-top: 1px solid var(--brand-line) !important;
}
.portal-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,247,125,.65), transparent);
}
.footer-title { color: var(--brand-accent) !important; }
.footer-link { color: #c8c5e4 !important; }
.footer-link:hover { color: var(--brand-accent) !important; }

#br-stick {
  max-width: 430px !important;
  padding: 10px 12px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#br-stick .br-stick-wrap,
#br-stick .br-stick-card { background: transparent !important; box-shadow: none !important; }
#br-stick .bs-btn { height: 46px !important; min-width: 0 !important; font-size: 15px !important; border-radius: 10px !important; }
#br-stick .bs-register { color: #211553 !important; text-shadow: none !important; box-shadow: none !important; }
#br-stick .bs-login { color: var(--brand-accent) !important; background: #181064 !important; border-color: rgba(255,247,125,.55) !important; box-shadow: none !important; text-shadow: none !important; }
#br-stick .bs-badge { color: #211553 !important; background: var(--brand-accent) !important; border-color: #fffbd0 !important; box-shadow: none !important; }
#br-stick .br-stick-close { background: #211873 !important; border-color: rgba(255,247,125,.75) !important; box-shadow: none !important; }
.position-fixed.bottom-0.end-0 { bottom: 78px !important; z-index: 1030; }

:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 3px; }

@media (min-width: 992px) {
  .navbar-collapse { justify-content: flex-end; }
  .inner-hero .row { align-items: center; }
  body.page-category .main > .section,
  body.page-game .main > .section,
  body.page-static .main > .section,
  body.page-legal .main > .section,
  body.page-auth .main > .section { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
}

@media (max-width: 991.98px) {
  .portal-nav { min-height: 68px; }
  .navbar-brand img { width: 122px !important; height: 40px !important; }
  .navbar-collapse {
    margin-top: .65rem;
    padding: .7rem;
    border: 1px solid var(--brand-soft-line);
    border-radius: 14px;
    background: rgba(14,5,79,.98);
    box-shadow: 0 18px 40px rgba(2,1,18,.38);
  }
  .navbar-nav { align-items: stretch; }
  .nav-link { padding: .72rem .9rem !important; }
  .toc-compact { top: 68px; }
  .inner-hero { min-height: auto; padding-top: 3.4rem !important; padding-bottom: 3.4rem !important; }
  .inner-hero-img { height: 260px; }
  .mosaic-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 575.98px) {
  body { font-size: 15px; line-height: 1.68; }
  .container-xl { padding-left: 18px; padding-right: 18px; }
  .portal-nav .container-xl { width: 100%; flex-wrap: wrap; }
  .navbar-brand { min-width: 0; }
  .ju88-wordmark { font-size: 1.5rem; }
  h1 { font-size: clamp(2rem, 10vw, 2.65rem); }
  h2 { font-size: 1.65rem; }
  .hero, .hero-minimal-text { min-height: auto !important; padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .hero .btn, .inner-hero .btn { width: 100%; }
  .section { padding-top: 3.2rem !important; padding-bottom: 3.2rem !important; }
  .section-kicker { letter-spacing: .09em; }
  .mosaic-grid { grid-template-columns: 1fr; }
  .spotlight-tiles-grid { grid-template-columns: 1fr; }
  .payment-rail { grid-template-columns: 1fr; }
  .lobby-grid { gap: .55rem; }
  .lobby-tile-name { font-size: .78rem; }
  #br-stick { width: calc(100% - 16px) !important; left: 8px !important; right: 8px !important; padding: 9px 8px 8px !important; }
  #br-stick .br-stick-card { width: 100% !important; min-width: 0 !important; gap: 7px !important; }
  #br-stick .bs-btn { height: 43px !important; padding: 0 10px !important; font-size: 14px !important; }
  #br-stick .bs-register,
  #br-stick .bs-login { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
  #br-stick .bs-badge { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .position-fixed.bottom-0.end-0 { right: 8px !important; bottom: 76px !important; }
}

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