/*
Theme Name: SoccerTips Clone
Theme URI: https://optatips.com
Author: optatips
Author URI: https://optatips.com
Description: optatips.com - 专业足球贴士网站主题
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sct
Tags: sports, betting, soccer, football, tips, premium, membership
*/

/* ==========================================================================
   CSS Variables - 主题色彩系统
   ========================================================================== */
:root {
    /* 主色调 */
    --sct-primary: #ffd259;
    --sct-primary-dark: #e5bc4a;
    --sct-secondary: #0c3d54;
    --sct-accent: #4ade80;
    
    /* 背景色 */
    --sct-bg-dark: #0a0f1a;
    --sct-bg-darker: #05080f;
    --sct-bg-card: #121a25;
    --sct-bg-header: #1f2937;
    
    /* 文字色 */
    --sct-text-primary: #ffffff;
    --sct-text-secondary: #9ca3af;
    --sct-text-muted: #6b7280;
    
    /* 状态色 */
    --sct-win: #4ade80;
    --sct-lose: #f87171;
    --sct-draw: #fbbf24;
    --sct-wait: #9ca3af;
    --sct-live: #ef4444;
    
    /* 边框色 */
    --sct-border: #2d3748;
    --sct-border-light: #374151;
    
    /* 间距 */
    --sct-spacing-xs: 0.25rem;
    --sct-spacing-sm: 0.5rem;
    --sct-spacing-md: 1rem;
    --sct-spacing-lg: 1.5rem;
    --sct-spacing-xl: 2rem;
    
    /* 圆角 */
    --sct-radius-sm: 4px;
    --sct-radius-md: 8px;
    --sct-radius-lg: 12px;
    --sct-radius-xl: 20px;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sct-text-primary);
    background-color: var(--sct-bg-dark);
    overflow-x: hidden;
}

body.change {
    background: linear-gradient(135deg, #0a0f1a 0%, #1a2332 100%);
}

a {
    color: var(--sct-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--sct-primary-dark);
}

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

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: var(--sct-spacing-md);
    color: var(--sct-text-primary);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-top: 0;
    margin-bottom: var(--sct-spacing-md);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    padding: 0 15px;
}

.col-sm-3 { flex: 0 0 25%; max-width: 25%; }
.col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-sm-9 { flex: 0 0 75%; max-width: 75%; }
.col-sm-12 { flex: 0 0 100%; max-width: 100%; }

.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }

/* ==========================================================================
   Header & Navigation - 强制提升 Top Menu 层级
   ========================================================================== */

/* 1. 强制提升整个顶部条的层级，必须高于 Main Header */
.top-menu {
    position: relative !important;
    z-index: 99999 !important;  /* 确保黑条在最上层 */
    background: var(--sct-bg-darker) !important;
    padding: 8px 0;
    border-bottom: 1px solid var(--sct-border);
}

.top-menu > .container {
    overflow: visible !important;
}

.top-menu .row {
    overflow: visible !important;
}

.top-menu .col-md-12 {
    overflow: visible !important;
}

/* 2. 确保 Main Header 的层级低于 Top Menu */
.main-header,
header,
.header-wrapper {
    z-index: 9999 !important;  /* 低于上面的 99999 */
}

.col-top-menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.col-profile-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ==========================================================================
   Top Menu & User Menu - 精准清理重复图标
   ========================================================================== */
.top_menu ul, .user_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-end;
}

