/*
Theme Name: Xổ Số Hub
Theme URI: https://xosovietloto.com/
Author: Xổ Số Hub
Description: Cổng thông tin xổ số Việt Nam bằng tiếng Việt với giao diện portal hiện đại, dữ liệu công khai và SEO tối ưu.
Version: 1.0.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: xo-so-viet-portal
*/

/* ============================================================
   一、配色体系 — 活力撞色浅色主题
   ============================================================ */
:root {
  /* 品牌主色 */
  --red:         #E53935;
  --red-dark:    #c62828;
  --red-soft:    rgba(229, 57, 53, 0.10);
  --red-border:   rgba(229, 57, 53, 0.25);

  /* 撞色 */
  --cyan:        #03A9F4;
  --cyan-dark:    #0288d1;
  --cyan-soft:    rgba(3, 169, 244, 0.10);
  --cyan-border:  rgba(3, 169, 244, 0.25);

  --orange:       #FF9800;
  --orange-dark:  #f57c00;
  --orange-soft:  rgba(255, 152, 0, 0.10);
  --orange-border:rgba(255, 152, 0, 0.25);

  --green:        #4CAF50;
  --green-soft:   rgba(76, 175, 80, 0.10);
  --green-border: rgba(76, 175, 80, 0.25);

  --purple:       #9C27B0;
  --purple-soft:  rgba(156, 39, 176, 0.10);
  --purple-border:rgba(156, 39, 176, 0.25);

  /* 背景层次 */
  --bg:          #F5F7FA;
  --bg-page:     #ffffff;
  --bg-subtle:   #edf3f9;
  --bg-card:     #ffffff;
  --bg-card-alt: #f0f4f8;

  /* 文字 */
  --text-dark:   #263238;
  --text-mid:    #546E7A;
  --text-light:  #90A4AE;
  --text-inv:    #ffffff;

  /* 功能 */
  --success:     #4CAF50;
  --danger:      #E53935;

  /* 边框 */
  --border:      rgba(0, 40, 80, 0.08);
  --border-md:   rgba(0, 40, 80, 0.14);
  --border-strong:rgba(0, 40, 80, 0.22);

  /* 圆角 */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* 阴影 */
  --sh-xs:  0 1px 4px rgba(0,20,50,0.06);
  --sh-sm:  0 2px 12px rgba(0,20,50,0.08);
  --sh-md:  0 6px 28px rgba(0,20,50,0.10);
  --sh-lg:  0 16px 56px rgba(0,20,50,0.12);

  /* 彩票球 */
  --ball-bg:     #fce4ec;
  --ball-border: rgba(229, 57, 53, 0.20);
  --ball-spc:   linear-gradient(135deg, #FF9800, #ffca28);
  --ball-spc-c: #1a1a1a;

  /* 容器 */
  --container: 1360px;
  --pad:       20px;
}

/* ============================================================
   二、全局重置
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text-dark);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button, input, select { font: inherit; }

/* ============================================================
   三、全站容器
   ============================================================ */
.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  position: relative;
}
.main-container {
  flex: 1;
  padding: 32px 0 60px;
}

/* ============================================================
   四、顶部通知栏
   ============================================================ */
.topbar {
  background: var(--bg-page);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  color: var(--text-light);
  font-size: 12px;
  letter-spacing: 0.03em;
}

/* ============================================================
   五、红顶主导航（与d.95447.com彻底不同）
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--red);
  box-shadow: 0 2px 12px rgba(229,57,53,0.30);
}
.header-container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 12px 0;
}

/* Logo */
/* Logo 区域 */
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  color: #fff;
  transition: background 0.2s;
}
.logo-wrap:hover .logo-icon {
  background: rgba(255,255,255,0.25);
}
.logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.logo-text strong {
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1.15;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.logo-text span {
  color: rgba(255,255,255,0.72);
  font-size: clamp(10px, 1.1vw, 12px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 主导航 */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  color: rgba(255,255,255,0.85);
  background: transparent;
  border: 1px solid transparent;
  transition: 0.2s ease;
  font-size: 14px;
  font-weight: 500;
}
.main-nav a:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
  transform: translateY(-1px);
}
.main-nav a.active {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.40);
  color: #fff;
  font-weight: 600;
}

