/* xosohomnay.com — CSS trang Vietlott đầy đủ (/vietlott/*), chỉ nạp ở trang đó ($cssThem = 'vl'). Màu trò --vl từ site.css (.v-{slug}). */
.the.vl .dauthe img { height: 40px; width: auto; flex: none }
.jpk { padding: 12px 14px; border-bottom: 1px solid var(--vien); background: var(--hang) }
.jpk small { display: block; font-size: 12px; color: var(--mo) }
.jpk b { display: block; font-size: 26px; line-height: 1.15; color: var(--vl, var(--do)); font-weight: 800; letter-spacing: -.3px }
.jpk .dem { display: block; margin-top: 6px; font-size: 13px; color: var(--mo) }
.jpk .dem i { font-style: normal; font-weight: 700; color: var(--chu); font-size: 16px; margin-right: 2px }
.the.vl .bong { padding: 10px 14px 12px }
.the.vl .bong b { width: min(42px, calc((100% - 42px) / 7)); font-size: 19px }
table.bang2.giai { margin: 0 }
table.bang2.giai th:first-child, table.bang2.giai td:first-child { padding-left: 14px; font-weight: 600 }
table.bang2.giai td.tien small { display: block; font-weight: 400; color: var(--mo); font-size: 11px }
table.bang2.b3 td.boso { white-space: normal }
table.bang2.b3 td.boso b { display: inline-block; background: var(--nen3); border-radius: 6px; padding: 2px 7px; font-size: 15px; letter-spacing: .5px; margin: 2px 4px 2px 0 }
table.bang2.b3 td.boso b.db { background: var(--vl, var(--do)); color: #fff }
.kenoso { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; padding: 10px 14px; max-width: 520px }
.kenoso b { aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--vl, var(--chinh)); color: #fff }
.kenoso b.to, table.bang2.b3 td.boso b.to { box-shadow: 0 0 0 3px var(--nen), 0 0 0 6px var(--vang) }
.the.vl details.lt { border-top: 1px solid var(--vien) }
table.bang2.sl { font-size: 12px } table.bang2.sl td, table.bang2.sl th { padding: 4px 3px; text-align: center }
.the.vl .tab { display: flex; gap: 2px; padding: 0 8px 4px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--vien) }
.the.vl .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 }
.the.vl .tab a.on { color: var(--vl, var(--chinh2)); border-bottom-color: var(--vl, var(--chinh2)); font-weight: 700 }
@media (min-width: 720px) { .jpk { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px } .jpk small, .jpk b { display: inline-block } .jpk .dem { margin: 0 } .the.vl .dauthe img { height: 48px } .the.vl .bong b { width: min(46px, calc((100% - 42px) / 7)); font-size: 20px } }
[data-theme="dark"] .jpk b, [data-theme="dark"] .the.vl .tab a.on { color: color-mix(in srgb, var(--vl, #fff) 60%, #fff) }
.the.vl .chip { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; font-size: 13px; color: var(--mo) }
.the.vl .chip span { background: var(--nen3); border-radius: 6px; padding: 4px 10px }
.the.vl .chip b { color: var(--chu); margin-left: 3px }
/* cỡ chữ A− / A+ */
.jpk small, .jpk .dem { font-size: calc(12px * var(--co)) } .jpk b { font-size: calc(26px * var(--co)) } .jpk .dem i { font-size: calc(16px * var(--co)) }
table.bang2.giai td.tien small { font-size: calc(11px * var(--co)) } table.bang2.b3 td.boso b { font-size: calc(15px * var(--co)) } table.bang2.sl { font-size: calc(12px * var(--co)) }
.the.vl .tab a { font-size: calc(13px * var(--co)) }
@media (min-width: 720px) { .the.vl .bong b { font-size: calc(20px * var(--co)) } }
/* cột Trùng = bóng nhỏ (xstc_trung_bong), bóng ĐB vàng; title rê chuột (23/10) */
.tbong { display: inline-flex; gap: 3px; align-items: center; cursor: help } .tbong i { width: 13px; height: 13px; border-radius: 50%; background: var(--vl, var(--chinh)) } .tbong i.db { background: var(--vang); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15) }
/* Power 6/55: màu trò vàng cam nên bóng đặc biệt (vàng) lẫn -> bóng ĐB của Power dùng đỏ (bóng kết quả và bóng nhỏ cột Trùng), 23/10 */
/* trực tiếp Vietlott (vlive.js, 23/10): ô chờ xám, ô đang quay vàng số chạy; thẻ vừa đổi nháy nhẹ */
.the.vl .bong b.cho, .kenoso b.cho, table.bang2.b3 td.boso b.cho { background: var(--nen3); color: transparent; position: relative }
.the.vl .bong b.cho::after, .kenoso b.cho::after, table.bang2.b3 td.boso b.cho::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; margin: -20% 0 0 -20%; border-radius: 50%; border: 2px solid var(--vien); border-top-color: var(--vl, var(--chinh)); animation: xoay 1s linear infinite } /* icon chờ xoay trong ô trống */
table.bang2.b3 td.boso b.cho { min-width: 40px; min-height: 24px; vertical-align: middle }
@media (prefers-reduced-motion: reduce) { .the.vl b.cho::after { animation: none } }
.the.vl .bong b.quay, .kenoso b.quay, table.bang2.b3 td.boso b.quay { background: var(--vang2); color: var(--chu) }
.the.vl.tt .dauthe .nhan { margin-left: auto }
.the.vl.moi { box-shadow: 0 0 0 2px var(--vl, var(--chinh)) }
/* danh sách kỳ trong ngày Keno / Bingo18 (23/10): mỗi kỳ 1 dòng link, bộ số dạng ô nhỏ màu trò */
ol.kyds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vien) }
ol.kyds li + li { border-top: 1px solid var(--vien) }
ol.kyds a { display: grid; grid-template-columns: 72px 1fr; gap: 2px 10px; padding: 8px 14px; text-decoration: none; color: var(--chu) }
ol.kyds .k { grid-row: span 2; display: grid; align-content: center; font-size: 13px } ol.kyds .k b { color: var(--vl, var(--chinh)) } ol.kyds .k small { color: var(--mo); font-size: 12px }
ol.kyds .so { display: flex; flex-wrap: wrap; gap: 4px } ol.kyds .so i { font-style: normal; font-weight: 700; font-size: 13px; min-width: 26px; height: 24px; line-height: 24px; text-align: center; border-radius: 6px; background: var(--vl, var(--chinh)); color: #fff; padding: 0 4px }
.v-bingo18 ol.kyds .so i { min-width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 15px }
ol.kyds .tt { font-size: 12px; color: var(--mo) }
.kyds-them { display: block; width: calc(100% - 28px); margin: 10px 14px 14px; height: 42px; background: var(--nen3); color: var(--chinh); border: 1px solid var(--vien); border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer }
ol.kyds .k { font-size: calc(13px * var(--co)) } ol.kyds .so i { font-size: calc(13px * var(--co)) } ol.kyds .tt { font-size: calc(12px * var(--co)) }