.top_menu a, .user_menu a {
    color: var(--sct-text-secondary);
    font-size: 13px;
    padding: 5px 0;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.top_menu a:hover, .user_menu a:hover {
    color: var(--sct-primary);
    text-decoration: none;
}

/* User Menu - 精准封杀 PNG 图片，保留 Font Awesome 图标 */
.user_menu img {
    display: none !important;
}

.user_menu a[style*="icon_profile.png"],
.user_menu a[style*="icon"],
.user_menu .menu-item:before,
.user_menu .menu-item:after {
    display: none !important;
    background-image: none !important;
    content: none !important;
}

/* User Menu - Font Awesome 图标样式（必须保留） */
.user_menu .menu-item a i.fa {
    font-size: 14px;
    opacity: 0.9;
    display: inline-block !important;
    line-height: 1;
}

.user_menu .menu-item a i.fa-user-circle:before {
    content: "\f2bd" !important;
}

.user_menu .menu-item a i.fa-sign-out:before {
    content: "\f08b" !important;
}

.user_menu .menu-item a i.fa-sign-in:before {
    content: "\f090" !important;
}

.user_menu .menu-item a i.fa-user-plus:before {
    content: "\f234" !important;
}

.user_menu .menu-item a span {
    line-height: 1;
}

.user_menu .menu-item a:hover i.fa {
    opacity: 1;
}

/* Timezone Selector */
.timezone {
    width: 70px;
    color: #fff;
    position: relative;
    margin-right: 35px;
    z-index: 100000 !important;  /* 时区容器本身也要高层级 */
}

.timezone .timezone-cur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 13px;
    padding: 3px 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.timezone .timezone-cur:hover {
    background: rgba(255, 255, 255, 0.15);
}

.timezone-popup {
    position: absolute;
    width: 300px;
    top: 100%;  /* 相对于父元素底部 */
    left: 0;
    z-index: 999999 !important;  /* 最高层级，确保在所有导航之上 */
    background-color: #434344;
    padding: 10px;
    border-radius: 5px;
    display: none;
    flex-wrap: wrap;
    overflow: visible !important;  /* 确保下拉内容不被切断 */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);  /* 添加阴影增强视觉效果 */
}

.timezone-popup .item-timezone {
    width: 23%;
    padding: 2px 3px;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    transition: background 0.2s ease;
}

.timezone-popup .item-timezone:hover {
    background: rgba(255, 210, 89, 0.2);
    color: var(--sct-primary);
}

/* ==========================================================================
   Free Tips 页面样式
   ========================================================================== */

/* Free Tips 表格基础样式 */
.free-tips-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(12, 61, 84, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

.free-tips-table thead {
    background: linear-gradient(135deg, rgba(255, 210, 89, 0.2) 0%, rgba(255, 210, 89, 0.1) 100%);
    border-bottom: 2px solid var(--sct-primary);
}

.free-tips-table thead th {
    padding: 15px 12px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--sct-primary);
    letter-spacing: 0.5px;
}

.free-tips-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.free-tips-table tbody tr:hover {
    background: rgba(255, 210, 89, 0.08);
}

.free-tips-table tbody tr:last-child {
    border-bottom: none;
}

/* 行状态样式 */
.free-tips-table tbody tr.status-win {
    background: rgba(74, 222, 128, 0.08);
}

.free-tips-table tbody tr.status-lose {
    background: rgba(248, 113, 113, 0.08);
}

.free-tips-table tbody tr.status-draw {
    background: rgba(251, 191, 36, 0.08);
}

/* 单元格样式 */
.free-tips-table td {
    padding: 15px 12px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    color: var(--sct-text-primary);
}

/* 时间列 */
.time-cell .date-time {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.time-cell .date {
    font-weight: 700;
    color: var(--sct-primary);
    font-size: 13px;
}

.time-cell .time {
    color: var(--sct-text-secondary);
    font-size: 12px;
}

/* 联赛列 */
.league-cell .league-name {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sct-text-primary);
}

/* 比赛列 */
.match-cell .match-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.match-cell .home-team,
.match-cell .away-team {
    font-weight: 600;
    color: var(--sct-text-primary);
}

.match-cell .vs {
    color: var(--sct-text-secondary);
    font-size: 12px;
    font-weight: 400;
}

/* 贴士列 */
.tips-cell .tip-prediction {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 210, 89, 0.15);
    border: 1px solid rgba(255, 210, 89, 0.3);
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    color: var(--sct-primary);
    text-transform: uppercase;
}

/* 赔率列 */
.odds-cell .tip-odds {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    color: var(--sct-text-primary);
}

/* 比分列 */
.score-cell .score-result {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
}

.score-cell .home-score,
.score-cell .away-score {
    color: var(--sct-text-primary);
}

.score-cell .score-sep {
    color: var(--sct-text-secondary);
}

.score-cell .score-pending {
    color: var(--sct-text-secondary);
    font-size: 18px;
}

/* 状态列徽章 */
.status-cell .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
}

