body {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }
  body::before {
    content: "";
    background-image: url('https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/world-cup-2026-bg.jpeg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-attachment: fixed;
    opacity: .2;
    position: fixed;
    top: 10%;
    left: 0;
    width: 200%;
    height: 200%;
    z-index: -1;
  }
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
    padding:2em;
  }
  .logo img {width: 250px;}
  .sub {
    width: 40%;
    margin: 0;
    padding: 0 2em !important;
    font-size: 0.9rem;
    line-height: 1.5rem;
    }
  nav{width: 85%; margin: auto;}
  .instagram {display:flex; align-items:center; gap:5px;}
  .loading-indicator {
    text-align: center; width: 100%; color: #888"
    }

    
/* COUNTDOWN */
.countdown-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    gap: 10em;
  }

  .countdown-label {
    font-size: 20px;
    font-weight: bold;
    color: #111;
  }

  .countdown-date {
    font-size: 0.875rem;
    font-weight: 300;
  }

  .countdown-timer {
    display: flex;
    align-items: baseline;
  }

  .cd-num {
    font-size: 28px;
    font-weight: 900;
    color: #000;
    margin-left: 8px;
  }

  .cd-unit {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin-left: 4px;
  }

  #cd-days {
    margin-left: 0;
  }

  /* SCHEDULE */
  .carousel-container {
    padding: 10px 20px 0 20px;
  }
  
  /* --- WIDGET --- */
  .widget-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* max-width: 1000px; */
    margin: 0 auto 10px auto;
  }
  .widget-title {
    font-size: 18px;
    font-weight: bold;
    color: #111;
  }
  .widget-link {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .widget-link:hover {
    color: #d32f2f;
  }

  /* --- SWIPER --- */
  #hp-swiper {
    /* max-width: 1000px; */
    margin: 0 auto;
    padding-bottom: 10px; 
    height: 100px !important; 
  }

  #hp-swiper .swiper-slide {
    width: calc((100% - (12px*4)) / 4) !important;
    height: 90px !important; 
    display: flex;
  }

  .hp-card {
    box-sizing: border-box; 
    width: 100%; 
    height: 90px !important; 
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    cursor: pointer;
    transition: box-shadow 0.2s;
  }

  .hp-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  /* --- TEAMS & CENTER INFO --- */
  .hp-team {
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .hp-flag {
    width: 40px;
    height: 26px;
    object-fit: cover;
    border: 1px solid #eee;
  }
  .hp-name {
    font-size: 14px;
    line-height: 17px;
    font-weight: bold;
    color: #111;
    text-align: center;
  }
  
  .hp-center {
    width: 34%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .hp-group {
    font-size: 11px;
    color: #888;
    margin-bottom:5px;
  }
  .hp-date {
    font-size: 13px;
    color: #111;
  }
  .hp-score-area {
    font-size: 18px;
    font-weight: 900;
    color: #111;
    text-align: center;
    letter-spacing: 1px;
  }

  /* --- TOP RIGHT BADGE --- */
  .hp-badge {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
  }
  .hp-badge.upcoming {
    background: #f0f0f0;
    color: #888;
  }
  .hp-badge.finished {
    background: #e0e0e0;
    color: #555;
  }
  .hp-badge.live {
    background: #d32f2f;
    color: #fff;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
widget-header a {
 text-decoration: none;
}
button.button {
 background-color: #e90034;
 padding: 7px;
 border-radius: 20px!important;
 color: white;
 border: 1px solid #e90034;
}
button.button:hover{
 background-color: white;
 border: 1px soild #e90034;
 color: #e90034;
}

.hp-slider-nav {display: none!important;}


/* XIAOZAO CAROUSEL */
.master-countdown-link {
    text-decoration: none !important;
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
  }

  .countdown-btn {
    display: inline-block;
    background: #dc3545;
    color: #ffffff !important;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 32px;
    border-radius: 50px;
    /* box-shadow: 0 4px 15px rgba(220, 53, 69, 0.35); */
    margin: 20px auto 0 auto !important;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }

  .btn-arrow {
    margin-left: 6px;
    display: inline-block;
    transition: transform 0.2s ease;
  }

  .master-countdown-link:hover .countdown-btn {
    background: #bd2130;
    transform: translateY(-2px);
  }

  .master-countdown-link:hover .btn-arrow {
    transform: translateX(4px);
  }

  .gif-card-box {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
  }

  .gif-card-box img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
  }

  .master-countdown-link:hover .gif-card-box {
    transform: translateY(-2px);
  }

  /* STANDINGS */
  .standings-container {
    padding: 10px 20px 0 20px;
  }

  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;
  }
  .header-container h2 {
    margin: 0;
  }

  /* Swiper */
  .slider-nav {
    display: flex;
    gap: 12px;
  }
  .swiper-button-next,
  .swiper-button-prev {
    position: static !important;
    margin: 0 !important;
    width: 36px !important;
    height: 36px !important;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
  }
  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 16px !important;
    color: #000;
  }
  .swiper {
    width: 100%;
    height: 500px;
  }
  .swiper-slide {
    /* height: calc((100% - 20px) / 2) !important; */
    height: auto !important;
    display: flex;
    flex-direction: column;
  }
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
content: ''!important;
}
.search-wrapper {
margin-bottom: 0!important;
}

