/*
Theme Name: Bóng Đá LiveScore VN
Theme URI: https://keonhacai.local/
Description: Theme tỷ số bóng đá trực tuyến, livescore thể thao và tỷ lệ kèo 2in1 với layout cột sidebar bên trái fixed màn hình, tên class thông dụng không gắn brand, DOM tối giản, typography 14px Montserrat chuẩn toàn trang, dữ liệu realtime và zero frontend lag.
Author: DeepMind Antigravity
Author URI: https://keonhacai.local/
Version: 3.4.5
Text Domain: theme-7m
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   LOCAL GOOGLE FONT: MONTSERRAT
   Loaded from assets/fonts/ with display: swap for instant rendering.
   ========================================================================== */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/montserrat.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/montserrat-italic.ttf') format('truetype');
}

/* ==========================================================================
   GLOBAL DESIGN & TYPOGRAPHY SYSTEM (14px Base Font Standard)
   1. Typography: font-size 14px làm chuẩn toàn trang với font Montserrat
   2. Sidebar Left Fixed: Thanh điều hướng bên trái cố định toàn màn hình (270px)
   3. Standard Classes: container, row, col, col-main, col-side, btn, card, nav...
   4. Bo góc đồng bộ 8px / 6px, độ tương phản cao, không vỡ hạt
   5. Không sinh thanh cuộn ngang, tối ưu responsive 100%
   ========================================================================== */

:root, html {
    font-size: 14px !important;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    font-family: 'Montserrat', Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    overflow-x: hidden !important;
}

*, *::before, *::after {
    box-sizing: inherit;
    box-shadow: none !important;
    text-shadow: none !important;
}

body {
    font-family: 'Montserrat', Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #1e293b;
    background-color: #f1f5f9 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Base typography enforcement (14px standard across all content elements) */
p, li, a, span, label, input, select, textarea, button {
    font-size: 14px;
    font-family: inherit;
}

/* ==========================================================================
   MASTER FIXED LEFT SIDEBAR & MAIN WRAPPER LAYOUT
   ========================================================================== */

/* App Layout Container */
.app-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

/* 1. FIXED LEFT SIDEBAR (Desktop Fixed to Screen) */
.sidebar-left {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 270px !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Custom Slim Scrollbar for Left Sidebar */
.sidebar-left::-webkit-scrollbar {
    width: 5px;
}
.sidebar-left::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-left::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.sidebar-left::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Sidebar Brand / Logo */
.sidebar-brand {
    padding: 14px 14px 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.sidebar-brand .brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    line-height: 1;
    width: 100% !important;
    box-sizing: border-box;
}
.sidebar-brand .brand-logo {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
    display: block !important;
}
.sidebar-brand .brand-slogan {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-top: 2px !important;
}
.brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    line-height: 1;
}
.brand-logo {
    max-width: 100% !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain;
    display: block;
}
.brand-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 24px !important;
    font-weight: 700;
    color: #dc2626;
    letter-spacing: -0.5px;
}
.brand-badge {
    background-color: #dc2626;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.brand-slogan {
    font-size: 15px !important;
    color: #475569 !important;
    line-height: 1.4 !important;
    font-weight: 500;
}