.status-badge.status-win {
    background: rgba(74, 222, 128, 0.2);
    color: var(--sct-win);
    border: 1px solid rgba(74, 222, 128, 0.4);
}

.status-badge.status-lose {
    background: rgba(248, 113, 113, 0.2);
    color: var(--sct-lose);
    border: 1px solid rgba(248, 113, 113, 0.4);
}

.status-badge.status-draw {
    background: rgba(251, 191, 36, 0.2);
    color: var(--sct-draw);
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.status-badge.status-wait {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sct-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.status-badge .status-icon {
    font-size: 14px;
}

/* 分页样式 */
.pagination-container {
    margin-top: 30px;
}

.pagination ul {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination li {
    display: inline-block;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 210, 89, 0.2);
    border-radius: 6px;
    color: var(--sct-text-primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background: rgba(255, 210, 89, 0.15);
    border-color: var(--sct-primary);
    color: var(--sct-primary);
}

.pagination .current {
    background: linear-gradient(135deg, var(--sct-primary) 0%, #ffb800 100%);
    border-color: var(--sct-primary);
    color: var(--sct-bg-dark);
    font-weight: 700;
}

/* 移动端响应式 */
@media (max-width: 992px) {
    .free-tips-table thead {
        display: none;
    }
    
    .free-tips-table tbody tr {
        display: block;
        background: rgba(12, 61, 84, 0.4);
        margin-bottom: 15px;
        border-radius: 8px;
        padding: 15px;
        border: 1px solid rgba(255, 210, 89, 0.2);
    }
    
    .free-tips-table tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .free-tips-table tbody tr td:last-child {
        border-bottom: none;
    }
    
    .free-tips-table tbody tr td:before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--sct-primary);
        font-size: 12px;
        text-transform: uppercase;
        margin-right: 15px;
    }
    
    .time-cell,
    .league-cell,
    .match-cell,
    .tips-cell,
    .odds-cell,
    .score-cell,
    .status-cell {
        width: 100%;
    }
}

/* ==========================================================================
   Statistics Tabs 样式
   ========================================================================== */
.stats-tabs {
    margin-bottom: 30px;
}

.stats-tabs .nav-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid rgba(255, 210, 89, 0.3);
    padding-bottom: 0;
}

.stats-tabs .nav-item {
    margin-bottom: 0;
}

.stats-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    color: var(--sct-text-secondary);
    background: rgba(12, 61, 84, 0.3);
    border: 1px solid rgba(255, 210, 89, 0.2);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.stats-tabs .nav-link:hover {
    background: rgba(255, 210, 89, 0.1);
    border-color: rgba(255, 210, 89, 0.4);
    color: var(--sct-primary);
}

.stats-tabs .nav-link.active {
    background: linear-gradient(135deg, rgba(255, 210, 89, 0.2) 0%, rgba(255, 210, 89, 0.1) 100%);
    border-color: var(--sct-primary);
    color: var(--sct-primary);
}

.stats-tabs .nav-link i {
    font-size: 16px;
}

/* Series Stats 特殊样式 */
.stats-tabs .nav-link[href*="tab=series"] i {
    color: #ef4444;
}

/* Series 连红火苗图标动画 */
@keyframes flame-flicker {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.series-stats-section .fa-fire {
    animation: flame-flicker 2s ease-in-out infinite;
}

/* ==========================================================================
   Sticky Header - 暴力拆解重叠问题，禁止两个条同时吸顶！
   ========================================================================== */

/* 确保 body 不影响 sticky */
body {
    overflow-x: visible !important;
}

/* Top Menu - 初始状态吸顶 */
.top-menu {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    background: var(--sct-bg-darker) !important;
    overflow: visible !important;
}

/* Header - Logo 和菜单吸顶 */
header {
    background: var(--sct-bg-card) !important;
    padding: 15px 0 !important;
    border-bottom: 2px solid var(--sct-primary) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9998 !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 70px !important;
}

/* ==========================================================================
   核心修复：纯 CSS 方案 - Header 的 sticky top 必须等于 Top Menu 高度
   ========================================================================== */

/* 
 * 方案 A：Header 吸顶时自动排在 Top Menu 下方（推荐）
 * Top Menu 高度约 40px，所以 Header 的 top 设为 40px
 */
header {
    top: 40px !important;  /* 必须等于 Top Menu 的实际高度 */
}

/* 
 * 方案 B：如果 Top Menu 不需要吸顶，只让 Header 吸顶
 * 取消下面注释即可
 */
/*
.top-menu {
    position: relative !important;  // 取消 Top Menu 吸顶
}

header {
    top: 0 !important;  // Header 顶到最上面
}
*/

/* 确保 wrapper 不影响 sticky */
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
}

.main-header {
    align-items: center;
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    min-height: 50px !important;  /* 确保菜单行有足够高度 */
}

/* 确保 container 不影响 sticky */
header > .container {
    overflow: visible !important;
    min-height: 50px !important;
}

/* 确保 row 不影响 sticky */
.main-header.row {
    overflow: visible !important;
    min-height: 50px !important;
}

/* 内边距校准，防止 Logo 被挤压 */
header .logo {
    padding: 5px 0 !important;
    margin: 0 !important;
}

header .main-menu {
    padding: 5px 0 !important;
    margin: 0 !important;
}

.logo img {
    max-width: 65%;
    transition: opacity 0.3s ease;
}

.logo img.dark {
    display: none;
}

.logo img.light {
    display: block;
}

/* Navigation Menu */
.main-menu {
    position: relative;
}

.menu-icon {
    display: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 10px;
}

.menu-icon span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--sct-primary);
    margin: 5px 0;
    transition: all 0.3s ease;
}

