/*
Theme Name: Xổ Số 360
Theme URI: https://xoso360.com/
Author: VNSecurity
Description: Theme WordPress kết quả xổ số 3 miền (XSMB, XSMT, XSMN), Vietlott, thống kê, soi cầu, quay thử, dò vé số. Tự động lấy dữ liệu KQXS từ API JSON theo ID đài và cache hàng ngày.
Version: 1.0.0
Requires at least: 5.5
Requires PHP: 7.2
License: GPL-2.0-or-later
Text Domain: xoso360
*/

/* ===== Xổ Số 360 - KQXS 3 miền ===== */
:root{
  --red:#e01933;
  --red-dark:#b3122a;
  --red-light:#fdecef;
  --blue:#0b5394;
  --green:#1a7f37;
  --gold:#ffb524;
  --text:#1f1f1f;
  --muted:#666;
  --border:#e6e6e6;
  --bg:#f1f3f6;
  --white:#fff;
  --radius:8px;
  --shadow:0 2px 8px rgba(0,0,0,.07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;
  font-size:14px;color:var(--text);background:var(--bg);line-height:1.5;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.container{max-width:1200px;margin:0 auto;padding:0 12px}
.row{display:flex;gap:16px;align-items:flex-start}
.main-col{flex:1 1 0;min-width:0}
.side-col{flex:0 0 320px;width:320px}

/* ===== Top bar ===== */
.topbar{background:var(--red-dark);color:#fff;font-size:12px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:34px}
.topbar a{color:#ffe5ea}
.topbar .date{font-weight:600}

/* ===== Header ===== */
.header{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff}
.header .container{display:flex;align-items:center;gap:20px;padding:14px 12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo .mark{
  width:52px;height:52px;border-radius:50%;background:#fff;color:var(--red);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);flex-direction:column;line-height:1;
}
.logo .mark small{font-size:9px;font-weight:700;letter-spacing:1px}
.logo .name{font-size:24px;font-weight:800;letter-spacing:.5px}
.logo .name span{display:block;font-size:11px;font-weight:500;opacity:.9;letter-spacing:2px}
.header .search{margin-left:auto;display:flex;background:#fff;border-radius:30px;overflow:hidden;width:280px;max-width:40%}
.header .search input{border:0;padding:9px 14px;flex:1;outline:none;font-size:13px}
.header .search button{border:0;background:var(--gold);color:#fff;padding:0 16px;cursor:pointer;font-weight:600}

/* ===== Nav ===== */
.nav{background:var(--red-dark);position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.nav li{margin:0}
.nav a{
  display:block;color:#fff;padding:12px 16px;font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:.3px;border-right:1px solid rgba(255,255,255,.12);
}
.nav a:hover,.nav a.active,.nav .current-menu-item>a{background:var(--gold);color:#fff;text-decoration:none}
.nav .menu-toggle{display:none}

/* ===== Layout body ===== */
.page{padding:16px 0 40px}

/* ===== Card / Block ===== */
.block{background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;box-shadow:var(--shadow);overflow:hidden}
.block-head{
  background:var(--red);color:#fff;padding:9px 14px;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;
}
.block-head .sub{font-size:11px;font-weight:500;opacity:.92;text-transform:none}
.block-head a{color:#fff}
.block-body{padding:12px 14px}

/* ===== KQXS table (Miền Bắc) ===== */
.kqxs-mb{width:100%;border-collapse:collapse;text-align:center;font-size:14px}
.kqxs-mb td{border:1px solid var(--border);padding:7px 4px;vertical-align:middle}
.kqxs-mb .lbl{background:#fafafa;font-weight:700;color:var(--red-dark);width:90px;text-align:center}
.kqxs-mb .nums{font-weight:700;letter-spacing:1px;font-size:16px}
.kqxs-mb .nums span{display:inline-block;margin:0 9px}
.kqxs-mb .db{color:var(--red);font-size:28px;font-weight:800}
.kqxs-mb .g7 span{color:var(--blue);font-weight:700}
.kqxs-mb .twocol span{min-width:46px}

/* loto / đầu đuôi */
.loto-wrap{display:flex;gap:0;margin-top:0}
.loto-table{width:100%;border-collapse:collapse;text-align:center;font-size:13px}
.loto-table th{background:var(--red);color:#fff;padding:6px;font-weight:700}
.loto-table td{border:1px solid var(--border);padding:5px 6px}
.loto-table td.head{background:#fafafa;font-weight:800;color:var(--red-dark);width:46px}
.loto-table td.vals b{color:var(--text);font-weight:700;margin-right:6px}

/* ===== KQXS Miền Nam/Trung (nhiều tỉnh) ===== */
.kqxs-mn{width:100%;border-collapse:collapse;text-align:center;font-size:13px;table-layout:fixed}
.kqxs-mn th,.kqxs-mn td{border:1px solid var(--border);padding:5px 3px}
.kqxs-mn thead th{background:var(--red);color:#fff;font-size:13px;padding:8px 4px}
.kqxs-mn thead th small{display:block;font-weight:400;font-size:11px;opacity:.9}
.kqxs-mn thead th a{color:#fff}
.kqxs-mn .lbl{background:#fafafa;font-weight:700;color:var(--red-dark);width:44px;text-align:center}
.kqxs-mn .db b{color:var(--red);font-size:17px;font-weight:800}
.kqxs-mn .g7-mn b{color:var(--blue)}
.kqxs-mn td b{font-weight:700}

/* ===== Sidebar widgets ===== */
.widget{background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;box-shadow:var(--shadow);overflow:hidden}
.widget-head,.widget-title{background:var(--blue);color:#fff;padding:8px 12px;font-weight:700;font-size:13px;text-transform:uppercase;margin:0}
.widget-body{padding:10px 12px}
.sched-table{width:100%;border-collapse:collapse;font-size:13px}
.sched-table td{border-bottom:1px solid #eee;padding:7px 4px}
.sched-table td:first-child{font-weight:700;color:var(--red-dark);width:70px}
.link-list{list-style:none;margin:0;padding:0}
.link-list li{border-bottom:1px solid #eee;padding:7px 2px}
.link-list li:last-child{border:0}
.link-list a::before{content:"›";color:var(--red);font-weight:800;margin-right:7px}
.banner{display:block;background:linear-gradient(135deg,var(--gold),#e8890b);color:#fff;text-align:center;padding:22px 12px;border-radius:var(--radius);font-weight:800;font-size:16px;margin-bottom:16px}
.quickball{display:flex;flex-wrap:wrap;gap:6px}
.quickball span{
  width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
}

/* ===== Tabs ===== */
.tabs{display:flex;background:#fafafa;border-bottom:1px solid var(--border)}
.tabs button{
  border:0;background:none;padding:9px 14px;cursor:pointer;font-weight:600;font-size:13px;
  color:var(--muted);border-bottom:3px solid transparent;
}
.tabs button.active{color:var(--red);border-bottom-color:var(--red)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ===== Stat ticker ===== */
.ticker{background:#fffbe6;border:1px solid #f5e3a3;border-radius:var(--radius);padding:9px 14px;margin-bottom:16px;font-size:13px}
.ticker b{color:var(--red)}
.notice{background:#fdecef;border:1px solid #f3c0c8;color:var(--red-dark);border-radius:var(--radius);padding:10px 14px;margin-bottom:16px;font-size:13px}

/* ===== Footer ===== */
.footer{background:#222;color:#bbb;padding:30px 0;font-size:13px;margin-top:20px}
.footer .cols{display:flex;gap:30px;flex-wrap:wrap}
.footer .col{flex:1 1 200px}
.footer h4{color:#fff;font-size:14px;margin:0 0 12px;text-transform:uppercase}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{padding:4px 0}
.footer a{color:#bbb}
.footer a:hover{color:#fff}
.footer .copy{border-top:1px solid #444;margin-top:20px;padding-top:16px;text-align:center;color:#888}
.disclaimer{font-size:12px;color:#999;line-height:1.6}

/* ===== Breadcrumb + page title ===== */
.breadcrumb{font-size:12px;color:var(--muted);margin:0 0 12px}
.breadcrumb a{color:var(--blue)}
.breadcrumb span{margin:0 6px;color:#bbb}
.pagetitle{background:#fff;border:1px solid var(--border);border-left:4px solid var(--red);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;box-shadow:var(--shadow)}
.pagetitle h1{margin:0;font-size:20px;color:var(--red-dark)}
.pagetitle p{margin:6px 0 0;font-size:13px;color:var(--muted)}

/* ===== Date picker bar ===== */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:16px;box-shadow:var(--shadow);font-size:13px}
.toolbar label{font-weight:600;color:var(--red-dark)}
.toolbar input,.toolbar select{padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px}
.btn{display:inline-block;border:0;border-radius:6px;padding:8px 18px;font-weight:700;font-size:13px;cursor:pointer;background:var(--red);color:#fff}
.btn:hover{background:var(--red-dark);text-decoration:none;color:#fff}
.btn.gold{background:var(--gold);color:#222}
.btn.blue{background:var(--blue)}

/* ===== History list (các ngày trước) ===== */
.history-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;background:#fff}
.history-item .h-head{background:#fafafa;border-bottom:1px solid var(--border);padding:8px 12px;font-weight:700;color:var(--red-dark);display:flex;justify-content:space-between}
.history-item .h-head a{font-weight:500;font-size:12px}
.mini-kq{padding:8px 12px;font-size:13px;line-height:1.9}
.mini-kq b{color:var(--red);font-weight:700}
.mini-kq .lb{display:inline-block;min-width:74px;color:var(--muted);font-weight:600}

/* ===== Stat tables ===== */
.stat-table{width:100%;border-collapse:collapse;font-size:13px;text-align:center}
.stat-table th{background:var(--blue);color:#fff;padding:8px 6px}
.stat-table td{border:1px solid var(--border);padding:7px 6px}
.stat-table td:first-child{font-weight:700;color:var(--red-dark)}
.stat-table .hot{color:var(--red);font-weight:800}
.stat-table tr:nth-child(even),.stat-table tbody tr:nth-child(even){background:#fafafa}
.pill{display:inline-block;min-width:30px;padding:3px 6px;margin:2px;border-radius:5px;background:var(--red-light);color:var(--red-dark);font-weight:700;font-size:13px}
.pill.gan{background:#eef4fb;color:var(--blue)}

/* ===== Soi cầu cards ===== */
.cau-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cau-card{border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:#fff;text-align:center}
.cau-card .t{font-weight:700;color:var(--red-dark);margin-bottom:8px;font-size:13px}
.cau-card .big{font-size:30px;font-weight:800;color:var(--red);letter-spacing:3px}
.cau-card .sub{font-size:12px;color:var(--muted);margin-top:6px}

/* ===== Quay thử ===== */
.qt-stage{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;border-radius:var(--radius);padding:26px 16px;text-align:center;margin-bottom:16px}
.qt-stage .qt-label{font-size:13px;opacity:.8;text-transform:uppercase;letter-spacing:1px}
.qt-balls{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:16px 0}
.qt-ball{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffe08a,var(--gold));color:#7a4a00;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;box-shadow:0 4px 10px rgba(0,0,0,.3)}

/* ===== Dò vé số ===== */
.dove-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:16px}
.dove-form .field{margin-bottom:12px}
.dove-form label{display:block;font-weight:600;margin-bottom:5px;color:var(--red-dark)}
.dove-form input,.dove-form select{width:100%;padding:10px;border:1px solid var(--border);border-radius:6px;font-size:15px}
.dove-form .num-input{font-size:22px;letter-spacing:6px;text-align:center;font-weight:700}
.dove-result{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.dove-result .win{background:#e9f9ef;border:1px solid #b6e6c6;color:var(--green);padding:12px;border-radius:6px;font-weight:700}
.dove-result .lose{background:#fdecef;border:1px solid #f3c0c8;color:var(--red);padding:12px;border-radius:6px;font-weight:700}

/* ===== WordPress core ===== */
.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.sticky,.bypostauthor{}

/* ===== Responsive ===== */
@media(max-width:980px){
  .row{flex-direction:column}
  .side-col{width:100%;flex-basis:auto}
}
@media(max-width:680px){
  .header .search{display:none}
  .nav ul{display:none;flex-direction:column}
  .nav ul.open{display:flex}
  .nav .menu-toggle{display:block;color:#fff;background:none;border:0;padding:12px 16px;font-size:15px;font-weight:700;cursor:pointer}
  .logo .name{font-size:20px}
  .kqxs-mb .db{font-size:18px}
  .kqxs-mb .nums span{margin:0 4px}
  .cau-grid{grid-template-columns:1fr}
  .qt-ball{width:46px;height:46px;font-size:19px}
}