@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) ─────── */
.mo-thuong-ngay{padding:10px 14px}
.mo-thuong-ngay .regional-title{background:none;color:#c62828;padding:0 0 8px 0;font-size:13px;border-radius:0}
table.table-fixed{width:100%;border-collapse:collapse}
table.table-fixed td{padding:5px 8px;font-size:13px;border:1px solid #f0f0f0}
table.table-fixed a{color:#1565c0;font-weight:600}
table.table-fixed a:hover{color:#c62828;text-decoration:underline}
/* ── 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-mb{background:#e3f2fd;color:#1565c0}
.sb-mt{background:#e8f5e9;color:#2e7d32}
.sb-mn{background:#fff3e0;color:#e65100}
.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}
}
/* ── 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 */
.three-city{display:flex;gap:8px;margin-bottom:6px;align-items:flex-start}
.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;}
}
|