.menu-icon.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-icon.active span:nth-child(2) {
    opacity: 0;
}

.menu-icon.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

nav.onepage ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 5px;
}

nav.onepage > ul > li {
    position: relative;
}

nav.onepage a {
    display: block;
    padding: 12px 18px;
    color: var(--sct-text-primary);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

nav.onepage a:hover,
nav.onepage li.current-menu-item > a,
nav.onepage li.current_page_item > a {
    color: var(--sct-primary) !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 强制去掉导航链接在所有状态下的背景颜色 */
nav.onepage a,
nav.onepage a:active,
nav.onepage a:focus,
nav.onepage li.active > a,
nav.onepage li.current-menu-item > a,
nav.onepage li.current_page_item > a {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Dropdown Menu */
nav.onepage .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--sct-bg-header);
    border: 1px solid var(--sct-border);
    border-top: 2px solid var(--sct-primary);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

nav.onepage li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

nav.onepage .sub-menu li {
    border-bottom: 1px solid var(--sct-border);
}

nav.onepage .sub-menu li:last-child {
    border-bottom: none;
}

nav.onepage .sub-menu a {
    padding: 12px 18px;
    font-size: 13px;
    text-transform: none;
    border-left: 3px solid transparent;
}

nav.onepage .sub-menu a:hover {
    background: rgba(255, 210, 89, 0.05);
    border-left-color: var(--sct-primary);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs {
    background: var(--sct-bg-darker);
    padding: 20px 0;
    border-bottom: 1px solid var(--sct-border);
}

.rank-math-breadcrumb p {
    margin: 0;
    font-size: 13px;
    color: var(--sct-text-secondary);
}

.rank-math-breadcrumb a {
    color: var(--sct-text-secondary);
}

.rank-math-breadcrumb a:hover {
    color: var(--sct-primary);
}

.rank-math-breadcrumb .separator {
    margin: 0 8px;
    color: var(--sct-text-muted);
}

.rank-math-breadcrumb .last {
    color: var(--sct-primary);
}

/* ==========================================================================
   Content Sections
   ========================================================================== */
.midd-container {
    flex: 1;
    padding: 40px 0;
}

.style-2 {
    background: var(--sct-bg-card);
    border-radius: var(--sct-radius-lg);
    padding: 40px;
    margin-top: -30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Section Title */
.sec-title {
    margin-bottom: 30px;
}

.sec-title.text-center {
    text-align: center;
}

.sec-title h1,
.sec-title h2 {
    margin: 0;
    font-size: 28px;
    color: var(--sct-text-primary);
    position: relative;
    display: inline-block;
}

.sec-title.text-center:after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--sct-primary);
    margin: 15px auto 0;
}

/* Blockquote */
blockquote {
    background: linear-gradient(135deg, rgba(255, 210, 89, 0.1) 0%, rgba(12, 61, 84, 0.3) 100%);
    border-left: 4px solid var(--sct-primary);
    padding: 25px 30px;
    margin: 30px 0;
    border-radius: var(--sct-radius-md);
}

blockquote p {
    margin: 0 0 15px;
    color: var(--sct-text-secondary);
    font-size: 15px;
    line-height: 1.8;
}

blockquote p:last-child {
    margin-bottom: 0;
}

blockquote strong {
    color: var(--sct-primary);
    font-weight: 600;
}

/* ==========================================================================
   Tables - Soccer Tips
   ========================================================================== */
.table_wrap {
    overflow-x: auto;
    margin: 30px 0;
    border-radius: var(--sct-radius-md);
    border: 1px solid var(--sct-border);
}

.table_series_tips {
    width: 100%;
    border-collapse: collapse;
    background: var(--sct-bg-dark);
    font-size: 13px;
}

.table_series_tips thead {
    background: var(--sct-bg-header);
}

.table_series_tips th {
    padding: 15px 10px;
    text-align: center;
    font-weight: 600;
    color: var(--sct-primary);
    text-transform: uppercase;
    font-size: 12px;
    border: 1px solid var(--sct-border);
    white-space: nowrap;
}

.table_series_tips td {
    padding: 12px 10px;
    text-align: center;
    border: 1px solid var(--sct-border);
    color: var(--sct-text-primary);
    vertical-align: middle;
}

.table_series_tips tbody tr {
    transition: background 0.2s ease;
}

.table_series_tips tbody tr:hover {
    background: rgba(255, 210, 89, 0.05);
}

.table_series_tips tbody tr.first {
    border-top: 2px solid var(--sct-primary);
}

/* Table - Series Number */
.series_num {
    font-weight: 700;
    color: var(--sct-primary);
    font-size: 16px;
}

.time_in_series_num {
    display: block;
    font-size: 11px;
    color: var(--sct-text-muted);
    margin-top: 4px;
}

/* Table - Match Info */
.date_time {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.date_time .date {
    font-weight: 600;
    color: var(--sct-text-primary);
}

.date_time .time {
    font-size: 12px;
    color: var(--sct-text-muted);
}

.league_match {
    margin-top: 5px;
}

.league_match .league {
    font-size: 11px;
    color: var(--sct-text-muted);
    text-transform: uppercase;
}

.match {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.match .home,
.match .away {
    font-weight: 500;
    color: var(--sct-text-primary);
}

.match .vs {
    color: var(--sct-text-muted);
    font-size: 11px;
}

/* Table - Tips */
.tips {
    font-weight: 600;
    color: var(--sct-primary);
}

.odds_in_tips {
    font-size: 11px;
    color: var(--sct-text-muted);
    margin-top: 3px;
}

/* Table - Stake */
.stake {
    background: rgba(255, 210, 89, 0.15);
    color: var(--sct-primary);
    padding: 4px 10px;
    border-radius: var(--sct-radius-sm);
    font-weight: 600;
    font-size: 12px;
}

/* Table - Result & Status */
.status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--sct-radius-sm);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
}

.status.win, .positive {
    background: rgba(74, 222, 128, 0.15);
    color: var(--sct-win);
}

.status.lose, .negative {
    background: rgba(248, 113, 113, 0.15);
    color: var(--sct-lose);
}

.status.draw, .neutral {
    background: rgba(251, 191, 36, 0.15);
    color: var(--sct-draw);
}

.status.wait {
    background: rgba(156, 163, 175, 0.15);
    color: var(--sct-wait);
}

.status.live {
    background: rgba(239, 68, 68, 0.15);
    color: var(--sct-live);
    animation: pulse-live 2s infinite;
}

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

/* Match Result */
.match_result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 700;
    font-size: 15px;
}

.match_result .home_result {
    color: var(--sct-text-primary);
}

.match_result .result_sep {
    color: var(--sct-text-muted);
}

.match_result .away_result {
    color: var(--sct-text-primary);
}

/* Total Profit */
.total_profit,
.total_profit_record {
    font-weight: 700;
    font-size: 14px;
}

.total_profit.positive,
.total_profit_record.positive {
    color: var(--sct-win);
}

.total_profit.negative,
.total_profit_record.negative {
    color: var(--sct-lose);
}

/* VIP Locked Content */
.vip-locked-content {
    text-align: center;
    padding: 20px;
}

.btnz-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--sct-primary) 0%, var(--sct-primary-dark) 100%);
    color: var(--sct-bg-dark);
    padding: 10px 20px;
    border-radius: var(--sct-radius-md);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 210, 89, 0.3);
}

