@font-face {
  font-family: 'Barlow Condensed';
 src: local('Arial Narrow'), local('Arial');
 font-weight: 400 800;
 size-adjust: 97%;
 ascent-override: 95%;
 descent-override: 25%;
 line-gap-override: normal;
}
@font-face {
  font-family: 'Barlow';
 src: local('Arial'), local('Helvetica Neue');
 font-weight: 400 700;
 size-adjust: 100%;
 ascent-override: 95%;
 descent-override: 20%;
 line-gap-override: normal;
}
:root {
  font-synthesis: none;
 
 --red:#d93025; --red-dark:#b71c15; --red-light:#ff6050;
 --gold:#f5a623; --gold-light:#ffc85a;
 --green:#22a85a; --blue:#2196f3; --purple:#9c27b0;

 --bg:#0f1923; 
 --bg2:#162030; 
 --bg3:#1c2a3a; 
 --bg4:#223040; 

 --border:#2a3d52;
 --border2:#334d66;

 --text:#f0f4f8;
 --text2:#d0e4f4;
 --muted:#9ec4e0; 

 --font-head:'Barlow Condensed','Arial Narrow',sans-serif;
 --font-body:'Barlow','Arial',sans-serif;

 --red-primary:var(--red); --bg-secondary:var(--bg3);
 --border-color:var(--border); --text-secondary:var(--text);
 --text-muted:var(--muted); --text-heading:var(--text);
 --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
 --r4:4px; --r8:8px; --r12:12px; --r16:16px;
 --shadow-sm:0 2px 8px rgba(0,0,0,.4);
 --shadow-card:0 4px 16px rgba(0,0,0,.35);
}
* {
  margin:0;padding:0;box-sizing:border-box
}
html {
  scroll-behavior:smooth;-webkit-text-size-adjust:100%
}
body {
  font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6
}
a {
  color:inherit;text-decoration:none
}
img {
  max-width:100%;display:block
}
#header {
  background:linear-gradient(135deg,#1a0a08 0%,#0f1923 45%,#0a1628 100%);
 border-bottom:3px solid var(--red);
 position:sticky;top:0;z-index:999;
 box-shadow:0 2px 20px rgba(0,0,0,.5);
}
#header {
  position:relative;
}
.header-top {
  display:flex;align-items:center;justify-content:space-between;
 padding:10px 20px;max-width:1280px;margin:0 auto;gap:12px;
}
.logo {
  font-family:var(--font-head);font-size:28px;font-weight:800;
 color:var(--gold);letter-spacing:1px;
 display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.logo span {
  color:var(--red-light)
}
.logo-icon {
  width:36px;height:36px;background:var(--red);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:16px;color:#fff;flex-shrink:0
}
.logo-text {
  font-family:var(--font-head);font-weight:800;font-size:26px;color:var(--gold);letter-spacing:.5px
}
.logo-sub {
  font-size:10px;color:var(--muted);font-family:var(--font-body);font-weight:400;letter-spacing:1px;display:block;margin-top:-2px
}
.header-right {
  display:flex;align-items:center;gap:12px;flex-shrink:0
}
.header-date {
  font-size:13px;color:var(--muted)
}
.header-date strong {
  color:var(--gold)
}
#realtime-clock {
  color:var(--gold);font-weight:600;font-family:var(--font-head);font-size:18px
}
.btn-xemtruc {
  background:var(--red);color:#fff;border:none;padding:8px 14px;font-family:var(--font-head);font-size:14px;font-weight:700;letter-spacing:1px;cursor:pointer;border-radius:4px;white-space:nowrap;animation:pulse-red 2s infinite
}
.nav-toggle {
  display:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
 color:#fff;font-size:22px;cursor:pointer;padding:5px 10px;border-radius:4px;
 line-height:1;flex-shrink:0;
}
nav {
  background:var(--bg2);border-top:1px solid var(--border);
 display:flex;justify-content:center;overflow-x:auto;
 scrollbar-width:none;
}
nav::-webkit-scrollbar {
  display:none
}
nav a {
  color:var(--text2);padding:10px 14px;
 font-family:var(--font-head);font-size:13px;font-weight:700;
 letter-spacing:1px;text-transform:uppercase;white-space:nowrap;
 border-bottom:3px solid transparent;transition:all .2s;display:block;
}
nav a:hover,nav a.active {
  color:var(--gold);border-bottom-color:var(--gold)
}
.ticker-bar {
  background:linear-gradient(90deg,#8b0000,var(--red-dark));padding:5px 20px;display:flex;align-items:center;gap:16px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)
}
.ticker-label {
  font-family:var(--font-head);font-size:11px;font-weight:700;color:#fff;letter-spacing:2px;white-space:nowrap;padding-right:14px;border-right:1px solid rgba(255,255,255,.3);flex-shrink:0
}
.ticker-scroll {
  display:flex;gap:28px;animation:ticker 35s linear infinite;white-space:nowrap
}
@keyframes ticker {
  0% {
  transform:translateX(0)
}
100% {
  transform:translateX(-50%)
}

}
.ticker-item {
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#ffd
}
.ticker-province {
  font-weight:600;color:#fff
}
.ticker-num {
  color:var(--gold-light);font-weight:700
}
.container {
  max-width:1280px;margin:0 auto;padding:20px
}
.layout {
  display:grid;grid-template-columns:1fr 310px;gap:20px
}
.row {
  display:flex;flex-wrap:wrap;gap:20px
}
.col-main {
  flex:1;min-width:0
}
.col-side {
  width:300px;flex-shrink:0
}
.page-hero {
  background:linear-gradient(135deg,#1f0a08,#0f1923 55%,#0a1628);border-bottom:1px solid var(--border);padding:18px 20px;margin-bottom:0
}
.page-hero-inner {
  max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px
}
.page-hero-title {
  font-family:var(--font-head);font-size:28px;font-weight:800;color:var(--gold);letter-spacing:1px;line-height:1
}
.page-hero-sub {
  font-size:13px;color:var(--muted);margin-top:4px
}
.page-hero-badge {
  width:52px;height:52px;background:rgba(243,156,18,.1);border:2px solid var(--gold);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--gold);flex-shrink:0
}
.hero-icon {
  font-size:36px;line-height:1
}
.hero-title {
  font-family:var(--font-head);font-size:32px;font-weight:800;color:var(--gold);letter-spacing:2px
}
.hero-sub {
  font-size:13px;color:var(--muted);margin-top:4px
}
.hero-breadcrumb {
  margin-left:auto;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px
}
.hero-breadcrumb a {
  color:var(--muted)
}
.hero-breadcrumb a:hover {
  color:var(--gold)
}
.hero-breadcrumb span {
  color:var(--gold)
}
.breadcrumb {
  display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:12px 0 16px;flex-wrap:wrap;padding:8px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:6px
}
.breadcrumb a {
  color:var(--muted)
}
.breadcrumb a:hover {
  color:var(--gold)
}
.breadcrumb-sep {
  color:var(--border)
}
.breadcrumb-current {
  color:var(--text)
}
.section-title {
  font-family:var(--font-head);font-size:19px;font-weight:700;color:var(--gold);letter-spacing:1px;text-transform:uppercase;padding-bottom:10px;margin-bottom:14px;border-bottom:2px solid var(--border2);display:flex;align-items:center;gap:8px
}
.section-title::before {
  content:'';display:block;width:4px;height:20px;background:var(--red);border-radius:2px;flex-shrink:0
}
.mt-20 {
  margin-top:20px
}
.mt-28 {
  margin-top:28px
}
.mt-16 {
  margin-top:16px
}
.mb-16 {
  margin-bottom:16px
}
.card-box {
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-card)
}
.card-box-head {
  background:var(--bg4);padding:11px 16px;border-bottom:1px solid var(--border)
}
.card-box-body {
  padding:16px
}
.card {
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow-card)
}
.card-header {
  background:linear-gradient(135deg,var(--red-dark),var(--red));padding:11px 16px;display:flex;align-items:center;justify-content:space-between
}
.card-title {
  font-family:var(--font-head);font-weight:700;font-size:16px;color:#fff
}
.card-body {
  padding:16px
}
.card-footer {
  padding:10px 16px;border-top:1px solid var(--border);background:var(--bg4);font-size:13px;color:var(--muted)
}
.countdown-row {
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px
}
.countdown-card {
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center;border-top:3px solid var(--red);box-shadow:var(--shadow-card)
}
.cc-region {
  font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-bottom:4px
}
.cc-time {
  font-family:var(--font-head);font-size:32px;font-weight:800;color:var(--gold);line-height:1;margin:5px 0;text-shadow:0 0 20px rgba(245,166,35,.3)
}
.cc-label {
  font-size:11px;color:var(--muted)
}
.cc-live {
  display:inline-flex;align-items:center;gap:5px;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-top:6px;font-family:var(--font-head);letter-spacing:1px
}
.cc-live::before {
  content:'';width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1s infinite
}
.result-tabs {
  display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap
}
.rtab {
  font-family:var(--font-head);font-size:13px;font-weight:700;padding:8px 18px;border:1px solid var(--border);border-radius:4px;background:var(--bg3);color:var(--muted);cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:all .2s
}
.rtab.active {
  background:var(--red);color:#fff;border-color:var(--red)
}
.rtab:hover:not(.active) {
  border-color:var(--gold);color:var(--gold)
}
.kqxs-wrap {
  display:none
}
.kqxs-wrap.show {
  display:block
}
.kqxs-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px
}
.kqxs-grid-2 {
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px
}
.grid-2 {
  display:grid;grid-template-columns:1fr 1fr;gap:14px
}
.kqxs-card {
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:all .2s;box-shadow:var(--shadow-card)
}
.kqxs-card:hover {
  border-color:var(--gold);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.4)
}
.kqxs-head {
  background:linear-gradient(135deg,#8b1a10,var(--red));padding:10px 14px;display:flex;align-items:center;justify-content:space-between
}
.kqxs-province {
  font-family:var(--font-head);font-size:15px;font-weight:700;color:#fff;letter-spacing:1px
}
.kqxs-date {
  font-size:11px;color:rgba(255,255,255,.75)
}
.kqxs-row {
  display:flex;border-bottom:1px solid var(--border);font-size:13px;align-items:stretch
}
.kqxs-row:last-child {
  border-bottom:none
}
.kqxs-giai {
  width:85px;min-width:85px;padding:6px 8px;font-weight:600;color:var(--muted);font-size:11px;background:var(--bg4);border-right:1px solid var(--border);display:flex;align-items:center
}
.kqxs-nums {
  padding:6px 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1
}
.num {
  display:inline-block;font-weight:700;font-size:14px;color:var(--text);letter-spacing:1px
}
.num.special {
  font-size:21px;font-weight:800;color:#ff6b5b;font-family:var(--font-head);background:rgba(217,48,37,.15);padding:2px 10px;border-radius:5px;border:1px solid rgba(217,48,37,.4);text-shadow:0 0 12px rgba(255,107,91,.3)
}
.num.g1 {
  font-size:17px;font-weight:700;color:var(--gold-light)
}
.hl {
  color:#ff6b5b;font-weight:800
}
.kqxs-mb-card {
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-card)
}
.kqxs-mb-head {
  background:linear-gradient(135deg,#8b1a10,var(--red));padding:14px 20px;display:flex;align-items:center;justify-content:space-between
}
.kqxs-mb-province {
  font-family:var(--font-head);font-size:22px;font-weight:800;color:#fff;letter-spacing:2px
}
table.mb-table {
  width:100%;border-collapse:collapse
}
table.mb-table tr {
  border-bottom:1px solid var(--border)
}
table.mb-table tr:last-child {
  border-bottom:none
}
table.mb-table td {
  padding:8px 14px;vertical-align:middle
}
table.mb-table .giai-label {
  font-size:12px;font-weight:600;color:var(--muted);width:80px;background:var(--bg4);text-align:center;border-right:1px solid var(--border)
}
table.mb-table .giai-nums {
  display:flex;flex-wrap:wrap;gap:10px
}
.mb-num {
  font-size:15px;font-weight:700;color:var(--text2);letter-spacing:1px
}
.mb-num.sp {
  font-size:28px;font-weight:800;color:#ff6b5b;font-family:var(--font-head);text-shadow:0 0 16px rgba(255,107,91,.35)
}
.mb-num.g1 {
  font-size:20px;font-weight:700;color:var(--gold-light);font-family:var(--font-head)
}
.num-highlight {
  display:inline-block
}
.last2 {
  color:#ff6b5b;font-weight:800
}
.badge {
  display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:1px;text-transform:uppercase
}
.badge-new {
  background:rgba(39,174,96,.15);color:#58d68d;border:1px solid rgba(39,174,96,.3)
}
.badge-hot {
  background:rgba(192,57,43,.15);color:var(--red-light);border:1px solid rgba(192,57,43,.3)
}
.badge-live {
  background:var(--red);color:#fff;animation:pulse-red 2s infinite
}
.badge-gold {
  background:rgba(243,156,18,.15);color:var(--gold);border:1px solid rgba(243,156,18,.3)
}
.badge-green {
  background:rgba(39,174,96,.15);color:#58d68d;border:1px solid rgba(39,174,96,.3)
}
.badge-blue {
  background:rgba(41,128,185,.15);color:#7ab3d4;border:1px solid rgba(41,128,185,.3)
}
.freq-table {
  width:100%;border-collapse:collapse;font-size:13px
}
.freq-table th {
  padding:8px 10px;background:var(--bg4);color:var(--muted);font-weight:600;font-size:11px;letter-spacing:1px;text-transform:uppercase;text-align:left
}
.freq-table td {
  padding:7px 10px;border-bottom:1px solid var(--border)
}
.freq-table tr:hover td {
  background:var(--bg4)
}
.freq-bar-wrap {
  width:80px;height:7px;background:var(--bg);border-radius:4px;display:inline-block;overflow:hidden
}
.freq-bar {
  height:100%;background:linear-gradient(90deg,var(--red-dark),var(--red));border-radius:4px;transition:width .5s
}
.hot-num {
  display:inline-block;background:rgba(192,57,43,.12);color:var(--red-light);border:1px solid rgba(192,57,43,.3);padding:2px 8px;border-radius:4px;font-weight:700;font-size:14px
}
.cold-num {
  display:inline-block;background:rgba(41,128,185,.12);color:#7ab3d4;border:1px solid rgba(41,128,185,.3);padding:2px 8px;border-radius:4px;font-weight:700;font-size:14px
}
.stat-tabs {
  display:flex;gap:4px;flex-wrap:wrap
}
.stab {
  font-size:12px;font-weight:600;padding:5px 12px;border:1px solid var(--border);border-radius:20px;background:var(--bg4);color:var(--muted);cursor:pointer;transition:all .2s
}
.stab.active {
  background:var(--gold);color:#000;border-color:var(--gold)
}
.stab:hover:not(.active) {
  border-color:var(--gold);color:var(--gold)
}
.logan-grid {
  display:grid;grid-template-columns:repeat(10,1fr);gap:6px
}
.lg-item {
  background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:8px 4px;text-align:center
}
.lg-num {
  font-family:var(--font-head);font-size:20px;font-weight:800
}
.lg-days {
  font-size:10px;color:var(--muted)
}
.lg-hot {
  border-color:var(--red)
}
.lg-hot .lg-num {
  color:var(--red-light)
}
.lg-warm {
  border-color:#d35400
}
.lg-warm .lg-num {
  color:#e67e22
}
.lg-cold {
  border-color:#2980b9
}
.lg-cold .lg-num {
  color:#5dade2
}
.data-table {
  width:100%;border-collapse:collapse;font-size:13px
}
.data-table th {
  padding:8px 12px;background:var(--bg4);color:var(--muted);font-size:11px;font-weight:600;text-align:left;border-bottom:1px solid var(--border)
}
.data-table td {
  padding:10px 12px;border-bottom:1px solid var(--border)
}
.data-table tr:last-child td {
  border-bottom:none
}
.data-table tr:hover td {
  background:rgba(255,255,255,.02)
}
.ball {
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:18px;font-weight:800;border:2px solid;flex-shrink:0
}
.ball.red {
  background:rgba(192,57,43,.15);border-color:var(--red);color:var(--red-light)
}
.ball.gold {
  background:rgba(243,156,18,.15);border-color:var(--gold);color:var(--gold);width:50px;height:50px;font-size:20px
}
.ball.blue {
  background:rgba(41,128,185,.15);border-color:var(--blue);color:#7ab3d4
}
.ball.green {
  background:rgba(39,174,96,.15);border-color:var(--green);color:#58d68d
}
.power-balls {
  display:flex;justify-content:center;gap:8px;margin:14px 0;flex-wrap:wrap
}
.jackpot-display {
  text-align:center;padding:18px;background:linear-gradient(135deg,#1a0a00,#1a1a00);border-radius:8px;margin-bottom:14px;border:1px solid #3a2a00
}
.jackpot-label {
  font-size:11px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;margin-bottom:6px
}
.jackpot-amount {
  font-family:var(--font-head);font-size:40px;font-weight:800;color:var(--gold);line-height:1
}
.jackpot-sub {
  font-size:12px;color:var(--muted);margin-top:5px
}
.dd-num {
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:18px;font-weight:800;border:2px solid;flex-shrink:0
}
.dd-num.pri {
  background:rgba(192,57,43,.12);border-color:var(--red);color:var(--red-light)
}
.dd-num.sec {
  background:rgba(243,156,18,.1);border-color:var(--gold);color:var(--gold)
}
.progress-label {
  display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:4px
}
.progress-track {
  height:6px;background:var(--bg);border-radius:3px;overflow:hidden
}
.progress-fill {
  height:100%;border-radius:3px;background:linear-gradient(90deg,var(--red),var(--gold))
}
.lookup-input {
  width:100%;padding:10px 14px;font-size:20px;font-family:var(--font-head);font-weight:700;background:var(--bg4);border:1px solid var(--border);border-radius:6px;color:var(--gold);letter-spacing:4px;text-align:center;outline:none;transition:border-color .2s
}
.lookup-input:focus {
  border-color:var(--gold)
}
.lookup-input::placeholder {
  color:var(--muted);letter-spacing:2px;font-size:16px
}
.lookup-btn {
  width:100%;padding:10px;background:var(--red);color:#fff;border:none;border-radius:6px;font-family:var(--font-head);font-size:15px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:background .2s;margin-top:8px
}
.lookup-btn:hover {
  background:var(--red-dark)
}
.lookup-result {
  min-height:30px
}
.lr-status {
  font-family:var(--font-head);font-size:18px;font-weight:700;margin-bottom:4px
}
.lr-status.win {
  color:var(--green)
}
.lr-status.lose {
  color:var(--red-light)
}
.sidebar {
  display:flex;flex-direction:column;gap:16px
}
.sch-day {
  padding:9px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:10px
}
.sch-day:last-child {
  border-bottom:none
}
.sch-dayname {
  font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--gold);min-width:30px;text-align:center;background:rgba(243,156,18,.1);border:1px solid rgba(243,156,18,.2);padding:2px 5px;border-radius:4px;flex-shrink:0
}
.sch-region {
  font-size:10px;color:var(--muted);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:1px
}
.sch-plist {
  font-size:12px;color:var(--text);line-height:1.7
}
.sch-plist span {
  color:var(--gold)
}
.sidebar-widget {
  background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:16px
}
.sidebar-widget-header {
  background:var(--red);padding:10px 14px;font-family:var(--font-head);font-weight:700;font-size:15px;color:#fff
}
.sidebar-widget-body {
  padding:12px 14px
}
.news-item {
  display:flex;gap:10px;padding:10px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;transition:border-color .2s;cursor:pointer;margin-bottom:8px
}
.news-item:last-child {
  margin-bottom:0
}
.news-item:hover {
  border-color:var(--gold)
}
.news-img {
  width:44px;height:44px;border-radius:6px;background:var(--bg4);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px
}
.news-title {
  font-size:13px;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.news-meta {
  font-size:11px;color:var(--muted)
}
.news-meta span {
  color:var(--red-light)
}
.btn {
  display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s;font-family:var(--font-body)
}
.btn-primary {
  background:var(--red);color:#fff
}
.btn-primary:hover {
  background:var(--red-dark)
}
.btn-outline {
  background:var(--bg3);border:1px solid var(--border);color:var(--muted)
}
.btn-outline:hover {
  border-color:var(--gold);color:var(--gold)
}
.btn-gold {
  background:var(--gold);color:#000;font-weight:700
}
.btn-gold:hover {
  background:var(--gold-light)
}
.btn-sm {
  padding:5px 12px;font-size:12px
}
.btn-lg {
  padding:12px 28px;font-size:16px
}
select,input[type=text],input[type=number],input[type=date] {
  background:var(--bg4);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:8px 12px;font-size:13px;outline:none;transition:border-color .2s;font-family:var(--font-body)
}
select:focus,input:focus {
  border-color:var(--gold)
}
.form-group {
  margin-bottom:14px
}
.form-group label {
  display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px
}
.tag {
  background:var(--bg4);border:1px solid var(--border2);padding:3px 10px;border-radius:20px;font-size:11px;color:var(--text2)
}
footer {
  margin-top:40px;background:var(--bg2);border-top:2px solid var(--border2);padding:28px 20px 18px
}
.footer-grid {
  max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:22px
}
.footer-col h4 {
  font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px
}
.footer-col a {
  display:block;font-size:13px;color:var(--muted);margin-bottom:5px;transition:color .2s
}
.footer-col a:hover {
  color:var(--text)
}
.footer-bottom {
  max-width:1280px;margin:0 auto;padding-top:14px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)
}
.footer-desc {
  font-size:13px;color:var(--muted);margin-top:8px;line-height:1.7
}
.footer-tags {
  display:flex;flex-wrap:wrap;gap:6px;margin-top:10px
}
@keyframes pulse-red {
  0%,100% {
  box-shadow:0 0 0 0 rgba(192,57,43,.6)
}
50% {
  box-shadow:0 0 0 8px rgba(192,57,43,0)
}

}
@keyframes blink {
  0%,100% {
  opacity:1
}
50% {
  opacity:0
}

}
@keyframes pulse {
  0%,100% {
  opacity:1
}
50% {
  opacity:.6
}

}
@media (max-width:1024px) {
  .layout {
  grid-template-columns:1fr
}
.sidebar {
  display:grid;grid-template-columns:1fr 1fr;gap:14px
}
.col-side {
  width:100%
}
.footer-grid {
  grid-template-columns:1fr 1fr
}
.kqxs-grid {
  grid-template-columns:repeat(2,1fr)
}
.logan-grid {
  grid-template-columns:repeat(8,1fr)
}
.jackpot-amount {
  font-size:34px
}

}
@media (max-width:768px) {
  .header-top {
  padding:8px 14px;flex-wrap:wrap;gap:8px
}
.logo-text {
  font-size:22px
}
.logo-sub {
  display:none
}
.header-date {
  display:none
}
.nav-toggle {
  display:flex;align-items:center;justify-content:center
}
nav {
  display:block;
 max-height:0;
 overflow:hidden;
 flex-direction:column;
 background:var(--bg2);
 border-top:none;
 transition:max-height .3s ease, border-top .3s;
}
nav.open {
  max-height:600px;
 border-top:1px solid var(--border);
 box-shadow:0 8px 24px rgba(0,0,0,.8);
 background:var(--bg2);
}
nav a {
  padding:12px 20px;border-bottom:1px solid var(--border);
 border-bottom-color:var(--border) !important;
 border-left:3px solid transparent;
 font-size:14px;
}
nav a:hover,nav a.active {
  border-left-color:var(--gold);
 border-bottom-color:var(--border) !important;
 background:rgba(255,255,255,.04);
}
.ticker-bar {
  padding:5px 12px;gap:10px
}
.container {
  padding:12px
}
.layout {
  grid-template-columns:1fr;gap:16px
}
.sidebar {
  display:flex;flex-direction:column;gap:12px
}
.row {
  flex-direction:column;gap:14px
}
.col-side {
  width:100%
}
.grid-2 {
  grid-template-columns:1fr
}
.page-hero {
  padding:14px
}
.page-hero-title {
  font-size:22px
}
.page-hero-badge {
  width:40px;height:40px;font-size:14px
}
.countdown-row {
  grid-template-columns:1fr;gap:8px
}
.cc-time {
  font-size:26px
}
.kqxs-grid {
  grid-template-columns:1fr
}
.kqxs-grid-2 {
  grid-template-columns:1fr
}
.kqxs-giai {
  width:70px;min-width:70px;font-size:10px
}
.num.special {
  font-size:17px
}
.mb-num.sp {
  font-size:22px
}
.mb-num.g1 {
  font-size:17px
}
table.mb-table td {
  padding:6px 10px
}
.kqxs-mb-province {
  font-size:17px
}
.result-tabs {
  gap:6px
}
.rtab {
  padding:7px 14px;font-size:12px
}
.logan-grid {
  grid-template-columns:repeat(5,1fr);gap:4px
}
.freq-bar-wrap {
  width:50px
}
.stat-tabs {
  gap:6px
}
.stab {
  font-size:11px;padding:4px 10px
}
.dd-num {
  width:40px;height:40px;font-size:16px
}
.ball {
  width:36px;height:36px;font-size:15px
}
.ball.gold {
  width:42px;height:42px;font-size:17px
}
.jackpot-amount {
  font-size:30px
}
.power-balls {
  gap:6px
}
.lookup-input {
  font-size:18px;letter-spacing:3px
}
.news-img {
  width:38px;height:38px;font-size:18px
}
.section-title {
  font-size:16px
}
.footer-grid {
  grid-template-columns:1fr
}
.footer-bottom {
  flex-direction:column;gap:8px;text-align:center
}
footer {
  padding:20px 14px 14px
}
.data-table {
  font-size:12px
}
.data-table th,.data-table td {
  padding:7px 8px
}
.breadcrumb {
  font-size:12px;padding:6px 10px
}

}
@media (max-width:480px) {
  html {
  font-size:14px
}
.logo-text {
  font-size:20px
}
.btn-xemtruc {
  padding:6px 10px;font-size:12px
}
.logo-icon {
  width:30px;height:30px;font-size:14px
}
.container {
  padding:10px
}
.kqxs-giai {
  width:62px;min-width:62px
}
.logan-grid {
  grid-template-columns:repeat(4,1fr)
}
.freq-bar-wrap {
  width:36px
}
.jackpot-amount {
  font-size:26px
}
.ball {
  width:32px;height:32px;font-size:13px
}
.ball.gold {
  width:36px;height:36px;font-size:14px
}
.dd-num {
  width:36px;height:36px;font-size:14px
}
.mb-num.sp {
  font-size:20px
}
.countdown-row {
  grid-template-columns:1fr
}
.cc-time {
  font-size:22px
}

}
@keyframes shimmer {
  0% {
  background-position: -400px 0;
}
100% {
  background-position: 400px 0;
}

}
.skeleton-num {
  display:inline-block;
 border-radius:4px;
 background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
 background-size: 400px 100%;
 animation: shimmer 1.4s infinite;
 vertical-align:middle;
}
.skeleton-num {
  width:40px; height:18px;
}
.skeleton-num.sp {
  width:80px; height:28px;
}
.skeleton-num.g1 {
  width:60px; height:22px;
}
@keyframes spin {
  to {
  transform: rotate(360deg);
}

}
.loading-spinner {
  width:40px; height:40px;
 border:3px solid var(--border);
 border-top-color:var(--red);
 border-radius:50%;
 animation:spin .8s linear infinite;
 margin:0 auto;
}
.loading-placeholder {
  text-align:center;
 padding:40px;
 background:var(--bg2);
 border-radius:var(--r12);
 border:1px solid var(--border);
}
.live-card {
  border-color:rgba(192,57,43,.4) !important;
 box-shadow:0 0 0 1px rgba(192,57,43,.2);
 animation:live-border 2s infinite;
}
@keyframes live-border {
  0%,100% {
  box-shadow:0 0 0 1px rgba(192,57,43,.2);
}
50% {
  box-shadow:0 0 0 3px rgba(192,57,43,.15);
}

}
.badge-live {
  animation:pulse-red 1.5s infinite;
}
.rtab.live-tab {
  position:relative;
}
.rtab.live-tab::after {
  content:'';
 position:absolute;
 top:6px; right:6px;
 width:6px; height:6px;
 border-radius:50%;
 background:var(--red);
 animation:pulse 1s infinite;
}
@keyframes live-shimmer {
  0% {
  background-position: -300px 0;
}
100% {
  background-position: 300px 0;
}

}
.live-shimmer {
  display: inline-block;
 border-radius: 4px;
 background: linear-gradient(
 90deg,
 var(--bg3) 0%,
 var(--bg4) 40%,
 #333 50%,
 var(--bg4) 60%,
 var(--bg3) 100%
 );
 background-size: 300px 100%;
 animation: live-shimmer 1.2s infinite ease-in-out;
 vertical-align: middle;
}
.live-card {
  border-color: rgba(192,57,43,.5) !important;
}
@keyframes live-border-pulse {
  0%,100% {
  box-shadow: 0 0 0 1px rgba(192,57,43,.15);
}
50% {
  box-shadow: 0 0 0 3px rgba(192,57,43,.25);
}

}
.live-card {
  animation: live-border-pulse 2.5s infinite;
}
.live-footer {
  padding: 8px 16px;
 background: rgba(192,57,43,.06);
 border-top: 1px solid rgba(192,57,43,.2);
 font-size: 12px;
 color: var(--muted);
 display: flex;
 align-items: center;
 gap: 8px;
}
.badge-live {
  animation: pulse-red 1.5s infinite;
}
.rtab .live-dot {
  display: inline-block;
 width: 6px; height: 6px;
 border-radius: 50%;
 background: var(--red);
 margin-left: 4px;
 vertical-align: middle;
 animation: pulse 1s infinite;
}
@keyframes pulse {
  0%,100% {
  opacity:1
}
50% {
  opacity:.4
}

}
.vl-ball {
  width: 48px; height: 48px;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-head);
 font-size: 18px;
 font-weight: 800;
 color: #fff;
 flex-shrink: 0;
 position: relative;
 
 border: 2.5px solid rgba(255,255,255,.25);
 box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.vl-ball.power {
  background: radial-gradient(circle at 38% 35%, #f15a4a, #c0392b 60%, #8e1e14);
}
.vl-ball.mega {
  background: radial-gradient(circle at 38% 35%, #5dade2, #2980b9 60%, #1a5276);
}
.vl-ball.power-num {
  background: radial-gradient(circle at 38% 35%, #a569bd, #7d3c98 60%, #4a235a);
 width: 52px; height: 52px; font-size: 19px;
 border-color: var(--gold);
 box-shadow: 0 3px 12px rgba(125,60,152,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.vl-ball.max3d {
  background: radial-gradient(circle at 38% 35%, #58d68d, #27ae60 60%, #1a7a40);
 width: 54px; height: 54px; font-size: 17px;
}
.vl-ball.keno {
  background: radial-gradient(circle at 38% 35%, #f8c56d, #f39c12 60%, #b7770d);
 width: 36px; height: 36px; font-size: 14px;
 color: #3d2400;
}
.vl-ball-row {
  display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 justify-content: center;
 padding: 16px 0;
}
.vl-ball-sep {
  color: var(--muted);
 font-size: 20px;
 font-weight: 700;
 margin: 0 2px;
}
@media (max-width:768px) {
  .vl-ball {
  width:40px;height:40px;font-size:16px
}
.vl-ball.power-num {
  width:44px;height:44px;font-size:17px
}
.vl-ball.max3d {
  width:46px;height:46px;font-size:15px
}
.vl-ball-row {
  gap:6px
}

}
@media (max-width:480px) {
  .vl-ball {
  width:34px;height:34px;font-size:14px
}
.vl-ball.power-num {
  width:38px;height:38px;font-size:15px
}
.vl-ball.keno {
  width:28px;height:28px;font-size:12px
}
.vl-ball-row {
  gap:5px
}

}
.vl-ball-row.nowrap {
  flex-wrap:nowrap; overflow-x:auto;
}
@media (max-width:480px) {
  .vl-ball.power,.vl-ball.mega {
  width:30px;height:30px;font-size:12px;
}
.vl-ball.power-num {
  width:34px;height:34px;font-size:13px;
}

}
.search-countdown-bar {
  display: flex;
 align-items: stretch;
 gap: 16px;
 margin-bottom: 20px;
 background: var(--bg3);
 border: 1px solid var(--border);
 border-radius: 12px;
 overflow: hidden;
 box-shadow: var(--shadow-card);
}
.search-box-wrap {
  flex: 1;
 padding: 16px 20px;
 border-right: 1px solid var(--border);
}
.search-box-label {
  font-family: var(--font-head);
 font-size: 13px;
 font-weight: 700;
 color: var(--muted);
 letter-spacing: 1px;
 text-transform: uppercase;
 margin-bottom: 10px;
}
.search-box-inner {
  display: flex;
 gap: 8px;
 align-items: center;
}
.search-select {
  flex: 1;
 min-width: 0;
 padding: 9px 12px;
 background: var(--bg4);
 border: 1px solid var(--border2);
 border-radius: 8px;
 color: var(--text);
 font-size: 14px;
 font-family: var(--font-body);
 outline: none;
 cursor: pointer;
 transition: border-color .2s;
}
.search-select:focus {
  border-color: var(--gold);
}
.search-date-input {
  width: 140px;
 flex-shrink: 0;
 padding: 9px 10px;
 background: var(--bg4);
 border: 1px solid var(--border2);
 border-radius: 8px;
 color: var(--text);
 font-size: 14px;
 font-family: var(--font-body);
 outline: none;
 transition: border-color .2s;
}
.search-date-input:focus {
  border-color: var(--gold);
}
.search-go-btn {
  padding: 9px 20px;
 background: var(--red);
 color: #fff;
 border: none;
 border-radius: 8px;
 font-family: var(--font-head);
 font-size: 15px;
 font-weight: 700;
 letter-spacing: .5px;
 cursor: pointer;
 white-space: nowrap;
 transition: background .2s;
 flex-shrink: 0;
}
.search-go-btn:hover {
  background: var(--red-dark);
}
.search-quick-links {
  display: flex;
 gap: 8px;
 margin-top: 10px;
 flex-wrap: wrap;
}
.search-quick-links a {
  font-size: 12px;
 font-family: var(--font-head);
 font-weight: 700;
 letter-spacing: .5px;
 color: var(--muted);
 background: var(--bg4);
 border: 1px solid var(--border);
 border-radius: 20px;
 padding: 3px 12px;
 transition: all .2s;
}
.search-quick-links a:hover {
  color: var(--gold);
 border-color: var(--gold);
}
.countdown-compact {
  display: flex;
 align-items: stretch;
 flex-shrink: 0;
}
.cd-item {
  display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 12px 18px;
 border-left: 1px solid var(--border);
 gap: 4px;
 
 width: 110px;
 min-width: 110px;
 max-width: 110px;
 position: relative;
 transition: background .2s;
}
.cd-item:hover {
  background: rgba(255,255,255,.03);
}
.cd-item.cd-live {
  background: rgba(217,48,37,.06);
}
.cd-label {
  display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1px;
}
.cd-region {
  font-family: var(--font-head);
 font-size: 14px;
 font-weight: 800;
 color: var(--text2);
 letter-spacing: 1px;
}
.cd-name {
  font-size: 10px;
 color: var(--muted);
 letter-spacing: .5px;
 white-space: nowrap;
}
.cd-time {
  font-family: var(--font-head);
 font-size: 22px;
 font-weight: 800;
 color: var(--gold);
 line-height: 1;
 letter-spacing: 1px;
 
 font-variant-numeric: tabular-nums;
 font-feature-settings: "tnum";
 
 width: 100%;
 text-align: center;
 display: block;
}
.cd-live-dot {
  width: 7px; height: 7px;
 border-radius: 50%;
 background: var(--red-light);
 animation: pulse 1s infinite;
 margin-top: 2px;
}
@media (max-width:1024px) {
  .search-countdown-bar {
  flex-direction: column;
}
.search-box-wrap {
  border-right: none; border-bottom: 1px solid var(--border);
}
.countdown-compact {
  justify-content: space-around;
}
.cd-item {
  border-left: none; border-top: 1px solid var(--border); flex: 1;
}
.cd-item:first-child {
  border-top: none;
}

}
@media (max-width:768px) {
  .search-box-inner {
  flex-direction: column;
}
.search-date-input {
  width: 100%;
}
.search-go-btn {
  width: 100%;
}
.cd-item {
  padding: 10px 12px; min-width: 80px;
}
.cd-time {
  font-size: 18px;
}

}
.chat-section {
  margin-bottom: 20px;
}
#chat-widget {
  background: var(--bg3);
 border: 1px solid var(--border);
 border-radius: 12px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 height: 420px;
 box-shadow: var(--shadow-card);
}
.chat-header {
  background: linear-gradient(135deg,#1a6b2a,#27ae60);
 padding: 10px 16px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-shrink: 0;
}
.chat-header-left {
  display: flex;
 align-items: center;
 gap: 10px;
}
.chat-header-right {
  display: flex;
 align-items: center;
 gap: 8px;
}
.chat-header-title {
  font-family: var(--font-head);
 font-weight: 800;
 font-size: 16px;
 color: #fff;
 letter-spacing: .5px;
}
.chat-online-badge {
  background: rgba(255,255,255,.2);
 color: #fff;
 font-size: 11px;
 font-weight: 700;
 padding: 2px 10px;
 border-radius: 20px;
 font-family: var(--font-head);
}
.chat-logout-btn {
  background: rgba(255,255,255,.15);
 color: #fff;
 border: 1px solid rgba(255,255,255,.3);
 padding: 3px 10px;
 border-radius: 6px;
 font-size: 12px;
 cursor: pointer;
 transition: background .2s;
}
.chat-logout-btn:hover {
  background: rgba(255,255,255,.25);
}
.chat-users-bar {
  background: rgba(0,0,0,.2);
 padding: 4px 14px;
 display: flex;
 align-items: center;
 gap: 6px;
 flex-shrink: 0;
 min-height: 26px;
 overflow: hidden;
}
#chat-users-list {
  display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: nowrap;
 overflow: hidden;
}
.chat-user-dot {
  font-size: 8px;
}
.chat-user-name {
  font-size: 11px;
 font-weight: 700;
 white-space: nowrap;
}
#chat-messages {
  flex: 1;
 overflow-y: auto;
 padding: 10px 14px;
 display: flex;
 flex-direction: column;
 gap: 5px;
 scrollbar-width: thin;
 scrollbar-color: var(--border) transparent;
 background: var(--bg2);
}
#chat-messages::-webkit-scrollbar {
  width: 4px;
}
#chat-messages::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 4px;
}
.chat-msg {
  font-size: 13px;
 line-height: 1.5;
 color: var(--text2);
 word-break: break-word;
 animation: chatFadeIn .15s ease;
}
.chat-msg-me .chat-nick {
  font-weight: 800;
}
.chat-sys {
  font-size: 11px;
 color: var(--muted);
 text-align: center;
 padding: 2px 0;
 font-style: italic;
}
@keyframes chatFadeIn {
  from {
  opacity:0; transform:translateY(3px);
}
to {
  opacity:1; transform:translateY(0);
}

}
.chat-time {
  color:var(--muted); font-size:11px; font-family:monospace;
}
.chat-nick {
  font-weight:700; font-size:13px;
}
.chat-colon {
  color:var(--muted);
}
.chat-text {
  color:var(--text);
}
.chat-load-more {
  text-align: center;
 font-size: 12px;
 color: var(--gold);
 cursor: pointer;
 padding: 5px;
 border-radius: 6px;
 background: rgba(243,156,18,.08);
 border: 1px solid rgba(243,156,18,.15);
 flex-shrink: 0;
 margin-bottom: 2px;
 transition: background .2s;
}
.chat-load-more:hover {
  background: rgba(243,156,18,.15);
}
.chat-input-area {
  padding: 8px 12px;
 border-top: 1px solid var(--border);
 background: var(--bg3);
 flex-shrink: 0;
}
.chat-send-row {
  display: flex;
 gap: 6px;
 align-items: flex-end;
}
#chat-content-input {
  flex: 1;
 padding: 8px 10px;
 background: var(--bg4);
 border: 1px solid var(--border2);
 border-radius: 8px;
 color: var(--text);
 font-size: 13px;
 outline: none;
 resize: none;
 transition: border-color .2s;
 font-family: var(--font-body);
 min-height: 38px;
 max-height: 80px;
}
#chat-content-input:focus {
  border-color: #27ae60;
}
#chat-content-input::placeholder {
  color: var(--muted);
}
#chat-send-btn {
  padding: 8px 18px;
 background: #27ae60;
 color: #fff;
 border: none;
 border-radius: 8px;
 font-family: var(--font-head);
 font-size: 14px;
 font-weight: 700;
 cursor: pointer;
 transition: background .2s;
 flex-shrink: 0;
 height: 38px;
}
#chat-send-btn:hover {
  background: #219150;
}
#chat-send-btn:disabled {
  background: var(--muted); cursor:not-allowed;
}
#chat-error {
  font-size:11px;color:var(--red-light);margin-top:3px;min-height:14px;
}
@media (max-width:768px) {
  #chat-widget {
  height:340px;
}
#chat-content-input {
  font-size:12px;
}

}
#chat-guest-overlay {
  position: sticky;
 bottom: 0;
 pointer-events: none;
}
#chat-guest-overlay > div {
  pointer-events: auto;
}
.chat-auth-tab {
  flex:1;padding:8px 0;background:var(--bg3);border:none;
 color:var(--muted);font-family:var(--font-head);font-size:14px;font-weight:700;
 cursor:pointer;transition:all .2s;letter-spacing:.5px;
}
.chat-auth-tab.active {
  background:#27ae60;color:#fff;
}
.chat-auth-input {
  padding:7px 10px;background:var(--bg4);border:1px solid var(--border2);
 border-radius:6px;color:var(--text);font-size:13px;outline:none;
 transition:border-color .2s;font-family:var(--font-body);width:100%;
}
.chat-auth-input:focus {
  border-color:#27ae60;
}
.chat-auth-submit {
  width:100%;padding:8px;background:#27ae60;border:none;border-radius:6px;
 color:#fff;font-family:var(--font-head);font-size:14px;font-weight:700;
 cursor:pointer;transition:background .2s;letter-spacing:.5px;
}
.chat-auth-submit:hover {
  filter:brightness(1.1);
}
.chat-user-chip {
  font-size:11px;font-weight:700;white-space:nowrap;
 padding:1px 6px;border-radius:10px;background:rgba(255,255,255,.06);
}
.sr-only {
  position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0,0,0,0);
 white-space: nowrap;
 border: 0;
}