/* xosotuchon.net — bản làm lại 22/10/2026 (XSTC_VS 10): bớt loè, rõ số. Mobile first; máy tính (>= 900px) 2 cột.
   Nguyên tắc: nền xám rất nhạt, mặt thẻ trắng, chữ đen xám; ĐỎ thương hiệu chỉ cho logo, mục menu đang chọn, tiền, bóng số; VÀNG chỉ cho bóng đặc biệt.
   Không gradient, không bóng đổ. Màu riêng từng trò (.t-{trò}, cuối tệp) chỉ còn ở bóng số + vạch cạnh tiêu đề + tab kỳ đang xem.
   Biến: --do --do2 (màu trò / thương hiệu), --vang (bóng đặc biệt), --chu --mo (chữ), --nen (mặt thẻ) --nen2 (nền trang) --nen3 (ô nhạt) --hang (dòng chẵn) --o (ô nhập) --vien --vieno (viền). */
:root { --do: #c8102e; --do2: #9b0c23; --do3: #fdeef0; --vang: #f5b800; --vang2: #fff6d6; --vang3: #c99700; --chu-vang: #3a2b00;
	--chu: #1b1b1f; --mo: #6b6f76; --vien: #e4e6ea; --vieno: #c9ccd2; --nen: #fff; --nen2: #f4f5f7; --nen3: #f0f1f4; --hang: #fafafb; --o: #fff }
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; font: 15px/1.5 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--chu); background: var(--nen2); font-variant-numeric: tabular-nums }
a { color: var(--do2) }
img { max-width: 100%; height: auto }
.khung { max-width: 1120px; margin: 0 auto; padding: 0 12px }
:focus-visible { outline: 2px solid var(--do); outline-offset: 2px }

/* đầu trang: trắng, vạch đỏ mảnh phía trên, menu chữ gạch chân */
.dau { background: var(--nen); border-top: 3px solid var(--do); border-bottom: 1px solid var(--vien) }
.dau .khung { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px }
.logo { display: flex; align-items: center; gap: 9px; color: var(--chu); text-decoration: none }
.logo svg { flex: none; width: 38px; height: 38px }
.logo b { display: block; font-size: 18px; line-height: 1.1; letter-spacing: .2px; color: var(--do) }
.logo i { display: block; font-style: normal; font-size: 12px; color: var(--mo) }
.logo i em { font-style: normal; color: var(--chu) }
.dau .gio { margin-left: auto; font-size: 12px; text-align: right; color: var(--mo); line-height: 1.3 }
.menu { background: var(--nen); border-bottom: 1px solid var(--vien) }
.menu .khung { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 4px }
.menu .khung::-webkit-scrollbar { display: none }
.menu a { color: var(--chu); text-decoration: none; font-weight: 600; font-size: 14px; padding: 11px 10px; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px }
.menu a.on { color: var(--do); border-bottom-color: var(--do) }
.menu a:hover { color: var(--do) }

/* bố cục */
.than { display: block; padding-top: 14px; padding-bottom: 24px }
.phai { margin-top: 14px }
h1 { font-size: 20px; line-height: 1.3; margin: 2px 0 12px; color: var(--chu); font-weight: 700 }

/* thẻ kết quả 1 trò: viền 1px, không bóng; vạch màu trò bên trái tiêu đề */
.the { background: var(--nen); border: 1px solid var(--vien); border-radius: 12px; overflow: hidden; margin-bottom: 14px }
.the h2 { margin: 0; padding: 12px 14px 2px; font-size: 17px; line-height: 1.3; color: var(--chu); font-weight: 700 }
.the h2 a { color: inherit; text-decoration: none }
.ky { padding: 0 14px; font-size: 13px; color: var(--mo) }
.dauthe { display: flex; align-items: center; gap: 12px; padding: 12px 14px 4px }
.dauthe img { height: 40px; width: auto; flex: none }
.dauthe > div { min-width: 0; border-left: 3px solid var(--do); padding-left: 10px }
.dauthe h2 { padding: 0 }
.dauthe .ky { padding: 0 }

/* Jackpot kỳ tới: một hàng nhãn trái – số tiền phải; đếm ngược chữ nhỏ dưới */
.jp { padding: 12px 14px; border-bottom: 1px solid var(--vien); background: var(--hang) }
.jp small { display: block; font-size: 12px; color: var(--mo) }
.jp b { display: block; font-size: 28px; line-height: 1.15; color: var(--do); font-weight: 800; letter-spacing: -.3px; margin-top: 2px }
.dem { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--mo) }
.dem span { font-weight: 700; color: var(--chu); font-size: 18px }
.dem em { font-style: normal; font-size: 11px; font-weight: normal; color: var(--mo); margin-left: 2px }