.btnz-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 210, 89, 0.4);
    color: var(--sct-bg-dark);
}

.btnz-login i {
    font-size: 14px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: var(--sct-radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, var(--sct-primary) 0%, var(--sct-primary-dark) 100%);
    color: var(--sct-bg-dark);
    box-shadow: 0 4px 15px rgba(255, 210, 89, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 210, 89, 0.4);
    color: var(--sct-bg-dark);
}

.btn-line-primary {
    background: transparent;
    color: var(--sct-primary);
    border: 2px solid var(--sct-primary);
}

.btn-line-primary:hover {
    background: var(--sct-primary);
    color: var(--sct-bg-dark);
}

/* ==========================================================================
   How to Play Section (Owl Carousel)
   ========================================================================== */
.sc-howplay {
    margin: 50px 0;
    padding: 40px;
    background: linear-gradient(135deg, rgba(12, 61, 84, 0.5) 0%, rgba(10, 15, 26, 0.8) 100%);
    border-radius: var(--sct-radius-lg);
    border: 1px solid var(--sct-border);
}

.sc-header {
    margin-bottom: 40px;
}

.sc-header__title {
    font-size: 24px;
    color: var(--sct-text-primary);
    margin-bottom: 10px;
}

.sc-header__sub,
.sc-header__sub2,
.sc-header__sub3 {
    margin: 10px 0;
    font-size: 16px;
}