/* Sidebar Search Box */
.sidebar-search {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.sidebar-search .search-form {
    margin: 0;
    padding: 0;
    width: 100%;
}
.sidebar-search .search-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px !important;
    padding: 8px 12px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.sidebar-search .search-input-wrap:focus-within {
    border-color: #2563eb;
    background-color: #ffffff;
}
.sidebar-search .search-icon {
    color: #94a3b8;
    flex-shrink: 0;
}
.sidebar-search .search-input {
    border: none !important;
    background: transparent !important;
    font-size: 16px !important;
    color: #1e293b;
    width: 100%;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1 1 auto;
    padding: 12px 10px;
    overflow-y: auto;
    overflow-x: hidden;
}
.nav-heading {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: #64748b !important;
    letter-spacing: 0.6px;
    padding: 10px 12px 6px 12px;
}
.sidebar-nav .nav,
.sidebar-nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sidebar-nav .nav-item,
.sidebar-nav-list li {
    margin: 0 !important;
    padding: 0 !important;
}
.sidebar-nav .nav-link,
.sidebar-nav-list li > a {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 16px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 8px !important;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 500;
    transition: all 0.15s ease;
    box-sizing: border-box !important;
}
.sidebar-nav .nav-link:hover,
.sidebar-nav-list li > a:hover {
    background-color: #f1f5f9;
    color: #0f172a !important;
    text-decoration: none !important;
}
.sidebar-nav .nav-item.active > .nav-link,
.sidebar-nav .nav-link.active,
.sidebar-nav .nav-item.current-menu-item > .nav-link,
.sidebar-nav-list li.current-menu-item > a,
.sidebar-nav-list li.current_page_item > a,
.sidebar-nav-list li.active > a {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    font-weight: 600 !important;
}
.sidebar-nav .nav-icon-wrap {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.sidebar-nav .nav-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-nav .nav-icon {
    flex-shrink: 0 !important;
    color: #64748b;
    transition: color 0.15s ease;
    width: 22px !important;
    height: 22px !important;
}
.sidebar-nav .nav-item.active .nav-icon,
.sidebar-nav .nav-link.active .nav-icon,
.sidebar-nav-list li.current-menu-item .nav-icon,
.sidebar-nav-list li.active .nav-icon {
    color: #1d4ed8 !important;
}

/* Sidebar sub-menu support */
.sidebar-nav .sub-menu {
    list-style: none !important;
    margin: 2px 0 4px 18px !important;
    padding: 0 0 0 10px !important;
    border-left: 2px solid #e2e8f0 !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-nav .sub-menu li > a {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 14.5px !important;
    padding: 0 12px !important;
    gap: 10px !important;
}
.sidebar-nav .sub-menu .nav-icon-wrap {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
}
.sidebar-nav .sub-menu .nav-icon {
    width: 16px !important;
    height: 16px !important;
}

/* Sidebar Widgets (Collapsible Accordion - Compact & Streamlined) */
.sidebar-widgets {
    padding: 4px 10px;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: transparent;
    transition: background-color 0.15s ease;
}

.sidebar-widgets-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 30px;
    min-height: 30px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0 10px;
    cursor: pointer;
    color: #475569;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: all 0.15s ease;
    box-sizing: border-box;
}
.sidebar-widgets-toggle:hover {
    color: #2563eb;
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}
.sidebar-widgets-toggle .widgets-toggle-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: inherit;
    line-height: 1;
}
.sidebar-widgets-toggle .toggle-icon {
    flex-shrink: 0;
    color: #64748b;
}

.widget-toggle-arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: #64748b;
    flex-shrink: 0;
}

/* Collapsed state (Default minimized) */
.sidebar-widgets.is-collapsed .sidebar-widgets-content {
    display: none !important;
}
.sidebar-widgets.is-collapsed .widget-toggle-arrow {
    transform: rotate(0deg);
}

/* Expanded state (Active on click) */
.sidebar-widgets:not(.is-collapsed) .sidebar-widgets-content {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0 2px 0;
    animation: fadeInWidgets 0.2s ease;
}
.sidebar-widgets:not(.is-collapsed) .widget-toggle-arrow {
    transform: rotate(180deg);
}

@keyframes fadeInWidgets {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

.widget-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px !important;
    color: #475569;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px !important;
    padding: 4px 8px;
    box-shadow: none !important;
}
.widget-meta .meta-weather {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 12px !important;
    color: #0284c7;
}
.widget-meta .meta-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px !important;
    color: #64748b;
}
.widget-sound-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px !important;
    color: #334155;
    padding: 2px 4px;
}
.widget-sound-row .btn {
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}
.widget-quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.widget-quick-tags .tag-link {
    font-size: 11.5px !important;
    padding: 2px 8px;
    border-radius: 6px !important;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.widget-quick-tags .tag-link:hover {
    background-color: #f1f5f9;
    color: #0f172a !important;
    text-decoration: none !important;
}

/* Sidebar Footer (App & Contacts) */
.sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid #f1f5f9;
    background-color: #fafafa;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sidebar-footer .contact-links {
    display: flex;
    gap: 8px;
}
.sidebar-footer .contact-links .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* 2. MAIN CONTENT WRAPPER (Beside Fixed Left Sidebar) */
.main-wrapper {
    margin-left: 270px !important;
    width: calc(100% - 270px) !important;
    min-height: 100vh !important;
    background-color: #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    text-align: left !important;
    position: relative;
}

/* 3. MOBILE TOPBAR (< 1024px) */
.mobile-topbar {
    display: none;
}
.sidebar-backdrop {
    display: none;
}