/* bóng số: màu đặc của trò, chữ trắng; đặc biệt vàng chữ đậm */
.bong { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px }
.bong span { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; background: var(--do); color: #fff }
.bong span.db { background: var(--vang); color: var(--chu-vang) }
.bong.nho span { width: 32px; height: 32px; font-size: 15px }

/* bảng giải: đầu bảng chữ xám nhỏ, kẻ mảnh, tiền đỏ đậm */
.bang { width: calc(100% - 28px); margin: 2px 14px 14px; border-collapse: collapse; font-size: 14px }
.bang th { color: var(--mo); font-weight: 600; font-size: 12px; text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--vien); white-space: nowrap }
.bang td { padding: 8px 6px; border-bottom: 1px solid var(--vien); text-align: left; white-space: nowrap; vertical-align: middle }
.bang tr:last-child td { border-bottom: 0 }
.bang td small { white-space: normal; color: var(--mo) }
.bang .tien { font-weight: 700; color: var(--do); text-align: right }
.bang th:last-child, .bang td:last-child { text-align: right }
.bang td:first-child { font-weight: 600 }

/* tab các kỳ gần đây: chữ xám, kỳ đang xem đỏ gạch chân */
.tab { display: flex; gap: 2px; padding: 0 8px 4px; overflow-x: auto; border-top: 1px solid var(--vien) }
.tab a { flex: 1 0 auto; text-align: center; font-size: 13px; padding: 10px 8px 8px; color: var(--mo); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap }
.tab a.on { color: var(--do); border-bottom-color: var(--do); font-weight: 700 }
.xemthem { display: block; text-align: center; padding: 10px; border-top: 1px solid var(--vien); text-decoration: none; font-weight: 600; font-size: 14px; color: var(--do2) }
.ghichu { font-size: 12.5px; color: var(--mo); padding: 0 14px 12px }