.sc-header__sub {
    color: var(--sct-text-secondary);
}

.sc-header__sub2 {
    color: var(--sct-text-primary);
}

.sc-header__sub3 {
    color: var(--sct-primary);
    font-weight: 600;
}

.howplay__item {
    background: var(--sct-bg-card);
    border: 1px solid var(--sct-border);
    border-radius: var(--sct-radius-md);
    padding: 25px;
    text-align: center;
    margin: 10px;
}

.howplay__item .-stt {
    color: var(--sct-lose);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
}

.howplay__item .-text {
    font-size: 32px;
    font-weight: 700;
    color: var(--sct-primary);
    margin-bottom: 10px;
}

.howplay__item .-money {
    font-size: 24px;
    font-weight: 600;
    color: var(--sct-text-primary);
    margin-bottom: 20px;
}

.-logo-win {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.el-slider__profit {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: var(--sct-radius-md);
    padding: 15px;
    margin-bottom: 15px;
}

.el-slider__profit .-profi-text {
    font-size: 12px;
    color: var(--sct-text-muted);
    text-transform: uppercase;
}

.el-slider__profit > div:last-child {
    font-size: 20px;
    font-weight: 700;
    color: var(--sct-win);
}

.el-slider__stop p {
    color: var(--sct-text-muted);
    font-size: 13px;
    font-style: italic;
}

/* ==========================================================================
   Testimonials Section
   ========================================================================== */
.sc-customer {
    padding: 60px 0;
    background: var(--sct-bg-darker);
}

.sc-feedback-carousel .slider-item {
    background: var(--sct-bg-card);
    border: 1px solid var(--sct-border);
    border-radius: var(--sct-radius-lg);
    padding: 30px;
    margin: 15px;
    display: flex;
    gap: 20px;
}

.slider-item__thumb img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 3px solid var(--sct-primary);
    object-fit: cover;
}

.slider-item__content {
    font-style: italic;
    color: var(--sct-text-secondary);
    line-height: 1.8;
    margin-bottom: 15px;
}

