/*
Theme Name: KQKT - Kết Quả Xổ Số (New)
Theme URI: https://xskt.site
Author: BunnyDV
Author URI: https://bunnydv.com
Description: KQKT - Kết Quả Xổ Số Kiến Thiết, Xổ Số Miền Bắc, Xổ Số Miền Trung, Xổ Số Miền Nam, Xổ Số Thủ Đô, Xổ Số Hồ Chí Minh, Xổ Số Cần Thơ, Xổ Số An Giang, Xổ Số Bình Dương, Xổ Số Bình Phước, Xổ Số Bến Tre, Xổ Số Cà Mau, Xổ Số Đồng Nai, Xổ Số Đồng Tháp, Xổ Số Hậu Giang, Xổ Số Kiên Giang, Xổ Số Long An, Xổ Số Sóc Trăng, Xổ Số Tây Ninh, Xổ Số Vĩnh Long
Version: 2.2.3
Requires at least: 6.0
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kqxs, xskt, kqkt, xổ số, kết quả xổ số, xổ số kiến thiết, xổ số miền bắc, xổ số miền trung, xổ số miền nam
*/

/* ============================================================
   KQXS MASTER STYLESHEET
   Section index:
   01. Variables & Reset
   02. Base / Typography
   03. Layout (container, 3-col wrapper)
   04. Header — Desktop
   05. Header — Mobile
   06. Mobile Drawer Menu
   07. Mobile Date Drawer
   08. Notice / Marquee bar
   09. Sidebar Left (sidebar-left.php)
   10. Sidebar Right (sidebar-right.php)
   11. Footer
   12. Utility / Shared components
   13. Responsive overrides
   ============================================================ */


/* ============================================================
   01. Variables & Reset
   ============================================================ */

:root {
    /* Brand colours */
    --clr-red:        #c8001e;
    --clr-red-dark:   #9e0018;
    --clr-red-light:  #e0192f;
    --clr-gold:       #f5a623;
    --clr-gold-dark:  #d48a0c;

    /* Sidebar accent (orange — same feel as reference images) */
    --clr-orange:     #f5821f;
    --clr-orange-dk:  #d46b08;

    /* Neutral */
    --clr-white:      #ffffff;
    --clr-black:      #0f0f0f;
    --clr-dark:       #1c1c1c;
    --clr-dark2:      #2a2a2a;
    --clr-gray:       #3d3d3d;
    --clr-gray-mid:   #888;
    --clr-gray-light: #f2f2f2;
    --clr-border:     #e0e0e0;

    /* Text */
    --clr-text:       #222222;
    --clr-text-light: #555555;
    --clr-link:       #c8001e;

    /* Dimensions */
    --container-max:  1200px;
    --header-h:       70px;     /* total header height on desktop */
    --hd-time-h:      32px;
    --hd-nav-h:       38px;
    --sb-left-w:      300px;
    --sb-right-w:     300px;

    /* Font */
    --font-main:      'Be Vietnam Pro', 'Roboto', sans-serif;
    --fs-base:        13.5px;
    --fs-sm:          12.5px;
    --fs-xs:          11.5px;
    --lh-base:        1.5;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--fs-base); scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--clr-text);
    background: #f7f7f7;
}


/* ============================================================
   02. Base / Typography
   ============================================================ */

a { color: var(--clr-link); text-decoration: none; }
a:hover { color: var(--clr-red-dark); }

ul { list-style: none; margin: 0; padding: 0; }

img { max-width: 100%; height: auto; display: block; }

.mob-no-scroll { overflow: hidden; }


/* ============================================================
   03. Layout
   ============================================================ */

/* Master container — 1200px centred */
.kqxs-container {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}

/* 3-col page wrapper (used in page templates) */
.kqxs-layout {
    display: grid;
    grid-template-columns: var(--sb-left-w) var(--sb-right-w) 1fr;
    grid-template-areas: "sbleft sbright main";
    gap: 8px;
    align-items: start;
    padding: 8px 0 16px;
}

.kqxs-sb-left  { grid-area: sbleft; }
.kqxs-sb-right { grid-area: sbright; }
.kqxs-main     { grid-area: main; min-width: 0; }


/* ============================================================
   04. Header — Desktop
   ============================================================ */

.kqxs-header {
    background: var(--clr-red);
    /* Subtle diagonal stripe texture — gives depth without being generic */
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0,0,0,0.04) 0px,
        rgba(0,0,0,0.04) 1px,
        transparent 1px,
        transparent 8px
    );
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    position: sticky;
    top: 0;
    z-index: 900;
}

/* Inner wrapper fills the red band */
.kqxs-header-inner {
    /* nothing extra — just a stacking context */
}

/* Flex row: logo | right */
.hd-layout {
    display: flex;
    align-items: stretch;
    height: var(--header-h);
}

/* ---- Logo area ---- */
.hd-logo-wrap {
    width: 20%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Gold left-right accent borders to separate logo visually */
    border-right: 3px solid var(--clr-gold);
    background: rgba(0,0,0,0.18);
    padding: 6px 12px;
}

.hd-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.hd-logo-link img,
.hd-logo-wrap .custom-logo {
    max-height: 54px;
    width: auto;
    object-fit: contain;
}

.hd-logo-text {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--clr-white);
    letter-spacing: .5px;
}

/* ---- Right panel (80%) ---- */
.hd-right-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---- Time bar (top 32px of right panel) ---- */
.hd-time-bar {
    height: var(--hd-time-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.12);
    gap: 12px;
}

.hd-time-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--clr-white);
    font-size: var(--fs-sm);
}

.hd-clock-ico {
    color: var(--clr-white);
    font-size: 13px;
}

.hd-time-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
    color: var(--clr-white);
    font-size: 14px;
}

.hd-time-sep {
    color: rgba(255,255,255,0.35);
}

.hd-date-value {
    color: rgba(255,255,255,0.9);
}

.hd-tagline {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

/* ---- Navigation bar (bottom 38px of right panel) ---- */
.hd-nav {
    height: var(--hd-nav-h);
    display: flex;
    align-items: stretch;
}

.hd-menu {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 0;
}

.hd-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

.hd-link {
    display: flex;
    align-items: center;
    padding: 0 13px;
    color: var(--clr-white);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: background .15s, border-color .15s;
}

.hd-link:hover,
.hd-item:hover > .hd-link {
    background: rgba(0,0,0,0.2);
    border-bottom-color: var(--clr-gold);
    color: var(--clr-white);
}

.hd-link.hd-home {
    padding: 0 14px;
    font-size: 15px;
    border-right: 1px solid rgba(255,255,255,0.15);
}

.hd-arrow {
    font-size: 9px;
    margin-left: 4px;
    opacity: .75;
    transition: transform .2s;
}
.hd-item:hover > .hd-link .hd-arrow {
    transform: rotate(180deg);
}

/* ---- Dropdown ---- */
.hd-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: var(--clr-white);
    border-top: 3px solid var(--clr-gold);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    z-index: 1000;
    padding: 4px 0;
}

.hd-has-sub:hover .hd-submenu {
    display: block;
}

.hd-submenu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: var(--fs-sm);
    color: var(--clr-text);
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .12s, border-color .12s, color .12s;
}

.hd-submenu li a i {
    color: var(--clr-red);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.hd-submenu li a:hover {
    background: #fff5f5;
    border-left-color: var(--clr-red);
    color: var(--clr-red);
}

.hd-submenu li a:hover i {
    color: var(--clr-red);
}

/* Last item in menu — submenu opens to left if would overflow */
.hd-item:last-child .hd-submenu,
.hd-item:nth-last-child(2) .hd-submenu {
    left: auto;
    right: 0;
}


/* ============================================================
   05. Header — Mobile
   ============================================================ */

.kqxs-header-mobile {
    background: var(--clr-red);
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    position: sticky;
    top: 0;
    z-index: 900;
}

.hd-mob-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 0 12px;
}

.hd-mob-toggle,
.hd-mob-cal-btn {
    background: none;
    border: none;
    color: var(--clr-white);
    font-size: 20px;
    padding: 6px;
    cursor: pointer;
    line-height: 1;
}

.hd-mob-logo {
    display: flex;
    align-items: center;
}

.hd-mob-logo img,
.hd-mob-logo .custom-logo {
    max-height: 36px;
    width: auto;
}


/* ============================================================
   06. Mobile Drawer Menu
   ============================================================ */

.mob-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1050;
}
.mob-overlay.active { display: block; }

.mob-drawer {
    position: fixed;
    top: 0;
    left: -290px;
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 1060;
    overflow-y: auto;
    transition: left .25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
}
.mob-drawer.active { left: 0; }

.mob-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--clr-red);
    border-bottom: 2px solid var(--clr-gold);
    flex-shrink: 0;
}

.mob-drawer-logo img,
.mob-drawer-logo .custom-logo { max-height: 34px; width: auto; }

.mob-drawer-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.mob-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 20px;
}

/* Menu items */
.mob-menu > li > a,
.mob-group-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 11px 16px;
    color: var(--clr-red-dark);
    font-size: var(--fs-sm);
    font-weight: 600;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    gap: 9px;
    border-bottom: 1px solid #f0e0e0;
    transition: background .12s;
}

.mob-menu > li > a:hover,
.mob-group-toggle:hover,
.mob-group-toggle.open {
    background: #fff5f5;
    color: var(--clr-red);
}

.mob-menu > li > a i,
.mob-group-toggle > span > i {
    width: 16px;
    text-align: center;
    color: var(--clr-red-dark);
    flex-shrink: 0;
}

.mob-status {
    margin-left: auto;
    font-size: 11px;
}

.mob-chevron {
    margin-left: auto;
    font-size: 11px;
    color: var(--clr-red-dark);
    transition: transform .2s;
    flex-shrink: 0;
}
.mob-group-toggle.open .mob-chevron {
    transform: rotate(180deg);
}

/* Sub menu */
.mob-sub {
    display: none;
    background: #fff8f8;
    border-left: 3px solid var(--clr-red);
    margin-left: 0;
}
.mob-sub.open { display: block; }

.mob-sub li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 20px;
    font-size: var(--fs-xs);
    color: var(--clr-red-dark);
    border-bottom: 1px solid #f5e8e8;
    transition: background .1s;
}
.mob-sub li a:hover { background: #ffeded; color: var(--clr-red); }
.mob-sub li a i { width: 14px; text-align: center; color: var(--clr-red); flex-shrink: 0; }

.mob-sub-group-label {
    padding: 6px 16px 4px 20px;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: .5px;
}


/* ============================================================
   07. Mobile Date Drawer
   ============================================================ */

.mob-date-drawer {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: var(--clr-white);
    border-radius: 14px 14px 0 0;
    z-index: 1060;
    transition: bottom .3s ease;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0,0,0,.2);
}
.mob-date-drawer.active { bottom: 0; }

.mob-date-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--clr-border);
    font-weight: 700;
    font-size: 15px;
    color: var(--clr-text);
    background: #fafafa;
    border-radius: 14px 14px 0 0;
}
.mob-date-head button {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--clr-gray-mid);
    line-height: 1;
    padding: 2px 4px;
}

.mob-date-body { padding: 0; }

/* ══════════════════════════════════════════════════════════
   Flatpickr inline — Mobile date drawer (scoped hoàn toàn)
   Không phụ thuộc vào §16 global để tránh xung đột.
   ══════════════════════════════════════════════════════════ */

/* Khung calendar */
.mob-date-body .flatpickr-calendar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-family: var(--font-main) !important;
    background: #fff !important;
}

/* ── Header: tháng/năm — CSS riêng, không dùng §16 ── */
.mob-date-body .flatpickr-months {
    background: #c8001e !important;
    background-image: none !important;
    padding: 10px 4px !important;
    align-items: center !important;
}
.mob-date-body .flatpickr-months .flatpickr-month {
    color: #fff !important;
}
.mob-date-body .flatpickr-months .flatpickr-prev-month,
.mob-date-body .flatpickr-months .flatpickr-next-month {
    color: rgba(255,255,255,.85) !important;
    fill: rgba(255,255,255,.85) !important;
    padding: 6px 12px !important;
    top: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}
.mob-date-body .flatpickr-months .flatpickr-prev-month:hover,
.mob-date-body .flatpickr-months .flatpickr-next-month:hover {
    color: #fff !important;
    fill: #fff !important;
    background: rgba(0,0,0,.15) !important;
}
.mob-date-body .flatpickr-current-month {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    width: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
/* Dropdown tháng */
.mob-date-body .flatpickr-current-month .flatpickr-monthDropdown-months,
.mob-date-body .flatpickr-current-month select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: rgba(0,0,0,.28) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath fill='rgba(255,255,255,.8)' d='M0 0l4.5 5L9 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 7px center !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--font-main) !important;
    padding: 4px 26px 4px 10px !important;
    cursor: pointer !important;
    outline: none !important;
}
/* Input năm */
.mob-date-body .flatpickr-current-month .numInputWrapper {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
}
.mob-date-body .flatpickr-current-month .numInputWrapper input.numInput {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    font-family: var(--font-main) !important;
    width: 56px !important;
    text-align: center !important;
    padding: 0 !important;
    outline: none !important;
    cursor: default !important;
    pointer-events: none !important; /* chỉ đọc, không cho gõ tay */
}
/* Ẩn mũi tên tăng/giảm năm của numInputWrapper */
.mob-date-body .flatpickr-current-month .numInputWrapper .arrowUp,
.mob-date-body .flatpickr-current-month .numInputWrapper .arrowDown {
    display: none !important;
}

/* ── Weekday header ── */
.mob-date-body .flatpickr-weekdays {
    background: #1a1a2e !important;
    padding: 5px 0 !important;
}
.mob-date-body .flatpickr-weekday {
    color: #f5a623 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    flex: 1 !important;
}

/* ── Vùng ngày: fill full-width ── */
.mob-date-body .flatpickr-days {
    width: 100% !important;
    border: none !important;
}
.mob-date-body .dayContainer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 6px 8px 8px !important;
    justify-content: space-around !important;
    /* Giữ flex của flatpickr để placeholder days căn cột đúng */
}

/* Mỗi ô ngày: chia đều 7 cột, dùng position:relative để vẽ circle qua ::before */
.mob-date-body .flatpickr-day {
    flex-basis: calc(100% / 7 - 4px) !important;
    max-width:  calc(100% / 7 - 4px) !important;
    width:      calc(100% / 7 - 4px) !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 2px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #222 !important;
    /* Xoá background/border khỏi chính element — dùng ::before cho hình tròn */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
}
/* Vòng tròn vẽ qua pseudo-element → luôn vuông bất kể chiều rộng cell.
   z-index: -1 để nằm SAU text node (unpositioned content luôn ở trên). */
.mob-date-body .flatpickr-day::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

/* Ngày được chọn */
.mob-date-body .flatpickr-day.selected,
.mob-date-body .flatpickr-day.selected:hover {
    color: #fff !important;
    font-weight: 700 !important;
}
.mob-date-body .flatpickr-day.selected::before {
    background: #c8001e;
}

/* Hôm nay (chưa chọn) */
.mob-date-body .flatpickr-day.today:not(.selected) {
    color: #c8001e !important;
    font-weight: 700 !important;
}
.mob-date-body .flatpickr-day.today:not(.selected)::before {
    border: 2px solid #c8001e;
    background: transparent;
}

/* Hover */
.mob-date-body .flatpickr-day:hover:not(.selected):not(.flatpickr-disabled) {
    color: #c8001e !important;
}
.mob-date-body .flatpickr-day:hover:not(.selected):not(.flatpickr-disabled)::before {
    background: #fff0f0;
}

/* Ngày tháng khác (mờ) */
.mob-date-body .flatpickr-day.prevMonthDay,
.mob-date-body .flatpickr-day.nextMonthDay {
    color: #ccc !important;
}

