/* --- GLOBAL VARS --- */
        :root {
            --header-bg: #001e28;
            --nav-bg: #0f2d37;
            --accent-red: #ff3c3c;
        }

        body { background-color: #f2f2f2; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }

                    body:not(.theme--dark) {
                        --color-social-primary-facebook-background: #1877f2;
                        --color-social-primary-google-background: #4285f4;
                        --color-social-primary-apple-background: #000;
                        --color-social-secondary-background: #fff;
                        --color-social-secondary-border: #eee;
                        --color-social-brand-background: #0f2d37;
                    }
                    body:not(.theme--dark) {
                        --color-secondary-2: #00141e;
                        --color-combination-7: #eee;
                        --color-combination-18: #9e9e9e;
                        --color-combination-35: #d9d9d9;
                    }

        /* --- HEADER & SEARCH --- */
        .bg-header { background-color: var(--header-bg); }
        .logo { font-weight: 800; font-size: 24px; text-transform: uppercase; color: white; text-decoration: none;}
        .logo span { color: var(--accent-red); }

/* Search Box */
        .search-wrapper { position: relative; display: flex; align-items: center; background: #0f2d37; border-radius: 4px; height: 32px; transition: all 0.3s ease; width: 32px; overflow: hidden; }
        .search-wrapper.active { width: 220px; background: #ffffff; }
        .search-input { width: 0; height: 100%; border: none; background: transparent; outline: none; color: #2d2d2d; font-size: 13px; padding: 0; opacity: 0; transition: all 0.3s ease; }
        .search-wrapper.active .search-input { width: calc(100% - 32px); padding-left: 10px; opacity: 1; }
        .search-trigger { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: transparent; color: #b8c0c4; position: absolute; right: 0; transition: color 0.3s; }
        .search-wrapper.active .search-trigger { color: #2d2d2d; }
        .search-wrapper:not(.active) .search-trigger:hover { color: white; }



        .btn-login { color: #b8c0c4; font-weight: 600; font-size: 13px; text-decoration: none; display: flex; align-items: center; gap: 6px; border: none; background: transparent;}
        .btn-login:hover { color: white; }

        /* --- NAV MAIN STYLES --- */
        .sport-nav { background-color: var(--nav-bg); border-bottom: 1px solid #1c3d49; position: relative; height: 48px; }
        .nav-wrapper { position: relative; height: 100%; display: flex; align-items: center; overflow: hidden; }
        .nav-content { display: flex; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; height: 100%; white-space: nowrap; scroll-behavior: auto; width: 100%; }
        .nav-content::-webkit-scrollbar { display: none; }
        .nav-link-custom { color: #b4b4b4; padding: 0 16px; height: 100%; display: flex; align-items: center; font-size: 13px; font-weight: bold; text-transform: uppercase; border-bottom: 3px solid transparent; text-decoration: none; transition: 0.3s; flex-shrink: 0; }
        .nav-link-custom:hover, .nav-link-custom.active { color: white; border-bottom-color: var(--accent-red); }
        
        /* Nav Buttons */
        .nav-btn-scroll { position: absolute; top: 0; bottom: 0; width: 40px; color: white; border: none; z-index: 10; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: opacity 0.3s ease; background: linear-gradient(90deg, rgba(15,45,55,1) 30%, rgba(15,45,55,0.8) 100%); }
        .nav-btn-scroll:hover { color: var(--accent-red); background-color: var(--nav-bg); }
        .btn-prev { left: 0; box-shadow: 5px 0 10px -5px rgba(0,0,0,0.5); }
        .btn-next { right: 0; box-shadow: -5px 0 10px -5px rgba(0,0,0,0.5); transform: none; background: linear-gradient(270deg, rgba(15,45,55,1) 30%, rgba(15,45,55,0.8) 100%); }
        .nav-btn-scroll.hidden { opacity: 0; pointer-events: none; }

        /* --- CONTENT BLOCKS --- */
        .sidebar-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px; }
        .sidebar-header { padding: 12px 15px; font-size: 12px; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid #eee; color: #2d2d2d; }
        .list-group-custom .list-group-item { border: none; border-bottom: 1px solid #f0f0f0; padding: 8px 15px; font-size: 12px; color: #555; cursor: pointer; transition: 0.2s; display: flex; align-items: center; }
        .list-group-custom .list-group-item:hover { background-color: #e9e9e9; color: var(--accent-red); padding-left: 20px; }
        .flag-icon { width: 16px; height: 12px; margin-right: 10px; border: 1px solid #ddd; display: inline-block; background: #ccc;}
        
        .btn-show-more { width: 100%; text-align: left; background: #f9f9f9; border: none; border-top: 1px solid #eee; padding: 10px 15px; font-size: 11px; font-weight: bold; color: #001e28; display: flex; justify-content: space-between; align-items: center; }
        .btn-show-more:hover { background: #e2e2e2; }
        .arrow-icon { transition: transform 0.3s; font-size: 10px;}
        .btn-show-more[aria-expanded="true"] .arrow-icon { transform: rotate(180deg); }

        .match-card { background: white; border-radius: 8px; padding: 15px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .news-item { display: flex; gap: 10px; padding: 15px; border-bottom: 1px solid #eee; cursor: pointer; text-decoration: none; color: inherit; }
        .news-item:hover { background: #f9f9f9; }
        .news-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: 4px; background: #ddd; flex-shrink: 0; }

        /* LEFT SIDEBAR (Nhỏ, gọn) */
        .sidebar-left { width: 100%; }
        
        .section-title {
            padding: 12px 10px; /* Padding nhỏ hơn */
            font-size: 12px;    /* Font nhỏ hơn */
            font-weight: 700;
            color: var(--text-dark);
            text-transform: uppercase;
            border-bottom: 1px solid var(--border-color);
            margin: 0;
        }

        .menu-list li {
            padding: 8px 10px; /* Giảm padding */
            font-size: 12px;   /* Font nhỏ vừa đủ */
            color: var(--text-muted);
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            transition: all 0.2s;
            white-space: nowrap; /* Không xuống dòng */
            overflow: hidden;
            text-overflow: ellipsis; /* Cắt chữ nếu dài quá */
        }
        .menu-list li:hover { background-color: var(--hover-bg); color: var(--accent-red); padding-left: 15px; }
        .flag-icon { width: 16px; height: 12px; margin-right: 8px; flex-shrink: 0; }
        .flag-icon-img {
                            width: 15px;
                            height: 12px;
                            object-fit: cover;
                            vertical-align: top;
                        }
        .hidden-item { display: none; }
        .show-more-btn { padding: 10px; font-size: 11px; }
		
		
		/* --- FOOTER STYLES (NEW) --- */
        footer {
            margin-top: auto; /* Đẩy footer xuống đáy nếu nội dung ngắn */
            background-color: var(--header-bg);
            color: #b4b4b4;
            font-size: 13px;
        }
        .footer-top { border-bottom: 1px solid var(--footer-border); padding: 30px 0; }
        .footer-social-icon { 
            width: 36px; height: 36px; background: #2d424a; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: white; transition: 0.2s; text-decoration: none; margin-right: 10px;
        }
        .footer-social-icon:hover { background: white; color: var(--header-bg); }
        
        .footer-links h5 { color: white; font-size: 14px; font-weight: bold; margin-bottom: 15px; text-transform: uppercase; }
        .footer-links h3 { color: white; font-size: 18px; font-weight: bold; margin-bottom: 15px; text-transform: uppercase; }
        .footer-links ul { padding: 0; list-style: none; }
        .footer-links ul li { margin-bottom: 8px; }
        .footer-links ul li a { color: #b4b4b4; text-decoration: none; transition: 0.2s; }
        .footer-links ul li a:hover { color: white; }

        .footer-bottom { padding: 20px 0; border-top: 1px solid var(--footer-border); text-align: center; }
        .gamble-warning { color: #777; font-size: 11px; margin-top: 10px; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.5; }
        
        /* App Buttons */
        .btn-app-store {
            display: inline-flex; align-items: center; background: #2d424a; border: 1px solid #3e5660; border-radius: 6px; padding: 5px 12px; color: white; text-decoration: none; transition: 0.2s;
        }
        .btn-app-store:hover { background: white; color: var(--header-bg); border-color: white; }
        .btn-app-text { display: flex; flex-direction: column; align-items: flex-start; margin-left: 8px; line-height: 1.1; }
        .btn-app-text span { font-size: 10px; }

        /* Ads box */
        .btn-app-text strong { font-size: 13px; }
        .boxOverContentRevive__placeholder {
                        align-items: center;
                        background-color: var(--color-combination-35);
                        border-radius: 8px;
                        color: var(--color-combination-18);
                        display: flex;
                        flex-flow: column nowrap;
                        font-weight: 700;
                        justify-content: center;
                        margin-bottom: 1px;
                        min-height: 131px;
        }
        .boxOverContentRevive__placeholderText {
                        border: 2px solid var(--color-combination-18);
                        border-radius: 4px;
                        padding: 2px;
        }
        .background-ad-top {
            background-image: url('../../adv/banner-top.jpg');
            background-size: cover;
            background-position: center;
        }
        .background-ad-right1 {
            background-image: url('../../adv/adv-right-top.jpg');
            background-size: cover;
            background-position: center;
        }
        .background-ad-right2 {
            background-image: url('../../adv/word-cup-2026.jpg');
            background-size: cover;
            background-position: center;
        }

                    /* --- FLASHSCORE STYLE MAIN CONTENT --- */
        .match-card { padding: 0 !important; overflow: hidden; } /* Ghi đè padding cũ để sát viền */
        
        /* League Header */
        .league-header { 
            padding: 12px 15px; 
            background: #eef7ff; 
            border-bottom: 1px solid #eee; 
            display: flex; 
            align-items: center; 
            justify-content: space-between;
        }
        .league-info { display: flex; flex-direction: column; line-height: 1.2; margin-left: 10px; }
        .league-country { font-size: 10px; color: #999; font-weight: 700; text-transform: uppercase; }
        .league-name { font-size: 13px; font-weight: 700; color: #000; text-decoration: none; }
        .league-link { font-size: 11px; color: #555; text-decoration: none; border-bottom: 1px solid transparent;}
        .league-link:hover { border-bottom-color: #555; }

        /* --- COLLAPSE ARROW ANIMATION --- */
        .btn-collapse-arrow {
            background: none;
            border: none;
            padding: 0;
            color: #555;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease; /* Hiệu ứng xoay mượt */
        }

        /* 1. Trạng thái MẶC ĐỊNH (Đang Show nội dung) -> Mũi tên hướng LÊN */
        .btn-collapse-arrow svg {
            transform: rotate(0deg); 
        }

        /* 2. Trạng thái KHI ẨN (Có class .collapsed do Bootstrap thêm vào) -> Mũi tên hướng XUỐNG */
        .btn-collapse-arrow.collapsed svg {
            transform: rotate(180deg);
        }

        /* Tinh chỉnh lại League Header để nút nằm gọn bên phải */
        .league-actions {
            display: flex;
            align-items: center;
            gap: 15px; /* Khoảng cách giữa chữ Standings và mũi tên */
        }
        /* Match Row */
        .match-row { 
            display: flex; 
            align-items: center; 
            padding: 10px 15px; 
            border-bottom: 1px solid #f0f0f0; 
            transition: background 0.2s; 
            text-decoration: none; 
            color: #2d2d2d;
            height: 55px; /* Chiều cao cố định cho đẹp */
        }
        .match-row:hover { background-color: #f7f8fa; }
        .match-row:last-child { border-bottom: none; }

        /* Icon Star */
        .btn-star { background: none; border: none; padding: 0; color: #ddd; cursor: pointer; transition: color 0.2s; display: flex; align-items: center;}
        .btn-star:hover, .btn-star.active { color: #f0c33c; } /* Màu vàng khi active */
        .btn-star svg { width: 16px; height: 16px; }

        /* Time & Status */
        .match-status { width: 60px; font-size: 11px; color: #666; text-align: center; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
        .match-status.finished { color: #888; }
        .match-status.live { color: #d0021b; font-weight: bold; }

        /* Teams Area */
        .match-teams { flex-grow: 1; display: flex; justify-content: center; align-items: center; gap: 15px; padding: 0 10px; }
        
        .team { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 13px; font-weight: 500; }
        .team-home { justify-content: flex-end; text-align: right; }
        .team-away { justify-content: flex-start; text-align: left; }
        
        .team-logo { width: 18px; height: 18px; object-fit: contain; overflow: hidden; }

        /* Score */
        .match-score { font-weight: 700; font-size: 14px; color: #000; min-width: 40px; text-align: center; white-space: nowrap; }
        .match-score.live { color: #d0021b; }

        /* Right Actions */
        .match-actions { display: flex; align-items: center; gap: 10px; width: 40px; justify-content: flex-end;}
        .icon-action { color: #b4b4b4; }
   

                                     /* ================= CUSTOM STYLES CHO MAIN CONTENT (KẾT HỢP BOOTSTRAP) ================= */
        
        /* Card chung */
        .main-card { background: white; border-radius: 10px; border: 1px solid #e0e0e0; box-shadow: 0 2px 8px rgba(0,0,0,0.03); margin-bottom: 24px; overflow: hidden; }
        
        /* Hero Section */
        .match-header { background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); padding: 30px 15px; text-align: center; }
        .team-logo-lg { width: 80px; height: 80px; object-fit: contain; margin-bottom: 10px; }
        .score-lg { font-size: 42px; font-weight: 800; line-height: 1; color: #222; }
        .match-meta { font-size: 12px; color: #666; margin-top: 10px; }
        
        /* Progress Bars Custom Colors */
        .bg-custom-green { background-color: #28a745 !important; }
        .bg-custom-orange { background-color: #fd7e14 !important; }
        .bg-custom-red { background-color: #dc3545 !important; }
        .bg-custom-dark { background-color: #212529 !important; }
        .bg-custom-blue { background-color: #0d6efd !important; }

 
        /* Stats Styles */
        .stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #777; letter-spacing: 0.5px; }
        .stat-val { font-weight: 700; font-size: 14px; width: 30px; }
        
        /* Lineups */
        .player-item { padding: 8px 10px; border-bottom: 0px solid #f1f1f1; font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
        .player-item:last-child { border-bottom: none; }
        .p-avatar { width: 24px; height: 24px; background: #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; margin-right: 8px; color: #555; }
        
        /* Standings */
        .table-custom thead th { background: #f8f9fa; font-size: 11px; text-transform: uppercase; color: #666; border-bottom: 2px solid #eee; }
        .table-custom tbody td { font-size: 13px; vertical-align: middle; }
        .form-dot { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 9px; color: white; margin-right: 1px; font-weight: bold; }

        @media (max-width: 992px) { .col-sidebar-right { display: none; } }
        @media (max-width: 768px) { 
            .layout-wrapper { flex-direction: column; } 
            .col-sidebar-left { display: none; } 
            .col-main { width: 100%; } 
            .team-logo-lg { width: 50px; height: 50px; }
            .score-lg { font-size: 32px; }
        }


        .p-position { font-size: 13px; color: #777; margin-right: 6px; width: 30px; display: inline-block; text-align: center; }
        
        .subs-title {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #666;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.stats-section-title {
  text-align: center;
  font-size: 12px;
  color: #333;
  margin-bottom: 5px;
  margin-top: 35px;
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}