/**
 * Theme F168 - 白色背景, 灰色文字, 橙色调
 * 字体和字号参考 F168 模板
 */
:root {
  /* --main / --base / accent tokens: templates/basic/partials/theme_tokens.blade.php (General Setting) */
  /* Shell layout duy nhất toàn template basic — xem .cursor/rules/f168-shell-480px.mdc */
  --f168-shell-width: 480px;
  --f168-shell-half: 240px;
  /* F168 字体: 系统预设栈 + 微软雅黑 (中/越) */
  --font-f168: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB, Microsoft Yahei, sans-serif;
  /* 取自模板的字号 */
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.8125rem;
  /* 13px */
  --text-base: 0.875rem;
  /* 14px */
  --text-md: 0.9375rem;
  /* 15px */
  --text-lg: 1rem;
  /* 16px */
  --text-xl: 1.125rem;
  /* 18px */
  --text-2xl: 1.25rem;
  /* 20px */
  --text-3xl: 1.375rem;
  /* 22px */
  --text-4xl: 1.5rem;
  /* 24px */
  --text-5xl: 1.75rem;
  /* 28px */
  --text-6xl: 2rem;
  /* 32px */
}

/* Bootstrap container — một shell 480px, vô hiệu breakpoint 576/768/992/1200 của Bootstrap */
body .container,
body .container-sm,
body .container-md,
body .container-lg,
body .container-xl,
body .container-xxl {
  width: 100%;
  max-width: 100% !important;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  /* Nền hai bên khi viewport rộng hơn shell — không cần @media */
  background-color: var(--f168-bg-shell);
}