/* SCORES FIXTURES */
.scores-fixtures {
    padding: 0 20px;
}
.header-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin: 10px 0;
    color: #111;
  }

  /* --- TABS CSS --- */
  .tab-btn {
    padding: 10px 30px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 10px !important;
    background: #e0e0e0;
    color: #555;
    cursor: pointer;
    transition: all 0.3s;
  }
  .tab-btn.active {
    background: #d32f2f;
    color: #fff;
  }
  .tab-content {
    display: none;
    animation: fadeIn 0.3s;
  }
  .tab-content.active {
    display: block;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* --- GROUPING CSS --- */
  .stage-section {
    max-width: 800px;
    margin: 0 auto 40px auto;
  }
  .stage-header {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #111;
    line-height: 0.1em;
    margin: 10px 0; 
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .date-header {
    font-size: 16px;
    font-weight: bold;
    color: #555;
    margin: 20px 0 10px 0;
    padding-left: 10px;
  }
  .fixtures-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  @media (max-width: 640px) {
    .fixtures-list {
      grid-template-columns: 1fr;
    }

    .team.home {
      flex-direction: column-reverse;
    }

    .team.away {
      flex-direction: column;
    }

    .team.home,
    .team.away {
      text-align: center;
      justify-content: center;
      gap: 6px;
    }
  }

  /* --- CARD CSS --- */
  .match-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
    position: relative;
    overflow: hidden;
    border: 1px solid #111;
  }
  .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #666;
  }
  .match-name {
    font-weight: bold;
  }
  .badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px!important;
    background: #eee;
    color: #555;
  }
  .badge.finished {
    background: #555;
    color: #fff;
  }
  .badge.live {
    background: #d32f2f;
    color: #fff;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }

  .card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px !important;
  }
  .team {
    flex: 1;
    font-size: 1em;
    font-weight: bold;
    color: #111;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .team.home {
    justify-content: flex-end;
    text-align: right;
  }
  .team.away {
    justify-content: flex-start;
    text-align: left;
  }
  .team-flag {
    width: 36px;
    height: 24px;
    object-fit: cover;
    background-color: #f4f6f9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  .center-info {
    width: 120px;
    text-align: center;
    padding: 0 15px;
  }
  .f-score {
    font-size: 24px;
    font-weight: bold;
    color: #111;
  }
  .f-time {
    font-size: 18px;
    font-weight: bold;
    color: #111;
  }
  .placeholder-text {
    color: #888;
  }
  .placeholder-text .team-flag {
    display: none;
  }
  .detail-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 4px 12px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    margin-top: 5px;
  }
  .detail-btn:hover {
    background: #f0f0f0;
  }

  /* Match Details (Hidden by default) */
  .match-details {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
    font-size: 13px;
  }
  .event-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .event-left {
    width: 45%;
    text-align: right;
  }
  .event-center {
    width: 10%;
    text-align: center;
    color: #888;
    font-weight: bold;
  }
  .event-right {
    width: 45%;
    text-align: left;
  }
  .stats-container {
    margin-top: 15px;
  }
  .stats-title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
    color: #111;
    font-size: 14px;
  }
  .stat-row-container {
    margin-bottom: 12px;
  }
  .stat-row-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    font-size: 13px;
  }
  .stat-val {
    font-weight: bold;
    width: 30px;
    color: #111;
  }
  .stat-val.home {
    text-align: left;
  }
  .stat-val.away {
    text-align: right;
  }
  .stat-label {
    flex: 1;
    text-align: center;
    color: #666;
  }

  .stat-bar-bg {
    height: 6px;
    background: #0b132b;
    border-radius: 3px;
    width: 100%;
    overflow: hidden;
  }
  .stat-bar-fill {
    height: 100%;
    background: #4da6d4;
    transition: width 0.3s ease;
  }

  /* --- MATCH DETAILS INTERNAL TABS --- */
  .match-details-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
  }
  .detail-tab-btn {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
  }
  .detail-tab-btn.active {
    color: #111;
    border-bottom: 2px solid #d32f2f;
  }
  .detail-panel {
    display: none;
    text-align: left;
  }
  .detail-panel.active {
    display: block;
  }

  /* --- TIDY GRID EVENTS --- */
  .events-wrapper {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin: 10px 0 20px 0;
  }
  .event-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .event-col.home-col {
    padding-left: 30px;
  }

  .event-center-spacer {
    width: 120px;
    flex-shrink: 0;
  }

  .event-item {
    display: grid;
    grid-template-columns: 20px 35px 1fr;
    align-items: center;
    gap: 4px;
  }
  .event-icon {
    text-align: left;
  }
  .event-time {
    font-weight: bold;
    color: #555;
    text-align: center;
  }
  .event-name {
    text-align: left;
  }

  /* --- LINEUPS & SUBS --- */
  .sub-row {
    font-size: 13px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sub-in {
    color: #28a745;
    font-weight: bold;
  }
  .sub-out {
    color: #dc3545;
  }
  .lineups-split {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }
  .lineup-col {
    width: 48%;
  }
  .lineup-player {
    padding: 4px 0;
    border-bottom: 1px solid #f9f9f9;
  }
  .stage-border {
    border-bottom: 2px solid #ccc;
    max-width: 300px;
    width: 100%;
  }
  .stage-title {
    max-width: 300px;
  }

  /* KNOCKOUT STANDINGS */
  .knockout-standing-container {
    width: 90%;
    margin: auto;
  }

  .title-search-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .title-search-container .search-wrapper {
    margin: auto;
  }

  #standings-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .view-panel {
    display: none;
  }
  .view-panel.active {
    display: block;
  }

  .data-vis iframe {
    padding: 1em;
    width: 80%;
    height: 1500px;
  }

  .tab-btn {
    border-radius: 10px !important;
  }

  /* TEAM PROFILE */
  .team-container {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
  }
  .section-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  /* --- Custom Dropdown Search --- */
  .search-container {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    z-index: 100;
  }
  .search-input {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    background: white
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>')
      no-repeat right 15px center;
  }
  .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
    display: none;
  }
  .dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
  }
  .dropdown-item:hover {
    background: #f8f9fa;
    color: #d32f2f;
  }
  .dropdown-item span.en {
    color: #888;
    font-size: 13px;
  }

  /* --- Team Profile Card --- */
  .profile-card {
    border-radius: 8px;
    padding: 25px 40px;
    margin-bottom: 30px;
  }
  .profile-top-label {
    text-align: center;
    font-weight: bold;
    color: #111;
    margin-bottom: 25px;
    font-size: 18px;
  }
  .profile-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }
  .profile-flag-container {
    flex-shrink: 0;
  }
  .profile-flag {
    width: 140px;
    height: 90px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: block;
  }
  .flag-fallback {
    width: 140px;
    height: 90px;
    background: #e0e0e0;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  .profile-name-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 30px;
  }
  .team-title {
    font-size: 32px;
    font-weight: 900;
    margin: 0;
    color: #111;
  }
  .team-title-en {
    font-size: 18px;
    color: #555;
    margin: 2px 0 0 0;
  }
  .profile-info-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    color: #222;
    border-left: 1px solid #ddd;
    padding-left: 30px;
  }
  .info-line span {
    margin-left: 5px;
  }

  /* Mobile adjustments for Profile Card */
  @media (max-width: 768px) {
    .profile-content {
      flex-direction: column;
      text-align: center;
      gap: 15px;
    }
    .profile-name-col {
      padding-right: 0;
    }
    .profile-info-col {
      border-left: none;
      border-top: 1px solid #ddd;
      padding-left: 0;
      padding-top: 20px;
      align-items: center;
    }
  }

  /* --- Detailed Squad Table --- */
  .table-container {
    max-height: 60vh;
    overflow: auto;
    border-radius: 4px;
    border: 1px solid darkgray;
    background: white;
    margin-bottom: 30px;
  }
  table {
    width: 100%;
    border-collapse: separate; /* MUST be 'separate' for iOS sticky headers */
    border-spacing: 0;
    text-align: center;
    font-size: 14px;
    min-width: 600px;
  }
  thead {
    position: sticky;
    top: 0;
    z-index: 20;
  }
  th {
    background: #fafafa;
    padding: 12px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 1px 0 #ccc; /* Prevents gap on mobile */
  }
  td {
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
    background: white;
  }
  .text-left {
    text-align: left;
  }
  .stat-box {
    background: #fff0f0;
    color: #d32f2f;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
  }
  .col-player {
    width: 110px;
  }
  td.text-left div {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3;
  }
  .players {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 10px;
  }
  .player-img img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover;
  }

  /* Tooltips */
  th.has-tooltip {
    cursor: help;
    text-decoration: underline dotted #999;
    text-underline-offset: 4px;
    position: relative;
  }
  th.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  th.has-tooltip:hover::after {
    opacity: 1;
  }

  th.sortable {
    cursor: pointer;
    transition: background 0.2s;
    user-select: none; /* Prevents text highlighting when tapping fast */
  }
  th.sortable:hover {
    background: #e9ecef;
  }
  .sort-icon {
    font-size: 10px;
    color: #888;
    margin-left: 4px;
  }

  /* --- Fixtures & Results Grid --- */
  .stage-group {
    margin-bottom: 30px;
  }
  .stage-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .fixtures-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  .fixture-card {
    background: white;
    border: 1px solid #d32f2f;
    width: calc(33.333% - 14px);
    box-sizing: border-box;
    padding: 15px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
  }
  .fixture-card.finished {
    border: 1px solid #4a6aa6;
  }
  .f-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 15px; */
  }
  .f-team-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    gap: 5px;
  }
  .f-flag {
    width: 40px;
    height: 25px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  .f-team-name {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
  .f-center-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
  }
  .f-date {
    font-size: 12px;
    color: #555;
    margin-bottom: 5px;
  }
  .f-score-time {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 2px;
  }
  .f-penalty {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
  }
  .f-events-row {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    font-size: 11px;
    color: #333;
    min-height: 20px;
  }
  .f-events-home {
    text-align: left;
    width: 48%;
  }
  .f-events-away {
    text-align: right;
    width: 48%;
  }
  .f-event-item {
    margin-bottom: 3px;
  }

  /* Mobile Adjustments for Fixtures Grid */
  @media (max-width: 768px) {
    .fixtures-grid {
      flex-direction: column-reverse;
      align-items: center;
    }
    .fixture-card {
      width: 100%;
    }
  }

  .f-team {
    font-size: 16px;
    font-weight: bold;
    width: 35%;
    text-align: center;
  }
  .f-center {
    width: 30%;
    text-align: center;
  }
  .f-score {
    font-size: 20px;
    font-weight: 900;
  }
  .f-time {
    font-size: 14px;
    color: #666;
  }
  .detail-btn {
    background: transparent;
    border: 1px solid #ccc;
    color: #555;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
    width: 100%;
    transition: background 0.2s;
  }
  .detail-btn:hover {
    background: #f0f0f0;
  }
  .match-events {
    display: none;
    background: #fafafa;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 13px;
    margin-top: 15px;
    border-top: 1px solid #eee;
    width: 100%;
    box-sizing: border-box;
  }
  .event-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #e0e0e0;
  }
  .event-row:last-child {
    border-bottom: none;
  }
  .event-left {
    width: 45%;
    text-align: right;
  }
  .event-right {
    width: 45%;
    text-align: left;
  }
  .event-center {
    width: 10%;
    text-align: center;
    font-weight: bold;
    color: #888;
  }
  .news-btn {
    display: inline-block;
    background-color: #e90034!important;
    color: white!important;
    padding: 8px 24px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .news-btn:hover {
    background-color: white;
    color: #e90034;
  }

  @media (max-width: 768px) {
    /* HEADER */
    .header {
      flex-direction: column;
    }
    .logo img {width: 200px;}
    .instagram {display:block;}
    .instagram img{ margin-right: 5px;}
    .sub {
        width: 100%;
        font-size: 1rem;
        line-height: 1.6rem;
      }

      /* SCHEDULE */
      .widget-header {justify-content: space-between;}
     .hp-slider-nav {display: flex!important; gap: 10px;}
     #hp-swiper .swiper-slide {
        width: 100% !important;
     }

     /* SCORES FIXTURES */
     .stage-border, .stage-title {
        flex: 1;
      }

      /* KNOCKOUT STANDINGS */
      .data-vis iframe {
        height: 600px;
      }
  }

  @media (max-width: 640px) {
    .countdown-wrapper {
      flex-direction: column;
      justify-content: center;
      gap: 12px;
    }
  }