/* ===== Component Kết quả bóng đá - World Cup ===== */
.wc-wrap { font-size: 13px; color: #222; }
.wc-wrap a { color: #1565c0; text-decoration: none; }
.wc-wrap a:hover { text-decoration: underline; }

.wc-tabs { margin: 8px 0 14px; border-bottom: 2px solid #d32f2f; }
.wc-tabs a {
    display: inline-block; padding: 7px 14px; margin-right: 4px;
    background: #f2f2f2; border: 1px solid #ddd; border-bottom: none;
    border-radius: 4px 4px 0 0; font-weight: 600; color: #333;
}
.wc-tabs a.active { background: #d32f2f; color: #fff; border-color: #d32f2f; }

/* Thanh nhảy nhanh tới bảng A..L (dính ở đầu khi cuộn) */
html { scroll-behavior: smooth; }
.wc-jump {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    position: sticky; top: 40px; z-index: 50;
    background: #fff; padding: 9px 0; margin: 0 0 16px;
    border-bottom: 1px solid #eee; box-shadow: 0 3px 5px -3px rgba(0,0,0,.2);
}
.wc-jump-label { font-weight: 600; color: #555; font-size: 13px; margin-right: 2px; }
.wc-jump a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 8px;
    border: 1px solid #ddd; border-radius: 4px; background: #f7f7f7;
    color: #d32f2f; font-weight: 700; text-decoration: none; line-height: 1;
    transition: background .15s, color .15s;
}
.wc-jump a:hover { background: #fdecec; border-color: #d32f2f; }
.wc-jump a.active { background: #d32f2f; color: #fff; border-color: #d32f2f; }

.wc-group { margin-bottom: 22px; border: 1px solid #e0e0e0; border-radius: 5px; overflow: hidden; scroll-margin-top: 96px; }
.wc-group-title {
    background: #d32f2f; color: #fff; padding: 8px 12px;
    font-size: 14px; font-weight: 700; text-transform: uppercase;
}

.wc-table { width: 100%; border-collapse: collapse; }
.wc-table th, .wc-table td { padding: 7px 6px; text-align: center; border-bottom: 1px solid #eee; }
.wc-table th { background: #fafafa; font-size: 12px; color: #555; font-weight: 600; }
.wc-table td.team { text-align: left; white-space: nowrap; }
.wc-table tr.qualified td:first-child { box-shadow: inset 3px 0 0 #2e7d32; }
.wc-table .pts { font-weight: 700; color: #d32f2f; }
.wc-table tbody tr:hover { background: #fff8e1; }

.wc-flag { width: 22px; height: 15px; object-fit: cover; vertical-align: middle;
    margin-right: 6px; border: 1px solid #ddd; }

.wc-form { display: inline-flex; gap: 3px; }
.wc-form span {
    display: inline-block; width: 18px; height: 18px; line-height: 18px;
    border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700;
}
.wc-form .W { background: #2e7d32; }
.wc-form .D { background: #f9a825; }
.wc-form .L { background: #c62828; }

/* Thanh chọn cách xem */
.wc-viewbar { margin: 10px 0 4px; display: flex; align-items: center; gap: 8px; }
.wc-viewbar label { font-weight: 600; color: #555; font-size: 13px; }
.wc-viewbar select {
    padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px;
    background: #fff; font-size: 13px; cursor: pointer; min-width: 230px;
}

/* Lịch thi đấu */
.wc-round-title {
    background: #263238; color: #fff; padding: 9px 12px; margin: 18px 0 0;
    font-size: 14px; font-weight: 700; border-radius: 4px 4px 0 0;
}
.wc-matchlist { border: 1px solid #e0e0e0; border-top: none; }
.wc-match-row {
    display: flex; align-items: center; padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.wc-match-row:hover { background: #fafafa; }
.wc-match-date { width: 132px; font-size: 12px; color: #777; }
.wc-badge {
    display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 3px;
    background: #eceff1; color: #455a64; font-size: 11px; font-weight: 600;
}
.wc-match-teams { flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.wc-match-teams .t { width: 38%; }
.wc-match-teams .home { text-align: right; }
.wc-match-teams .away { text-align: left; }
.wc-match-score {
    min-width: 56px; text-align: center; font-weight: 700; font-size: 15px;
    background: #2e7d32; color: #fff; border-radius: 12px; padding: 3px 10px;
}
.wc-match-score.sched { background: #eee; color: #777; font-size: 12px; font-weight: 600; border-radius: 4px; }
.wc-match-score.live {
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    padding: 3px 8px;
    text-transform: uppercase;
    animation: wcLivePulse 1.5s infinite alternate;
}
@keyframes wcLivePulse {
    from { box-shadow: 0 0 2px rgba(229,57,53,0.4); }
    to { box-shadow: 0 0 10px rgba(229,57,53,1); }
}
.bk-live-badge {
    color: #e53935;
    font-weight: 800;
    animation: wcLiveBlink 1s infinite alternate;
}
@keyframes wcLiveBlink {
    from { opacity: 0.4; }
    to { opacity: 1; }
}
.wc-match-row.live-highlight {
    background: #fff5f5 !important;
    box-shadow: inset 4px 0 0 #e53935;
}
.bk-card.live-highlight {
    border-color: #e53935 !important;
    box-shadow: 0 0 8px rgba(229,57,53,0.3) !important;
}
.wc-score-link { cursor: pointer; text-decoration: none; }
.wc-score-link:hover { filter: brightness(1.08); }

/* ===== Modal kết quả trận đấu ===== */
.wc-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;
    background: rgba(0,0,0,.5); display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 12px; overflow: auto;
}
.wc-modal { background: #fff; width: 720px; max-width: 96%; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.wc-modal-head { background: #c0566b; color: #fff; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 700; }
.wc-modal-close { color: #fff; font-size: 24px; line-height: 1; text-decoration: none; }
.wc-modal-body { padding: 16px 20px 20px; }

/* nội dung popup */
.wc-pp-teams { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 6px; }
.wc-pp-team { display: flex; align-items: center; gap: 12px; width: 38%; font-size: 16px; }
.wc-pp-team.away { justify-content: flex-end; text-align: right; }
.wc-pp-team img { width: 52px; height: auto; border: 1px solid #eee; }
.wc-pp-score { flex: 1; text-align: center; font-size: 34px; font-weight: 800; color: #2e7d32; }
.wc-pp-period { text-align: center; color: #555; font-size: 13px; padding: 8px 0; border-bottom: 1px solid #eee; margin-bottom: 10px; }
.wc-pp-meta { text-align: center; color: #666; font-size: 13px; line-height: 1.9; }
.wc-pp-updating { text-align: center; color: #888; margin: 14px 0; }

/* Timeline diễn biến (vạch dọc ở giữa) */
.wc-tl { position: relative; margin-top: 12px; }
.wc-tl::before { content: ''; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; background: #e6e6e6; transform: translateX(-50%); }
.wc-tl-row { display: flex; align-items: center; padding: 5px 0; }
.wc-tl-side { width: calc(50% - 9px); display: flex; align-items: center; gap: 7px; font-size: 13px; color: #222; }
.wc-tl-side .nm { flex: 1; line-height: 1.3; }
.wc-tl-side.home { text-align: right; }
.wc-tl-side.home .nm { order: 0; } /* icon | name | min */
.wc-tl-side.away { text-align: left; }
.wc-tl-side .ic { flex: 0 0 auto; font-size: 14px; }
.wc-tl-min { flex: 0 0 auto; color: #888; font-size: 12px; white-space: nowrap; }
.wc-tl-dot { flex: 0 0 18px; display: flex; justify-content: center; }
.wc-tl-dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #cfcfcf; box-shadow: 0 0 0 2px #fff; }
.wc-pp-detail { display: block; text-align: center; background: #2f4f9f; color: #fff; padding: 12px; border-radius: 4px; font-weight: 700; text-decoration: none; margin-top: 14px; }
.wc-pp-detail:hover { background: #26408a; }
/* Dòng tỉ số chi tiết xuống hẳn dòng riêng bên dưới, căn giữa */
.wc-match-sub { flex: 0 0 100%; text-align: center; font-size: 11px; color: #888; margin-top: 4px; }
.wc-match-tv { width: 140px; text-align: center; font-size: 11px; }
.wc-tv {
    display: inline-block; padding: 2px 7px; border-radius: 3px;
    background: #e8f5e9; color: #2e7d32; font-weight: 600; white-space: nowrap;
}
.wc-tv i { font-style: normal; }
.wc-match-detail-link { width: auto; min-width: 50px; text-align: right; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.wc-mobile-br { display: none; }
@media (max-width: 640px) {
    .wc-match-tv { display: none; }
    .wc-mobile-br { display: inline; }
    .wc-match-date {
        width: auto;
        min-width: 70px;
        max-width: 90px;
        white-space: normal;
        word-break: break-word;
        flex-shrink: 0;
        font-size: 11px;
    }
    .wc-match-teams .t {
        width: auto;
    }
    .wc-match-detail-link {
        width: auto;
        margin-left: 8px;
    }
}

/* ===== Sơ đồ nhánh đấu (bracket) ===== */
.bk-scroll { overflow-x: auto; padding-bottom: 6px; }
.bk { display: flex; min-width: 1060px; min-height: 1560px; }
.bk-col { display: flex; flex-direction: column; flex: 1; min-width: 206px; padding: 0 14px; }
.bk-col-title {
    text-align: center; font-weight: 700; font-size: 12px; color: #d32f2f;
    padding: 2px 0 10px; text-transform: uppercase;
}
.bk-cells { display: flex; flex-direction: column; flex: 1; }
.bk-cell { flex: 1; display: flex; align-items: center; position: relative; }
.bk-card {
    display: block; width: 100%; background: #fff; border: 1px solid #e2e2ea;
    border-radius: 8px; overflow: hidden; text-decoration: none; font-size: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06); position: relative; z-index: 1;
}
.bk-card:hover { border-color: #d32f2f; box-shadow: 0 2px 8px rgba(211,47,47,.2); }
.bk-head {
    padding: 4px 9px; font-size: 11px; font-weight: 700; color: #d32f2f;
    border-bottom: 1px solid #f0f0f0; letter-spacing: .2px;
}
.bk-team {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 6px 9px; color: #2b2b3a; line-height: 1.3; gap: 6px;
}
.bk-team + .bk-team { border-top: 1px solid #f2f2f5; }
/* Tên/nguồn vào: XUỐNG DÒNG khi quá dài (không cắt chữ) */
.bk-name { display: flex; align-items: flex-start; gap: 7px; min-width: 0; flex: 1; }
.bk-nm { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.bk-flag { width: 18px; height: 13px; object-fit: cover; border: 1px solid #ddd; flex: 0 0 auto; border-radius: 2px; margin-top: 1px; }
.bk-flag-ph { background: #e7e9ef; border-color: #dcdee6; }
.bk-tbd .bk-nm { color: #9aa0ad; font-weight: 600; }
.bk-win { background: #f1f8e9; }
.bk-win .bk-nm { font-weight: 700; }
.bk-score { font-weight: 700; color: #d32f2f; min-width: 14px; text-align: right; flex: 0 0 auto; }

/* ===== Đường nối các nhánh (màu đỏ) =====
   Đường NGANG vẽ trên .bk-cell và chạy xuyên qua thẻ; phần giữa bị thẻ (z-index cao,
   nền trắng) che, nên chỉ lộ 2 đầu trong khe -> tạo "cuống" nối trái/phải.
   Đường DỌC nối từng cặp đặt ở khe phải (nửa dưới cho ô lẻ, nửa trên cho ô chẵn). */
.bk-cell::before {
    content: ''; position: absolute; top: 50%; left: -14px; right: -14px;
    height: 2px; background: #ee7d2e; z-index: 0;
}
.bk-col:first-child .bk-cell::before { left: 50%; }   /* cột đầu: bỏ cuống trái */
.bk-col:last-child  .bk-cell::before { right: 50%; }  /* cột cuối: bỏ cuống phải */
.bk-col:not(:last-child) .bk-cell:nth-child(odd)::after {
    content: ''; position: absolute; right: -14px; top: 50%; height: 50%;
    border-right: 2px solid #ee7d2e; z-index: 0;
}
.bk-col:not(:last-child) .bk-cell:nth-child(even)::after {
    content: ''; position: absolute; right: -14px; top: 0; height: 50%;
    border-right: 2px solid #ee7d2e; z-index: 0;
}
.bk-third { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #ddd; }
.bk-third-title { text-align: center; font-weight: 700; font-size: 12px; color: #455a64; text-transform: uppercase; margin-bottom: 8px; }
.bk-note { text-align: center; color: #888; font-size: 12px; margin-top: 12px; }

/* Chi tiết trận đấu */
.wc-md-head {
    background: linear-gradient(135deg,#b71c1c,#d32f2f); color: #fff;
    padding: 18px; border-radius: 6px; text-align: center;
}
.wc-md-head .teams { display: flex; align-items: center; justify-content: center; gap: 20px; }
.wc-md-head .team { width: 38%; font-size: 16px; font-weight: 700; }
.wc-md-head .team img { display: block; margin: 0 auto 6px; width: 54px; height: auto; }
.wc-md-head .score { font-size: 34px; font-weight: 800; }
.wc-md-head .meta { margin-top: 10px; font-size: 12px; opacity: .9; }
.wc-events { display: flex; margin-top: 16px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
.wc-events .col { flex: 1; padding: 10px; }
.wc-events .col.home { text-align: right; border-right: 1px solid #eee; }
.wc-events .ev { padding: 5px 0; font-size: 13px; }
.wc-events .min { color: #d32f2f; font-weight: 700; }
.wc-ico { font-size: 13px; }

/* Danh sách cầu thủ */
.wc-coach { margin: 4px 0 2px; font-size: 14px; color: #333; background: #f1f8e9; border-left: 4px solid #2e7d32; padding: 8px 12px; border-radius: 3px; }
.wc-squad-pos { background: #263238; color: #fff; padding: 7px 12px; margin: 16px 0 0; font-weight: 700; border-radius: 4px 4px 0 0; }
.wc-squad { width: 100%; border-collapse: collapse; border: 1px solid #e0e0e0; }
.wc-squad th, .wc-squad td { padding: 8px; border-bottom: 1px solid #eee; font-size: 13px; }
.wc-squad th { background: #fafafa; text-align: left; color: #555; }
.wc-squad td.num { text-align: center; width: 40px; color: #777; }
.wc-squad .captain-badge { background: #d32f2f; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-left: 6px; }