@media (max-width: 1023px) {
    .mobile-topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        padding: 0 12px !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        z-index: 999 !important;
        box-sizing: border-box !important;
    }
    .mobile-topbar .btn-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        color: #334155 !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
        transition: all 0.15s ease !important;
    }
    .mobile-topbar .btn-icon:hover,
    .mobile-topbar .btn-icon:active {
        background-color: #f8fafc !important;
        border-color: #cbd5e1 !important;
        color: #0f172a !important;
    }
    .mobile-topbar .btn-icon.active {
        background-color: var(--v7m-primary, #dc2626) !important;
        border-color: var(--v7m-primary, #dc2626) !important;
        color: #ffffff !important;
    }
    .mobile-topbar .btn-icon svg {
        width: 20px !important;
        height: 20px !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        fill: none !important;
        flex-shrink: 0 !important;
    }
    .mobile-brand {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        text-decoration: none !important;
        line-height: 1 !important;
    }
    .mobile-brand img {
        max-height: 40px !important;
        max-width: 160px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
    .mobile-brand .brand-text {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #dc2626 !important;
        letter-spacing: -0.5px !important;
    }
    .mobile-brand .brand-badge {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }
    .mobile-actions {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .sidebar-left {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 1100 !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s !important;
    }
    .sidebar-left.is-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .sidebar-backdrop {
        position: fixed !important;
        inset: 0 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        z-index: 1050 !important;
        display: none;
    }
    .sidebar-backdrop.is-open {
        display: block !important;
    }
    .main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-top: 56px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   STANDARD GRID SYSTEM (container, row, col, col-main, col-side)
   ========================================================================== */

.container {
    width: 100% !important;
    max-width: 1250px !important;
    margin: 8px auto !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
}

.row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.col {
    box-sizing: border-box !important;
}

.col-main {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.col-side {
    flex: 0 0 320px !important;
    width: 320px !important;
    min-width: 320px !important;
    display: block !important;
    box-sizing: border-box !important;
}

@media (max-width: 1023px) {
    .row {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .col-main {
        width: 100% !important;
        order: 1 !important;
    }
    .col-side {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        order: 2 !important;
    }
}

/* ==========================================================================
   STANDARD UI COMPONENTS (btn, card, badge, nav, toolbar, table, modal)
   ========================================================================== */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600;
    border-radius: 6px !important;
    border: 1px solid transparent;
    padding: 7px 14px;
    cursor: pointer;
    text-decoration: none !important;
    line-height: 1.35;
    transition: all 0.15s ease;
    user-select: none;
    box-sizing: border-box;
}
.btn-primary {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}
.btn-primary:hover {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}
.btn-secondary {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}
.btn-secondary:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}
.btn-icon {
    padding: 6px !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: none !important;
    color: #475569 !important;
}
.btn-icon:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}
.btn-sm {
    padding: 5px 10px !important;
    font-size: 12.5px !important;
}
.btn-pill {
    border-radius: 20px !important;
    padding: 5px 12px !important;
}
.btn-block {
    width: 100% !important;
}

/* Cards */
.card {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden;
    margin-bottom: 12px;
    box-sizing: border-box;
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    box-sizing: border-box;
}
.card-title {
    margin: 0;
    font-size: 14.5px !important;
    font-weight: 700;
    text-transform: uppercase;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-link {
    font-size: 12.5px !important;
    font-weight: 600;
    color: #2563eb !important;
    text-decoration: none !important;
}
.card-link:hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}
.card-body {
    padding: 12px 14px;
    box-sizing: border-box;
}

/* Toolbars & Filters (Strict 1-Row / Swipeable Ribbon / Zero Overflow) */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    background-color: #ffffff;
    border-radius: 8px !important;
    padding: 5px 8px;
    margin-bottom: 10px;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100% !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.toolbar::-webkit-scrollbar {
    display: none;
}
.toolbar-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}
.toolbar-tabs::-webkit-scrollbar {
    display: none;
}
.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.tab-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 11px;
    font-size: 13px !important;
    font-weight: 500;
    border-radius: 6px !important;
    color: #475569 !important;
    background-color: #f1f5f9;
    text-decoration: none !important;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap !important;
    flex-shrink: 0;
    transition: all 0.15s ease;
    height: 32px;
    box-sizing: border-box;
}
.tab-pill:hover {
    background-color: #e2e8f0;
    color: #0f172a !important;
}
.tab-pill.active {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    font-weight: 600;
}

/* Date Navigator */
.date-navigator {
    display: inline-flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px !important;
    padding: 2px 5px;
    height: 32px;
    box-sizing: border-box;
    flex-shrink: 0;
}
.date-navigator #date-label-text {
    font-size: 13px !important;
    font-weight: 600;
    padding: 0 6px;
    white-space: nowrap;
    color: #1e293b;
}

/* Toolbar Search Box (Hidden to prevent toolbar overflow - search is available in Fixed Left Sidebar & Mobile Topbar) */
.toolbar .search-box {
    display: none !important;
}

