/*
 * 24直播网 品牌层：只覆盖配色与本站资源（深蓝 / 黑 + 亮黄 / 金 + 白 + 浅灰），
 * 不改动 24zhibo.css 的布局比例与响应式规则。
 */
:root {
  --navy: #0B1F3A;
  --navy-2: #13305A;
  --gold: #FDDC00;
  --gold-2: #FFC72B;
  --ink: #111;
  --grey: #F2F3F5;
  --red: #FF1B25;
}
body { background: var(--grey); }
a { color: inherit; text-decoration: none; }

/* ---------- Header（Reference .header 结构） ---------- */
.header { background: var(--navy); border-bottom: 3px solid var(--gold); }
.header_logo a { display: flex; align-items: center; height: 72px; }
.header_logo img { height: 44px; margin: 0; }
.header_menu { max-width: calc(100% - 190px); white-space: nowrap; }
.header_menu_item { padding: 0 7px; }
.header_menu_item a { color: #fff; font-size: 14px; }
.header_menu_item a:hover { color: var(--gold); }
.header_menu_item.active a { color: var(--gold); font-weight: 700; }
.header_menu_item.active a:after { background: var(--gold); top: 54px; }

/* ---------- 顶部赛事轮播卡片 ---------- */
.match_top .match { background: linear-gradient(135deg, #fff 0%, #fff 62%, #FFF6CE 100%); border: 1px solid #EDEDED; color: #000; }
.match_top .swiper-button-prev, .match_top .swiper-button-next { width: 20px; height: 33px; }
.match_top .swiper-button-prev:before, .match_top .swiper-button-next:before {
  content: ""; display: block; width: 12px; height: 12px; border: solid var(--navy); border-width: 0 0 3px 3px; transform: rotate(45deg); margin-left: 6px;
}
.match_top .swiper-button-next:before { transform: rotate(-135deg); margin-left: 0; }
.match_top .match .match_qiudui .qiudui .name img { border-radius: 50%; }
.match_top .match .status { font-size: 12px; color: var(--red); }

/* ---------- 标题 / H1 ---------- */
.section-tit { border-bottom-color: var(--navy); }
.section-tit h1, .section-tit h2 { display: inline; font-size: 20px; font-weight: 700; color: #000; }
.section-tit .sub { font-size: 12px; font-weight: 400; color: #8A8A8A; padding-left: 8px; }
.page-intro { font-size: 13px; color: #666; line-height: 1.8; padding: 10px 0 0; }

/* ---------- 比赛列表按钮 ---------- */
.match-item .info_right.start a { background: var(--navy); color: var(--gold); }
.match-item .info_right.recoad a { background: #ebebeb; color: #888; }
.match-item .info_left .league a { color: var(--navy-2); }
.match .match_filter_item.active, .match .match_filter_item.active a { background: var(--navy); color: var(--gold); }
.match_time { color: var(--navy); font-weight: 600; }
.match_time .count { font-weight: 400; color: #999; font-size: 12px; padding-left: 8px; }
.empty-tip { padding: 30px 0; text-align: center; color: #999; font-size: 13px; }

/* ---------- 内页左侧导航 ---------- */
.ny_leftside .all { background: var(--navy); color: var(--gold); }
.ny_leftside .navlist dl dd a.on { color: var(--navy); border-left-color: var(--gold); background: #FFF8D6; font-weight: 600; }
.ny_leftside .navlist dl.on dt { color: var(--navy); }

/* ---------- 比赛详情比分区 ---------- */
.fixed_score_box { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 60%, #1d3f73 100%); border-radius: 6px; }
.fixed_score_box .league_name a, .fixed_score_box .league_name span { color: var(--gold); }
.fixed_score_box .match_status { color: #fff; }
.score_name_left .image_container { background: #fff; }
.zhibo_btn a { background: var(--navy) !important; color: var(--gold) !important; border-color: var(--navy) !important; }
.zhibo_btn a:hover { background: var(--gold) !important; color: var(--navy) !important; }
.senav span.on { background: var(--gold); color: var(--navy); }

/* ---------- 积分榜（Reference 数据） ---------- */
.team_rank_main .team_rank_match_saishi span.on { background-color: var(--navy); color: var(--gold); }
.team_rank_nav span.on { color: var(--navy); }
.team_rank_score .list li img { width: 20px; height: 20px; vertical-align: middle; margin-right: 4px; }

/* ---------- 热门联赛 ---------- */
.section-hot-team a .pic img { width: 48px; height: 48px; }
.section-hot-team a:hover p { color: var(--navy); font-weight: 600; }

/* ---------- 分页 / 录像 / 文章 ---------- */
.fenye ul li a { border-color: var(--gold); }
.fenye ul li.active a, .fenye ul li a:hover { background: var(--navy); border-color: var(--navy); color: var(--gold); }
.article_content { padding: 20px; }
.article_content .nr img { max-width: 100%; height: auto; }
.article_content .nr .red, .article_content .nr .red a { color: var(--red); }
.article_content h1.article_tit { font-size: 22px; font-weight: 600; line-height: 1.6; color: #222; }

/* ---------- 球队页 ---------- */
.qdqyinfo .qdqy_logo { background: var(--navy); }
.qdqyinfo .qdqy_logo h1 { font-size: 20px; color: #fff; }
.hot_member_item .info { padding: 8px 12px; background: #F5F6FA; margin: 5px; border-radius: 3px; }
.team-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 15px 0; }
.team-list a { padding: 5px 12px; background: #F5F6FA; border-radius: 3px; font-size: 13px; }
.team-list a:hover { background: var(--gold); }

/* ---------- 页脚 ---------- */
.friend-wrapper { background: #10233F; }
.footer-wrapper { background: var(--navy); }
.footer-wrapper .footer-copyright, .footer-wrapper .footer-copyright a { color: #9DB0CC; }

@media (max-width: 780px) {
  .header_logo a { height: 52px; padding-left: 10px; }
  .header_logo img { height: 36px; padding-left: 0; }
  .header_menu { background: var(--navy-2); border-top: 1px solid rgba(255, 255, 255, .08); }
  .header_menu_item a { color: #fff; }
  .header_menu_item.active a { color: var(--gold); }
  .header_menu_item.active a:after { display: none; }
  .fixed_score_box { padding: 15px 10px; border-radius: 0; }
  .article_content { padding: 12px; }
  .ny_leftside .all { width: 100%; }
}

/* 热门新闻前三名（Reference 用图片角标，本站用纯色角标） */
.hot_news_list ul li:nth-child(1) span { background: var(--red); }
.hot_news_list ul li:nth-child(2) span { background: #FC7B44; }
.hot_news_list ul li:nth-child(3) span { background: var(--gold-2); }
.hot_news_list ul li span { color: #fff; }
.match_score .vs { font-size: 26px; }

@media (max-width: 780px) {
  .header .container { flex-wrap: wrap; }
  .header_menu { max-width: 100%; width: 100%; }
  .match-item .info_right a { font-size: 12px; white-space: nowrap; }
}

/* 不使用底部导航：去掉 Reference 移动端为底部导航预留的页脚间距 */
@media (max-width: 780px) { footer { margin-bottom: 0; } }

/* ---------- 观看入口（高清直播 / 观看直播，统一跳球吧信号） ---------- */
.watch-box { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.watch-main { display: inline-flex; flex-direction: column; align-items: center; }
.watch-btn {
  display: inline-block; width: 116px; height: 40px; line-height: 40px; text-align: center;
  background: var(--navy); color: var(--gold) !important; font-size: 16px; font-weight: 700;
  border-radius: 4px; letter-spacing: 1px; box-shadow: 0 2px 6px rgba(11, 31, 58, .25);
}
.watch-btn:hover { background: var(--gold); color: var(--navy) !important; }
.watch-btn-off { background: #EBEBEB; color: #999 !important; box-shadow: none; cursor: default; }
.watch-tip { font-size: 12px; color: #8A8A8A; line-height: 22px; margin-top: 4px; }
.watch-more { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 5px; }
.watch-more a { height: 32px; line-height: 32px; padding: 0 14px; border: 1px solid var(--navy); color: var(--navy); border-radius: 4px; font-size: 14px; }
.watch-more a:hover { background: var(--gold); border-color: var(--gold); }

/* 首页顶部推荐卡片：卡片内直达按钮 */
.match_top .match { height: auto; min-height: 158px; }
.match_top .watch-btn-sm { display: block; width: 96px; height: 30px; line-height: 30px; font-size: 13px; margin: 10px auto 0; letter-spacing: 0; }

/* 列表按钮：进行中（start）实心；未开始描边；已结束「观看直播」浅底，均可点击 */
.match-item .info_right a { background: #fff; color: var(--navy); border: 1px solid var(--navy); border-radius: 4px; }
.match-item .info_right.start a { background: var(--navy); color: var(--gold); border-color: var(--navy); }
.match-item .info_right.recoad a { background: #F2F3F5; color: #333; border-color: #D5D8DE; }
.match-item .info_right { background: none; }

@media (max-width: 780px) {
  .watch-btn { width: 140px; height: 40px; line-height: 40px; }
  .match_top .watch-btn-sm { width: 96px; height: 30px; line-height: 30px; }
}
@media (max-width: 780px) {
  .match-item .info_right { width: 19%; }
  .match-item .info_center { width: 59%; }
  .match-item .info_right a { font-size: 12px; padding: 0; line-height: 30px; letter-spacing: 0; }
}