/*!
 * TySoLive - Vietnam Football Portal
 * Chuan biet mau sac, bo cuc, SEO
 * Version: 4.0.0
 */

/* ============================================
   1. CSS Reset & Variables
   ============================================ */
:root {
    --primary: #0F6BFF;
    --primary-dark: #0A4FC2;
    --accent: #FFB84D;
    --accent-dark: #E89A1F;
    --bg: #EEF3FA;
    --bg-alt: #E8EEF8;
    --card-bg: rgba(255,255,255,0.84);
    --card-bg-solid: #FFFFFF;
    --text-primary: #122033;
    --text-secondary: #5E6B7E;
    --text-muted: #8A96A8;
    --border: rgba(18,32,51,0.08);
    --shadow: 0 12px 30px rgba(15, 27, 45, 0.08);
    --shadow-hover: 0 18px 40px rgba(15, 27, 45, 0.14);
    --radius: 18px;
    --radius-sm: 12px;
    --transition: all 0.28s cubic-bezier(.2,.8,.2,1);
}

/* Final hard override for homepage entity grids */
body.vf-new-portal .vf-main-content .vf-entity-grid,
body.vf-new-portal .vf-main-content .vf-entity-grid-mobile-2 {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: hidden !important;
}

body.vf-new-portal .vf-main-content .vf-entity-grid > .vf-entity-card,
body.vf-new-portal .vf-main-content .vf-entity-grid-mobile-2 > .vf-entity-card {
    flex: 0 0 calc((100% - 7 * 8px) / 8) !important;
    min-width: 0 !important;
    padding: 12px 8px !important;
}

body.vf-new-portal .vf-main-content .vf-entity-icon {
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto 6px !important;
    font-size: 16px !important;
}

body.vf-new-portal .vf-main-content .vf-entity-card img {
    width: 30px !important;
    height: 30px !important;
}

body.vf-new-portal .vf-main-content .vf-entity-name {
    font-size: 12px !important;
}

body.vf-new-portal .vf-main-content .vf-entity-sub {
    font-size: 10px !important;
}

body.vf-new-portal,
body.vf-new-portal * {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.vf-new-portal {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--text-primary) !important;
    background:
        radial-gradient(circle at top left, rgba(15, 107, 255, 0.10), transparent 32%),
        radial-gradient(circle at top right, rgba(255, 184, 77, 0.10), transparent 26%),
        linear-gradient(180deg, #F8FBFF 0%, var(--bg) 100%) !important;
    min-height: 100vh !important;
    -webkit-font-smoothing: antialiased !important;
}

body.vf-new-portal a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

body.vf-new-portal a:hover {
    color: var(--primary-dark);
}

body.vf-new-portal img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

body.vf-new-portal h1 {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

body.vf-new-portal h2 {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

body.vf-new-portal h3 {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

/* ============================================
   2. Container
   ============================================ */
body.vf-new-portal .vf-wrap {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

body.vf-new-portal .vf-page-wrapper {
    min-height: 100vh !important;
    background: var(--bg) !important;
}

/* ============================================
   3. Header - Navigation
   ============================================ */
body.vf-new-portal .vf-header {
    background: rgba(10, 18, 32, 0.72) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 12px 35px rgba(5, 10, 18, 0.18) !important;
}

body.vf-new-portal .vf-header-inner {
    max-width: 1260px !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    height: 72px !important;
    gap: 28px !important;
}

body.vf-new-portal .vf-logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #FFF !important;
    flex-shrink: 0 !important;
}

body.vf-new-portal .vf-logo-brand {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1 !important;
    gap: 2px !important;
}

body.vf-new-portal .vf-logo-subtitle {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    letter-spacing: 0.2px !important;
}

body.vf-new-portal .vf-logo-icon {
    font-size: 30px !important;
}

body.vf-new-portal .vf-logo-text {
    background: linear-gradient(135deg, var(--primary), #00A0A8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.vf-new-portal .vf-main-nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 !important;
}

body.vf-new-portal .vf-nav-link {
    padding: 10px 16px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.76) !important;
    white-space: nowrap !important;
    transition: var(--transition) !important;
}

body.vf-new-portal .vf-nav-link:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #FFF !important;
}

body.vf-new-portal .vf-nav-link.active {
    background: linear-gradient(135deg, rgba(15,107,255,0.95), rgba(0,160,168,0.95)) !important;
    color: #FFF !important;
    box-shadow: 0 10px 24px rgba(15,107,255,0.24) !important;
}

body.vf-new-portal .vf-nav-live {
    background: var(--accent) !important;
    color: #FFF !important;
    font-weight: 600 !important;
}

body.vf-new-portal .vf-nav-live:hover {
    background: var(--accent-dark) !important;
    color: #FFF !important;
}

body.vf-new-portal .vf-header-search {
    position: relative !important;
    width: 260px !important;
    flex-shrink: 0 !important;
}

body.vf-new-portal .vf-header-search input {
    width: 100% !important;
    height: 40px !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    padding: 0 20px 0 44px !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    outline: none !important;
    transition: var(--transition) !important;
}

body.vf-new-portal .vf-header-search input:focus {
    border-color: var(--primary) !important;
    background: var(--card-bg) !important;
}

body.vf-new-portal .vf-header-search input::placeholder {
    color: var(--text-muted) !important;
}

body.vf-new-portal .vf-search-icon {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--text-muted) !important;
    font-size: 16px !important;
}

/* ============================================
   4. Section Common
   ============================================ */
body.vf-new-portal .vf-section {
    margin-bottom: 24px !important;
}

body.vf-new-portal .vf-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

body.vf-new-portal .vf-section-title {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.vf-new-portal .vf-section-icon {
    font-size: 18px !important;
}

body.vf-new-portal .vf-section-link {
    font-size: 13px !important;
    color: var(--primary) !important;
    font-weight: 500 !important;
}

body.vf-new-portal .vf-section-link:hover {
    text-decoration: underline !important;
}

body.vf-new-portal .vf-league-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
}

body.vf-new-portal .vf-league-dashboard.vf-scorers-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.9fr) !important;
}