/* 导航彩色圆点 */
.nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-dot-red    { background: #ff6b6b; box-shadow: 0 0 6px rgba(255,107,107,0.7); }
.nav-dot-cyan   { background: #4fc3f7; box-shadow: 0 0 6px rgba(79,195,247,0.7); }
.nav-dot-orange { background: #ffb74d; box-shadow: 0 0 6px rgba(255,183,77,0.7); }

/* ============================================================
   六、省份导航按钮
   ============================================================ */
/* ============================================================
   六、省份导航按钮
   ============================================================ */
.province-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    transition: all .2s ease;
}
.province-nav-btn:hover { background: #f5f5f5; color: #e53935; }

/* ============================================================
   六.2 省份总封面页
   ============================================================ */
.province-index-page { padding: 20px 0 48px; }

/* ---- Hero ---- */
.pi-hero {
    position: relative;
    background: linear-gradient(135deg, #7b1fa2 0%, #e53935 40%, #f57c00 100%);
    border-radius: 24px;
    padding: 56px 48px 48px;
    margin-bottom: 48px;
    overflow: hidden;
}
.pi-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.pihb-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.25;
}
.pihbc-1 { width: 300px; height: 300px; background: #fff; top: -80px; right: 60px; }
.pihbc-2 { width: 200px; height: 200px; background: #ffeb3b; bottom: -60px; right: 200px; }
.pihbc-3 { width: 180px; height: 180px; background: #e91e63; top: 20px; right: 300px; }
.pi-hero-content { position: relative; z-index: 1; max-width: 680px; }
.pi-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.3);
}
.pihb-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff5252;
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:0.6; transform:scale(1.3); }
}
.pi-hero-title {
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 900;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.pi-hero-desc {
    font-size: 16px;
    color: rgba(255,255,255,0.88);
    margin: 0 0 24px;
    line-height: 1.65;
}
.pi-hero-search-wrap { max-width: 440px; }
.pi-hero-search {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.97);
    border-radius: 14px;
    padding: 4px 6px 4px 16px;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.pi-hs-icon { font-size: 16px; flex-shrink: 0; }
.pi-hero-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    background: transparent;
    color: #333;
    padding: 10px 0;
}
.pi-hero-search input::placeholder { color: #aaa; }
.pi-hs-clear {
    background: #eee;
    border: none;
    border-radius: 50%;
    width: 24px; height: 24px;
    cursor: pointer;
    font-size: 11px;
    color: #666;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pi-hs-clear:hover { background: #ddd; }
.pi-search-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    margin-top: 8px;
    padding-left: 4px;
}
.pi-hero-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.pihs-item { display: flex; flex-direction: column; }
.pihs-num { font-size: 22px; font-weight: 900; color: #fff; line-height: 1; }
.pihs-label { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.pihs-sep { width: 1px; height: 36px; background: rgba(255,255,255,0.25); }

/* ---- Section Headers ---- */
.pi-section { margin-bottom: 48px; }
.pi-sec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 3px solid;
}
.pi-sec-red    .pi-sec-header { border-color: #e53935; }
.pi-sec-orange .pi-sec-header { border-color: #f57c00; }
.pi-sec-green  .pi-sec-header { border-color: #2e7d32; }
.pi-sec-header-left { display: flex; align-items: center; gap: 14px; }
.pi-sec-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.pi-si-red    { background: rgba(229,57,53,0.12); color: #e53935; }
.pi-si-orange { background: rgba(245,124,0,0.12); color: #f57c00; }
.pi-si-green  { background: rgba(46,125,50,0.12); color: #2e7d32; }
.pi-sec-title {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0;
}
.pi-sec-desc { font-size: 12px; color: #888; margin: 2px 0 0; }
.pi-sec-count {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    background: #f5f5f5;
    color: #666;
}

/* ---- Province Cards ---- */
.p-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.p-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    text-decoration: none;
    background: #fff;
    border: 1px solid #eee;
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
}
.p-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}
.p-card.p-red::before    { background: #e53935; }
.p-card.p-orange::before { background: #f57c00; }
.p-card.p-green::before  { background: #2e7d32; }
.p-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.09); }
.p-card.p-red:hover    { background: #fff8f8; }
.p-card.p-orange:hover { background: #fffbf5; }
.p-card.p-green:hover  { background: #f5fff5; }
.p-card-icon { flex-shrink: 0; }
.pci {
    display: flex;
    width: 36px; height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 14px;
}
.p-red    .pci { background: rgba(229,57,53,0.1);  color: #e53935; }
.p-orange .pci { background: rgba(245,124,0,0.1); color: #f57c00; }
.p-green  .pci { background: rgba(46,125,50,0.1);  color: #2e7d32; }
.p-card-body { flex: 1; min-width: 0; }
.p-card-name { font-size: 14px; font-weight: 700; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-card-meta { font-size: 11px; color: #999; margin-top: 2px; }
.p-card-arrow { font-size: 16px; color: #ccc; flex-shrink: 0; transition: all .2s; }
.p-card:hover .p-card-arrow { color: #e53935; transform: translateX(3px); }

/* ============================================================
   六.3 省份首页
   ============================================================ */
.province-page { padding: 0 0 48px; }

/* ---- Hero ---- */
.ph-hero {
    position: relative;
    border-radius: 20px;
    padding: 44px 40px 40px;
    margin-bottom: 28px;
    overflow: hidden;
    color: #fff;
}
.ph-hero.ph-hero-red    { background: linear-gradient(135deg, #b71c1c, #e53935, #ff7043); }
.ph-hero.ph-hero-orange { background: linear-gradient(135deg, #bf360c, #f57c00, #ffb74d); }
.ph-hero.ph-hero-green  { background: linear-gradient(135deg, #1b5e20, #2e7d32, #66bb6a); }
.ph-hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 50%, rgba(255,255,255,0.12) 0%, transparent 60%);
}
.ph-hero-content { position: relative; z-index: 1; }
.ph-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(6px);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,0.3);
}
.phb-dot { width: 7px; height: 7px; border-radius: 50%; }
.phb-dot-red    { background: #ff5252; box-shadow: 0 0 6px #ff5252; }
.phb-dot-orange { background: #ffca28; box-shadow: 0 0 6px #ffca28; }
.phb-dot-green  { background: #69f0ae; box-shadow: 0 0 6px #69f0ae; }
.ph-hero-title { font-size: clamp(22px, 3.5vw, 36px); font-weight: 900; margin: 0 0 10px; line-height: 1.2; }
.ph-hero-desc { font-size: 14px; color: rgba(255,255,255,0.85); margin: 0; }

/* ---- Quick Links ---- */
.ph-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.ph-ql-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    border-radius: 16px;
    text-decoration: none;
    background: #fff;
    border: 1px solid #eee;
    text-align: center;
    transition: all .2s;
}
.ph-ql-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.ph-ql-icon { font-size: 28px; }
.ph-ql-name { font-size: 14px; font-weight: 700; color: #1a1a2e; }
.ph-ql-desc { font-size: 11px; color: #888; }
.ph-ql-red    { border-top: 3px solid #e53935; }
.ph-ql-red:hover    { border-color: #e53935; }
.ph-ql-orange { border-top: 3px solid #f57c00; }
.ph-ql-orange:hover { border-color: #f57c00; }
.ph-ql-green  { border-top: 3px solid #2e7d32; }
.ph-ql-green:hover  { border-color: #2e7d32; }
.ph-ql-purple { border-top: 3px solid #7b1fa2; }
.ph-ql-purple:hover { border-color: #7b1fa2; }
.ph-ql-cyan   { border-top: 3px solid #0288d1; }
.ph-ql-cyan:hover   { border-color: #0288d1; }

/* ---- Draw Banner ---- */
.ph-draw-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px;
    padding: 20px 28px;
    margin-bottom: 24px;
    gap: 20px;
}
.ph-db-red    { background: linear-gradient(135deg, #fff3e0, #ffccbc); border: 1px solid rgba(229,57,53,0.2); }
.ph-db-orange { background: linear-gradient(135deg, #fff8e1, #ffecb3); border: 1px solid rgba(245,124,0,0.2); }
.ph-db-green  { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); border: 1px solid rgba(46,125,50,0.2); }
.ph-di-time { font-size: 24px; font-weight: 900; color: #1a1a2e; }
.ph-di-days { font-size: 13px; color: #555; margin-top: 2px; }
.ph-di-desc { font-size: 12px; color: #888; margin-top: 4px; }
.ph-draw-cta { flex-shrink: 0; }
.btn-white {
    background: #fff;
    color: #1a1a2e;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all .2s;
}
.btn-white:hover { background: #f5f5f5; transform: translateY(-1px); }

/* ---- Today Result ---- */
.ph-today-result {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eee;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.ph-tr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ph-trh-title { font-size: 18px; font-weight: 800; color: #1a1a2e; margin: 0; }
.ph-trh-badge {
    font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 20px;
}
.ph-trh-red    { background: rgba(229,57,53,0.1);  color: #e53935; }
.ph-trh-orange { background: rgba(245,124,0,0.1); color: #f57c00; }
.ph-trh-green  { background: rgba(46,125,50,0.1);  color: #2e7d32; }
.ph-tr-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.ph-tr-row:last-child { border-bottom: none; }
.ph-tr-label {
    min-width: 50px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    text-align: center;
}
.ph-trl-g{background:rgba(229,57,53,0.15);color:#c62828} /* ĐB */
.ph-trl-1{background:rgba(229,57,53,0.08);color:#d32f2f}
.ph-trl-2,.ph-trl-3,.ph-trl-4,.ph-trl-5,.ph-trl-6{background:#f5f5f5;color:#555}
.ph-tr-balls { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- History Table ---- */
.ph-history-section { margin-bottom: 28px; }
.ph-hs-title { font-size: 20px; font-weight: 800; color: #1a1a2e; margin: 0 0 16px; }
.ph-ht-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.ph-ht-table th {
    background: #f8f9fa;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
}
.ph-ht-table td { padding: 10px 14px; border-bottom: 1px solid #f0f0f0; font-size: 13px; vertical-align: middle; }
.ph-ht-table tr:last-child td { border-bottom: none; }
.ph-ht-table tr:hover td { background: #fafafa; }
.ph-ht-date { font-weight: 600; color: #333; white-space: nowrap; cursor: pointer; }
.ph-ht-weekday { color: #888; font-size: 12px; }
.ph-ht-nums { display: flex; flex-wrap: wrap; gap: 4px; }
.ph-ht-nums a.ball { cursor: pointer; }
.ph-ht-more a { color: #e53935; font-size: 12px; font-weight: 600; text-decoration: none; }
.ph-ht-more a:hover { text-decoration: underline; }
.ph-ht-more-link { text-align: center; margin-top: 12px; }
.ph-ht-more-link a { color: #666; font-size: 13px; text-decoration: none; font-weight: 600; }
.ph-ht-more-link a:hover { color: #e53935; }

/* ---- Stats Section ---- */
.ph-stats-section { margin-bottom: 28px; }
.ph-stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ph-sg-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #eee;
}
.ph-sgc-title { font-size: 13px; font-weight: 700; color: #555; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.ph-sgc-nums { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-stat-num { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ph-sn-value { font-size: 20px; font-weight: 900; color: #1a1a2e; }
.ph-sn-count { font-size: 10px; color: #888; }
.ph-sn-hot .ph-sn-value { color: #e53935; }
.ph-sn-cold .ph-sn-value { color: #0288d1; }
.ph-sgc-info-list { display: flex; flex-direction: column; gap: 8px; }
.ph-sgi-item { display: flex; justify-content: space-between; font-size: 12px; }
.ph-sgi-item span { color: #888; }
.ph-sgi-item strong { color: #333; font-weight: 700; }
.ph-sgc-more { text-align: right; }
.ph-sgc-more a { color: #e53935; font-size: 13px; font-weight: 600; text-decoration: none; }
.ph-sgc-more a:hover { text-decoration: underline; }

/* ---- Month Nav ---- */
.ph-month-nav { margin-bottom: 28px; }
.ph-mn-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-mn-btn {
    padding: 8px 16px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #eee;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    transition: all .15s;
}
.ph-mn-btn:hover { background: #f5f5f5; color: #1a1a2e; }
.ph-mn-btn-active { background: #e53935 !important; color: #fff !important; border-color: #e53935 !important; }

/* ---- Region Links ---- */
.ph-region-links { }
.ph-rl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ph-rl-region { background: #fff; border-radius: 14px; padding: 18px; border: 1px solid #eee; }
.ph-rlr-name { font-size: 15px; font-weight: 800; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid; }
.ph-rlr-red    { color: #e53935; border-color: #e53935; }
.ph-rlr-orange { color: #f57c00; border-color: #f57c00; }
.ph-rlr-green  { color: #2e7d32; border-color: #2e7d32; }
.ph-rlr-provinces { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-rlp {
    padding: 4px 10px;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    transition: all .15s;
}
.ph-rlp:hover { background: #eee; color: #1a1a2e; }
.ph-rlp-current { background: #e53935; color: #fff; }
.ph-rlp-current:hover { background: #c62828; color: #fff; }

/* ---- Province page shared ---- */
.province-no-data { padding: 40px; text-align: center; color: #888; font-size: 15px; background: #f8f9fa; border-radius: 12px; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .ph-stats-grid { grid-template-columns: 1fr; }
    .ph-rl-grid { grid-template-columns: 1fr; }
    .ph-quick-grid { grid-template-columns: repeat(2, 1fr); }
    .ph-draw-banner { flex-direction: column; align-items: flex-start; }
    .p-card-grid { grid-template-columns: repeat(2, 1fr); }
    .pi-hero { padding: 36px 24px 32px; }
    .pi-hero-stats { gap: 16px; }
}
@media (max-width: 480px) {
    .p-card-grid { grid-template-columns: 1fr; }
    .ph-quick-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   六、全宽英雄Banner
   ============================================================ */
.hero-banner {
  background: linear-gradient(135deg, #E53935 0%, #ef5350 40%, #FF9800 100%);
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 40%);
  pointer-events: none;
}
.banner-decoration {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}


.hero-content { width: 50%; flex-shrink: 0; padding-right: 32px; box-sizing: border-box; }
.
.
.hvs-track { width: 100%; height: 100%; position: relative; }
.hvs-slide {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: #fff;
}
.hvs-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hvs-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.hvs-slide:hover .hvs-overlay { opacity: 1; }
.hvs-overlay span {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #E53935;
}
.hvs-duration {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.hvs-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 36px 14px 14px;
  background: linear-gradient(transparent,rgba(0,0,0,0.8));
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}
.hvs-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: rgba(255,255,255,0.5);
}
.hvs-placeholder p { margin: 0; font-size: 14px; }
.hvs-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0 4px;
}
.hvs-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.hvs-btn:hover { background: rgba(255,255,255,0.3); }
.hvs-dots { display: flex; gap: 6px; }
.hvs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.2s;
}
.hvs-dot.active { background: #fff; width: 20px; border-radius: 4px; }
.banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: var(--r-pill);
  color: rgba(255,255,255,0.95);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.badge-dot-red {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.8);
  animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
.banner-title {
  margin: 0 0 16px;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.banner-desc {
  margin: 0 0 28px;
  color: rgba(255,255,255,0.88);
  font-size: 16px;
  line-height: 1.75;
  max-width: 620px;
}
.banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
   七、按钮系统
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: 0.22s ease;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.btn-red {
  color: var(--red);
  background: #fff;
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.btn-red:hover {
  background: #fff5f5;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
}
.btn-cyan-outline {
  color: #fff;
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
}
.btn-cyan-outline:hover {
  background: rgba(255,255,255,0.28);
  transform: translateY(-2px);
}
.btn-orange-outline {
  color: #fff;
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.25);
  backdrop-filter: blur(4px);
}
.btn-orange-outline:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-2px);
}

/* ============================================================
   八、彩种四宫格卡片
   ============================================================ */
.lottery-types {
  padding: 40px 0 0;
}
.section-heading {
  margin-bottom: 22px;
}
.section-title {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.8vw, 30px);
  color: var(--text-dark);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.section-subtitle {
  margin: 0;
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.6;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 0;
}
.type-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  transition: 0.22s ease;
  position: relative;
  overflow: hidden;
  min-height: 90px;
  cursor: pointer;
}
.type-card::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.15;
  pointer-events: none;
  transition: 0.3s ease;
}
.type-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.type-card:hover::after {
  transform: scale(1.3);
  opacity: 0.2;
}

/* 四个不同颜色卡片 */
.type-card-red {
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  border-color: #ffcdd2;
  color: #b71c1c;
}
.type-card-red::after { background: var(--red); }

.type-card-cyan {
  background: linear-gradient(135deg, #e1f5fe, #b3e5fc);
  border-color: #b3e5fc;
  color: #01579b;
}
.type-card-cyan::after { background: var(--cyan); }

.type-card-orange {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  border-color: #ffe0b2;
  color: #e65100;
}
.type-card-orange::after { background: var(--orange); }

.type-card-green {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border-color: #c8e6c9;
  color: #1b5e20;
}
.type-card-green::after { background: var(--green); }

.type-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.type-info {
  flex: 1;
  min-width: 0;
}
.type-info strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
  color: inherit;
}
.type-info span {
  display: block;
  font-size: 12px;
  opacity: 0.75;
}
.type-arrow {
  flex-shrink: 0;
  opacity: 0.5;
  transition: 0.2s;
}
.type-card:hover .type-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* ============================================================
   九、胶囊标签（多彩）
   ============================================================ */
.tag-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: 0.2s ease;
}
.tag-pill-red    { background: var(--red-soft);    color: var(--red);    border-color: var(--red-border); }
.tag-pill-cyan  { background: var(--cyan-soft);   color: var(--cyan);   border-color: var(--cyan-border); }
.tag-pill-orange{ background: var(--orange-soft); color: var(--orange); border-color: var(--orange-border); }
.tag-pill-green { background: var(--green-soft);  color: var(--green);  border-color: var(--green-border); }
.tag-pill-purple{ background: var(--purple-soft);color: var(--purple);border-color: var(--purple-border); }
.tag-pill:hover { opacity: 0.8; transform: translateY(-1px); }

/* ============================================================
   十、面包屑
   ============================================================ */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  color: var(--text-light);
  font-size: 13px;
}
.breadcrumbs span[aria-current="page"] { color: var(--text-dark); font-weight: 500; }
.crumb-sep { opacity: 0.5; }
.breadcrumbs a:hover { color: var(--red); }

/* ============================================================
   十一、卡片通用
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.section-card,
.article-card,
.result-card,
.stat-card,
.notice-card,
.side-card,
.portal-card {
  padding: 26px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  margin-bottom: 22px;
  transition: 0.2s ease;
}
.section-card:last-child,
.article-card:last-child,
.result-card:last-child,
.stat-card:last-child,
.notice-card:last-child,
.side-card:last-child,
.portal-card:last-child { margin-bottom: 0; }

/* ============================================================
   十二、开奖结果模块
   ============================================================ */
.result-card {
  border-left: 5px solid var(--red);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid var(--green-border);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-weight: 600;
  margin-bottom: 8px;
  width: fit-content;
}
.badge-dot-green {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}
.result-numbers { display: grid; gap: 10px; }
.result-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
.result-row:first-child { border-top: none; padding-top: 0; }
.result-label {
  font-size: 11px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding-top: 8px;
}
.number-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.ball {
  min-width: 48px;
  text-align: center;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--ball-bg);
  border: 1px solid var(--ball-border);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dark);
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.ball-special {
  color: var(--ball-spc-c) !important;
  background: var(--ball-spc) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(255,152,0,0.35) !important;
}

/* ============================================================
   十三、专区网格
   ============================================================ */
.portal-grid,
.articles-grid,
.region-grid,
.stats-grid,
.tools-grid {
  display: grid;
  gap: 16px;
}
.portal-grid    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.articles-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.region-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 专区标题栏 */
.section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.section-title-row h2 { margin: 0; }
.section-title-row p  { margin: 4px 0 0; }

/* 专区卡片 */
.region-card,
.portal-card,
.article-card {
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: 0.2s ease;
}
.region-card:hover,
.portal-card:hover,
.article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--border-md);
}
.region-card h3,
.portal-card h3,
.article-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--text-dark);
  font-weight: 700;
}
.region-card p,
.portal-card p,
.article-card p {
  margin: 0;
  color: var(--text-mid);
  line-height: 1.7;
  font-size: 14px;
}

/* 专区图标（多彩） */
.portal-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.portal-card-icon-red    { background: var(--red-soft);    color: var(--red); }
.portal-card-icon-cyan   { background: var(--cyan-soft);   color: var(--cyan); }
.portal-card-icon-orange { background: var(--orange-soft); color: var(--orange); }

/* meta标签 */
.meta-tag {
  display: inline-flex;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
}
.meta-tag-red    { background: var(--red-soft);    color: var(--red); }
.meta-tag-cyan  { background: var(--cyan-soft);   color: var(--cyan); }
.meta-tag-orange{ background: var(--orange-soft); color: var(--orange); }

.meta-line {
  margin-top: 14px;
  color: var(--text-mid);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.meta-line a { color: var(--cyan); font-weight: 600; }
.meta-line a:hover { text-decoration: underline; }

/* 专区选项卡 */
.region-tabs,
.inline-links,
.archive-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.region-tabs a,
.inline-links a,
.archive-links a {
  border-radius: var(--r-pill);
  border: 1px solid var(--border-md);
  background: var(--bg-card);
  color: var(--text-mid);
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 500;
  transition: 0.2s ease;
  box-shadow: var(--sh-xs);
}
.region-tabs a:hover,
.inline-links a:hover,
.archive-links a:hover {
  background: var(--red-soft);
  border-color: var(--red-border);
  color: var(--red);
}
.archive-links a {
  background: var(--orange-soft);
  border-color: var(--orange-border);
  color: var(--orange-dark);
}

/* 专区奖项行 */
.region-prizes { display: grid; gap: 6px; }
.region-row {
  display: grid;
  gap: 5px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.region-row:first-child { border-top: none; }
.region-row strong { color: var(--text-dark); font-weight: 600; }
.region-row span { color: var(--text-mid); font-family: "Consolas","Monaco",monospace; }

/* ============================================================
   十四、工具四列卡片
   ============================================================ */
.tools-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tool-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  transition: 0.22s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.tool-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 0.2s ease;
}
.tool-card:hover::before { opacity: 1; }

.tool-card-red    { background: var(--red-soft);    border-color: var(--red-border);    color: var(--red); }
.tool-card-red:hover    { background: rgba(229,57,53,0.15); }
.tool-card-cyan   { background: var(--cyan-soft);   border-color: var(--cyan-border);   color: var(--cyan); }
.tool-card-cyan:hover   { background: rgba(3,169,244,0.15); }
.tool-card-orange { background: var(--orange-soft); border-color: var(--orange-border); color: var(--orange); }
.tool-card-orange:hover { background: rgba(255,152,0,0.15); }
.tool-card-green  { background: var(--green-soft);  border-color: var(--green-border);  color: var(--green); }
.tool-card-green:hover  { background: rgba(76,175,80,0.15); }

.tool-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-info { flex: 1; min-width: 0; }
.tool-info strong { display: block; font-size: 14px; font-weight: 700; color: inherit; margin-bottom: 2px; }
.tool-info span   { display: block; font-size: 12px; opacity: 0.75; }
.tool-arrow { flex-shrink: 0; opacity: 0.5; transition: 0.2s; }
.tool-card:hover .tool-arrow { opacity: 1; transform: translateX(3px); }

/* ============================================================
   十五、历史表格
   ============================================================ */
.archive-intro {
  margin: 0 0 20px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--orange-soft);
  border: 1px solid var(--orange-border);
}
.archive-intro h3 { margin: 0 0 7px; font-size: 17px; color: var(--text-dark); }
.archive-intro p { margin: 0; color: var(--text-mid); font-size: 14px; line-height: 1.7; }
.archive-intro p + p { margin-top: 7px; }

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.history-table th,
.history-table td {
  text-align: left;
  padding: 13px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.history-table th {
  color: var(--text-light);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.history-table tr:last-child td { border-bottom: none; }
.date-link { color: var(--cyan); font-weight: 700; }
.date-link:hover { text-decoration: underline; }

/* ============================================================
   十六、文章卡片
   ============================================================ */
.article-card-tag { margin-bottom: 12px; }
.article-card h3 { font-size: 19px; margin-bottom: 10px; }

/* ============================================================
   十七、文章详情
   ============================================================ */
.article-hero {
  padding: 36px 38px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  margin-bottom: 22px;
}
.article-hero h1 {
  margin: 14px 0 14px;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.1;
  color: var(--text-dark);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.article-content {
  color: var(--text-mid);
  font-size: 16px;
  line-height: 1.85;
}
.article-content h2,
.article-content h3 {
  color: var(--text-dark);
  margin: 28px 0 10px;
  font-weight: 700;
}
.article-content ul { padding-left: 22px; }
.article-content li { margin: 7px 0; }
.inline-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ============================================================
   十八、通知块（多彩包裹）
   ============================================================ */
.notice-wrapped {
  border-left: 4px solid var(--purple);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.notice-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.notice-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.notice-icon-purple { background: var(--purple-soft); color: var(--purple); }
.notice-text { flex: 1; min-width: 200px; }
.notice-text strong { display: block; font-size: 16px; color: var(--text-dark); margin-bottom: 6px; }
.notice-text p { margin: 0; color: var(--text-mid); font-size: 14px; line-height: 1.7; }
.notice-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  padding-top: 4px;
}

/* ============================================================
   十九、新闻区英雄卡
   ============================================================ */
.news-hero-section {
  margin-bottom: 0;
}
.news-hero-card {
  padding: 40px 44px;
  background: linear-gradient(135deg, #f3e5f5, #ede7f6);
  border: 1px solid rgba(156,39,176,0.15);
  border-radius: var(--r-xl);
  margin-bottom: 0;
}
.news-hero-badge { margin-bottom: 14px; }
.news-hero-title {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.5vw, 40px);
  line-height: 1.15;
  color: var(--text-dark);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.news-hero-desc {
  margin: 0 0 20px;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.75;
  max-width: 640px;
}
.news-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============================================================
   二十、页脚
   ============================================================ */
.site-footer {
  background: var(--bg-page);
  border-top: 1px solid var(--border);
  padding: 36px 0 0;
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 30px;
}
.footer-brand p { color: var(--text-mid); line-height: 1.75; font-size: 14px; margin: 10px 0 0; }
.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-logo strong { font-size: 20px; color: var(--text-dark); }
.footer-social { margin-top: 14px; }
.social-tag {
  display: inline-flex;
  border-radius: var(--r-pill);
  background: var(--cyan-soft);
  color: var(--cyan);
  border: 1px solid var(--cyan-border);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}
.footer-col h4 { margin: 0 0 12px; color: var(--text-dark); font-size: 16px; }
.footer-col p,
.footer-col li { color: var(--text-mid); line-height: 1.8; font-size: 14px; margin: 0; }
.footer-col ul { margin: 0; padding-left: 18px; }
.footer-col li + li { margin-top: 6px; }
.footer-col a:hover { color: var(--red); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-bottom span { color: var(--text-light); font-size: 12px; }

/* ============================================================
   二十一、辅助类
   ============================================================ */
.muted      { color: var(--text-light); }
.small      { font-size: 13px; }

/* ============================================================
   二十二、响应式断点（严格隔离）
   ============================================================ */

/* 平板端 768px–1199px */
@media (max-width: 1199px) {
  :root { --container: 100%; --pad: 20px; }
  .type-grid      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid    { grid-template-columns: 1fr 1fr; }
  .portal-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-banner    { padding: 48px 0 56px; }
  .banner-title   { font-size: 36px; }
}

/* 移动端 < 768px */
@media (max-width: 767px) {
  :root { --pad: 16px; }

  /* 全部单列 */
  .type-grid,
  .tools-grid,
  .portal-grid,
  .articles-grid,
  .region-grid,
  .stats-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* 导航 */
  .header-container {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 10px 0;
  }
  .main-nav {
    justify-content: flex-start !important;
    gap: 4px;
  }
  .main-nav a {
    padding: 7px 14px;
    font-size: 13px;
  }

  /* Banner */
  .hero-banner { padding: 36px 0 44px; }
  .banner-title   { font-size: 28px; }
  .banner-desc    { font-size: 14px; }
  .banner-actions { flex-direction: column; gap: 10px; }
  .banner-actions .btn { width: 100%; justify-content: center; }

  /* 彩种卡片 */
  .type-card { padding: 16px 18px; }
  .type-info strong { font-size: 14px; }

  /* 通用内边距 */
  .section-card, .article-card, .result-card, .notice-card,
  .portal-card, .article-hero, .news-hero-card { padding: 20px !important; border-radius: var(--r-md) !important; }

  /* 结果行 */
  .result-row { grid-template-columns: 1fr !important; gap: 6px; }
  .ball { min-width: 42px; padding: 8px 10px; font-size: 14px; }

  /* 表格 */
  .history-table { font-size: 13px; display: block; overflow-x: auto; white-space: nowrap; }
  .history-table th, .history-table td { padding: 9px 10px; }

  /* 顶部栏 */
  .topbar-inner { flex-direction: column; align-items: flex-start; gap: 3px; font-size: 11px; }

  /* 标题行 */
  .section-title-row { flex-direction: column; gap: 6px; }
  .section-title { font-size: 22px; }

  /* 工具卡片 */
  .tool-card { padding: 14px 16px; }
  .tool-info strong { font-size: 13px; }

  /* 通知块 */
  .notice-inner { flex-direction: column; gap: 12px; }
  .notice-links { padding-top: 0; }

  /* 底部 */
  .footer { padding: 24px 0 0; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* 文章 */
  .news-hero-card { padding: 24px !important; }
  .news-hero-title { font-size: 24px; }
  .news-hero-tags { gap: 8px; }
}

/* ============================================================
   二十三、Vietlott 彩种卡片
   ============================================================ */
.vietlott-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: none;
  border-radius: var(--r-xl);
  padding: 48px 50px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.vietlott-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(156,39,176,0.15) 0%, transparent 50%),
              radial-gradient(circle at 20% 70%, rgba(3,169,244,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.vietlott-hero-inner { position: relative; z-index: 1; }
.vietlott-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: var(--r-pill);
  color: rgba(255,255,255,0.90);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.vietlott-hero-title {
  margin: 0 0 12px;
  font-size: clamp(30px, 4vw, 52px);
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.vietlott-hero-desc {
  margin: 0;
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  line-height: 1.75;
  max-width: 640px;
}

/* Vietlott 四列网格 */
.vietlott-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.vietlott-type-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 26px 24px;
  box-shadow: var(--sh-sm);
  transition: 0.25s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vietlott-type-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

/* 四种颜色卡片 */
.vietlott-type-mega   { border-top: 4px solid #E53935; }
.vietlott-type-power  { border-top: 4px solid #9C27B0; }
.vietlott-type-max3d  { border-top: 4px solid #FF9800; }
.vietlott-type-keno   { border-top: 4px solid #4CAF50; }

.vtlott-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vtlott-logo-ball {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.vtlott-logo-mega  { background: linear-gradient(135deg, #E53935, #ff7043); }
.vtlott-logo-power { background: linear-gradient(135deg, #9C27B0, #ce93d8); }
.vtlott-logo-max3d { background: linear-gradient(135deg, #FF9800, #ffca28); }
.vtlott-logo-keno  { background: linear-gradient(135deg, #4CAF50, #81c784); }

.vtlott-header h2 {
  margin: 0;
  font-size: 20px;
  color: var(--text-dark);
  font-weight: 700;
}
.vtlott-header p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--text-light);
}

.vtlott-draw-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-mid);
  align-items: center;
}
.jackpot-tag {
  background: linear-gradient(135deg, #fff3e0, #ffe082);
  border: 1px solid var(--orange-border);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  color: var(--orange);
  font-weight: 700;
}
.jackpot-tag-purple {
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  border-color: var(--purple-border);
  color: var(--purple);
}
.demo-tag {
  background: var(--green-soft);
  border: 1px solid var(--green-border);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  color: var(--green);
  font-weight: 600;
  font-size: 11px;
}

/* Vietlott 号码球 */
.vietlott-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.vball {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  animation: ball-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.vball:nth-child(1) { animation-delay: 0.05s; }
.vball:nth-child(2) { animation-delay: 0.10s; }
.vball:nth-child(3) { animation-delay: 0.15s; }
.vball:nth-child(4) { animation-delay: 0.20s; }
.vball:nth-child(5) { animation-delay: 0.25s; }
.vball:nth-child(6) { animation-delay: 0.30s; }
.vball:nth-child(7) { animation-delay: 0.35s; }

.vball-special {
  background: linear-gradient(135deg, #E53935, #ff7043);
  box-shadow: 0 4px 18px rgba(229,57,53,0.45);
}
.vball-power {
  background: linear-gradient(135deg, #9C27B0, #ba68c8);
  box-shadow: 0 4px 18px rgba(156,39,176,0.40);
}
.vball-sm {
  width: 36px;
  height: 36px;
  font-size: 13px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  position: relative;
}
.vball-xs {
  width: 26px;
  height: 26px;
  font-size: 11px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.vball-matched {
  background: #fff !important;
  color: #E53935 !important;
  border: 3px solid #E53935;
  box-shadow: 0 0 0 3px rgba(229,57,53,0.25), 0 4px 12px rgba(0,0,0,0.15);
  transform: scale(1.15);
  font-weight: 800;
}
.vball-matched::after {
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  background: #E53935;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.vball-max3d {
  width: 62px;
  height: 62px;
  font-size: 19px;
  background: linear-gradient(135deg, #FF9800, #ffca28);
  box-shadow: 0 4px 18px rgba(255,152,0,0.40);
}

/* Power 6/55 号码布局 */
.vtlott-power-nums { display: flex; flex-direction: column; gap: 12px; }
.vtlott-power-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  text-align: center;
}

/* Max 3D 号码 */
.vtlott-max3d-nums { display: flex; flex-direction: column; gap: 8px; }
.vtlott-max3d-pair { display: flex; gap: 8px; justify-content: center; }

/* Keno 网格 */
.vtlott-keno-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.keno-ball {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  animation: ball-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* 奖等行 */
.vtlott-prizes {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.vtlott-prize-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 4px 0;
}
.vtlott-prize-row span:first-child { color: var(--text-mid); }
.vtlott-prize-row span:last-child { font-weight: 700; color: var(--text-dark); font-family: "Consolas","Monaco",monospace; }

/* 更多按钮 */
.vtlott-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--red-soft);
  border: 1px solid var(--red-border);
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  transition: 0.2s ease;
  text-decoration: none;
}
.vtlott-more-btn:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-1px);
}
.vtlott-more-btn-purple { background: var(--purple-soft); border-color: var(--purple-border); color: var(--purple); }
.vtlott-more-btn-purple:hover { background: var(--purple); color: #fff; }
.vtlott-more-btn-green { background: var(--green-soft); border-color: var(--green-border); color: var(--green); }
.vtlott-more-btn-green:hover { background: var(--green); color: #fff; }
.vtlott-more-btn-cyan { background: var(--cyan-soft); border-color: var(--cyan-border); color: var(--cyan); }
.vtlott-more-btn-cyan:hover { background: var(--cyan); color: #fff; }

/* ============================================================
   二十四、数字球动画
   ============================================================ */
@keyframes ball-in {
  0% { opacity: 0; transform: scale(0.3) translateY(-10px); }
  70% { transform: scale(1.1) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ball-glow {
  0%, 100% { box-shadow: 0 4px 14px rgba(229,57,53,0.3); }
  50% { box-shadow: 0 4px 28px rgba(229,57,53,0.6), 0 0 0 4px rgba(229,57,53,0.1); }
}
@keyframes ball-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.ball { animation: ball-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.ball-special { animation: ball-glow 2s ease-in-out infinite; }

/* 尾数统计 */
.loto-stat {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.loto-stat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 14px;
}
.loto-stat-grid,
.loto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.loto-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.loto-head-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--red-soft);
  border: 1px solid var(--red-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loto-tails {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.loto-tail {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
}
.loto-head-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: 0.2s;
}
.loto-head-card:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.loto-head-num-lg { font-size: 26px; font-weight: 800; }
.loto-head-tail-list { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.loto-tail-chip {
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--text-mid);
}
.loto-head-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-light);
}
.loto-none { color: var(--text-light); font-size: 13px; }

/* 奖项行颜色强化 */
.result-row.prize-db .result-label .prize-name {
  color: var(--red);
  font-weight: 800;
  font-size: 13px;
}
.result-row.prize-g1 .result-label .prize-name { color: var(--orange); font-weight: 700; }
.result-row.prize-g2 .result-label .prize-name { color: var(--green); font-weight: 700; }
.result-row.prize-g3 .result-label .prize-name { color: var(--cyan); font-weight: 700; }
.result-row { transition: 0.15s; }
.result-row:hover { background: var(--bg-subtle); border-radius: var(--r-sm); padding: 0 8px; margin: 0 -8px; }

/* 特殊号码区 */
.special-codes {
  background: var(--orange-soft);
  border: 1px solid var(--orange-border);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.special-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
  white-space: nowrap;
}
.special-balls { display: flex; gap: 8px; flex-wrap: wrap; }

/* 空状态 */
.result-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.result-empty svg { opacity: 0.4; }
.result-empty p { margin: 0; font-size: 15px; }

/* ============================================================
   二十五、统计面板
   ============================================================ */
.stats-hero {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border: 1px solid var(--cyan-border);
  border-radius: var(--r-xl);
  padding: 44px 50px;
  margin-bottom: 24px;
}
.stats-hero-inner { }
.stats-title {
  margin: 12px 0 10px;
  font-size: clamp(28px, 3.5vw, 44px);
  color: var(--text-dark);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.stats-desc {
  margin: 0;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.75;
  max-width: 620px;
}
.stats-grid-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}

/* 频率条 */
.freq-list { display: flex; flex-direction: column; gap: 10px; }
.freq-row {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 12px;
  align-items: center;
}
.freq-num { width: 48px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.freq-bar-wrap { background: var(--bg-subtle); border-radius: 6px; height: 14px; overflow: hidden; }
.freq-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  min-width: 8px;
}
.freq-count { font-size: 12px; font-weight: 700; color: var(--text-mid); text-align: right; }

/* ============================================================
   二十六、专区面板优化
   ============================================================ */
.region-section-card { }
.region-card-mini {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  transition: 0.2s;
}
.region-card-mini:hover { background: var(--bg-card); transform: translateY(-1px); box-shadow: var(--sh-sm); }
.region-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.region-card-header svg { color: var(--cyan); flex-shrink: 0; }
.region-prizes { display: flex; flex-direction: column; gap: 5px; }
.region-row-mini {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.rprize-label { color: var(--text-mid); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.rprize-nums {
  font-family: "Consolas","Monaco",monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: right;
}

/* 日期标签 */
.date-chip {
  display: inline-block;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-mid);
  white-space: nowrap;
}
.date-chip-today {
  background: var(--green-soft);
  border-color: var(--green-border);
  color: var(--green);
}

/* ============================================================
   二十七、工具卡片新增颜色
   ============================================================ */
.tool-card-mega  { background: linear-gradient(135deg, rgba(229,57,53,0.08), rgba(229,57,53,0.04)); border-color: rgba(229,57,53,0.15); color: var(--red); }
.tool-card-mega:hover  { background: rgba(229,57,53,0.13); transform: translateY(-3px); box-shadow: var(--sh-md); }
.tool-card-purple { background: var(--purple-soft); border-color: var(--purple-border); color: var(--purple); }
.tool-card-purple:hover { background: rgba(156,39,176,0.15); transform: translateY(-3px); box-shadow: var(--sh-md); }

/* Mega 导航点 */
.nav-dot-mega { background: #f06292; box-shadow: 0 0 6px rgba(240,98,146,0.7); }

/* 彩种卡片新增 */
.type-card-mega {
  background: linear-gradient(135deg, #fce4ec, #f8bbd0);
  border-color: #f8bbd0;
  color: #880e4f;
}
.type-card-mega::after { background: var(--red); }
.type-icon-mega {
  background: rgba(255,255,255,0.60);
  border: 2px solid rgba(229,57,53,0.25);
}

/* Mega 按钮 */
.btn-mega-outline {
  color: #fff;
  background: rgba(240,98,146,0.20);
  border-color: rgba(240,98,146,0.45);
  backdrop-filter: blur(4px);
}
.btn-mega-outline:hover {
  background: rgba(240,98,146,0.35);
  transform: translateY(-2px);
}

/* ============================================================
   二十八、响应式（严格隔离）
   ============================================================ */
@media (max-width: 1199px) {
  :root { --container: 100%; --pad: 20px; }
  .type-grid      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vietlott-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-grid     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid    { grid-template-columns: 1fr 1fr; }
  .portal-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid-main{ grid-template-columns: 1fr; }
  .hero-banner    { padding: 48px 0 56px; }
}

@media (max-width: 767px) {
  :root { --pad: 16px; }

  /* Logo 移动端适配 */
  .logo-wrap { gap: 10px; }
  .logo-icon { width: 42px; height: 42px; border-radius: 10px; }
  .logo-icon svg { width: 26px !important; height: 26px !important; }
  .logo-text strong { font-size: 15px; }
  .logo-text span { font-size: 10px; }

  .type-grid,
  .tools-grid,
  .vietlott-grid,
  .portal-grid,
  .articles-grid,
  .region-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* 导航 */
  .header-container { grid-template-columns: 1fr !important; gap: 10px; }
  .main-nav { justify-content: flex-start !important; flex-wrap: wrap; }
  .main-nav a { padding: 7px 14px; font-size: 13px; }

  /* Banner */
  .hero-banner { padding: 36px 0 44px; }
  .banner-title   { font-size: 28px; }
  .banner-desc    { font-size: 14px; }
  .banner-actions { flex-direction: column; gap: 10px; }
  .banner-actions .btn { width: 100%; justify-content: center; }

  /* Vietlott */
  .vietlott-hero { padding: 28px 22px !important; border-radius: var(--r-lg) !important; }
  .vietlott-hero-title { font-size: 26px; }
  .vietlott-type-card { padding: 20px 18px !important; border-radius: var(--r-md) !important; }
  .vtlott-keno-grid { grid-template-columns: repeat(5, 1fr); }
  .vball { width: 40px; height: 40px; font-size: 14px; }
  .vball-max3d { width: 52px; height: 52px; font-size: 16px; }
  .vtlott-logo-ball { width: 44px; height: 44px; font-size: 10px; }

  /* 通用内边距 */
  .section-card, .article-card, .result-card, .notice-card,
  .portal-card, .article-hero, .news-hero-card,
  .stats-hero { padding: 20px !important; border-radius: var(--r-md) !important; }

  /* 统计 */
  .freq-row { grid-template-columns: 44px 1fr 44px; gap: 8px; }

  /* 表格 */
  .history-table { font-size: 13px; display: block; overflow-x: auto; white-space: nowrap; }

  /* 顶部栏 */
  .topbar-inner { flex-direction: column; align-items: flex-start; gap: 3px; font-size: 11px; }

  /* 工具 */
  .tool-card { padding: 14px 16px; }

  /* 通知块 */
  .notice-inner { flex-direction: column; gap: 12px; }
  .notice-links { padding-top: 0; flex-direction: column; }

  /* 底部 */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   二十九、打印
   ============================================================ */
@media print {
  .site-header, .topbar, .main-nav, .site-footer { display: none; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}

/* N - 顶部公告栏 */
.topbar{background:linear-gradient(90deg,#1565c0,#0d47a1);color:#fff;font-size:13px;padding:0;position:sticky;top:0;z-index:200;box-shadow:0 2px 8px rgba(21,101,192,.3)}.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:8px 0;gap:16px}.topbar-brand{display:flex;align-items:center;gap:7px;font-weight:600;color:rgba(255,255,255,.95)}.topbar-date{font-family:Consolas,Monaco,monospace;font-size:12px;color:rgba(255,255,255,.8);white-space:nowrap}.news-ticker{background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;overflow:hidden;height:42px;position:relative;z-index:199}.news-ticker::after{content:"";position:absolute;right:0;top:0;bottom:0;width:60px;background:linear-gradient(90deg,transparent,#fff);pointer-events:none;z-index:1}.ticker-label{flex-shrink:0;background:#f44336;color:#fff;font-size:11px;font-weight:800;padding:0 14px;height:100%;display:flex;align-items:center;gap:6px;letter-spacing:.05em;text-transform:uppercase;z-index:2;position:relative}.ticker-track{display:flex;align-items:center;white-space:nowrap;padding:0 20px;will-change:transform}.ticker-item{font-size:13px;color:#333;padding:0 20px;font-weight:500}.ticker-sep{color:#f44336;font-size:10px;flex-shrink:0}.site-header{background:#fff;border-bottom:1px solid #e0e0e0;position:sticky;top:0;z-index:190;box-shadow:0 2px 12px rgba(0,0,0,.06)}.header-container{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px;padding:12px 0}.logo-wrap{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex-shrink:0}.logo-icon{width:44px;height:44px;background:linear-gradient(135deg,#e53935,#ff5722);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px rgba(229,57,53,.3)}.logo-text{display:flex;flex-direction:column}.logo-text strong{font-size:17px;font-weight:800;color:#1a1a2e;line-height:1.2}.logo-text span{font-size:11px;color:#888;font-weight:400}.main-nav{display:flex;align-items:center;gap:4px;justify-content:flex-end}.main-nav a{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;color:#555;transition:all .2s ease;white-space:nowrap}.main-nav a:hover,.main-nav a.active{background:#f5f5f5;color:#e53935}.main-nav a.active{font-weight:700}.nav-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.nav-dot-red{background:#e53935}.nav-dot-mega{background:#9c27b0}.nav-dot-cyan{background:#0288d1}.nav-dot-orange{background:#f57c00}.nav-dot-green{background:#43a047}.nav-dot-purple{background:#7b1fa2}.nav-legal-links{display:flex;gap:8px;margin-left:12px;padding-left:12px;border-left:1px solid #e0e0e0}.nav-legal-links a{font-size:12px!important;color:#999!important;padding:6px 10px!important}.nav-legal-links a:hover{color:#333!important}.main-content{min-height:calc(100vh - 140px);padding:32px 0 48px}.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-bottom:20px;font-size:13px;color:#999}.breadcrumbs a{color:#888;text-decoration:none;transition:color .15s}.breadcrumbs a:hover{color:#e53935}.crumb-sep{color:#ccc;font-size:11px}.back-to-top{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:#e53935;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(229,57,53,.4);opacity:0;transform:translateY(20px);transition:all .3s ease;z-index:999;pointer-events:none}.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}.back-to-top:hover{background:#c62828;transform:translateY(-3px);box-shadow:0 6px 20px rgba(229,57,53,.5)}.page-hero{border-radius:20px;padding:40px 48px;margin-bottom:28px;position:relative;overflow:hidden}.page-hero::before{content:"";position:absolute;inset:0;opacity:.06;background:radial-gradient(circle at 80% 50%,rgba(255,255,255,.3) 0%,transparent 60%)}.page-hero-inner{position:relative;z-index:1}.page-hero h1{margin:8px 0 12px;font-size:clamp(26px,3vw,40px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.15}.page-hero p{margin:0 0 16px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.7;max-width:680px}.page-hero-btns{display:flex;flex-wrap:wrap;gap:8px}.page-hero-red{background:linear-gradient(135deg,#e53935,#b71c1c)}.page-hero-mega{background:linear-gradient(135deg,#c62828,#880e4f)}.page-hero-cyan{background:linear-gradient(135deg,#0277bd,#01579b)}.page-hero-orange{background:linear-gradient(135deg,#e65100,#bf360c)}.page-hero-green{background:linear-gradient(135deg,#2e7d32,#1b5e20)}.page-hero-purple{background:linear-gradient(135deg,#6a1b9a,#4a148c)}.page-hero.keno-hero,.keno-hero{background:linear-gradient(135deg,#2e7d32,#1b5e20)!important}.mega-hero,.page-hero.mega-hero{background:linear-gradient(135deg,#c62828,#880e4f)!important}.power-hero,.page-hero.power-hero{background:linear-gradient(135deg,#880e4f,#4a148c)!important}.p535-hero,.page-hero.p535-hero{background:linear-gradient(135deg,#e65100,#bf360c)!important}.max3d-hero,.page-hero.max3d-hero{background:linear-gradient(135deg,#2e7d32,#1b5e20)!important}.card{background:#fff;border-radius:16px;padding:28px;box-shadow:0 1px 4px rgba(0,0,0,.06);border:1px solid #eee}.section-wrap{margin-bottom:28px}.section-header{margin-bottom:20px}.section-title{margin:0 0 4px;font-size:20px;font-weight:700;color:#1a1a2e}.section-sub{margin:0;font-size:14px;color:#888}.tag{display:inline-block;border-radius:6px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.04em}.tag-red{background:rgba(229,57,53,.12);color:#e53935}.tag-cyan{background:rgba(2,136,209,.12);color:#0288d1}.tag-orange{background:rgba(245,124,0,.12);color:#f57c00}.tag-green{background:rgba(67,160,71,.12);color:#2e7d32}.tag-purple{background:rgba(156,39,176,.12);color:#9c27b0}.tag-yellow{background:rgba(255,193,7,.2);color:#f57f17}.tag-blue{background:rgba(25,118,210,.12);color:#1565c0}.tag-teal{background:rgba(0,105,92,.12);color:#00695c}.tag-indigo{background:rgba(94,53,177,.12);color:#5e35b1}.tag-outline{background:rgba(255,255,255,.18);color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.3)}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;border:none;transition:all .2s ease;white-space:nowrap}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15)}.btn:active{transform:translateY(0)}.btn-red{background:#e53935;color:#fff}.btn-red:hover{background:#c62828}.btn-green{background:#2e7d32;color:#fff}.btn-green:hover{background:#1b5e20}.btn-cyan{background:#0288d1;color:#fff}.btn-cyan:hover{background:#01579b}.btn-orange{background:#e65100;color:#fff}.btn-orange:hover{background:#bf360c}.btn-purple{background:#7b1fa2;color:#fff}.btn-purple:hover{background:#6a1b9a}.btn-blue{background:#1565c0;color:#fff}.btn-blue:hover{background:#0d47a1}.btn-teal{background:#00695c;color:#fff}.btn-teal:hover{background:#004d40}.btn-indigo{background:#5e35b1;color:#fff}.btn-indigo:hover{background:#4527a0}.btn-amber{background:#f9a825;color:#333}.btn-amber:hover{background:#f57f17}.btn-mega{background:linear-gradient(135deg,#e53935,#c62828);color:#fff}.btn-outline-mega{background:rgba(229,57,53,.12);border:2px solid rgba(229,57,53,.4);color:#c62828;backdrop-filter:blur(4px)}.btn-outline-mega:hover{background:rgba(229,57,53,.2)}.btn-outline-cyan{background:rgba(2,136,209,.1);border:2px solid rgba(2,136,209,.35);color:#0288d1}.btn-outline-cyan:hover{background:rgba(2,136,209,.18)}.btn-sm{padding:8px 18px;font-size:13px}.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.qa-card{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:14px;text-decoration:none;transition:all .2s ease;border:1px solid #eee}.qa-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1)}.qa-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.qa-info{flex:1}.qa-info strong{display:block;font-size:15px;font-weight:700;color:#1a1a2e;margin-bottom:2px}.qa-info span{font-size:12px;color:#888}.qa-arrow{color:#ccc;transition:transform .2s}.qa-card:hover .qa-arrow{transform:translateX(4px);color:#e53935}.type-card-red .qa-icon{background:rgba(229,57,53,.1);color:#e53935}.type-card-mega .qa-icon{background:rgba(156,39,176,.1);color:#9c27b0}.type-card-cyan .qa-icon{background:rgba(2,136,209,.1);color:#0288d1}.type-card-orange .qa-icon{background:rgba(245,124,0,.1);color:#f57c00}.type-card-green .qa-icon{background:rgba(67,160,71,.1);color:#2e7d32}.vietlott-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.vtlott-card[data-ltype="max3dpro"]{grid-column:span 2}
.vtlott-card[data-ltype="keno"]{grid-column:span 2}.vtlott-card{background:#fff;border:1px solid #eee;border-radius:16px;overflow:hidden;transition:all .25s ease;display:flex;flex-direction:column;gap:14px}.vtlott-card:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(0,0,0,.12)}.vtlott-card-header{padding:20px 20px 0;display:flex;align-items:flex-start;gap:12px}.mega-grad{background:linear-gradient(135deg,#fff5f5,#fff);border-top:3px solid #e53935}.power-grad{background:linear-gradient(135deg,#f3e5f5,#fff);border-top:3px solid #9c27b0}.p535-grad{background:linear-gradient(135deg,#fff3e0,#fff);border-top:3px solid #e65100}.max3d-grad{background:linear-gradient(135deg,#e8f5e9,#fff);border-top:3px solid #2e7d32}.keno-grad{background:linear-gradient(135deg,#f1f8e9,#fff);border-top:3px solid #43a047}.vtlott-logo-ball{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;line-height:1.2;color:#fff;flex-shrink:0;letter-spacing:.03em}.mega-grad .vtlott-logo-ball{background:linear-gradient(135deg,#e53935,#ff7043)}.power-grad .vtlott-logo-ball{background:linear-gradient(135deg,#9c27b0,#ce93d8)}.p535-grad .vtlott-logo-ball{background:linear-gradient(135deg,#e65100,#ffca28)}.max3d-grad .vtlott-logo-ball{background:linear-gradient(135deg,#2e7d32,#81c784)}.keno-grad .vtlott-logo-ball{background:linear-gradient(135deg,#43a047,#a5d6a7)}.max3dpro-grad{background:linear-gradient(135deg,#e3f2fd,#fff);border-top:3px solid #1565c0}.max3dpro-grad .vtlott-logo-ball{background:linear-gradient(135deg,#1565c0,#42a5f5)}.dt123-grad{background:linear-gradient(135deg,#e0f2f1,#fff);border-top:3px solid #00695c}.dt123-grad .vtlott-logo-ball{background:linear-gradient(135deg,#00695c,#26a69a)}.dt636-grad{background:linear-gradient(135deg,#ede7f6,#fff);border-top:3px solid #5e35b1}.dt636-grad .vtlott-logo-ball{background:linear-gradient(135deg,#5e35b1,#9575cd)}.tt4-grad{background:linear-gradient(135deg,#fff8e1,#fff);border-top:3px solid #f9a825}.tt4-grad .vtlott-logo-ball{background:linear-gradient(135deg,#f9a825,#fdd835)}.vtlott-card-title h3{margin:0;font-size:18px;font-weight:700;color:#1a1a2e}.vtlott-card-title span{font-size:11px;color:#999}.vtlott-card-balls{padding:0 20px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.vtlott-card-info{padding:0 20px}.vtlott-jackpot{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#fff8e1;border-radius:8px;margin-bottom:8px;font-size:13px}.vtlott-jackpot span{color:#888;font-weight:600}.vtlott-jackpot strong{color:#e53935;font-size:15px;font-family:Consolas,Monaco,monospace}.vtlott-prize-row{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid #f5f5f5;color:#888}.vtlott-prize-row:last-child{border-bottom:none}.vtlott-prize-row strong{color:#333;font-family:Consolas,Monaco,monospace}.vtlott-card .btn{margin:0 20px 20px;justify-content:center}.keno-ball-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:0 20px}.keno-ball{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}.vball{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:transform .2s ease;flex-shrink:0}.vball:hover{transform:scale(1.1)}.vball-lg{width:40px;height:40px;font-size:14px}.vball-sm{width:36px;height:36px;font-size:13px}.vball-power{background:linear-gradient(135deg,#9c27b0,#ce93d8)!important}.vball-matched{box-shadow:0 0 0 3px #4caf50,0 4px 12px rgba(76,175,80,.4)!important;transform:scale(1.15)!important}.ball{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#e53935,#ff5722);color:#fff;font-size:14px;font-weight:800;box-shadow:0 3px 10px rgba(229,57,53,.3)}.ball-sm{width:34px;height:34px;font-size:12px}.ball-gold{background:linear-gradient(135deg,#f9a825,#f57f17);box-shadow:0 3px 10px rgba(249,168,37,.4)}.ball-row{display:flex;flex-wrap:wrap;gap:6px}.mb-result-section{background:#fff;border-radius:20px;padding:32px;border:1px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:28px}.mb-result-header{margin-bottom:24px}.mb-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(229,57,53,.08);border:1px solid rgba(229,57,53,.2);border-radius:8px;padding:6px 14px;font-size:12px;font-weight:600;color:#e53935;margin-bottom:10px}.mb-result-title{margin:0 0 4px;font-size:22px;font-weight:800;color:#1a1a2e}.mb-result-sub{margin:0;font-size:13px;color:#888}.prize-table{display:flex;flex-direction:column;gap:4px;margin-bottom:24px}.prize-row{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:center;padding:8px 12px;border-radius:10px;transition:background .15s}.prize-row:hover{background:#fafafa}.prize-label{font-size:13px;font-weight:700;color:#555}.prize-nums{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.prize-db .prize-label{color:#e53935;font-size:14px}.prize-g1 .prize-label{color:#1565c0}.prize-g2 .prize-label{color:#2e7d32}.prize-g3 .prize-label{color:#f57c00}.prize-db .prize-row{background:rgba(229,57,53,.04)}.prize-g1 .prize-row{background:rgba(21,101,192,.04)}.loto-section{border-top:1px solid #eee;padding-top:20px}.loto-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#333;margin-bottom:16px}.loto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}.loto-head-card{background:#fafafa;border:1px solid #eee;border-radius:10px;padding:10px 6px;text-align:center;transition:all .2s}.loto-head-card:hover{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-2px)}.loto-hnum{font-size:22px;font-weight:800;line-height:1;margin-bottom:6px}.loto-tlist{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}.loto-tail{font-size:11px;font-weight:600;background:#fff;border:1px solid #ddd;border-radius:4px;padding:1px 5px;color:#555}.loto-hcnt{font-size:10px;color:#999;font-weight:600;margin-top:4px}.loto-none{font-size:14px;color:#ccc}.special-codes{background:#fff8e1;border:1px solid #ffe082;border-radius:12px;padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.special-label{font-size:12px;font-weight:700;color:#f57f17;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.special-balls{display:flex;gap:8px;flex-wrap:wrap}.result-detail-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;margin-bottom:28px}.detail-card{background:#fff;border-radius:20px;padding:32px;border:1px solid #eee}.detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:24px}.detail-draw,.detail-date{font-size:13px;color:#888}.detail-draw strong{color:#333}.detail-balls{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px;padding:24px 0}.ball-section-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#aaa}.balls-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.detail-jackpot{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,#fff8e1,#fff3e0);border-radius:14px;margin-bottom:20px;border:1px solid #ffe082}.jackpot-num{font-size:22px;font-weight:800;font-family:Consolas,Monaco,monospace;color:#e53935}.jackpot-purple{color:#7b1fa2}.jackpot-orange{color:#e65100}.jackpot-green{color:#2e7d32}.detail-prizes{display:flex;flex-direction:column;gap:6px;margin-bottom:24px}.detail-prize-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#fafafa;border-radius:8px;font-size:13px}.detail-prize-row span{color:#666}.detail-prize-row strong{color:#333;font-family:Consolas,Monaco,monospace}.result-detail-sidebar{display:flex;flex-direction:column;gap:16px}.sidebar-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:20px}.sidebar-card h3{margin:0 0 12px;font-size:15px;font-weight:700;color:#333;border-bottom:1px solid #eee;padding-bottom:10px}.sidebar-link{display:flex;align-items:center;gap:6px;padding:8px 0;color:#666;text-decoration:none;font-size:13px;font-weight:500;border-bottom:1px solid #f5f5f5;transition:color .15s}.sidebar-link:last-child{border-bottom:none}.sidebar-link:hover{color:#e53935}.sidebar-text{font-size:13px;color:#666;line-height:1.7;margin:0 0 10px}.keno-ball-grid-lg{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:24px}.keno-ball-lg{aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;box-shadow:0 3px 12px rgba(0,0,0,.15)}.keno-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px}.keno-legend-item{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}.kl-dot{width:10px;height:10px;border-radius:50%}.keno-table-section h3{font-size:15px;font-weight:700;margin:0 0 12px}.keno-table{width:100%;border-collapse:collapse;font-size:13px}.keno-table th{background:#f5f5f5;padding:8px 12px;text-align:left;font-weight:700;color:#555;border-bottom:2px solid #e0e0e0}.keno-table td{padding:8px 12px;border-bottom:1px solid #f5f5f5;color:#333}.keno-table tr:hover td{background:#fafafa}.tools-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.tool-mini-card{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:14px;text-decoration:none;transition:all .2s ease;border:1px solid #eee}.tool-mini-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1)}.tool-mini-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.tool-mini-info{flex:1}.tool-mini-info strong{display:block;font-size:14px;font-weight:700;color:#1a1a2e;margin-bottom:2px}.tool-mini-info span{font-size:12px;color:#888}.tool-mini-red .tool-mini-icon{background:rgba(229,57,53,.1);color:#e53935}.tool-mini-mega .tool-mini-icon{background:rgba(156,39,176,.1);color:#9c27b0}.tool-mini-cyan .tool-mini-icon{background:rgba(2,136,209,.1);color:#0288d1}.tool-mini-purple.tool-mini-icon{background:rgba(123,31,162,.1);color:#7b1fa2}.tools-full-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:28px}.tool-full-card{background:#fff;border:1px solid #eee;border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:14px;transition:all .2s ease}.tool-full-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.1)}.tool-full-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center}.tool-icon-red{background:rgba(229,57,53,.1);color:#e53935}.tool-icon-mega{background:rgba(156,39,176,.1);color:#9c27b0}.tool-icon-cyan{background:rgba(2,136,209,.1);color:#0288d1}.tool-full-card h3{margin:0;font-size:18px;font-weight:700;color:#1a1a2e}.tool-full-card p{margin:0;font-size:14px;color:#666;line-height:1.7}.tool-compare-form{margin-bottom:28px}.compare-step{margin-bottom:24px}.compare-step h3{font-size:16px;font-weight:700;color:#333;margin:0 0 14px}.compare-hint{font-size:12px;color:#999;font-weight:400}.compare-type-grid{display:flex;flex-wrap:wrap;gap:10px}.compare-type-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 20px;border-radius:12px;border:2px solid #eee;background:#fff;cursor:pointer;transition:all .2s;font-size:13px}.compare-type-btn small{color:#888;font-size:11px}.compare-type-btn.active{border-color:#e53935;background:rgba(229,57,53,.05)}.compare-type-btn:hover{border-color:#e53935}.compare-input{width:100%;padding:12px 16px;border:2px solid #e0e0e0;border-radius:12px;font-size:16px;font-family:Consolas,Monaco,monospace;resize:vertical;transition:border-color .2s;box-sizing:border-box}.compare-input:focus{outline:none;border-color:#e53935}.compare-num-display{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:40px}.compare-result{display:none}.compare-result-box{background:#fff;border:2px solid #e0e0e0;border-radius:16px;padding:24px;animation:slideIn .3s ease}.compare-result-title{font-size:16px;font-weight:700;color:#333;margin-bottom:12px}.compare-no-match{color:#888;font-size:15px}.compare-match-count{font-size:18px;font-weight:700;color:#e53935;margin-bottom:16px}.compare-ref{margin-bottom:28px}.compare-ref h3{font-size:16px;font-weight:700;margin:0 0 14px;color:#333}.compare-ref-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.ref-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}.ref-balls{display:flex;flex-wrap:wrap;gap:6px}.ref-date{font-size:11px;color:#999}.tool-generator{margin-bottom:28px}.gen-controls{display:flex;flex-direction:column;gap:20px;margin-bottom:24px}.gen-step h3{font-size:16px;font-weight:700;color:#333;margin:0 0 14px}.gen-type-grid{display:flex;flex-wrap:wrap;gap:10px}.gen-type-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 20px;border-radius:12px;border:2px solid #eee;background:#fff;cursor:pointer;transition:all .2s}.gen-type-btn small{color:#888;font-size:11px}.gen-type-btn.active{border-color:#e53935;background:rgba(229,57,53,.05)}.gen-type-btn:hover{border-color:#e53935}.gen-count-row{display:flex;gap:8px}.gen-count-btn{padding:8px 20px;border-radius:8px;border:2px solid #eee;background:#fff;cursor:pointer;font-size:14px;font-weight:600;color:#555;transition:all .2s}.gen-count-btn.active{border-color:#e53935;background:rgba(229,57,53,.08);color:#e53935}.gen-count-btn:hover{border-color:#e53935}.gen-result{display:none;background:#fff;border:1px solid #eee;border-radius:16px;padding:24px}.gen-result h3{font-size:16px;font-weight:700;margin:0 0 16px;color:#333}.gen-sets{display:flex;flex-direction:column;gap:12px}.gen-set{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fafafa;border-radius:10px;flex-wrap:wrap}.gen-set-label{font-size:13px;font-weight:700;color:#888;min-width:40px}.history-filter{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px;padding:16px 20px;background:#fff;border-radius:12px;border:1px solid #eee}.date-filter-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.date-filter-form label{font-size:13px;font-weight:600;color:#555}.date-filter-form input[type="date"]{padding:7px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:13px;font-family:inherit}.date-filter-form input:focus{outline:none;border-color:#e53935}.history-pagination{display:flex;gap:6px;flex-wrap:wrap}.page-chip{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;color:#666;background:#f5f5f5;border:1px solid #e0e0e0;text-decoration:none;transition:all .15s}.page-chip:hover{border-color:#e53935;color:#e53935}.page-chip-active{background:#e53935;color:#fff!important;border-color:#e53935!important}.history-list{display:flex;flex-direction:column;gap:16px}.history-item{background:#fff;border:1px solid #eee;border-radius:16px;padding:20px 24px;display:grid;grid-template-columns:120px 1fr;gap:20px;transition:all .2s}.history-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-2px)}.history-today{border-color:rgba(229,57,53,.3);background:rgba(229,57,53,.02)}.history-date-col{display:flex;flex-direction:column;gap:4px}.hist-day{font-size:18px;font-weight:800;color:#e53935}.hist-date{font-size:12px;color:#888;font-weight:600}.history-results-col{display:flex;gap:12px;flex-wrap:wrap}.hist-result-card{flex:1;min-width:140px;background:#fafafa;border:1px solid #eee;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}.hist-balls{display:flex;flex-wrap:wrap;gap:4px}.hist-jackpot{font-size:11px;font-weight:700;color:#e53935;font-family:Consolas,Monaco,monospace}.stats-tabs{display:flex;gap:4px;border-bottom:2px solid #eee;margin-bottom:24px;padding-bottom:0}.stats-tab{padding:10px 20px;font-size:14px;font-weight:600;color:#888;text-decoration:none;border-radius:8px 8px 0 0;transition:all .2s;border-bottom:2px solid transparent;margin-bottom:-2px}.stats-tab:hover{color:#0288d1}.stats-tab.active{color:#0288d1;border-bottom-color:#0288d1;background:rgba(2,136,209,.05)}.stats-overview-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:28px}.stats-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:24px}.stats-card h3{font-size:16px;font-weight:700;color:#333;margin:0 0 16px}.freq-list{display:flex;flex-direction:column;gap:8px}.freq-row{display:grid;grid-template-columns:40px 1fr 40px;gap:10px;align-items:center}.freq-bar-wrap{background:#f0f0f0;border-radius:6px;height:12px;overflow:hidden}.freq-bar{height:100%;border-radius:6px;transition:width 1s ease}.freq-count{font-size:11px;font-weight:700;color:#888;text-align:right}.odd-even-summary{display:flex;align-items:center;gap:12px;margin-bottom:16px}.oe-item{flex:1;text-align:center}.oe-num{display:block;font-size:32px;font-weight:800;line-height:1}.oe-odd .oe-num{color:#4caf50}.oe-even .oe-num{color:#1565c0}.oe-label{font-size:12px;color:#888;font-weight:600}.oe-vs{font-size:13px;color:#ccc;font-weight:700}.oe-bar{display:flex;border-radius:6px;overflow:hidden;height:10px;margin-bottom:16px}.oe-bar-odd{background:#4caf50}.oe-bar-even{background:#1565c0}.range-list{display:flex;flex-direction:column;gap:8px}.range-row{display:grid;grid-template-columns:60px 1fr 40px;gap:8px;align-items:center}.range-label{font-size:13px;font-weight:700;color:#555}.range-bar-wrap{background:#f0f0f0;border-radius:6px;height:10px;overflow:hidden}.range-bar{height:100%;border-radius:6px}.range-pct{font-size:12px;font-weight:700;color:#888;text-align:right}.stats-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.hc-section-header{margin-bottom:16px}.hc-section-header p{font-size:13px;color:#888;margin:4px 0 0}.hot-grid,.cold-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.hot-card,.cold-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px 10px;text-align:center;transition:all .2s}.hot-card{border-top:3px solid #e53935}.hot-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(229,57,53,.15)}.cold-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.1)}.hot-num{display:block;font-size:28px;font-weight:800;line-height:1;margin-bottom:6px}.hot-count{font-size:12px;color:#888;font-weight:600}.hot-bar{height:4px;background:#f0f0f0;border-radius:2px;margin-top:8px;overflow:hidden}.hot-bar div{height:100%;border-radius:2px}.cold-num{display:block;font-size:24px;font-weight:800;line-height:1;margin-bottom:4px}.cold-count{font-size:11px;color:#999}.oe-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}.oe-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:24px;border-top:4px solid}.oe-odd{border-top-color:#4caf50}.oe-even{border-top-color:#1565c0}.oe-card h3{margin:0 0 8px;font-size:18px;font-weight:700}.oe-count-big{font-size:36px;font-weight:800;line-height:1;margin:8px 0}.oe-visual{margin-top:16px}.oe-ball-label{font-size:11px;color:#888;display:block;margin-bottom:8px}.oe-ball-row{display:flex;flex-wrap:wrap;gap:4px}.oe-patterns h3{font-size:16px;font-weight:700;margin:0 0 14px}.patterns-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.pattern-card{background:#fafafa;border:1px solid #eee;border-radius:10px;padding:12px;text-align:center}.pattern-label{display:block;font-size:14px;font-weight:700;color:#333;margin-bottom:4px}.pattern-desc{font-size:11px;color:#888}.range-detail-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.range-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:20px 14px;border-top:4px solid}.range-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.08)}.range-card-title{font-size:18px;font-weight:800;margin-bottom:12px}.range-nums-grid{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.range-num-ball{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;opacity:.7}.range-card-count{font-size:11px;color:#999;text-align:center;margin-top:8px}.calendar-grid{display:flex;flex-direction:column;gap:20px;margin-bottom:28px}.calendar-section h3{font-size:16px;font-weight:700;margin:0 0 14px;color:#333}.calendar-table{width:100%;border-collapse:collapse;font-size:13px}.calendar-table th{background:#f5f5f5;padding:10px 14px;text-align:left;font-weight:700;color:#555;border-bottom:2px solid #e0e0e0}.calendar-table td{padding:10px 14px;border-bottom:1px solid #f5f5f5;color:#333}.calendar-table tr:hover td{background:#fafafa}.calendar-month h3{font-size:18px;font-weight:700;margin:0 0 16px}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.month-day-label{text-align:center;font-size:11px;font-weight:700;color:#999;padding:4px}.month-day{background:#fff;border:1px solid #eee;border-radius:8px;padding:8px 6px;min-height:70px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .15s}.month-day:hover{background:#fafafa;box-shadow:0 2px 8px rgba(0,0,0,.06)}.month-day-empty{background:transparent;border:none}.month-day-weekend{background:rgba(229,57,53,.03)}.month-day-today{border-color:#e53935;background:rgba(229,57,53,.04)}.month-day-num{font-size:13px;font-weight:700;color:#333}.month-day-weekend .month-day-num{color:#e53935}.draw-tag{font-size:8px;font-weight:700;padding:1px 4px;border-radius:3px;color:#fff;letter-spacing:.03em}.draw-tag-red{background:#e53935}.draw-tag-purple{background:#9c27b0}.draw-tag-orange{background:#e65100}.draw-tag-green{background:#43a047}.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:28px}.contact-form-wrap{background:#fff;border:1px solid #eee;border-radius:20px;padding:32px}.contact-form-wrap h3{font-size:20px;font-weight:700;margin:0 0 20px}.contact-form{display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:13px;font-weight:600;color:#555}.form-group input,.form-group select,.form-group textarea{padding:11px 14px;border:2px solid #e0e0e0;border-radius:10px;font-size:14px;font-family:inherit;transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#7b1fa2}.form-group textarea{resize:vertical}.form-success{display:flex;align-items:center;gap:8px;padding:14px 16px;background:#e8f5e9;border:1px solid #a5d6a7;border-radius:10px;font-size:14px;font-weight:600;color:#2e7d32;margin-top:8px}.contact-info{display:flex;flex-direction:column;gap:16px}.contact-info-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:24px}.contact-info-card h3{font-size:16px;font-weight:700;margin:0 0 14px;color:#333;border-bottom:1px solid #eee;padding-bottom:10px}.contact-info-card p{font-size:13px;color:#666;line-height:1.7;margin:0}.contact-info-item{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;color:#555;border-bottom:1px solid #f5f5f5}.contact-info-item:last-child{border-bottom:none}.legal-content{background:#fff;border:1px solid #eee;border-radius:20px;padding:40px 48px;max-width:860px}.legal-content h3{font-size:17px;font-weight:700;color:#1a1a2e;margin:28px 0 10px;padding-top:20px;border-top:1px solid #eee}.legal-content h3:first-child{margin-top:0;padding-top:0;border-top:none}.legal-content p{font-size:14px;color:#444;line-height:1.8;margin:0 0 12px}.legal-content a{color:#0288d1;text-decoration:none}.legal-content a:hover{text-decoration:underline}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:28px}.news-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px;transition:all .2s ease}.news-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.1)}.news-card h2{margin:0;font-size:16px;font-weight:700;line-height:1.4}.news-card h2 a{color:#1a1a2e;text-decoration:none}.news-card h2 a:hover{color:#e53935}.news-card p{margin:0;font-size:13px;color:#666;line-height:1.7;flex:1}.news-read-more{font-size:13px;font-weight:700;color:#e53935;text-decoration:none}.news-read-more:hover{text-decoration:underline}.editor-note{display:flex;align-items:flex-start;gap:16px;background:rgba(123,31,162,.05);border:1px solid rgba(123,31,162,.15);border-radius:16px;padding:20px 24px;margin-bottom:28px;flex-wrap:wrap}.en-icon{width:40px;height:40px;border-radius:10px;background:rgba(123,31,162,.12);display:flex;align-items:center;justify-content:center;color:#7b1fa2;flex-shrink:0}.en-text{flex:1;min-width:200px}.en-text strong{display:block;font-size:14px;font-weight:700;color:#7b1fa2;margin-bottom:4px}.en-text p{margin:0;font-size:13px;color:#666;line-height:1.7}.en-links{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}.site-footer{background:#1a1a2e;color:rgba(255,255,255,.8);padding:60px 0 0}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:#fff;font-size:18px;font-weight:800}.footer-brand p{font-size:13px;line-height:1.7;color:rgba(255,255,255,.6);margin:0 0 12px}.footer-timezone{font-size:11px;color:rgba(255,255,255,.4)}.footer-col h4{font-size:13px;font-weight:700;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px}.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.footer-col ul li a{font-size:13px;color:rgba(255,255,255,.6);text-decoration:none;transition:color .15s}.footer-col ul li a:hover{color:#fff}.footer-bottom{padding:16px 0}.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;color:rgba(255,255,255,.4)}.footer-legal-links{display:flex;gap:16px}.footer-legal-links a{color:rgba(255,255,255,.4);text-decoration:none;font-size:12px}.footer-legal-links a:hover{color:rgba(255,255,255,.8)}.skeleton-box{display:flex;flex-direction:column;gap:10px}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}.skeleton-title{height:24px;width:60%}.skeleton-text{height:16px;width:80%}.skeleton-block{height:120px;width:100%}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes slideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.live-pulse{width:8px;height:8px;border-radius:50%;background:#e53935;display:inline-block;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,57,53,.4)}50%{box-shadow:0 0 0 6px rgba(229,57,53,0)}}.spinner{width:32px;height:32px;border:3px solid rgba(0,0,0,.1);border-top-color:#e53935;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay{position:absolute;inset:0;background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;border-radius:12px;z-index:5}.demo-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(76,175,80,.12);color:#43a047;border:1px solid rgba(76,175,80,.25);margin-left:auto}.mt-mn-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}.mt-mn-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:20px;position:relative}.mt-mn-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:13px;color:#888}.mt-mn-results{display:flex;flex-direction:column;gap:6px}.mt-city-row{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;background:#fafafa;border-radius:8px;font-size:13px}.mt-city-row strong{color:#333;font-weight:600}.db-num{font-family:Consolas,Monaco,monospace;font-weight:700;color:#e53935}.hero-banner{background:linear-gradient(135deg,#e53935 0%,#c62828 50%,#880e4f 100%);position:relative;overflow:hidden}.hero-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.08) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,200,100,.06) 0%,transparent 40%);pointer-events:none}.hero-banner::after{content:"";position:absolute;top:-50%;right:-10%;width:300px;height:300px;background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 70%);pointer-events:none}.hero-content{position:relative;z-index:1;max-width:700px}.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:6px 14px;font-size:12px;font-weight:700;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:.05em;margin-bottom:20px}.hero-title{margin:0 0 14px;font-size:clamp(30px,4vw,52px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1}.hero-desc{margin:0 0 24px;font-size:16px;color:rgba(255,255,255,.78);line-height:1.75;max-width:580px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.mobile-menu-btn{display:none;flex-direction:column;gap:5px;padding:8px;background:none;border:none;cursor:pointer;border-radius:6px}.mobile-menu-btn span{display:block;width:22px;height:2px;background:#333;border-radius:2px;transition:all .3s ease}.mobile-menu-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.mobile-menu-btn.active span:nth-child(2){opacity:0}.mobile-menu-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.nav-close-btn{display:none}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:1199px){.vietlott-grid{grid-template-columns:repeat(2,1fr)}.vtlott-card[data-ltype="max3dpro"],.vtlott-card[data-ltype="keno"]{grid-column:span 1}.tools-full-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.stats-overview-grid{grid-template-columns:1fr 1fr}.range-detail-grid{grid-template-columns:repeat(3,1fr)}.oe-detail-grid{grid-template-columns:1fr}}@media (max-width:991px){.result-detail-grid,.contact-grid,.stats-detail-grid,.history-item{grid-template-columns:1fr}}@media (max-width:767px){.header-container{grid-template-columns:1fr auto}.mobile-menu-btn{display:flex}.main-nav{position:fixed;top:0;right:-100%;width:80%;max-width:320px;height:100vh;background:#fff;flex-direction:column;align-items:flex-start;padding:80px 24px 32px;box-shadow:-4px 0 24px rgba(0,0,0,.15);transition:right .3s ease;overflow-y:auto;justify-content:flex-start;gap:2px;z-index:200}.main-nav.nav-open{right:0}.main-nav a{width:100%;padding:12px 16px;font-size:16px}.nav-close-btn{display:block;position:absolute;top:20px;right:20px;background:none;border:none;font-size:22px;cursor:pointer;color:#888}.nav-legal-links{margin-left:0;padding-left:0;border-left:none;flex-direction:row;flex-wrap:wrap}.hero-banner{padding:36px 24px;border-radius:16px}.hero-title{font-size:28px}.hero-actions{flex-direction:column}.hero-actions .btn{justify-content:center}.qa-grid,.vietlott-grid,.news-grid{grid-template-columns:1fr}.tools-mini-grid{grid-template-columns:repeat(2,1fr)}.tools-full-grid,.mt-mn-grid,.compare-ref-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.page-hero{padding:28px 20px;border-radius:14px}.page-hero h1{font-size:24px}.stats-overview-grid{grid-template-columns:1fr}.patterns-grid,.range-detail-grid{grid-template-columns:repeat(2,1fr)}.legal-content{padding:24px 20px;border-radius:14px}.detail-card,.mb-result-section{padding:20px;border-radius:14px}.footer-bottom-inner{flex-direction:column;align-items:flex-start;gap:8px}.topbar-inner{flex-direction:column;align-items:flex-start;gap:2px;font-size:11px}.en-links,.gen-count-row,.gen-type-grid{flex-direction:column}}@media print{.site-header,.topbar,.news-ticker,.site-footer,.back-to-top,.main-nav,.hero-banner{display:none}body{background:#fff;color:#000;font-size:14px}.main-content{padding:0}.card,.detail-card,.mb-result-section{box-shadow:none;border:1px solid #ccc}}

/* ============================================================
   三十、AI 分析、评论区、视频 — 新增组件
   ============================================================ */

/* --- AI 分析区块 --- */
.ai-analysis-section{margin-bottom:28px}
.ai-analysis-wrap{background:#fff;border:1px solid #eee;border-radius:20px;overflow:hidden}
.ai-analysis-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:linear-gradient(135deg,rgba(123,31,162,.04),rgba(74,20,140,.04));border-bottom:1px solid #eee;flex-wrap:wrap;gap:10px}
.ai-badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#7b1fa2;background:rgba(123,31,162,.08);border:1px solid rgba(123,31,162,.18);padding:6px 14px;border-radius:8px}
.ai-source{font-size:12px;color:#999}
.ai-analysis-body{padding:24px;display:flex;flex-direction:column;gap:24px}
.ai-section h4{font-size:15px;font-weight:700;color:#1a1a2e;margin:0 0 14px}
.freq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.freq-group{display:flex;flex-direction:column;gap:10px}
.freq-label{font-size:12px;font-weight:700;padding:4px 10px;border-radius:6px;display:inline-block}
.freq-label.hot{background:rgba(229,57,53,.08);color:#e53935}
.freq-label.cold{background:rgba(2,136,209,.08);color:#0288d1}
.freq-nums{display:flex;flex-wrap:wrap;gap:6px}
.freq-num{width:40px;height:40px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;line-height:1}
.freq-num small{font-size:9px;opacity:.75;line-height:1;margin-top:2px}
.cold-num{background:#90a4ae!important}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.stat-item{background:#fafafa;border:1px solid #eee;border-radius:10px;padding:12px 14px;text-align:center}
.stat-label{display:block;font-size:11px;font-weight:600;color:#888;margin-bottom:4px}
.stat-value{display:block;font-size:20px;font-weight:800;color:#1a1a2e;line-height:1;font-family:Consolas,Monaco,monospace}
.ai-insights{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ai-insights li{background:#fafafa;border-left:3px solid #7b1fa2;border-radius:0 8px 8px 0;padding:12px 16px;font-size:13px;color:#444;line-height:1.7}
.ai-conclusion{background:rgba(123,31,162,.04);border:1px solid rgba(123,31,162,.12);border-radius:12px;padding:16px 20px;font-size:14px;color:#333;line-height:1.8;margin:0}

/* --- 评论区 --- */
.comments-section{margin-bottom:28px}
.video-comments{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border-radius:20px;padding:32px;margin:28px 0}
.video-comments .comments-header{text-align:center;margin-bottom:28px}
.video-comments .comments-header h2{color:#fff;font-size:22px;font-weight:800;margin:0 0 8px}
.video-comments .comments-header p{color:rgba(255,255,255,.6);font-size:13px;margin:0}
.video-comments .comment-item{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:14px}
.video-comments .comment-item:hover{background:rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.3);transform:translateY(-2px)}
.video-comments .comment-avatar{font-size:15px;font-weight:900}
.video-comments .comment-header strong{color:#fff;font-size:14px}
.video-comments .comment-emotion{font-size:15px;color:rgba(255,255,255,.8)}
.video-comments .comment-time{color:rgba(255,255,255,.4)}
.video-comments .comment-body p{color:rgba(255,255,255,.85);font-size:14px;line-height:1.75}
.video-comments .comment-upvotes{color:rgba(255,255,255,.4);font-size:12px}
.video-comments .comment-upvotes:hover{color:#ff7043}
.video-comments .no-comments{color:rgba(255,255,255,.5)}
.comments-list{display:flex;flex-direction:column;gap:16px}
.comment-item{display:flex;gap:14px;background:#fff;border:1px solid #eee;border-radius:16px;padding:18px 20px;transition:all .2s ease}
.comment-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-1px)}
.comment-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;flex-shrink:0;background:linear-gradient(135deg,#e53935,#ff7043)}
.comment-body{flex:1;min-width:0}
.comment-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.comment-header strong{font-size:14px;font-weight:700;color:#1a1a2e}
.comment-emotion{font-size:16px;line-height:1}
.comment-time{font-size:12px;color:#999;margin-left:auto}
.comment-body p{margin:0 0 10px;font-size:14px;color:#444;line-height:1.7}
.comment-footer{display:flex;gap:10px;align-items:center}
.comment-upvotes{font-size:12px;color:#999;cursor:pointer;transition:color .15s}
.comment-upvotes:hover{color:#e53935}
.no-comments{text-align:center;color:#999;font-size:14px;padding:32px 0}

/* --- 视频网格 --- */
.videos-section-wrap{border:2px solid #eee;border-radius:16px;padding:20px;background:#fff}
.videos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.videos-grid-home{grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){
.videos-section-wrap{padding:12px;border-radius:12px}
.videos-grid{grid-template-columns:1fr;gap:14px}
}
.video-card{background:#fff;border:1px solid #eee;border-radius:16px;overflow:hidden;transition:all .25s ease;display:flex;flex-direction:column}
.video-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.1)}
.video-card-sm .video-thumb-wrap{aspect-ratio:16/9}
.video-thumb-wrap{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#f0f0f0}
.video-thumb-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.video-card:hover .video-thumb-wrap img{transform:scale(1.05)}
.video-duration{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.8);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;font-family:Consolas,Monaco,monospace}
.video-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.video-card:hover .video-overlay{opacity:1}
.video-overlay span{background:#fff;color:#333;font-size:13px;font-weight:700;padding:8px 20px;border-radius:8px}
.video-info{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.video-info h3{margin:0;font-size:13px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-info h3 a{color:#1a1a2e;text-decoration:none}
.video-info h3 a:hover{color:#e53935}
.video-channel{font-size:12px;color:#888;margin:0}
.video-pub{font-size:11px;color:#aaa;margin:0}

/* --- 视频详情 --- */
.video-detail-wrap{max-width:900px}
.video-player-wrap{border-radius:16px;overflow:hidden;background:#000;margin-bottom:20px;aspect-ratio:16/9;position:relative}
.video-player-wrap iframe{width:100%;height:100%;position:absolute;inset:0;border:none}
.video-detail-meta{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #eee;border-radius:16px;padding:24px}
.video-detail-meta h2{margin:0;font-size:20px;font-weight:800;color:#1a1a2e;line-height:1.3}
.video-orig-title{font-size:13px;color:#888;margin:0}
.video-meta-row{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:#666}
.video-seo-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seo-tag{display:inline-block;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:3px 10px;font-size:12px;color:#555}
.video-desc{background:#fafafa;border-radius:12px;padding:16px}
.video-desc h3{font-size:14px;font-weight:700;margin:0 0 8px;color:#333}
.video-desc p{font-size:13px;color:#555;line-height:1.7;margin:0}
.video-back{display:flex;gap:12px;flex-wrap:wrap}

/* --- 详情内容包装器 --- */
.detail-content-wrap{max-width:900px}
.detail-numbers-section{margin-bottom:24px}

/* --- 视频首页区块 --- */
.home-videos-section{margin-bottom:28px}

/* ============================================================
   历史详情页新增样式
   ============================================================ */

/* 导航：上/下期 */
.nearby-draws{margin-bottom:24px}
.nearby-draws-inner{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.nearby-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s}
.nearby-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.nearby-prev{background:rgba(33,150,243,.1);color:#1565c0;border:1px solid rgba(33,150,243,.3)}
.nearby-next{background:rgba(156,39,176,.1);color:#7b1fa2;border:1px solid rgba(156,39,176,.3)}

/* 频率分析 */
.freq-analysis-section{margin-bottom:24px}
.freq-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:18px 20px}
.freq-card h3{font-size:14px;font-weight:700;margin:0 0 14px;color:#1a1a2e}
.freq-item{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.freq-item .vball{width:28px;height:28px;font-size:12px;line-height:28px;flex-shrink:0}
.freq-bar-wrap{flex:1}
.freq-label{font-size:12px;color:#555;margin-bottom:4px}
.freq-bar{height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden}
.freq-bar-fill{height:100%;background:linear-gradient(90deg,#f44336,#ff9800);border-radius:3px;transition:width .5s ease}

/* 彩种介绍 */
.lottery-intro-section{margin-bottom:24px}
.lottery-intro-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:20px 24px}
.lottery-intro-card p{font-size:14px;color:#444;line-height:1.8;margin:0 0 16px}

/* AI 分析区块中的 section */
.ai-analysis-section{margin-bottom:28px}
.ai-section h4{font-size:15px;font-weight:700;color:#1a1a2e;margin:0 0 12px;padding-top:8px}
.ai-section p{font-size:14px;color:#444;line-height:1.8;margin:0 0 12px}
.ai-section ul{margin:0 0 14px 20px;font-size:14px;color:#444;line-height:1.8}
.ai-section li{margin-bottom:6px}
.ai-section a{color:#1565c0;text-decoration:none}
.ai-section a:hover{text-decoration:underline}

/* 各彩种历史栏目快捷入口卡片 */
.type-quick-card:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,20,50,.12)!important;border-color:rgba(0,40,80,.18)!important}

/* 日期选择 chip */
.chip-weekday{display:block;font-size:10px;font-weight:700;color:#90A4AE;text-transform:uppercase;letter-spacing:.04em;line-height:1}
.chip-date{display:block;font-size:13px;font-weight:600;color:#263238;line-height:1.2}

/* 历史条目——期号 */
.hist-draw-no{display:block;font-size:11px;color:#90A4AE;margin-top:4px}

/* 各彩种历史页——信息卡片 */
.type-info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.type-info-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px 16px}
.type-info-card p{margin:6px 0 0;font-size:13px;color:#546E7A}

/* 历史详情页——重复导航在底部 */
.nearby-draws-bottom{margin-top:8px}

/* AI 分析内容块 */
.ai-analysis-wrap{background:#fff;border:1px solid #eee;border-radius:16px;padding:24px 28px}
.ai-analysis-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #f0f0f0}
.ai-badge{background:#f5f0ff;color:#7b1fa2;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em}
.ai-source{font-size:12px;color:#90A4AE}

/* 球号分隔符 */
.power-sep{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,#9C27B0,#ce93d8);border-radius:50%;margin:0 4px;box-shadow:0 2px 8px rgba(156,39,176,.35)}
.power-sep-sm{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,#9C27B0,#ce93d8);border-radius:50%;margin:0 2px}

/* 历史列表球号 */
.hist-balls{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:32px;margin:8px 0}

/* ================================================================
   新增彩种 Hero 和组件样式
   ================================================================ */

/* Page Hero - Các biến thể màu mới */
.page-hero-orange{background:linear-gradient(135deg,#e65100,#bf360c)}
.page-hero-cyan{background:linear-gradient(135deg,#006064,#00838f)}
.page-hero-gold{background:linear-gradient(135deg,#f9a825,#f57f17)}
.page-hero-red{background:linear-gradient(135deg,#b71c1c,#c62828)}
.page-hero-purple{background:linear-gradient(135deg,#4a148c,#6a1b9a)}
.page-hero-green{background:linear-gradient(135deg,#2e7d32,#1b5e20)}
.page-hero-max3dpro{background:linear-gradient(135deg,#e65100,#bf360c)}
.page-hero-xsmb{background:linear-gradient(135deg,#1565c0,#0d47a1)}
.page-hero-xsmn{background:linear-gradient(135deg,#2e7d32,#1b5e20)}
.page-hero-xsmt{background:linear-gradient(135deg,#6a1b9a,#4a148c)}
.page-hero-dt123{background:linear-gradient(135deg,#00838f,#006064)}
.page-hero-dt6x36{background:linear-gradient(135deg,#006064,#004d40)}
.page-hero-tt4{background:linear-gradient(135deg,#f57f17,#f9a825)}

/* Nav Dots - Biến thể màu mới */
.nav-dot-gold{background:#f9a825;box-shadow:0 0 6px rgba(249,168,37,.7)}
.nav-dot-purple{background:#9c27b0;box-shadow:0 0 6px rgba(156,39,176,.7)}
.nav-dot-green{background:#43a047;box-shadow:0 0 6px rgba(67,160,71,.7)}

/* VBall - Các biến thể màu mới */
.vball-orange{background:linear-gradient(135deg,#e65100,#ff9800);box-shadow:0 4px 12px rgba(230,81,0,.4)}
.vball-cyan{background:linear-gradient(135deg,#006064,#00838f);box-shadow:0 4px 12px rgba(0,96,100,.4)}
.vball-gold{background:linear-gradient(135deg,#f9a825,#f57f17);box-shadow:0 4px 12px rgba(249,168,37,.4)}
.vball-max3dpro{background:linear-gradient(135deg,#e65100,#ff9800);box-shadow:0 4px 18px rgba(255,152,0,.4)}
.vball-dt6x36{background:linear-gradient(135deg,#006064,#00838f);box-shadow:0 4px 12px rgba(0,96,100,.4)}

/* Tag - Các biến thể màu mới */
.tag-gold{background:rgba(249,168,37,.12);color:#f57f17;border:1px solid rgba(249,168,37,.25)}
.tag-max3dpro{background:rgba(230,81,0,.12);color:#e65100;border:1px solid rgba(230,81,0,.25)}
.tag-dt123{background:rgba(0,131,143,.12);color:#00838f;border:1px solid rgba(0,131,143,.25)}
.tag-dt6x36{background:rgba(0,96,100,.12);color:#006064;border:1px solid rgba(0,96,100,.25)}
.tag-tt4{background:rgba(245,127,23,.12);color:#f57f17;border:1px solid rgba(245,127,23,.25)}

/* Btn - Các biến thể màu mới */
.btn-gold{background:#f57f17;color:#fff}
.btn-gold:hover{background:#f9a825;transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,127,23,.3)}
.btn-dt123{background:#00838f;color:#fff}
.btn-dt123:hover{background:#006064;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,131,143,.3)}

/* Demo Badge */
.demo-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(76,175,80,.12);color:#43a047;border:1px solid rgba(76,175,80,.25);margin-left:auto}

/* Jackpot - Biến thể màu */
.jackpot-gold{color:#f57f17}
.jackpot-cyan{color:#00838f}

/* Hero Classes (legacy) */
.orange-hero{background:linear-gradient(135deg,#e65100,#bf360c)!important}
.cyan-hero{background:linear-gradient(135deg,#006064,#00838f)!important}
.gold-hero{background:linear-gradient(135deg,#f9a825,#f57f17)!important}
.red-hero{background:linear-gradient(135deg,#b71c1c,#c62828)!important}
.purple-hero{background:linear-gradient(135deg,#4a148c,#6a1b9a)!important}
.green-hero{background:linear-gradient(135deg,#2e7d32,#1b5e20)!important}
.max3dpro-hero{background:linear-gradient(135deg,#e65100,#bf360c)!important}
.xsmb-hero{background:linear-gradient(135deg,#1565c0,#0d47a1)!important}
.xsmn-hero{background:linear-gradient(135deg,#2e7d32,#1b5e20)!important}
.xsmt-hero{background:linear-gradient(135deg,#6a1b9a,#4a148c)!important}
.dt123-hero{background:linear-gradient(135deg,#00838f,#006064)!important}
.dt6x36-hero{background:linear-gradient(135deg,#006064,#004d40)!important}
.tt4-hero{background:linear-gradient(135deg,#f57f17,#f9a825)!important}
.page-hero-orange,.orange-hero{background:linear-gradient(135deg,#e65100,#bf360c)!important}
.page-hero-cyan,.cyan-hero{background:linear-gradient(135deg,#006064,#00838f)!important}
.page-hero-gold,.gold-hero{background:linear-gradient(135deg,#f57f17,#f9a825)!important}
.page-hero-red,.red-hero{background:linear-gradient(135deg,#b71c1c,#c62828)!important}
.page-hero-purple,.purple-hero{background:linear-gradient(135deg,#4a148c,#6a1b9a)!important}
.page-hero-green,.green-hero{background:linear-gradient(135deg,#2e7d32,#1b5e20)!important}
.page-hero-mega,.mega-hero{background:linear-gradient(135deg,#c62828,#880e4f)!important}
.page-hero-power,.power-hero{background:linear-gradient(135deg,#880e4f,#4a148c)!important}
.page-hero-p535,.p535-hero{background:linear-gradient(135deg,#e65100,#bf360c)!important}
.page-hero-max3d,.max3d-hero{background:linear-gradient(135deg,#2e7d32,#1b5e20)!important}
.page-hero-keno,.keno-hero{background:linear-gradient(135deg,#2e7d32,#1b5e20)!important}
.page-hero-xsmb,.xsmb-hero{background:linear-gradient(135deg,#1565c0,#0d47a1)!important}
.page-hero-xsmn,.xsmn-hero{background:linear-gradient(135deg,#2e7d32,#1b5e20)!important}
.page-hero-xsmt,.xsmt-hero{background:linear-gradient(135deg,#6a1b9a,#4a148c)!important}
.page-hero-dt123,.dt123-hero{background:linear-gradient(135deg,#00838f,#006064)!important}
.page-hero-dt6x36,.dt6x36-hero{background:linear-gradient(135deg,#006064,#004d40)!important}
.page-hero-tt4,.tt4-hero{background:linear-gradient(135deg,#f57f17,#f9a825)!important}
.page-hero-max3dpro,.max3dpro-hero{background:linear-gradient(135deg,#e65100,#bf360c)!important}
.page-hero-prediction{background:linear-gradient(135deg,#1a237e,#283593)!important}
.tag-orange{background:#e65100!important;color:#fff!important}
.tag-cyan{background:#006064!important;color:#fff!important}
.tag-gold{background:#f57f17!important;color:#fff!important}
.tag-xsmb{background:#1565c0!important;color:#fff!important}
.tag-xsmn{background:#2e7d32!important;color:#fff!important}
.tag-xsmt{background:#6a1b9a!important;color:#fff!important}
.tag-max3dpro{background:#e65100!important;color:#fff!important}
.btn-orange{background:#e65100!important;color:#fff!important}
.btn-orange:hover{background:#bf360c!important}
.btn-cyan{background:#006064!important;color:#fff!important}
.btn-cyan:hover{background:#00838f!important}
.btn-gold{background:#f57f17!important;color:#fff!important}
.btn-gold:hover{background:#f9a825!important}
.btn-xsmb{background:#1565c0!important;color:#fff!important}
.btn-xsmb:hover{background:#0d47a1!important}
.btn-xsmn{background:#2e7d32!important;color:#fff!important}
.btn-xsmn:hover{background:#1b5e20!important}
.btn-xsmt{background:#6a1b9a!important;color:#fff!important}
.btn-xsmt:hover{background:#4a148c!important}
.vball-orange{background:linear-gradient(135deg,#e65100,#bf360c)!important}
.vball-cyan{background:linear-gradient(135deg,#006064,#00838f)!important}
.vball-gold{background:linear-gradient(135deg,#f57f17,#f9a825)!important}
.jackpot-orange{color:#e65100!important}
.jackpot-cyan{color:#006064!important}
.jackpot-gold{color:#f57f17!important}
.tt4-ball{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#f57f17,#f9a825);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.1em}
.xsmb-table-wrap{overflow-x:auto;margin:20px 0}
.xsmb-table{width:100%;border-collapse:collapse;font-size:14px}
.xsmb-table th{background:#1565c0;color:#fff;padding:8px 16px;text-align:left}
.xsmb-table td{padding:8px 16px;border-bottom:1px solid #eee}
.xsmb-table .row-db td{background:#fff3e0;font-weight:700;font-size:1.1em}
.xsmb-note,.xsmn-note,.xsmt-note{color:var(--text-mid);font-style:italic;margin:16px 0}
.prediction-wrap{max-width:900px;margin:0 auto;padding:20px 0}
.prediction-disclaimer{background:#fff3cd;border:1px solid #ffc107;border-radius:8px;padding:16px;margin-bottom:24px;display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.6}
.prediction-disclaimer svg{flex-shrink:0;color:#f57f17;margin-top:2px}
.prediction-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
@media(max-width:600px){.prediction-grid{grid-template-columns:1fr}}
.pred-section{background:#fafafa;border-radius:12px;padding:20px;border:1px solid #eee}
.pred-section h2{font-size:1rem;margin-bottom:16px;color:var(--text)}
.pred-numbers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.pred-ball-wrap{position:relative;text-align:center;width:40px}
.pred-bar-fill{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);height:4px;background:#e65100;border-radius:2px;max-width:36px}
.pred-label{font-size:9px;color:var(--text-mid);display:block;margin-top:2px}
.pred-note{font-size:12px;color:var(--text-mid);margin-top:12px;line-height:1.5}
.pred-analysis{background:#f5f5f5;border-radius:12px;padding:20px;margin-bottom:24px}
.pred-analysis h2{font-size:1rem;margin-bottom:12px}
.pred-content p{font-size:14px;line-height:1.7;margin-bottom:8px}
.pred-types{margin-bottom:24px}
.pred-type-grid{display:flex;flex-wrap:wrap;gap:8px}
.pred-type-card{background:#f5f5f5;border:2px solid #eee;border-radius:8px;padding:12px 16px;text-decoration:none;color:var(--text);flex:1;min-width:120px;text-align:center;transition:all .2s}
.pred-type-card:hover{border-color:var(--primary);text-decoration:none}
.pred-type-card.active{border-color:#e65100;background:#fff3e0}
.pred-type-card strong{display:block;margin-bottom:4px}
.pred-type-card span{font-size:11px;color:var(--text-mid)}
.pred-tools{margin-bottom:24px}
.pred-tools-grid{display:flex;flex-wrap:wrap;gap:12px}
.pred-tool-btn{display:inline-flex;align-items:center;gap:8px;background:#f5f5f5;border:1px solid #ddd;border-radius:8px;padding:10px 16px;text-decoration:none;color:var(--text);font-size:13px;transition:all .2s}
.pred-tool-btn:hover{border-color:var(--primary);text-decoration:none;background:#f0f0f0}
.pred-card-mega{border-color:#c62828!important}
.pred-card-purple{border-color:#880e4f!important}
.pred-card-orange{border-color:#e65100!important}
.pred-card-green{border-color:#2e7d32!important}

/* Hero split: two equal columns side by side */
.hero-split-wrap{display:grid;grid-template-columns:665px 10px 665px;min-height:380px;justify-content:center}
.hero-banner{display:flex;align-items:center;background:linear-gradient(135deg,#e53935 0%,#c62828 50%,#880e4f 100%);padding:48px 40px;box-sizing:border-box;min-height:0;width:665px;flex-shrink:0}
.hero-text{width:100%}
.hero-eyebrow{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.75);margin:0 0 12px}
.hero-title{font-size:36px;font-weight:800;color:#fff;margin:0 0 16px;line-height:1.15}
.hero-desc{font-size:15px;color:rgba(255,255,255,.85);margin:0 0 24px;line-height:1.6}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-btn-primary{display:inline-flex;align-items:center;background:#fff;color:#c62828;font-size:15px;font-weight:700;padding:11px 24px;border-radius:10px;text-decoration:none;transition:all .2s}
.hero-btn-primary:hover{background:#ffe0e0;color:#b71c1c;transform:translateY(-1px)}
.hero-btn-secondary{display:inline-flex;align-items:center;background:rgba(255,255,255,.15);color:#fff;font-size:15px;font-weight:600;padding:11px 24px;border-radius:10px;text-decoration:none;border:1px solid rgba(255,255,255,.3);transition:all .2s}
.hero-btn-secondary:hover{background:rgba(255,255,255,.25)}
.hero-video-section{display:flex;align-items:center;justify-content:center;background:#111;padding:24px;box-sizing:border-box;min-height:0;width:665px;flex-shrink:0}
.hvs-slider{width:645px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;position:relative;background:rgba(0,0,0,.3);box-shadow:0 8px 32px rgba(0,0,0,.4);flex-shrink:0}
.hvs-track{width:100%;height:100%;position:relative}
.hvs-slide{display:block;width:100%;height:100%;position:relative;text-decoration:none;color:#fff;overflow:hidden}
.hvs-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hvs-overlay{position:absolute;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.hvs-slide:hover .hvs-overlay{opacity:1}
.hvs-overlay span{width:56px;height:56px;background:rgba(255,255,255,.92);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:#e53935}
.hvs-duration{position:absolute;bottom:12px;right:14px;background:rgba(0,0,0,.75);color:#fff;font-size:13px;font-weight:600;padding:3px 10px;border-radius:4px}
.hvs-caption{position:absolute;bottom:0;left:0;right:0;padding:44px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:14px;font-weight:600;line-height:1.4;width:auto;max-width:none}
.hvs-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(255,255,255,.4)}
.hvs-placeholder p{margin:0;font-size:15px}
.hvs-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 0 4px}
.hvs-btn{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.15);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.hvs-btn:hover{background:rgba(255,255,255,.3)}
.hvs-dots{display:flex;gap:8px}
.stats-dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.stats-dashboard-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;transition:all .2s}
.stats-dashboard-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.sdc-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sdc-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sdc-detail-btn{font-size:12px;font-weight:600;color:#0288d1;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:color .15s}
.sdc-detail-btn:hover{color:#01579b;text-decoration:underline}
.sdc-section{display:flex;flex-direction:column;gap:8px}
.sdc-section-label{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em}
.sdc-balls{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.sdc-ball-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:32px}
.sdc-ball{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.sdc-bar{width:32px;height:4px;background:#f0f0f0;border-radius:2px;overflow:hidden}
.sdc-bar-fill{height:100%;border-radius:2px;transition:width .5s ease}
.sdc-oe-bar{display:flex;border-radius:8px;overflow:hidden;height:28px}
.sdc-oe-segment{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;transition:width .5s ease}
.sdc-oe-odd{background:#4caf50}
.sdc-oe-even{background:#1565c0}
.sdc-range-bars{display:flex;flex-direction:column;gap:5px}
.sdc-range-row{display:grid;grid-template-columns:52px 1fr 36px;gap:6px;align-items:center}
.sdc-range-label{font-size:12px;font-weight:600;color:#555}
.sdc-range-bar-wrap{background:#f0f0f0;border-radius:4px;height:8px;overflow:hidden}
.sdc-range-bar-fill{height:100%;border-radius:4px;transition:width .5s ease}
.sdc-range-pct{font-size:11px;font-weight:600;color:#888;text-align:right}
.sdc-data-info{font-size:11px;color:#90A4AE;margin-left:4px}
.sdc-chart-wrap{border-radius:10px;background:#f8f9fb;border:1px solid #e8ecf0;overflow:hidden;padding:10px 8px 4px;margin-top:2px;position:relative}
.sdc-chart-wrap svg{display:block;width:100%;height:auto}
.sdc-chart-wrap canvas{display:block;width:100% !important}

/* 统计详情页网格布局 */
.stats-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.stats-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:20px 22px;transition:all .2s}
.stats-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.07)}
.stats-card h3{margin:0 0 14px;font-size:15px;font-weight:700;color:#1a2a3a}
.stats-card-wide{grid-column:1/-1}
.freq-list{display:flex;flex-direction:column;gap:8px}
.freq-row{display:grid;grid-template-columns:38px 1fr 44px;gap:8px;align-items:center}
.freq-bar-wrap{background:#f0f0f0;border-radius:4px;height:8px;overflow:hidden}
.freq-bar{height:100%;border-radius:4px;transition:width .5s}
.freq-count{font-size:12px;font-weight:600;color:#555;text-align:right}

/* 奇偶分析 */
.odd-even-summary{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:14px}
.oe-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 20px;border-radius:12px;min-width:90px}
.oe-item.oe-odd{background:#e8f5e9}
.oe-item.oe-even{background:#e3f2fd}
.oe-num{font-size:28px;font-weight:800;color:#1a2a3a;line-height:1}
.oe-label{font-size:12px;font-weight:600;color:#607b96}
.oe-vs{font-size:14px;font-weight:600;color:#90A4AE}
.oe-bar{display:flex;border-radius:6px;overflow:hidden;height:10px;margin-bottom:12px}
.oe-bar-odd{background:linear-gradient(90deg,#4caf50,#81c784);height:100%;transition:width .5s}
.oe-bar-even{background:linear-gradient(90deg,#1565c0,#42a5f5);height:100%;transition:width .5s}

/* 区间列表 */
.range-list{display:flex;flex-direction:column;gap:7px}
.range-row{display:grid;grid-template-columns:50px 1fr 38px;gap:8px;align-items:center}
.range-bar-wrap{background:#f0f0f0;border-radius:4px;height:8px;overflow:hidden}
.range-bar{height:100%;border-radius:4px;transition:width .5s}
.range-pct{font-size:12px;font-weight:600;color:#607b96;text-align:right}

@media(max-width:768px){
.stats-dashboard-grid{grid-template-columns:1fr 1fr}
.stats-overview-grid{grid-template-columns:1fr}
.stats-card-wide{grid-column:auto}
}
@media(max-width:480px){
.stats-dashboard-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
.hero-split-wrap{grid-template-columns:1fr!important;justify-content:stretch!important}
.hero-banner,.hero-video-section{width:100%!important;padding:28px 20px}
.hero-title{font-size:26px}
.hero-btns{flex-direction:column}
.hero-btn-primary,.hero-btn-secondary{padding:10px 20px;font-size:14px}
.hvs-slider{width:100%!important;aspect-ratio:16/9}
}

/* ===== 省份页面样式 ===== */
.province-page{padding:20px 0}
.province-header{margin-bottom:28px}
.province-badge{display:inline-block;padding:4px 14px;background:#c0392b;color:#fff;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.5px;margin-bottom:10px}
.province-title{font-size:28px;font-weight:800;color:#1a1a2e;margin:8px 0 12px;line-height:1.3}
.province-desc{font-size:15px;color:#555;line-height:1.6;max-width:700px}
.province-meta-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.meta-badge{display:inline-block;padding:4px 10px;background:#f0f0f0;border-radius:6px;font-size:12px;color:#333}

.province-quick-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:20px 0}
.ql-card{display:flex;flex-direction:column;align-items:center;padding:16px 12px;background:#fff;border:1px solid #e8e8e8;border-radius:12px;text-align:center;text-decoration:none;color:#333;transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.ql-card:hover{border-color:#c0392b;transform:translateY(-2px);box-shadow:0 4px 12px rgba(192,57,43,.12)}
.ql-icon{font-size:24px;margin-bottom:6px}
.ql-card strong{font-size:14px;color:#1a1a2e}
.ql-card small{font-size:12px;color:#888;margin-top:4px}

.province-draw-time{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:14px;padding:24px;margin:20px 0;color:#fff}
.draw-time-label{font-size:14px;font-weight:700;margin-bottom:14px;opacity:.8}
.draw-time-items{display:flex;gap:16px;flex-wrap:wrap}
.dt-item{flex:1;min-width:100px;background:rgba(255,255,255,.08);border-radius:10px;padding:14px;text-align:center}
.dt-title{font-size:12px;opacity:.7;margin-bottom:4px}
.dt-time{font-size:22px;font-weight:800}
.dt-day{font-size:11px;opacity:.6;margin-top:4px}

.province-results-section{margin:24px 0}
.section-title{font-size:20px;font-weight:700;color:#1a1a2e;margin:20px 0 14px;padding-bottom:8px;border-bottom:2px solid #c0392b}

.province-result-list{display:flex;flex-direction:column;gap:8px}
.province-result-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid #eee;border-radius:10px;transition:box-shadow .2s}
.province-result-row:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.prr-date{min-width:80px;text-align:center}
.prr-weekday{font-size:11px;color:#c0392b;font-weight:700;display:block}
.prr-datespan{font-size:13px;color:#555}
.prr-nums{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.prr-prize{margin-right:6px}
.prr-plabel{font-size:10px;color:#888;margin-right:3px}
.prr-more{font-size:13px;color:#c0392b;text-decoration:none;white-space:nowrap}
.prr-more:hover{text-decoration:underline}
.prr-no-data{color:#aaa;font-style:italic;font-size:13px}

.province-no-data{padding:32px;text-align:center;color:#888;font-size:15px;background:#f8f9fa;border-radius:12px;border:1px dashed #ddd}

.province-stats-summary{margin:24px 0}
.stats-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.ss-card{background:#fff;border:1px solid #eee;border-radius:10px;padding:16px;text-align:center}
.ss-label{font-size:12px;color:#888;margin-bottom:6px}
.ss-value{font-size:18px;font-weight:700;color:#1a1a2e}
.ss-hot{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.ss-more-link{text-align:right;margin-top:12px}
.ss-more-link a{color:#c0392b;font-size:14px;text-decoration:none}
.ss-more-link a:hover{text-decoration:underline}

.province-region-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.prl-region{background:#fff;border:1px solid #eee;border-radius:12px;padding:16px}
.prl-rname{font-size:14px;font-weight:700;color:#c0392b;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #eee}
.prl-provinces{display:flex;flex-wrap:wrap;gap:6px}
.prl-province{padding:4px 10px;background:#f5f5f5;border-radius:6px;font-size:13px;color:#333;text-decoration:none}
.prl-province:hover{background:#c0392b;color:#fff}

.province-error{text-align:center;padding:60px 20px}
.province-error h2{color:#c0392b}

/* 省份结果表格 */
.province-result-table{overflow-x:auto;margin:16px 0}
.xs-result-table{width:100%;border-collapse:collapse}
.xs-result-table th{background:#1a1a2e;color:#fff;padding:10px 16px;text-align:center;font-size:14px}
.xs-result-table td{padding:10px 16px;border-bottom:1px solid #eee;text-align:center}
.td-prize{font-weight:700;color:#c0392b}
.td-nums{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}

/* 省份月份页 */
.province-month-nav,.province-year-nav{display:flex;justify-content:space-between;align-items:center;margin:16px 0;padding:12px;background:#fff;border:1px solid #eee;border-radius:10px}
.pmn-label{font-size:16px;font-weight:700;color:#1a1a2e}
.pmn-btn{padding:8px 16px;background:#c0392b;color:#fff;border-radius:8px;text-decoration:none;font-size:14px}
.pmn-btn:hover{background:#a93226}
.province-month-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:12px}
.pmg-day{background:#fff;border:1px solid #eee;border-radius:10px;padding:12px}
.pmg-day-header{font-size:13px;color:#888;margin-bottom:8px}
.pmg-nums{display:flex;flex-wrap:wrap;gap:4px}
.pmg-prize{margin-right:4px}
.pmg-plabel{font-size:10px;color:#888;margin-right:2px}
.pmg-none{color:#ccc}

/* 省份统计 */
.province-stats-section{margin:28px 0}
.province-freq-table{overflow-x:auto}
.freq-full-table{width:100%;border-collapse:collapse;min-width:400px}
.freq-full-table th{background:#1a1a2e;color:#fff;padding:10px 14px;text-align:left;font-size:13px}
.freq-full-table td{padding:8px 14px;border-bottom:1px solid #f0f0f0;font-size:13px}
.freq-full-table tr:hover{background:#fafafa}
.freq-full-table tr.freq-hot{background:#fff5f5}
.freq-full-table tr.freq-cold{background:#f5faff}
.freq-num{font-weight:700}
.freq-cnt{color:#555;white-space:nowrap}
.freq-bar-cell{width:40%}
.freq-bar-full{height:6px;background:linear-gradient(90deg,#c0392b,#e74c3c);border-radius:3px;min-width:2px}

/* 奇偶分布 */
.oe-bar-row{display:flex;align-items:center;gap:12px;margin:8px 0}
.oe-bar-label{font-size:14px;font-weight:600;min-width:60px;color:#333}
.oe-bar-label span{color:#888;font-weight:400}
.oe-bar-track{flex:1;height:10px;background:#eee;border-radius:5px;overflow:hidden}
.oe-bar-fill{height:100%;border-radius:5px;transition:width .5s}
.oe-bar-odd{background:linear-gradient(90deg,#27ae60,#2ecc71)}
.oe-bar-even{background:linear-gradient(90deg,#2980b9,#3498db)}

/* 高频/冷号 */
.province-hot-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:16px 0}
.province-hot-item{display:flex;align-items:center;gap:10px;padding:12px;background:#fff;border:1px solid #eee;border-radius:10px}
.province-hot-item .ball{font-size:20px;font-weight:800}
.phi-info{flex:1}
.phi-count{font-size:13px;font-weight:700;color:#333}
.phi-bar{height:4px;background:#eee;border-radius:2px;margin:4px 0}
.phi-fill{height:100%;background:#c0392b;border-radius:2px}
.phi-pct{font-size:11px;color:#888}

.province-cold-grid{display:flex;flex-wrap:wrap;gap:8px;padding:16px;background:#fff;border:1px solid #eee;border-radius:12px}
.province-combo-table{overflow-x:auto;margin:16px 0}

/* 预测页 */
.province-prediction-card{background:linear-gradient(135deg,#1a1a2e,#2c3e50);border-radius:16px;padding:28px;text-align:center;color:#fff;margin:20px 0}
.pred-label{font-size:14px;opacity:.7;margin-bottom:12px}
.pred-nums{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pred-note{font-size:13px;opacity:.6}
.province-prediction-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:600px){.province-prediction-grid{grid-template-columns:1fr}}
.pred-col h3{font-size:14px;font-weight:700;color:#1a1a2e;margin-bottom:10px}
.pred-col{display:flex;flex-wrap:wrap;gap:6px;background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;align-items:center}
.province-disclaimer{padding:14px 16px;background:#fffbeb;border:1px solid #fcd34d;border-radius:10px;font-size:13px;color:#92400e;margin:16px 0;line-height:1.5}

/* 工具页 */
.province-tool-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:24px;margin:16px 0}
.tool-form{display:flex;flex-direction:column;gap:12px;max-width:400px}
.tool-form label{font-size:14px;font-weight:600;color:#333}
.tool-form select,.tool-input{padding:8px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px}
.tool-gen-btn{padding:10px 20px;background:#c0392b;color:#fff;border:none;border-radius:8px;font-size:15px;cursor:pointer;transition:background .2s}
.tool-gen-btn:hover{background:#a93226}
.tool-result{margin-top:16px;padding:16px;background:#f8f9fa;border-radius:10px;min-height:60px}
.tool-result-label{font-size:13px;color:#888;margin-bottom:8px}
.tool-result-balls{display:flex;gap:6px;flex-wrap:wrap}
.ball-xl{font-size:28px!important;padding:12px!important}
.province-lucky-num{text-align:center;font-size:48px;font-weight:900;color:#c0392b;margin:20px 0}

/* 计算器 */
.calc-table{margin:20px 0;overflow-x:auto}
.calc-table h3{font-size:16px;font-weight:700;margin-bottom:10px}

/* FAQ */
.province-faq-list{display:flex;flex-direction:column;gap:8px;margin:16px 0}

/* 省份规则/教学 */
.province-rule-content{background:#fff;border:1px solid #eee;border-radius:14px;padding:28px;margin:16px 0;line-height:1.7}
.province-rule-content h2{font-size:18px;font-weight:700;color:#1a1a2e;margin:20px 0 10px}
.province-rule-content p{color:#444;font-size:15px;margin-bottom:12px}
.province-rule-content ul{margin-left:20px;color:#555;font-size:15px}
.province-rule-content li{margin-bottom:6px}

/* 开奖时间 */
.province-time-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:24px;margin:16px 0}
.province-time-card h2{font-size:16px;font-weight:700;margin-bottom:14px}
.ptime-row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px}
.ptime-row:last-child{border-bottom:none}
.ptime-label{font-weight:600;color:#333;min-width:180px}
.ptime-value{color:#555}
.province-time-calendar{background:#fff;border:1px solid #eee;border-radius:14px;padding:24px;margin:16px 0}

/* 对比页 */
.province-vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0}
@media(max-width:700px){.province-vs-grid{grid-template-columns:1fr}}
.vs-col h2{font-size:15px;font-weight:700;color:#1a1a2e;margin-bottom:12px}
.vs-overlap{grid-column:1/-1;background:#fff8f5;border:1px solid #fcd34d;border-radius:12px;padding:16px}
.vs-overlap h3{font-size:14px;font-weight:700;color:#92400e;margin-bottom:10px}
.province-back-links{display:flex;justify-content:center;gap:20px;margin:24px 0}
.province-back-links a{color:#c0392b;font-size:14px;text-decoration:none}
.province-back-links a:hover{text-decoration:underline}

/* ============================================================
   Province Home SEO 模块
   ============================================================ */

/* 省份介绍 */
.ph-intro-section{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;margin:24px 0}
.ph-intro-header{margin-bottom:14px}
.ph-intro-body p{color:#546E7A;font-size:15px;line-height:1.75;margin:0 0 16px}
.ph-intro-meta{display:flex;flex-wrap:wrap;gap:12px 24px;padding-top:14px;border-top:1px solid var(--border)}
.ph-im-item{font-size:13px;color:#546E7A}
.ph-im-item strong{color:var(--text-dark)}

/* 玩法教学 */
.ph-howto-section{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;margin:24px 0}
.ph-howto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:16px}
.ph-ht-card{background:var(--bg-subtle);border-radius:12px;padding:20px;border:1px solid var(--border)}
.ph-ht-icon{font-size:32px;margin-bottom:10px}
.ph-ht-card h3{font-size:15px;font-weight:700;color:var(--text-dark);margin:0 0 8px}
.ph-ht-card p{font-size:13px;color:#546E7A;line-height:1.6;margin:0}

/* FAQ */
.ph-faq-section{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;margin:24px 0}
.ph-faq-item{background:var(--bg-subtle);border-radius:10px;padding:16px 20px;margin-bottom:10px;border:1px solid var(--border)}
.ph-faq-q{font-size:14px;font-weight:700;color:var(--text-dark);margin-bottom:6px}
.ph-faq-a{font-size:13px;color:#546E7A;line-height:1.6}

/* 工具卡片 */
.ph-tools-section{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;margin:24px 0}
.ph-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:16px}
.ph-tool-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px;background:var(--bg-subtle);border-radius:12px;border:1px solid var(--border);transition:border-color .2s,box-shadow .2s;text-decoration:none;cursor:pointer}
.ph-tool-card:hover{border-color:var(--red);box-shadow:0 4px 16px rgba(229,57,53,0.12)}
.ph-tc-icon{font-size:28px}
.ph-tool-card strong{font-size:14px;font-weight:700;color:var(--text-dark)}
.ph-tool-card small{font-size:12px;color:#546E7A}

/* ============================================================
   首页省份内容区块
   ============================================================ */

/* 今日开奖省份速览 */
.province-today-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.province-today-col {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
}
.province-today-region {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.province-today-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    text-decoration: none;
    color: var(--text-dark);
    font-size: 13px;
    border-bottom: 1px solid #f5f5f5;
    transition: color 0.15s;
}
.province-today-item:last-child { border-bottom: none; }
.province-today-item:hover { color: var(--red); }
.province-today-item .pt-arrow { color: #aaa; font-size: 11px; }
.province-today-item:hover .pt-arrow { color: var(--red); }

/* 省份精选区块 */
.province-featured-section {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    padding: 28px;
    margin-bottom: 1.5rem;
}
.province-featured-grid {
    display: grid;
    grid-template-columns: 220px 1fr 200px;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 900px) {
    .province-featured-grid { grid-template-columns: 1fr; }
}

/* 最新结果卡片 */
.pf-latest-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}
.pf-latest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 12px;
}
.pf-latest-date { color: #888; }
.pf-db-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.pf-label { font-size: 11px; color: #888; font-weight: 600; white-space: nowrap; }
.pf-db-balls { display: flex; flex-wrap: wrap; gap: 4px; }

/* 统计卡片 */
.pf-stat-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 0.75rem;
}
.pf-stat-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.pf-number-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.pf-num-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 38px;
    padding: 5px 4px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.pf-num-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.pf-num-chip.pf-hot { background: #fff1f0; border: 1px solid #ffccc7; }
.pf-num-chip.pf-cold { background: #f0f5ff; border: 1px solid #d9e6ff; }
.pf-num-val { font-size: 15px; font-weight: 800; color: var(--text-dark); }
.pf-num-count { font-size: 10px; color: #888; margin-top: 2px; }

/* 快捷入口 */
.pf-quick-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pf-ql-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    color: var(--text-dark);
    transition: border-color 0.15s, color 0.15s;
}
.pf-ql-item:hover { border-color: var(--red); color: var(--red); }
.pf-ql-item span { font-size: 14px; }

/* ============================================================
   二十一、三 miền kết quả trang – Info Blocks
   ============================================================ */

.xs-info-block {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}
.xs-info-block-red  { border-top: 3px solid var(--red); }
.xs-info-block-green  { border-top: 3px solid var(--green); }
.xs-info-block-purple { border-top: 3px solid var(--purple); }

.xs-info-block-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 0;
}
.xs-info-block-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.xs-info-block-red  .xs-info-block-dot { background: var(--red); }
.xs-info-block-green  .xs-info-block-dot { background: var(--green); }
.xs-info-block-purple .xs-info-block-dot { background: var(--purple); }

.xs-info-block-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}
.xs-info-block-body {
    padding: 14px 20px 20px;
}
.xs-info-block-body > p {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.75;
    margin: 0 0 14px;
}
.xs-info-list {
    margin: 0 0 14px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xs-info-list li {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.6;
}
.xs-info-list li strong { color: var(--text-dark); }

.xs-info-note {
    font-size: 13px !important;
    color: #78909c !important;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 14px !important;
    margin: 14px 0 12px !important;
    border-left: 3px solid var(--border-md);
}

.xs-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    margin-top: 8px;
}
.xs-info-block-red  .xs-info-btn { background: var(--red); color: #fff; }
.xs-info-block-red  .xs-info-btn:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(229,57,53,.3); }
.xs-info-block-green  .xs-info-btn { background: var(--green); color: #fff; }
.xs-info-block-green  .xs-info-btn:hover { background: #388e3c; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(76,175,80,.3); }
.xs-info-block-purple .xs-info-btn { background: var(--purple); color: #fff; }
.xs-info-block-purple .xs-info-btn:hover { background: #6a1b9a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(156,39,176,.3); }

/* Stats grid */
.xs-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.xs-info-stat {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
}
.xs-info-stat-num {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
}
.xs-info-stat-label {
    display: block;
    font-size: 12px;
    color: var(--text-mid);
    margin-top: 4px;
}

/* Lô gan grid */
.xs-gan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.xs-gan-item {
    background: #fff3e0;
    border: 1px solid rgba(230,81,0,.15);
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
}
.xs-gan-num {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #e65100;
    letter-spacing: 0.05em;
}
.xs-gan-days {
    display: block;
    font-size: 12px;
    color: #78909c;
    margin-top: 4px;
}

/* Schedule grid (MT) */
.xs-schedule-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.xs-schedule-item {
    display: flex;
    gap: 12px;
    background: #f3e5f5;
    border-radius: 10px;
    padding: 10px 14px;
    align-items: flex-start;
}
.xs-schedule-day {
    font-size: 13px;
    font-weight: 700;
    color: var(--purple);
    min-width: 60px;
    flex-shrink: 0;
}
.xs-schedule-cities {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.5;
}

/* Hot/Cold columns */
.xs-hot-cold {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}
.xs-hot-cold-col strong { font-size: 13px; }

/* Daily đài grid (MN) */
.xs-daily-dai-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.xs-daily-dai-item {
    flex: 1;
    min-width: 120px;
    background: #e8f5e9;
    border: 1px solid var(--green-border);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: center;
}
.xs-daily-dai-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 4px;
}
.xs-daily-dai-date {
    display: block;
    font-size: 12px;
    color: var(--text-mid);
}

/* Province grid (MN) */
.xs-province-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.xs-province-col {
    display: flex;
    gap: 12px;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 10px 14px;
    align-items: flex-start;
}
.xs-province-col strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--green);
    min-width: 56px;
    flex-shrink: 0;
}
.xs-province-col span {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.5;
}

/* Compare table (MN) */
.xs-compare-wrap {
    margin-bottom: 12px;
    overflow-x: auto;
}
.xs-compare-table {
    min-width: 360px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.xs-compare-header {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
    gap: 4px;
    padding: 10px 14px;
    background: #f8f9fa;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.xs-compare-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
    gap: 4px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    align-items: center;
    font-size: 14px;
    color: var(--text-dark);
}
.xs-compare-row:hover { background: #fafafa; }
.xs-compare-province {
    font-weight: 600;
    font-size: 14px;
    color: var(--green);
}

@media (max-width: 640px) {
    .xs-info-grid { grid-template-columns: repeat(2, 1fr); }
    .xs-gan-grid  { grid-template-columns: repeat(3, 1fr); }
    .xs-hot-cold  { grid-template-columns: 1fr; }
    .xs-province-col { flex-direction: column; gap: 4px; }
    .xs-compare-header,
    .xs-compare-row { font-size: 12px; }
}

/* ============================================================
   二十二、SEO Desc + Stats Module + Bottom Links
   ============================================================ */

/* SEO description banner */
.xs-seo-desc {
    background: linear-gradient(135deg, #f8f9fa, #fff);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    margin-bottom: 0;
}
.xs-seo-desc p {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.75;
    text-align: center;
}

/* Stats module — 3 columns: lô gan / tần suất / số đẹp */
.xs-stats-module {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}
.xs-stats-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.xs-stats-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}
.xs-stats-desc {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.6;
    margin: 0;
}
.xs-stats-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.xs-stats-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--red);
    text-decoration: none;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.xs-stats-link:hover { text-decoration: underline; }

/* Bottom internal links strip */
.xs-bottom-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px 0 8px;
    border-top: 2px solid var(--border);
    margin-top: 8px;
}
.xs-bottom-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: #f8f9fa;
    border: 1px solid var(--border-md);
    color: var(--text-dark);
    transition: all 0.2s;
}
.xs-bottom-link:hover {
    background: var(--red-soft);
    border-color: var(--red-border);
    color: var(--red);
    transform: translateY(-1px);
}
.xs-bottom-link svg { flex-shrink: 0; opacity: 0.7; }

@media (max-width: 640px) {
    .xs-stats-module { grid-template-columns: 1fr; }
    .xs-bottom-links { gap: 8px; }
    .xs-bottom-link { font-size: 12px; padding: 8px 12px; }
}

/* ============================================================
   二十三、Công cụ pages – Compare / Generator / Calendar
   ============================================================ */

/* Guide steps */
.xs-guide-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.xs-guide-step { display: flex; gap: 14px; align-items: flex-start; }
.xs-guide-num {
    width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff;
    font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.xs-guide-content strong { font-size: 14px; color: var(--text-dark); display: block; margin-bottom: 4px; }
.xs-guide-content p { font-size: 13px; color: var(--text-mid); line-height: 1.6; margin: 0; }

/* Example box */
.xs-example-box {
    background: #f8f9fa; border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px; margin-top: 16px;
}
.xs-example-label {
    font-size: 12px; font-weight: 700; color: var(--text-mid); text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 10px;
}
.xs-example-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xs-example-item { background: #fff; border-radius: 8px; padding: 10px 12px; }
.xs-example-item strong { font-size: 13px; color: var(--green); display: block; margin-bottom: 6px; }
.xs-example-item p { font-size: 12px; color: var(--text-mid); line-height: 1.6; margin: 0; }
.xs-example-item code { background: #eee; border-radius: 4px; padding: 1px 4px; font-size: 11px; }
.xs-jackpot-tag {
    display: inline-block; background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #5d4037; font-weight: 700; font-size: 12px; border-radius: 6px; padding: 2px 8px; margin-top: 4px;
}

/* Prize table */
.xs-prize-table { overflow-x: auto; margin-bottom: 12px; }
.xs-prize-row {
    display: grid; grid-template-columns: 2fr 2fr 2fr 2fr; gap: 0;
    border-bottom: 1px solid var(--border); padding: 10px 12px; font-size: 13px;
}
.xs-prize-row:first-child { font-weight: 700; background: #f8f9fa; color: var(--text-dark); }
.xs-prize-row span { color: var(--text-mid); }
.xs-prize-header { background: #f0f0f0; border-radius: 8px 8px 0 0; }
.xs-prize-header span { font-size: 12px; font-weight: 700; color: var(--text-dark); }

/* Suggestion grid (generator) */
.xs-suggestion-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.xs-suggestion-item { background: #f8f9fa; border-radius: 10px; padding: 12px 14px; }
.xs-suggestion-type { font-size: 12px; font-weight: 700; color: var(--green); display: block; margin-bottom: 8px; }
.xs-hot-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.xs-hot-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.xs-hot-row strong { font-size: 13px; color: var(--text-dark); min-width: 80px; }

/* Region cards (calendar) */
.xs-region-detail { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.xs-region-card {
    border-radius: 12px; padding: 16px; border: 1px solid var(--border);
    overflow: hidden;
}
.xs-region-red  { background: linear-gradient(135deg,#fff5f5,#fff); border-left: 4px solid var(--red); }
.xs-region-orange{ background: linear-gradient(135deg,#fff8f0,#fff); border-left: 4px solid #ff9800; }
.xs-region-purple{ background: linear-gradient(135deg,#f3e5f5,#fff); border-left: 4px solid var(--purple); }
.xs-region-badge {
    font-size: 14px; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.01em;
}
.xs-region-red .xs-region-badge    { color: var(--red); }
.xs-region-orange .xs-region-badge { color: #e65100; }
.xs-region-purple .xs-region-badge { color: var(--purple); }
.xs-region-info  { display: flex; flex-direction: column; gap: 6px; }
.xs-region-row   { display: flex; gap: 8px; align-items: baseline; }
.xs-region-label { font-size: 12px; color: var(--text-mid); min-width: 140px; flex-shrink: 0; }
.xs-region-row strong { font-size: 13px; color: var(--text-dark); }

/* Vietlott schedule table */
.xs-vietlott-schedule { overflow-x: auto; margin-bottom: 12px; }
.xs-vs-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 2fr 1.5fr;
    gap: 0; border-bottom: 1px solid var(--border); padding: 10px 12px; font-size: 13px; align-items: center;
}
.xs-vs-header { background: #f0f0f0; border-radius: 8px 8px 0 0; font-weight: 700; color: var(--text-dark); }
.xs-vs-row span { color: var(--text-mid); }
.xs-vs-row strong { color: var(--text-dark); }

/* ============================================================
   十、省份页面样式（Premium Redesign v2）
   ============================================================ */

/* ---- POV Hero Banner ---- */
.pov-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a2e 40%, #16213e 100%);
    padding: 72px 24px 64px;
    text-align: center;
    margin-bottom: 0;
}
.pov-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.pov-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    animation: pov-orb-float 8s ease-in-out infinite;
}
.pov-hero-orb-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #E53935, transparent 70%);
    top: -100px; left: -80px;
    animation-delay: 0s;
}
.pov-hero-orb-2 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, #9C27B0, transparent 70%);
    top: -60px; right: -60px;
    animation-delay: -3s;
}
.pov-hero-orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #4CAF50, transparent 70%);
    bottom: -80px; left: 50%;
    transform: translateX(-50%);
    animation-delay: -6s;
}
@keyframes pov-orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -15px) scale(1.05); }
    66% { transform: translate(-15px, 10px) scale(0.95); }
}
.pov-hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}
.pov-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}
.pov-hero-title {
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 16px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.pov-hero-sub {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    margin: 0 0 32px;
    line-height: 1.6;
}
.pov-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 16px 28px;
    backdrop-filter: blur(12px);
}
.pov-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 20px;
}
.pov-hero-stat-num {
    font-size: 28px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.pov-hero-stat:first-child .pov-hero-stat-num { color: #E53935; }
.pov-hero-stat:nth-child(3) .pov-hero-stat-num { color: #9C27B0; }
.pov-hero-stat:last-child .pov-hero-stat-num { color: #4CAF50; }
.pov-hero-stat-label {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    white-space: nowrap;
}
.pov-hero-stat-sep {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.1);
}

/* ---- POV Region Quick Nav ---- */
.pov-region-nav {
    display: flex;
    gap: 10px;
    padding: 24px 0 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.pov-region-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1.5px solid;
}
.pov-region-nav-mb {
    color: var(--red); border-color: var(--red-border);
    background: var(--red-soft);
}
.pov-region-nav-mb:hover {
    background: var(--red); color: #fff;
    box-shadow: 0 4px 16px rgba(229,57,53,0.4);
    transform: translateY(-1px);
}
.pov-region-nav-mt {
    color: var(--purple); border-color: var(--purple-border);
    background: var(--purple-soft);
}
.pov-region-nav-mt:hover {
    background: var(--purple); color: #fff;
    box-shadow: 0 4px 16px rgba(156,39,176,0.4);
    transform: translateY(-1px);
}
.pov-region-nav-mn {
    color: var(--green); border-color: var(--green-border);
    background: var(--green-soft);
}
.pov-region-nav-mn:hover {
    background: var(--green); color: #fff;
    box-shadow: 0 4px 16px rgba(76,175,80,0.4);
    transform: translateY(-1px);
}
.pov-region-nav-count {
    background: rgba(0,0,0,0.12);
    padding: 1px 7px;
    border-radius: 50px;
    font-size: 11px;
}

/* ---- POV Region Blocks ---- */
.pov-region-block {
    margin-bottom: 36px;
    background: var(--bg-card);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    border: 1px solid var(--border);
}
.pov-region-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    position: relative;
}
.pov-region-head::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
}
.pov-region-head-mb { background: linear-gradient(135deg, #fff5f5, #fff8f8); }
.pov-region-head-mb::after { background: linear-gradient(90deg, var(--red), transparent); }
.pov-region-head-mt { background: linear-gradient(135deg, #f3e5f5, #f8f0fc); }
.pov-region-head-mt::after { background: linear-gradient(90deg, var(--purple), transparent); }
.pov-region-head-mn { background: linear-gradient(135deg, #f1f8e9, #f8fcf4); }
.pov-region-head-mn::after { background: linear-gradient(90deg, var(--green), transparent); }
.pov-region-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pov-region-head-mb .pov-region-icon { background: var(--red-soft); color: var(--red); }
.pov-region-head-mt .pov-region-icon { background: var(--purple-soft); color: var(--purple); }
.pov-region-head-mn .pov-region-icon { background: var(--green-soft); color: var(--green); }
.pov-region-info { flex: 1; }
.pov-region-name {
    font-size: 18px; font-weight: 900; margin: 0 0 2px;
}
.pov-region-head-mb .pov-region-name { color: var(--red-dark); }
.pov-region-head-mt .pov-region-name { color: var(--purple-dark); }
.pov-region-head-mn .pov-region-name { color: var(--green-dark); }
.pov-region-desc { font-size: 12px; color: var(--text-mid); margin: 0; }
.pov-region-badge {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
}
.pov-region-badge-mb { background: var(--red); color: #fff; }
.pov-region-badge-mt { background: var(--purple); color: #fff; }
.pov-region-badge-mn { background: var(--green); color: #fff; }
.pov-live-dot {
    width: 7px; height: 7px;
    background: #fff;
    border-radius: 50%;
    animation: live-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* ---- Province Cards Grid ---- */
.province-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 16px;
}
.province-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 14px;
    border-radius: 16px;
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: var(--bg-card-alt);
    position: relative;
    overflow: hidden;
}
.province-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.province-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.province-card:hover::before { opacity: 1; }

/* Featured card (Hà Nội, Đà Nẵng, TP.HCM) */
.province-card-featured {
    border-color: rgba(229,57,53,0.3);
    background: linear-gradient(135deg, #fff8f8, #fff);
}
.province-card-featured::before {
    background: linear-gradient(135deg, var(--red-soft), transparent);
}
.province-card-featured:hover { border-color: var(--red); }
.province-card-featured .province-card-name { color: var(--red-dark); }
.province-card-featured .province-card-icon { color: var(--red); }

/* MB / MT / MN variants */
.province-card-mb { border-color: rgba(229,57,53,0.15); }
.province-card-mb::before { background: linear-gradient(135deg, rgba(229,57,53,0.06), transparent); }
.province-card-mb:hover { border-color: var(--red); }
.province-card-mb .province-card-name { color: var(--text-dark); }
.province-card-mb:hover .province-card-name { color: var(--red-dark); }
.province-card-mb .province-card-icon { color: var(--red); opacity: 0.6; }
.province-card-mb:hover .province-card-icon { opacity: 1; }

.province-card-mt { border-color: rgba(156,39,176,0.15); }
.province-card-mt::before { background: linear-gradient(135deg, rgba(156,39,176,0.06), transparent); }
.province-card-mt:hover { border-color: var(--purple); }
.province-card-mt .province-card-name { color: var(--text-dark); }
.province-card-mt:hover .province-card-name { color: var(--purple-dark); }
.province-card-mt .province-card-icon { color: var(--purple); opacity: 0.6; }
.province-card-mt:hover .province-card-icon { opacity: 1; }

.province-card-mn { border-color: rgba(76,175,80,0.15); }
.province-card-mn::before { background: linear-gradient(135deg, rgba(76,175,80,0.06), transparent); }
.province-card-mn:hover { border-color: var(--green); }
.province-card-mn .province-card-name { color: var(--text-dark); }
.province-card-mn:hover .province-card-name { color: var(--green-dark); }
.province-card-mn .province-card-icon { color: var(--green); opacity: 0.6; }
.province-card-mn:hover .province-card-icon { opacity: 1; }

.province-card-icon {
    margin-bottom: 2px;
    transition: opacity 0.2s;
}
.province-card-name {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.2;
    transition: color 0.2s;
}
.province-card-draw {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-mid);
    font-weight: 500;
}

/* ---- Province Result Pages ---- */
.province-result-section { margin-bottom: 24px; }

/* SEO Content Blocks */
.seo-intro-block {
    background: #f8f9fa;
    border-left: 4px solid #2196f3;
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}
.seo-data-block {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}
.seo-stats-block {
    background: #e8f5e9;
    border-left: 4px solid #4caf50;
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}
.seo-guide-block {
    background: #fff8e1;
    border-left: 4px solid #ff9800;
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}
.seo-guide-block p { margin: 0; }

.province-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.province-nav-links .btn { flex: 0 0 auto; }

/* Monthly history */
.province-history-monthly {}
.monthly-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}
.monthly-nav-label { font-weight: 700; font-size: 16px; color: var(--text-dark); }
.monthly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}
.monthly-day-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    text-decoration: none;
    transition: all 0.2s;
    gap: 4px;
}
.monthly-day-card:hover {
    border-color: var(--red);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.monthly-today { border-color: var(--red) !important; background: var(--red-soft); }
.monthly-no-result { opacity: 0.5; }
.monthly-day-date { font-size: 11px; font-weight: 600; color: var(--text-mid); }
.monthly-day-db { font-size: 13px; font-weight: 800; color: var(--text-dark); }

/* Yearly history */
.province-history-yearly {}
.yearly-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}
.yearly-nav-label { font-weight: 700; font-size: 16px; color: var(--text-dark); }
.yearly-months-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}
.yearly-month-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    text-decoration: none;
    transition: all 0.2s;
    gap: 4px;
}
.yearly-month-card:hover {
    border-color: var(--red);
    background: var(--red-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.yearly-month-name { font-weight: 700; font-size: 15px; color: var(--text-dark); }
.yearly-month-year { font-size: 12px; color: var(--text-mid); }

/* Province sub-pages overview grid */
.province-sub-pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.province-sub-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    text-decoration: none;
    transition: all 0.2s ease;
}
.province-sub-card:hover {
    border-color: var(--red);
    background: var(--red-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.province-sub-icon { font-size: 24px; margin-bottom: 4px; }
.province-sub-name { font-weight: 700; font-size: 14px; color: var(--text-dark); }
.province-sub-desc { font-size: 12px; color: var(--text-mid); line-height: 1.4; }

/* Page hero variants by region */
.page-hero-mb { background: linear-gradient(135deg, #c62828, #880e4f); border-bottom: 3px solid #e53935; }
.page-hero-mt { background: linear-gradient(135deg, #6a1b9a, #4a148c); border-bottom: 3px solid #9c27b0; }
.page-hero-mn { background: linear-gradient(135deg, #2e7d32, #1b5e20); border-bottom: 3px solid #43a047; }

/* Province page — Lịch sử gần đây */
.province-history-section { margin: 0 0 40px; }
.province-history-section .section-header { margin-bottom: 16px; }
.province-history-list { display: flex; flex-direction: column; gap: 8px; }
.province-history-item {
    display: grid;
    grid-template-columns: 90px 1fr auto 30px;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}
.province-history-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.09); transform: translateY(-1px); border-color: #e53935; }
.province-history-item.today { border-color: rgba(229,57,53,.3); background: rgba(229,57,53,.02); }
.province-history-item.demo-row { opacity: 0.85; }
.hist-date-col { display: flex; flex-direction: column; gap: 2px; }
.hist-day { font-size: 15px; font-weight: 800; color: #e53935; line-height: 1; }
.hist-full-date { font-size: 11px; color: #999; font-weight: 600; }
.hist-prizes-col { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hist-prize { font-size: 12px; color: #666; }
.hist-prize b { font-weight: 700; color: #333; }
.hist-prize.db b { color: #e53935; }
.hist-prize.g1 b { color: #1565c0; }
.hist-prize.g2 b { color: #2e7d32; }
.hist-db-col { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-end; }
.hist-db-ball {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#f9a825,#f57f17);
    color: #fff; font-size: 12px; font-weight: 800;
    width: 38px; height: 38px; border-radius: 50%;
    box-shadow: 0 2px 8px rgba(249,168,37,.4);
    font-family: Consolas,Monaco,monospace;
}
.hist-db-ball.empty { background: #f0f0f0; color: #ccc; box-shadow: none; }
.demo-tag { font-size: 10px; font-weight: 700; background: rgba(76,175,80,.12); color: #43a047; border: 1px solid rgba(76,175,80,.25); padding: 1px 6px; border-radius: 4px; }
.hist-arrow { color: #ccc; font-size: 18px; }
.province-history-item:hover .hist-arrow { color: #e53935; }
@media(max-width:767px) {
    .province-history-item { grid-template-columns: 80px 1fr auto; }
    .hist-db-col { display: none; }
}

/* No result notice */
.no-result-notice {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    color: #f57f17;
    margin: 12px 0;
}

/* Info badge */
.info-badge {
    display: inline-block;
    background: #e3f2fd;
    color: #1565c0;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    margin-left: 8px;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .pov-hero { padding: 48px 20px 40px; }
    .pov-hero-title { font-size: 26px; }
    .pov-hero-stats { flex-direction: column; gap: 12px; padding: 16px; }
    .pov-hero-stat-sep { width: 60px; height: 1px; }
    .pov-region-nav { padding: 16px 0 8px; }
    .province-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
    .province-card { padding: 12px 10px; }
    .province-card-name { font-size: 12px; }
    .pov-region-head { padding: 16px; gap: 12px; }
    .pov-region-icon { width: 40px; height: 40px; border-radius: 12px; }
    .pov-region-name { font-size: 16px; }
    .monthly-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
    .monthly-day-card { padding: 8px 4px; }
    .monthly-day-date { font-size: 10px; }
    .monthly-day-db { font-size: 11px; }
    .province-sub-pages-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
}