/*
 * kqxs-styles.css — kqxs-plugin
 * REBUILT: Bảng kết quả theo chuẩn top Google (az24.vn, xoso.com.vn)
 * Màu: XSMB xanh #0057b8 · XSMT xanh lá #0a8a3c · XSMN đỏ #d62828
 */

/* ============================================================
   CSS VARIABLES
============================================================ */
:root {
    --kq-blue:   #0057b8;
    --kq-green:  #0a8a3c;
    --kq-red:    #d62828;
    --kq-gold:   #ffd700;
    --kq-border: #d0d8e8;
    --kq-light:  #eef3fb;
}

/* ============================================================
   WRAPPER
============================================================ */
.kqxs-table-wrapper {
    width: 100%;
    margin: 0 0 16px 0;
    display: block;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: Arial, Helvetica, sans-serif;
}

/* ============================================================
   BẢNG THỐNG KÊ KẾT QUẢ (.kqxs-table)
   — dùng cho tần suất, lô gan, thống kê số
============================================================ */
.kqxs-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 2px solid var(--kq-border);
    border-radius: 6px;
    overflow: hidden;
    margin: 0;
    display: table;
    table-layout: auto;
    box-sizing: border-box;
    font-size: 15px;
}

/* Header dòng đầu (tên bảng) */
.kqxs-table tr:first-child th,
.kqxs-table thead th {
    background: linear-gradient(135deg, #0057b8, #003d8f);
    color: #fff;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    border: none;
    letter-spacing: 0.3px;
}

.kqxs-table tr:first-child th h3,
.kqxs-table thead th h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

/* Header phụ (dòng 2: Số / Số lần) */
.kqxs-table thead tr:nth-child(2) th {
    background: var(--kq-light);
    color: var(--kq-blue);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 10px;
    border: 1px solid #d8e0ec;
}

/* Data cells */
.kqxs-table td {
    padding: 7px 10px;
    text-align: center;
    border: 1px solid #e8eef8;
    vertical-align: middle;
    font-size: 15px;
    color: #222;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Zebra */
.kqxs-table tbody tr:nth-child(even) td { background: #f7f9ff; }
.kqxs-table tbody tr:nth-child(odd)  td { background: #fff; }
.kqxs-table tr:not(:first-child):hover td { background: #fffde7; }

/* Số trong bảng */
.kqxs-table strong,
.kqxs-table b {
    font-weight: 700;
    font-size: 16px;
    color: var(--kq-red);
    display: inline-block;
}

/* Giải đặc biệt badge */
.kqxs-table .giai-db {
    color: #fff !important;
    background: var(--kq-red) !important;
    padding: 3px 9px !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* Grid key/value (đầu đuôi kiểu az24) */
.kqxs-table.kqxs-az-style .kqxs-grid-key {
    background: var(--kq-light);
    color: var(--kq-blue);
    font-weight: 800;
    border-right: 2px solid var(--kq-border);
    width: 40px;
}

.kqxs-table.kqxs-az-style .kqxs-grid-values {
    font-size: 15px;
    color: #333;
    letter-spacing: 0.5px;
}

.aps-muted { color: #bbb; }

/* ============================================================
   BẢNG KẾT QUẢ XSMB PLUGIN (.lk-mb-wrap / .lk-mb-t)
   Inline style trong shortcodes.php — override hoàn toàn
============================================================ */
.lk-mb-wrap {
    background: #fff !important;
    border: 2px solid var(--kq-border) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

.lk-mb-t {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 16px !important;
}

.lk-mb-t td {
    border: 1px solid #e8eef8 !important;
    padding: 7px 8px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Header tiêu đề */
.lk-mb-t .lk-hd-main {
    background: linear-gradient(135deg, #0057b8, #003d8f) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 11px 14px !important;
    text-align: center !important;
    border: none !important;
    letter-spacing: 0.3px !important;
    line-height: 1.5 !important;
}

.lk-mb-t .lk-hd-main small {
    font-weight: 400 !important;
    font-size: 13px !important;
    opacity: .88 !important;
    display: block !important;
    margin-top: 2px !important;
}

/* Hàng Mã ĐB */
.lk-mb-t .lk-madb {
    background: var(--kq-light) !important;
}

.lk-mb-t .lk-madb td {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--kq-blue) !important;
    border-bottom: 2px solid #b8cce4 !important;
}

/* Cột nhãn giải */
.lk-mb-t .lk-lbl {
    background: var(--kq-light) !important;
    color: var(--kq-blue) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    width: 42px !important;
    border-right: 2px solid var(--kq-border) !important;
}

/* Hàng Giải Đặc Biệt — ảnh 3,4: ĐB text đỏ to trong ô viền bo, nền rất nhạt */
.lk-mb-t .lk-db td.lk-num {
    background: #fff8f8 !important;
}

.lk-mb-t .lk-db span {
    display: inline-block !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    color: var(--kq-red) !important;
    letter-spacing: 4px !important;
    border: 2px solid var(--kq-red) !important;
    border-radius: 8px !important;
    padding: 4px 20px !important;
    background: #fff !important;
}

/* Hàng Giải 7 — ảnh 4: oval viền đỏ, chữ đỏ */
.lk-mb-t .lk-g7 td.lk-num span {
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--kq-red) !important;
    border: 2px solid var(--kq-red) !important;
    border-radius: 40px !important;
    padding: 2px 14px !important;
    min-width: 56px !important;
    background: #fff !important;
}

/* Zebra rows */
.lk-mb-t tr:nth-child(even) td:not(.lk-lbl) { background: #f7f9ff !important; }
.lk-mb-t tr:nth-child(odd)  td:not(.lk-lbl) { background: #fff !important; }
.lk-mb-t tr:hover td:not(.lk-lbl) { background: #fffde7 !important; }

/* Số thường trong bảng */
.lk-mb-t .lk-num b {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #222 !important;
}

/* ============================================================
   TABS BAR PLUGIN (.lk-tabs-bar / .lk-tpill / .lk-nc)
============================================================ */
.lk-tabs-bar {
    background: #fffbee !important;
    border-top: 2px solid #e8d8a0 !important;
    border-bottom: 2px solid #e8d8a0 !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.lk-tpill {
    font-size: 14px !important;
    padding: 4px 13px !important;
    border-radius: 14px !important;
    border: 1.5px solid #ccc !important;
    cursor: pointer !important;
    background: #fff !important;
    color: #444 !important;
    font-weight: 600 !important;
    user-select: none !important;
    transition: all .18s !important;
}

.lk-tpill.act,
.lk-tpill:hover {
    background: var(--kq-gold) !important;
    border-color: #c8a000 !important;
    color: #333 !important;
    font-weight: 700 !important;
}

.lk-ncr {
    display: flex !important;
    gap: 4px !important;
    margin-left: auto !important;
}

.lk-nc {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 1.5px solid #ccc !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    background: #fff !important;
    color: #444 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .18s !important;
    flex-shrink: 0 !important;
}

.lk-nc.act,
.lk-nc:hover {
    background: var(--kq-gold) !important;
    border-color: #c8a000 !important;
    color: #333 !important;
}

/* ============================================================
   ĐẦU ĐUÔI PLUGIN (.lk-dd-grid / .lk-dd-half / .lk-dd-t)
============================================================ */
.lk-dd-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border-top: 2px solid var(--kq-light) !important;
}

.lk-dd-half {
    border-right: 1px solid var(--kq-border) !important;
}

.lk-dd-half:last-child {
    border-right: none !important;
}

.lk-dd-t {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 15px !important;
}

.lk-dd-t td,
.lk-dd-t th {
    border: 1px solid #e8eef8 !important;
    padding: 5px 8px !important;
    text-align: center !important;
}

.lk-dd-t th {
    background: var(--kq-light) !important;
    color: var(--kq-blue) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 7px 8px !important;
    border-bottom: 2px solid var(--kq-border) !important;
}

/* Cột số Đầu: xanh chữ (số Đặc biệt: đỏ chữ) — không có nền, đúng ảnh thực tế */
.lk-dd-t .lk-red  { color: var(--kq-red)  !important; font-weight: 800 !important; }
.lk-dd-t .lk-blue { color: var(--kq-blue) !important; font-weight: 800 !important; }

/* ============================================================
   BẢNG MN/MT ĐA TỈNH (.tb-kq)
   Override inline styles trong shortcodes.php
============================================================ */
.tb-kq {
    border-collapse: collapse !important;
    width: 100% !important;
    font-family: Arial, Helvetica, sans-serif !important;
    background: #fff !important;
    border: 2px solid var(--kq-border) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    font-size: 15px !important;
}

.tb-kq th,
.tb-kq td {
    border: 1px solid #e8eef8 !important;
    padding: 6px 8px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 15px !important;
}

/* Header tiêu đề ngày — mặc định đỏ (XSMN, theo ảnh thực tế) */
.tb-kq .title,
td.title {
    background: #d62828 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 10px 14px !important;
    border: none !important;
    letter-spacing: 0.3px !important;
}

/* XSMB override: xanh */
.tb-kq.tb-kq-mb .title,
td.title.mb {
    background: #0057b8 !important;
}

/* XSMT override: xanh lá */
.tb-kq.tb-kq-mt .title,
td.title.mt {
    background: #0a8a3c !important;
}

/* Dòng tên tỉnh (dòng 2) — chữ xanh đậm, không nền đặc biệt */
.tb-kq tr:nth-child(2) td,
.tb-kq tr:nth-child(2) th {
    background: #fff !important;
    color: var(--kq-blue) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-bottom: 2px solid var(--kq-border) !important;
}

/* Cột Giải (G8, G7... ĐB) — chữ xanh, không nền */
.cotGiai {
    width: 48px !important;
    font-weight: 700 !important;
    background: #fff !important;
    color: var(--kq-blue) !important;
    border-right: 1px solid #e8eef8 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
}

/* Cột Giải đỏ (G8, ĐB) */
.tb-kq td.text-danger.cotGiai,
.tb-kq td.text-danger.cotGiai b {
    color: var(--kq-red) !important;
    background: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    display: inline !important;
    padding: 0 !important;
    min-width: unset !important;
}

/* Zebra rows */
.tb-kq tbody tr:nth-child(even) td { background: #f4f8ff !important; }
.tb-kq tbody tr:nth-child(odd)  td { background: #fff !important; }

/* SỐ THƯỜNG — KHÔNG PILL, KHÔNG BORDER — chỉ text thuần */
.tb-kq b,
.tb-kq strong {
    display: inline !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #222 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-width: unset !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* G8 và ĐB — chữ đỏ, không pill, không border */
.tb-kq td.text-danger b,
.tb-kq .text-danger b {
    color: var(--kq-red) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-width: unset !important;
}

/* ĐB — to và đậm hơn */
.tb-kq tr:last-child td.m2lr b {
    color: var(--kq-red) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    border: none !important;
    background: none !important;
}

/* Utility classes giữ nguyên */
.text-primary  { color: var(--kq-blue) !important; }
.text-danger   { color: var(--kq-red) !important; }
.text-center   { text-align: center !important; }
.text-uppercase { text-transform: uppercase !important; }
.font-weight-bold { font-weight: 700 !important; }
.middle        { vertical-align: middle !important; }
.no-wrap       { white-space: nowrap !important; }
.m2lr          { margin: 0 4px !important; }
.haiCol        { width: 50%; float: left; box-sizing: border-box; white-space: nowrap; }
.baCol         { width: 33.3333%; float: left; box-sizing: border-box; white-space: nowrap; }
.bonCol        { width: 25%; float: left; box-sizing: border-box; white-space: nowrap; }

/* ============================================================
   NÚT XEM THÊM
============================================================ */
.kqxs-load-more-btn {
    background: linear-gradient(135deg, #0057b8, #003d8f) !important;
    color: #fff !important;
    border: none !important;
    padding: 9px 28px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: opacity .2s !important;
}

.kqxs-load-more-btn:hover    { opacity: .88 !important; }
.kqxs-load-more-btn:disabled { background: #aaa !important; cursor: not-allowed !important; }
.kqxs-load-more-container    { text-align: center; margin: 12px 0 16px; }

/* ============================================================
   RADIO BUTTONS
============================================================ */
.kqxs-radio-wrap {
    padding: 6px 12px;
    background: #fffbee;
    border-top: 1px solid #e8d8a0;
    font-size: 13px;
}

.kqxs-radio-wrap label { margin-right: 16px; cursor: pointer; }

/* ============================================================
   EMPTY STATE
============================================================ */
.kqxs-empty {
    font-size: 15px !important;
    color: #666 !important;
    text-align: center !important;
    padding: 20px !important;
}

/* ============================================================
   OVERRIDE INLINE STYLES (cam → xanh, các box inline của plugin)
============================================================ */

/* Header cam → xanh gradient */
[style*="background:#e96a00"],
[style*="background: #e96a00"] {
    background: linear-gradient(135deg, #0057b8, #003d8f) !important;
    color: #fff !important;
}

/* Box số ĐB inline */
[style*="background:#fff0f0"] {
    background: #fff5f5 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    color: var(--kq-red) !important;
    letter-spacing: 3px !important;
    padding: 6px 16px !important;
    display: inline-block !important;
}

/* Row header Giải/Tỉnh */
[style*="background:#f7f7fa"] {
    background: var(--kq-light) !important;
    color: var(--kq-blue) !important;
    font-weight: 700 !important;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 600px) {
    .lk-mb-t .lk-db span  { font-size: 26px !important; letter-spacing: 2px !important; }
    .lk-mb-t .lk-g7 td.lk-num span { font-size: 17px !important; }
    .lk-mb-t .lk-num b    { font-size: 14px !important; }
    .lk-mb-t td            { padding: 5px 5px !important; }
    .tb-kq th, .tb-kq td  { padding: 4px 5px !important; font-size: 13px !important; }
    .cotGiai               { width: 32px !important; font-size: 12px !important; }
    .lk-dd-grid            { grid-template-columns: 1fr !important; }
    .lk-dd-half            { border-right: none !important; border-bottom: 1px solid var(--kq-border) !important; }
    .lk-ncr                { display: none !important; }
    [style*="background:#fff0f0"] { font-size: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .lk-mb-t tr,
    .lk-tpill,
    .lk-nc,
    .tb-kq tr { transition: none !important; }
}