/* Ngày bị vô hiệu */
.mob-date-body .flatpickr-day.flatpickr-disabled,
.mob-date-body .flatpickr-day.flatpickr-disabled:hover {
    color: #ddd !important;
    cursor: not-allowed !important;
}
.mob-date-body .flatpickr-day.flatpickr-disabled::before { display: none; }

/* ── Footer nút Hôm nay / Xóa ── */
.mob-date-body .dt-flatpickr-footer {
    padding: 10px 12px !important;
    border-top: 1px solid #eee !important;
    background: #fafafa !important;
}
.mob-date-body .dt-fp-btn {
    padding: 8px !important;
    font-size: 13.5px !important;
}


/* ============================================================
   08. Notice / Marquee bar
   ============================================================ */

.hd-notice-bar {
    background: rgba(0,0,0,.22);
    border-top: 1px solid rgba(255,255,255,.1);
}

.hd-notice-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.hd-notice-label {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--clr-gold);
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

.hd-marquee-wrap {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.hd-marquee {
    display: inline-block;
    white-space: nowrap;
    animation: kqxs-marquee 30s linear infinite;
    color: rgba(255,255,255,.8);
    font-size: var(--fs-xs);
}

.hd-notice-brand {
    color: var(--clr-gold);
    font-weight: 700;
}

@keyframes kqxs-marquee {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}


/* ============================================================
   09. Sidebar Left
   ============================================================ */

.sb-left-panel,
.sb-right-panel {
    width: 100%;
}

/* ---- Group block (shared left + right) ---- */
.sb-group {
    margin-bottom: 6px;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background: var(--clr-white);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* ---- Group header button ---- */
.sb-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 9px;
    background: var(--clr-red);
    color: var(--clr-white);
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 6px;
    transition: background .15s;
}

.sb-group-head:hover { background: var(--clr-red-dark); }

.sb-head-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    flex: 1;
    min-width: 0;
}

.sb-head-label i {
    font-size: 11px;
    flex-shrink: 0;
    opacity: .9;
}

.sb-head-arrow {
    font-size: 10px;
    flex-shrink: 0;
    transition: transform .2s;
    opacity: .8;
}

/* ---- Group body (collapsible) ---- */
.sb-group-body { padding: 3px 0; }

.sb-group-body.sb-collapsed { display: none; }

/* ---- Left sidebar links ---- */
.sb-link-list { list-style: none; padding: 0; margin: 0; }
.sb-link-list li { margin: 0; padding: 0; }
.sb-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px 5px 11px;
    font-size: var(--fs-sm);
    color: var(--clr-text);
    border-left: 3px solid transparent;
    transition: background .1s, border-color .1s, color .1s;
    line-height: 1.35;
}

.sb-link:hover {
    background: #fff0f0;
    border-left-color: var(--clr-red);
    color: var(--clr-red-dark);
}

.sb-link.sb-active {
    background: #fff0f0;
    border-left-color: var(--clr-red);
    color: var(--clr-red-dark);
    font-weight: 600;
}

.sb-active-mark {
    font-size: 10px;
    color: var(--clr-red);
    flex-shrink: 0;
}


/* ============================================================
   10. Sidebar Right — Province list
   ============================================================ */

/* Province link row */
.sb-prov-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 9px 5px 11px;
    font-size: var(--fs-xs);
    color: var(--clr-text);
    border-left: 3px solid transparent;
    transition: background .1s, border-color .1s, color .1s;
    gap: 4px;
    line-height: 1.35;
}

.sb-prov-link:hover {
    background: #fff0f0;
    border-left-color: var(--clr-red);
    color: var(--clr-red-dark);
}

.sb-prov-link.sb-active {
    background: #fff0f0;
    border-left-color: var(--clr-red);
    color: var(--clr-red-dark);
    font-weight: 600;
}

.sb-prov-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-prov-badge {
    flex-shrink: 0;
    line-height: 1;
}


/* ============================================================
   10a. Sidebar Right — Block "Xổ Số Các Tỉnh Hôm Nay"
   ============================================================ */

.sb-today-group {
    /* Nổi bật hơn các group thường */
    border-color: var(--clr-red);
}

.sb-today-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    background: var(--clr-red);
    color: var(--clr-white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
}

.sb-today-head i {
    color: var(--clr-white);
    font-size: 11px;
    flex-shrink: 0;
}

.sb-today-body {
    padding: 5px 0 6px;
}

/* Dòng tên miền */
.sb-today-region {
    margin-bottom: 2px;
}
.sb-today-region--separator {
    border-top: 1px dashed #e0c0c0;
    margin-top: 4px;
    padding-top: 2px;
}

.sb-today-region-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px 4px 8px;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--clr-red);
    transition: background .1s;
    line-height: 1.3;
}

.sb-today-region-row:hover {
    background: #fff0f0;
    color: var(--clr-red-dark);
}

/* Bullet tam giác (►) cho miền */
.sb-today-bullet--region {
    font-size: 8px;
    color: var(--clr-red);
    flex-shrink: 0;
    line-height: 1;
}

.sb-today-region-name {
    flex: 1;
    min-width: 0;
}

.sb-today-time {
    font-weight: 400;
    color: var(--clr-text-light);
    font-size: 11px;
    flex-shrink: 0;
}

/* Danh sách tỉnh con */
.sb-today-provs {
    padding: 0 0 2px 18px;
}

.sb-today-provs li a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 0;
    font-size: var(--fs-xs);
    color: var(--clr-text);
    transition: color .1s;
    line-height: 1.35;
}

.sb-today-provs li a:hover {
    color: var(--clr-red);
}

/* Bullet vuông (■) cho tỉnh */
.sb-today-bullet--prov {
    font-size: 6px;
    color: var(--clr-red);
    flex-shrink: 0;
    line-height: 1;
}


/* ============================================================
   10b. Status badges — dùng chung cho sidebar + menu mobile
   (Output bởi xskt_get_province_status_html / xskt_get_region_status_html)
   ============================================================ */

/* Giờ quay (chưa đến giờ) */
.status-time {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--clr-gold-dark);
    white-space: nowrap;
    background: #fffbf0;
    border: 1px solid var(--clr-gold);
    border-radius: 10px;
    padding: 1px 5px;
    line-height: 1.3;
}

.status-time .dashicons {
    font-size: 11px;
    width: 11px;
    height: 11px;
    line-height: 1;
    vertical-align: middle;
}

/* LIVE */
.status-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--clr-white);
    background: var(--clr-red);
    border-radius: 10px;
    padding: 3px 6px;
    white-space: nowrap;
    letter-spacing: .3px;
}

.live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #12ff00;
    display: inline-block;
    flex-shrink: 0;
    animation: kqxs-blink 1s ease-in-out infinite;
}

@keyframes kqxs-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .2; }
}

/* Đã có kết quả (check) */
.status-icon.icon-check {
    display: inline-flex;
    align-items: center;
    color: #16a34a;
    font-size: 12px;
}

.status-icon.icon-check .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    vertical-align: middle;
}

/* Đang chờ quay (loading 3 chấm) */
.status-loading {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.status-loading span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--clr-gray-mid);
    display: inline-block;
    animation: kqxs-dots 1.2s ease-in-out infinite;
}

.status-loading span:nth-child(2) { animation-delay: .2s; }
.status-loading span:nth-child(3) { animation-delay: .4s; }

@keyframes kqxs-dots {
    0%, 80%, 100% { transform: scale(.6); opacity: .4; }
    40%            { transform: scale(1);  opacity: 1; }
}


/* ============================================================
   11. Footer
   ============================================================ */

.kqxs-footer {
    background: var(--clr-dark);
    color: rgba(255,255,255,.75);
    padding: 40px 0 28px;
    margin-top: 28px;
}

.ft-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 28px 24px;
}

/* About column */
.ft-col-about .custom-logo { max-height: 50px; margin-bottom: 12px; }

.ft-site-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--clr-white);
    display: block;
    margin-bottom: 10px;
}

.ft-tagline {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--clr-gold);
    margin-bottom: 10px;
    line-height: 1.4;
}

.ft-about-text {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.55);
    line-height: 1.6;
    margin-bottom: 14px;
}

/* Social icons */
.ft-social {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ft-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.7);
    font-size: 13px;
    transition: background .15s, color .15s;
}

.ft-social-link:hover {
    background: var(--clr-red);
    color: var(--clr-white);
}

/* Link columns — dùng span thay H tag (SEO: tránh dùng heading trong footer) */
.ft-heading {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--clr-white);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--clr-red);
}

.ft-links li {
    margin-bottom: 5px;
}

.ft-links a {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.6);
    transition: color .12s;
}

.ft-links a:hover {
    color: var(--clr-gold);
}

/* Widget sidebar trong footer — reset wrapper, link style dùng chung ft-links */
.ft-col .widget { margin: 0; padding: 0; }
.ft-col .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ft-col .widget ul li { margin-bottom: 5px; }
.ft-col .widget ul a {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: color .12s;
}
.ft-col .widget ul a:hover { color: var(--clr-gold); }

/* Footer bottom bar */
.kqxs-footer-bottom {
    background: var(--clr-black);
    padding: 10px 0;
    text-align: center;
}

.kqxs-footer-bottom p {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.4);
    margin: 0;
}

.kqxs-footer-bottom strong {
    color: rgba(255,255,255,.65);
}


/* ============================================================
   12. Utility / Shared components
   ============================================================ */

/* Section headings (used inside main content) */
.kqxs-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--clr-red);
    color: var(--clr-white);
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 0;
}

.kqxs-section-head i {
    color: var(--clr-gold);
    font-size: 12px;
}

/* Card wrapper */
.kqxs-card {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}


/* ============================================================
   14. Homepage — H1, Region Sections, Lottery Table, Loto
   ============================================================ */

/* H1 trang chủ */
.home-h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--clr-red-dark);
    background: #fff8f8;
    border-left: 4px solid var(--clr-red);
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 0 3px 3px 0;
    line-height: 1.4;
}

/* Region section wrapper */
.region-section {
    background: var(--clr-white);
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    margin-bottom: 14px;
    overflow: hidden;
}

/* ── Section header (red bar) ── */
.rs-header {
    display: flex;
    align-items: stretch;
    background: var(--clr-red);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 1px,
        transparent 1px, transparent 8px
    );
    min-height: 46px;
}

.rs-header-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 12px;
}

.rs-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--clr-white);
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.3;
}

.rs-code {
    font-weight: 400;
    opacity: .85;
    font-size: 12.5px;
}

.rs-subtitle {
    font-size: 11.5px;
    color: rgba(255,255,255,.78);
    margin-top: 2px;
}

.rs-subtitle .region-draw-date {
    color: var(--clr-gold);
}

/* Date badge (dark box, right side) */
.rs-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #111;
    border-left: 2px solid var(--clr-gold);
    min-width: 62px;
    padding: 6px 10px;
    text-align: center;
    flex-shrink: 0;
}

.rs-badge-dm {
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-white);
    line-height: 1.2;
    display: block;
}

.rs-badge-yr {
    font-size: 12px;
    font-weight: 600;
    color: var(--clr-gold);
    background: rgba(255,255,255,.08);
    padding: 1px 4px;
    border-radius: 2px;
    display: block;
    margin-top: 2px;
    letter-spacing: 1px;
}

/* Drawing label */
.drawing-label {
    display: none;
    align-items: center;
    gap: 6px;
    background: #fff5f5;
    border-bottom: 1px solid #ffd0d0;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--clr-red);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.drawing-label .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clr-red);
    flex-shrink: 0;
    animation: kqxs-blink 1s ease-in-out infinite;
}

/* ── Bảng kết quả ── */
.rs-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lottery-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Label column */
.prize-label,
.prize-label-head {
    width: 50px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    text-align: center;
    background: #f9f9f9;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #eee;
    padding: 8px 2px;
    white-space: nowrap;
    vertical-align: middle;
}

.prize-label-head {
    background: #ececec;
    font-size: 11px;
    color: #444;
}

/* Numbers cell */
.prize-numbers {
    text-align: center;
    border-bottom: 1px solid #eee;
    padding: 8px 4px;
    vertical-align: middle;
    font-size: 20px;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.9;
}

/* T.Năm row */
.prize-tynam .prize-label  { color: #888; font-size: 11px; }
.prize-numbers-tynam { text-align: center !important; padding: 8px 10px !important; }
.tynam-prov { color: var(--clr-red-dark); font-weight: 600; font-size: 12.5px; display: block; text-align: center; }

/* Đặc biệt row */
.prize-db .prize-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--clr-red-dark);
    background: #fffaf0;
}

.prize-db .prize-numbers {
    background: #fffaf0;
    border-bottom: 2px solid var(--clr-gold);
    padding: 8px 8px;
}

.ky-hieu-box {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    padding: 1px 6px;
    margin-bottom: 4px;
    margin-top: 4px;
    letter-spacing: .5px;
}

.db-number {
    font-size: 32px;
    font-weight: 800;
    color: var(--clr-red);
    line-height: 1.2;
    letter-spacing: 3px;
}

/* G.Nhì: 2 columns */
.mb-grid { display: grid; gap: 0; }
.mb-col-1 { grid-template-columns: 1fr; }
.mb-col-2 { grid-template-columns: 1fr 1fr; }
.mb-col-3 { grid-template-columns: repeat(3, 1fr); }
.mb-col-4 { grid-template-columns: repeat(4, 1fr); }
.mb-col-5 { grid-template-columns: repeat(5, 1fr); }
.mb-col-6 { grid-template-columns: repeat(6, 1fr); }

.mb-grid > div {
    text-align: center;
    padding: 4px 2px;
    border-right: 1px dotted #eee;
}

.mb-grid > div:last-child { border-right: none; }

/* Giải sáu — màu xanh */
.prize-g6-mb .prize-numbers { color: #0070c0; }

/* Giải bảy — màu đỏ, to */
.prize-g7-mb .prize-numbers { font-size: 22px; font-weight: 800; color: var(--clr-red); }
.prize-g7-mb .mb-grid > div { padding: 4px 4px; }

/* MT/MN province header */
.province-names th {
    background: var(--clr-red);
    color: var(--clr-white);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 5px 4px;
    border-right: 1px solid rgba(255,255,255,.2);
}

.province-names th:last-child { border-right: none; }

/* MT/MN ĐB row */
.prize-db td.prize-numbers { font-size: 20px; color: var(--clr-red); font-weight: 700; }

/* MT/MN G8 */
.prize-g8 .prize-numbers { font-size: 12px; }

/* Number highlight system (xskt_hl2) */
.hl-number {
    display: inline-block;
    cursor: default;
    border-radius: 50%;
    /* Outline luôn chiếm chỗ để không gây layout shift khi hover */
    outline: 2px solid transparent;
    outline-offset: 1px;
    transition: outline-color .1s, background .1s, color .1s;
}

/* Default: show v-full, hide v-2, v-3 */
[data-display="full"] .v-2  { display: none; }
[data-display="full"] .v-3  { display: none; }
[data-display="full"] .v-full { display: inline; }

[data-display="2"] .v-full { display: none; }
[data-display="2"] .v-3    { display: none; }
[data-display="2"] .v-2    { display: inline; }

[data-display="3"] .v-full { display: none; }
[data-display="3"] .v-2    { display: none; }
[data-display="3"] .v-3    { display: inline; }

/* hl-2: no underline */
.hl2 { text-decoration: none; }

/* Hover active highlight — chỉ nổi đúng 2 số cuối, không thay đổi kích thước tổng thể */
.hl-number.hover-active {
    background: transparent;
    outline-color: transparent;
}

/* Chỉ highlight phần 2 số cuối (.hl2 trong full-mode, .v-2 trong 2-digit-mode, .v-3 trong 3-digit-mode) */
.hl-number.hover-active .hl2 {
    background: var(--clr-gold);
    color: #000;
    border-radius: 3px;
    font-weight: 800;
    padding: 0 2px;
    outline: 2px solid var(--clr-gold-dark);
    outline-offset: 0;
}

[data-display="2"] .hl-number.hover-active .v-2,
[data-display="3"] .hl-number.hover-active .v-3 {
    background: var(--clr-gold);
    color: #000;
    border-radius: 3px;
    font-weight: 800;
    padding: 0 2px;
    outline: 2px solid var(--clr-gold-dark);
    outline-offset: 0;
}

/* Loading placeholder */
.prize-loading {
    display: inline-block;
    width: 28px;
    height: 12px;
    background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
    background-size: 200% 100%;
    animation: kqxs-shimmer 1.2s ease-in-out infinite;
    border-radius: 3px;
    vertical-align: middle;
}

.prize-loading.loading-db {
    width: 60px;
    height: 20px;
}

.prize-loading-wrapper { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* Slot-machine digit (số nhảy random khi đang quay) */
.num-slot {
    display: inline-block;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--clr-red);
    min-width: .65em;
    text-align: center;
    animation: slot-blink .08s step-end infinite;
}
.prize-db .num-slot { font-size: 2rem; color: var(--clr-red); }
@keyframes slot-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .7; }
}