body.vf-new-portal .vf-page-wrapper {
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.12), transparent 30%),
        radial-gradient(circle at top right, rgba(168,85,247,0.12), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #f3f6fb 100%) !important;
}

body.vf-new-portal .vf-wrap {
    max-width: 1480px !important;
    padding-top: 24px !important;
}

body.vf-new-portal .vf-profile-hero {
    border-radius: 28px !important;
    background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(37,99,235,0.88)) !important;
    color: #fff !important;
    box-shadow: 0 24px 70px rgba(15,23,42,0.16) !important;
}

body.vf-new-portal .vf-profile-hero .vf-profile-name,
body.vf-new-portal .vf-profile-hero .vf-profile-meta,
body.vf-new-portal .vf-profile-hero p {
    color: #fff !important;
}

body.vf-new-portal .vf-profile-hero .vf-profile-tag {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.18) !important;
}

body.vf-new-portal .vf-league-table-card,
body.vf-new-portal .vf-league-insight-card {
    height: 100% !important;
}

body.vf-new-portal .vf-league-hero {
    background: linear-gradient(135deg, rgba(22,119,255,0.08), rgba(8,145,178,0.08)) !important;
    border: 1px solid rgba(22,119,255,0.14) !important;
    border-radius: 24px !important;
    padding: 24px !important;
}

body.vf-new-portal .vf-league-hero-copy {
    margin-top: 14px !important;
    line-height: 1.9 !important;
    color: var(--text-secondary) !important;
    font-size: 15px !important;
}

body.vf-new-portal .vf-league-side {
    display: grid !important;
    gap: 20px !important;
}

body.vf-new-portal .vf-card {
    border: 1px solid rgba(15,23,42,0.08) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.92) !important;
    box-shadow: 0 18px 48px rgba(15,23,42,0.08) !important;
    overflow: visible !important;
}

body.vf-new-portal .vf-card-header {
    background: linear-gradient(90deg, rgba(37,99,235,0.08), rgba(255,255,255,0)) !important;
    padding: 18px 20px 12px !important;
}

body.vf-new-portal .vf-card-title {
    font-size: 22px !important;
}

body.vf-new-portal .vf-standings-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    padding: 0 16px 18px !important;
}

body.vf-new-portal .vf-standings-table thead th {
    background: transparent !important;
    color: #64748b !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border: 0 !important;
}

body.vf-new-portal .vf-standings-table tbody tr {
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(15,23,42,0.06) !important;
}

body.vf-new-portal .vf-standings-table td {
    border: 0 !important;
    padding: 16px 12px !important;
}

body.vf-new-portal .vf-league-insight p,
body.vf-new-portal .vf-profile-section p,
body.vf-new-portal .vf-player-note-item {
    line-height: 1.9 !important;
    color: var(--text-secondary) !important;
}

body.vf-new-portal .vf-player-note-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
}

body.vf-new-portal .vf-player-note-item {
    padding: 14px 16px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(22,119,255,0.08), rgba(255,255,255,0.9)) !important;
    border: 1px solid rgba(22,119,255,0.14) !important;
    font-weight: 500 !important;
}

body.vf-new-portal .vf-profile-section.vf-player-deepdive,
body.vf-new-portal .vf-profile-section.vf-player-notes,
body.vf-new-portal .vf-profile-section.vf-player-hints {
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(15,23,42,0.08) !important;
    border-radius: 20px !important;
    padding: 20px !important;
}

body.vf-new-portal .vf-profile-section h3 {
    margin-bottom: 12px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 22px !important;
}

body.vf-new-portal .vf-scorer-card {
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(14px);
}

body.vf-new-portal .vf-league-dashboard {
    margin-top: 18px !important;
}

body.vf-new-portal .vf-league-insight {
    padding: 14px !important;
}

@media (max-width: 1100px) {
    body.vf-new-portal .vf-league-dashboard {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   5. Banner Slider
   ============================================ */
body.vf-new-portal .vf-banner {
    background: linear-gradient(135deg, rgba(10,18,32,0.92), rgba(15,107,255,0.72)) !important;
    border-radius: calc(var(--radius) + 4px) !important;
    overflow: hidden !important;
    box-shadow: 0 24px 60px rgba(10,18,32,0.24) !important;
    margin-bottom: 24px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

body.vf-new-portal .vf-banner-slider {
    position: relative !important;
    height: 360px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #1677FF 0%, #0891B2 100%) !important;
}

body.vf-new-portal .vf-banner-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease !important;
    background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.10), transparent 48%) !important;
}

