:root{
    --navy-darker:#1c2233;
    --navy-dark:#282f45;
    --navy-mid:#333c58;
    --blue-primary:#1b52b0;
    --blue-deep:#16407a;
    --gold:#ffc93c;
    --gold-deep:#f5a623;
    --bg-light:#eef4fb;
    --card-white:#ffffff;
    --text-dark:#20263a;
    --text-mute:#4b5468;
    --text-muted:#4b5468;
    --grad-orange:linear-gradient(135deg,#ff9a44,#ff5e62);
    --grad-purple:linear-gradient(135deg,#9b6bff,#6d28d9);
    --grad-teal:linear-gradient(135deg,#28c7c9,#2a6bd7);
    --grad-pink:linear-gradient(135deg,#ff7bac,#ff3d77);
    --grad-green:linear-gradient(135deg,#3fe0a5,#0ea472);
    --radius-lg:18px;
    --radius-md:12px;
    --shadow-card:0 8px 24px rgba(28,34,51,0.08);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg-light);
    color:var(--text-dark);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.brand{font-family:'Poppins',sans-serif;}
  .nums{font-family:'Roboto Mono',monospace;}
  a{text-decoration:none; color:inherit;}
  img{max-width:100%; display:block;}
  .container{max-width:1200px; margin:0 auto; padding:0 20px;}

  /* ---------- Utility bar ---------- */
  .utility-bar{
    background:var(--navy-darker);
    color:#aeb6cc;
    font-size:12.5px;
  }
  .utility-bar .container{
    display:flex; justify-content:space-between; align-items:center;
    height:34px;
  }
  .utility-bar .updated{display:flex; gap:6px; align-items:center;}
  .utility-bar .updated .dot{width:6px;height:6px;border-radius:50%;background:#3fe0a5;display:inline-block;}
  .utility-bar .links{display:flex; gap:16px;}
  .utility-bar .links a:hover{color:#fff;}

  /* ---------- Nav ---------- */
  nav.main-nav{
    background:var(--navy-dark);
    position:sticky; top:0; z-index:50;
    box-shadow:0 2px 10px rgba(0,0,0,0.15);
  }
  nav.main-nav .container{
    display:flex; align-items:center; justify-content:space-between;
    height:64px;
  }
  .logo{
    font-weight:800; font-size:24px; color:#fff; letter-spacing:0.5px;
    display:flex; align-items:center; gap:2px;
  }
  .logo span{color:var(--gold);}
  .logo img{height:48px; width:auto; display:block;}
  .footer-brand .logo img{height:56px;}
  .nav-links{display:flex; gap:26px; align-items:center;}
  .nav-links a{
    color:#c7cede; font-size:13.5px; font-weight:600; letter-spacing:0.3px;
    padding:8px 2px; border-bottom:2px solid transparent; transition:all .15s;
  }
  .nav-links a:hover, .nav-links a.active{color:#fff; border-bottom-color:var(--gold);}

  /* ---------- Hero ---------- */
  .hero{
    background:
      linear-gradient(180deg, rgba(10,20,45,0.58), rgba(10,20,45,0.72)),
      url(../images/hero-bg.jpg);
    background-size:cover;
    background-position:center;
    color:#fff; position:relative; overflow:hidden;
    padding:88px 0 72px;
  }
  .hero .container{position:relative; z-index:2; text-align:center;}
  .hero h1{font-size:38px; font-weight:800; line-height:1.25; max-width:820px; margin:0 auto 18px;}
  .hero h1 .accent{color:var(--gold);}
  .hero p{font-size:16px; color:#dbe6fb; max-width:660px; margin:0 auto 30px; line-height:1.6;}
  .hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .btn{
    display:inline-block; padding:13px 28px; border-radius:30px; font-weight:700; font-size:14.5px;
    transition:transform .15s, box-shadow .15s;
  }
  .btn-primary{background:var(--gold); color:#3a2a00; box-shadow:0 6px 18px rgba(255,201,60,0.4);}
  .btn-outline{background:rgba(255,255,255,0.08); color:#fff; border:1.5px solid rgba(255,255,255,0.5);}
  .btn-bonus{background:var(--grad-green); color:#fff; box-shadow:0 6px 18px rgba(14,164,114,0.4);}
  .btn:hover{transform:translateY(-2px);}

  /* Affiliate bonus callout (used on high-intent pages, e.g. Sports Betting Guide) */
  .bonus-callout{
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
    margin:22px 0; padding:20px 24px; border-radius:14px;
    background:var(--grad-green); color:#fff;
  }
  .bonus-callout p{margin:0; font-size:14.5px; line-height:1.6; max-width:520px;}
  .bonus-callout p strong{display:block; font-size:17px; margin-bottom:4px;}
  .bonus-callout .btn{background:#fff; color:#0ea472; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,0.15);}
  .bonus-callout .btn:hover{transform:translateY(-2px);}
  .bonus-fineprint{flex-basis:100%; margin-top:2px; font-size:11.5px; color:rgba(255,255,255,0.85);}
  .bonus-fineprint a{color:inherit; text-decoration:underline;}

  /* ---------- Ticker ---------- */
  .ticker{
    background:var(--navy-mid); color:#ffd873; font-size:13px; font-weight:600;
    padding:9px 0; overflow:hidden; white-space:nowrap;
  }
  .ticker-track{display:inline-block; padding-left:100%; animation:scroll-left 22s linear infinite;}
  @keyframes scroll-left{from{transform:translateX(0);} to{transform:translateX(-100%);}}

  /* ---------- Section heading ---------- */
  .section{padding:52px 0;}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px; flex-wrap:wrap; gap:10px;}
  .section-head h2{font-size:24px; font-weight:700; color:var(--text-dark);}
  .section-head .eyebrow{font-size:12.5px; font-weight:700; color:var(--blue-primary); letter-spacing:1.2px; text-transform:uppercase; margin-bottom:6px; display:block;}
  .section-head .view-all{font-size:13.5px; font-weight:700; color:var(--blue-primary);}
  .bg-white{background:#fff;}

  /* ---------- Today's results cards ---------- */
  .results-row{
    display:flex; gap:16px; overflow-x:auto; padding-bottom:8px;
    scrollbar-width:thin;
  }
  .result-card{
    flex:0 0 220px; background:var(--card-white); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card); padding:18px; border-top:4px solid var(--blue-primary);
  }
  .result-card .badge-row{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
  .badge-circle{
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:12px; flex-shrink:0;
  }
  .result-card .title{font-weight:700; font-size:14.5px;}
  .result-card .date{font-size:12px; color:var(--text-mute);}
  .result-card .numbers{display:flex; gap:6px; flex-wrap:wrap; margin:12px 0;}
  .num-chip{
    background:var(--bg-light); color:var(--blue-deep); font-weight:700; font-size:13px;
    padding:5px 9px; border-radius:8px;
  }
  .num-chip.jackpot{background:var(--gold); color:#3a2a00;}
  .result-card .view-full{font-size:12.5px; font-weight:700; color:var(--blue-primary);}

  /* ---------- Regional tabs ---------- */
  .region-tabs{display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap;}
  .region-tab{
    padding:9px 18px; border-radius:24px; font-weight:700; font-size:13.5px;
    background:#fff; color:var(--text-mute); box-shadow:var(--shadow-card); cursor:pointer;
  }
  .region-tab.active{background:var(--blue-primary); color:#fff;}
  .region-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .region-panel{
    display:block; background:#fff; border-radius:var(--radius-md); padding:18px; box-shadow:var(--shadow-card);
    text-align:center; font-weight:600; font-size:13.5px; color:var(--text-dark); text-decoration:none;
    position:relative;
  }
  .region-panel .ic{font-size:26px; margin-bottom:8px;}
  .region-panel.is-soon{color:var(--text-mute); cursor:default;}
  .soon-badge{
    position:absolute; top:8px; right:8px; font-size:10px; font-weight:700; letter-spacing:.3px;
    background:var(--bg-light,#eef2f9); color:var(--text-mute); padding:2px 7px; border-radius:10px;
  }

  /* ---------- Schedule table ---------- */
  table.schedule{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card);}
  table.schedule th{background:var(--navy-dark); color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:0.5px; padding:14px 16px; text-align:left;}
  table.schedule td{padding:14px 16px; font-size:13.5px; border-bottom:1px solid #eef1f6;}
  table.schedule tr:last-child td{border-bottom:none;}
  .status-pill{padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700;}
  .status-live{background:#ffe3e3; color:#b8342f;}
  .status-upcoming{background:#e4f6ea; color:#0f7a3d;}
  .status-done{background:#eef1f6; color:var(--text-mute);}

  /* ---------- Quick access grid ---------- */
  .quick-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
  .quick-tile{
    display:block; text-decoration:none;
    border-radius:var(--radius-lg); padding:22px 14px; text-align:center; color:#fff; font-weight:700; font-size:13.5px;
    box-shadow:var(--shadow-card); cursor:pointer; transition:transform .15s;
  }
  .quick-tile:hover{transform:translateY(-4px);}
  .quick-tile .ic{font-size:28px; margin-bottom:10px; display:block;}

  /* ---------- Statistics tools ---------- */
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .stat-card{
    background:#fff; border-radius:var(--radius-md); padding:20px; box-shadow:var(--shadow-card);
    display:flex; align-items:center; gap:14px; transition:transform .15s ease;
  }
  a.stat-card:hover{transform:translateY(-4px);}
  .stat-card .ic{
    width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:20px; color:#fff; flex-shrink:0;
  }
  .stat-card .label{font-weight:700; font-size:13.5px;}
  .stat-card .sub{font-size:12px; color:var(--text-mute);}

  /* ---------- Guides / News cards ---------- */
  .card-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .article-card{background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); display:block; transition:transform .15s ease;}
  a.article-card:hover{transform:translateY(-4px);}
  .article-card .thumb{height:120px; display:flex; align-items:center; justify-content:center; font-size:34px; color:#fff;}
  .article-card .body{padding:16px;}
  .article-card .tag{font-size:11px; font-weight:700; color:var(--blue-primary); text-transform:uppercase; letter-spacing:0.5px;}
  .article-card h4{font-size:14.5px; margin:8px 0 6px;}
  .article-card p{font-size:12.5px; color:var(--text-mute); line-height:1.5;}

  /* ---------- Responsible gaming banner ---------- */
  .rg-banner{
    background:var(--navy-darker); color:#c7cede; text-align:center; padding:26px 0; font-size:13px;
  }
  .rg-banner strong{color:#fff;}
  .rg-banner .age{
    display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
    border:2px solid #ff6b66; color:#ff6b66; font-weight:800; font-size:12px; margin-right:8px; vertical-align:middle;
  }

  /* ---------- FAQ ---------- */
  .faq-item{background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:16px 20px; margin-bottom:12px; font-weight:600; font-size:14px; display:flex; justify-content:space-between; align-items:center; cursor:pointer;}
  .faq-item .plus{color:var(--blue-primary); font-size:18px; font-weight:700;}

  /* ---------- Footer ---------- */
  footer{background:var(--navy-darker); color:#9aa3ba; padding:50px 0 20px; font-size:13px;}
  .footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; margin-bottom:36px;}
  .footer-grid h5{color:#fff; font-size:13.5px; margin-bottom:14px; letter-spacing:0.5px;}
  .footer-grid ul{list-style:none;}
  .footer-grid li{margin-bottom:9px;}
  .footer-grid a:hover{color:#fff;}
  .footer-brand .logo{margin-bottom:12px;}
  .footer-brand p{line-height:1.6; max-width:320px; color:#8b93aa;}
  .social-row{display:flex; gap:10px; margin-top:16px;}
  .social-row a{
    width:34px; height:34px; border-radius:50%; background:var(--navy-mid); display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:14px;
  }
  .footer-bottom{border-top:1px solid #333c58; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:#9aa3ba;}

  /* ---------- Footer trust / payment / provider chips ---------- */
  .footer-trust{border-top:1px solid #333c58; padding:28px 0 32px;}
  .trust-block{margin-bottom:22px;}
  .trust-block:last-child{margin-bottom:0;}
  .trust-label{
    display:block; color:#9aa3ba; font-size:11.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:1px; margin-bottom:12px;
  }
  .trust-chips{display:flex; flex-wrap:wrap; gap:10px;}
  .trust-chip{
    background:var(--navy-mid); color:#c7cede; border:1px solid #454f6e;
    padding:8px 16px; border-radius:20px; font-size:12.5px; font-weight:600;
    display:flex; align-items:center; gap:6px;
  }
  .trust-chip.age{border-color:#e3423f; color:#ff9d9a;}
  .trust-chip .dot{width:6px; height:6px; border-radius:50%; background:#3fe0a5; display:inline-block;}

  /* ---------- Responsive ---------- */
  @media (max-width:960px){
    .region-grid{grid-template-columns:repeat(2,1fr);}
    .quick-grid{grid-template-columns:repeat(3,1fr);}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .card-grid-3{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .hero h1{font-size:28px;}
    nav.main-nav .nav-links{display:none;}
  }
/* Game detail pages (xsmb.html, xsmt.html, etc.) */
.game-detail-head{display:flex; align-items:center; gap:14px; margin-bottom:6px;}
.game-detail-badge{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; flex-shrink:0;}
.game-detail-meta .date{color:var(--text-muted,#6b7280); font-size:14px;}
.back-link{font-size:13.5px; font-weight:700; color:var(--blue-primary); text-decoration:none;}
.breakdown-list{margin-top:22px; display:flex; flex-direction:column; gap:10px;}
.prize-tier-row{display:flex; align-items:center; gap:16px; padding:14px 18px; background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:10px; flex-wrap:wrap;}
.prize-tier-row.is-special{border-color:var(--gold,#ffc93c); background:#fffbea;}
.prize-tier-label{font-weight:700; min-width:140px; color:var(--text-dark,#1c2233);}
.prize-tier-numbers{display:flex; gap:8px; flex-wrap:wrap;}
.detail-source-note{margin-top:18px; font-size:12.5px; color:var(--text-muted,#6b7280);}
.detail-state{padding:20px; color:var(--text-muted,#6b7280);}

/* Province list page */
.province-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:20px;}
.province-card{background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:10px; padding:16px;}
.province-card .name{font-weight:700; color:var(--text-dark,#1c2233); margin-bottom:4px;}
.province-card .date{font-size:12px; color:var(--text-muted,#6b7280); margin-bottom:10px;}
.province-card .empty{font-size:13px; color:var(--text-muted,#6b7280);}

/* Lottery Statistics page */
.stats-page-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:10px;}
.stats-block{background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:12px; padding:18px;}
.stats-block h3{margin:0 0 4px;}
.stats-block-sub{margin:0 0 12px; font-size:12.5px; color:var(--text-mute);}
.stats-chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.stat-chip{display:flex; align-items:center; gap:6px; background:var(--bg-light,#eef2f9); border-radius:8px; padding:6px 10px; font-weight:700; font-size:13px;}
.stat-chip .count{font-weight:600; font-size:11px; color:var(--text-mute); background:#fff; border-radius:6px; padding:1px 6px;}
.stats-block .back-link{display:inline-block; margin-top:10px;}
@media (max-width:720px){ .stats-page-grid{grid-template-columns:1fr;} }

/* Dream Numbers page */
.dream-search{width:100%; max-width:420px; padding:10px 14px; border:1px solid var(--border,#e5e7eb); border-radius:8px; font-size:14px; margin:16px 0 20px;}
.dream-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px;}
.dream-card{background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:10px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.dream-card .symbol{font-weight:700; color:var(--text-dark,#1c2233);}
.dream-card .symbol .vi{display:block; font-weight:400; font-size:12px; color:var(--text-mute);}
.dream-card .num{font-weight:800; font-size:18px; color:var(--blue-primary); background:var(--bg-light,#eef2f9); border-radius:8px; padding:4px 10px;}

/* Individual statistics tool pages (hot/cold/last-digit/pair) */
.rank-list{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.rank-row{display:grid; grid-template-columns:32px 64px 1fr 56px; align-items:center; gap:12px; background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:10px; padding:10px 14px;}
.rank-row .rank-pos{font-size:12px; font-weight:700; color:var(--text-mute);}
.rank-row .rank-value{font-weight:800; font-size:15px; color:var(--text-dark,#1c2233); font-family:'Roboto Mono',monospace;}
.rank-row .rank-bar-track{background:var(--bg-light,#eef2f9); border-radius:6px; height:10px; overflow:hidden;}
.rank-row .rank-bar-fill{height:100%; border-radius:6px; background:var(--grad-teal);}
.rank-row .rank-count{font-size:12.5px; font-weight:700; color:var(--text-mute); text-align:right;}
.rank-row.rank-top .rank-bar-fill{background:var(--grad-orange);}
@media (max-width:560px){ .rank-row{grid-template-columns:24px 48px 1fr 44px; gap:8px; padding:8px 10px;} }

.related-tools-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px;}
.related-tools-grid .stat-card.active{border:2px solid var(--blue-primary);}
@media (max-width:900px){ .related-tools-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .related-tools-grid{grid-template-columns:1fr;} }

/* Guide / article pages (how-vietnam-lottery-works.html, etc.) */
.guide-page{max-width:860px; margin:0 auto;}
.breadcrumb{font-size:12.5px; color:var(--text-mute); margin-bottom:14px;}
.breadcrumb a{color:var(--text-mute); font-weight:600;}
.breadcrumb a:hover{color:var(--blue-primary);}
.breadcrumb .sep{margin:0 6px; color:#c3c9d6;}
.guide-tag{display:inline-block; font-size:11px; font-weight:700; color:var(--blue-primary); text-transform:uppercase; letter-spacing:0.5px; background:var(--bg-light); border-radius:6px; padding:4px 10px; margin-bottom:10px;}
.guide-title{font-size:32px; font-weight:800; color:var(--text-dark); line-height:1.25; margin-bottom:12px;}
.guide-lede{font-size:15.5px; color:var(--text-mute); line-height:1.7; margin-bottom:8px;}
.guide-body{margin-top:28px; font-size:14.5px; line-height:1.75; color:var(--text-dark);}
.guide-body h2{font-size:21px; font-weight:700; margin:34px 0 12px; color:var(--text-dark);}
.guide-body h3{font-size:16.5px; font-weight:700; margin:20px 0 8px; color:var(--text-dark);}
.guide-body p{margin-bottom:14px;}
.guide-body ul, .guide-body ol{margin:0 0 14px 22px;}
.guide-body li{margin-bottom:6px;}
.guide-body strong{color:var(--text-dark);}
.guide-body hr{border:none; border-top:1px solid var(--border,#e5e7eb); margin:30px 0;}
.guide-table-wrap{overflow-x:auto; margin-bottom:18px; border:1px solid var(--border,#e5e7eb); border-radius:10px;}
.guide-table{width:100%; border-collapse:collapse; font-size:13.5px; background:#fff;}
.guide-table th{text-align:left; background:var(--bg-light); color:var(--text-dark); font-weight:700; padding:10px 14px; white-space:nowrap;}
.guide-table td{padding:10px 14px; border-top:1px solid var(--border,#e5e7eb); color:var(--text-mute);}
.guide-faq{margin-top:8px;}
.guide-faq details{background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:16px 20px; margin-bottom:12px;}
.guide-faq summary{font-weight:700; font-size:14px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--text-dark);}
.guide-faq summary::-webkit-details-marker{display:none;}
.guide-faq summary::after{content:'+'; color:var(--blue-primary); font-size:18px; font-weight:700; margin-left:12px; flex-shrink:0;}
.guide-faq details[open] summary::after{content:'−';}
.guide-faq summary + p{margin:12px 0 0; font-size:13.5px; color:var(--text-mute); line-height:1.6;}
.guide-cta{margin-top:32px; padding:20px; background:var(--bg-light); border-radius:12px; font-size:14px; line-height:1.7;}
@media (max-width:600px){ .guide-title{font-size:25px;} }

.guide-toc{background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:12px; padding:18px 22px; margin:24px 0;}
.guide-toc h2{margin-top:0 !important;}
.guide-toc ol{margin:0 0 0 20px; columns:2; column-gap:24px;}
.guide-toc li{margin-bottom:6px; break-inside:avoid; font-size:13.5px;}
.guide-toc a{color:var(--blue-primary); font-weight:600;}
.guide-toc a:hover{text-decoration:underline;}
@media (max-width:600px){ .guide-toc ol{columns:1;} }
html{scroll-behavior:smooth;}
.guide-body h2[id]{scroll-margin-top:112px;}