@charset "UTF-8";
/* ═══════════════════════════════════════════════
XOSO THEME v2.0 — Modern Vietnamese Lottery UI
═══════════════════════════════════════════════ */
/* ── Reset & Base ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:#f0f2f5;color:#333;font-size:14px;line-height:1.5}
a{color:#c62828;text-decoration:none}
a:hover{color:#e53935}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
/* ── Layout wrapper ───────────────────────────── */
.main,.wrap{max-width:1200px;margin:0 auto;padding:0 12px}
/* ── HEADER ───────────────────────────────────── */
header{background:linear-gradient(135deg,#c62828 0%,#b71c1c 100%);box-shadow:0 2px 8px rgba(0,0,0,.25);position:sticky;top:0;z-index:100}
.top-info{display:flex;align-items:center;padding:6px 0;gap:16px}
.taskbar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.logo a{display:flex;align-items:center;gap:8px}
.logo img{height:52px;width:auto;border-radius:0}
.txtlogo{color:#fff;font-size:15px;font-weight:700;line-height:1.2}
.navbar-toggle{background:none;border:2px solid rgba(255,255,255,.6);border-radius:4px;padding:5px 8px;cursor:pointer;display:none}
.navbar-toggle .icon-bar{display:block;width:20px;height:2px;background:#fff;margin:4px 0}
/* ── NAV ──────────────────────────────────────── */
nav#nav{flex:1;min-width:0;background:transparent;border-top:0;overflow:visible}
/* Mobile strip — hide on desktop */
nav#nav .nav-mobi{display:none}
/* Desktop nav */
nav#nav .nav-pc{max-width:none;margin:0;padding:0}
#nav-horizontal-list{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;list-style:none;margin:0;padding:0}
#nav-horizontal-list>li{position:relative;flex:0 0 auto;white-space:nowrap}
#nav-horizontal-list>li>a,
#nav-horizontal-list>li>span.arr-d{display:inline-block;padding:9px 8px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.15px;text-transform:uppercase;transition:background .15s,color .15s;cursor:pointer;vertical-align:middle}
#nav-horizontal-list>li>img{display:none}
#nav-horizontal-list>li:hover>a,
#nav-horizontal-list>li.current-menu-item>a{background:#f39c12;color:#fff}
#nav-horizontal-list>li.current-menu-item>a{border-bottom:3px solid #fff}
/* Arrow icon */
#nav-horizontal-list>li>span.arr-d{padding:9px 5px 9px 0;font-size:11px;opacity:.7}
#nav-horizontal-list>li>span.arr-d::after{content:"\25BE"}
/* Dropdown */
#nav-horizontal-list ul.menu-c2{
display:none;position:absolute;top:100%;left:0;
background:#b71c1c;min-width:160px;z-index:300;
box-shadow:0 4px 12px rgba(0,0,0,.3);border-radius:0 0 6px 6px;
list-style:none;margin:0;padding:0
}
#nav-horizontal-list>li:hover ul.menu-c2,
#nav-horizontal-list>li:focus-within ul.menu-c2{display:block}
#nav-horizontal-list ul.menu-c2 li a{
display:block;padding:9px 14px;color:#fff;font-size:12.5px;
font-weight:600;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.1)
}
#nav-horizontal-list ul.menu-c2 li:last-child a{border-bottom:none}
#nav-horizontal-list ul.menu-c2 li a:hover{background:#c62828;color:#f39c12}
/* Dsp-mobile icon in nav — always hidden */
.dsp-mobile{display:none!important}
/* ── MAIN GRID ────────────────────────────────── */
.content.main{display:grid;grid-template-columns:1fr 260px 195px;gap:10px;max-width:1200px;margin:10px auto;padding:0 12px;align-items:start}
.col-l{min-width:0}
.col-center,.col-right{min-width:0}
/* ── BOX / CARD ───────────────────────────────── */
.box{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.08);margin-bottom:10px;overflow:hidden;border:1px solid #f0f0f0}
.box:last-child{margin-bottom:0}
/* Section titles */
h2.regional-title,.tit-mien,.box>.regional-title{
background:linear-gradient(135deg,#c62828,#b71c1c);
color:#fff;padding:8px 14px;font-size:13.5px;font-weight:700;
letter-spacing:.3px;border-radius:8px 8px 0 0;margin:0;
display:flex;align-items:center;gap:6px
}
.tit-mien a,.regional-title a,.regional-title a.title-a{color:#fff}
.tit-mien strong,.regional-title strong{font-size:14px}
/* Alert bar */
.alert{background:#fff8e1;padding:7px 14px;font-size:13px;border-left:4px solid #f39c12;display:flex;align-items:center;gap:8px}
.alert a{color:#c62828;font-weight:700}
.alert img{display:none}
/* ── PROVINCE TABLE (Các tỉnh mở thưởng) ─────── */
table.table-fixed{width:100%;border-collapse:collapse}
table.table-fixed td{padding:8px 12px;font-size:13px;border-bottom:1px solid #f0f0f0}
table.table-fixed tr:last-child td{border-bottom:none}
table.table-fixed tr:nth-child(even){background:#fafbfc}
table.table-fixed td:empty{padding:0;border:none}
table.table-fixed a{color:#1565c0;font-weight:600}
table.table-fixed a:hover{color:#c62828;text-decoration:underline}
/* ── VIETLOTT (Mega/Power) — real results via minhngoc adapter ─ */
.vietlott-box{padding:14px}
.vietlott-balls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:8px 0}
.vietlott-ball{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:50%;
background:linear-gradient(135deg,#c62828,#b71c1c);
color:#fff;font-weight:700;font-size:16px;
box-shadow:0 2px 4px rgba(0,0,0,.2)
}
.vietlott-ball-bonus{background:linear-gradient(135deg,#f59e0b,#d97706)}
.vietlott-period{text-align:center;font-size:13px;color:#666;margin:4px 0 10px}
table.vietlott-prize-table{width:100%;border-collapse:collapse;font-size:13px}
table.vietlott-prize-table th{background:#f5f5f5;padding:6px 10px;text-align:left;font-weight:700}
table.vietlott-prize-table td{padding:6px 10px;border-bottom:1px solid #f0f0f0}
.vietlott-source-note{font-size:11.5px;color:#999;text-align:right;padding:4px 14px 0;margin:0}
.vietlott-see-more{padding:8px 14px;margin:0}
.vietlott-see-more a{color:#1565c0;font-weight:600}
.vietlott-see-more a:hover{color:#c62828}
/* ── PENDING / LIVE DRAW STATE ──────────────────
The source marks any result cell that hasn't been drawn yet with
class "imgloadig" and empty content. js/xs.js rolls a random digit
string into these (like a slot reel) instead of leaving them blank,
and flags the box's title with a pulsing "Đang quay" badge. ── */
@keyframes xoso-pulse{0%,100%{opacity:1} 50%{opacity:.4}}
.imgloadig{
display:inline-block;min-width:1.8em;
background:#fdecea;color:#c62828!important;font-weight:700;
border-radius:4px;padding:1px 6px;
animation:xoso-pulse .5s steps(2) infinite
}
.xoso-live-badge{
display:inline-flex;align-items:center;gap:5px;
background:#fff;color:#c62828;font-size:11px;font-weight:800;
padding:2px 9px;border-radius:20px;margin-left:8px;letter-spacing:.3px;
vertical-align:middle
}
.xoso-live-badge::before{
content:"";width:7px;height:7px;border-radius:50%;background:#c62828;
display:inline-block;animation:xoso-pulse 1s ease-in-out infinite
}
/* ── LOTTERY RESULT TABLE (XSMB / XSMN / XSMT) ─ */
.box-kq{padding:0}
.one-city{padding:0 8px 10px}
.one-city .madb{margin:0 -2px 4px}
table.kqmb,table.kqmn,table.kqmt,table.kqmn2{
width:100%;border-collapse:collapse;margin-top:4px
}
table.kqmb tr,table.kqmn tr,table.kqmt tr,table.kqmn2 tr{
border-bottom:1px solid #f5f5f5;transition:background .1s
}
table.kqmb tr:last-child,table.kqmn tr:last-child,
table.kqmt tr:last-child,table.kqmn2 tr:last-child{border-bottom:none}
table.kqmb tr.bg_ef,table.kqmn tr.bg_ef,
table.kqmt tr.bg_ef,table.kqmn2 tr.bg_ef{background:#fafafa}
/* Prize name cell */
td.txt-giai{
width:64px;padding:5px 6px;font-size:12px;font-weight:700;
color:#999;background:#f8f9fa;border-right:2px solid #ebebeb;
white-space:nowrap;text-align:center;vertical-align:middle
}
tr.db td.txt-giai{color:#c62828;font-size:13px;font-weight:800;background:#fff5f5}
tr.g1 td.txt-giai{color:#555;font-weight:800}
/* Prize numbers cell */
td.v-giai.number{padding:5px 8px;vertical-align:middle}
/* Outer number spans (v-g1, v-g2-0, v-gdb, etc.) — spaced apart */
td.v-giai.number>span{
display:inline-block;margin:1px 5px;font-size:16px;
font-weight:700;color:#222;letter-spacing:1px;line-height:1.2
}
/* Inner DIGIT spans (pos0..posN) — no extra spacing, inherit from parent */
td.v-giai.number span[class^="pos"]{
display:inline!important;margin:0!important;padding:0!important;
font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:0
}
/* Loto-pair wrapper (lotpos84, lotpos06, …) — amber highlight */
td.v-giai.number span[class^="lotpos"]{
display:inline;background:#fff3e0;color:#e65100;border-radius:3px;
padding:1px 2px;font-weight:800
}
td.v-giai.number span[class^="lotpos"] span[class^="pos"]{color:inherit}
/* ĐẶC BIỆT — big red */
tr.db{background:#fff5f5}
tr.db td.v-giai.number span,
td.v-giai.number span.v-gdb{
font-size:34px;color:#c62828;font-weight:900;
letter-spacing:3px;text-shadow:0 2px 4px rgba(198,40,40,.2)
}
/* Giải 1 — dark red */
tr.g1 td.v-giai.number span{font-size:22px;color:#b71c1c;font-weight:800}
/* Giải 7 — blue */
tr.g7 td.v-giai.number span{font-size:21px;color:#1565c0;font-weight:800;letter-spacing:3px}
/* Giải 2 — slightly larger */
tr.g2 td.v-giai.number span{font-size:19px;color:#333;font-weight:700}
/* Alternating rows for kqmb */
table.kqmb tr:nth-child(odd){background:#fff}
table.kqmb tr:nth-child(even){background:#fafafa}
table.kqmb tr:hover{background:#fff3e0}
/* AP line */
.madb,.v-giai.madb{background:#fff8e1;text-align:center;padding:6px;font-size:12px;color:#f57c00;font-weight:700;letter-spacing:.3px}
.v-madb{font-style:italic}
/* ── VIETLOTT TABLES ──────────────────────────── */
/* ── Per-draw card (mega645 / power655 div) ── */
.mega645,.power655{margin-bottom:0;padding:0}
/* Reset nested .box cards inside main box */
.box .mega645,.box .power655{
background:#fff;border-radius:8px;
border:1px solid #f0f0f0;margin:0 12px 10px;
box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden
}
/* Draw result list (ul.results) */
ul.results{list-style:none;margin:0;padding:0}
ul.results>li{
border-bottom:1px solid #f5f5f5;
padding:0;
}
ul.results>li:last-child{border-bottom:none}
/* ── LOTTERY BALL NUMBERS (table.data) ───────── */
table.data{width:100%;border-collapse:separate;border-spacing:0;margin:0}
/* The row with the 6/7 winning numbers */
table.data tr:first-child{background:#fff5f5}
table.data tr:first-child td{
width:52px;height:52px;
border-radius:50%;
font-size:20px;font-weight:900;
color:#fff;text-align:center;vertical-align:middle;
background:linear-gradient(135deg,#e53935,#b71c1c);
border:none;letter-spacing:0;padding:0;
box-shadow:0 3px 8px rgba(198,40,40,.35)
}
/* De-italicize the wrappers source uses */
table.data tr:first-child td i{font-style:normal}
/* Container row for balls: centered, padded */
.mega645 table.data>tbody>tr:first-child,
.power655 table.data>tbody>tr:first-child,
.clearfix>table.data>tbody>tr:first-child,
ul.results table.data>tbody>tr:first-child{
display:flex;gap:10px;justify-content:center;
padding:16px 14px 10px;background:transparent
}
.mega645 table.data>tbody>tr:first-child td,
.power655 table.data>tbody>tr:first-child td,
.clearfix>table.data>tbody>tr:first-child td,
ul.results table.data>tbody>tr:first-child td{
display:flex;align-items:center;justify-content:center;
min-width:46px;width:46px;height:46px;flex-shrink:0
}
/* Jackpot/prize value row */
table.data tr:not(:first-child) td{
font-size:13px;color:#555;padding:6px 14px;
text-align:center;font-style:normal;
background:#fff8e1;font-weight:600
}
table.data tr:not(:first-child) td strong{color:#c62828;font-weight:900}
/* ── PRIZE BREAKDOWN (table.data2) ──────────── */
table.data2{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
table.data2 tr:first-child td{
background:#f5f5f5;font-weight:700;text-align:center;
border:1px solid #e8e8e8;padding:7px 8px;color:#555
}
table.data2 td{
padding:7px 10px;border:1px solid #eee;vertical-align:middle
}
table.data2 td:first-child{font-weight:700}
table.data2 td.clnote{color:#c62828;font-weight:800}
table.data2 tr:nth-child(even){background:#fafafa}
table.data2 tr:hover td{background:#fff8e1;color:inherit}
/* ── VIETLOTT STATS SECTIONS ─────────────────── */
/* Stat divs without .box get card styling */
.tr-hover.clearfix:not(.box){
background:#fff;border-radius:8px;
box-shadow:0 1px 4px rgba(0,0,0,.08);
margin-bottom:10px;overflow:hidden;
border:1px solid #f0f0f0
}
/* h3 headings inside stat divs */
h3.regional-title{
background:linear-gradient(135deg,#c62828,#b71c1c);
color:#fff;padding:8px 14px;font-size:13px;font-weight:700;
letter-spacing:.3px;margin:0;display:block;
border-radius:8px 8px 0 0
}
h3.regional-title.bold{font-weight:700}
/* table.box = stats data table (naming conflict with .box card) */
table.box{
border-collapse:collapse!important;border-radius:0!important;
box-shadow:none!important;overflow:visible!important;
width:100%;margin-bottom:0!important;background:transparent!important
}
table.box th{
background:#f8f9fa;padding:7px 8px;font-weight:700;
color:#555;border:1px solid #e8e8e8;text-align:center;font-size:12.5px
}
table.box td{
padding:6px 8px;border:1px solid #efefef;
text-align:center;vertical-align:middle;font-size:13px
}
table.box tr:nth-child(even) td{background:#fafafa}
table.box tr:hover td{background:#fff8e1;color:inherit}
/* Inner wrapper div for a stat section */
.tr-hover.clearfix>div{padding:4px 0}
/* Recent draws summary (nameless table in .box.tr-hover) */
.box.tr-hover>div>table{
width:100%;border-collapse:collapse;font-size:13px
}
.box.tr-hover>div>table th{
background:#f5f5f5;padding:8px 10px;font-weight:700;
color:#555;border:1px solid #e8e8e8;text-align:center
}
.box.tr-hover>div>table td{
padding:8px 10px;border:1px solid #efefef;vertical-align:middle
}
.box.tr-hover>div>table td.s18{font-size:15px;font-weight:800}
.box.tr-hover>div>table tr:nth-child(even) td{background:#fafafa}
.box.tr-hover>div>table tr:hover td{background:#fff8e1;color:inherit}
/* Vietlott box inner padding */
.clearfix>table.data,.clearfix>table.data2{margin-left:12px;margin-right:12px;width:calc(100% - 24px)}
.clearfix>p,.clearfix>ul{padding:6px 14px;font-size:13px;color:#555}
/* Vietlott tab panel (mega/power/max3d selector) */
ul.tab-panel.tab-3 li a,ul.tab-panel.tab-4 li a{padding:5px 12px}
/* Jackpot highlighted value in summary table */
.box.tr-hover td.s18.clred.bold,.tr-hover td.s18.clred.bold{
font-size:15px;color:#c62828;font-weight:900;letter-spacing:.5px
}
/* ── "XEM THÊM" LINKS LIST — hidden to keep page compact ── */
ul.list-html-link{display:none!important}
/* ── RADIO BUTTONS + DIGIT SELECTOR ──────────── */
.control-panel{display:none!important}
/* ── SEO ARTICLE BOX — hidden (wall-of-text, hurts UX) ── */
.box.box-html{display:none!important}
/* ── ĐẦU / ĐUÔI TABLE — hidden (stat widget needs source JS) ── */
.col-firstlast{display:none!important}
.clnote{color:#c62828;font-weight:700}
/* ── MULTI-CITY TABLES (XSMT 2/3 tỉnh / XSMN 3-4 tỉnh) ── */
table.coltwocity,table.colthreecity,table.colfourcity{
width:100%;border-collapse:collapse;margin-top:0
}
/* Province header row — uses | , not | */
table.coltwocity tr.gr-yellow th,
table.colthreecity tr.gr-yellow th,
table.colfourcity tr.gr-yellow th{
background:linear-gradient(135deg,#c62828,#b71c1c);
color:#fff;font-weight:700;text-align:center;
padding:9px 8px;font-size:13px;
border:1px solid rgba(255,255,255,.15)
}
table.coltwocity tr.gr-yellow th.first,
table.colthreecity tr.gr-yellow th.first,
table.colfourcity tr.gr-yellow th.first{
background:#9b1919;width:34px;min-width:34px
}
/* Province name links in header */
table.coltwocity tr.gr-yellow th a,
table.colthreecity tr.gr-yellow th a,
table.colfourcity tr.gr-yellow th a{
color:#fff;font-weight:700;text-decoration:none;display:inline-block
}
table.coltwocity tr.gr-yellow th a:hover,
table.colthreecity tr.gr-yellow th a:hover,
table.colfourcity tr.gr-yellow th a:hover{color:#ffe082;text-decoration:underline}
/* All data cells */
table.coltwocity td,table.colthreecity td,table.colfourcity td{
border:1px solid #eee;padding:4px 6px;
text-align:center;vertical-align:middle;
font-size:14px;font-weight:700;color:#222;line-height:1.8
}
/* Numbers as block divs inside td */
table.coltwocity td div,table.colthreecity td div,table.colfourcity td div{
display:block;font-size:14px;font-weight:700;
color:#222;line-height:1.75;letter-spacing:.5px
}
/* Prize label column */
table.coltwocity td:first-child,
table.colthreecity td:first-child,
table.colfourcity td:first-child{
width:34px;min-width:34px;background:#f8f9fa;color:#888;
font-size:11px;font-weight:700;border-right:2px solid #e0e0e0;
white-space:nowrap;padding:5px 3px;vertical-align:middle
}
/* ĐB row — big red (XSMT uses .gdb) */
table.coltwocity tr.gdb,
table.colthreecity tr.gdb,
table.colfourcity tr.gdb{background:#fff5f5}
table.coltwocity tr.gdb td:first-child,
table.colthreecity tr.gdb td:first-child,
table.colfourcity tr.gdb td:first-child{color:#c62828;background:#fff5f5}
table.coltwocity tr.gdb td:not(:first-child) div,
table.colthreecity tr.gdb td:not(:first-child) div,
table.colfourcity tr.gdb td:not(:first-child) div{
font-size:26px;color:#c62828;font-weight:900;
letter-spacing:2px;text-shadow:0 1px 3px rgba(198,40,40,.2);
padding:3px 0
}
/* Also handle when gdb number is directly in td (not div) */
table.coltwocity tr.gdb td:not(:first-child),
table.colthreecity tr.gdb td:not(:first-child),
table.colfourcity tr.gdb td:not(:first-child){
font-size:26px;color:#c62828;font-weight:900;padding:6px 4px
}
/* G1 row */
table.coltwocity tr.g1 td:not(:first-child),
table.colthreecity tr.g1 td:not(:first-child),
table.colfourcity tr.g1 td:not(:first-child),
table.coltwocity tr.g1 td:not(:first-child) div,
table.colthreecity tr.g1 td:not(:first-child) div,
table.colfourcity tr.g1 td:not(:first-child) div{font-size:16px;color:#b71c1c;font-weight:800}
/* G8 — smallest */
table.coltwocity tr.g8 td:not(:first-child),
table.colthreecity tr.g8 td:not(:first-child),
table.colfourcity tr.g8 td:not(:first-child),
table.coltwocity tr.g8 td:not(:first-child) div,
table.colthreecity tr.g8 td:not(:first-child) div,
table.colfourcity tr.g8 td:not(:first-child) div{font-size:13px;color:#555;font-weight:600}
/* Alternating rows */
table.coltwocity tr:nth-child(odd):not(.gr-yellow),
table.colthreecity tr:nth-child(odd):not(.gr-yellow),
table.colfourcity tr:nth-child(odd):not(.gr-yellow){background:#fff}
table.coltwocity tr:nth-child(even):not(.gr-yellow),
table.colthreecity tr:nth-child(even):not(.gr-yellow),
table.colfourcity tr:nth-child(even):not(.gr-yellow){background:#fafafa}
table.coltwocity tr:not(.gr-yellow):hover,
table.colthreecity tr:not(.gr-yellow):hover,
table.colfourcity tr:not(.gr-yellow):hover{background:#fff3e0}
/* Province city name header (one-city label tabs) */
.one-city .city-name,.one-city .tabkq{
display:inline-block;padding:4px 12px;background:#f5f5f5;
border-radius:4px 4px 0 0;font-weight:700;font-size:13px;
color:#555;margin-right:3px
}
.one-city .city-name.active,.one-city .tabkq.active{
background:#c62828;color:#fff
}
/* ── DAY TAB PANEL ─────────────────────────────── */
ul.tab-panel{
display:flex;flex-wrap:wrap;gap:5px;
list-style:none;margin:0;padding:8px 12px 10px;
background:#fff;border-bottom:2px solid #f0f0f0
}
ul.tab-panel li a{
display:block;padding:5px 14px;border-radius:20px;
font-size:12px;font-weight:700;white-space:nowrap;
color:#c62828;background:#fff5f5;border:1px solid #ffcdd2;
transition:all .15s
}
ul.tab-panel li.active a,
ul.tab-panel li a:hover{
background:#c62828;color:#fff;border-color:#c62828;
box-shadow:0 2px 6px rgba(198,40,40,.25)
}
/* ── INLINE STATS TABS ─────────────────────────── */
.tab-thong-ke-inline{
display:flex;flex-wrap:wrap;gap:5px;
padding:8px 12px 7px;border-bottom:1px solid #f0f0f0
}
.tab-thong-ke-inline>div>a{
display:inline-block;padding:3px 12px;border-radius:12px;
font-size:12px;font-weight:700;
color:#c62828;background:#fff5f5;border:1px solid #ffcdd2;
transition:all .15s
}
.tab-thong-ke-inline>div>a:hover{
background:#c62828;color:#fff;border-color:#c62828
}
/* ── REGIONAL TITLE VARIANTS ───────────────────── */
/* h2 inside a regional-title div inherits correctly */
.box .regional-title h2{
color:#fff;font-size:13.5px;font-weight:700;
margin:0;font-family:inherit
}
/* header-level regional-title: spread title + breadcrumb */
.box>.regional-title.clearfix{
justify-content:space-between;flex-wrap:wrap;gap:4px
}
.box>.regional-title .sub-title{
color:rgba(255,255,255,.85);font-size:12px;font-weight:600
}
.box>.regional-title .sub-title:hover{color:#fff}
/* inner section headings (mag5-0 = sub-header, not box top) */
.box .regional-title.mag5-0{
background:linear-gradient(135deg,#c62828,#b71c1c);
color:#fff;padding:8px 14px;font-size:13px;
font-weight:700;margin:0;border-radius:0;display:block
}
/* ── STATISTIC TABLES ──────────────────────────── */
.statistic-box{padding:4px 12px 10px}
.statistic-summary .statistic-box:first-of-type{padding-top:8px}
table.with-border{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0}
table.with-border th{
background:#f8f9fa;padding:7px 8px;text-align:center;
font-size:12.5px;font-weight:700;color:#555;border:1px solid #e8e8e8
}
table.with-border td{
padding:5px 8px;text-align:center;border:1px solid #efefef;
font-size:13px;font-weight:600;vertical-align:middle
}
table.with-border tr:hover td{background:#fff8e1;color:inherit}
table.with-border .dsp-mobile-block{font-size:11.5px;color:#777;font-weight:400}
/* ── "XEM THÊM" BUTTON ─────────────────────────── */
.see-more{display:none!important}
.btn-see-more{
display:block;width:calc(100% - 24px);margin:4px 12px 12px;
padding:9px;background:#fff5f5;border:1px solid #ffcdd2;
border-radius:6px;color:#c62828;font-size:13px;font-weight:700;
cursor:pointer;text-align:center;transition:background .15s;font-family:inherit
}
.btn-see-more:hover{background:#ffebee}
/* ── UTILITY CLASSES ───────────────────────────── */
.mag5{margin:5px}.mag5-0{margin:5px 0}
.pad5-0{padding:5px 0}.s15{font-size:15px}
.cl-text-primary{color:#c62828}
.bg_gray{background:#f5f5f5}
/* ── PREDICTION NEWS (.cate-news) ──────────────── */
.box.cate-news ul.list_view{padding:0;margin:0}
.box.cate-news li.clearfix{display:block;padding:10px 14px;border-bottom:1px solid #f5f5f5}
.box.cate-news li.clearfix:last-child{border-bottom:none}
.box.cate-news li a.bold{display:block;color:#1a237e;font-size:13px;font-weight:700;line-height:1.5}
.box.cate-news li a.bold:hover{color:#c62828}
/* broken CDN thumbnails */
.box.cate-news .mag-r5.fl,.box.cate-news li a:first-child img{display:none!important}
/* ── HIDE BROKEN / UNUSED SOURCE ELEMENTS ─────── */
.swiper,.xsmn-block-start,.xsmn-swiper,.xsmn-swiper-wrapper,
.xsmn-swiper-container,.xsmn-swiper-title,
.xsmn-swiper-button-prev,.xsmn-swiper-button-next,
.xsmn-swiper-slide,.swiper-wrapper,.swiper-container,
.conect_out,.extendable-toggle,.bg_brown{display:none!important}
/* CDN images from source (hotlink blocked → show broken icon) */
img[src*="xosothantai.mobi"]{display:none!important}
.col-l img[src*="hand.png"],.col-l img[src*="printer"],.col-l img[src*="back"],.col-l img[src*="forward"]{display:none!important}
/* Source-site icon images that don't exist locally */
img[src*="/css/images/"]{display:none!important}
/* hover-panel: JS-injected 0-9 digit highlighter from xs.js */
.hover-panel,table.hover-panel,#hover-row{display:none!important}
/* control-panel: JS-injected digit-count radio buttons */
.control-panel,.buttons-wrapper,.digits-form{display:none!important}
/* fullscreen button (JS-dependent, broken image) */
.fullscreen-note .pad10-5{display:none!important}
/* frequency legend bar */
.fullscreen-note{padding:6px 12px;background:#f9f9f9;border-top:1px solid #f0f0f0}
ul.box-note-table{display:flex;flex-wrap:wrap;gap:4px 16px;list-style:none;padding:0;margin:0}
ul.box-note-table li{font-size:12px;color:#555;display:flex;align-items:center;gap:4px}
ul.box-note-table li .s11,.box-note-table li span:first-child{
display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;border-radius:3px;font-size:11px;font-weight:700;
background:#e0e0e0;color:#333
}
/* ── DATE/PROVINCE NAVIGATION ────────────────── */
.col-firstlast{margin-top:8px}
.col-l .box .content-right{padding:8px 14px}
.content-right a,.col-r a{color:#1565c0}
.content-right a:hover{color:#c62828}
/* ── CUSTOM SIDEBAR ───────────────────────────── */
.col-center,.col-right{font-size:13px}
/* "Today" label under schedule title */
.sb-today-label{
padding:7px 12px;font-size:12.5px;font-weight:700;
color:#c62828;background:#fff5f5;border-bottom:1px solid #f0f0f0
}
/* Region sections */
.sb-section{padding:8px 12px;border-bottom:1px solid #f5f5f5}
.sb-section:last-child{border-bottom:none}
.sb-region-tag{
display:inline-block;font-size:11px;font-weight:700;
padding:2px 7px;border-radius:10px;margin-bottom:4px;letter-spacing:.3px
}
.sb-mt{background:#e8f5e9;color:#2e7d32}
.sb-province-list{font-size:12.5px;color:#444;line-height:1.7}
/* Weekly schedule table */
.sb-week-table{width:100%;border-collapse:collapse;font-size:11px}
.sb-week-table th{
background:#f5f5f5;padding:5px 6px;font-weight:700;
color:#555;border-bottom:2px solid #e0e0e0;text-align:left
}
.sb-week-table td{
padding:5px 6px;border-bottom:1px solid #f5f5f5;
vertical-align:top;color:#444;line-height:1.5
}
.sb-week-table .sb-day{
font-weight:700;color:#555;white-space:nowrap;width:44px
}
.sb-week-table tr.sb-today-row td{
background:#fff8e1;font-weight:700;color:#c62828
}
.sb-week-table tr.sb-today-row .sb-day{color:#c62828}
/* Quick-links in right sidebar */
.sb-quicklinks{list-style:none;padding:4px 0;margin:0}
.sb-quicklinks li{border-bottom:1px solid #f5f5f5;padding:0}
.sb-quicklinks li:last-child{border-bottom:none}
.sb-quicklinks li a,.sb-quicklinks li .sb-province{
display:block;padding:7px 12px;font-size:12.5px;color:#444
}
.sb-quicklinks li a{color:#1565c0;font-weight:600;transition:color .12s,background .12s}
.sb-quicklinks li a:hover{color:#c62828;background:#fff5f5}
.sb-quicklinks li a::before{content:"\BB ";color:#c62828;font-weight:700}
.sb-quicklinks li .sb-province{color:#444}
.sb-quicklinks li .sb-province::before{content:"\B7 ";color:#c62828}
/* ── WEEKDAY BOX ──────────────────────────────── */
.weekday-box .bg_gray{background:#f8f8f8;padding:8px 12px;border-radius:6px 6px 0 0}
/* ── PAGINATION ───────────────────────────────── */
.paging{padding:10px 0;text-align:center}
.paging a,.paging span{display:inline-block;padding:5px 11px;margin:2px;border-radius:4px;font-size:13px;font-weight:600;border:1px solid #ddd;color:#555}
.paging a:hover{background:#c62828;color:#fff;border-color:#c62828}
.paging .current,.paging span.current{background:#c62828;color:#fff;border-color:#c62828}
/* ── NEWS / BLOG LIST ─────────────────────────── */
.cate-news ul li{padding:10px 14px;border-bottom:1px solid #f5f5f5;display:flex;gap:10px;align-items:flex-start}
.cate-news ul li:last-child{border-bottom:none}
.cate-news ul li h3{font-size:14px;margin-bottom:4px}
.cate-news ul li h3 a{color:#1a237e;font-weight:700}
.cate-news ul li h3 a:hover{color:#c62828}
.cate-news ul li img{width:80px;height:60px;object-fit:cover;border-radius:4px;flex-shrink:0}
.cate-news ul li .sapo{font-size:12px;color:#777;margin-top:4px}
/* ── SINGLE / PAGE CONTENT ────────────────────── */
.box-detail{padding:16px}
.box-detail h1,.box-detail h2,.box-detail h3{color:#c62828;margin:12px 0 8px}
.box-detail p{margin-bottom:10px;line-height:1.7}
.box-detail table{border-collapse:collapse;width:100%;margin:10px 0}
.box-detail table td,.box-detail table th{border:1px solid #ddd;padding:7px 10px}
.box-detail table th{background:#f5f5f5;font-weight:700}
/* ── FOOTER ───────────────────────────────────── */
footer.footer{background:#1a1a1a;color:#aaa;padding:20px 0;margin-top:20px}
footer.footer .main{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
footer .coppyr p{font-size:13px}
footer .coppyr a{color:#ddd;font-weight:600}
footer .coppyr a:hover{color:#f39c12}
footer .share-social{display:flex;gap:10px;align-items:center}
footer .share-social a{opacity:.7;transition:opacity .2s}
footer .share-social a:hover{opacity:1}
/* ── UTILITIES ────────────────────────────────── */
.clearfix::after{content:"";display:table;clear:both}
.fl{float:left}.fr{float:right}
.txt-center{text-align:center}
.pad5{padding:5px}.pad10{padding:10px}
.mag0{margin:0}.magb10{margin-bottom:10px}
.mag-r5{margin-right:5px}
.s16{font-size:16px}
.bold{font-weight:700}
.bg_gray{background:#f5f5f5}
.clnote,.v-clnote{color:#c62828}
#menu-mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99}
/* ── MOBILE ───────────────────────────────────── */
@media(max-width:900px){
.content.main{grid-template-columns:1fr 200px}
.col-right{display:none}
}
@media(max-width:660px){
.content.main{grid-template-columns:1fr;padding:0 8px}
.col-center{display:none}
.navbar-toggle{display:block}
nav#nav .nav-pc{display:none}
nav#nav .nav-mobi{display:block}
nav#nav{display:none;position:absolute;top:100%;left:0;right:0;background:#b71c1c;z-index:200;box-shadow:0 4px 12px rgba(0,0,0,.3)}
nav#nav.open{display:block}
nav#nav .nav-mobile{display:flex;flex-direction:column;padding:0;margin:0}
nav#nav .nav-mobile li{border-bottom:1px solid rgba(255,255,255,.1)}
nav#nav .nav-mobile li a{display:block;padding:12px 16px;color:#fff;font-size:13px;font-weight:600}
td.txt-giai{width:56px;font-size:11.5px;padding:6px 6px}
td.v-giai.number span{font-size:14px;margin:1px 3px}
tr.db td.v-giai.number span,td.v-giai.number span.v-gdb{font-size:26px;letter-spacing:2px}
tr.g7 td.v-giai.number span{font-size:17px}
.logo img{height:36px}
/* 3/4-tỉnh xổ chung ngày — nhường bớt cột nhãn giải (G8/G7/…) để các cột
số tỉnh có đủ chỗ, tránh bị tràn/mất chữ ở cột cuối cùng. */
table.colthreecity tr.gr-yellow th.first,table.colthreecity td:first-child,
table.colfourcity tr.gr-yellow th.first,table.colfourcity td:first-child{
width:22px;min-width:22px;padding:4px 2px;font-size:10px
}
table.colthreecity tr.gr-yellow th,table.colfourcity tr.gr-yellow th{
font-size:11px;padding:7px 3px
}
table.colthreecity td,table.colfourcity td{font-size:11px;padding:3px 2px}
table.colthreecity td div,table.colfourcity td div{font-size:11px;letter-spacing:0}
table.colthreecity tr.gdb td:not(:first-child),table.colfourcity tr.gdb td:not(:first-child),
table.colthreecity tr.gdb td:not(:first-child) div,table.colfourcity tr.gdb td:not(:first-child) div{
font-size:18px;padding:3px 0
}
table.colthreecity tr.g1 td:not(:first-child),table.colfourcity tr.g1 td:not(:first-child),
table.colthreecity tr.g1 td:not(:first-child) div,table.colfourcity tr.g1 td:not(:first-child) div{
font-size:13px
}
/* Lưới an toàn: nếu vẫn chưa đủ chỗ thì cho cuộn ngang thay vì cắt chữ */
.three-city{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* ── MOBILE NAV TOGGLE ────────────────────────── */
.navbar-toggle.open~nav#nav,.open#nav{display:block}
/* ── DISCLAIMER NOTICE ───────────────────────── */
.disclaimer-notice{background:#fff8e1;border:1px solid #ffe082;border-left:4px solid #f9a825;border-radius:4px;padding:9px 14px;font-size:12.5px;color:#5d4037;line-height:1.5;margin-bottom:12px}
/* ── GLOSSARY PAGE ───────────────────────────── */
.xoso-glossary{margin:0;padding:0}
.xoso-glossary dt{font-weight:700;font-size:14px;color:#b71c1c;margin:18px 0 4px;border-bottom:1px dashed #e0e0e0;padding-bottom:4px}
.xoso-glossary dd{margin:0 0 4px 0;padding:0 0 0 12px;font-size:13px;color:#333;line-height:1.7;border-left:3px solid #ffcdd2}
.xoso-glossary dd a{color:#b71c1c;text-decoration:underline}
/* ── 30-DAY / N-DAY ARCHIVE LAYOUT ──────────── */
/* Two-column layout: result table left, head/tail stats right */
/* min-width:0 overrides the flex default of min-width:auto — without it,
the colthreecity table (a flex child) refuses to shrink below its content
width and overflows off the right edge on narrow screens instead of
fitting the viewport, cutting off the last province's numbers. */
.three-city{display:flex;gap:8px;margin-bottom:6px;align-items:flex-start;min-width:0}
.three-city>table{min-width:0}
.sub-col-l{flex:1;min-width:0}
.sub-col-r{width:130px;flex-shrink:0}
/* Date header row inside kqmb (30-day view) */
table.kqmb th[colspan]{
background:#fff8e1;padding:8px 12px;text-align:center;
border-bottom:2px solid #ffe082;border-top:1px solid #f0f0f0
}
table.kqmb th[colspan] h2.bold{
color:#c62828;font-size:13px;font-weight:700;margin:0;
font-family:inherit;line-height:1.4
}
/* Head/tail distribution table (right column) */
table.firstlast-mb{width:100%;border-collapse:collapse;font-size:11.5px}
table.firstlast-mb tr.header th{
background:#f0f0f0;padding:5px 4px;font-weight:700;
color:#555;border:1px solid #e0e0e0;text-align:center
}
table.firstlast-mb td{
padding:4px 5px;border:1px solid #f0f0f0;
font-size:11px;vertical-align:middle;text-align:center
}
table.firstlast-mb td:first-child{
font-weight:700;color:#555;background:#fafafa
}
table.firstlast-mb tr:nth-child(even) td{background:#f8f8f8}
/* Navigation sub-links (xem nhanh 10/30/60 ngay) */
.bottom-html{
padding:10px 14px;background:#f8f8f8;
border-top:1px solid #f0f0f0;font-size:13px;line-height:2.2
}
a.item_sublink,.item_sublink{
display:inline-block;margin:2px 3px;padding:3px 10px;
background:#fff5f5;border-radius:12px;font-size:12px;
font-weight:700;color:#c62828;border:1px solid #ffcdd2;transition:all .15s
}
a.item_sublink:hover{background:#c62828;color:#fff;border-color:#c62828}
/* ── STATISTICS PAGE TABLES ─────────────────── */
/* table.mag0 used as a data/stats table */
table.mag0{width:100%;border-collapse:collapse;font-size:13px}
table.mag0 th{
background:#f8f9fa;padding:7px 8px;font-weight:700;color:#555;
border:1px solid #e8e8e8;text-align:center;font-size:12.5px;white-space:nowrap
}
table.mag0 td{
padding:6px 8px;border:1px solid #efefef;
text-align:center;vertical-align:middle;font-size:13px
}
table.mag0 td:first-child{white-space:nowrap}
table.mag0 th:not(:first-child),
table.mag0 td:not(:first-child){padding-left:4px;padding-right:4px}
table.mag0 tr:nth-child(even) td{background:#fafafa}
table.mag0 tr:hover td{background:#fff8e1;color:inherit}
/* Half-width float tables side by side */
table.tbl50{border-collapse:collapse;font-size:13px;width:100%}
table.fl.tbl50{float:left;width:calc(50% - 5px);margin-right:8px}
table.fl.tbl50:last-child{margin-right:0}
table.tbl50 th{
background:#f8f9fa;padding:7px 8px;font-weight:700;
color:#555;border:1px solid #e8e8e8;text-align:center
}
table.tbl50 td{
padding:6px 8px;border:1px solid #efefef;
text-align:center;vertical-align:middle
}
table.tbl50 tr:nth-child(even) td{background:#fafafa}
table.tbl50 tr:hover td{background:#fff8e1;color:inherit}
/* box that holds two side-by-side tbl50/mag0 tables */
.box.clearfix>.clearfix{padding:8px 12px;overflow:hidden}
/* Common utility/color classes from source */
.clred,.v-clred{color:#c62828!important;font-weight:700}
.s18{font-size:18px}
.s16{font-size:16px}
.mag-l5{margin-left:5px}
.mag-r10{margin-right:10px}
.pad5-10{padding:5px 10px}
td.enable-popup{color:#1565c0;cursor:pointer}
td.enable-popup:hover{background:#e3f2fd;text-decoration:underline}
.tr-hover tr:hover td{background:#fff8e1;color:inherit}
table .clnote{color:#c62828;font-weight:700}
/* Stats form (date range picker) */
#statistic-form{
display:flex;flex-wrap:wrap;gap:6px;
padding:8px 12px;align-items:center;background:#fafafa;
border-bottom:1px solid #f0f0f0
}
#statistic-form select,
#statistic-form input[type=text],
#statistic-form input[type=number],
#statistic-form input[type=date]{
border:1px solid #ddd;border-radius:4px;
padding:5px 8px;font-size:13px;outline:none;
background:#fff;color:#333
}
#statistic-form .btn{
padding:6px 14px;border-radius:4px;font-size:13px;font-weight:700;cursor:pointer;border:none;font-family:inherit
}
#statistic-form .txt-center{align-self:flex-end}
#statistic-form .btn-danger{background:#c62828;color:#fff}
#statistic-form .btn-danger:hover{background:#b71c1c}
#statistic-form .btn-default{background:#eee;color:#333}
/* ── SOI CẦU / DỰ ĐOÁN PAGES ────────────────── */
/* Soi cau / bach thu prediction table */
table.bang-cau{width:100%;border-collapse:collapse;font-size:13px}
table.bang-cau td{
padding:5px 7px;border:1px solid #f0f0f0;
text-align:center;vertical-align:middle
}
table.bang-cau td.dau{
font-weight:700;color:#555;background:#f8f9fa;
border-right:2px solid #e0e0e0;white-space:nowrap
}
table.bang-cau td.valid{
background:#e8f5e9;color:#2e7d32;font-weight:700;font-size:15px
}
table.bang-cau td.invalid{background:#fafafa;color:#bbb}
table.bang-cau tr:hover td{background:#fff8e1;color:inherit}
table.bang-cau tr:hover td.valid{background:#c8e6c9}
/* Generic fallback: any table inside .box not already styled */
.box table{width:100%;border-collapse:collapse}
.box table th{
background:#f8f9fa;padding:7px 8px;font-weight:700;
color:#555;border:1px solid #e8e8e8;text-align:center;font-size:12.5px
}
.box table td{padding:6px 8px;border:1px solid #efefef;vertical-align:middle}
/* Hover: only non-ball rows — exclude table.data first row (lottery balls have white text) */
.box table tr:hover td{background:#fff8e1;color:inherit}
table.data tr:first-child:hover td{
background:linear-gradient(135deg,#ef5350,#c62828)!important;
color:#fff!important
}
/* Link list in prediction/stats boxes */
.box .bottom-html a,.box a.item_sublink{color:#c62828;font-weight:700}
/* Sub-navigation inside box content */
.box .content-right{padding:8px 14px;font-size:13px}
/* ── FREQUENCY STATS TABLE (tần suất lô tô) ──── */
/* Horizontal scroll wrapper for wide tables */
div.scoll,div.scoll-noheight{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.colgiai{border-collapse:collapse;font-size:12px;white-space:nowrap}
table.colgiai th{
background:#f8f9fa;padding:6px 5px;font-weight:700;
color:#555;border:1px solid #e0e0e0;text-align:center;min-width:28px
}
table.colgiai th.nh{min-width:28px;font-size:11px;color:#444}
table.colgiai td{
padding:5px 4px;border:1px solid #f0f0f0;
text-align:center;vertical-align:middle;font-size:12px
}
table.colgiai td:first-child{
min-width:80px;text-align:left;font-weight:600;color:#555;
background:#fafafa;border-right:2px solid #e8e8e8;padding:5px 8px
}
/* Frequency heat-map coloring */
table.colgiai td.c0{color:#ccc}
table.colgiai td.c1{background:#fff8e1;color:#f57c00;font-weight:700}
table.colgiai td.c2{background:#ffe0b2;color:#e65100;font-weight:700}
table.colgiai td.c3,table.colgiai td.c4{background:#ffccbc;color:#bf360c;font-weight:800}
table.colgiai td.c_{color:#bbb}
table.colgiai tr:hover td{background:#fff3e0;color:inherit}
table.colgiai tr:hover td.c0,table.colgiai tr:hover td.c_{background:#fff3e0}
/* ── TRỰC TIẾP PAGE ───────────────────────────── */
/* Live results countdown / realtime containers */
.sticky-bottom-header{display:none!important}
#result-see-more{
display:block;width:calc(100% - 24px);margin:8px 12px 12px;
padding:9px;background:#fff5f5;border:1px solid #ffcdd2;
border-radius:6px;color:#c62828;font-size:13px;font-weight:700;
cursor:pointer;text-align:center;font-family:inherit
}
#result-see-more:hover{background:#ffebee}
/* ── MOBILE: 30-DAY RESPONSIVE ───────────────── */
@media(max-width:660px){
.three-city{flex-direction:column;gap:0}
.sub-col-r{width:100%}
table.firstlast-mb{font-size:11px}
table.mag0 th,table.mag0 td{padding:5px 6px;font-size:12px}
table.tbl50{width:100%!important;margin-right:0!important}
table.fl.tbl50{float:none!important;margin-bottom:8px}
}
/* ══════════════════════════════════════════════════
KENO PAGE
══════════════════════════════════════════════════ */
/* ── Tab navigation: already defined in DAY TAB PANEL section above ─── */
/* ul.tab-panel rules live at the DAY TAB PANEL section — do not duplicate here */
/* ── Keno / tần suất filter form ── */
#statistic-form .form-group{
display:flex;flex-direction:column;gap:3px;flex:1;min-width:140px
}
/* full-width rows inside the form flex */
#statistic-form .txt-center.pad5,
#statistic-form .bg_org,
#statistic-form ul.list-bstk{flex:0 0 100%;width:100%;box-sizing:border-box}
/* checkbox grid: 10 per row */
#statistic-form ul.list-bstk{
display:flex;flex-wrap:wrap;gap:2px 4px;
list-style:none;padding:6px 8px;margin:0
}
#statistic-form ul.list-bstk li{
display:flex;align-items:center;gap:3px;
min-width:52px;font-size:13px
}
#statistic-form .control-label{font-size:12px;font-weight:600;color:#666}
#statistic-form .form-control{
width:100%;border:1px solid #ddd;border-radius:4px;
padding:6px 8px;font-size:13px;background:#fff;color:#333;
font-family:inherit;outline:none
}
/* The div.form-control wrapping the submit button */
#statistic-form div.form-control{
background:none;border:none;padding:0;width:auto;
display:flex;align-items:flex-end;flex:0 0 auto
}
#statistic-form .help-block{display:none}
#statistic-form .btn{
padding:7px 16px;border-radius:4px;font-size:13px;
font-weight:700;cursor:pointer;border:none;white-space:nowrap
}
#statistic-form .btn-danger{background:#c62828;color:#fff}
#statistic-form .btn-danger:hover{background:#b71c1c}
/* ── Latest result wrapper ── */
div.yellow-bg{background:#fff}
div.yellow-bg h2.kq-title{border-radius:0}
div.yellow-bg .clnote{color:#ffd54f}
/* ── Keno ball table: BOTH rows are balls ── */
/* Must override the general tr:not(:first-child) amber rule */
.keno table.data{
width:auto;max-width:100%;margin:10px auto;
border-collapse:separate;border-spacing:0;
display:block /* prevent table layout breaking flex on tr */
}
.keno table.data tbody{display:block}
.keno table.data tr{
display:flex!important;flex-wrap:wrap;gap:7px;
justify-content:center;padding:6px 14px;
background:transparent!important
}
.keno table.data tr td{
display:flex!important;align-items:center;justify-content:center;
width:36px!important;height:36px!important;border-radius:50%!important;
background:linear-gradient(135deg,#ef5350,#c62828)!important;
color:#fff!important;font-weight:700!important;font-size:13px!important;
padding:0!important;border:none!important;line-height:1
}
.keno table.data tr td i{font-style:normal}
/* Hover: keep red gradient on keno balls */
.keno table.data tr:hover td,
.keno table.data tr:hover td:first-child{
background:linear-gradient(135deg,#ef5350,#c62828)!important;
color:#fff!important
}
/* ── Chẵn/Lẻ/Lớn/Nhỏ summary row ── */
.number-total-info{
display:flex;justify-content:space-around;
padding:6px 12px;font-size:13px
}
.number-total-info.bold{font-weight:600}
.number-total-info+.number-total-info{border-top:1px solid #f5f5f5}
.number-info{
display:flex;align-items:center;gap:6px;flex:1;color:#444
}
.float-right{margin-left:auto;font-weight:700;color:#c62828}
/* Colored indicator mini-balls */
.ball-small{
display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;border-radius:50%;
font-size:10px;font-weight:800;color:#fff;flex-shrink:0
}
.ball-small.number-even{background:#1565c0} /* Chẵn = blue */
.ball-small.number-odd {background:#e65100} /* Lẻ = orange */
.ball-small.number-big {background:#c62828} /* Lớn = red */
.ball-small.number-small{background:#2e7d32} /* Nhỏ = green */
.ball-condense{letter-spacing:-0.5px}
/* ── Previous results section ── */
div.other-results{padding:4px 0 2px}
div.pre-keno-container{
background:#fff;border:1px solid #f0f0f0;border-radius:6px;
margin:6px 12px;overflow:hidden
}
div.pre-keno-title{
display:flex;justify-content:space-between;align-items:center;
padding:5px 12px;background:#f8f9fa;
border-bottom:1px solid #f0f0f0;font-size:12px;color:#666
}
div.pre-keno-title span.cllink{color:#1565c0;font-weight:600}
div.pre-keno-title .bold{color:#c62828}
/* Bootstrap-lite grid used inside each draw card */
.row{display:flex;width:100%;gap:0}
.col-8{flex:0 0 66.666%;max-width:66.666%;padding:8px}
.col-4{
flex:0 0 33.333%;max-width:33.333%;
padding:6px 8px;border-left:1px solid #f5f5f5
}
/* Ball grid (20 number balls) */
div.number-content{
display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start
}
i.pre-keno-result{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:50%;font-style:normal;
background:linear-gradient(135deg,#ef5350,#c62828);flex-shrink:0
}
span.pre-keno-number{
color:#fff;font-weight:700;font-size:11.5px;font-style:normal
}
/* Chẵn/Lẻ/Lớn/Nhỏ checkboxes (col-4) */
div.keno-check-button{
padding:5px 6px;border-bottom:1px solid #f5f5f5;font-size:12px
}
div.keno-check-button:last-child{border-bottom:none}
div.keno-check-button label{
display:flex;align-items:center;gap:6px;cursor:pointer;
color:#444;font-weight:500
}
div.keno-check-button input[type=checkbox]{
width:14px;height:14px;flex-shrink:0;
cursor:pointer;accent-color:#c62828
}
/* "Xem thêm" load-more button */
button.btn-see-more{
display:block;width:calc(100% - 24px);margin:6px 12px 10px;
padding:8px;background:#fff5f5;border:1px solid #ffcdd2;
border-radius:6px;color:#c62828;font-size:13px;font-weight:700;
cursor:pointer;text-align:center;font-family:inherit;transition:background .15s
}
button.btn-see-more:hover{background:#ffebee}
/* ── KENO MOBILE ── */
@media(max-width:660px){
.keno table.data tr{gap:5px;padding:5px 8px}
.keno table.data tr td{width:30px!important;height:30px!important;font-size:11px!important}
i.pre-keno-result{width:26px;height:26px}
span.pre-keno-number{font-size:10px}
.col-8{flex:0 0 60%;max-width:60%}
.col-4{flex:0 0 40%;max-width:40%}
div.pre-keno-container{margin:5px 8px}
}
/* ══════════════════════════════════════════════════
SOI CẦU PAGE
══════════════════════════════════════════════════ */
/* ── Layout wrapper for kqxs result boxes ── */
div.kqxs-tables,div.left.kqxs-tables{
width:100%;float:none
}
div.bang-kq{margin-bottom:12px;border-bottom:2px solid #f0f0f0;padding-bottom:4px}
div.bang-kq:last-child{border-bottom:none}
/* ── v-madb: prediction code row (17AQ - 5AQ ...) ── */
.v-giai.madb{
background:#fff8e1;padding:6px 10px;
font-size:12px;color:#f57c00;border-bottom:1px solid #ffe082
}
.v-madb{
display:inline;font-style:italic;font-weight:600;
letter-spacing:0.3px;color:#e65100
}
/* ── Loto table (Bảng loto) ── */
div.bang-loto{
margin:8px 0;border:1px solid #f0f0f0;border-radius:6px;
overflow:hidden;background:#fff
}
div.bang-loto .txt-center.pad10{
background:#f8f9fa;padding:7px 10px;font-size:13px;
font-weight:700;color:#555;border-bottom:1px solid #f0f0f0;
text-align:center
}
div.bang-loto table{width:100%;border-collapse:collapse}
div.bang-loto table td{
padding:7px 4px;border:1px solid #f5f5f5;text-align:center;
font-size:14px;font-weight:700;color:#333
}
div.bang-loto table td span[class^="lotopos"]{color:inherit}
/* Highlighted loto cells (matched) — JS adds class, we pre-style */
div.bang-loto table td.clnote,
div.bang-loto table td span.clnote{color:#c62828}
div.bang-loto table tr:hover td{background:#fff8e1;color:inherit}
/* ── Bang-cau (dự đoán cặp số) ── */
/* Already has base styling, enhance here */
table.bang-cau{width:100%;border-collapse:collapse;font-size:12.5px}
table.bang-cau td.dau{
font-weight:700;color:#555;background:#f8f9fa;
border-right:2px solid #e0e0e0;white-space:nowrap;
padding:5px 8px;font-size:12px;text-align:left;vertical-align:top
}
table.bang-cau td.valid{
padding:5px 6px;background:#e8f5e9;border:1px solid #c8e6c9;
text-align:center;vertical-align:top;cursor:help
}
table.bang-cau td.invalid{background:#fafafa;border:1px solid #f0f0f0;padding:5px}
/* Number in bang-cau cell */
span.num{display:block;font-size:14px;font-weight:800;color:#c62828;line-height:1.2}
/* Frequency count */
span.freq{display:block;font-size:10px;color:#777;font-weight:400;margin-top:1px}
table.bang-cau tr:hover td.valid{background:#c8e6c9}
table.bang-cau tr:hover td{color:inherit}
/* ── Box-note: info bar above result tables ── */
.box-note{
padding:8px 12px;font-size:12.5px;color:#5d4037;
background:#fff8e1;border-left:3px solid #ffd54f;
line-height:1.6
}
.box.pad5{padding:5px}
.box.pad10-5{padding:10px 5px}
/* ── Soi-cau links list (ul.list-dot-red) ── */
ul.list-dot-red{list-style:none;margin:0;padding:4px 0}
ul.list-dot-red li{
padding:7px 14px;border-bottom:1px solid #f5f5f5;
font-size:13px;display:flex;align-items:center;gap:8px
}
ul.list-dot-red li:last-child{border-bottom:none}
/* Hide broken bullet image, use CSS pseudo instead */
ul.list-dot-red li img{display:none!important}
ul.list-dot-red li::before{
content:"\BB";color:#c62828;font-weight:800;font-size:14px;flex-shrink:0
}
ul.list-dot-red li a{
color:#333;font-weight:600;transition:color .15s
}
ul.list-dot-red li a:hover{color:#c62828;text-decoration:underline}
/* ── freq class (used in .bang-cau and stats pages) ── */
.freq[data-dfreq]{font-size:10px;color:#888}
/* ── Mobile: soi-cau responsive ── */
@media(max-width:660px){
div.bang-loto table td{padding:5px 2px;font-size:12px}
table.bang-cau td.dau{font-size:11px;padding:4px 6px}
span.num{font-size:12px}
span.freq{font-size:9px}
}
/* ══════════════════════════════════════════════════
THỐNG KÊ PAGES — ENHANCED SECTION STYLING
══════════════════════════════════════════════════ */
/* ── Fix: .s18 font-size overridden by table.mag0 td specificity ── */
table.mag0 td.s18{font-size:18px!important}
/* ── Lottery number display inside table cells (div.statistic_lo) ── */
div.statistic_lo{
font-size:15px;font-weight:700;color:#333;
line-height:1.4;letter-spacing:.5px
}
div.statistic_lo .clnote{color:#c62828;font-weight:800}
/* ── Padding fix for plain wrappers holding table.mag0 ── */
.box.tr-hover>div:not(.clearfix){padding-bottom:4px}
/* ── GAN LÌ LIST: "2 số cuối đặc biệt lâu chưa về" ── */
ul.list-dau-db{
display:flex;flex-wrap:wrap;gap:8px;
padding:10px 14px 14px;list-style:none;margin:0
}
ul.list-dau-db li{
display:flex;align-items:center;gap:10px;
padding:7px 14px 7px 8px;
background:#fff5f5;border:1px solid #ffcdd2;border-radius:8px;
flex:1 1 calc(50% - 8px);min-width:140px
}
ul.list-dau-db a.statistic_lo{
display:inline-flex;align-items:center;justify-content:center;
min-width:36px;height:36px;border-radius:50%;
background:linear-gradient(135deg,#c62828,#b71c1c);
color:#fff!important;font-size:14px;font-weight:800;
flex-shrink:0;text-decoration:none;
box-shadow:0 2px 6px rgba(198,40,40,.25)
}
ul.list-dau-db a.statistic_lo:hover{
background:linear-gradient(135deg,#e53935,#c62828)
}
ul.list-dau-db li .clnote{
font-size:13px;font-weight:700;color:#666
}
/* ── Generic statistic_lo number links (outside list-dau-db) ── */
a.statistic_lo{color:#c62828;font-weight:800}
/* ── statistic_lo bold pill inside table cells ── */
td div.statistic_lo.bold{font-size:15px;font-weight:700;color:#333}
td div.statistic_lo.bold .clnote{
display:inline-block;background:#fff0f0;
color:#c62828;font-weight:900;border-radius:3px;padding:0 2px
}
/* ── Mobile: list-dau-db single column ── */
@media(max-width:660px){
ul.list-dau-db li{flex:1 1 calc(100% - 8px);min-width:unset}
table.mag0 td.s18{font-size:15px!important}
}
/* ══════════════════════════════════════════════════
THỐNG KÊ NHANH PAGE
══════════════════════════════════════════════════ */
/* ── Result section heading (h2.bg_red) — same look as regional-title ── */
h2.bg_red{
background:linear-gradient(135deg,#c62828,#b71c1c);
color:#fff;padding:8px 14px;font-size:13.5px;font-weight:700;
letter-spacing:.3px;border-radius:8px 8px 0 0;margin:0;
display:block
}
/* ── Utility classes missing from source ── */
.pad10-5{padding:10px 5px}
.mag10-5{margin:10px 5px}
/* ── Hide Facebook share button (invisible but takes space) ── */
.fb-share-button{display:none!important}
/* ── Form: use flex-start so unequal-height groups don't mis-align ── */
#statistic-form{align-items:flex-start}
/* ── Form hint text below "Chọn số" input ── */
.hint-block{
font-size:11.5px;color:#999;line-height:1.35;
margin-top:4px;font-style:italic
}
/* ── Radio button pairs inside form-control div ── */
#statistic-form div.form-control{
display:flex;align-items:center;gap:4px;
background:none;border:none;padding:4px 0;width:100%
}
span.percent-50{
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;font-size:13px;border-radius:6px;
border:1px solid #eee;background:#fafafa;cursor:pointer;
transition:background .12s
}
span.percent-50:has(input:checked){
background:#fff5f5;border-color:#ffcdd2;color:#c62828
}
span.percent-50 input[type=radio]{
accent-color:#c62828;cursor:pointer;flex-shrink:0
}
/* ── "Xem thêm" quick-link row under form ── */
.txt-center.pad5{padding:8px 12px;font-size:13px}
/* ── Article intro box (h2, p inside .box.pad5) ── */
.box.pad5>h2,.box.pad5 h2:not([class]){
color:#c62828;font-size:14px;font-weight:700;
margin:12px 0 8px;padding-bottom:4px;
border-bottom:1px solid #f0f0f0
}
.box.pad5>p,.box.pad5 p{
font-size:13px;color:#555;line-height:1.65;margin-bottom:8px
}
/* ── Mobile: form groups stack vertically ── */
@media(max-width:660px){
span.percent-50{padding:3px 8px;font-size:12px}
}
/* ══════════════════════════════════════════════════
THỐNG KÊ TỔNG (Calendar / Lịch đặc biệt)
══════════════════════════════════════════════════ */
/* ── Missing utility classes ── */
.pad10{padding:10px}
.magb10{margin-bottom:10px!important}
.col-6{flex:0 0 50%;max-width:50%;padding:0 6px;box-sizing:border-box}
/* ── Blue 2-digit highlight (span.clblue) ── */
.clblue{color:#1565c0;font-weight:900}
/* ── Empty box cleanup ── */
.box:empty{display:none}
/* ── Box wrapper for the form + tabs ── */
.box.tk-tong-db{overflow:hidden}
/* ── Sub-header inside box (h2.regional-title after tabs) ── */
.box.tk-tong-db h2.regional-title{
border-radius:0;font-size:13px;letter-spacing:.2px
}
/* ── Form: all fields + button on ONE line, button bottom-aligned with inputs ── */
.box.tk-tong-db #statistic-form{
align-items:flex-end;
flex-wrap:nowrap;
gap:8px
}
.box.tk-tong-db #statistic-form .form-group.drp-container{
flex:1;min-width:0
}
.box.tk-tong-db #statistic-form .form-group.txt-center{
flex:0 0 auto;min-width:unset;padding:0
}
.box.tk-tong-db #statistic-form .row{gap:8px}
.box.tk-tong-db .col-6{flex:1;max-width:none;padding:0}
.box.tk-tong-db #statistic-form .btn{white-space:nowrap}
/* ── Info note under the form ── */
.box.tk-tong-db .pad10{
font-size:12px;color:#888;font-style:italic;
background:#fafafa;border-top:1px solid #f0f0f0;
text-align:center;padding:7px 14px
}
/* ── Toggle button bar ── */
.title-c2{
background:#f8f9fa;
border-bottom:2px solid #f0f0f0;
}
.toogle-buttons{
display:inline-flex;align-items:center;
gap:12px;flex-wrap:wrap;justify-content:center
}
.toggle-button{
display:inline-flex;align-items:center;
gap:5px;cursor:pointer;font-size:13px;font-weight:600;
color:#555;user-select:none
}
/* Hidden native checkbox */
.dspnone,.cbx.dspnone{display:none!important}
/* Toggle switch pill (lbl1) */
.lbl1{
display:inline-flex;align-items:center;
width:30px;height:16px;border-radius:8px;
background:#ccc;cursor:pointer;
position:relative;transition:background .2s;flex-shrink:0
}
.lbl1::after{
content:'';position:absolute;
top:2px;left:2px;
width:12px;height:12px;border-radius:50%;
background:#fff;transition:left .2s;
box-shadow:0 1px 3px rgba(0,0,0,.25)
}
.cbx:checked+.lbl1{background:#c62828}
.cbx:checked+.lbl1::after{left:16px}
/* ── Calendar table (7 weekday columns) ── */
.tk-tong-db.tk-db{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tk-tong-db.tk-db table{
width:100%;border-collapse:collapse;
table-layout:fixed;min-width:400px
}
/* Weekday headers */
.tk-tong-db.tk-db table th{
background:linear-gradient(135deg,#c62828,#b71c1c);
color:#fff;padding:8px 2px;text-align:center;
font-size:12px;font-weight:700;letter-spacing:.5px;
border:1px solid rgba(255,255,255,.15)
}
/* Data cells */
.tk-tong-db.tk-db table td{
border:1px solid #efefef;
padding:7px 3px 6px;text-align:center;
vertical-align:top;background:#fff;
min-width:52px;line-height:1
}
.tk-tong-db.tk-db table tr:nth-child(even) td{background:#fafafa}
.tk-tong-db.tk-db table td:hover{background:#fff8e1}
/* Full lottery number inside cell (e.g. " 383 85") */
.tk-tong-db.tk-db td>div:first-child{
font-size:14px;font-weight:700;
color:#333;line-height:1.2;
letter-spacing:.3px;white-space:nowrap
}
/* Date label (07/02) */
.ngay-quay{
font-size:10.5px;color:#bbb;
margin:3px 0 4px;line-height:1
}
/* Stat tags — each type gets its own color pill */
.clnote.dau,.clnote.duoi,.clnote.loto,.clnote.tong{
display:inline-block;font-size:11px;font-weight:700;
padding:1px 5px;border-radius:3px;
margin:1px 0;line-height:1.5
}
.clnote.dau {background:#e3f2fd;color:#1565c0}
.clnote.duoi{background:#e8f5e9;color:#2e7d32}
.clnote.loto{background:#fff3e0;color:#e65100}
.clnote.tong{background:#fce4ec;color:#c62828}
/* ── Mobile: smaller cells ── */
@media(max-width:660px){
.tk-tong-db.tk-db td>div:first-child{font-size:12px}
.ngay-quay{font-size:10px}
.clnote.dau,.clnote.duoi,.clnote.loto,.clnote.tong{font-size:10px;padding:1px 3px}
.toggle-button{font-size:12px;gap:4px}
.toogle-buttons{gap:8px}
}
/* ── Quay thu button ── */
.btn-red,#btnStartOrStop{
background:linear-gradient(135deg,#e53935,#c62828)!important;
color:#fff!important;
padding:10px 28px;
font-size:15px;
font-weight:700;
border-radius:6px;
box-shadow:0 3px 12px rgba(198,40,40,.45);
border:none;
letter-spacing:.4px;
cursor:pointer;
transition:all .2s;
}
.btn-red:hover,#btnStartOrStop:hover{
background:linear-gradient(135deg,#f44336,#d32f2f)!important;
box-shadow:0 5px 20px rgba(198,40,40,.6);
transform:translateY(-1px);
}
/* ── Prominent submit button (thong-ke-tong) ── */
.box.tk-tong-db #statistic-form .btn-danger{
background:linear-gradient(135deg,#e53935,#c62828);
color:#fff;
padding:9px 22px;
font-size:14px;
font-weight:700;
border-radius:6px;
box-shadow:0 3px 10px rgba(198,40,40,.4);
border:none;
letter-spacing:.4px;
transition:all .2s;
cursor:pointer;
}
.box.tk-tong-db #statistic-form .btn-danger:hover{
background:linear-gradient(135deg,#f44336,#d32f2f);
box-shadow:0 5px 18px rgba(198,40,40,.55);
transform:translateY(-1px);
}
/* ══ Lô câm page (#loto-cam) ══════════════════════════ */
/* Form: 2 selects + button on one row */
#loto-cam #statistic-form{
align-items:flex-end;
flex-wrap:nowrap;
gap:10px;
padding:12px 14px;
}
#loto-cam #statistic-form .form-group{
flex:1;min-width:0;margin:0;
}
#loto-cam #statistic-form .txt-center{
flex:0 0 auto;margin:0;padding:0;text-align:left;
}
#loto-cam #statistic-form .form-control{width:100%}
#loto-cam #statistic-form .control-label{
display:block;font-size:12px;font-weight:600;color:#666;margin-bottom:4px;
}
#loto-cam #statistic-form .help-block{display:none}
#loto-cam #statistic-form .btn-danger{
background:linear-gradient(135deg,#e53935,#c62828);
color:#fff;padding:9px 20px;font-size:14px;font-weight:700;
border-radius:6px;box-shadow:0 3px 10px rgba(198,40,40,.4);
border:none;letter-spacing:.3px;cursor:pointer;white-space:nowrap;transition:all .2s;
}
#loto-cam #statistic-form .btn-danger:hover{
background:linear-gradient(135deg,#f44336,#d32f2f);
box-shadow:0 5px 16px rgba(198,40,40,.55);transform:translateY(-1px);
}
/* Quick-link province pills */
#loto-cam .txt-center.pad5{
padding:10px 14px;
background:#fff;
border-top:1px solid #f0f0f0;
}
#loto-cam .txt-center.pad5 .clnote{font-weight:600;color:#555;font-size:13px}
/* Sub-tabs: Câm đầu / Câm đuôi */
ul.nav-tabs{
display:flex;gap:0;
border-bottom:2px solid #e0e0e0;
margin:10px 0 0;padding:0 12px;list-style:none;
background:#fafafa;
}
ul.nav-tabs li{margin-bottom:-2px}
ul.nav-tabs li a{
display:block;padding:8px 18px;font-size:13px;font-weight:600;
color:#666;border-radius:6px 6px 0 0;
border:1px solid transparent;border-bottom:2px solid transparent;
text-decoration:none;transition:all .15s;
}
ul.nav-tabs li.active a{
color:#c62828;border-color:#e0e0e0;border-bottom-color:#fff;
background:#fff;font-weight:700;
}
ul.nav-tabs li a:hover{color:#c62828;background:#fff3f3}
/* Sort toggle button — compact, sits right of nav-tabs */
button.sort-by-time{
float:right;margin:5px 0 0 0;
font-size:11.5px;font-weight:600;color:#888;
background:#f5f5f5;border:1px solid #e0e0e0;
border-radius:4px;padding:4px 8px;cursor:pointer;
display:inline-flex;align-items:center;gap:3px;
transition:all .15s;line-height:1.4;
}
button.sort-by-time:hover{background:#fff3f3;border-color:#ffcdd2;color:#c62828}
button.sort-by-time .ic{font-size:10px;opacity:.7}
/* Filter checkboxes 0-9 */
.filter-by-number{
padding:10px 14px 8px;
background:#fff;
border-bottom:1px solid #f0f0f0;
}
.filter-number-list{
display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
label.pure-material-checkbox{
display:inline-flex;align-items:center;
cursor:pointer;margin:0;
}
label.pure-material-checkbox input[type="checkbox"]{
position:absolute;opacity:0;width:0;height:0;
}
label.pure-material-checkbox span{
display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:50%;
border:2px solid #ddd;
font-size:13px;font-weight:700;color:#888;
background:#fafafa;cursor:pointer;
transition:all .15s;
}
label.pure-material-checkbox input:checked + span{
background:linear-gradient(135deg,#e53935,#c62828);
border-color:#c62828;color:#fff;
box-shadow:0 2px 6px rgba(198,40,40,.3);
}
label.pure-material-checkbox:hover span{border-color:#c62828;color:#c62828}
/* Table: headers + rows */
#loto-cam table.mag0{width:100%;border-collapse:collapse;table-layout:auto}
#loto-cam table.mag0 th{
background:linear-gradient(135deg,#c62828,#b71c1c);
color:#fff;padding:9px 10px;
font-size:12.5px;font-weight:700;text-align:left;
}
#loto-cam table.mag0 td{
padding:7px 10px;font-size:13px;
border-bottom:1px solid #f0f0f0;
vertical-align:middle;
}
#loto-cam table.mag0 tr:nth-child(even) td{background:#fafafa}
#loto-cam table.mag0 tr:hover td{background:#fff5f5}
/* Lottery number pills in Lô hôm sau column */
td.boso{line-height:1.8}
td.boso span{
display:inline-flex;align-items:center;justify-content:center;
min-width:26px;height:22px;padding:0 4px;margin:1px;
border-radius:4px;
background:#f5f5f5;border:1px solid #e0e0e0;
font-size:12px;font-weight:700;color:#333;
}
/* Câm đầu number highlight */
#loto-cam td .clnote{
font-size:14px;font-weight:800;color:#c62828;
}
/* ══ SITE FOOTER ══════════════════════════════════════════════ */
.site-footer{
background:#1a1a2e;
color:#bbb;
margin-top:32px;
font-size:13.5px;
}
.footer-main{
max-width:1100px;margin:0 auto;
padding:40px 20px 32px;
display:grid;
grid-template-columns:280px 1fr;
gap:40px;
}
@media(max-width:700px){.footer-main{grid-template-columns:1fr;gap:24px}}
/* Brand column */
.footer-brand{display:flex;flex-direction:column;gap:10px}
.footer-logo{
font-size:20px;font-weight:800;
color:#fff;text-decoration:none;letter-spacing:-.3px;
}
.footer-logo:hover{color:#ef5350}
.footer-tagline{color:#aaa;font-size:13px;line-height:1.6;margin:0}
.footer-disclaimer-inline{
font-size:11.5px;color:#888;line-height:1.5;
border-left:3px solid #c62828;padding-left:10px;margin:0;
}
/* Link columns */
.footer-cols{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}
@media(max-width:900px){.footer-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.footer-cols{grid-template-columns:1fr 1fr}}
.footer-col h4{
color:#fff;font-size:13px;font-weight:700;
text-transform:uppercase;letter-spacing:.6px;
margin:0 0 12px;padding-bottom:8px;
border-bottom:1px solid #2d2d4e;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.footer-col ul li a{
color:#999;font-size:13px;text-decoration:none;
transition:color .15s;line-height:1.4;
}
.footer-col ul li a:hover{color:#ef5350}
/* Bottom bar */
.footer-bottom{
background:#111125;
border-top:1px solid #2d2d4e;
}
.footer-bottom-inner{
max-width:1100px;margin:0 auto;
padding:14px 20px;
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:8px;
}
.footer-bottom p{margin:0;font-size:12px;color:#666}
.footer-bottom a{color:#888;text-decoration:none}
.footer-bottom a:hover{color:#ef5350}
.footer-legal-nav{display:flex;gap:16px}
.footer-legal-nav a{font-size:12px;color:#666;text-decoration:none}
.footer-legal-nav a:hover{color:#ef5350}
/* ══ LEGAL PAGES ══════════════════════════════════════════════ */
.legal-page{
background:#fff;border-radius:10px;
box-shadow:0 1px 4px rgba(0,0,0,.07);
overflow:hidden;
margin-bottom:24px;
}
/* Hero */
.legal-hero{
background:linear-gradient(135deg,#c62828,#b71c1c);
padding:24px 28px 22px;
color:#fff;
}
.legal-breadcrumb{
font-size:12px;color:rgba(255,255,255,.7);
margin-bottom:12px;display:flex;align-items:center;gap:6px;
}
.legal-breadcrumb a{color:rgba(255,255,255,.8);text-decoration:none}
.legal-breadcrumb a:hover{color:#fff}
.legal-sep{opacity:.5}
.legal-hero-inner{display:flex;align-items:center;gap:16px}
.legal-hero-icon{font-size:36px;line-height:1;flex-shrink:0}
.legal-hero-title{
font-size:22px;font-weight:800;color:#fff;
margin:0 0 4px;line-height:1.2;
}
.legal-hero-meta{font-size:12px;color:rgba(255,255,255,.7);margin:0}
/* Body layout */
.legal-body{
display:grid;
grid-template-columns:1fr 240px;
gap:0;
align-items:start;
}
@media(max-width:720px){.legal-body{grid-template-columns:1fr}}
/* Content prose */
.legal-content{
padding:28px 28px 24px;
font-size:14px;line-height:1.75;color:#333;
border-right:1px solid #f0f0f0;
}
@media(max-width:720px){.legal-content{border-right:none;padding:20px}}
.legal-content h2{
font-size:16px;font-weight:700;color:#c62828;
margin:24px 0 10px;padding-bottom:6px;
border-bottom:2px solid #ffcdd2;
}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{font-size:14px;font-weight:700;color:#333;margin:16px 0 8px}
.legal-content p{margin:0 0 12px}
.legal-content ul{margin:0 0 12px;padding-left:20px}
.legal-content ul li{margin-bottom:6px}
.legal-content a{color:#c62828;text-decoration:none;border-bottom:1px solid #ffcdd2;transition:border-color .15s}
.legal-content a:hover{border-bottom-color:#c62828}
.legal-content strong{color:#222}
/* Sidebar */
.legal-sidebar{padding:20px 16px;display:flex;flex-direction:column;gap:16px}
@media(max-width:720px){.legal-sidebar{display:none}}
.legal-nav-box-title{
font-size:11.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.6px;color:#999;margin:0 0 10px;
}
.legal-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.legal-nav-list li a{
display:flex;align-items:center;gap:8px;
padding:7px 10px;border-radius:6px;
font-size:13px;color:#555;text-decoration:none;
transition:all .15s;
}
.legal-nav-list li a:hover{background:#fff5f5;color:#c62828}
.legal-nav-list li.active a{
background:#fff5f5;color:#c62828;font-weight:700;
}
.legal-nav-icon{font-size:14px;flex-shrink:0}
.legal-disclaimer-box{
background:#fff3e0;border:1px solid #ffe0b2;
border-radius:8px;padding:12px;font-size:12px;
color:#e65100;line-height:1.5;
}
.legal-disclaimer-box p{margin:0}
/* Related pages grid */
.legal-related{
padding:20px 28px 24px;
border-top:1px solid #f5f5f5;
background:#fafafa;
}
.legal-related-title{
font-size:13px;font-weight:700;text-transform:uppercase;
letter-spacing:.5px;color:#999;margin:0 0 14px;
}
.legal-related-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:10px;
}
.legal-related-card{
display:flex;align-items:center;gap:10px;
padding:12px 14px;background:#fff;border-radius:8px;
border:1px solid #eee;text-decoration:none;
transition:all .2s;
}
.legal-related-card:hover{
border-color:#ffcdd2;background:#fff5f5;
transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.07);
}
.legal-related-card-icon{font-size:20px;flex-shrink:0}
.legal-related-card-title{font-size:12.5px;font-weight:600;color:#333;line-height:1.3}
/* ── Contact form ── */
.contact-form-wrap{
background:#f8f9fa;border:1px solid #e9ecef;
border-radius:10px;padding:24px;margin:20px 0;
}
.contact-form{display:flex;flex-direction:column;gap:16px}
.cf-group{display:flex;flex-direction:column;gap:6px}
.cf-group label{font-size:13px;font-weight:600;color:#333}
.cf-req{color:#c62828}
.cf-group input,.cf-group select,.cf-group textarea{
border:1px solid #ddd;border-radius:6px;
padding:9px 12px;font-size:13.5px;color:#333;
font-family:inherit;outline:none;
transition:border-color .15s;background:#fff;
}
.cf-group input:focus,.cf-group select:focus,.cf-group textarea:focus{
border-color:#c62828;box-shadow:0 0 0 3px rgba(198,40,40,.1);
}
.cf-group textarea{resize:vertical;min-height:120px}
.cf-note{
background:#fff3e0;border:1px solid #ffe0b2;
border-radius:6px;padding:12px;font-size:12.5px;color:#e65100;
}
.cf-note p{margin:0}
.cf-submit{
align-self:flex-start;
background:linear-gradient(135deg,#e53935,#c62828);
color:#fff;border:none;border-radius:6px;
padding:10px 28px;font-size:14px;font-weight:700;
cursor:pointer;letter-spacing:.3px;
box-shadow:0 3px 10px rgba(198,40,40,.35);
transition:all .2s;
}
.cf-submit:hover{
background:linear-gradient(135deg,#f44336,#d32f2f);
box-shadow:0 5px 16px rgba(198,40,40,.5);
transform:translateY(-1px);
}
.cf-success{
background:#e8f5e9;border:1px solid #a5d6a7;
border-radius:8px;padding:16px 20px;
color:#2e7d32;font-size:14px;font-weight:600;
margin-bottom:16px;
}
.cf-error-msg{
background:#ffebee;border:1px solid #ef9a9a;
border-radius:8px;padding:12px 16px;
color:#c62828;font-size:13.5px;margin-bottom:16px;
}
/* Ensure inputs are never hidden inside legal-content */
.legal-content input[type=text],
.legal-content input[type=email],
.legal-content select,
.legal-content textarea{
display:block;width:100%;box-sizing:border-box;
}
/* ── Proxy unavailable message ───────────────────────────────── */
.proxy-unavailable{
text-align:center;padding:40px 20px;
background:#fafafa;border-radius:8px;
border:1px solid #e0e0e0;margin:20px 0;
}
.proxy-unavailable .proxy-icon{
display:block;font-size:48px;margin-bottom:12px;
animation:spin 2s linear infinite;
}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.proxy-unavailable p{
color:#555;font-size:15px;margin:6px 0;
}
.proxy-retry a{
display:inline-block;margin-top:10px;
padding:8px 20px;border-radius:4px;
background:#d32f2f;color:#fff;font-size:13px;
text-decoration:none;font-weight:600;
}
.proxy-retry a:hover{background:#b71c1c;}
/* ── Proxy: hide source-site sidebar columns leaking into col-l ─ */
/* xosothantai.mobi embeds col-center (schedule widget) inside col-l */
.col-l .col-center,
.col-l .col-right,
.col-l .sidebar-schedule,
.col-l .box.sidebar-schedule { display: none !important; }
/* ── Proxy: thong-ke theo tuan/thang/nam (wide tables) ──────── */
/* Source table spans 14 cols (7 days × 2 years) — needs h-scroll */
.dbbyweek,
#monthly-result,
.col-l .box[style*="overflow"]{
overflow-x:auto !important;
-webkit-overflow-scrolling:touch;
}
.dbbyweek table,
#monthly-result table{
min-width:max-content;
}
/* Keep tab links horizontal */
.col-l .tab-panel.tab-auto{
display:flex;flex-wrap:wrap;gap:4px;
list-style:none;padding:0;margin:0 0 12px;
}
.col-l .tab-panel.tab-auto li a{
display:inline-block;padding:5px 12px;
border-radius:4px;font-size:13px;
background:#f5f5f5;color:#333;text-decoration:none;
border:1px solid #ddd;
}
.col-l .tab-panel.tab-auto li.active a,
.col-l .tab-panel.tab-auto li a:hover{
background:#d32f2f;color:#fff;border-color:#d32f2f;
}
/* Year select form */
.col-l .form-horizontal{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
margin-bottom:12px;
}
.col-l .form-control{
padding:5px 8px;border:1px solid #ccc;border-radius:4px;
font-size:13px;
}
.col-l .btn-danger,.col-l .btn-primary{
padding:5px 14px;border-radius:4px;
background:#d32f2f;color:#fff;border:none;
font-size:13px;cursor:pointer;
}
/* Weekly stats table — fixed layout, equal columns */
.dbbyweek table{
table-layout:fixed;
min-width:980px; /* 14 cols × 70px */
border-collapse:collapse;
}
.dbbyweek table th,
.dbbyweek table td{
width:70px;min-width:70px;max-width:70px;
padding:5px 2px;text-align:center;
border:1px solid #e0e0e0;vertical-align:middle;
}
.dbbyweek table th{
background:#d32f2f;color:#fff;font-weight:600;
font-size:12px;padding:7px 2px;
}
.dbbyweek table tr:nth-child(even) td{background:#fafafa;}
.dbbyweek table tr:hover td{background:#fff9f0;}
/* Separator between years */
.dbbyweek table .border-left-thick{border-left:3px solid #b71c1c;}
/* Number: show prominently */
.dbbyweek table .s14{font-size:13px;font-weight:700;line-height:1.3;}
.dbbyweek table .db-prefix{color:#333;}
.dbbyweek table .clred{color:#d32f2f;}
/* Date below number */
.dbbyweek table .small-desc{font-size:10px;color:#999;margin-top:2px;}
/* Hide Tổng/Đầu/Đuôi — too cluttered in compact view */
.dbbyweek table .tong,
.dbbyweek table .dau,
.dbbyweek table .duoi{display:none;}
/* sb-week-table (secondary summary table) */
.sb-week-table th,.sb-week-table td{
padding:4px 8px;border:1px solid #e0e0e0;
font-size:12px;text-align:center;
}
.sb-week-table th{background:#f5f5f5;font-weight:600;}
/* Blog single article */
.blog-single{
overflow:hidden;
border:1px solid #eee;
border-radius:10px;
background:#fff;
box-shadow:0 4px 18px rgba(0,0,0,.06);
}
.blog-single-head{
padding:26px 30px 22px;
border-bottom:1px solid #f1f1f1;
background:linear-gradient(180deg,#fff8f8 0%,#fff 100%);
}
.blog-kicker{
display:inline-flex;
align-items:center;
margin-bottom:10px;
padding:5px 10px;
border-radius:999px;
background:#fff1f1;
color:#c62828;
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.4px;
}
.blog-single-head h1{
margin:0;
color:#222;
font-size:32px;
line-height:1.22;
font-weight:800;
}
.blog-excerpt{
max-width:760px;
margin:12px 0 0;
color:#555;
font-size:16px;
line-height:1.65;
}
.blog-meta{
display:flex;
flex-wrap:wrap;
gap:8px 16px;
margin-top:15px;
color:#777;
font-size:12.5px;
}
.blog-meta span{
display:inline-flex;
align-items:center;
gap:6px;
}
.blog-meta span:before{
content:"";
width:6px;
height:6px;
border-radius:50%;
background:#d32f2f;
}
.blog-safety-note{
margin:22px 30px 0;
padding:12px 14px;
border-left:4px solid #f9a825;
border-radius:7px;
background:#fff9e6;
color:#6d4c00;
font-size:14px;
line-height:1.55;
}
.blog-content{
padding:8px 30px 32px;
color:#252525;
font-size:16px;
line-height:1.78;
}
.blog-content > h1:first-child{display:none;}
.blog-content h2{
position:relative;
margin:28px 0 12px;
padding-left:14px;
color:#222;
font-size:23px;
line-height:1.35;
font-weight:800;
}
.blog-content h2:before{
content:"";
position:absolute;
left:0;
top:.25em;
width:4px;
height:1.1em;
border-radius:4px;
background:#d32f2f;
}
.blog-content p{
margin:0 0 13px;
}
.blog-content a{
color:#c62828;
font-weight:700;
text-decoration:none;
border-bottom:1px solid rgba(198,40,40,.25);
}
.blog-content a:hover{
color:#8e0000;
border-bottom-color:#8e0000;
}
.blog-content strong{font-weight:800;color:#111;}
.blog-content ul,
.blog-content ol{
margin:12px 0 18px 22px;
padding:0;
}
.blog-content li{margin:7px 0;}
@media(max-width:720px){
.blog-single{border-radius:8px;}
.blog-single-head{padding:20px 18px 18px;}
.blog-single-head h1{font-size:25px;}
.blog-excerpt{font-size:14.5px;line-height:1.6;}
.blog-safety-note{margin:18px 18px 0;font-size:13px;}
.blog-content{padding:6px 18px 24px;font-size:15px;line-height:1.72;}
.blog-content h2{font-size:20px;margin-top:24px;}
}
|