body.vf-new-portal .vf-banner-slide.active {
    opacity: 1 !important;
}

body.vf-new-portal .vf-banner-content {
    text-align: center !important;
    color: #FFF !important;
    padding: 44px !important;
    max-width: 620px !important;
}

body.vf-new-portal .vf-banner-badge {
    display: inline-block !important;
    background: rgba(255,255,255,0.14) !important;
    color: #FFF !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.10) !important;
    animation: pulse 2s infinite !important;
}

body.vf-new-portal .vf-banner-teams {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 50px !important;
    margin-bottom: 24px !important;
}

body.vf-new-portal .vf-banner-team {
    text-align: center !important;
}

body.vf-new-portal .vf-banner-team-logo {
    width: 90px !important;
    height: 90px !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 42px !important;
    margin: 0 auto 14px !important;
}

body.vf-new-portal .vf-banner-team-name {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

body.vf-new-portal .vf-banner-score {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 64px !important;
    font-weight: 800 !important;
    color: #FFF !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    letter-spacing: 2px !important;
}

body.vf-new-portal .vf-banner-score-sep {
    font-size: 48px !important;
    opacity: 0.4 !important;
}

body.vf-new-portal .vf-banner-time {
    font-size: 16px !important;
    color: #FFEB3B !important;
    font-weight: 600 !important;
    margin-top: 16px !important;
}

body.vf-new-portal .vf-banner-dots {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
}

body.vf-new-portal .vf-banner-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.4) !important;
    cursor: pointer !important;
}

body.vf-new-portal .vf-banner-dot.active {
    background: #FFF !important;
    width: 24px !important;
    border-radius: 4px !important;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ============================================
   6. Live Matches
   ============================================ */
body.vf-new-portal .vf-live-scroll {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto !important;
    padding-bottom: 12px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: thin !important;
}

body.vf-new-portal .vf-live-scroll::-webkit-scrollbar {
    height: 4px !important;
}

body.vf-new-portal .vf-live-scroll::-webkit-scrollbar-thumb {
    background: var(--border) !important;
    border-radius: 2px !important;
}

body.vf-new-portal .vf-live-card {
    flex: 0 0 360px !important;
    scroll-snap-align: start !important;
    background: var(--card-bg) !important;
    border-radius: var(--radius) !important;
    padding: 20px !important;
    box-shadow: var(--shadow) !important;
    border-left: 4px solid var(--accent) !important;
    transition: var(--transition) !important;
}

body.vf-new-portal .vf-live-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-hover) !important;
}

body.vf-new-portal .vf-live-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

body.vf-new-portal .vf-live-league {
    font-size: 12px !important;
    color: var(--text-secondary) !important;
}

body.vf-new-portal .vf-live-status {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
}

body.vf-new-portal .vf-live-dot {
    width: 8px !important;
    height: 8px !important;
    background: var(--accent) !important;
    border-radius: 50% !important;
    animation: pulse 1.5s infinite !important;
}

body.vf-new-portal .vf-live-teams {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

body.vf-new-portal .vf-live-team {
    flex: 1 !important;
    text-align: center !important;
}

body.vf-new-portal .vf-live-team-icon {
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
}

body.vf-new-portal .vf-live-team-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

body.vf-new-portal .vf-live-score {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    min-width: 70px !important;
    text-align: center !important;
}

body.vf-new-portal .vf-live-time {
    text-align: center !important;
    margin-top: 12px !important;
    font-size: 13px !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
}

/* ============================================
   7. League Cards
   ============================================ */
body.vf-new-portal .vf-league-grid {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body.vf-new-portal .vf-league-card {
    background: var(--card-bg) !important;
    border-radius: var(--radius) !important;
    padding: 20px 16px !important;
    text-align: center !important;
    box-shadow: var(--shadow) !important;
    transition: var(--transition) !important;
    cursor: pointer !important;
}

body.vf-new-portal .vf-league-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-hover) !important;
}

body.vf-new-portal .vf-league-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 12px !important;
    border-radius: var(--radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: #FFF !important;
}

body.vf-new-portal .vf-league-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    line-height: 1.3 !important;
}

/* ============================================
   8. Fixtures
   ============================================ */
body.vf-new-portal .vf-date-tabs {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
}

body.vf-new-portal .vf-date-tab {
    padding: 10px 18px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: var(--transition) !important;
}

body.vf-new-portal .vf-date-tab:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

body.vf-new-portal .vf-date-tab.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #FFF !important;
}

body.vf-new-portal .vf-fixture-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    gap: 14px !important;
}

body.vf-new-portal .vf-fixture-card {
    background: var(--card-bg) !important;
    border-radius: var(--radius) !important;
    padding: 18px !important;
    box-shadow: var(--shadow) !important;
    transition: var(--transition) !important;
}

body.vf-new-portal .vf-fixture-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-hover) !important;
}

body.vf-new-portal .vf-fixture-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--bg) !important;
}

body.vf-new-portal .vf-fixture-league {
    font-size: 12px !important;
    color: var(--text-secondary) !important;
}

body.vf-new-portal .vf-fixture-badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

body.vf-new-portal .vf-fixture-badge.live {
    background: var(--accent) !important;
    color: #FFF !important;
}

body.vf-new-portal .vf-fixture-badge.finished {
    background: var(--bg) !important;
    color: var(--text-muted) !important;
}