@keyframes kqxs-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Controls (mode + digit filter) ── */
.rs-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f8f4e8;
    border-top: 1px solid var(--clr-gold);
    border-bottom: 1px solid #ead89b;
    flex-wrap: wrap;
}

/* Mode buttons */
.display-mode-row {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.mode-btn {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #666;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.5;
    transition: background .12s, color .12s, border-color .12s;
}

.mode-btn:hover { background: #f2f2f2; }

.mode-btn.active {
    background: var(--clr-red);
    color: var(--clr-white);
    border-color: var(--clr-red-dark);
}

/* Separator */
.rs-controls::after {
    content: none;
}

/* Digit filter 0–9 */
.digit-filter-row {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.df-digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #bbb;
    font-size: 12px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    transition: background .1s, color .1s, border-color .1s;
    user-select: none;
    flex-shrink: 0;
}

.df-digit:hover,
.df-digit.digit-active {
    background: var(--clr-gold);
    border-color: var(--clr-gold-dark);
    color: #000;
}

/* ── Loto section ── */
.loto-section {
    border-top: 1px solid #eee;
}

.loto-section-head {
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
}

.loto-table-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.loto-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.loto-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.loto-table thead th {
    background: #f5f5f5;
    color: #555;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 4px 6px;
    border-bottom: 1px solid #ddd;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.loto-table tbody tr:nth-child(odd) { background: #fafafa; }
.loto-table tbody tr:nth-child(even) { background: #fff; }

.loto-head-cell {
    width: 24px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--clr-white);
    background: var(--clr-red);
    padding: 4px 2px;
    border-right: 1px solid rgba(255,255,255,.2);
    cursor: pointer;
    user-select: none;
    transition: background .1s;
}

.loto-head-cell:hover { background: var(--clr-red-dark); }

.loto-nums {
    padding: 3px 5px;
    font-size: 12.5px;
    color: var(--clr-text);
    line-height: 1.7;
    border-right: 1px solid #eee;
    min-width: 80px;
}

.loto-span {
    display: inline-block;
    padding: 0 3px;
    margin: 1px;
    border-radius: 2px;
    cursor: pointer;
    transition: background .1s, color .1s;
}

.loto-span:hover {
    background: #ffecd0;
    color: #8b5e00;
}

/* Đặc biệt loto highlight */
.loto-hi {
    background: var(--clr-gold);
    color: #000;
    font-weight: 700;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.loto-waiting {
    padding: 16px;
    text-align: center;
    color: #999;
    font-size: 12px;
}


/* ── Quick Stats MB ── */
.quick-stats-box {
    background: var(--clr-white);
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    margin-bottom: 14px;
    overflow: hidden;
}

.quick-stats-header {
    background: var(--clr-red);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 1px,
        transparent 1px, transparent 8px
    );
    color: var(--clr-white);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-stats-header .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--clr-gold);
}

.quick-stats-section {
    border-bottom: 1px solid #f0f0f0;
}

.quick-stats-section:last-child { border-bottom: none; }

.quick-stats-subtitle {
    background: #f7f7f7;
    border-bottom: 1px solid #efefef;
    font-size: 12px;
    color: #444;
    padding: 5px 12px;
    text-align: center;
}

.quick-stats-subtitle span {
    color: var(--clr-red);
    font-weight: 700;
}

.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 4px 6px 6px;
    gap: 2px 0;
}

.quick-stats-item {
    text-align: center;
    font-size: 12.5px;
    padding: 3px 4px;
    color: #444;
}

.quick-num {
    font-weight: 700;
    color: var(--clr-red);
    font-size: 13px;
}

.quick-val {
    color: #666;
    font-size: 12px;
}


/* ── Section Dự đoán 3 miền ── */
.home-dd-section {
    background: var(--clr-white);
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    margin-bottom: 14px;
    overflow: hidden;
}

.home-dd-head {
    background: var(--clr-gold);
    color: #6b3d00;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.home-dd-head i { font-size: 12px; }

.home-dd-list {
    display: flex;
    flex-direction: column;
}

.home-dd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--clr-text);
    transition: background .12s;
    text-decoration: none;
}

.home-dd-item:last-child { border-bottom: none; }

.home-dd-item:hover {
    background: #fffbf0;
    color: var(--clr-text);
}

.home-dd-thumb {
    flex-shrink: 0;
    width: 150px;
    aspect-ratio: 300 / 169;
    border-radius: 3px;
    overflow: hidden;
    background: #f0f0f0;
}

.home-dd-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.home-dd-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--clr-red) 0%, #7a0010 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(255,255,255,.8);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 4px;
}

.home-dd-thumb-placeholder i { font-size: 18px; opacity: .7; }

.home-dd-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.home-dd-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-dd-item:hover .home-dd-title { color: var(--clr-red-dark); }

.home-dd-date {
    font-size: 11.5px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 4px;
}

.home-dd-date i { font-size: 10px; color: var(--clr-gold-dark); }


/* ============================================================
   13. Responsive overrides
   ============================================================ */

/* Large desktop ≥ 1200px */
@media (min-width: 1200px) {
    .kqxs-container { padding-left: 0; padding-right: 0; }
}

/* Tablet & small desktop: hide right tagline text in header */
@media (max-width: 1200px) {
    .hd-tagline { display: none; }
    .hd-link { padding: 0 9px; font-size: 11.5px; }
}

/* Tablet ≤ 991px: switch to mobile layout */
@media (max-width: 991px) {
    .kqxs-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "main";
        padding: 8px 0 12px;
    }
    .kqxs-sb-left,
    .kqxs-sb-right { display: none; }

    .ft-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ft-col-about { grid-column: 1 / -1; }
    .prize-numbers {
        font-size: 14px;
    }
}

/* Mobile ≤ 575px */
@media (max-width: 575px) {
    .ft-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════
   § 15 — Trang kết quả 3 miền (content-xsmb, content-mtmn)
══════════════════════════════════════════════════════ */

/* .region-section đã định nghĩa ở § 12 — chỉ thêm spacing cho lịch sử */
.primary-result-wrapper { margin-bottom: 8px; }
.mb-result-box { margin-bottom: 24px; border-bottom: 2px dashed #eee; padding-bottom: 24px; }
.mb-result-box:last-child { border-bottom: none; padding-bottom: 0; }

/* ── region-header: tiêu đề đỏ (dùng chung content-xsmb + content-mtmn) ── */
.region-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--clr-red);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0,0,0,.04) 0, rgba(0,0,0,.04) 1px,
        transparent 1px, transparent 8px
    );
    padding: 8px 12px;
    min-height: 46px;
    border-radius: 4px 4px 0 0;
}

/* Dòng tiêu đề chính — MB dùng .region-name-main, MT/MN dùng .region-title */
.region-name-main,
.region-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.3;
}

/* Dòng phụ: tên tỉnh + ngày */
.region-name-sub {
    font-size: 11.5px;
    color: rgba(255,255,255,.78);
    margin-top: 2px;
}
.region-name-sub .region-draw-date { color: var(--clr-gold); }

/* ── Loto section trong trang đơn ── */
.loto-table-wrapper {
    margin-top: 15px;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    overflow: hidden;
}

.loto-header {
    background: var(--clr-red);
    padding: 7px 12px;
}

.loto-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--clr-white);
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* province-name trong thead MT/MN */
.lottery-table .province-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--clr-red);
    text-align: center;
}

/* ── Load more ── */
.load-more-wrapper {
    padding: 16px 0 8px;
    text-align: center;
}

.btn-load-more {
    background: #fff;
    border: 2px solid var(--clr-red);
    color: var(--clr-red);
    padding: 9px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .3px;
    transition: background .15s, color .15s;
    width: 100%;
}
.btn-load-more:hover { background: var(--clr-red); color: #fff; }

#load-more-spinner {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--clr-gray-mid);
}

/* ── Weekday filter tabs ── */
.weekday-filter-container {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: hidden;
}

.weekday-filter-row {
    display: flex;
    flex-wrap: wrap;
}

.weekday-item {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 8px 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--clr-text);
    text-decoration: none;
    border-right: 1px solid var(--clr-border);
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.weekday-item:last-child { border-right: none; }
.weekday-item:hover { background: #fff0f0; color: var(--clr-red); }
.weekday-item.active {
    background: var(--clr-red);
    color: #fff;
    font-weight: 700;
}

/* ── Date navigation form ── */
.dt-filter-form {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.dt-filter-row-wrap { width: 100%; }

.dt-filter-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.dt-nav-arrows { display: flex; align-items: center; gap: 4px; }

.dt-nav-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--clr-border);
    background: #f8f8f8;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-gray);
    transition: background .12s, border-color .12s, color .12s;
    flex-shrink: 0;
}
.dt-nav-btn:hover {
    background: #fff0f0;
    border-color: var(--clr-red);
    color: var(--clr-red);
}
.dt-nav-btn i { font-size: 18px; }

.dt-filter-item { display: flex; align-items: center; }

.dt-input-with-icon {
    display: flex;
    align-items: center;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    padding: 0 10px;
    gap: 6px;
    background: #fff;
    height: 36px;
}
.dt-input-with-icon i { color: var(--clr-red); font-size: 18px; flex-shrink: 0; }

.dt-input {
    border: none;
    outline: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--clr-text);
    background: transparent;
    cursor: pointer;
    min-width: 0;
    width: 110px;
}

/* ── FILTER MODE — 1 hàng ngang, label trên + input dưới ── */
.dt-filter-fields-row {
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

/* Mỗi field: label trên, input dưới */
.dt-filter-fields-row .dt-filter-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Label đồng bộ — dùng chung cho cả dt và tkdb */
.dt-filter-label,
.tkdb-filter-field label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--clr-text-light);
    white-space: nowrap;
}
.dt-filter-label-hidden { visibility: hidden; }

/* Tất cả field + nút giãn đều chiều ngang */
.dt-filter-fields-row .dt-filter-item { flex: 1 1 0; min-width: 0; }

/* Date field */
.dt-filter-fields-row .date-item .dt-input-with-icon { width: 100%; }
.dt-filter-fields-row .date-item .dt-input { min-width: 0; width: 100%; }

/* Số ngày field */
.dt-input-days {
    width: 100%;
    text-align: center;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    height: 36px;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-text);
    outline: none;
    box-sizing: border-box;
}
.dt-filter-fields-row .days-item { flex: 0 0 auto; }

/* Thứ trong tuần */
.dt-filter-fields-row .dt-select-wrapper,
.dt-filter-fields-row .dt-input-with-icon { width: 100%; }
.dt-select-wrapper { position: relative; }
.dt-select-wrapper::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--clr-gray-mid);
    pointer-events: none;
}
.dt-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    height: 36px;
    width: 100%;
    padding: 0 28px 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-text);
    background: #fff;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
}

/* Submit — căn đáy, nút full width cột */
.dt-filter-fields-row .submit-item { justify-content: flex-end; }
.dt-filter-fields-row .submit-item .dt-btn-submit { width: 100%; }
.dt-btn-submit {
    background: var(--clr-red);
    color: #fff;
    border: none;
    border-radius: 4px;
    height: 36px;
    padding: 0 18px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s;
    box-sizing: border-box;
}
.dt-btn-submit:hover { background: var(--clr-red-dark); }

/* ── AJAX loading overlay cho dt-results-list ── */
.dt-results-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.65);
    z-index: 10;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.dt-results-overlay.active { display: flex; }

.dt-results-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f0d0d4;
    border-top-color: var(--clr-red);
    border-radius: 50%;
    animation: dt-spin .7s linear infinite;
}
@keyframes dt-spin { to { transform: rotate(360deg); } }

.dt-no-results {
    padding: 24px;
    text-align: center;
    color: var(--clr-gray-mid);
    font-size: 14px;
}

/* Page H1 — dùng chung với .home-h1 */
/* H1 thống nhất toàn site — đỏ + gạch đỏ + nền đỏ mờ */
.page-h1,
.dt-title,
.tkdb-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--clr-red-dark);
    background: #fff8f8;
    border-left: 4px solid var(--clr-red);
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 0 3px 3px 0;
    line-height: 1.4;
    /* reset icon color override từ tkdb-title */
    display: block;
}
/* Icon trong h1 vẫn hiển thị đúng */
.dt-title,
.tkdb-title { display: flex; align-items: center; gap: 8px; }
.tkdb-title .tkdb-title-ico,
.dt-title .dt-title-ico { color: var(--clr-red); }

/* ══════════════════════════════════════════════════════
   § 16 — Flatpickr calendar override (dùng toàn site)
══════════════════════════════════════════════════════ */

.flatpickr-calendar {
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
    font-family: var(--font-main);
    font-size: 13px;
    width: 290px;
    padding: 0;
    overflow: hidden;
}

/* ── Header: tháng + năm ── */
.flatpickr-months {
    background: var(--clr-red);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0,0,0,.04) 0, rgba(0,0,0,.04) 1px,
        transparent 1px, transparent 8px
    );
    padding: 6px 4px;
    align-items: center;
}

.flatpickr-months .flatpickr-month { color: #fff; }

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: rgba(255,255,255,.85);
    fill: rgba(255,255,255,.85);
    padding: 6px 10px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: #fff;
    fill: #fff;
    background: rgba(0,0,0,.15);
    border-radius: 3px;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; }

.flatpickr-current-month {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
}

/* Dropdown tháng + năm — dùng !important vì flatpickr.css load từ CDN */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month select,
.flatpickr-year-dropdown {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: rgba(0,0,0,.3) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath fill='rgba(255,255,255,.75)' d='M0 0l4.5 5L9 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 7px center !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-family: var(--font-main) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 3px 24px 3px 9px !important;
    height: auto !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    outline: none !important;
    transition: background-color .12s !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month select:hover,
.flatpickr-year-dropdown:hover {
    background-color: rgba(0,0,0,.45) !important;
    border-color: rgba(255,255,255,.35) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option,
.flatpickr-year-dropdown option {
    background: var(--clr-dark);
    color: #fff;
    font-size: 13px;
}

.flatpickr-current-month .numInputWrapper { display: none; }

/* ── Day-of-week header ── */
.flatpickr-weekdays {
    background: var(--clr-dark);
    padding: 4px 0;
}
.flatpickr-weekday {
    color: var(--clr-gold) !important;
    font-weight: 700;
    font-size: 11.5px;
}

/* ── Days grid ── */
.flatpickr-days { border: none; }
.dayContainer { padding: 4px; gap: 1px; }

.flatpickr-day {
    border-radius: 50%;
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-text);
    border: 1px solid transparent;
    max-width: 36px;
    height: 36px;
    line-height: 34px;
    margin: 1px;
}

.flatpickr-day:hover {
    background: #fff0f0;
    border-color: var(--clr-red);
    color: var(--clr-red);
}

/* Ngày được chọn */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--clr-red);
    border-color: var(--clr-red);
    color: #fff;
    font-weight: 700;
}
.flatpickr-day.selected:focus { box-shadow: 0 0 0 3px rgba(200,0,30,.25); }