/* Odds Type Toggles */
.odds-type-toggles {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

/* Toolbar Dropdowns */
.toolbar select {
    font-size: 12.5px !important;
    padding: 3px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px !important;
    background: #f8fafc;
    color: #1e293b;
    outline: none;
    height: 32px;
    box-sizing: border-box;
    max-width: 220px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 11.5px !important;
    font-weight: 600;
    border-radius: 4px !important;
    line-height: 1;
}
.badge-live {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}
.badge-hot {
    background-color: #fef3c7 !important;
    color: #d97706 !important;
}
.badge-count {
    background-color: rgba(0, 0, 0, 0.08);
    color: inherit;
    margin-left: 4px;
    border-radius: 10px !important;
    padding: 1px 6px;
    font-size: 11px !important;
    font-weight: 600;
}
.tab-pill.active .badge-count {
    background-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Data Tables */
.table {
    width: 100% !important;
    border-collapse: collapse;
    background-color: #ffffff;
    border-radius: 8px !important;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-bottom: 12px;
}
.table-head {
    background-color: #f8fafc;
    font-weight: 700;
    font-size: 13.5px !important;
    color: #334155;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
}
.table-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13.5px !important;
    transition: background-color 0.12s ease;
}
.table-row:hover {
    background-color: #f8fafc;
}
.table-col {
    padding: 8px 10px;
    box-sizing: border-box;
    font-size: 13.5px !important;
}

/* Modals */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}
.modal-dialog {
    background-color: #ffffff;
    border-radius: 8px !important;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.modal-header {
    padding: 12px 16px;
    background-color: #0f2637;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-title {
    margin: 0;
    font-size: 14px !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
}
.modal-close {
    background: transparent;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    padding: 4px;
}
.modal-close:hover {
    color: #ffffff;
}
.modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.modal-footer {
    padding: 12px 16px;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ==========================================================================
   MAIN FOOTER (Dark Navy Sport Surface #0b1a2c, WCAG AA High Contrast)
   ========================================================================== */
.footer {
    background-color: #0b1a2c !important;
    border-top: 3px solid #1e3a8a !important;
    padding: 38px 0 24px 0 !important;
    margin-top: auto !important;
    color: #cbd5e1 !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 14px !important;
}
.footer-row {
    margin-bottom: 24px !important;
    gap: 24px !important;
}
.footer-col {
    flex: 1 1 230px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}
.footer-brand {
    margin-bottom: 12px !important;
}
.footer-logo {
    max-width: 170px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    height: auto !important;
    display: block !important;
}
.footer-brand-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    letter-spacing: -0.5px !important;
}
.footer-brand-text .brand-badge {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    padding: 2px 7px !important;
}
.footer-desc {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}
.footer-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
    padding-bottom: 6px !important;
    border-bottom: 2px solid #2563eb !important;
    display: inline-block !important;
}
.footer-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}
.footer-list a {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    display: inline-block !important;
}
.footer-list a:hover {
    color: #60a5fa !important;
    transform: translateX(3px) !important;
    text-decoration: none !important;
}