/* Max 3D / Max 3D Pro: bộ 3 số dạng viên vuông nhẹ */
.b3 { display: flex; flex-wrap: wrap; gap: 5px }
.b3 span { background: var(--nen3); border-radius: 6px; padding: 3px 7px; font-weight: 700; font-size: 16px; letter-spacing: .5px; color: var(--chu); min-width: 44px; text-align: center }
.b3.gdb span { background: var(--do); color: #fff }

/* Keno / Bingo18 */
.keno { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; padding: 12px 14px; max-width: 520px }
.keno span { aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: var(--do); color: #fff }
.chip { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; font-size: 13px; color: var(--mo) }
.chip span { background: var(--nen3); border-radius: 6px; padding: 4px 10px }
.chip b { color: var(--chu); margin-left: 2px }

/* cột phải */
.hop { background: var(--nen); border: 1px solid var(--vien); border-radius: 12px; margin-bottom: 14px; overflow: hidden }
.hop h3 { margin: 0; font-size: 15px; padding: 12px 14px 6px; color: var(--chu) }
.hop ul { list-style: none; margin: 0; padding: 0 14px 10px }
.hop li { padding: 8px 0; border-bottom: 1px solid var(--vien); font-size: 14px }
.hop li:last-child { border-bottom: 0 }
.hop a { text-decoration: none }
.hop form { display: grid; gap: 8px; padding: 6px 14px 14px }
.hop select, .hop input { width: 100%; height: 40px; border: 1px solid var(--vieno); border-radius: 8px; padding: 0 10px; font-size: 15px; background: var(--o); color: var(--chu) }
.nut { display: inline-block; background: var(--do); color: #fff !important; border: 0; border-radius: 8px; height: 42px; padding: 0 16px; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; line-height: 42px; text-align: center }
.nut:hover { background: var(--do2) }
.nut.vang { background: var(--vang); color: var(--chu-vang) !important }

/* chân trang */
.chan { background: var(--nen); border-top: 1px solid var(--vien); color: var(--mo); font-size: 13px; padding: 18px 0 24px }
.chan a { color: var(--do2) }
.chan p { margin: 4px 0 }
.chan b { color: var(--chu) }

/* nút sáng / tối */
.doimau { margin-left: 6px; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--vien); background: var(--nen3); color: var(--chu); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 }
.doimau svg { width: 18px; height: 18px }
.doimau .mt { display: none }
[data-theme="dark"] .doimau .mt { display: block }
[data-theme="dark"] .doimau .ms { display: none }

/* Dò vé / thống kê / giới thiệu / tin — form chung .fdove trong .the */
.fdove { display: grid; gap: 12px; padding: 14px }
.fdove .hang { display: grid; gap: 5px }
.fdove .hang.doi { grid-template-columns: 1fr 1fr; gap: 12px }
.fdove .hang.doi > div { display: grid; gap: 5px }
.fdove label { font-size: 13px; color: var(--mo); font-weight: 600 }
.fdove label small { font-weight: normal }
.fdove select, .fdove input { width: 100%; height: 44px; border: 1px solid var(--vieno); border-radius: 8px; padding: 0 12px; font-size: 16px; background: var(--o); color: var(--chu) }
.fdove input:focus, .fdove select:focus { outline: 2px solid var(--do); outline-offset: 0; border-color: var(--do) }
.fdove .nutdv .nut { width: 100%; height: 44px; line-height: 44px; font-size: 16px }
.fdove .kyhai { display: grid; grid-template-columns: 1fr; gap: 8px }
.fdove .kyhai:has(input) { grid-template-columns: 1fr 130px }
.baoloi { color: var(--do2); font-size: 13px; margin-top: 2px }
.fdove input[aria-invalid="true"] { border-color: var(--do); outline: 2px solid var(--do) }
.bong span.tr, .keno span.tr { box-shadow: 0 0 0 3px var(--nen), 0 0 0 6px var(--vang) }
.b3 span.tr { box-shadow: 0 0 0 2px var(--vang) }
.dvkq { padding: 14px }
.dvkq h2 { padding: 0 0 4px; font-size: 18px }
.dvkq.co h2 { color: #0f7a35 }
.dvkq.khong h2 { color: var(--mo) }
.dvkq.loi { border-color: #efbfc5; background: var(--do3); color: var(--do2) }
.dvkq.loi p { margin: 0 }
.dvkq .ky { padding: 0 0 8px }
.dvkq .bang { width: 100%; margin: 6px 0 }
.dvkq .bang td:nth-child(2) { white-space: normal }
.dvkq tr.trung td { background: var(--vang2) }
.dvkq tr.tongcong td { border-top: 2px solid var(--chu); font-weight: 700 }
.dvkq .ghichu { padding: 8px 0 0 }

/* khối văn bản (giới thiệu, hướng dẫn, thống kê, bài tin) */
.vanban { padding: 14px 16px; line-height: 1.6 }
.vanban h2 { padding: 0; margin: 0 0 8px; font-size: 17px }
.vanban h2 + .nd > p:first-child, .vanban > p:first-of-type { margin-top: 0 }
.vanban ol, .vanban ul { padding-left: 22px; margin: 6px 0 }
.vanban li { margin: 5px 0 }
.vanban .bang { width: 100%; margin: 8px 0 }
.vanban .bang td:first-child { font-weight: 400 }
.bang.trai td, .bang.trai th { white-space: normal; text-align: left }
.bang.trai td.tien { text-align: left }
.bang td.ngay { white-space: nowrap }
.bang td.ngay small { display: block; font-weight: normal; color: var(--mo); font-size: 12px }
.cuon { overflow-x: auto }
.nowrap { white-space: nowrap }
.sotk { color: var(--do); font-size: 1.05em }
.vuot { color: var(--do); font-size: 12px }
.vanban .ghichu { padding: 0; margin: 6px 0 }
.vanban.gt .dauthe { padding: 0 0 12px; align-items: flex-start }
.vanban.gt .dauthe img { height: 52px }
.vanban.gt .dauthe > div, .vanban.gt .dauthe p { border-left: 0; padding-left: 0 }
.vanban .tomtat { margin: 0; font-size: 15px }
.duongdan { font-size: 13px; color: var(--mo); margin: 2px 0 8px }
.duongdan a { text-decoration: none }
.tabtk { display: flex; gap: 2px; overflow-x: auto; margin: 0 0 12px; border-bottom: 1px solid var(--vien) }
.tabtk a { flex: none; padding: 9px 12px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--mo); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap }
.tabtk a.on { color: var(--do); border-bottom-color: var(--do) }
.xemthemtk { font-size: 14px; line-height: 1.8; color: var(--mo) }
.tansuat { list-style: none; margin: 6px 0; padding: 0 }
.tansuat li { display: grid; grid-template-columns: 44px 1fr 120px; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--vien); font-size: 14px }
.tansuat .so a { text-decoration: none }
.tansuat .cot { height: 10px; background: var(--nen3); border-radius: 5px; overflow: hidden }
.tansuat .cot i { display: block; height: 100%; background: var(--do); border-radius: 5px }
.tansuat .lan { text-align: right; white-space: nowrap }
.tansuat .lan small { color: var(--mo) }

/* tin tức */
.dstin { list-style: none; margin: 0; padding: 0 }
.dstin li { padding: 8px 0; border-bottom: 1px solid var(--vien) }
.dstin li small { color: var(--mo); margin-left: 6px }
.dstin.lon li { padding: 0; margin-bottom: 10px; border: 1px solid var(--vien) }
.dstin.lon a { display: flex; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--chu) }
.dstin.lon img { width: 112px; height: 70px; object-fit: cover; border-radius: 8px; flex: none }
.dstin.lon span { display: grid; gap: 2px; min-width: 0 }
.dstin.lon b { font-size: 15px }
.dstin.lon small { color: var(--mo) }
.dstin.lon em { font-style: normal; font-size: 13px; color: var(--mo) }
.bai h1 { margin: 0 0 4px }
.bai .ky { padding: 0 0 8px }
.bai .sapo { font-weight: 600 }
.bai .nd img { max-width: 100%; height: auto }
.bai .nd table { max-width: 100% }
.phantrang { padding: 0; margin: 10px 0; border-top: 0 }
.phantrang a { flex: none; min-width: 36px }

/* Trực tiếp */
.ttchu { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--nen); border: 1px solid var(--vien); font-size: 14px; color: var(--mo) }
.ttchu .cham { width: 10px; height: 10px; border-radius: 50%; background: var(--vieno); flex: none }
.ttchu.run { color: var(--chu) }
.ttchu.run .cham { background: var(--do); animation: ttnhay 1.2s infinite }
.ttchu.done .cham { background: #0f7a35 }
.ttchu.loi { color: var(--do2) }
@keyframes ttnhay { 0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, .5) } 70% { box-shadow: 0 0 0 8px rgba(200, 16, 46, 0) } 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0) } }
.tt .dauthe { position: relative; padding-right: 110px }
.tt .trangthai { position: absolute; right: 14px; top: 14px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 6px; background: var(--nen3); color: var(--mo) }
.tt .trangthai.dang { background: var(--do); color: #fff }
.tt .trangthai.xong { background: #e6f4ea; color: #0f7a35 }
.tt .trangthai.cho { background: var(--vang2); color: var(--chu-vang) }
.tt .noidung { min-height: 60px }
.tt .noidung .bang { width: calc(100% - 28px); margin: 0 14px 14px }
.bong span.cho, .keno span.cho { background: var(--nen3); box-shadow: inset 0 0 0 2px var(--vien); color: transparent }
.b3 span.cho { background: var(--nen3); color: transparent }
.bong span.quay, .keno span.quay, .b3 span.quay { background: var(--vang); color: var(--chu-vang) }
.tt.moi { border-color: var(--do) }
.tt .sltrung { margin: 0 14px 14px; font-size: 13px }
.tt .sltrung summary { cursor: pointer; color: var(--do2); font-weight: 600; padding: 4px 0 }
.tt .sltrung .bang { width: 100%; margin: 6px 0 0; font-size: 12px }
.tt .sltrung .bang td, .tt .sltrung .bang th { padding: 4px 3px; text-align: center }
.vanban li.mo { color: var(--mo) }

/* máy tính */
@media (min-width: 900px) {
	.than { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; padding-top: 18px }
	.phai { margin-top: 0; position: sticky; top: 12px }
	.bong span { width: 46px; height: 46px; font-size: 20px }
	.b3 span { font-size: 17px; padding: 3px 9px }
	.jp { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap }
	.jp small, .jp b { display: inline-block }
	.jp b { font-size: 30px }
	.dem { margin-top: 0 }
	.dauthe img { height: 48px }
	.logo b { font-size: 20px }
	.menu a { font-size: 15px; padding: 12px 14px }
	h1 { font-size: 24px }
	.fdove { grid-template-columns: 1fr 1fr; align-items: end }
	.fdove .hang.doi { grid-column: span 2 }
	.fdove .nutdv { grid-column: span 2 }
	.fdove .nutdv .nut { width: auto; min-width: 200px; justify-self: start }
	.tansuat { columns: 2; column-gap: 28px }
	.tansuat li { break-inside: avoid }
}
@media (prefers-reduced-motion: reduce) { .ttchu.run .cham, .tt .trangthai.dang { animation: none } }

/* Màu riêng từng trò theo logo Vietlott: chỉ --do / --do2 (bóng số, vạch tiêu đề, tab kỳ đang xem, tiền) và --vang (bóng đặc biệt). Đầu trang / menu giữ đỏ thương hiệu. */
.t-mega-645  { --do: #c8102e; --do2: #9b0c23 }
.t-power-655 { --do: #b4771e; --do2: #8a5a12; --vang: #f5b800 }
.t-lotto-535 { --do: #0f7a35; --do2: #0a5a27; --vang: #f5b800 }
.t-max3d     { --do: #b5156e; --do2: #860c55 }
.t-max3d-pro { --do: #7a1f5c; --do2: #4c0d30 }
.t-keno      { --do: #d9541a; --do2: #a63c0e }
.t-bingo18   { --do: #cf7a0f; --do2: #a05c08 }

/* Giao diện tối */
[data-theme="dark"] { --chu: #ececef; --mo: #a0a4ab; --vien: #2e3036; --vieno: #4a4d55; --nen: #1b1c20; --nen2: #121316; --nen3: #26282e; --hang: #202227; --o: #26282e; --do3: #3a1416; --vang2: #3a2f10; --chu-vang: #ffd27a; color-scheme: dark }
[data-theme="dark"] a, [data-theme="dark"] .bang .tien, [data-theme="dark"] .jp b, [data-theme="dark"] .sotk, [data-theme="dark"] .vuot, [data-theme="dark"] .xemthem, [data-theme="dark"] .menu a.on, [data-theme="dark"] .tab a.on, [data-theme="dark"] .tabtk a.on { color: color-mix(in srgb, var(--do) 60%, #fff) }
[data-theme="dark"] .logo b { color: color-mix(in srgb, var(--do) 60%, #fff) }
[data-theme="dark"] .bong span.db, [data-theme="dark"] .bong span.quay, [data-theme="dark"] .keno span.quay, [data-theme="dark"] .b3 span.quay { color: #2a2000 }
[data-theme="dark"] .dauthe img { filter: drop-shadow(0 0 1px #fff8) }
[data-theme="dark"] .dvkq.co h2 { color: #6fd392 }
[data-theme="dark"] .dvkq.loi { color: #ffb3b7; border-color: #6b2226 }
[data-theme="dark"] .tt .trangthai.xong { background: #143d22; color: #8fe0ab }
[data-theme="dark"] .nut { color: #fff !important }

/* chỉnh sau khi xem ảnh 375px (22/10/2026): bảng 4 cột không tràn thẻ (cột Trùng xuống dòng được, chữ 13.5px điện thoại), tab kỳ không hiện thanh cuộn */
.bang td:nth-child(2) { white-space: normal }
@media (max-width: 599px) { .bang { font-size: 13.5px } .bang td, .bang th { padding-left: 4px; padding-right: 4px } .bang .tien { font-size: 14px } }
.tab, .tabtk, .menu .khung { scrollbar-width: none }
.tab::-webkit-scrollbar, .tabtk::-webkit-scrollbar { display: none }

/* Power 6/55: 7 bóng vừa 1 hàng trên điện thoại 375px (22/10/2026) */
@media (max-width: 599px) { .t-power-655 .bong { gap: 6px } .t-power-655 .bong span { width: 38px; height: 38px; font-size: 17px } }

/* Menu điện thoại cuộn ngang (22/10/2026): 2 đầu có dải mờ + mũi tên ‹ › báo còn mục phía đó; JS (site.js menuCuon) gắn class .con-trai / .con-phai theo vị trí cuộn */
.menu { position: relative }
.menu::before, .menu::after { content: ''; position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1;
	background: linear-gradient(90deg, var(--nen) 35%, transparent); display: flex; align-items: center; justify-content: flex-start; font-size: 20px; line-height: 1; color: var(--do); font-weight: 700 }
.menu::before { left: 0; content: '‹'; padding-left: 4px }
.menu::after { right: 0; content: '›'; justify-content: flex-end; padding-right: 4px; background: linear-gradient(270deg, var(--nen) 35%, transparent) }
.menu.con-trai::before, .menu.con-phai::after { opacity: 1 }
@media (prefers-reduced-motion: reduce) { .menu::before, .menu::after { transition: none } }