/* Hôm nay (chưa chọn) */
.flatpickr-day.today:not(.selected) {
    border-color: var(--clr-red);
    color: var(--clr-red);
    font-weight: 700;
}
.flatpickr-day.today:not(.selected):hover {
    background: #fff0f0;
}

/* Ngày tháng khác (mờ) */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #ccc;
}

/* Ngày bị disable */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #ddd;
    background: none;
    border-color: transparent;
    cursor: not-allowed;
}

/* ── Header label (domain) ── */
.dt-flatpickr-header {
    background: var(--clr-gold);
    color: rgba(255, 255, 255, 0.829);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    padding: 4px 0;
    text-transform: uppercase;
}

/* ── Footer buttons (Hôm nay / Xóa) ── */
.dt-flatpickr-footer {
    border-top: 1px solid #eee;
    padding: 6px 8px;
    display: flex;
    gap: 6px;
    background: #fafafa;
}

.dt-fp-btn {
    flex: 1;
    padding: 6px;
    border: 1px solid var(--clr-red);
    border-radius: 4px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--clr-red);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.dt-fp-btn:hover {
    background: var(--clr-red);
    color: #fff;
}

/* ══════════════════════════════════════════════════════
   § 17 — Vietlott Spotlight Cards (Mega 6/45, Power 6/55)
══════════════════════════════════════════════════════ */

/* Layout container */
.home-all-games-spotlight {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

/* ── Shared card shell ── */
.mg645-card,
.pw655-card {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    font-family: var(--font-main, 'Be Vietnam Pro', sans-serif);
}

/* ── Header ── */
.mg645-card__head { background: var(--clr-red); }
.pw655-card__head { background: #d45c00; }

.mg645-card__head-inner,
.pw655-card__head-inner {
    display: grid;
    grid-template-columns: 72px 1fr 72px;
    align-items: center;
    padding: 14px 16px 10px;
    gap: 8px;
}

.mg645-card__logo,
.pw655-card__logo {
    width: 64px;
    height: auto;
    display: block;
}
.mg645-card__logo-spacer,
.pw655-card__logo-spacer { width: 64px; }

.mg645-card__title-wrap,
.pw655-card__title-wrap { text-align: center; }

.mg645-card__title,
.pw655-card__title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    text-transform: uppercase;
}
.mg645-card__title a,
.pw655-card__title a,
.vietlott-title-link {
    color: inherit;
    text-decoration: none;
}

.mg645-card__meta,
.pw655-card__meta {
    color: rgba(255,255,255,.9);
    font-size: 13px !important;
    margin-top: 2px;
}

/* ── Body ── */
.mg645-card__body,
.pw655-card__body {
    position: relative;
    padding: 20px 20px 16px;
    overflow: hidden;
}

/* Watermark logo */
.vietlott-watermark {
    position: absolute;
    right: 135px;
    bottom: 50px;
    height: auto;
    opacity: .15;
    pointer-events: none;
    user-select: none;
}

/* Note text */
.mg645-card__note,
.pw655-card__note {
    text-align: center;
    margin-bottom: 14px;
}
.mg645-card__note-main,
.pw655-card__note-main {
    display: block;
    font-size: 13px;
    color: #444;
}
.mg645-card__note-sub,
.pw655-card__note-sub {
    display: block;
    font-size: 12px;
    color: #888;
    font-style: italic;
}

/* ── Ball row ── */
.mg645-ball-row,
.pw655-ball-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.mg645-ball-item,
.pw655-ball-item {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f96868 0%, #c8001e 50%, #8a0011 100%);
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,.25), inset 0 4px 8px rgba(255,255,255,.18), 0 4px 10px rgba(200,0,30,.4);
    flex-shrink: 0;
}

