/* Xo So Arxivy - giao dien theo mau cac trang KQXS truyen thong (do/vang) */
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f3f3f3; color: #222; font-size: 15px; }
a { color: #b30000; text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 10px; }

.topbar { background: #7a0000; color: #ffd9d9; font-size: 13px; }
.topbar-in { display: flex; justify-content: space-between; padding: 6px 10px; }
.topbar a { color: #ffcc00; }

.header { background: linear-gradient(180deg, #d80000, #a80000); color: #fff; }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 10px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; color: #fff; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 52px; height: 52px; border-radius: 12px; background: #ffcc00; color: #a80000; font-size: 32px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.logo-text { font-size: 26px; letter-spacing: .5px; line-height: 1.05; }
.logo-text b { color: #ffcc00; }
.logo-text small { display: block; font-size: 12.5px; color: #ffd9d9; letter-spacing: 0; }
.datebox { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.18); padding: 8px 10px; border-radius: 8px; }
.datebox label { font-size: 13px; }
.datebox input { padding: 6px; border: 0; border-radius: 5px; font-size: 14px; }
.datebox button, .sidebox button, .btn { background: #ffcc00; color: #7a0000; font-weight: 700; border: 0; padding: 7px 16px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.datebox button:hover, .sidebox button:hover, .btn:hover { background: #faad3a; }

.mainnav { background: #8f0000; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.nav-in { display: flex; flex-wrap: wrap; }
.mainnav a { color: #fff; font-weight: 700; font-size: 14.5px; padding: 11px 16px; }
.mainnav a:hover { background: #c00000; text-decoration: none; }
.mainnav a.active { background: #ffcc00; color: #7a0000; }

.layout { display: flex; gap: 16px; align-items: flex-start; padding-top: 16px; }
.content { flex: 1 1 0; min-width: 0; }
.sidebar { width: 300px; flex: 0 0 300px; }
@media (max-width: 900px) { .layout { flex-direction: column; } .sidebar { width: 100%; flex: none; } }

.card { background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.card > h2 { margin: 0; background: #c00000; color: #fff; font-size: 17px; padding: 10px 14px; text-transform: uppercase; }
.card > h2 .y { color: #ffcc00; }
.card .body { padding: 12px 14px; }
.loading, .notice { background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; padding: 18px; text-align: center; }
.notice.warn { background: #fff8e1; border-color: #faad3a; }
.err { color: #b30000; }

table.kq { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.kq th, table.kq td { border: 1px solid #ddd; padding: 6px 8px; text-align: center; }
table.kq th { background: #fcf0d8; color: #7a0000; }
table.kq th.prov { background: #c00000; color: #fff; font-size: 16px; }
table.kq td.gname { background: #fafafa; font-weight: 600; text-align: left; white-space: nowrap; width: 110px; }
table.kq td.num { letter-spacing: 1px; }
table.kq td.num span { display: inline-block; margin: 0 7px; }
table.kq tr.db td.num { color: #c00000; font-weight: 800; font-size: 19px; }
table.kq tr:nth-child(even) td.num { background: #fffdf5; }

.loto-box { margin-top: 10px; background: #fafafa; border: 1px solid #e5e5e5; border-radius: 6px; padding: 10px 12px; }
.loto-box h4 { margin: 0 0 8px; font-size: 14px; color: #7a0000; text-transform: uppercase; }
table.loto { width: 100%; border-collapse: collapse; font-size: 14px; }
table.loto th, table.loto td { border: 1px solid #e0e0e0; padding: 4px 6px; text-align: center; }
table.loto th { background: #8f0000; color: #fff; width: 34px; }
.multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

.sidebox { background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; margin-bottom: 16px; padding: 12px; }
.sidebox h3 { margin: -12px -12px 10px; background: #8f0000; color: #fff; font-size: 14.5px; padding: 9px 12px; border-radius: 8px 8px 0 0; text-transform: uppercase; }
.sidebox input, .sidebox select { width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; }
.sidebox button { width: 100%; }
#qcResult { margin-top: 8px; font-size: 14px; }
.prov-list { columns: 2; column-gap: 18px; font-size: 14px; }
.prov-list a { display: block; padding: 3px 0; }
.prov-list .grp { font-weight: 700; color: #7a0000; margin: 8px 0 2px; break-after: avoid; }
.sched div { padding: 4px 0; border-bottom: 1px dashed #eee; font-size: 14px; }
.sched div:last-child { border-bottom: 0; }
.win { background: #e8f5e9; border: 1px solid #66bb6a; color: #1b5e20; border-radius: 6px; padding: 8px 10px; }
.lose { background: #fafafa; border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; }

.prev-list { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prev-list th, .prev-list td { border: 1px solid #e3e3e3; padding: 6px 8px; }
.prev-list th { background: #fcf0d8; text-align: left; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: #fcf0d8; border: 1px solid #faad3a; border-radius: 20px; padding: 3px 10px; font-size: 13.5px; }
.chip b { color: #c00000; }
.big-form { display: grid; gap: 10px; max-width: 480px; }
.big-form input, .big-form select { padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; }
.footer { background: #4d0000; color: #f3d9d9; margin-top: 22px; padding: 22px 0 30px; font-size: 14px; }
.footer a { color: #ffcc00; }
.footer .dim { color: #c9a3a3; font-size: 13px; }