body {
  font-family: var(--font-f168) !important;
  font-size: var(--text-base) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--f168-bg-page) !important;
  color: var(--f168-text-muted) !important;
  /* Shell 480px — luôn áp dụng (viewport <480: width 100%; ≥480: khóa & căn giữa) */
  max-width: var(--f168-shell-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* F168 标题比例 */
h1,
.h1 {
  font-size: var(--text-5xl) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
}

h2,
.h2 {
  font-size: var(--text-4xl) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

h3,
.h3 {
  font-size: var(--text-3xl) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

h4,
.h4 {
  font-size: 18px !important;
  font-weight: 500 !important;
}

h5,
.h5 {
  font-size: var(--text-xl) !important;
  font-weight: 500 !important;
}

h6,
.h6 {
  font-size: var(--text-lg) !important;
  font-weight: 500 !important;
}

/* F168 部分标题 */
.section-title {
  font-size: var(--text-4xl) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.section-sub-title,
.section-header p {
  font-size: var(--text-base) !important;
  line-height: 1.6 !important;
}

/* 导航，链接，按钮文字 */
.header .main-menu li a,
.header .nav-right a {
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
}

/* Footer */
.footer,
.footer-section,
footer,
.footer-widget,
.footer-menu a {
  font-size: var(--text-sm) !important;
  line-height: 1.6 !important;
}

/* 底部导航标签 */
.footer-fix-bar__label {
  font-size: var(--text-xs) !important;
}

/* 按钮，输入框，下拉菜单 */
.cmn-btn,
.btn,
button,
select,
input,
.form-control {
  font-family: var(--font-f168) !important;
  font-size: var(--text-base) !important;
}

/* 卡片，表格文字 */
.card,
.table,
.winner-item,
.transaction-wrapper {
  font-size: var(--text-base) !important;
}

/* 小文字 */
small,
.text-muted,
.ui-empty__text {
  font-size: var(--text-sm) !important;
}

.page-wrapper {
  background-color: var(--f168-bg-page) !important;
}

/* 头部 */
.header {
  background-color: var(--f168-bg-page) !important;
  border-bottom: 0px solid var(--f168-border);
}

.header .main-menu li a,
.header .nav-right a {
  color: var(--f168-text-muted) !important;
}

.header .main-menu li a:hover,
.header .main-menu li a:focus,
.header .nav-right a:hover {
  color: var(--f168-text-accent);
}

/* 页脚 */
.footer,
.footer-section,
footer {
 
  color: var(--f168-text-muted) !important;
  
}

/* 区块 - 白色或极浅的灰色背景 */
.section--bg,
section,
.pt-120,
.pb-120 {}

/* 选项卡 / 底部导航 - F168 样式橙色渐变 */
.footer-fix-bar {
  background: var(--f168-bg-page) !important;
  border-top: 1px solid rgb(141 141 141 / 20%);
}

.footer-fix-bar__item {
  color: rgba(255, 255, 255, 0.85) !important;
}

.footer-fix-bar__item:hover,
.footer-fix-bar__item.active {
  color: var(--f168-bg-page) !important;
}

.footer-fix-bar__bg {
  opacity: 0.9;
}

.ui-tabbar,
.tabbar,
[class*="tabbar"] {
  background: linear-gradient(90deg, var(--f168-accent-secondary) 0%, var(--f168-accent) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* 将 var(--f168-accent)（粉红色）替换为橙色 */
a:hover {
  color: var(--f168-text-accent);
}

/* 深灰色标题文字 */
.section-title,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--f168-text-dark) !important;
}

/* 次要文字 */
.section-sub-title,
.section-header p,
p {
  color: var(--f168-text-muted) !important;
}

/* 橙色主色调 */
.bg--base,
.bg--primary,
.btn--base,
.btn--primary,
.cmn-btn,
[class*="base--bg"] {
  background-color: var(--f168-accent) !important;
  border-color: var(--f168-accent) !important;
  color: var(--f168-bg-page) !important;
}

.text--base,
.base-color,
[class*="text--base"] {
  color: var(--f168-text-accent) !important;
}

/* Override main.css dark backgrounds */
.hero,
.hero-section {
  background-color: var(--f168-bg-page) !important;
}

/* 浅色背景上的选项和输入框 */
select {
  background-color: var(--f168-bg-page) !important;
  color: var(--f168-text-muted) !important;
  border-color: var(--f168-border) !important;
}

/* Cookie 卡片 */
.cookies-card {
  background: var(--f168-bg-page) !important;
  color: var(--f168-text-muted) !important;
  border: 1px solid var(--f168-border);
}

/* 中奖者 / 交易卡片 */
.winner-item,
.transaction-item,
.transaction-wrapper,
.card {
  background-color: var(--f168-bg-page) !important;
  border-color: var(--f168-border) !important;
  color: var(--f168-text-muted) !important;
}

.table.style--two thead,
.table thead th {
  background-color: var(--f168-accent) !important;
  color: var(--f168-bg-page) !important;
  border-color: color-mix(in srgb, var(--f168-accent) 82%, var(--f168-text-dark)) !important;
}

/* 游戏卡片 */
.game-card {
  background-color: var(--f168-bg-page) !important;
  border: 1px solid var(--f168-border);
}

/* LOGO 区域 - 如有文字显示为橙色 */
.hero__title,
.main-menu li a:hover {
  color: var(--f168-text-accent);
}

.hero__title {
  font-size: var(--text-4xl) !important;
  font-weight: 700 !important;
}

/* 新闻区块 - 白色背景上的灰色副标题 */
.news-section__subheading {
  color: var(--f168-text-muted) !important;
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
}

.news-section .news-card__title {
  font-size: var(--text-2xl) !important;
  font-weight: 600 !important;
}



/* Marquee */
.ann-bar marquee {
  font-size: var(--text-base) !important;
}

/* 卡片中的状态/数字 - F168 中等尺寸 */
.stat-card__icon i,
.feature-card__content h4,
.winner-amount {
  font-size: var(--text-lg) !important;
}

/* Marquee / Announcement */
.announce-wrap {

  color: var(--f168-text-dark) !important;
}

.ann-icon,
.ann-icon i {
  color: var(--f168-text-accent) !important;
}

/* 覆盖 main.css body - 必须具有高优先级 */
body.body,
html body {
  background-color: var(--f168-bg-page) !important;
  color: var(--f168-text-muted) !important;
}

/* ==========================================================================
   Shell 480px — một nguồn, KHÔNG @media breakpoint (992/768/576…)
   Fixed UI: max-width + margin auto + left/right 0 → căn trong shell mọi viewport
   ========================================================================== */
.header,
.header.header-f168,
.footer-fix-bar,
.bottom-menu,
.mobile-menu {
  width: 100%;
  max-width: var(--f168-shell-width);
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.modal-dialog {
  max-width: var(--f168-shell-width);
  margin-left: auto;
  margin-right: auto;
}

.scroll-to-top,
#sb-btn,
#sb-chat {
  right: max(5px, calc(50% - var(--f168-shell-half) + 20px)) !important;
}

/* Legacy main.css — vô hiệu max-width/breakpoint cũ trong shell 480px */
.cookie__wrapper .txt {
  max-width: 100% !important;
  margin-right: 0;
}

.mine-box {
  width: calc(25% - 12px) !important;
}