/* xosohomnay.com — CSS riêng cho thống kê / giải mã bộ số / phân tích dưới kết quả (23/10/2026). Chỉ nạp ở trang cần ($cssThem = 'tk' trong khung/dau.php). Biến màu từ site.css. */
/* form thống kê */
.ftk { display: grid; gap: 12px; padding: 14px }
.ftk .hang { display: grid; gap: 5px }
.ftk .hang.doi { grid-template-columns: 1fr 1fr; gap: 12px }
.ftk .hang.doi > div { display: grid; gap: 5px }
.ftk label { font-size: 13px; color: var(--mo); font-weight: 600 }
.ftk select, .ftk 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) }
.ftk .nutdv .nut { width: 100%; height: 44px; line-height: 44px; font-size: 16px }
.tabtk { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; border-bottom: 1px solid var(--vien) }
.tabtk::-webkit-scrollbar { display: none }
.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(--chinh2); border-bottom-color: var(--chinh2) }
/* khối thống kê */
.tk h3 { font-size: 15px; margin: 12px 0 6px }
.tk .doi { display: grid; gap: 4px 20px }
.tk .nhan2 { color: var(--do) }
.tk .so { font-weight: 700; text-decoration: none; font-size: 16px }
ul.ts { list-style: none; margin: 0; padding: 0 }
ul.ts li { display: grid; grid-template-columns: 40px 1fr 70px; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--vien); font-size: 14px }
ul.ts .cot { height: 10px; background: var(--nen3); border-radius: 5px; overflow: hidden }
ul.ts .cot i { display: block; height: 100%; background: var(--chinh2); border-radius: 5px }
ul.ts .lan { text-align: right; color: var(--mo); white-space: nowrap }
.luoi { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 6px 0 }
.luoi .o { display: grid; justify-items: center; padding: 5px 0 3px; border-radius: 7px; background: var(--nen3); text-decoration: none; color: var(--chu); line-height: 1.15; border: 1px solid transparent }
.luoi .o b { font-size: 15px }
.luoi .o small { font-size: 11px; color: var(--mo) }
.luoi .o.cao { background: var(--vang2); border-color: var(--vang) }
.luoi .o.khong { opacity: .55 }
.luoi .o.on { background: var(--chinh2); color: #fff }
.luoi.nho .o { padding: 7px 0 }
table.bang2 td.nho { font-size: 13px; color: var(--mo); white-space: nowrap }
table.bang2 b.vuot { color: var(--do) }
table.bang2 td small { display: block; font-size: 11px; color: var(--do) }
table.bang2 mark { background: var(--vang2); color: var(--do); font-weight: 700; padding: 0 1px }
.dslk a, .dsdai a { margin-right: 6px }
ul.dsdai { list-style: none; padding: 0; margin: 6px 0 0 }
ul.dsdai li { padding: 5px 0; border-bottom: 1px solid var(--vien); font-size: 14px }
/* giải mã bộ số (markup của include/giaimaboso.php gmbs_html) */
.gmbs { padding: 12px 14px; line-height: 1.6 }
.gmbs .header { font-weight: 700; font-size: 16px; margin-bottom: 6px }
.gmbs .header .boso { color: var(--do); font-size: 20px }
.gmbs .header .date { color: var(--mo); font-weight: 400 }
.gmbs .item { padding: 8px 0; border-top: 1px solid var(--vien) }
.gmbs .item > div { margin: 3px 0 }
.gmbs .label { color: var(--mo); font-size: 13px }
.gmbs .big { font-weight: 700; color: var(--do); font-size: 17px }
.gmbs .red { color: var(--do) }
.gmbs .date2 { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 8px; border-radius: 6px; background: var(--nen3); font-size: 13px }
.gmbs .date2 b { color: var(--chu) }
.gmbs .gan .date { display: inline-block; color: var(--mo); font-size: 13px; margin-left: 4px }
.gmbs .tyle { margin: 3px 0 }
.gmbs .note { color: var(--mo); font-size: 13px }
.gmbs .titleboso { display: none }
/* phân tích dưới trang kết quả (kqxs_phantich, đã bỏ style inline) */
.pt h2 { font-size: 17px; margin: 0 0 4px }
.pt > p { color: var(--mo); margin: 0 0 4px }
.pt h3 { margin: 14px 0 6px; padding-left: 8px; border-left: 3px solid var(--mien); font-size: 15px }
.pt h3 + div, .pt div + div { margin: 0 0 6px 4px }
.pt b { color: var(--do) }
.pt a { font-weight: 600; text-decoration: none }
.pt time { white-space: nowrap }
.pt p { margin: 8px 0 0; font-size: 13px }
@media (min-width: 720px) { .tk .doi { grid-template-columns: 1fr 1fr } .ftk { grid-template-columns: 1fr 1fr; align-items: end } .ftk .hang.doi, .ftk .nutdv { grid-column: span 2 } .ftk .nutdv .nut { width: auto; min-width: 200px; justify-self: start } .luoi .o b { font-size: 17px } }
[data-theme="dark"] .gmbs .big, [data-theme="dark"] .gmbs .red, [data-theme="dark"] .pt b, [data-theme="dark"] .tk .nhan2, [data-theme="dark"] table.bang2 b.vuot, [data-theme="dark"] table.bang2 mark { color: #ff7a80 }
[data-theme="dark"] .gmbs .header .boso { color: #ff7a80 }
/* dò vé */
.dvkq { padding: 14px }
.dvkq h2 { margin: 0 0 4px; font-size: 18px }
.dvkq.co h2 { color: #0f7a35 }
.dvkq.khong h2 { color: var(--mo) }
.dvkq.loi { border-color: #efbfc5; background: #fdeef0; color: #9b0c23 }
.dvkq.loi p { margin: 0 }
.dvkq .ky { margin: 0 0 8px }
.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 }
.dvkq details.lt { border-top: 1px solid var(--vien); margin-top: 8px }
.kyhai { display: grid; grid-template-columns: 1fr; gap: 8px }
.kyhai:has(input) { grid-template-columns: 1fr 130px }
[data-theme="dark"] .dvkq.co h2 { color: #6fd392 } [data-theme="dark"] .dvkq.loi { background: #3a1416; border-color: #6b2226; color: #ffb3b7 } [data-theme="dark"] .dvkq tr.trung td { background: #3a3110 }
/* in vé dò: nhóm radio kiểu in */
.ftk .nhanlb { font-size: 13px; color: var(--mo); font-weight: 600 }
.ftk .radios { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 0 }
.ftk .radios label { font-size: 15px; display: flex; align-items: center; gap: 6px }
.ftk .radios input { width: 18px; height: 18px; margin: 0 }
/* cỡ chữ A− / A+ */
.ftk label { font-size: calc(13px * var(--co)) } .ftk select, .ftk input, .ftk .nutdv .nut { font-size: calc(16px * var(--co)) } .ftk .radios label { font-size: calc(15px * var(--co)) } .ftk .nhanlb { font-size: calc(13px * var(--co)) }
.tabtk a { font-size: calc(14px * var(--co)) } .tk h3 { font-size: calc(15px * var(--co)) } .tk .so { font-size: calc(16px * var(--co)) } ul.ts li { font-size: calc(14px * var(--co)) }
.luoi .o b { font-size: calc(15px * var(--co)) } .luoi .o small { font-size: calc(11px * var(--co)) } table.bang2 td.nho { font-size: calc(13px * var(--co)) } table.bang2 td small { font-size: calc(11px * var(--co)) } ul.dsdai li { font-size: calc(14px * var(--co)) }
.gmbs .header { font-size: calc(16px * var(--co)) } .gmbs .header .boso { font-size: calc(20px * var(--co)) } .gmbs .label, .gmbs .note, .gmbs .date2, .gmbs .gan .date { font-size: calc(13px * var(--co)) } .gmbs .big { font-size: calc(17px * var(--co)) }
.pt h2 { font-size: calc(17px * var(--co)) } .pt h3 { font-size: calc(15px * var(--co)) } .pt p { font-size: calc(13px * var(--co)) }
.dvkq h2 { font-size: calc(18px * var(--co)) }
@media (min-width: 720px) { .luoi .o b { font-size: calc(17px * var(--co)) } }
/* Giải mã: nút Bộ số khác + hộp chọn 00-99 (23/10) */
.ftk .nutdv { display: flex; gap: 8px } .ftk .nutdv .nut { flex: 1 } .nut.phu { background: var(--nen3); color: var(--chinh) !important; border: 1px solid var(--vien) }
.gmhop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .5) }
.gmhop[hidden] { display: none }
.gmhop .gmbang { width: 100%; max-width: 520px; max-height: 85vh; overflow: auto; padding: 10px 12px 16px; border-radius: 14px 14px 0 0; background: var(--nen); box-shadow: 0 -4px 16px rgba(0, 0, 0, .25) }
.gmhop .gmdau { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: calc(16px * var(--co)); color: var(--chu) }
.gmhop .gmdau button { width: 40px; height: 40px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--mo); cursor: pointer }
.gmhop .luoi { gap: 6px } .gmhop .luoi .o { padding: 9px 0 }
@media (min-width: 720px) { .gmhop { align-items: center } .gmhop .gmbang { border-radius: 12px } .ftk .nutdv .nut { flex: 0 0 auto } }
/* Giải mã: bộ số = quả bóng + nút chọn bộ số liền sau; hàng phạm vi + nút Giải mã (23/10) */
.ftk .hang.boso { grid-template-columns: auto 1fr; align-items: center; gap: 12px }
.gmso { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--chinh); color: #fff; font-size: calc(22px * var(--co)); font-weight: 700; font-variant-numeric: tabular-nums }
.ftk .hang.boso .nut.phu { justify-self: start; width: auto; padding: 0 16px }
.ftk .hang.pvgm { align-items: end } .ftk .hang.pvgm .nutdv .nut { width: 100% }
@media (min-width: 720px) { .ftk .hang.boso { grid-column: span 2 } .ftk .hang.pvgm { grid-template-columns: 1fr 1fr } }
/* Thống kê trong: khối N kỳ / khoảng ngày + chip gợi ý (chủ project 23/10) */
.ftk .goiy { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; align-items: center }
.ftk .goiy .nhanlb { margin-right: 4px }
.ftk .goiy button { height: 30px; padding: 0 12px; border: 1px solid var(--vien); border-radius: 15px; background: var(--nen3); color: var(--chu); font-size: calc(13px * var(--co)); cursor: pointer }
.ftk .goiy button:hover { border-color: var(--chinh); color: var(--chinh) }
.ftk .hang.doi > div.goiy { display: flex; grid-column: span 2 } /* đè .hang.doi > div{display:grid} để chip nằm ngang */
@media (min-width: 720px) { .ftk .hang.che, .ftk .hang[data-che] { grid-column: span 2 } .ftk .hang[data-che=lanquay] { grid-template-columns: 140px auto; align-items: center } .ftk .hang[data-che=lanquay] label { grid-column: span 2 } .ftk .hang[data-che=lanquay] .goiy { padding-top: 0 } }