.pw655-ball-item {
    background: radial-gradient(circle at 35% 30%, #f98c50 0%, #d45c00 50%, #913d00 100%);
    box-shadow: inset 0 -4px 8px rgba(0,0,0,.25), inset 0 4px 8px rgba(255,255,255,.18), 0 4px 10px rgba(180,80,0,.4);
}

/* Power special (7th) ball — gold */
.pw655-ball-item.is-special {
    background: radial-gradient(circle at 35% 30%, #ffe680 0%, #f5a623 50%, #b07210 100%);
    box-shadow: inset 0 -4px 8px rgba(0,0,0,.2), inset 0 4px 8px rgba(255,255,255,.25), 0 4px 10px rgba(245,166,35,.45);
}

/* Loading/pending ball */
.mg645-ball-item.is-loading,
.pw655-ball-item.is-loading {
    background: #e0e0e0;
    box-shadow: none;
}
.mg645-ball-loading,
.pw655-ball-loading {
    width: 22px;
    height: 22px;
    border: 3px solid #bbb;
    border-top-color: #888;
    border-radius: 50%;
    animation: vt-spin .8s linear infinite;
    display: block;
}
@keyframes vt-spin {
    to { transform: rotate(360deg); }
}

/* Drawing (random) ball */
.mg645-ball-item.is-drawing,
.pw655-ball-item.is-drawing { opacity: .9; }

.mg645-ball-random,
.pw655-ball-random {
    font-size: 32px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 1em;
    text-align: center;
}

/* ── Jackpot box ── */
.mg645-jackpot-box {
    border: 2px solid #f0c4c4;
    border-radius: 6px;
    padding: 14px 20px;
    text-align: center;
    background: #fff5f5;
    margin-bottom: 16px;
}

.pw655-jackpot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.pw655-jackpot-box {
    border: 2px solid #f0c4c4;
    border-radius: 6px;
    padding: 12px 10px;
    text-align: center;
    background: #fff5f5;
}

.mg645-jackpot-box__label,
.pw655-jackpot-box__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--clr-gold, #f5a623);
    letter-spacing: .05em;
    margin-bottom: 4px;
}

.mg645-jackpot-box__value,
.pw655-jackpot-box__value {
    font-size: 26px;
    font-weight: 800;
    color: var(--clr-red);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.pw655-jackpot-box__value { font-size: 20px; }

.mg645-jackpot-box__unit,
.pw655-jackpot-box__unit {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

/* ── Prize table ── */
.mg645-table-wrap,
.pw655-table-wrap { overflow-x: auto; }

.mg645-table,
.pw655-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.mg645-table thead tr,
.pw655-table thead tr {
    background: #f9f0e0;
}

.mg645-table thead th,
.pw655-table thead th {
    padding: 8px 10px;
    text-align: center;
    font-weight: 700;
    color: var(--clr-gold, #f5a623);
    border-bottom: 2px solid #e8d5b0;
    white-space: nowrap;
}

.mg645-table tbody tr,
.pw655-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}
.mg645-table tbody tr:last-child,
.pw655-table tbody tr:last-child { border-bottom: none; }

.mg645-table td,
.pw655-table td {
    padding: 8px 10px;
    text-align: center;
    vertical-align: middle;
}
.mg645-table__name,
.pw655-table__name { text-align: left; font-weight: 600; color: #333; }

.mg645-table__amount,
.pw655-table__amount { color: var(--clr-red); font-weight: 700; white-space: nowrap; }

.mg645-table__count,
.pw655-table__count { color: #555; }

/* ── Match dots (numbered circles) ── */
.mg645-match-dots,
.pw655-match-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.mg645-match-dot,
.pw655-match-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ddd;
    color: #999;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mg645-match-dot.is-active,
.pw655-match-dot.is-active {
    background: var(--clr-red);
    color: #fff;
}

.pw655-match-plus {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    margin: 0 1px;
}

.pw655-match-star {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--clr-gold, #f5a623);
    color: #fff;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Count loading spinner */
.xskt-count-loading {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #ddd;
    border-top-color: var(--clr-red);
    border-radius: 50%;
    animation: vt-spin .8s linear infinite;
    vertical-align: middle;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .mg645-card__head-inner,
    .pw655-card__head-inner {
        grid-template-columns: 56px 1fr 56px;
        padding: 10px 12px 8px;
    }
    .mg645-card__logo,
    .pw655-card__logo { width: 48px; }
    .mg645-card__title,
    .pw655-card__title { font-size: 13px; }
    .mg645-ball-item,
    .pw655-ball-item { width: 50px; height: 50px; font-size: 22px; }
    .mg645-jackpot-box__value { font-size: 20px; }
    .pw655-jackpot-box__value { font-size: 16px; }
    .pw655-jackpot-grid { grid-template-columns: 1fr; gap: 8px; }

    /* Điện toán & Thần Tài: thu nhỏ bóng, buộc 1 hàng */
    .game-d6x36 .ball-item,
    .game-d123 .ball-item,
    .game-dtt4 .ball-item { width: 40px; height: 40px; font-size: 16px; }
    .game-d6x36 .d123-balls,
    .game-dtt4 .d123-balls { flex-wrap: nowrap; gap: 6px !important; }
    .game-d123 .d123-balls { flex-wrap: nowrap; gap: 4px !important; }
    .game-d123 .d123-group { gap: 6px; }
    .game-d123 .d123-group + .d123-group { margin-left: 2px; padding-left: 10px; }

    /* Fallback cho .ball-item ngoài context game cụ thể */
    .ball-item { width: 48px; height: 48px; font-size: 22px; }

    /* Prize table → card layout on mobile */
    .mg645-table-wrap,
    .pw655-table-wrap { overflow-x: visible; }

    .mg645-table thead,
    .pw655-table thead { display: none; }

    .mg645-table,
    .pw655-table,
    .mg645-table tbody,
    .pw655-table tbody { display: block; width: 100%; }

    .mg645-table tbody tr,
    .pw655-table tbody tr {
        display: block;
        border: 1px solid #e8e0d0;
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 10px 12px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .mg645-table tbody tr:last-child,
    .pw655-table tbody tr:last-child { border-bottom: 1px solid #e8e0d0; margin-bottom: 0; }

    /* Prize name becomes card header */
    .mg645-table__name,
    .pw655-table__name {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: var(--clr-red);
        border-bottom: 1px solid #f0e0e0;
        padding-bottom: 6px;
        margin-bottom: 8px;
        padding-left: 0;
        text-align: left;
    }

    /* Other cells: label + value in one row */
    .mg645-table td,
    .pw655-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
        text-align: right;
        border: none;
        font-size: 13px;
    }
    .mg645-table td::before,
    .pw655-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #666;
        font-size: 12px;
        white-space: nowrap;
        margin-right: 8px;
        flex-shrink: 0;
    }
    /* Name cell has no label */
    .mg645-table__name::before,
    .pw655-table__name::before { display: none; }

    /* Dots wrap correctly */
    .mg645-match-dots,
    .pw655-match-dots { flex-wrap: nowrap; gap: 3px; }
    .mg645-match-dot,
    .pw655-match-dot { width: 20px; height: 20px; font-size: 11px; }

    .mg645-table__amount,
    .pw655-table__amount { font-size: 14px; }

    .mg645-table__count,
    .pw655-table__count { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════
   § 16 — Điện toán / Thần Tài cards (D6x36, D123, TT4)
══════════════════════════════════════════════════════ */

/* 3 game nhỏ xếp dọc, mỗi card full-width */
.home-dientoan-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Card shell — giống mg645/pw655 */
.dt-result-box {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    font-family: var(--font-main, 'Be Vietnam Pro', sans-serif);
    border: none !important;
}

/* Header — override Bootstrap classes */
.dt-box-header {
    background: var(--clr-red) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    gap: 8px;
}

.dt-box-header span:first-child {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1.3;
}

.dt-box-header span:last-child {
    font-size: 12px !important;
    color: rgba(255,255,255,.85) !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Body */
.dt-box-content {
    padding: 18px 12px !important;
    text-align: center;
}

/* Ball row — base */
.d123-balls {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px !important;
}

/* Tất cả game nhỏ: bóng xếp ngang 1 hàng */
.game-d6x36 .d123-balls,
.game-dtt4 .d123-balls,
.game-d123 .d123-balls {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px !important;
}

/* D123: nhóm nằm ngang, bóng trong nhóm cũng nằm ngang */
.d123-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.d123-group + .d123-group {
    padding-left: 14px;
    border-left: 2px solid #e0e0e0;
    margin-left: 4px;
}

/* Ball — dùng chung gradient đỏ như mg645 */
.ball-item {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f96868 0%, #c8001e 50%, #8a0011 100%);
    box-shadow: inset 0 -4px 8px rgba(0,0,0,.25), inset 0 4px 8px rgba(255,255,255,.18), 0 4px 10px rgba(200,0,30,.4);
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Loading/pending ball */
.ball-item.ball-loading {
    background: #e0e0e0 !important;
    box-shadow: none !important;
    position: relative;
}

.ball-item.ball-loading::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 3px solid #bbb;
    border-top-color: #888;
    border-radius: 50%;
    animation: vt-spin .8s linear infinite;
    display: block;
}

/* .num-slot bên trong ball-item (khi đang quay) */
.ball-item .num-slot {
    font-size: 32px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
    line-height: 1;
}


/* ══════════════════════════════════════════════════════
   § 18 — Thống kê Giải Đặc Biệt (tkdb-*)
══════════════════════════════════════════════════════ */

/* Page title — style chung xem rule .tkdb-title ở section Page H1 */

/* ── Filter card ── */
.tkdb-filter-card {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.tkdb-filter-form { display: flex; flex-direction: column; gap: 10px; }

.tkdb-filter-main-row { display: flex; }
.tkdb-filter-field { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; flex: 1 1 0; min-width: 0; flex-wrap: wrap; }
.tkdb-filter-col { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; min-width: 0; }
.tkdb-filter-col--wide { flex: 1 1 0; }
.tkdb-filter-col select {
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    height: 36px;
    width: 100%;
    padding: 0 28px 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-text);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance: none;
    cursor: pointer;
    box-sizing: border-box;
}

.tkdb-filter-sub-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tkdb-time-label { font-size: 12px; font-weight: 600; color: var(--clr-text-light); white-space: nowrap; }

.tkdb-date-range-row { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.tkdb-date-field {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    height: 36px;
    padding: 0 8px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
}
.tkdb-date-ico { color: var(--clr-red); font-size: 16px; display: flex; flex-shrink: 0; }
.tkdb-datepicker {
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-text);
    width: 100%;
    min-width: 0;
    background: transparent;
    cursor: pointer;
}
.tkdb-wd { font-size: 11px; color: var(--clr-text-light); white-space: nowrap; flex-shrink: 0; }
.tkdb-arrow { color: var(--clr-gray-mid); font-size: 14px; flex-shrink: 0; }

.tkdb-search-btn {
    background: var(--clr-red);
    color: #fff;
    border: none;
    border-radius: 4px;
    height: 36px;
    padding: 0 20px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    align-self: flex-start;
    transition: background .12s;
    box-sizing: border-box;
}
.tkdb-search-btn:hover { background: var(--clr-red-dark); }

.tkdb-quick-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tkdb-quick-label { font-size: 12px; color: var(--clr-text-light); }
.tkdb-quick-btn {
    padding: 4px 10px;
    border: 1px solid var(--clr-border);
    border-radius: 20px;
    background: #fff;
    font-size: 12px;
    color: var(--clr-text);
    cursor: pointer;
    transition: all .12s;
}
.tkdb-quick-btn:hover,
.tkdb-quick-btn.is-active {
    background: var(--clr-red);
    color: #fff;
    border-color: var(--clr-red);
}

/* ── Context + mode buttons ── */
.tkdb-context {
    font-size: 13px;
    color: var(--clr-text-light);
    margin-bottom: 8px;
}
.tkdb-context strong { color: var(--clr-text); }
.tkdb-context span { color: var(--clr-red); font-weight: 700; }

.tkdb-mode-row {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.tkdb-mode-btn {
    padding: 5px 14px;
    border: 1px solid var(--clr-red);
    border-radius: 4px;
    background: #fff;
    color: var(--clr-red);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
}
.tkdb-mode-btn:hover,
.tkdb-mode-btn.is-active {
    background: var(--clr-red);
    color: #fff;
}

/* ── Calendar card ── */
.tkdb-card {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}
.tkdb-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-white);
    padding: 10px 14px;
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-red);
}
.tkdb-card-title .tkdb-title-ico { color: var(--clr-white); display: flex; }

.tkdb-card-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 14px;
    border-bottom: 1px solid var(--clr-border);
}
.tkdb-card-subtitle.is-red  { color: var(--clr-red);  background: #fff8f8; }
.tkdb-card-subtitle.is-red .tkdb-title-ico  { color: var(--clr-red); display: flex; }
.tkdb-card-subtitle.is-blue { color: #0070c0; background: #f0f6ff; }
.tkdb-card-subtitle.is-blue .tkdb-title-ico { color: #0070c0; display: flex; }
.tkdb-card-subtitle.is-green { color: #1a7f4e; background: #f0faf5; }
.tkdb-card-subtitle.is-green .tkdb-title-ico { color: #1a7f4e; display: flex; }

/* ── Calendar table ── */
.tkdb-table-wrap { overflow-x: auto; }
.tkdb-calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.tkdb-calendar thead th {
    background: #fff0f0;
    color: var(--clr-red-dark);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 7px 4px;
    border-right: 1px solid rgba(255,255,255,.1);
}
.tkdb-calendar thead th:last-child { border-right: none; }
.tkdb-calendar tbody td {
    text-align: center;
    padding: 6px 4px;
    border: 1px solid #f0f0f0;
    vertical-align: middle;
}
.tkdb-calendar tbody td.is-empty { background: #fafafa; }
.tkdb-calendar tbody td.has-value .db-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-red);
    line-height: 1.3;
}
.tkdb-calendar tbody td.no-value .db-value {
    color: var(--clr-gray-mid);
    font-size: 14px;
}
.tkdb-calendar tbody td .db-day {
    font-size: 11px;
    color: var(--clr-text-light);
    margin-top: 2px;
}
/* Thứ 7 / CN chữ xanh */
.tkdb-calendar tbody td:nth-child(6) .db-day,
.tkdb-calendar tbody td:nth-child(7) .db-day { color: #0070c0; }

/* ── Stat tables ── */
.tkdb-stat-table {
    width: 100%;
    border-collapse: collapse;
}
.tkdb-stat-table thead th {
    background: var(--clr-gray-light);
    font-size: 12px;
    font-weight: 700;
    color: var(--clr-text-light);
    text-align: center;
    padding: 7px 8px;
    border-bottom: 2px solid var(--clr-border);
}
.tkdb-stat-table tbody td {
    text-align: center;
    padding: 7px 8px;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
}
.tkdb-stat-table tbody tr:last-child td { border-bottom: none; }
.tkdb-stat-table tbody tr:hover td { background: #fafafa; }
.tkdb-stat-table td.is-red { color: var(--clr-red); font-weight: 700; font-size: 14px; }

/* ══════════════════════════════════════════════
   §19 — Thống kê tần suất (tkts)
══════════════════════════════════════════════ */

/* Nút submit cùng hàng với các field — căn đáy theo field cao nhất */
.tkdb-filter-submit-col { flex: 0 0 auto; justify-content: flex-end; }
.tkdb-filter-submit-col .tkdb-search-btn { width: 100%; }
.tkdb-filter-label-hidden { visibility: hidden; display: block; font-size: 11.5px; font-weight: 600; line-height: 1.4; }

/* Context line */
.tkts-context {
    font-size: 13px;
    color: var(--clr-text-light);
    margin-bottom: 10px;
    padding: 6px 10px;
    background: #f8f8f8;
    border-radius: 4px;
}
.tkts-context strong { color: var(--clr-text); }
.tkts-context span { color: var(--clr-red); font-weight: 700; }

/* Card wrapper */
.tkts-card {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}

/* Card title */
.tkts-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--clr-text);
    padding: 10px 14px;
    border-bottom: 1px solid var(--clr-border);
    background: #fafafa;
    margin: 0;
}
.tkts-card-title small { font-size: 11.5px; font-weight: 400; color: var(--clr-text-light); }
.tkts-card-title .is-red  { color: var(--clr-red); }
.tkts-card-title .is-blue { color: #1e6fc8; }
.tkts-card-title .is-green { color: #1e8a3c; }

/* Icon badge */
.tkts-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tkts-ico.is-red   { background: #fff0f0; color: var(--clr-red); }
.tkts-ico.is-blue  { background: #eff5ff; color: #1e6fc8; }
.tkts-ico.is-green { background: #f0fff4; color: #1e8a3c; }
.tkts-ico.is-yellow{ background: #fffbe6; color: #b45309; }

/* Tables */
.tkts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tkts-table thead th {
    background: var(--clr-red);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    padding: 7px 10px;
}
.tkts-table tbody td {
    text-align: center;
    padding: 7px 10px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--clr-text);
}
.tkts-table tbody tr:last-child td { border-bottom: none; }
.tkts-table tbody tr:hover td { background: #fafafa; }
.tkts-table td.is-num {
    color: var(--clr-red);
    font-weight: 700;
    font-size: 14px;
}

/* 2-col table: alternate col backgrounds */
.tkts-table-2col td:nth-child(3),
.tkts-table-2col td:nth-child(4) { background: #fafafa; }
.tkts-table-2col tr:hover td:nth-child(3),
.tkts-table-2col tr:hover td:nth-child(4) { background: #f4f4f4; }

/* Note box */
.tkts-note-box {
    background: #fffbe6;
    border: 1px solid #f5d060;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.tkts-note-box h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #92400e;
    margin: 0 0 8px 0;
}
.tkts-note-box ul {
    margin: 0;
    padding-left: 18px;
}
.tkts-note-box li {
    font-size: 12.5px;
    color: #78350f;
    margin-bottom: 4px;
    line-height: 1.5;
}
.tkts-note-box li:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════
   §20 — Thống kê Loto 00-99 (tkloto)
══════════════════════════════════════════════ */

/* Radio group */
.tkloto-radios { display: flex; align-items: center; gap: 12px; height: 36px; }
.tkloto-radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-text);
    cursor: pointer;
    white-space: nowrap;
}
.tkloto-radio-label input[type="radio"] { accent-color: var(--clr-red); width: 14px; height: 14px; cursor: pointer; }

/* Context line */
.tkloto-context {
    font-size: 13px;
    color: var(--clr-text-light);
    margin-bottom: 10px;
    padding: 6px 10px;
    background: #f8f8f8;
    border-radius: 4px;
}
.tkloto-context strong { color: var(--clr-text); }
.tkloto-context span { color: var(--clr-red); font-weight: 700; }

/* Results wrapper */
.tkloto-results-wrap { position: relative; }

/* Table */
.tkloto-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}
.tkloto-table thead th {
    background: var(--clr-red);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    padding: 8px 10px;
    white-space: nowrap;
}
.tkloto-table tbody tr:nth-child(even) { background: #fafafa; }
.tkloto-table tbody tr:hover { background: #fff0f0; }
.tkloto-table tbody td { padding: 5px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.tkloto-table tbody tr:last-child td { border-bottom: none; }

/* Columns */
.tkloto-col-num {
    width: 48px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--clr-red);
}
.tkloto-col-chart { width: auto; }
.tkloto-col-percent {
    width: 140px;
    text-align: right;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--clr-text-light);
}

/* Bar chart */
.tkloto-bar-container {
    background: #eee;
    border-radius: 3px;
    height: 22px;
    position: relative;
    overflow: hidden;
}
.tkloto-bar {
    background: linear-gradient(to right, var(--clr-red) 0%, rgba(200,0,30,0.25) 100%);
    height: 100%;
    border-radius: 3px;
    display: flex;
    align-items: center;
    min-width: 24px;
    transition: width .3s ease;
}
.tkloto-bar-label {
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 0 6px;
    white-space: nowrap;
}

/* Note box — dùng lại style tkts-note-box */
.tkloto-note {
    background: #fffbe6;
    border: 1px solid #f5d060;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: #78350f;
}
.tkloto-note strong { color: #92400e; display: block; margin-bottom: 6px; }
.tkloto-note ul { margin: 0; padding-left: 18px; }
.tkloto-note li { margin-bottom: 4px; line-height: 1.5; }
.tkloto-note li:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════
   §21 — Thống kê lô gan (tkgan)
══════════════════════════════════════════════ */

/* Context line */
.tkgan-context {
    font-size: 13px;
    color: var(--clr-text-light);
    margin-bottom: 10px;
    padding: 6px 10px;
    background: #f8f8f8;
    border-radius: 4px;
}
.tkgan-context strong { color: var(--clr-text); }
.tkgan-context span { color: var(--clr-red); font-weight: 700; }

/* Card */
.tkgan-card {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}
.tkgan-card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    background: var(--clr-red);
    padding: 10px 14px;
    margin: 0;
}

/* Table */
.tkgan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tkgan-table thead th {
    background: #fafafa;
    color: var(--clr-text-light);
    font-weight: 700;
    font-size: 12px;
    text-align: left;
    padding: 7px 14px;
    border-bottom: 2px solid var(--clr-border);
}
.tkgan-table tbody tr:nth-child(even) { background: #fafafa; }
.tkgan-table tbody tr:hover { background: #fff0f0; }
.tkgan-table tbody td {
    padding: 7px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--clr-text);
    font-size: 13px;
}
.tkgan-table tbody tr:last-child td { border-bottom: none; }
.tkgan-table td.is-red { color: var(--clr-red); font-weight: 700; font-size: 14px; }

/* 4-col table: align center cho cột số */
.tkgan-table-4col th,
.tkgan-table-4col td { text-align: center; }
.tkgan-table-4col td:nth-child(3),
.tkgan-table-4col td:nth-child(4) { background: rgba(0,0,0,.015); }
.tkgan-table-4col tr:hover td:nth-child(3),
.tkgan-table-4col tr:hover td:nth-child(4) { background: #ffe8e8; }

/* =====================================================
   §22 tkdd – Thống kê đầu đuôi loto
   ===================================================== */

/* Table card */
.tkdd-table-card {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
}
.tkdd-table-card h2 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--clr-red);
    padding: 10px 14px;
    margin: 0;
}
.tkdd-range-note {
    font-size: 12px;
    color: var(--clr-text-light);
    padding: 6px 14px;
    margin: 0;
    border-bottom: 1px solid var(--clr-border);
}

/* Table */
.tkdd-table-scroll { overflow-x: auto; }
.tkdd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 480px;
}
.tkdd-table thead th {
    background: #f5f5f5;
    color: var(--clr-text-light);
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    padding: 7px 6px;
    border-bottom: 2px solid var(--clr-border);
    white-space: nowrap;
}
.tkdd-table thead th:first-child { text-align: left; padding-left: 12px; }
.tkdd-table tbody td {
    text-align: center;
    padding: 6px 6px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-text);
}
.tkdd-table tbody tr:last-child td { border-bottom: none; }
.tkdd-table tbody tr:nth-child(even) { background: #fafafa; }
.tkdd-table tbody tr:hover { background: #fff4f4; }

/* Date column */
.tkdd-date-cell {
    text-align: left !important;
    padding-left: 12px !important;
    white-space: nowrap;
    color: var(--clr-text-light);
    font-size: 12px !important;
}

/* Count cell colors */
.tkdd-table td.is-zero { color: #bbb; }
.tkdd-table td.is-low { color: var(--clr-text); }
.tkdd-table td.is-mid { color: #0a8a3a; font-weight: 700; }
.tkdd-table td.is-high { color: var(--clr-red); font-weight: 800; font-size: 14px !important; }

/* Submit row below filter fields (used when date range needs full width) */
.tkdb-filter-submit-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}
.tkdb-filter-submit-row .tkdb-search-btn {
    min-width: 120px;
}

/* =====================================================
   §23 tkkep – Thống kê loto kép / xiên
   ===================================================== */

.tkkep-context {
    font-size: 13px;
    color: var(--clr-text-light);
    padding: 8px 12px;
    background: #f8f8f8;
    border-radius: 4px;
    margin-bottom: 12px;
}
.tkkep-context strong { color: var(--clr-text); }
.tkkep-context span { color: var(--clr-red); font-weight: 700; }

/* Table */
.tkkep-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tkkep-table thead th {
    background: var(--clr-red);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-align: left;
    padding: 9px 14px;
    border: none;
}
.tkkep-table tbody tr:nth-child(even) { background: #fafafa; }
.tkkep-table tbody tr:hover { background: #fff4f4; }
.tkkep-table tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: var(--clr-text);
    vertical-align: middle;
}
.tkkep-table tbody tr:last-child td { border-bottom: none; }

/* Pair column */
.tkkep-pair-cell {
    font-weight: 700;
    font-size: 14px !important;
    color: var(--clr-dark) !important;
    white-space: nowrap;
    width: 90px;
}

/* Count column */
.tkkep-count-cell {
    white-space: nowrap;
    width: 100px;
    color: var(--clr-text-light) !important;
}
.tkkep-count-num {
    font-weight: 800;
    font-size: 14px;
    color: var(--clr-gold);
}

/* Dates column */
.tkkep-dates-cell {
    color: var(--clr-red) !important;
    font-size: 12.5px !important;
}

/* =====================================================
   §24 tkcky – Thống kê chu kỳ (full-width, no sidebar)
   ===================================================== */

/* Full-width layout – remove sidebar grid */
.tkcky-fullwidth-page { max-width: 1380px; padding: 0 12px; box-sizing: border-box; }
.tkcky-main { width: 100%; padding: 8px 0 16px; }

/* Table wrapper – scrollable, sticky first col */
.tkcky-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    background: #fff;
    position: relative;
}

/* Table */
.tkcky-table {
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}
.tkcky-table th,
.tkcky-table td {
    padding: 0;
    text-align: center;
    border: 1px solid #ebebeb;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Header rows */
.tkcky-row-month .tkcky-hdr-date { background: var(--clr-red); color: #fff; font-weight: 700; height: 24px; line-height: 24px; font-size: 11px; }
.tkcky-row-day .tkcky-hdr-date { background: #f5f5f5; color: var(--clr-text-light); font-weight: 700; height: 22px; line-height: 22px; font-size: 11px; }
.tkcky-hdr-label {
    background: var(--clr-red);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    width: 54px;
    min-width: 54px;
}
.tkcky-row-day .tkcky-hdr-label { background: #f5f5f5; color: var(--clr-text-light); }

/* Sticky first column */
.tkcky-sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
}
.tkcky-num-cell {
    background: #f9f9f9;
    font-weight: 700;
    font-size: 12px;
    color: var(--clr-text);
    width: 54px;
    min-width: 54px;
    height: 26px;
    line-height: 26px;
    border-right: 2px solid var(--clr-border);
}
/* Override sticky bg for header */
.tkcky-hdr-label.tkcky-sticky-col { z-index: 3; }

/* Data cells */
.tkcky-data-cell {
    height: 26px;
    line-height: 26px;
    color: transparent;
    font-size: 11px;
}
.tkcky-data-cell.tkcky-hit {
    background: #fff8e1;
    color: var(--clr-red);
    font-weight: 700;
}

/* Alternating rows */
.tkcky-table tbody tr:nth-child(even) .tkcky-num-cell { background: #f4f4f4; }
.tkcky-table tbody tr:nth-child(even) .tkcky-data-cell { background: #fafafa; }
.tkcky-table tbody tr:nth-child(even) .tkcky-data-cell.tkcky-hit { background: #fff3c0; }
.tkcky-table tbody tr:hover .tkcky-data-cell { background: #fff0f0; }
.tkcky-table tbody tr:hover .tkcky-data-cell.tkcky-hit { background: #ffe0a0; }

/* Mobile */
@media (max-width: 768px) {
    .tkcky-fullwidth-page { padding: 0 6px; }
    .tkcky-hdr-label, .tkcky-num-cell { width: 42px; min-width: 42px; font-size: 11px; }
    .tkcky-data-cell, .tkcky-hdr-date { font-size: 10px; }
}

/* =====================================================
   §25 Responsive filter forms — ≤ 991px (mobile/tablet)
   Tất cả filter fields stack dọc để tránh bị khuất
   ===================================================== */

@media (max-width: 991px) {

    /* ── Vietlott filter (dt-filter-fields-row) ── */
    .dt-filter-fields-row {
        flex-direction: column;
        gap: 10px;
    }
    .dt-filter-fields-row .dt-filter-item {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
    .dt-filter-fields-row .days-item { flex: 1 1 auto; }
    .dt-filter-fields-row .submit-item { justify-content: stretch; }
    .dt-filter-fields-row .submit-item .dt-btn-submit { width: 100%; }

    /* ── Thống kê filter (tkdb-filter-field) ── */
    .tkdb-filter-field {
        gap: 10px;
    }
    .tkdb-filter-col,
    .tkdb-filter-col--wide,
    .tkdb-filter-submit-col {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
    .tkdb-filter-col select { width: 100%; }

    /* Nút tìm kiếm full width */
    .tkdb-filter-submit-col { justify-content: stretch; }
    .tkdb-filter-submit-col .tkdb-search-btn { width: 100%; }

    /* Submit row (dùng ở tkdd) */
    .tkdb-filter-submit-row { justify-content: stretch; }
    .tkdb-filter-submit-row .tkdb-search-btn { width: 100%; }

    /* Date range row — stack từng date field */
    .tkdb-date-range-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .tkdb-date-range-row .tkdb-date-field {
        flex: 1 1 140px;
        min-width: 0;
    }

    /* Loto radios (tkloto) */
    .tkloto-radios {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* =====================================================
   §26 tkck – Thống kê chu kỳ dàn lô tô
   ===================================================== */

/* Bottom row: chế độ + nút xem cùng hàng */
.tkck-bottom-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.tkck-mode-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1 1 0;
}
.tkck-mode-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--clr-text-light);
    white-space: nowrap;
}
.tkck-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.tkck-radio-label input[type="radio"] { accent-color: var(--clr-red); }

/* Numbers input */
.tkck-numbers-wrap {
    margin-top: 12px;
}
.tkck-numbers-wrap > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--clr-text-light);
    margin-bottom: 6px;
}
.tkck-number-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.tkck-number-input-row input[type="text"] {
    flex: 1 1 0;
    height: 36px;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    padding: 0 10px;
    font-size: 13px;
    color: var(--clr-text);
    outline: none;
    min-width: 0;
}
.tkck-number-input-row input[type="text"]:focus { border-color: var(--clr-red); }
.tkck-btn-add {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--clr-red);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tkck-btn-add:hover { background: #a50018; }

/* Chips */
.tkck-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    min-height: 0;
}
.tkck-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff0f0;
    border: 1px solid #f5c0c0;
    color: var(--clr-red);
    font-size: 12.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    cursor: pointer;
    line-height: 1.4;
}
.tkck-chip:hover { background: #ffd5d5; }
.tkck-chip i { font-style: normal; font-size: 14px; opacity: .7; }
.tkck-clear-btn {
    font-size: 11.5px;
    color: var(--clr-text-light);
    background: none;
    border: 1px solid var(--clr-border);
    border-radius: 20px;
    padding: 3px 10px;
    cursor: pointer;
}
.tkck-clear-btn:hover { color: var(--clr-red); border-color: var(--clr-red); }

/* Quick buttons */
.tkck-quick-wrap { margin-top: 12px; }
.tkck-quick-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--clr-text-light);
    margin-bottom: 6px;
}
.tkck-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tkck-quick-btn {
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    background: #fafafa;
    color: var(--clr-text);
    cursor: pointer;
    line-height: 1.5;
}
.tkck-quick-btn:hover { background: #fff0f0; border-color: var(--clr-red); color: var(--clr-red); }

/* Submit */
.tkck-submit-btn { flex-shrink: 0; }

/* Empty state */
.tkck-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--clr-text-light);
    background: #fafafa;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
}
.tkck-empty-ico {
    color: var(--clr-red);
    opacity: .35;
    display: block;
    margin-bottom: 12px;
}
.tkck-empty-state p {
    font-size: 14px;
    color: var(--clr-text);
    margin: 0 0 6px;
}
.tkck-empty-state strong { color: var(--clr-red); }
.tkck-empty-state small { font-size: 12px; color: var(--clr-text-light); }

/* Summary cards */
.tkck-summary-cards {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tkck-summary-card {
    flex: 1 1 0;
    min-width: 90px;
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tkck-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tkck-card-icon { width: 16px; height: 16px; color: var(--clr-text-light); flex-shrink: 0; }
.tkck-card-label { font-size: 11px; color: var(--clr-text-light); font-weight: 600; white-space: nowrap; }
.tkck-summary-card strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--clr-text);
    line-height: 1.2;
}
.tkck-summary-card.is-total strong { color: var(--clr-text); }
.tkck-summary-card.is-hit strong { color: #0a8a3a; }
.tkck-summary-card.is-current-gap strong { color: var(--clr-gold); }
.tkck-summary-card.is-max-gap strong { color: var(--clr-red); }
.tkck-summary-card.is-avg-gap strong { color: #6c47d6; }
.tkck-unit { font-size: 13px; font-weight: 500; color: var(--clr-text-light); }

/* Selected info */
.tkck-selected-info {
    font-size: 12.5px;
    color: var(--clr-text-light);
    padding: 8px 12px;
    background: #f8f8f8;
    border-radius: 4px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tkck-selected-info strong { color: var(--clr-text); }

/* Results table */
.tkck-results-wrap { margin-top: 16px; }
.tkck-table-box {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
}
.tkck-table-box h2 {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    background: var(--clr-red);
    padding: 9px 14px;
    margin: 0;
}
.tkck-history-scroll { overflow-x: auto; }
.tkck-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tkck-table thead th {
    background: #f5f5f5;
    color: var(--clr-text-light);
    font-weight: 700;
    font-size: 12px;
    text-align: left;
    padding: 7px 14px;
    border-bottom: 2px solid var(--clr-border);
}
.tkck-table tbody td {
    padding: 7px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--clr-text);
    font-size: 13px;
    text-align: left;
}
.tkck-table tbody tr:last-child td { border-bottom: none; }
.tkck-table tbody tr:nth-child(even) { background: #fafafa; }
.tkck-table tbody tr:hover { background: #fff4f4; }
.tkck-table td:nth-child(3) { color: var(--clr-text-light); }

/* Pills (gap badges) */
.tkck-pill {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}
.tkck-pill.is-low { background: #e8f5e9; color: #2e7d32; }
.tkck-pill.is-medium { background: #fff8e1; color: #f57f17; }
.tkck-pill.is-high { background: #ffebee; color: var(--clr-red); }

/* Hit ratio */
.tkck-hit-ratio { font-weight: 700; color: var(--clr-red); font-size: 12px; }
.tkck-hit-numbers { display: flex; flex-wrap: wrap; gap: 4px; }

/* Mobile */
@media (max-width: 991px) {
    .tkck-bottom-row { flex-direction: column; align-items: flex-start; }
    .tkck-submit-btn { width: 100%; }
    .tkck-summary-cards { gap: 8px; }
    .tkck-summary-card { min-width: calc(50% - 4px); flex: 0 0 calc(50% - 4px); }
    .tkck-summary-card strong { font-size: 18px; }
}

/* =====================================================
   §27 Fixes
   ===================================================== */

/* Fix: input (gốc hoặc altInput) bên trong tkdb-date-field — reset border/bg thừa.
   Dùng height: 36px (không dùng 100% vì không resolve đúng trong flex container).
   Specificity 0,2,1 để override mọi rule .xxx-item input[type="text"] */
.tkdb-date-field input[type="text"],
.tkdb-date-field input[type="text"]:focus {
    height: 36px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.tkdb-date-field input[type="text"]::placeholder { color: var(--clr-text-light); font-weight: 400; }

/* Fix tkck summary cards: grid 2×2 + Tổng full-width bên dưới
   Thứ tự: Số lần | Chu kỳ TB
           Gan hiện tại | Gan cực đại
           Tổng (full-width)
*/
.tkck-summary-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.tkck-summary-card.is-hit       { order: 1; }
.tkck-summary-card.is-avg-gap   { order: 2; }
.tkck-summary-card.is-current-gap { order: 3; }
.tkck-summary-card.is-max-gap   { order: 4; }
.tkck-summary-card.is-total     { order: 5; grid-column: 1 / -1; }

/* Tổng card nằm dưới — nhỏ hơn một chút */
.tkck-summary-card.is-total { padding: 8px 14px; }
.tkck-summary-card.is-total .tkck-card-head { margin-bottom: 2px; }
.tkck-summary-card.is-total strong { font-size: 18px; }

@media (max-width: 991px) {
    .tkck-summary-cards { grid-template-columns: 1fr 1fr; }
    .tkck-summary-card { min-width: 0; flex: unset; }
}

/* §28 tkck summary cards — căn giữa nội dung */
.tkck-summary-card {
    align-items: center;
    text-align: center;
}
.tkck-card-head {
    justify-content: center;
}
.tkck-summary-card strong {
    display: block;
}

/* =====================================================
   §29 scdb – Soi cầu (base scaffold, shared across all soi-cau pages)
   Áp dụng cho: scdb-page, sclbt-page, sc3cl-page
   Styling chi tiết từng trang sẽ được thêm trong các section tiếp theo
   ===================================================== */

/* Filter card — giống tkdb-filter-card */
.scdb-filter-card {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

/* Title — đồng bộ với .tkdb-title */
.scdb-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--clr-red-dark);
    background: #fff8f8;
    border-left: 4px solid var(--clr-red);
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 0 3px 3px 0;
    line-height: 1.4;
}
.scdb-title svg { flex-shrink: 0; color: var(--clr-red); }
.scdb-title-ico { color: var(--clr-red); display: flex; }

/* Filter form rows — label trên, input dưới, đồng bộ tkdb */
.scdb-filter-form { display: flex; flex-direction: column; gap: 10px; }

/* scdb-item dùng trực tiếp trong form (không trong scdb-row) — full width */
.scdb-filter-form > .scdb-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.scdb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.scdb-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}
.scdb-item label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--clr-text-light);
    white-space: nowrap;
}
.scdb-item select,
.scdb-item input[type="text"],
.scdb-item input[type="number"] {
    height: 36px;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    padding: 0 10px;
    font-size: 13px;
    color: var(--clr-text);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.scdb-item select:focus,
.scdb-item input:focus { border-color: var(--clr-red); }

/* Date field trong scdb-item */
.scdb-item .tkdb-date-field { flex: unset; width: 100%; }

/* Hàng 2 ngày: 2 cột cố định */
.scdb-row-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Hàng 3 options: 2 cột + toggle full-width bên dưới */
.scdb-row-opt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.scdb-row-opt .scdb-switch-wrap {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.scdb-row-opt .scdb-switch-wrap .scdb-switch-label {
    white-space: normal;
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--clr-text-light);
}

/* Submit button */
.scdb-submit-btn {
    height: 38px;
    padding: 0 20px;
    background: var(--clr-red);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    width: 100%;
}
.scdb-submit-btn:hover { background: #a50018; }

/* Submit row */
.scdb-submit-row,
.scdb-row-submit {
    display: flex;
    margin-top: 2px;
}
.scdb-submit-row .scdb-submit-btn,
.scdb-row-submit .scdb-submit-btn { width: 100%; }

/* Mobile */
@media (max-width: 991px) {
    /* Submit */
    .scdb-submit-row,
    .scdb-row-submit { justify-content: stretch; }
    .scdb-submit-row .scdb-submit-btn,
    .scdb-row-submit .scdb-submit-btn { width: 100%; }

    .scdb-filter-card { padding: 12px; }
}

/* Phone rất nhỏ < 360px — xếp dọc */
@media (max-width: 360px) {
    .scdb-row-dates,
    .scdb-row-opt {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   §30 scdb-page – Soi cầu giải đặc biệt (grid + modal + detail)
   ===================================================== */

/* Results wrap — needs position: relative for overlay */
#scdb-results-wrap { position: relative; }

/* Date row inside scdb filter */
.scdb-date-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.scdb-date-row .tkdb-date-field { flex: 1 1 140px; min-width: 0; }

/* Wide date item */
.scdb-item-date { flex: 2 1 0; }

/* Switch toggle */
.scdb-switch-wrap { align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.scdb-switch-wrap .scdb-switch-label { font-size: 11.5px; font-weight: 600; color: var(--clr-text-light); white-space: nowrap; flex: 1 1 auto; }
.scdb-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.scdb-switch input { opacity: 0; width: 0; height: 0; }
.scdb-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 22px;
    cursor: pointer;
    transition: background .2s;
}
.scdb-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
}
.scdb-switch input:checked + .scdb-slider { background: var(--clr-red); }
.scdb-switch input:checked + .scdb-slider::before { transform: translateX(18px); }

/* Grid card */
.scdb-grid-card {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
}

/* Grid table — 10 rows × 10 cells */
.scdb-grid-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.scdb-grid-table th,
.scdb-grid-table td {
    border: 1px solid #e8e8e8;
    text-align: center;
    vertical-align: middle;
    padding: 4px 2px;
}
.scdb-grid-table th {
    background: var(--clr-red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    width: 56px;
    padding: 6px 4px;
}
.scdb-grid-table td { background: #fff; cursor: default; }
.scdb-cell-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-dark);
    line-height: 1.2;
}
.scdb-cell-hit {
    font-size: 11px;
    color: var(--clr-red);
    font-weight: 600;
    line-height: 1.2;
}
.scdb-grid-table td.is-empty .scdb-cell-num { color: #ccc; }
.scdb-grid-table td.is-empty .scdb-cell-hit { color: #ddd; }
.scdb-grid-table td:not(.is-empty) { background: #fff9f0; }

/* Pairs button */
.scdb-btn-pairs {
    display: inline-block;
    padding: 8px 20px;
    background: #fff;
    border: 1.5px solid var(--clr-red);
    color: var(--clr-red);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
    margin: 12px 0;
}
.scdb-btn-pairs:hover { background: var(--clr-red); color: #fff; }

/* Modal overlay */
.scdb-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,.55);
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
body.scdb-modal-open { overflow: hidden; }
.scdb-modal-content {
    background: #fff;
    border-radius: 8px;
    padding: 24px 20px 20px;
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.scdb-modal-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--clr-red);
    margin: 0 0 16px;
    padding-right: 24px;
}
.scdb-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    font-weight: 300;
}
.scdb-modal-close:hover { color: var(--clr-red); }

/* Pairs grid */
.scdb-pairs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.scdb-pair-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #fff9f0;
    border: 1px solid #f0e0cc;
    border-radius: 4px;
    font-size: 13px;
}
.scdb-pair-label { font-weight: 700; color: var(--clr-dark); }
.scdb-pair-count { color: var(--clr-red); font-weight: 600; white-space: nowrap; }
.scdb-pairs-empty { color: #aaa; font-size: 13px; }

/* Daily detail section */
.scdb-detail-wrap {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}
.scdb-detail-wrap > h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--clr-red);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--clr-red);
}
.scdb-day-card {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--clr-border);
}
.scdb-day-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.scdb-day-card > h3 {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--clr-red);
    margin: 0 0 10px;
    padding: 7px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.scdb-day-table-wrap { overflow-x: auto; }
.scdb-day-table { width: 100%; border-collapse: collapse; min-width: 280px; }
.scdb-day-table td { padding: 5px 10px; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.scdb-day-table .prize-label { font-weight: 600; color: var(--clr-text-light); white-space: nowrap; width: 69px; font-size: 11px; }
.scdb-day-table .prize-numbers { color: var(--clr-dark); font-weight: 600; }
.scdb-day-table .prize-db .prize-numbers { font-size: 28px; font-weight: 800; color: var(--clr-red); }
.scdb-r-db td { background: #fff8f8; }
.scdb-special-note { font-size: 12px; color: var(--clr-text-light); margin: 8px 0 0; }
.scdb-special-note strong { color: var(--clr-dark); }
.scdb-special-note span { color: var(--clr-red); font-weight: 700; }
.scdb-empty-note { color: #aaa; font-size: 13px; }

/* Responsive */
@media (max-width: 767px) {
    .scdb-grid-table th { font-size: 10px; padding: 4px 2px; }
    .scdb-cell-num { font-size: 12px; }
    .scdb-cell-hit { font-size: 10px; }
}

/* =====================================================
   §31 sclbt – Soi cầu loto bạch thủ (detail extras)
   ===================================================== */

/* Summary note */
.sclbt-summary-note {
    font-size: 13px;
    color: var(--clr-text-light);
    margin: 0 0 14px;
    line-height: 1.6;
}
.sclbt-summary-note strong { color: var(--clr-dark); }

/* Loto trực tiếp table */
.sclbt-loto-direct-wrap {
    margin-top: 12px;
    overflow-x: auto;
}
.sclbt-loto-direct-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 280px;
}
.sclbt-loto-direct-table thead tr th {
    background: #f5f5f5;
    color: var(--clr-text-light);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-align: center;
    padding: 6px 4px;
    border: 1px solid #e0e0e0;
    text-transform: uppercase;
}
.sclbt-loto-direct-table tbody td {
    border: 1px solid #e8e8e8;
    text-align: center;
    padding: 7px 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-dark);
    background: #fff;
}
.sclbt-loto-direct-table tbody td:empty,
.sclbt-loto-direct-table tbody td:blank { color: transparent; }
.sclbt-loto-direct-table tbody tr:hover td { background: #fff9f0; }

/* ============================================================
   §32  sc3cl – Soi cầu 3 càng loto
   ============================================================ */

/* Grid các ô số 3 càng */
.sc3cl-grid-card {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    padding: 14px 12px 12px;
    margin-bottom: 18px;
}

.sc3cl-grid-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sc3cl-box-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff8f8;
    border: 1px solid #f5c6c6;
    border-radius: 5px;
    padding: 6px 10px 5px;
    min-width: 58px;
    text-align: center;
    transition: background .15s;
}
.sc3cl-box-item:hover {
    background: #ffe8e8;
}

.sc3cl-box-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--clr-red);
    line-height: 1.2;
    letter-spacing: .5px;
}

.sc3cl-box-hit {
    font-size: 11px;
    color: var(--clr-text-light);
    margin-top: 2px;
    white-space: nowrap;
}

/* Summary note */
.sc3cl-summary-note {
    font-size: 13px;
    color: var(--clr-text-light);
    line-height: 1.6;
    margin: 4px 0 6px;
}

@media (max-width: 600px) {
    .sc3cl-box-item {
        min-width: 52px;
        padding: 5px 7px 4px;
    }
    .sc3cl-box-num { font-size: 16px; }
}

/* ============================================================
   §33  scpas – Soi cầu tam giác pascal
   ============================================================ */

/* Filter — 1 hàng ngang trên desktop */
.scpas-filter-card { }

.scpas-filter-form { }

.scpas-filter-row {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.scpas-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.scpas-item label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--clr-text-light);
    white-space: nowrap;
}
.scpas-label-hidden { visibility: hidden; display: block; font-size: 11.5px; }

.scpas-item select,
.scpas-item input[type="text"] {
    height: 36px;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    padding: 0 10px;
    font-size: 13px;
    color: var(--clr-text);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.scpas-item select:focus,
.scpas-item input:focus { border-color: var(--clr-red); outline: none; }

.scpas-item-weekday { min-width: 90px; }
.scpas-item-date .tkdb-date-field { width: 100%; }

.scpas-item-btn .scdb-submit-btn { width: 100%; min-width: 90px; }

/* Results wrap */
.scpas-results-wrap { position: relative; margin-top: 14px; }

/* Card */
.scpas-card {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 18px;
}
.scpas-card-head {
    background: var(--clr-red);
    padding: 10px 16px;
}
.scpas-card-head h2 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}
.scpas-card-body { padding: 16px; }

.scpas-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--clr-text-light);
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 4px;
}
.scpas-meta-row strong { font-size: 14px; color: var(--clr-dark); }
.scpas-meta-row span { color: var(--clr-red); font-weight: 600; }

/* Triangle */
.scpas-triangle-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0 auto 16px;
}
.scpas-row {
    display: flex;
    gap: 6px;
    justify-content: center;
}

/* Pascal balls — smaller red balls (dùng lại gradient từ .ball-item) */
.scpas-ball {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f96868 0%, #c8001e 50%, #8a0011 100%);
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.22), inset 0 3px 6px rgba(255,255,255,.15), 0 3px 7px rgba(200,0,30,.35);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Result */
.scpas-result-title {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-dark);
    margin-bottom: 10px;
}
.scpas-result-row {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.scpas-result-ball {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #5fd19e 0%, #1a9c5b 50%, #0d6b3c 100%);
    box-shadow: inset 0 -4px 8px rgba(0,0,0,.2), inset 0 4px 8px rgba(255,255,255,.15), 0 4px 10px rgba(26,156,91,.4);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.scpas-empty {
    text-align: center;
    color: #aaa;
    font-size: 13px;
    padding: 20px;
}

/* Mobile: 2 hàng (Thứ+Ngày / Tỉnh+Nút) */
@media (max-width: 767px) {
    .scpas-filter-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .scpas-item-weekday { grid-column: 1; grid-row: 1; }
    .scpas-item-date    { grid-column: 2; grid-row: 1; }
    .scpas-item-province{ grid-column: 1; grid-row: 2; }
    .scpas-item-btn     { grid-column: 2; grid-row: 2; }

    .scpas-ball { width: 30px; height: 30px; font-size: 12px; }
    .scpas-row { gap: 4px; }
    .scpas-triangle-wrap { gap: 4px; }
}

/* =============================================
   §34 – News / Du doan list
   ============================================= */
.xskt-news-list-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.xskt-news-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.xskt-news-item {
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 14px;
}
.xskt-news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.xskt-news-item-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.4;
}
.xskt-news-item-title a {
    color: var(--clr-red);
    text-decoration: none;
}
.xskt-news-item-title a:hover { text-decoration: underline; }
.xskt-news-item-body {
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 12px;
    align-items: start;
}
.xskt-news-thumb {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.xskt-news-thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
.xskt-news-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4/3;
    background: #f0f0f0;
    color: #999;
    font-size: 12px;
    border-radius: 6px;
}
.xskt-news-item-excerpt {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}
.xskt-news-empty {
    color: #888;
    font-size: 14px;
    padding: 20px 0;
    text-align: center;
}
/* Pagination */
.xskt-news-pagination { margin-top: 16px; }
.xskt-news-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.xskt-news-pagination .page-numbers li a,
.xskt-news-pagination .page-numbers li span {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    font-size: 13px;
    color: var(--clr-dark);
    text-decoration: none;
    background: #fff;
}
.xskt-news-pagination .page-numbers li .current {
    background: var(--clr-red);
    color: #fff;
    border-color: var(--clr-red);
}
.xskt-news-pagination .page-numbers li a:hover { background: #fdf0f0; }

@media (max-width: 575px) {
    .xskt-news-item-body {
        grid-template-columns: 2fr 5fr;
        gap: 8px;
    }
    .xskt-news-item-title { font-size: 14px; }
    .xskt-news-item-excerpt { font-size: 12px; }
}

/* =============================================
   §35 – Quay thử page
   ============================================= */
.qt-page__region-tabs {
    margin-bottom: 12px;
}
.qt-page__toolbar {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.qt-page__toolbar .scdb-title {
    margin-bottom: 10px;
}
.qt-page__toolbar p {
    font-size: 13px;
    color: #555;
    line-height: 1.65;
    margin: 0 0 14px;
}
.qt-page__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--clr-red);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: .5px;
    transition: background .18s;
}
.qt-page__action-btn:hover  { background: var(--clr-red-dark); }
.qt-page__action-btn:active { background: #8a0011; }
.qt-page__action-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Extra / xem thêm card */
.qt-page__extra-card,
.qt-page__prediction-card {
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.qt-page__section-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--clr-red);
    margin: -14px -16px 12px;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
}
.qt-page__link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.qt-page__link-list li::before {
    content: "›";
    color: var(--clr-red);
    font-weight: 700;
    margin-right: 6px;
}
.qt-page__link-list a {
    font-size: 13px;
    color: var(--clr-dark);
    text-decoration: none;
}
.qt-page__link-list a:hover { color: var(--clr-red); text-decoration: underline; }

/* Prediction item */
.qt-page__prediction-item {
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 12px;
    align-items: start;
    height: 90px;
}
.qt-page__prediction-thumb {
    display: block;
    border-radius: 6px;
    overflow: hidden;
}
.qt-page__prediction-thumb img {
    width: 100%;
    object-fit: cover;
    display: block;
}
.qt-page__prediction-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4/3;
    background: #f5e8e8;
    color: var(--clr-red);
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
}
.qt-page__prediction-item-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}
.qt-page__prediction-item-title a {
    color: var(--clr-red);
    text-decoration: none;
}
.qt-page__prediction-item-title a:hover { text-decoration: underline; }
.qt-page__prediction-empty {
    font-size: 13px;
    color: #888;
    margin: 0 0 8px;
}
.qt-page__prediction-more {
    font-size: 13px;
    color: var(--clr-red);
    text-decoration: none;
}
.qt-page__prediction-more:hover { text-decoration: underline; }

@media (max-width: 575px) {
    .qt-page__prediction-item { grid-template-columns: 4fr 6fr; height: auto; }
    .qt-page__action-btn { width: 100%; }
}

/* =============================================
   §36 – Lịch mở thưởng
   ============================================= */
.lmt-wrap {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* H1 title — dùng scdb-title + bổ sung icon */
.lmt-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.lmt-title-ico {
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--clr-red);
}
.lmt-title-ico svg { width: 100%; height: 100%; }

/* Tab bar */
.lmt-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.lmt-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1.5px solid var(--clr-border);
    border-radius: 20px;
    background: #fff;
    color: #444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.lmt-tab:hover { border-color: var(--clr-red); color: var(--clr-red); }
.lmt-tab.is-active {
    background: var(--clr-red);
    border-color: var(--clr-red);
    color: #fff;
}
.lmt-tab-ico { display: inline-flex; width: 16px; height: 16px; }
.lmt-tab-ico svg { width: 100%; height: 100%; }

/* Panel */
.lmt-panel { display: none; }
.lmt-panel.is-active { display: block; }

.lmt-panel-head {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px 6px 0 0;
    margin: 0;
}
.lmt-panel-head.is-red    { background: var(--clr-red); }
.lmt-panel-head.is-blue   { background: #1565c0; }
.lmt-panel-head.is-green  { background: #1a7a3c; }
.lmt-panel-head.is-violet { background: #6a1b9a; }
.lmt-panel-head.is-orange { background: #e65100; }

/* Table */
.lmt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.lmt-table thead th {
    background: #fdf0f0;
    color: var(--clr-dark);
    font-weight: 700;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 2px solid var(--clr-border);
}
.lmt-table tbody tr {
    border-bottom: 1px solid var(--clr-border);
}
.lmt-table tbody tr:last-child { border-bottom: none; }
.lmt-table tbody td {
    padding: 7px 10px;
    vertical-align: middle;
    color: var(--clr-dark);
}
.lmt-table tbody tr:hover { background: #fffaf9; }
.lmt-table td.is-day {
    font-weight: 700;
    color: var(--clr-red);
    white-space: nowrap;
    width: 70px;
}
.lmt-table td.is-time {
    white-space: nowrap;
    color: #555;
    width: 80px;
    text-align: right;
}
.lmt-table td.is-product a {
    font-weight: 600;
    color: var(--clr-dark);
    text-decoration: none;
}
.lmt-table td.is-product a:hover { color: var(--clr-red); }

/* Chips */
.lmt-chip {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 3px 2px 0;
    background: #fff0f0;
    color: var(--clr-red);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #f5c6c6;
    transition: background .12s;
}
.lmt-chip:hover { background: var(--clr-red); color: #fff; }
.lmt-chip.is-outline {
    background: #f5f5f5;
    color: #444;
    border-color: #ddd;
}
.lmt-chip.is-outline:hover { background: #eee; }

/* Note box */
.lmt-note-box {
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff8f8;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
}
.lmt-note-box h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-red);
    margin: 0 0 10px;
}
.lmt-note-box p {
    font-size: 13px;
    color: #444;
    margin: 0 0 6px;
    line-height: 1.6;
}
.lmt-note-box p.is-note {
    color: #888;
    font-style: italic;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .lmt-tabs { gap: 4px; }
    .lmt-tab  { padding: 6px 10px; font-size: 12px; }
    .lmt-table thead th,
    .lmt-table tbody td { padding: 6px 8px; font-size: 12px; }
    .lmt-table td.is-day { width: 56px; }
}

/* =============================================
   §37 – Sổ mơ
   ============================================= */
.somo-wrap {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* H1 title — dùng scdb-title + icon */
.somo-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.somo-title-ico {
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--clr-red);
}
.somo-title-ico svg { width: 100%; height: 100%; }

/* Filter form */
.somo-filter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
    padding: 14px;
    background: #fff8f8;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
}
.somo-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.somo-field label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}
.somo-field input[type="text"] {
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--clr-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--clr-dark);
    background: #fff;
    outline: none;
    transition: border-color .15s;
}
.somo-field input[type="text"]:focus { border-color: var(--clr-red); }
.somo-field input[type="text"]::placeholder { color: #bbb; }

.somo-actions {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}
.somo-btn {
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.somo-btn-search {
    background: var(--clr-red);
    color: #fff;
}
.somo-btn-search:hover { background: var(--clr-red-dark); }
.somo-btn-reset {
    background: #f0f0f0;
    color: #444;
}
.somo-btn-reset:hover { background: #e0e0e0; }

/* Meta row (count + pagination) */
.somo-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.somo-results-meta {
    font-size: 12px;
    color: #888;
}

/* Pagination */
.somo-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.somo-pagination [data-page] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    background: #fff;
    color: var(--clr-dark);
    font-size: 12px;
    cursor: pointer;
    transition: all .12s;
}
.somo-pagination [data-page]:hover { background: #fdf0f0; border-color: var(--clr-red); color: var(--clr-red); }
.somo-pagination [data-page].is-active,
.somo-pagination [data-page][aria-current="page"] {
    background: var(--clr-red);
    border-color: var(--clr-red);
    color: #fff;
}
.somo-pagination [data-page]:disabled { opacity: .45; cursor: not-allowed; }

button.somo-page-btn.is-disabled {
    display: none;
}


/* Table */
.somo-table-wrap {
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    overflow: hidden;
}
.somo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.somo-table thead th {
    background: #fdf0f0;
    font-weight: 700;
    color: var(--clr-dark);
    padding: 9px 12px;
    text-align: left;
    border-bottom: 2px solid var(--clr-border);
}
.somo-table tbody tr { border-bottom: 1px solid var(--clr-border); }
.somo-table tbody tr:last-child { border-bottom: none; }
.somo-table tbody tr:hover { background: #fffaf9; }
.somo-table tbody td {
    padding: 8px 12px;
    color: var(--clr-dark);
    vertical-align: middle;
}
.somo-table td:first-child {
    color: #aaa;
    font-size: 12px;
    width: 48px;
    text-align: center;
}
.somo-table td:last-child {
    font-weight: 700;
    color: var(--clr-red);
    white-space: nowrap;
}
.somo-empty {
    text-align: center;
    color: #aaa;
    padding: 24px !important;
    font-size: 13px;
}

/* Loading overlay */
.somo-wrap.is-loading .somo-table-wrap {
    opacity: .5;
    pointer-events: none;
}

@media (max-width: 767px) {
    .somo-filter {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .somo-actions {
        grid-column: 1 / -1;
    }
}
@media (max-width: 480px) {
    .somo-filter { grid-template-columns: 1fr; }
    .somo-actions { flex-direction: row; }
    .somo-btn { flex: 1; }
}

/* Navigation date row — 1 hàng trên mọi màn hình */
@media (max-width: 575px) {
    .dt-filter-row { gap: 4px; }
    .dt-nav-btn { width: 30px; height: 30px; }
    .dt-nav-btn i { font-size: 15px; }
    .dt-filter-row .date-item {
        flex: 1 1 0;
        min-width: 0;
    }
    .dt-filter-row .date-item .dt-input-with-icon {
        width: 100%;
        padding: 0 6px;
        gap: 4px;
    }
    .dt-filter-row .date-item .dt-input {
        width: 100%;
        font-size: 12px;
    }
    .dt-input-with-icon i { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════
   §38 – Keno Spotlight (trang chủ)
═══════════════════════════════════════════════════════════ */
.keno-spotlight {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 3px 12px rgba(0,0,0,.12);
    background: #fff;
}

/* ── Header ── */
.keno-card__head {
    background: linear-gradient(135deg, #ffefd6 0%, #ffa436 100%);
}
.keno-card__head-inner {
    display: grid;
    grid-template-columns: 72px 1fr 72px;
    align-items: center;
    padding: 12px 16px 10px;
    gap: 8px;
}
.keno-card__logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
}
.keno-card__logo-spacer { width: 64px; }

.keno-card__title-wrap { text-align: center; }
.keno-card__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--clr-red-dark);
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.keno-card__meta {
    font-size: 13px;
    color: var(--clr-red-dark);
    margin-top: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.keno-card__meta-sep { opacity: .6; }
.keno-countdown-wrap {
    font-size: 12px;
    color: var(--clr-red-dark);
    margin-top: 4px;
    text-align: center;
}
.keno-countdown {
    font-weight: 700;
    font-size: 14px;
    color: var(--clr-red-dark);
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
}

/* ── Body ── */
.keno-card__body {
    padding: 16px 14px 12px;
    background: #fffdf7;
}

/* ── Ball grid: 2 hàng × 10 ── */
.keno-ball-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}
.keno-ball {
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(11px, 1.8vw, 20px);
    font-weight: 800;
    line-height: 1;
    user-select: none;
    /* zone colors overridden below */
}

/* Zone 01-20: gold */
.keno-ball.z1 {
    background: radial-gradient(circle at 35% 30%, #fff7e0 0%, #ffd966 55%, #e8a800 100%);
    color: #7a4f00;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.18), inset 0 3px 6px rgba(255,255,255,.35), 0 2px 6px rgba(220,160,0,.3);
}
/* Zone 21-40: orange */
.keno-ball.z2 {
    background: radial-gradient(circle at 35% 30%, #fff3e0 0%, #ffa040 55%, #d45c00 100%);
    color: #7a4f00;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.2), inset 0 3px 6px rgba(255,255,255,.25), 0 2px 6px rgba(212,92,0,.3);
}
/* Zone 41-60: red */
.keno-ball.z3 {
    background: radial-gradient(circle at 35% 30%, #ff8f8f 0%, #c8001e 55%, #8a0011 100%);
    color: #fff;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.22), inset 0 3px 6px rgba(255,255,255,.2), 0 2px 6px rgba(180,0,20,.35);
}
/* Zone 61-80: purple */
.keno-ball.z4 {
    background: radial-gradient(circle at 35% 30%, #d9a0f0 0%, #8b2fc9 55%, #5a1480 100%);
    color: #fff;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.22), inset 0 3px 6px rgba(255,255,255,.2), 0 2px 6px rgba(100,0,180,.3);
}
/* Loading ball */
.keno-ball.is-loading {
    background: #ececec;
    box-shadow: none;
}
.keno-ball-loading {
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: #ccc;
    display: block;
}

/* ── Spinning ball (đang quay số) ── */
@keyframes keno-spin-arc {
    to { transform: rotate(360deg); }
}
@keyframes keno-ball-reveal {
    0%   { transform: scale(0.4) rotate(-90deg); opacity: 0; }
    60%  { transform: scale(1.12) rotate(8deg);  opacity: 1; }
    100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
}

.keno-ball.is-spinning {
    background: #fff;
    border: 2px solid #e8890c;
    box-shadow: 0 2px 6px rgba(232,137,12,.25);
    position: relative;
    overflow: hidden;
    color: transparent;
}
.keno-ball.is-spinning::after {
    content: '';
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color:   var(--clr-red);
    border-right-color: var(--clr-red);
    animation: keno-spin-arc .75s linear infinite;
}

/* ── Reveal animation khi có kết quả mới ── */
.keno-ball.is-reveal {
    animation: keno-ball-reveal .45s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Stats row ── */
.keno-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.keno-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
}
.keno-stat__ico {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
}
.keno-stat--chan .keno-stat__ico { background: #2196f3; }
.keno-stat--le   .keno-stat__ico { background: #64b5f6; }
.keno-stat--lon  .keno-stat__ico { background: #e07b00; }
.keno-stat--nho  .keno-stat__ico { background: #f5a623; }

.keno-stat__label { color: #666; font-weight: 500; font-size: 12px; }
.keno-stat__val   { font-size: 18px; font-weight: 800; color: var(--clr-dark); margin-left: auto; }

/* ── Responsive ── */
@media (max-width: 767px) {
    .keno-ball-grid { gap: 4px; }
    .keno-ball { font-size: clamp(10px, 2.8vw, 16px); }
    .keno-stats-row { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .keno-card__head-inner { grid-template-columns: 52px 1fr 52px; padding: 10px 12px 8px; }
    .keno-card__logo { width: 48px; height: 48px; }
    .keno-card__title { font-size: 15px; }
    .keno-stat { padding: 7px 8px; }
    .keno-stat__val { font-size: 16px; }
}
@media (max-width: 480px) {
    .keno-card__head-inner { grid-template-columns: 44px 1fr 44px; }
    .keno-card__logo { width: 40px; height: 40px; }
    .keno-card__title { font-size: 13px; }
    .keno-ball-grid { gap: 3px; }
    .keno-stat__ico { width: 22px; height: 22px; font-size: 10px; }
}

/* =============================================
   §39 – Keno History Table
   ============================================= */

/* Wrapper */
.keno-history-wrap {
    margin-top: 18px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Header section */
.keno-history-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 16px 10px;
    border-bottom: 2px solid #f5a623;
}
.keno-history-head__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--clr-red-dark);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.keno-history-head__sub {
    font-size: 12px;
    color: #999;
}

/* ── Bảng dạng table thật: border-collapse qua outline/border ── */
.keno-history-table-wrap {
    border: 1px solid #e8c97a;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

/* Hàng tiêu đề */
.keno-history-table-head {
    display: grid;
    grid-template-columns: 120px 100px 1fr;
    background: #fdefc8;
    border-bottom: 2px solid #e8c97a;
    font-size: 12px;
    font-weight: 700;
    color: #8a6000;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.keno-history-table-head > div {
    padding: 8px 10px;
    border-right: 1px solid #e8c97a;
}
.keno-history-table-head > div:last-child { border-right: none; }

/* Bảng chứa các hàng */
.keno-history-table {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Mỗi hàng kết quả */
.keno-hist-row {
    display: grid;
    grid-template-columns: 120px 100px 1fr;
    align-items: stretch;
    border-bottom: 1px solid #e8c97a;
    transition: background .12s;
}
.keno-hist-row:last-child { border-bottom: none; }

/* Màu xen kẽ: chẵn=trắng, lẻ=vàng nhạt */
.keno-hist-row:nth-child(odd)  { background: #fff; }
.keno-hist-row:nth-child(even) { background: #fffae8; }
.keno-hist-row:hover { background: #fff3cc; }

/* Animation slide-in khi có kỳ mới */
@keyframes keno-hist-slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.keno-hist-row--new {
    animation: keno-hist-slide-in .35s cubic-bezier(.25,.46,.45,.94) both;
}

/* Animation slide-out khi xoá hàng cuối */
@keyframes keno-hist-slide-out {
    from { max-height: 80px; opacity: 1; }
    to   { max-height: 0;    opacity: 0; }
}
.keno-hist-row--out {
    animation: keno-hist-slide-out .4s ease forwards;
    overflow: hidden;
    pointer-events: none;
}

/* Ô chung trong row: kẻ viền phải */
.keno-hist-ky,
.keno-hist-time {
    border-right: 1px solid #e8c97a;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.keno-hist-nums {
    display: flex;
    flex-direction: column;
}
/* Hàng chẵn: ô số có bg trắng; hàng lẻ: ô số inherit #fffae8 */
.keno-hist-row:nth-child(odd)  .keno-hist-num { background: #fff; }
.keno-hist-row:nth-child(even) .keno-hist-num { background: #fffae8; }
.keno-hist-row:hover .keno-hist-num { background: #fff3cc; }

/* Kỳ số */
.keno-hist-ky-num { font-size: 13px; font-weight: 700; color: #333; }

/* Badges */
.keno-hist-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    width: fit-content;
    letter-spacing: .3px;
}
.keno-hist-badge.is-chan { background: #3366cc; color: #fff; }
.keno-hist-badge.is-le  { background: #009900; color: #fff; }
.keno-hist-badge.is-hoa { background: #999;    color: #fff; }
.keno-hist-badge.is-lon { background: #e07b00; color: #fff; }
.keno-hist-badge.is-nho { background: #f5a623; color: #fff; }

/* Thời gian */
.keno-hist-date { font-size: 12px; color: #555; }
.keno-hist-hour { font-size: 13px; font-weight: 700; color: #333; }

/* Lưới số — kẻ ô đầy đủ, fill chiều cao đều */
.keno-hist-nums {
    border-left: 1px solid #e8c97a;
    border-top: none;
}
.keno-hist-nums-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    flex: 1;           /* mỗi hàng chiếm 50% chiều cao */
    min-height: 0;
}
.keno-hist-nums-row + .keno-hist-nums-row {
    border-top: 1px solid #e8c97a;
}
.keno-hist-num {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;      /* fill chiều cao hàng */
    min-height: 26px;
    font-size: 13px;
    font-weight: 700;
    color: #c0392b;
    border-right: 1px solid #e8c97a;
}
.keno-hist-num:last-child { border-right: none; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .keno-history-table-head,
    .keno-hist-row { grid-template-columns: 100px 80px 1fr; }
    .keno-hist-num { height: 24px; font-size: 11px; }
}
@media (max-width: 420px) {
    .keno-history-table-head { display: none; }
    .keno-hist-row { grid-template-columns: 88px 70px 1fr; }
    .keno-hist-num { height: 22px; font-size: 10px; }
}

/* =============================================
   §40 – Keno Stats Top (Nhiều / Ít / Chưa về)
   ============================================= */

.keno-stats-top-wrap {
    margin-top: 18px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    border: 1px solid #e8c97a;
}

.keno-stats-top-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* Ngăn cách giữa các cột */
.kst-col {
    border-right: 1px solid #e8c97a;
}
.kst-col:last-child { border-right: none; }

/* Tiêu đề cột */
.kst-col__head {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .5px;
    border-bottom: 2px solid #e8c97a;
}
.kst-head--nhieu  { color: var(--clr-red-dark); background: #fff6e6; }
.kst-head--it     { color: var(--clr-red-dark); background: #fff6e6; }
.kst-head--chuave { color: var(--clr-red-dark); background: #fff6e6; }

/* Mỗi hàng trong cột */
.kst-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid #f0dfa0;
    background: #fff;
}
.kst-row:last-child { border-bottom: none; }
.kst-row--alt { background: #fffae8; }

/* Số */
.kst-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--clr-red-dark);
    border-right: 1px solid #f0dfa0;
    flex-shrink: 0;
}

/* Số lần */
.kst-count {
    flex: 1;
    padding: 8px 10px;
    font-size: 13px;
    color: #555;
    text-align: center;
}

/* ── Responsive ── */
@media (max-width: 540px) {
    .kst-num { width: 40px; font-size: 13px; }
    .kst-count { font-size: 11px; padding: 7px 6px; }
    .kst-col__head { font-size: 11px; padding: 8px 6px; }
}

/* =============================================
   §41 – Keno TS100 (Tần suất 100 kỳ)
   ============================================= */

.keno-ts100-wrap {
    margin-top: 18px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    border: 1px solid #e8c97a;
}

/* Tiêu đề */
.keno-ts100-head {
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-red-dark);
    text-align: center;
    letter-spacing: .5px;
    background: #fff6e6;
    border-bottom: 2px solid #e8c97a;
}

/* Grid 10 cột */
.keno-ts100-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    border-top: none;
    border-left: 1px solid #e8c97a;
}

/* Mỗi ô số */
.kts-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border-right: 1px solid #e8c97a;
    border-bottom: 1px solid #e8c97a;
    background: #fff;
    transition: background .12s;
}
.kts-cell:nth-child(odd)  { background: #fff; }
.kts-cell:nth-child(even) { background: #fffae8; }
.kts-cell:hover { background: #fff3cc; }
.kts-cell:nth-child(10n) { border-right: none; }

/* Bóng số */
.kts-ball {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe08a, #e07b00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--clr-red-dark);
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    flex-shrink: 0;
}

/* Số lần */
.kts-count {
    font-size: 11px;
    color: #555;
    white-space: nowrap;
    text-align: center;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .keno-ts100-grid { grid-template-columns: repeat(8, 1fr); }
    .kts-cell:nth-child(10n) { border-right: 1px solid #e8c97a; }
    .kts-cell:nth-child(8n)  { border-right: none; }
    .kts-ball { width: 30px; height: 30px; font-size: 11px; }
}
@media (max-width: 420px) {
    .keno-ts100-grid { grid-template-columns: repeat(5, 1fr); }
    .kts-cell:nth-child(8n) { border-right: 1px solid #e8c97a; }
    .kts-cell:nth-child(5n) { border-right: none; }
    .kts-ball { width: 28px; height: 28px; font-size: 11px; }
    .kts-count { font-size: 10px; }
}