body.vf-new-portal .vf-fixture-badge.upcoming {
    background: #E6F4FF !important;
    color: var(--primary) !important;
}

body.vf-new-portal .vf-fixture-teams {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body.vf-new-portal .vf-fixture-team {
    flex: 1 !important;
    text-align: center !important;
}

body.vf-new-portal .vf-fixture-team-icon {
    font-size: 32px !important;
    margin-bottom: 8px !important;
}

body.vf-new-portal .vf-fixture-team-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}

body.vf-new-portal .vf-fixture-score {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    padding: 0 20px !important;
}

/* ============================================
   9. Two Column - Standings & Scorers
   ============================================ */
body.vf-new-portal .vf-two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

body.vf-new-portal .vf-card {
    background: var(--card-bg) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.7) !important;
    border-radius: var(--radius) !important;
    overflow: visible !important;
    box-shadow: var(--shadow) !important;
}

/* 保证首页两列卡片视觉等高（积分榜/射手榜） */
body.vf-new-portal .vf-two-col > .vf-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

body.vf-new-portal .vf-two-col > .vf-card > .vf-scorer-list,
body.vf-new-portal .vf-two-col > .vf-card > .vf-table {
    flex: 1 1 auto !important;
}

body.vf-new-portal .vf-card-header {
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body.vf-new-portal .vf-card-title {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Table */
body.vf-new-portal .vf-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

body.vf-new-portal .vf-table th {
    padding: 12px 14px !important;
    text-align: left !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
}

body.vf-new-portal .vf-table td {
    padding: 12px 14px !important;
    font-size: 13px !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--bg) !important;
}

body.vf-new-portal .vf-table tr:hover td {
    background: #FAFBFC !important;
}

body.vf-new-portal .vf-table .rank {
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    width: 30px !important;
}

body.vf-new-portal .vf-table .rank.top {
    color: var(--accent) !important;
}

body.vf-new-portal .vf-table .points {
    font-weight: 700 !important;
    color: var(--primary) !important;
}

/* Scorers */
body.vf-new-portal .vf-scorer-list {
    padding: 8px !important;
}

body.vf-new-portal .vf-scorer-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition) !important;
}

body.vf-new-portal .vf-scorer-item:hover {
    background: var(--bg) !important;
}

body.vf-new-portal .vf-scorer-rank {
    width: 28px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-align: center !important;
}

body.vf-new-portal .vf-scorer-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    overflow: hidden !important;
}

body.vf-new-portal .vf-scorer-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.vf-new-portal .vf-scorer-info {
    flex: 1 !important;
}

body.vf-new-portal .vf-scorer-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

body.vf-new-portal .vf-scorer-team {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
}

body.vf-new-portal .vf-scorer-goals {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--accent) !important;
}

/* ============================================
   10. Entity Grid (Teams & Players)
   ============================================ */
body.vf-new-portal .vf-entity-section {
    margin-bottom: 24px !important;
}
body.vf-new-portal .vf-entity-section:last-child {
    margin-bottom: 0 !important;
}
body.vf-new-portal .vf-entity-subtitle {
    font-size: 14px !important;
    color: var(--text-secondary) !important;
    margin-bottom: 14px !important;
    font-weight: 500 !important;
}

/* Grid: desktop 9 cols */
body.vf-new-portal .vf-entity-grid {
    display: grid !important;
    grid-template-columns: repeat(9, 1fr) !important;
    gap: 10px !important;
}
body.vf-new-portal .vf-entity-grid-mobile-2 {
    display: grid !important;
    grid-template-columns: repeat(9, 1fr) !important;
    gap: 10px !important;
}

/* Card base */
body.vf-new-portal .vf-entity-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 16px !important;
    padding: 14px 8px !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(15, 27, 45, 0.08) !important;
    transition: transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.28s !important;
    cursor: pointer !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: hidden !important;
}
body.vf-new-portal .vf-entity-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(15, 27, 45, 0.14) !important;
}
body.vf-new-portal .vf-entity-card:focus-visible {
    outline: 2px solid #00B4F5 !important;
    outline-offset: 2px !important;
    transform: translateY(-2px) !important;
}

