.match-card { background:#0f1113; color:#e8edef; border:1px solid rgba(255,255,255,.06); }
  .match-card:hover { transform: translateY(-2px); transition:.2s ease; box-shadow:0 6px 16px rgba(0,0,0,.25); }

  /* name + trạng thái thắng/thua */
  .name-win { font-weight:700; color:#35d399 !important; }
  .name-lose { color:#9aa4ad !important; }
  .avatar-ring { box-shadow:0 0 0 2px #35d399; border-radius:50%; }

  /* score badge */
  .score-badge {
    display:inline-block; min-width:72px; padding:.35rem .75rem; border-radius:999px;
    background:linear-gradient(180deg,#c9def7,#b7e0ff); color:#1b1f23; font-weight:800; letter-spacing:.5px;
  }
  .score-badge.draw { background:linear-gradient(180deg,#ffe69c,#ffd666); color:#1b1f23; }

  /* pills (round / group / date / leg) */
  .pill { border-radius:999px; padding:.2rem .55rem; font-size:.75rem; font-weight:600; }
  .pill-dark { background:#1a1d21; color:#b6c2cc; border:1px solid rgba(255,255,255,.06); }
  .pill-soft { background:#0a6cff1a; color:#9dc4ff; border:1px solid #204bff2b; }
  .pill-outline { background:transparent; color:#cbd5df; border:1px solid #2a3036; }
  .pill-live { background:#e11d48; color:#fff; }
  .legs { color:#9aa4ad; font-size:.85rem; }

  .team--win {
    color: #28a745; /* xanh lá */
    font-weight: bold;
}
.team--draw {
    color: #ffc107; /* vàng */
    font-weight: bold;
}
.score-pill {
    display: inline-block;
    border: 1px solid #666;
    padding: 0.25rem 0.75rem;
}
.score-pill--p1 {
    background: #28a745; 
    color: #fff;
}
.score-pill--p2 {
    background: #dc3545;
    color: #fff;
}
.score-pill--draw {
    background: #ffc107;
    color: #000;
}
.border-thick-win {
    border-width: 4px !important;
    box-shadow: 0 0 12px rgba(25, 135, 84, 0.8);
    border-radius: 50%;
}


/* Ranking styles */

:root {
        --bg: #0b1220;
        --panel: #0f172a;
        --muted: #94a3b8;
        --text: #e5e7eb;
        --line: #1f2937;
        --brand: #22c55e;
        /* green */
        --blue: #3b82f6;
        --amber: #f59e0b;
        --chip: #111827;
    }

    .standings-wrap {
        border-radius: 14px;
        overflow: hidden;
    }

    .tbl-standings {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        color: var(--text);
        background: linear-gradient(180deg, #0f172a, #0b1220 45%);
    }

    /* header */
    .tbl-standings thead th {
        position: sticky;
        top: 0;
        background: #0b1220;
        color: #cbd5e1;
        font-weight: 700;
        letter-spacing: .02em;
        text-align: center;
        padding: .85rem .9rem;
        border-bottom: 1px solid var(--line);
        z-index: 1;
    }

    .tbl-standings thead th.col-team {
        text-align: left;
    }

    .tbl-standings thead th.col-pts {
        text-align: center;
    }

    /* rows */
    .tbl-standings tbody tr {
        transition: background .15s ease, transform .08s ease;
    }

    .tbl-standings tbody tr:hover {
        background: rgba(59, 130, 246, .06);
    }

    .tbl-standings tbody td {
        padding: .9rem .9rem;
        text-align: center;
        border-bottom: 1px solid #0e1628;
    }

    .tbl-standings tbody td.col-team {
        text-align: left;
    }

    /* rank chip */
    .rank-chip {
        min-width: 34px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        color: #fff;
        font-variant-numeric: tabular-nums;
        background: #111827;
        border: 1px solid #2a3344;
        border-radius: 999px;
    }

    /* points pill */
    .pts-pill {
        display: inline-flex;
        min-width: 38px;
        justify-content: center;
        padding: .25rem .55rem;
        font-weight: 800;
        color: #fff;
        background: linear-gradient(135deg, #2563eb, #22c55e);
        border-radius: 999px;
        box-shadow: 0 4px 10px rgba(34, 197, 94, .2);
    }

    /* goal diff coloring */
    .gd.pos {
        color: #22c55e;
    }

    .gd.neg {
        color: #f87171;
    }

    .gd.neu {
        color: #cbd5e1;
    }

    /* top-3 rows */
    .tbl-standings tbody tr.is-top1 {
        background: linear-gradient(90deg, rgba(34, 197, 94, .12), transparent 35%);
        border-left: 4px solid var(--brand);
    }

    .tbl-standings tbody tr.is-top2 {
        background: linear-gradient(90deg, rgba(59, 130, 246, .12), transparent 35%);
        border-left: 4px solid var(--blue);
    }

    .tbl-standings tbody tr.is-top3 {
        background: linear-gradient(90deg, rgba(245, 158, 11, .14), transparent 35%);
        border-left: 4px solid var(--amber);
    }

    /* team cell */
    .team-cell {
        display: flex;
        align-items: center;
        gap: .6rem;
    }

    .team-name {
        font-weight: 700;
    }

    /* columns */
    .col-rank {
        width: 68px;
    }

    .col-team {
        width: 40%;
    }

    .col-pts {
        width: 88px;
    }

    /* zebra for lower rows (after top3) */
    .tbl-standings tbody tr:not(.is-top1):not(.is-top2):not(.is-top3):nth-child(odd) {
        background: rgba(255, 255, 255, .02);
    }

    /* responsive: stack to “cards” on < 768px */
    @media (max-width: 768px) {
        .tbl-standings thead {
            display: none;
        }

        .tbl-standings,
        .tbl-standings tbody,
        .tbl-standings tr,
        .tbl-standings td {
            display: block;
            width: 100%;
        }

        .tbl-standings tbody tr {
            margin: .8rem 0;
            border-radius: 12px;
            padding: .35rem .2rem;
            border: 1px solid #101826;
        }

        .tbl-standings tbody td {
            border: none;
            padding: .45rem .9rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .tbl-standings tbody td::before {
            content: attr(data-th);
            color: var(--muted);
            font-size: .86rem;
            margin-right: 1rem;
        }

        .tbl-standings tbody td.col-team {
            padding-top: .75rem;
            font-size: 1.05rem;
        }

        .tbl-standings tbody td.col-pts {
            padding-bottom: .8rem;
        }

        .col-team,
        .col-pts,
        .col-rank {
            width: auto;
        }
    }

    /* Champion tournament styling */
    .champion-row {
        background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%) !important;
        color: #2d3436 !important;
        box-shadow: 0 2px 8px rgba(253, 203, 110, 0.3);
        position: relative;
    }

    .champion-row:hover {
        background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%) !important;
        transform: translateY(-1px);
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(253, 203, 110, 0.4);
    }

    .champion-row td {
        color: #2d3436 !important;
        font-weight: 600;
        vertical-align: middle;
    }

    .champion-row strong {
        color: #2d3436 !important;
    }

    .text-warning {
        color: #e17055 !important;
    }