.slider-item__title {
    font-weight: 600;
    color: var(--sct-primary);
    font-size: 16px;
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */
.faq-section {
    padding: 60px 0;
}

.accordion .card {
    background: var(--sct-bg-card);
    border: 1px solid var(--sct-border);
    border-radius: var(--sct-radius-md);
    margin-bottom: 15px;
}

.accordion .card-header {
    background: transparent;
    border-bottom: 1px solid var(--sct-border);
    padding: 0;
}

.accordion .card-header a {
    display: block;
    padding: 18px 20px;
    color: var(--sct-text-primary);
    font-weight: 600;
    font-size: 15px;
}

.accordion .card-header a:hover {
    color: var(--sct-primary);
}

.accordion .card-header a .fa-angle-down {
    float: right;
    transition: transform 0.3s ease;
}

.accordion .card-header a[aria-expanded="true"] .fa-angle-down {
    transform: rotate(180deg);
}

.accordion .card-body {
    padding: 20px;
    color: var(--sct-text-secondary);
    line-height: 1.8;
}

.accordion .card-body a {
    color: var(--sct-primary);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-1 {
    background: var(--sct-bg-darker);
    padding: 60px 0 30px;
    border-top: 3px solid var(--sct-primary);
    margin-top: auto;
}

.footer-box-1 .textwidget p {
    color: var(--sct-text-secondary);
    line-height: 1.8;
}

.footer-box-1 .textwidget strong {
    color: var(--sct-primary);
}

.widget__wrap {
    margin-bottom: 30px;
}

.widget__wrap .sec-title {
    margin-bottom: 20px;
}

.widget__wrap .widget-title {
    font-size: 16px;
    color: var(--sct-text-primary);
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.widget__wrap .widget-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--sct-primary);
}

.widget__wrap .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget__wrap .menu li {
    margin-bottom: 10px;
}

.widget__wrap .menu a {
    color: var(--sct-text-secondary);
    font-size: 14px;
    transition: all 0.3s ease;
}

.widget__wrap .menu a:hover {
    color: var(--sct-primary);
    padding-left: 5px;
}

.contact-widget .soccertips-contact-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-widget .soccertips-contact-box li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-widget .soccertips-contact-box li a {
    color: var(--sct-text-secondary);
    font-size: 14px;
}

.contact-widget .soccertips-contact-box li a:hover {
    color: var(--sct-primary);
}

/* Sponsor Gallery */
.gallery-item {
    text-align: center;
    margin: 10px 0;
}

.gallery-item img {
    display: inline-block;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.gallery-item img:hover {
    opacity: 1;
}

/* ==========================================================================
   Footer Styles - 三列硬编码布局
   ========================================================================== */
.site-footer {
    background: #0a0a0a;
    padding: 60px 0 30px;
    border-top: 1px solid #1a1a1a;
}

/* Main Footer - 三列布局 */
.main-footer {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col {
    flex: 1;
}

/* 左列：About */
.footer-about {
    max-width: 350px;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo img {
    max-height: 40px;
    width: auto;
}

.footer-about-text p {
    color: #999;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.footer-copyright p {
    color: #666;
    font-size: 13px;
    margin: 0;
}

.footer-copyright a {
    color: #d4a017;
    text-decoration: none;
}

.footer-copyright a:hover {
    text-decoration: underline;
}

/* 中列和右列：标题 */
.footer-col-title {
    color: #d4a017;  /* 金色 */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;  /* 强制大写 */
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1a1a1a;
}

/* 链接列表 */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    list-style: none;
    margin-bottom: 12px;
}

.footer-links li a {
    color: #999;  /* 浅灰色 */
    font-size: 14px;
    line-height: 1.8;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-links li a:hover {
    color: #d4a017;  /* hover 变金色 */
    padding-left: 5px;
}

/* 底部横线（main-footer 下方） */
.footer-divider {
    height: 1px;
    background: #1a1a1a;
    margin: 30px 0;
}

/* ==========================================================================
   Footer Bottom Bar - 底部声明与支付图标
   ========================================================================== */
.footer-bottom-bar {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

/* 第一层：横线 */
.footer-bottom-divider {
    width: 100%;
    height: 1px;
    background: #333;
    margin-bottom: 20px;
}

/* 第二层：法律声明文字 */
.footer-legal-text {
    margin-bottom: 15px;
}

.footer-legal-text p {
    color: #888;  /* 中灰色 */
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

/* 第三层：支付图标 */
.footer-payment-icons {
    margin-top: 15px;
}

.payment-icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.payment-icon-list li {
    list-style: none;
    display: inline-block;
}

.payment-icon-list li img {
    height: 20px;  /* 强制统一高度 */
    width: auto;   /* 宽度自动，保持比例 */
    filter: grayscale(100%);  /* 灰度滤镜 */
    opacity: 0.6;
    transition: all 0.3s ease;
}

.payment-icon-list li img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-2px);
}

/* 响应式 */
@media (max-width: 992px) {
    .main-footer {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-about {
        max-width: 100%;
    }
    
    .footer-col {
        text-align: center;
    }
    
    .footer-col-title {
        border-bottom: none;
    }
    
    .footer-links li a:hover {
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 40px 0 25px;
    }
    
    .main-footer {
        gap: 25px;
        margin-bottom: 30px;
    }
    
    .footer-divider {
        margin: 25px 0;
    }
    
    .footer-bottom-bar {
        padding-top: 15px;
    }
    
    .footer-bottom-divider {
        margin-bottom: 15px;
    }
    
    .footer-legal-text p {
        font-size: 11px;  /* 移动端稍小 */
        line-height: 1.5;
    }
    
    .payment-icon-list {
        gap: 12px;  /* 移动端缩小间距 */
    }
    
    .payment-icon-list li img {
        height: 18px;  /* 移动端稍小 */
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 992px) {
    .col-sm-3, .col-sm-4, .col-sm-6, .col-sm-8, .col-sm-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .main-menu {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .menu-icon {
        display: block;
        cursor: pointer;
        z-index: 1001;
        position: relative;
    }
    
    nav.onepage {
        display: none;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    nav.onepage.show-mobile-menu {
        display: block !important;
    }
    
    nav.onepage ul {
        flex-direction: column;
    }
    
    nav.onepage .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 3px solid var(--sct-primary);
        margin-left: 15px;
    }
    
    .style-2 {
        padding: 25px;
    }
    
    .table_wrap {
        overflow-x: auto;
    }
    
    .table_series_tips {
        min-width: 800px;
    }
}

@media (max-width: 767px) {
    .sec-title h1,
    .sec-title h2 {
        font-size: 22px;
    }
    
    blockquote {
        padding: 20px;
    }
    
    .sc-howplay {
        padding: 25px;
    }
    
    .sc-feedback-carousel .slider-item {
        flex-direction: column;
        text-align: center;
    }
    
    .slider-item__thumb img {
        margin: 0 auto;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.pb-5 { padding-bottom: 3rem; }
.pt-5 { padding-top: 3rem; }
.pt-4 { padding-top: 1.5rem; }
.pb-4 { padding-bottom: 1.5rem; }
.mt-3 { margin-top: 1rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.hide_mb { display: none; }
.show_mb { display: block; }

.clear { clear: both; }

.fs-18 { font-size: 18px; }
.fw-normal { font-weight: 400; }
.opacity-50 { opacity: 0.5; }

.d-flex { display: flex; }
.flex-grow-1 { flex-grow: 1; }
.pl-2 { padding-left: 0.5rem; }

@media (min-width: 768px) {
    .hide_mb { display: table-cell; }
    .show_mb { display: table-cell; }
    
    .d-none { display: none; }
    .d-md-block { display: block; }
}

/* ==========================================================================
   Ping Animation (Live Indicator)
   ========================================================================== */
.ping-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.dot-ping {
    width: 8px;
    height: 8px;
    background: var(--sct-live);
    border-radius: 50%;
    animation: ping-animation 1.5s infinite;
}

.dot-static {
    width: 8px;
    height: 8px;
    background: var(--sct-live);
    border-radius: 50%;
    opacity: 0.3;
}

@keyframes ping-animation {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ==========================================================================
   Switch (Select All)
   ========================================================================== */
.switch-wrapper {
    display: flex;
    justify-content: center;
}

.switch {
    width: 18px;
    height: 18px;
    border: 2px solid var(--sct-border);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.switch.active {
    background: var(--sct-primary);
    border-color: var(--sct-primary);
}

.switch.active:after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--sct-bg-dark);
    font-size: 12px;
    font-weight: 700;
}