/* Icon / avatar */
body.vf-new-portal .vf-entity-icon {
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto 8px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #E6F4FF, #BAE0FF) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
body.vf-new-portal .vf-entity-icon img {
    width: 52px !important;
    height: 52px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

/* Card text */
body.vf-new-portal .vf-entity-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #122033 !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1.3 !important;
}
body.vf-new-portal .vf-entity-sub {
    font-size: 10px !important;
    color: #8A96A8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* Section header */
body.vf-new-portal .vf-entity-section .vf-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    padding: 0 2px !important;
}
body.vf-new-portal .vf-entity-section .vf-section-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #122033 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
body.vf-new-portal .vf-entity-section .vf-section-icon {
    font-size: 20px !important;
}
body.vf-new-portal .vf-entity-section .vf-section-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #00B4F5 !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}
body.vf-new-portal .vf-entity-section .vf-section-link:hover {
    color: #0090CC !important;
}

/* Tablet: 5 cols */
@media (max-width: 1200px) {
    body.vf-new-portal .vf-entity-grid,
    body.vf-new-portal .vf-entity-grid-mobile-2 {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* Medium tablet: 3 cols */
@media (max-width: 900px) {
    body.vf-new-portal .vf-entity-grid,
    body.vf-new-portal .vf-entity-grid-mobile-2 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    body.vf-new-portal .vf-entity-card {
        padding: 12px 8px !important;
    }
}

/* Mobile: 2 cols */
@media (max-width: 640px) {
    body.vf-new-portal .vf-entity-grid,
    body.vf-new-portal .vf-entity-grid-mobile-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    body.vf-new-portal .vf-entity-card {
        padding: 12px 6px !important;
    }
    body.vf-new-portal .vf-entity-icon {
        width: 44px !important;
        height: 44px !important;
    }
    body.vf-new-portal .vf-entity-icon img {
        width: 44px !important;
        height: 44px !important;
    }
}

/* Large desktop override: keep 9 cols but allow wrapping */
@media (min-width: 1600px) {
    body.vf-new-portal .vf-entity-grid,
    body.vf-new-portal .vf-entity-grid-mobile-2 {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    }
}

/* ============================================
   11. Video & News
   ============================================ */
body.vf-new-portal .vf-video-news {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

body.vf-new-portal .vf-video-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
}

body.vf-new-portal .vf-video-card {
    background: var(--card-bg) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
    transition: var(--transition) !important;
}

body.vf-new-portal .vf-video-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-hover) !important;
}

body.vf-new-portal .vf-video-thumb {
    position: relative !important;
    aspect-ratio: 16/9 !important;
    background: var(--bg) !important;
}

body.vf-new-portal .vf-video-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.vf-new-portal .vf-video-play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(22, 119, 255, 0.9) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFF !important;
    font-size: 18px !important;
    opacity: 0 !important;
    transition: var(--transition) !important;
}

body.vf-new-portal .vf-video-card:hover .vf-video-play {
    opacity: 1 !important;
}

body.vf-new-portal .vf-video-info {
    padding: 14px !important;
}

body.vf-new-portal .vf-video-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

body.vf-new-portal .vf-video-comp {
    font-size: 11px !important;
    color: var(--primary) !important;
    margin-top: 8px !important;
}

body.vf-new-portal .vf-news-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.vf-new-portal .vf-news-item {
    display: flex !important;
    gap: 14px !important;
    background: var(--card-bg) !important;
    border-radius: var(--radius) !important;
    padding: 14px !important;
    box-shadow: var(--shadow) !important;
    transition: var(--transition) !important;
}

body.vf-new-portal .vf-news-item:hover {
    transform: translateX(4px) !important;
    box-shadow: var(--shadow-hover) !important;
}

body.vf-new-portal .vf-news-thumb {
    width: 100px !important;
    height: 70px !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: var(--bg) !important;
}

body.vf-new-portal .vf-news-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.vf-new-portal .vf-news-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body.vf-new-portal .vf-news-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

body.vf-new-portal .vf-news-meta {
    font-size: 11px !important;
    color: var(--text-muted) !important;
}

body.vf-new-portal .vf-news-cat {
    font-size: 10px !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}

/* ============================================
   Search Results Dropdown
   ============================================ */
body.vf-new-portal .vf-header-search {
    position: relative !important;
}

body.vf-new-portal .vf-search-results {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-hover) !important;
    z-index: 9999 !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

body.vf-new-portal .vf-search-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px !important;
}

body.vf-new-portal .vf-search-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition) !important;
    color: var(--text-primary) !important;
}

body.vf-new-portal .vf-search-item:hover {
    background: var(--bg) !important;
    color: var(--primary) !important;
}

body.vf-new-portal .vf-search-icon {
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

body.vf-new-portal .vf-search-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

body.vf-new-portal .vf-search-type {
    font-size: 10px !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

body.vf-new-portal .vf-search-name {
    font-size: 13px !important;
    color: var(--text-primary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.vf-new-portal .vf-search-more {
    display: block !important;
    text-align: center !important;
    padding: 12px !important;
    border-top: 1px solid var(--border) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--primary) !important;
}

body.vf-new-portal .vf-search-more:hover {
    background: var(--bg) !important;
}

body.vf-new-portal .vf-search-loading,
body.vf-new-portal .vf-search-empty {
    text-align: center !important;
    padding: 20px !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
}

/* ============================================
   Video Modal
   ============================================ */
body.vf-new-portal .vf-video-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.9) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
}

body.vf-new-portal .vf-video-modal.show {
    display: flex !important;
}

body.vf-new-portal .vf-modal-content {
    position: relative !important;
    width: 90% !important;
    max-width: 900px !important;
    background: #000 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

body.vf-new-portal .vf-modal-close {
    position: absolute !important;
    top: -40px !important;
    right: 0 !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    color: #FFF !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: var(--transition) !important;
}

body.vf-new-portal .vf-modal-close:hover {
    background: rgba(255,255,255,0.3) !important;
}

body.vf-new-portal .vf-modal-body {
    width: 100% !important;
}

body.vf-new-portal .vf-modal-video {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
}

body.vf-new-portal .vf-modal-video iframe,
body.vf-new-portal .vf-modal-video video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* ============================================
   12. Footer
   ============================================ */
/* ── Footer Layout ──────────────────────────────────────── */
body.vf-new-portal .vf-footer {
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
    border-top: 1px solid var(--border) !important;
    margin-top: 40px !important;
    padding: 34px 0 0 !important;
}

body.vf-new-portal .vf-footer-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px 24px !important;
    display: grid !important;
    grid-template-columns: 220px 1fr 200px !important;
    gap: 22px !important;
    align-items: start !important;
}

/* ── Brand Column ─────────────────────────────────────────── */
body.vf-new-portal .vf-footer-col-brand {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

body.vf-new-portal .vf-footer-brand {
    position: sticky !important;
    top: 80px !important;
}

body.vf-new-portal .vf-footer-brand-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
}

body.vf-new-portal .vf-footer-brand-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
    gap: 4px !important;
}

