/*
Theme Name: SoiCau247
Version: 2.0
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
    font-family: Arial, 'Segoe UI', sans-serif;
    background-color: #2c1f1a;
    background-image: url('../../uploads/img/nen.jpg');
    background-repeat: repeat;
    color: #333;
    min-height: 100vh;
}
a { color: #00796b; text-decoration: none; }
a:hover { color: #d32f2f; text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

#wrapper {
    max-width: 888px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.site-header {
    text-align: center;
    overflow: hidden;
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../../uploads/img/header.jpg');
    background-repeat: repeat;
    background-color: #2e1a0e;
}
.header-logo-wrap {
    width: 100%;
    padding: 15px 0 10px;
}
.header-balls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.site-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}
.site-logo .custom-logo-link { display: inline-block; }
.site-logo img.custom-logo {
    max-height: 155px;
    width: auto;
    height: auto;
    display: block;
}
@media (max-width: 480px) {
    .site-logo img.custom-logo { max-height: 64px; }
}
.ball {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    box-shadow: inset -4px -4px 8px rgba(0,0,0,0.4), inset 2px 2px 6px rgba(255,255,255,0.3), 0 4px 10px rgba(0,0,0,0.5);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-style: italic;
}
.ball-2 { background: radial-gradient(circle at 35% 35%, #4fc3f7, #0277bd); }
.ball-4 { background: radial-gradient(circle at 35% 35%, #ff8a65, #bf360c); }
.ball-7 { background: radial-gradient(circle at 35% 35%, #aed581, #33691e); }

.site-title-text {
    font-size: 34px;
    font-weight: 900;
    font-style: italic;
    color: #ffd600;
    text-shadow:
        2px 2px 0 #d32f2f,
        -1px -1px 0 #d32f2f,
        1px -1px 0 #d32f2f,
        -1px 1px 0 #d32f2f,
        0 0 20px rgba(255,214,0,0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.1;
    padding: 0 10px;
}
.site-title-text a { color: inherit; text-decoration: none; }
.site-title-text a:hover { text-decoration: none; }

.main-nav {
    background: #5d3a1a;
    border-top: 2px solid #8d5524;
    border-bottom: 2px solid #3e2000;
    position: relative;
}
.main-nav ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.main-nav ul li { position: relative; }
.main-nav ul li a {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 15px;
    white-space: nowrap;
    transition: background 0.15s;
}
.main-nav ul li a:hover,
.main-nav ul li.current-menu-item > a {
    background: rgba(0,0,0,0.3);
    color: #ffd600;
    text-decoration: none;
}
.main-nav ul li:first-child a { padding-left: 16px; }

.main-nav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: #4a2800;
    min-width: 200px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    display: none;
    flex-direction: column;
    z-index: 999;
    border: 1px solid #8d5524;
}
.main-nav ul ul li a {
    font-size: 13px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.main-nav ul li:hover > ul { display: flex; }
.nav-search-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: #ffd600;
    font-size: 18px;
    cursor: pointer;
    padding: 10px 14px;
    line-height: 1;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 11px 16px;
}

.time-bar {
    background: #fff;
    text-align: center;
    padding: 8px 10px;
    font-size: 14px;
    color: #00796b;
    font-weight: 600;
    border-bottom: 1px dashed #b2dfdb;
}

.partner-bar {
    background: #fff;
    padding: 7px 14px;
    font-size: 14px;
    border-bottom: 1px dashed #b2dfdb;
    line-height: 2;
}
.partner-bar a { color: #00796b; margin: 0 3px; text-decoration: underline; }
.partner-bar a:hover { color: #d32f2f; }
.partner-bar .sep { color: #767676; margin: 0 2px; }

.page-title-banner {
    background: #e8f5f4;
    border: 1px dashed #80cbc4;
    text-align: center;
    padding: 10px;
    margin: 0;
}
.page-title-banner h1 {
    font-size: 19px;
    font-weight: 700;
    color: #00796b;
    margin: 0;
}

.site-content { background: #fff; }

.section-header {
    background: #607d8b;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 9px 14px;
    margin-bottom: 0;
}
.section-header.blue { background: #546e7a; }
.section-header.teal { background: #00796b; }
.section-header.orange { background: #bf360c; }
.section-header.dark { background: #37474f; }

.content-box {
    padding: 14px 18px;
    background: #fff;
    border-bottom: 1px solid #eceff1;
    font-size: 15px;
    line-height: 1.85;
    color: #333;
}
.content-box p { margin-bottom: 10px; }
.content-box p:last-child { margin-bottom: 0; }
.content-box strong { color: #d32f2f; }
.content-box a { color: #00796b; text-decoration: underline; }
.content-box a:hover { color: #d32f2f; }

.aff-links {
    padding: 8px 12px;
    background: #f9fbe7;
    border-top: 1px dashed #c5e1a5;
    border-bottom: 1px dashed #c5e1a5;
    font-size: 13px;
    line-height: 2.2;
}
.aff-links a { color: #2e7d32; margin: 0 3px; text-decoration: underline; }
.aff-links a:hover { color: #d32f2f; }
.aff-links .sep { color: #767676; }

.prediction-section { background: #fff; }
.prediction-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #eceff1;
    font-size: 15px;
    gap: 0;
    line-height: 1.5;
}
.prediction-item:last-child { border-bottom: none; }
.prediction-item .chip-img {
    width: 34px;
    height: 34px;
    margin-right: 12px;
    flex-shrink: 0;
    vertical-align: middle;
    display: inline-block;
    object-fit: contain;
}
.pred-label {
    color: #333;
    min-width: 185px;
    font-size: 15px;
    flex-shrink: 0;
}
.pred-value {
    color: #d32f2f;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.post-block { border-bottom: 2px solid #eceff1; margin-bottom: 0; }
.post-title-h {
    font-size: 18px;
    font-weight: 800;
    color: #0d47a1;
    margin-bottom: 8px;
    line-height: 1.4;
}
.post-meta { color: #767676; font-size: 12px; margin-bottom: 10px; }
.post-meta span { margin-right: 10px; }
.post-content { font-size: 14px; line-height: 1.85; color: #333; }
.post-content a { color: #00796b; text-decoration: underline; }
.post-content a:hover { color: #d32f2f; }
.post-content h2 { font-size: 16px; color: #00796b; margin: 16px 0 6px; font-weight: 700; }
.post-content h3 { font-size: 15px; color: #d32f2f; margin: 12px 0 5px; }
.post-content p { margin-bottom: 10px; }
.post-content ul { padding-left: 18px; margin-bottom: 10px; }
.post-content ul li { list-style: disc; margin-bottom: 4px; }
.post-content table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px; }
.post-content table th { background: #546e7a; color: #fff; padding: 7px; text-align: center; }
.post-content table td { padding: 6px; border: 1px solid #ddd; text-align: center; }
.post-content table tr:nth-child(even) td { background: #f5f5f5; }

.post-list-item {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}
.post-list-item:last-child { border-bottom: none; }
.post-list-thumb {
    width: 75px;
    height: 56px;
    background: #e0f2f1;
    border-radius: 3px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #b2dfdb;
}
.post-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-list-info h4 {
    font-size: 13px;
    font-weight: 700;
    color: #0d47a1;
    margin-bottom: 4px;
    line-height: 1.4;
}
.post-list-info h4 a { color: inherit; }
.post-list-info h4 a:hover { color: #d32f2f; text-decoration: none; }
.post-list-info .post-date { font-size: 11px; color: #767676; }

.num { color: #d32f2f; font-weight: 700; font-size: 15px; }
.num-green { color: #2e7d32; font-weight: 700; font-size: 15px; }
.num-blue { color: #1565c0; font-weight: 700; font-size: 15px; }

.stats-wrap { overflow-x: auto; }
.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.stats-table th {
    background: #546e7a;
    color: #fff;
    padding: 7px 5px;
    text-align: center;
    white-space: nowrap;
}
.stats-table td {
    padding: 5px;
    border: 1px solid #ddd;
    text-align: center;
}
.stats-table tr:nth-child(even) td { background: #f5f5f5; }
.stats-table .hl { background: #fff9c4 !important; color: #d32f2f; font-weight: 700; }

.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #b2dfdb;
    border-radius: 3px;
    font-size: 13px;
    color: #00796b;
    background: #fff;
}
.pagination a:hover, .pagination .current {
    background: #00796b;
    color: #fff;
    border-color: #00796b;
    text-decoration: none;
}

.site-footer {
    background: #37474f;
    color: #b0bec5;
    font-size: 13px;
}
.footer-top {
    padding: 22px 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.footer-col h4 {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #00796b;
}
.footer-col ul li { margin-bottom: 5px; }
.footer-col ul li a { color: #b0bec5; font-size: 12px; }
.footer-col ul li a:hover { color: #ffd600; text-decoration: none; }
.footer-col p { font-size: 12px; line-height: 1.7; margin-bottom: 5px; }
.footer-bottom {
    text-align: center;
    padding: 12px 16px;
    font-size: 12px;
    color: #b0bec5;
}
.footer-nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}
.footer-nav-links li { display: flex; align-items: center; }
.footer-nav-links li:not(:last-child)::after { content: "|"; color: #b0bec5; margin: 0 8px; }
.footer-nav-links a { color: #b0bec5; font-size: 12px; padding: 6px 4px; display: inline-block; }
.footer-nav-links a:hover { color: #fff; }
.footer-sep { color: #b0bec5; margin: 0 2px; }

.search-bar {
    padding: 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    display: flex;
    gap: 6px;
}
.search-bar input {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #b2dfdb;
    border-radius: 3px;
    font-size: 13px;
    outline: none;
}
.search-bar input:focus { border-color: #00796b; }
.search-bar button {
    padding: 7px 16px;
    background: #00796b;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
}
.search-bar button:hover { background: #00695c; }

.coin-icon {
    width: 33px;
    height: 33px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    object-fit: contain;
}

.prediction-note {
    padding: 8px 14px 10px;
    font-size: 12px;
    color: #666;
    background: #fafafa;
    border-top: 1px dashed #e0e0e0;
    font-style: italic;
}
.prediction-note strong { color: #d32f2f; font-style: normal; }

.bang-lo-top-intro { padding: 10px 18px 14px; font-size: 13px; }

.blt-tabs {
    display: flex;
    gap: 8px;
    background: #fff;
    padding: 12px 14px;
}
.blt-tab-btn {
    display: inline-block;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: #607d8b;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}
.blt-tab-btn:hover { background: #546e7a; text-decoration: none; color: #fff; }
.blt-tab-btn.blt-active {
    background: #263238;
    color: #ffca28;
}

.blt-panel { background: #fff; padding: 0 14px 12px; }
.blt-date { font-size: 13px; color: #666; padding: 4px 0 8px; }
.blt-numlist { line-height: 2.3; }
.blt-num {
    display: inline-block;
    position: relative;
    color: #1565c0;
    font-weight: 800;
    font-size: 20px;
    margin-right: 16px;
}
.blt-num-badge {
    position: absolute;
    top: -7px;
    right: -9px;
    display: inline-block;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    padding: 0 2px;
    border-radius: 50%;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}
.blt-numlist-more { display: none; }
.blt-numlist.blt-expanded .blt-numlist-more { display: inline; }
.blt-more-btn {
    display: inline-block;
    background: #fce4ec;
    color: #d81b60;
    border: none;
    padding: 7px 18px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
}
.blt-more-btn:hover { background: #f8bbd0; }
.blt-more-btn.blt-hidden { display: none; }

.post-link-list {
    background: #fff;
    border-bottom: 1px solid #eceff1;
}
.pll-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px dashed #e0e0e0;
}
.pll-item:last-of-type { border-bottom: none; }
.pll-icon {
    width: 33px;
    height: 33px;
    flex-shrink: 0;
    object-fit: contain;
}
.pll-link {
    font-size: 15px;
    color: #333;
    text-decoration: none;
    line-height: 1.5;
}
.pll-link:hover { color: #d32f2f; text-decoration: none; }
.pll-link-today {
    font-size: 15px;
    color: #bf360c;
    font-weight: 600;
    text-decoration: none;
}
.pll-link-today:hover { color: #d32f2f; text-decoration: none; }
.pll-today { background: #fff8f5; }
.hl-red { color: #d32f2f; font-style: normal; }

.pll-more-wrap {
    text-align: center;
    padding: 12px;
    border-top: 1px solid #f0f0f0;
}
.btn-xem-them {
    display: inline-block;
    background: #2e7d32;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 30px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-xem-them:hover {
    background: #1b5e20;
    color: #fff;
    text-decoration: none;
}

.kqxs-wrap { --kq-primary:#00796b; --kq-orange:#bf360c; --kq-border:#ccc; --kq-bg-alt:#efefef; }

.kqxs-wrap { background:#fff; border:1px solid var(--kq-border); font-family:Arial,sans-serif; font-size:14px; }

.kqxs-header-bar {
    background:var(--kq-primary); color:#fff;
    padding:9px 12px; text-align:center;
    font-weight:700; font-size:15px;
}
.kqxs-header-title { font-size:15px; font-weight:700; }
.kqxs-date-bar {
    background:#f7e9be; color:#7a5500; text-align:center;
    padding:5px 12px; font-size:13px; border-bottom:1px solid #e8d88a;
}

.kqmb { width:100%; border-collapse:collapse; }
.kqmb td { padding:0; border:1px solid var(--kq-border); vertical-align:middle; }
.kqmb .bg_ef td { background:#efefef; }

.txt-giai {
    width:60px; text-align:center; font-size:14px;
    font-weight:700; color:#333; padding:6px 4px !important;
    border-right:1px solid var(--kq-border) !important;
    white-space:nowrap;
}

.kqmb tr:first-child .txt-giai { color:var(--kq-primary); }

.kqmb .db .txt-giai { color:var(--kq-orange); }
.kqmb .v-giai.number { text-align:center; }
.kqmb .v-gdb { display:block; font-size:32px; font-weight:700; color:var(--kq-orange); padding:6px; text-align:center; }

.kqmb td.v-giai span[class^=v-g] {
    display:inline-block; font-size:28px; font-weight:700;
    color:#333; padding:8px 4px; width:100%;
    text-align:center; box-sizing:border-box;
}

.kqmb .g7 span[class^=v-g7-] { color:var(--kq-orange); }

.kqmb td.v-giai span[class^=v-g2-] { width:50%; }
.kqmb td.v-giai span[class^=v-g3-] { width:33.33%; }
.kqmb td.v-giai span[class^=v-g4-] { width:25%; }
.kqmb td.v-giai span[class^=v-g5-],
.kqmb td.v-giai span[class^=v-g6-] { width:33.33%; }
.kqmb td.v-giai span[class^=v-g7-] { width:25%; }

.kqmb td.v-giai span.v-g2-1,
.kqmb td.v-giai span.v-g3-1,.kqmb td.v-giai span.v-g3-2,
.kqmb td.v-giai span.v-g4-1,.kqmb td.v-giai span.v-g4-2,.kqmb td.v-giai span.v-g4-3,
.kqmb td.v-giai span.v-g5-1,.kqmb td.v-giai span.v-g5-2,
.kqmb td.v-giai span.v-g5-4,.kqmb td.v-giai span.v-g5-5,
.kqmb td.v-giai span.v-g6-1,.kqmb td.v-giai span.v-g6-2,
.kqmb td.v-giai span.v-g7-1,.kqmb td.v-giai span.v-g7-2,.kqmb td.v-giai span.v-g7-3 {
    border-left:1px solid var(--kq-border);
}

.kqmb td.v-giai span.v-g3-0,.kqmb td.v-giai span.v-g3-1,.kqmb td.v-giai span.v-g3-2,
.kqmb td.v-giai span.v-g5-0,.kqmb td.v-giai span.v-g5-1,.kqmb td.v-giai span.v-g5-2 {
    border-bottom:1px solid var(--kq-border);
}

.v-madb { display:block; padding:6px 10px; font-size:14px; font-weight:700; color:var(--kq-primary); }

.col-firstlast { overflow:hidden; border-top:1px solid #ddd; }
.firstlast-mb { width:calc(50% - 1px); border-collapse:collapse; font-weight:700; border:0; }
.firstlast-mb.fl { float:left; }
.firstlast-mb.fr { float:right; border-left:1px solid #ddd; }
.firstlast-mb td, .firstlast-mb th {
    border:1px solid #e4e4e4; text-align:center;
    padding:4px 5px; line-height:22px; font-size:16px;
}
.firstlast-mb.fl td:last-child,.firstlast-mb.fl th:last-child { padding-left:8px; text-align:left; }
.firstlast-mb.fr td:first-child,.firstlast-mb.fr th:first-child { padding-right:8px; text-align:right; }
.firstlast-mb.fr td,.firstlast-mb.fr th { border-left:none; }
.firstlast-mb tr.header th { background:#f7e9be; color:#7a5500; font-size:14px; font-weight:700; }
.firstlast-mb .bg_ef td { background:#efefef; }

.clred { color:var(--kq-orange) !important; font-weight:700; }
.clnote { color:var(--kq-orange) !important; font-weight:700; }

.kqxs-loto-tabs-wrap { border-top:1px solid #ddd; padding:8px; background:#fff; }
.kqxs-loto-tabs {
    display:flex; border:1px solid #ddd; border-radius:3px;
    overflow:hidden; margin-bottom:8px;
}
.loto-tab {
    flex:1; text-align:center; padding:7px 2px;
    font-size:14px; font-weight:700; color:#555;
    background:#f5f5f5; border-right:1px solid #ddd;
    cursor:pointer; transition:background .1s;
}
.loto-tab:last-child { border-right:none; }
.loto-tab:hover { background:#e0e0e0; }
.loto-tab.active { background:var(--kq-primary); color:#fff; }
.kqxs-loto-panel {
    display:flex; flex-wrap:wrap; gap:4px; padding:4px;
}
.loto-num {
    display:inline-block; min-width:36px; text-align:center;
    padding:4px 6px; font-size:16px; font-weight:700; color:#333;
    border:1px solid #e4e4e4; border-radius:3px; background:#fafafa;
}
.loto-num.clred { color:var(--kq-orange) !important; }

.kqxs-dbhist-wrap { border-top:1px solid #ddd; }
.kqxs-dbhist-title {
    background:var(--kq-bg-alt); color:#333; font-weight:700; font-size:14px;
    padding:8px 12px; border-bottom:1px solid #ddd;
}
.kqxs-dbhist-range { font-weight:400; color:#666; font-size:12px; margin-left:4px; }
.kqxs-dbhist-table { width:100%; border-collapse:collapse; font-size:13px; }
.kqxs-dbhist-table th {
    background:#dfdfdf; color:#333; font-weight:700; font-size:13px;
    padding:8px 4px; text-align:center; border:1px solid #e4e4e4;
}
.kqxs-dbhist-table td {
    text-align:center; padding:6px 2px; border:1px solid #e4e4e4; white-space:nowrap;
}
.kqxs-dbhist-table .bg_ef { background:#f9f9f9; }
.dbh-head { color:#555; font-weight:700; }
.dbh-tail { color:var(--kq-orange); font-weight:700; font-size:16px; margin-left:1px; }

.kqxs-quickstats { border-top:1px solid #ddd; padding-bottom:6px; }
.kqxs-quickstats-title {
    background:var(--kq-primary); color:#fff; font-weight:700; font-size:14px;
    padding:9px 12px;
}
.kqxs-qs-heading {
    font-size:13px; font-weight:700; color:#333;
    padding:8px 12px 4px; border-top:1px solid #eee;
}
.kqxs-qs-list { display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 6px; list-style:none; margin:0; }
.kqxs-qs-list li {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    font-size:11px; color:#666; min-width:38px;
}
.kqxs-qs-num {
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    background:var(--kq-orange); color:#fff; font-weight:700; font-size:14px;
}

@media(max-width:600px) {
    .kqmb td.v-giai span[class^=v-g] { font-size:20px; }
    .kqmb .v-gdb { font-size:26px; }
    .firstlast-mb td,.firstlast-mb th { font-size:13px; }
    .txt-giai { width:44px; font-size:12px; }
    .kqxs-dbhist-table { font-size:11px; }
    .dbh-tail { font-size:13px; }
}

.intro-info-box {
    background: #fff;
    max-height: 380px;
    overflow-y: auto;
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.85;
    color: #333;
    border-bottom: 1px solid #eceff1;
}
.intro-info-box p { margin-bottom: 10px; }
.intro-info-box p:last-child { margin-bottom: 0; }
.intro-info-box a { color: #00796b; text-decoration: underline; }
.intro-info-box a:hover { color: #d32f2f; }
.intro-title-red {
    color: #ff0000;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 4px !important;
}
.intro-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}
.intro-divider-line { flex: 0 0 60px; height: 1px; background: #ff9800; }
.intro-divider-stars { color: #ff9800; font-size: 14px; letter-spacing: 3px; }
.intro-title-green {
    color: #008000;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    margin: 4px 0 12px;
}
.intro-lead { color: #008000; font-weight: 700; }
.intro-faq-q { color: #008000; font-weight: 700; margin-bottom: 4px !important; }

.bachthu-wrap {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(20, 30, 40, 0.08);
    border: 1px solid #eef1f3;
}
.bachthu-title {
    background: linear-gradient(135deg, #fff59d, #ffca28);
    color: #c62828;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.4px;
    text-align: center;
    padding: 13px 10px;
    text-transform: uppercase;
    border-bottom: 2px solid #ffb300;
}
.bachthu-title::before { content: "🎯 "; }

.bachthu-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bachthu-table thead th {
    background: linear-gradient(135deg, #43a047, #2e7d32);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    text-align: center;
    padding: 11px 8px;
    text-transform: uppercase;
}
.bachthu-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid #f0f2f4;
}
.bachthu-table tbody tr:nth-child(even) { background: #f8fafc; }
.bachthu-table tbody tr:hover { background: #eef7f0; }
.bachthu-table tbody tr:last-child td { border-bottom: none; }

.bachthu-date { color: #37474f; font-weight: 600; font-size: 13px; }

.bachthu-nums {
    color: #1565c0;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.2px;
}
.bachthu-row-hit .bachthu-nums { color: #2e7d32; }
.bachthu-row-pending .bachthu-nums { color: #d81b60; }

.bachthu-result span {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.bachthu-hit { background: #e8f5e9; color: #2e7d32; }
.bachthu-miss { background: #eceff1; color: #546e7a; }
.bachthu-pending {
    background: #fce4ec;
    color: #d81b60;
    animation: bachthu-pulse 1.6s ease-in-out infinite;
}
@keyframes bachthu-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.bachthu-row-pending { background: #fffaf9; }
.bachthu-row-pending:nth-child(even) { background: #fff5f7; }

@media (max-width: 480px) {
    .bachthu-table { font-size: 12px; }
    .bachthu-nums { font-size: 12px; }
    .bachthu-result span { padding: 3px 9px; font-size: 11px; }
}

@media (max-width: 780px) {
    #wrapper { max-width: 100%; }
    .site-title-text { font-size: 24px; }
    .ball { width: 52px; height: 52px; font-size: 22px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .main-nav > ul { display: none; flex-direction: column; }
    .main-nav > ul.open { display: flex; }
    .main-nav ul li a { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .main-nav ul ul { position: static; box-shadow: none; background: #3e2000; }
    .menu-toggle { display: block; }
    .footer-grid { grid-template-columns: 1fr; }
    .pred-label { min-width: 110px; font-size: 13px; }
    .site-title-text { font-size: 20px; }
    .ball { width: 44px; height: 44px; font-size: 18px; }
}

.archive-breadcrumb {
    padding: 10px 16px;
    font-size: 13px;
    color: #546e7a;
    border-bottom: 1px dashed #e0e0e0;
    background: #fff;
}
.archive-breadcrumb a { color: #00796b; }
.archive-breadcrumb a:hover { color: #d32f2f; }
.archive-breadcrumb span { margin: 0 4px; color: #767676; }

.archive-title-wrap { padding: 12px 16px 6px; background: #fff; }
.archive-title { font-size: 19px; color: #263238; font-weight: 700; }

.list1-wrap { background: #fff; padding: 4px 16px 10px; }
.list1 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px dashed #eceff1;
    font-size: 14px;
}
.list1:last-child { border-bottom: none; }
.list1-icon { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }
.list1 a { color: #263238; }
.list1 a:hover { color: #00796b; }
.archive-red { color: #d32f2f; }