/* Footer CSKH & App Buttons */
.footer-btn-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}
.footer-btn {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
}
.footer-btn .icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}
.footer-btn-app {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}
.footer-btn-app:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
}
.footer-btn-tele {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
}
.footer-btn-tele:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
    color: #ffffff !important;
}
.footer-btn-zalo {
    background: linear-gradient(135deg, #0068ff 0%, #0050c8 100%) !important;
}
.footer-btn-zalo:hover {
    background: linear-gradient(135deg, #2b7fff 0%, #0068ff 100%) !important;
    color: #ffffff !important;
}

/* Footer Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 12.5px !important;
    color: #64748b !important;
}
.footer-bottom strong {
    color: #cbd5e1 !important;
}
.footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}
.footer-links a {
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
.footer-links a:hover {
    color: #60a5fa !important;
    text-decoration: none !important;
}
.footer-links span {
    color: #475569 !important;
    font-size: 12px !important;
}

@media (max-width: 768px) {
    .footer {
        padding: 24px 0 18px 0 !important;
    }
    .footer-desc {
        font-size: 13px !important;
    }
    .footer-title {
        font-size: 13.5px !important;
    }
    .footer-list a {
        font-size: 13px !important;
    }
    .footer-btn {
        font-size: 13px !important;
        height: 36px !important;
        min-height: 36px !important;
    }
    .footer-bottom,
    .footer-links a {
        font-size: 12px !important;
    }
    .footer-row {
        flex-direction: column !important;
        gap: 18px !important;
    }
    .footer-col {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .footer-links {
        justify-content: center !important;
    }
}

/* Icon Helper */
.icon, .v7m-inline-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    pointer-events: none;
}

/* Utility Hidden */
.is-hidden {
    display: none !important;
}

/* ==========================================================================
   HOMEPAGE PREDICTIONS BLOCK (Nhận định bóng đá mới nhất)
   ========================================================================== */
.hp-predictions-wrap {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin: 12px 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}
.hp-block-header {
    background: #0f172a !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-left: 3px solid #2563eb !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
}
.hp-block-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.hp-block-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.2px;
}
.hp-block-tag {
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}
.hp-block-more-link {
    color: #38bdf8 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.hp-block-more-link:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}
.hp-predictions-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
}
.hp-pred-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}
.hp-pred-card:hover {
    border-color: #2563eb !important;
    background: #ffffff !important;
}
.hp-pred-card-thumb {
    position: relative !important;
    width: 100% !important;
    height: 88px !important;
    overflow: hidden !important;
    border-radius: 6px !important;
}
.hp-pred-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.hp-pred-badge-league {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    max-width: 90% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.hp-pred-meta {
    margin-top: 5px !important;
    font-size: 10px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.hp-pred-title {
    margin: 4px 0 6px 0 !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    height: 32px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}
.hp-pred-title a {
    color: #0f172a !important;
    text-decoration: none !important;
}
.hp-pred-title a:hover {
    color: #2563eb !important;
}
.hp-pred-action {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    padding-top: 4px !important;
    border-top: 1px solid #f1f5f9 !important;
}
.hp-pred-btn-read {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #2563eb !important;
    text-decoration: none !important;
}
.hp-pred-btn-h2h {
    font-size: 10px !important;
    color: #64748b !important;
    text-decoration: none !important;
}

/* ==========================================================================
   RESPONSIVE TOOLBARS & FILTERS (Strict 1-Row / Swipeable Ribbon / Zero Wrap)
   Mobile: NEVER wrap down into messy lines ("Đừng cho nó xuống hàng chứ!")
   Auto-scales gracefully across all devices with zero horizontal page scroll.
   ========================================================================== */
@media (max-width: 1023px) {
    .hp-predictions-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
}

@media (max-width: 768px) {
    /* Responsive Toolbar Mobile: Ultra-Compact Single Row / 10px Font / Zero Wrap / Zero Clipping */
    .toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 2px !important;
        padding: 3px 4px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .toolbar::-webkit-scrollbar {
        display: none !important;
    }

    /* Tabs Group on Mobile: Stretched evenly */
    .toolbar-tabs {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Each tab pill on mobile (10px font, compact, flexes evenly, no text loss) */
    .toolbar-tabs .tab-pill {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 25px !important;
        min-height: 25px !important;
        padding: 0 2px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        gap: 2px !important;
        border-radius: 5px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .toolbar-tabs .tab-pill .tab-label,
    .toolbar-tabs .tab-pill span:not(.badge-count):not(.live-pulse-dot) {
        font-size: 10px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .toolbar-tabs .tab-pill .badge-count {
        font-size: 8.5px !important;
        padding: 0 2.5px !important;
        height: 13px !important;
        line-height: 13px !important;
        min-width: 11px !important;
        border-radius: 7px !important;
        margin-left: 1px !important;
    }

    .toolbar-tabs .tab-pill svg.icon {
        width: 10px !important;
        height: 10px !important;
        flex-shrink: 0 !important;
    }

    .live-pulse-dot {
        width: 4px !important;
        height: 4px !important;
        flex-shrink: 0 !important;
    }

    /* Actions Strip on Mobile */
    .toolbar-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* League Button on right (10px compact) */
    #btn-open-league-modal,
    #btn-odds-filter-league {
        height: 25px !important;
        min-height: 25px !important;
        padding: 0 6px !important;
        font-size: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        border-radius: 5px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
    #btn-open-league-modal svg,
    #btn-odds-filter-league svg {
        width: 11px !important;
        height: 11px !important;
    }

    /* Hide non-essential items */
    .toolbar .search-box,
    .toolbar #btn-sound-toggle,
    .toolbar #fixtures-visible-count,
    .toolbar #results-visible-count,
    .toolbar #btn-reload-table,
    .toolbar #vip-hide-counter-wrap,
    .toolbar .date-navigator {
        display: none !important;
    }

    /* Odds Type Toggles on Mobile */
    .odds-type-toggles {
        flex-shrink: 0 !important;
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
    }
    .odds-type-toggles .tab-pill {
        padding: 2px 6px !important;
        font-size: 11px !important;
        height: 26px !important;
        min-height: 26px !important;
    }

    /* Select Dropdowns on Mobile */
    .toolbar select {
        height: 28px !important;
        font-size: 11.5px !important;
        padding: 2px 4px !important;
        max-width: 120px !important;
        border-radius: 6px !important;
    }

    .hp-predictions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* ==========================================================================
   STANDINGS DATA TABLE RESPONSIVE WRAPPER
   Keeps 11 columns in straight alignment without colliding or broken numbers
   ========================================================================== */
.standings-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    max-width: 100% !important;
}
.standings-table .table-head,
.standings-table .standings-row {
    min-width: 580px !important;
}
@media (min-width: 1024px) {
    .standings-table .table-head,
    .standings-table .standings-row {
        min-width: 100% !important;
    }
}

/* ==========================================================================
   PAGE TOP COMPACT H1 TITLE BAR (.page-h1-bar)
   Unified, ultra-compact, aesthetically sleek header strip across all templates
   ========================================================================== */
.page-h1-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 7px 14px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    min-height: 38px !important;
}
.page-h1-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: clamp(13px, 0.6vw + 10px, 15px) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    flex: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.page-h1-title .h1-svg-icon {
    color: #dc2626 !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
}
.page-h1-meta {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.page-h1-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    .page-h1-bar {
        padding: 6px 10px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }
    .page-h1-title {
        font-size: 13px !important;
        gap: 6px !important;
    }
    .page-h1-title .h1-svg-icon {
        width: 14px !important;
        height: 14px !important;
    }
    .page-h1-badge {
        font-size: 10px !important;
        padding: 1px 6px !important;
    }
}
@media (max-width: 480px) {
    .page-h1-meta {
        display: none !important;
    }
}

/* ==========================================================================
   TYPOGRAPHY SYSTEM (16px Base for Content, Header, Sidebar, Footer)
   Keeps match tables dense, readable & pixel-perfect without broken forms.
   ========================================================================== */

/* Reading Content & Articles (Clear 16px Base Standard) */
.standard-page-card,
.page-entry-body,
.entry-content,
.article-content {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #334155;
}
.entry-content p,
.entry-content li {
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 12px;
}

/* Headings */
h1, .h1 { font-size: clamp(20px, 1.2vw + 16px, 26px) !important; font-weight: 700 !important; line-height: 1.3 !important; }
h2, .h2 { font-size: clamp(18px, 1vw + 14px, 22px) !important; font-weight: 700 !important; line-height: 1.35 !important; }
h3, .h3 { font-size: clamp(16px, 0.8vw + 13px, 19px) !important; font-weight: 700 !important; line-height: 1.4 !important; }
h4, .h4 { font-size: clamp(15px, 0.5vw + 13px, 17px) !important; font-weight: 600 !important; line-height: 1.45 !important; }

/* Left Sidebar Fixed (14px Standard Montserrat Typography) */
.sidebar-left .brand-text { font-size: 20px !important; font-weight: 700 !important; }
.sidebar-left .brand-slogan { font-size: 12.5px !important; line-height: 1.4 !important; color: #64748b !important; }
.sidebar-left .nav-heading { font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.6px; color: #64748b !important; }
.sidebar-left .nav-link { font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; height: 42px !important; min-height: 42px !important; }
.sidebar-left .search-input { font-size: 13.5px !important; }
.sidebar-widgets-toggle { font-size: 12px !important; font-weight: 500 !important; }
.sidebar-left .widget-meta,
.sidebar-left .widget-meta span { font-size: 11.5px !important; }
.sidebar-left .widget-sound-row { font-size: 11.5px !important; }
.sidebar-left .widget-quick-tags a { font-size: 11px !important; }
.sidebar-left .contact-links a,
.sidebar-left .contact-links button { font-size: 13px !important; font-weight: 600 !important; }
.sidebar-footer .btn { font-size: 13.5px !important; }

/* Mobile Topbar & Header Components */
.mobile-topbar .mobile-brand .brand-text { font-size: 19px !important; font-weight: 700 !important; }
.v7m-hot-item .v7m-hot-name-text { font-size: 13px !important; }
.v7m-hot-item .v7m-hot-score { font-size: 13.5px !important; font-weight: 700 !important; }

/* Hot Week Carousel Strip - Stadium Background & Primary Translucent Blur Overlay */
.v7m-hot-week-strip {
    position: relative !important;
    overflow: hidden !important;
    background-color: var(--v7m-secondary, #012058) !important;
    padding: 8px 0 !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.v7m-hot-week-strip::before {
    content: "" !important;
    position: absolute !important;
    inset: -15px !important;
    background-image: url('assets/images/stadium-bg.webp') !important;
    background-position: center 35% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    filter: blur(4px) !important;
    -webkit-filter: blur(4px) !important;
    transform: scale(1.05) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
.v7m-hot-week-strip::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.82) 0%, rgba(1, 32, 88, 0.88) 100%) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
.v7m-hot-week-strip .container {
    position: relative !important;
    z-index: 2 !important;
}
.v7m-hot-week-card {
    position: relative !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}
.v7m-hot-item {
    color: #ffffff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
    transition: background-color 0.2s ease !important;
}
.v7m-hot-item:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
}
.v7m-hot-item .v7m-hot-status {
    color: rgba(255, 255, 255, 0.90) !important;
    font-weight: 500 !important;
}
.v7m-hot-item .v7m-hot-name-text {
    color: #ffffff !important;
    font-weight: 500 !important;
}
.v7m-hot-item .v7m-hot-score {
    color: #fef08a !important;
    font-weight: 700 !important;
}
.v7m-hot-carousel {
    padding: 0 34px !important;
    scroll-behavior: smooth !important;
    user-select: none !important;
}
.v7m-hot-arrow {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 10 !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
}
.v7m-hot-arrow:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}
.v7m-hot-prev {
    left: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.v7m-hot-next {
    right: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.v7m-hot-arrow.is-disabled {
    opacity: 0.25 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* ==========================================================================
   RIGHT SIDEBAR COMPACT & NO-CLIPPING STYLES (.col-side)
   Moderate font sizes (12px - 14px), natural readability, zero harsh clipping, no badges.
   ========================================================================== */
.col-side .card {
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}
.col-side .card-header {
    padding: 8px 12px !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.col-side .card-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    color: #1e293b !important;
    gap: 6px !important;
}
.col-side .card-link {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #2563eb !important;
}
.col-side .card-body {
    padding: 0 !important;
}

/* Widget 1: Nhận định mới nhất */
.col-side .sb-post-item {
    padding: 8px 12px !important;
    gap: 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    min-height: auto !important;
    align-items: flex-start !important;
}
.col-side .sb-post-thumb {
    width: 68px !important;
    height: 46px !important;
    flex: 0 0 68px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-top: 2px !important;
}
.col-side .sb-post-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.col-side .sb-post-meta {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 3px !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
}
.col-side .sb-post-league {
    color: #2563eb !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}
.col-side .sb-meta-dot {
    color: #94a3b8 !important;
    font-size: 8px !important;
    line-height: 1 !important;
}
.col-side .sb-post-date {
    color: #64748b !important;
    font-size: 11px !important;
}
.col-side .sb-post-title,
.col-side .sb-post-info h4 {
    font-size: 13px !important;
    line-height: 1.38 !important;
    margin: 0 !important;
    font-weight: 600 !important;
}
.col-side .sb-post-title a,
.col-side .sb-post-info a {
    color: #1e293b !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
    white-space: normal !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
}
.col-side .sb-post-title a:hover {
    color: #2563eb !important;
}

/* Widget 2: Trận cầu tâm điểm */
.col-side .sb-match-item {
    padding: 8px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    min-height: auto !important;
}
.col-side .sb-match-head {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    height: 18px !important;
    margin-bottom: 4px !important;
    font-size: 11.5px !important;
}
.col-side .sb-head-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
}
.col-side .sb-match-league {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #2563eb !important;
    max-width: 190px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.col-side .sb-head-dot {
    color: #cbd5e1 !important;
    font-size: 8px !important;
    line-height: 1 !important;
}
.col-side .sb-match-time {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}
.col-side .sb-match-time.is-live-pulse {
    color: #dc2626 !important;
    font-weight: 700 !important;
    background: transparent !important;
    padding: 0 !important;
}
.col-side .sb-match-body {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    min-height: 28px !important;
    height: auto !important;
    text-decoration: none !important;
    color: inherit !important;
}
.col-side .sb-match-team {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.col-side .sb-match-home {
    justify-content: flex-end !important;
    text-align: right !important;
}
.col-side .sb-match-away {
    justify-content: flex-start !important;
    text-align: left !important;
}
.col-side .sb-team-name {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-height: 2.5em !important;
}
.col-side .sb-match-body:hover .sb-team-name {
    color: #2563eb !important;
}
.col-side .sb-team-logo {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    object-fit: contain !important;
    border-radius: 3px !important;
}
.col-side .sb-match-score {
    flex: 0 0 auto !important;
    min-width: 36px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    background: #f1f5f9 !important;
    border-radius: 4px !important;
    padding: 0 4px !important;
}
.col-side .sb-match-score.live-score {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

/* Widget 3: BXH Ngoại Hạng Anh Mini (No Badges, Clean Numbers) */
.col-side .sb-mini-table {
    width: 100% !important;
    font-size: 12px !important;
    border-collapse: collapse !important;
}
.col-side .sb-mini-table th {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    padding: 5px 6px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.col-side .sb-mini-table td {
    font-size: 12px !important;
    padding: 5px 6px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.col-side .sb-rank-num {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    display: inline-block !important;
    text-align: center !important;
    width: 18px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.col-side .sb-rank-num.is-top4 {
    color: #dc2626 !important;
}
.col-side .sb-team-cell {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
}
.col-side .sb-mini-name {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.col-side .badge {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
    border-radius: 0 !important;
}

/* Widget: Trận Hot Nhất Tuần Này */
.col-side .v7m-sb-hot-row {
    padding: 8px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.col-side .v7m-sb-hot-top {
    font-size: 11.5px !important;
    margin-bottom: 3px !important;
}
.col-side .v7m-sb-hot-league {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #2563eb !important;
}
.col-side .v7m-sb-hot-status {
    font-size: 11px !important;
    color: #64748b !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.col-side .v7m-sb-hot-status.is-live {
    color: #dc2626 !important;
    font-weight: 700 !important;
}
.col-side .v7m-sb-team-name {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.25 !important;
}
.col-side .v7m-sb-team-score {
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   MASTER ZERO HORIZONTAL OVERFLOW & FLUID MOBILE RESPONSIVENESS (<= 768px)
   Eliminates all horizontal overflow across all templates and match tables.
   ========================================================================== */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    .main-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
    }
    .container {
        padding: 0 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .col-main, .col-side {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Live Data Tables Container */
    .container-livetable {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Match Row Strict Dimensions on Mobile Viewport */
    .container-livetable .live-match-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 4px 6px !important;
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }
    .container-livetable .m-col-fav,
    .container-livetable .lth-col-fav {
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        flex: 0 0 20px !important;
        padding: 0 !important;
    }
    .container-livetable .m-col-time,
    .container-livetable .stageOrTime,
    .container-livetable .lth-col-time {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        flex: 0 0 44px !important;
        padding: 0 !important;
    }
    .container-livetable .m-col-teams {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 4px !important;
        overflow: hidden !important;
    }
    .container-livetable .m-col-score,
    .container-livetable .lth-col-score {
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        flex: 0 0 24px !important;
        padding: 0 !important;
    }
    .container-livetable .live-odds-1,
    .container-livetable .lth-col-hdp,
    .container-livetable .m-col-odds.live-odds-1 {
        width: 66px !important;
        min-width: 66px !important;
        max-width: 68px !important;
        flex: 0 0 66px !important;
        padding: 0 !important;
    }

    /* Universally hide redundant odds columns on mobile across all templates */
    .container-livetable:not(#v7m-odds-table.odds-mode-ou):not(#v7m-odds-table.odds-mode-1x2) .live-odds-2,
    .container-livetable:not(#v7m-odds-table.odds-mode-ou):not(#v7m-odds-table.odds-mode-1x2) .live-odds-3,
    .container-livetable .lth-col-ou,
    .container-livetable .lth-col-1x2 {
        display: none !important;
    }

    .container-livetable .m-col-actions,
    .container-livetable .lth-col-act {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        flex: 0 0 28px !important;
        padding: 0 !important;
    }

    /* Basketball Viewport Optimizations */
    .col-bk-q, .m-col-bk-q, .lth-col-bk-q {
        display: none !important;
    }
    .col-bk-tot, .m-col-score.col-bk-tot, .lth-col-bk-tot {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        flex: 0 0 38px !important;
    }
}

/* Sports Tables Form Preservation & Fluid Responsiveness (14px Standard) */
.container-livetable .m-team-name {
    font-size: clamp(12px, 0.4vw + 11px, 14px) !important;
    font-weight: 500 !important;
}
.container-livetable .m-score-num,
.container-livetable .score-live {
    font-size: clamp(13px, 0.5vw + 12px, 15px) !important;
    font-weight: 700 !important;
}
.container-livetable .m-odds-val {
    font-size: clamp(11.5px, 0.3vw + 11px, 13px) !important;
    font-variant-numeric: tabular-nums;
}
.container-livetable .m-kickoff {
    font-size: clamp(11px, 0.3vw + 10.5px, 12.5px) !important;
}

/* Article List Cards */
.article-row .article-info h3,
.article-row .article-info h3 a {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
.article-row .article-meta,
.article-row .article-meta span {
    font-size: 12.5px !important;
}
.article-row .article-info p {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Homepage Predictions Grid */
.hp-block-title { font-size: 15px !important; font-weight: 700 !important; }
.hp-block-more-link { font-size: 13px !important; font-weight: 600 !important; }
.hp-pred-title,
.hp-pred-title a {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}
.hp-pred-meta,
.hp-pred-action a {
    font-size: 12px !important;
}