body.vf-new-portal .vf-footer-logo {
    font-size: 26px !important;
}

body.vf-new-portal .vf-footer-name {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

body.vf-new-portal .vf-footer-subtitle {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #4f678a !important;
    letter-spacing: 0.2px !important;
}

/* ── Contact Info ─────────────────────────────────────────── */
body.vf-new-portal .vf-footer-contact {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

body.vf-new-portal .vf-footer-contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #5a6f85 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

body.vf-new-portal .vf-footer-contact-icon {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    margin-top: 1px !important;
}

body.vf-new-portal .vf-footer-contact-link {
    color: #2d6cb5 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

body.vf-new-portal .vf-footer-contact-link:hover {
    text-decoration: underline !important;
}

/* ── Social Media ─────────────────────────────────────────── */
body.vf-new-portal .vf-footer-social {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

body.vf-new-portal .vf-footer-social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #e8f0fe 0%, #d4e4ff 100%) !important;
    border: 1px solid #c0d8ff !important;
    color: #2563cc !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

body.vf-new-portal .vf-footer-social-link:hover {
    background: linear-gradient(135deg, #d4e4ff 0%, #b8d0ff 100%) !important;
    color: #1a4db5 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 204, 0.18) !important;
}

/* ── Main Sections (center column) ──────────────────────── */
body.vf-new-portal .vf-footer-sections {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

body.vf-new-portal .vf-footer-block {
    background: #fff !important;
    border: 1px solid #eaf0f6 !important;
    border-radius: 12px !important;
    padding: 12px 12px 10px !important;
}

body.vf-new-portal .vf-footer-heading {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #102a43 !important;
    margin-bottom: 10px !important;
}

body.vf-new-portal .vf-footer-link-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.vf-new-portal .vf-footer-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    border: 1px solid #cfe1f6 !important;
    background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #284b74 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset !important;
    text-decoration: none !important;
}

body.vf-new-portal .vf-footer-btn:hover {
    border-color: #87b8ff !important;
    background: linear-gradient(180deg, #f8fbff 0%, #dcecff 100%) !important;
    color: #0b63ce !important;
    transform: translateY(-1px) !important;
}

body.vf-new-portal .vf-footer-btn:active {
    transform: translateY(0) !important;
}

body.vf-new-portal .vf-footer-btn.is-muted {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

/* ── Meta Column (league list + about/legal) ──────────────── */
body.vf-new-portal .vf-footer-col-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

body.vf-new-portal .vf-footer-league-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

body.vf-new-portal .vf-footer-league-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #2d5a8a !important;
    text-decoration: none !important;
    padding: 4px 0 !important;
    transition: color 0.15s ease !important;
}

body.vf-new-portal .vf-footer-league-link:hover {
    color: #0b63ce !important;
    text-decoration: underline !important;
}

/* ── Bottom Bar ────────────────────────────────────────────── */
body.vf-new-portal .vf-footer-friend-links {
    border-top: 1px solid #e8f0fa !important;
    background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%) !important;
    padding: 20px 0 !important;
}

body.vf-new-portal .vf-footer-fl-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

body.vf-new-portal .vf-footer-fl-heading {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a3a6b !important;
    margin: 0 0 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #d0e2f7 !important;
    display: inline-block !important;
}

body.vf-new-portal .vf-footer-fl-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

body.vf-new-portal .vf-footer-fl-item {
    display: inline-block !important;
    padding: 5px 14px !important;
    background: #fff !important;
    border: 1px solid #dce8ff !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #3a5a8c !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}

body.vf-new-portal .vf-footer-fl-item:hover {
    background: #e6f0ff !important;
    border-color: #89b7ff !important;
    color: #1677FF !important;
    transform: translateY(-1px) !important;
}

body.vf-new-portal .vf-footer-bottom {
    border-top: 1px solid #e8f0fa !important;
    background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%) !important;
    margin-top: 0 !important;
}

body.vf-new-portal .vf-footer-bottom-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 14px 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

body.vf-new-portal .vf-footer-copy {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

body.vf-new-portal .vf-footer-ext-link {
    color: #2d6cb5 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

body.vf-new-portal .vf-footer-ext-link:hover {
    text-decoration: underline !important;
}

body.vf-new-portal .vf-footer-top-link {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #2563cc !important;
    text-decoration: none !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    border: 1px solid #c0d8ff !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

body.vf-new-portal .vf-footer-top-link:hover {
    background: linear-gradient(135deg, #e8f0fe 0%, #d4e4ff 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 204, 0.15) !important;
}

/* ============================================
   13. Mobile Nav
   ============================================ */
body.vf-new-portal .vf-mobile-nav {
    display: none !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--card-bg) !important;
    border-top: 1px solid var(--border) !important;
    padding: 8px 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06) !important;
}

body.vf-new-portal .vf-mobile-nav-inner {
    display: flex !important;
    justify-content: space-around !important;
}

body.vf-new-portal .vf-mobile-nav-item {
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: 10px !important;
    padding: 4px !important;
    transition: var(--transition) !important;
}

body.vf-new-portal .vf-mobile-nav-item.active,
body.vf-new-portal .vf-mobile-nav-item:hover {
    color: var(--primary) !important;
}

body.vf-new-portal .vf-mobile-nav-item.active .vf-mobile-nav-icon,
body.vf-new-portal .vf-mobile-nav-item:hover .vf-mobile-nav-icon {
    transform: scale(1.1) !important;
}

body.vf-new-portal .vf-mobile-nav-icon {
    font-size: 22px !important;
    display: block !important;
    margin-bottom: 2px !important;
}

/* ============================================
   14. Empty State
   ============================================ */
body.vf-new-portal .vf-empty {
    text-align: center !important;
    padding: 50px 20px !important;
    color: var(--text-muted) !important;
    font-size: 14px !important;
}

/* ============================================
   15. Responsive
   ============================================ */
@media (max-width: 1024px) {
    body.vf-new-portal .vf-header-search {
        display: none !important;
    }
    
    body.vf-new-portal .vf-banner-slider {
        height: 300px !important;
    }
    
    body.vf-new-portal .vf-banner-score {
        font-size: 48px !important;
    }
    
    body.vf-new-portal .vf-banner-teams {
        gap: 30px !important;
    }
}

@media (max-width: 768px) {
    body.vf-new-portal .vf-header-inner {
        height: auto !important;
        min-height: 56px !important;
        gap: 16px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    body.vf-new-portal .vf-logo {
        gap: 8px !important;
    }

    body.vf-new-portal .vf-logo-icon {
        font-size: 24px !important;
    }

    body.vf-new-portal .vf-logo-text {
        font-size: 22px !important;
    }

    body.vf-new-portal .vf-logo-subtitle {
        font-size: 10px !important;
    }
    
    body.vf-new-portal .vf-main-nav {
        display: none !important;
    }
    
    body.vf-new-portal .vf-banner-slider {
        height: 240px !important;
    }
    
    body.vf-new-portal .vf-banner-teams {
        gap: 20px !important;
    }
    
    body.vf-new-portal .vf-banner-team-logo {
        width: 56px !important;
        height: 56px !important;
        font-size: 28px !important;
    }
    
    body.vf-new-portal .vf-banner-team-name {
        font-size: 14px !important;
    }
    
    body.vf-new-portal .vf-banner-score {
        font-size: 36px !important;
        gap: 12px !important;
    }
    
    body.vf-new-portal .vf-banner-score-sep {
        font-size: 28px !important;
    }
    
    body.vf-new-portal .vf-live-card {
        flex: 0 0 300px !important;
    }
    
    body.vf-new-portal .vf-fixture-grid {
        grid-template-columns: 1fr !important;
    }
    
    body.vf-new-portal .vf-two-col {
        grid-template-columns: 1fr !important;
    }
    
    body.vf-new-portal .vf-video-news {
        grid-template-columns: 1fr !important;
    }
    
    body.vf-new-portal .vf-video-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    body.vf-new-portal .vf-league-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }

    body.vf-new-portal .vf-league-card {
        padding: 12px 8px !important;
    }

    body.vf-new-portal .vf-league-icon {
        width: 34px !important;
        height: 34px !important;
        margin: 0 auto 6px !important;
        font-size: 16px !important;
    }

    body.vf-new-portal .vf-league-name {
        font-size: 11px !important;
    }
    
    body.vf-new-portal .vf-entity-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.vf-new-portal .vf-entity-grid-mobile-2 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.vf-new-portal .vf-entity-grid-mobile-2 .vf-entity-card {
        padding: 12px 8px !important;
    }

    body.vf-new-portal .vf-entity-grid-mobile-2 .vf-entity-icon {
        width: 42px !important;
        height: 42px !important;
        margin: 0 auto 8px !important;
    }

    body.vf-new-portal .vf-entity-grid-mobile-2 .vf-entity-name {
        font-size: 12px !important;
    }

    body.vf-new-portal .vf-entity-grid-mobile-2 .vf-entity-sub {
        font-size: 10px !important;
    }

    body.vf-new-portal .vf-footer-inner {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.vf-new-portal .vf-footer-col-brand {
        align-items: center !important;
        text-align: center !important;
    }

    body.vf-new-portal .vf-footer-brand {
        position: static !important;
    }

    body.vf-new-portal .vf-footer-brand-link {
        justify-content: center !important;
    }

    body.vf-new-portal .vf-footer-contact {
        align-items: center !important;
        text-align: center !important;
    }

    body.vf-new-portal .vf-footer-contact-item {
        justify-content: center !important;
    }

    body.vf-new-portal .vf-footer-social {
        justify-content: center !important;
    }

    body.vf-new-portal .vf-footer-col-meta {
        align-items: center !important;
    }

    body.vf-new-portal .vf-footer-block {
        padding: 10px !important;
        width: 100% !important;
    }

    body.vf-new-portal .vf-footer-league-list {
        align-items: center !important;
    }

    body.vf-new-portal .vf-footer-link-cloud {
        gap: 7px !important;
        justify-content: center !important;
    }

    body.vf-new-portal .vf-footer-btn {
        font-size: 12px !important;
        min-height: 30px !important;
        padding: 5px 10px !important;
    }

    body.vf-new-portal .vf-footer-bottom-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }

    body.vf-new-portal .vf-footer-copy {
        font-size: 11px !important;
    }
    
    body.vf-new-portal .vf-mobile-nav {
        display: block !important;
    }
    
    body.vf-new-portal .vf-page-wrapper {
        padding-bottom: 70px !important;
    }
}

@media (max-width: 480px) {
    body.vf-new-portal .vf-league-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }

    body.vf-new-portal .vf-league-card {
        padding: 10px 6px !important;
    }

    body.vf-new-portal .vf-league-icon {
        width: 30px !important;
        height: 30px !important;
        margin: 0 auto 5px !important;
        font-size: 14px !important;
    }

    body.vf-new-portal .vf-league-name {
        font-size: 10px !important;
    }

    body.vf-new-portal .vf-video-grid {
        grid-template-columns: 1fr !important;
    }

    body.vf-new-portal .vf-news-item {
        flex-direction: column !important;
    }

    body.vf-new-portal .vf-news-thumb {
        width: 100% !important;
        height: 140px !important;
    }

    body.vf-new-portal .vf-banner-slider {
        height: 200px !important;
    }
}

@media (max-width: 480px) {
    body.vf-new-portal .vf-banner-team-logo {
        width: 48px !important;
        height: 48px !important;
    }

    body.vf-new-portal .vf-banner-score {
        font-size: 28px !important;
    }

    body.vf-new-portal .vf-banner-score-sep {
        font-size: 22px !important;
    }

    body.vf-new-portal .vf-banner-content {
        padding: 20px !important;
    }

    body.vf-new-portal .vf-banner-teams {
        gap: 16px !important;
    }

    body.vf-new-portal .vf-banner-team-name {
        font-size: 12px !important;
    }

    body.vf-new-portal .vf-banner-time {
        font-size: 13px !important;
    }
}

/* ============================================
   16. Additional Polish
   ============================================ */

/* Loading skeleton */
body.vf-new-portal .vf-skeleton {
    background: linear-gradient(90deg, var(--bg) 25%, #e8ecf0 50%, var(--bg) 75%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s infinite !important;
    border-radius: var(--radius-sm) !important;
}

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

/* Smooth scroll */
body.vf-new-portal html {
    scroll-behavior: smooth !important;
}

/* Focus visible */
body.vf-new-portal a:focus-visible,
body.vf-new-portal button:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* Better scrollbar */
body.vf-new-portal ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

body.vf-new-portal ::-webkit-scrollbar-track {
    background: var(--bg) !important;
}

body.vf-new-portal ::-webkit-scrollbar-thumb {
    background: var(--border) !important;
    border-radius: 3px !important;
}

body.vf-new-portal ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted) !important;
}

/* Image lazy load fade */
body.vf-new-portal img[data-src] {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

body.vf-new-portal img.loaded,
body.vf-new-portal img[src] {
    opacity: 1 !important;
}

/* League group header styles (used in inner pages) */
body.vf-new-portal .vf-league-group {
    background: var(--card-bg) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
    margin-bottom: 20px !important;
}

body.vf-new-portal .vf-league-group-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 18px !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
}

body.vf-new-portal .vf-league-group-logo {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
}

body.vf-new-portal .vf-league-group-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    flex: 1 !important;
}

body.vf-new-portal .vf-league-group-count {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    background: var(--card-bg) !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
}

body.vf-new-portal .vf-league-matches {
    display: flex !important;
    flex-direction: column !important;
}

/* Date navigation */
body.vf-new-portal .vf-date-nav {
    margin-bottom: 24px !important;
}

body.vf-new-portal .vf-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    border: none !important;
    text-decoration: none !important;
}

body.vf-new-portal .vf-btn-accent {
    background: var(--primary) !important;
    color: #fff !important;
}

body.vf-new-portal .vf-btn-accent:hover {
    background: var(--primary-dark) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}

body.vf-new-portal .vf-btn-ghost {
    background: var(--card-bg) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
}

body.vf-new-portal .vf-btn-ghost:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* Score display */
body.vf-new-portal .vf-score-num {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
}

body.vf-new-portal .vf-score-live {
    color: var(--accent) !important;
    animation: pulse-text 1.5s infinite !important;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

body.vf-new-portal .vf-score-time {
    font-size: 14px !important;
    color: var(--text-muted) !important;
}

/* Sticky header shadow on scroll */
body.vf-new-portal .vf-header.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* Tooltip for league badges */
body.vf-new-portal .vf-tooltip {
    position: relative !important;
}

body.vf-new-portal .vf-tooltip::after {
    content: attr(data-tip) !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--text-primary) !important;
    color: #fff !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s !important;
}

body.vf-new-portal .vf-tooltip:hover::after {
    opacity: 1 !important;
}

/* Section spacing */
body.vf-new-portal .vf-wrap > .vf-section:first-child {
    margin-top: 24px !important;
}

/* Empty state improvement */
body.vf-new-portal .vf-empty-state {
    background: var(--card-bg) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden !important;
}

/* Back to top button */
body.vf-new-portal .vf-back-top:hover {
    transform: scale(1.1) !important;
    background: var(--primary-dark) !important;
}