/* ═══════════════════════════════════════════════════════════════════════
   custom.css — Bổ sung cho style.css gốc.

   Để riêng file, KHÔNG sửa style.css: giữ nguyên giao diện cũ và có thể
   gỡ bỏ phần thêm mới mà không ảnh hưởng gì.

   Tên class cố ý khác style.css (.fixture-card chứ không .match-card) vì
   .match-card ở đó có `padding: 0 !important` — dùng lại sẽ bị ghi đè và
   thẻ dính sát viền.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Thẻ trận đấu ──────────────────────────────────────────────────── */
.fixture-card {
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    border-color: #e6e9ed !important;
}
.fixture-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    border-color: #c9d3de !important;
    transform: translateY(-1px);
}
/* Logo đội thường là PNG nền trắng, nền xám nhạt giúp chúng không trôi. */
.fixture-card img {
    background: #f7f8fa;
    border-radius: 4px;
    padding: 2px;
}

/* ── Trận tiêu điểm ────────────────────────────────────────────────────
   Điểm neo thị giác của trang chủ. Nền tối tương phản mạnh với lưới thẻ
   trắng bên dưới, nên mắt có chỗ dừng thay vì lướt qua 12 thẻ giống nhau. */
.hero-match {
    background: linear-gradient(135deg, #0b1f3a 0%, #16375e 100%);
    color: #fff;
    border-color: transparent !important;
    transition: box-shadow .2s ease;
}
.hero-match:hover {
    box-shadow: 0 6px 20px rgba(11, 31, 58, .3);
    color: #fff;
}
.hero-match img {
    background: #fff;
    border-radius: 6px;
    padding: 4px;
}

/* ── Thẻ video highlight ───────────────────────────────────────────────
   Thumbnail lớn là thứ duy nhất trên trang có sức hút thị giác thật sự.
   Một trang chỉ có chữ và logo nhỏ thì nhìn như bảng dữ liệu. */
.video-card {
    transition: box-shadow .15s ease, transform .15s ease;
    border-color: #e6e9ed !important;
}
.video-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
}
.video-thumb {
    background: #000;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
.video-card:hover .video-thumb img {
    transform: scale(1.04);
}

/* Nút play — dựng bằng CSS, không cần thêm ảnh/icon font. */
.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    border: 2px solid rgba(255, 255, 255, .9);
    transition: background .15s ease;
}
.video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #fff;
}
.video-card:hover .video-play {
    background: #e63946;
}

/* ── Dải video phụ (trang trận đấu) ────────────────────────────────────
   Cuộn ngang thay vì lưới cố định: crawler lấy về 5 video, lưới 3 cột cắt
   mất 2 cái — lãng phí dữ liệu đã có. Cuộn ngang hiện hết mà không chiếm
   thêm chiều cao trang. */
.video-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.video-strip::-webkit-scrollbar {
    height: 6px;
}
.video-strip::-webkit-scrollbar-thumb {
    background: #ccd3da;
    border-radius: 3px;
}

.video-item {
    flex: 0 0 148px;
    width: 148px;
    padding: 0;
    background: #fff;
    text-align: left;
    scroll-snap-align: start;
    cursor: pointer;
    border-color: #e6e9ed !important;
}
/* Bỏ hiệu ứng nâng lên của .video-card: trong dải cuộn ngang nó làm thẻ
   nhảy lên xuống và có thể kích hoạt thanh cuộn dọc. Dùng đổi viền thay thế. */
.video-item:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    border-color: #c2cad3 !important;
}
.video-item .video-play {
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-width: 2px;
}
.video-item .video-play::after {
    border-width: 5px 0 5px 9px;
}
.video-item-title {
    display: block;
    padding: 6px 7px;
    font-size: 10.5px;
    line-height: 1.35;
    color: #333;
    /* Hai dòng rồi cắt: tiêu đề YouTube rất dài, một dòng không đủ hiểu. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
}

/* Video đang phát — người dùng biết mình đang xem cái nào. */
.video-item.is-playing {
    border-color: #e63946 !important;
    box-shadow: 0 0 0 1px #e63946;
}
.video-item.is-playing .video-play {
    background: #e63946;
}

@media (max-width: 575.98px) {
    .video-item { flex: 0 0 128px; width: 128px; }
}

.video-score {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ── Sidebar bám theo khi cuộn ─────────────────────────────────────────
   Cột trái (video + kết quả) luôn dài hơn sidebar. Để tĩnh thì phần dưới
   bên phải là một mảng trống lớn, trông như trang bị thiếu nội dung.

   position:sticky giữ sidebar trong tầm mắt khi cuộn, nên khoảng trống đó
   không còn nhìn thấy.

   top: 104px = chiều cao header sticky (60px) + nav (~44px). Đặt nhỏ hơn
   thì sidebar chui xuống dưới header khi cuộn lên.

   CHỈ bật từ lg trở lên: trên mobile hai cột xếp chồng nên sticky vô nghĩa
   và còn làm kẹt phần nội dung phía dưới. */
@media (min-width: 992px) {
    /* Bootstrap .row là flex container -> mọi cột mặc định kéo dài bằng
       cột cao nhất (align-items: stretch). Cột đã bị kéo full chiều cao
       thì KHÔNG BAO GIỜ sticky được, vì nó luôn lấp đầy vùng cuộn.
       align-self: flex-start ở dưới trả nó về đúng chiều cao nội dung. */
    .sidebar-sticky {
        position: sticky;
        top: 104px;
        align-self: flex-start;
        /* Sidebar cao hơn màn hình thì tự cuộn riêng, không khoá trang. */
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .sidebar-sticky::-webkit-scrollbar {
        width: 6px;
    }
    .sidebar-sticky::-webkit-scrollbar-thumb {
        background: #d7dde3;
        border-radius: 3px;
    }
}

/* ── Sidebar ───────────────────────────────────────────────────────── */
aside .table th {
    font-weight: 600;
    border-bottom-width: 1px;
}
aside .table td,
aside .table th {
    padding-top: .35rem;
    padding-bottom: .35rem;
}
aside img {
    background: #f7f8fa;
    border-radius: 3px;
}
aside .list-group-item {
    border-color: #f0f2f4;
}

/* ── Ô giải đấu ────────────────────────────────────────────────────── */
.league-tile {
    transition: box-shadow .15s ease, border-color .15s ease;
    border-color: #e6e9ed !important;
}
.league-tile:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    border-color: #c9d3de !important;
}
.league-tile img {
    background: #f7f8fa;
    border-radius: 4px;
    padding: 2px;
}

/* ── Tiêu đề mục ───────────────────────────────────────────────────── */
main h2.h6 {
    position: relative;
    padding-left: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 13px !important;
}
main h2.h6::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 2px;
    background: #e63946;
}

/* ── Trang trận đấu ────────────────────────────────────────────────── */

/* Bảng tỉ số: nền tối làm điểm neo, giống hero ở trang chủ. */
.match-hero {
    background: linear-gradient(135deg, #0b1f3a 0%, #16375e 100%);
    color: #fff;
    border-color: transparent !important;
}
.match-hero img {
    background: #fff;
    border-radius: 6px;
    padding: 4px;
}

/* Bài tường thuật — phần văn bản duy nhất do site viết ra.
   Chữ to hơn và giãn dòng rộng hơn phần số liệu vì đây là nội dung để ĐỌC. */
.match-report p {
    color: #2b3138;
}

/* Chip số liệu nổi bật dưới bài tường thuật */
.key-fact {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    background: #f6f8fa;
    border: 1px solid #e6e9ed;
    border-radius: 5px;
    padding: 4px 9px;
}
.key-fact-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #7a828c;
}
.key-fact-value {
    font-size: 12.5px;
    font-weight: 700;
    color: #22262b;
}

/* Cầu thủ hay nhất trận — điểm dừng mắt của trang.
   Các site tỉ số có dữ liệu này nhưng chôn trong bảng 20 dòng; ta đưa lên. */
.mvp-card {
    background: linear-gradient(135deg, #fffdf5 0%, #fff 60%);
    border-color: #f0e2b6 !important;
}
.mvp-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #b8860b;
}
.mvp-rating {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e8a317 0%, #d4881a 100%);
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mvp-mini {
    flex: 0 0 28px;
    width: 28px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #7a5c00;
    background: #fdf3d8;
    border-radius: 4px;
    padding: 1px 0;
}

/* Mũi tên thay người */
.sub-arrow {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}
.sub-on  { color: #2f9e44; }
.sub-off { color: #e03131; }

/* Thanh so sánh thống kê — nhìn ra đội trội hơn nhanh hơn đọc số. */
.stat-bar {
    height: 5px;
    border-radius: 3px;
    background: #e9edf1;   /* phần của đội khách */
    overflow: hidden;
}
.stat-bar > span {
    display: block;
    height: 100%;
    background: #0d6efd;   /* phần của đội nhà */
    border-radius: 3px;
}

/* ── Sơ đồ đội hình trên sân ───────────────────────────────────────────
   Vẽ hoàn toàn bằng CSS: không ảnh nền, không JavaScript, không thêm
   request nào. Sọc cỏ dựng bằng repeating-linear-gradient — trình duyệt
   render gần như tức thì, không ảnh hưởng thời gian tải. */
.pitch-wrap {
    padding: 12px;
    border-bottom: 1px solid #eceff2;
}
.pitch-team {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}
.pitch {
    position: relative;
    background:
        repeating-linear-gradient(
            to bottom,
            #2d7a4a 0,
            #2d7a4a 26px,
            #297043 26px,
            #297043 52px
        );
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Vạch giữa sân */
.pitch::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, .25);
}
.pitch-row {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    z-index: 1;
}
.pitch-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    max-width: 25%;
}
.pitch-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: #1c2b3a;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    border: 2px solid transparent;
}

/* ── Màu theo vị trí thi đấu ───────────────────────────────────────────
   11 vòng tròn trắng giống hệt nhau thì người mới xem không biết ai hậu vệ,
   ai tiền đạo. Màu theo tuyến giải quyết việc đó ngay từ cái nhìn đầu.

   Chọn màu vừa tương phản tốt trên nền cỏ xanh, vừa phân biệt được với
   người mù màu đỏ-lục: vàng / trắng-xanh / cam là ba hướng khác nhau trên
   phổ màu, không chỉ khác sắc độ. */
.pitch-num.pos-GK {
    background: #ffd43b;          /* vàng — thủ môn mặc áo khác đội */
    color: #4a3500;
    border-color: #f0b400;
}
.pitch-num.pos-DF {
    background: #e7f0fb;          /* xanh nhạt */
    color: #123a63;
    border-color: #74a9e0;
}
.pitch-num.pos-MF {
    background: #fff;             /* trắng */
    color: #1c2b3a;
    border-color: #cfd6dd;
}
.pitch-num.pos-FW {
    background: #ff8f4d;          /* cam — tuyến ghi bàn, nổi nhất */
    color: #4a1c00;
    border-color: #e56a1f;
}

/* Chấm màu trong phần chú thích */
.pos-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid transparent;
    flex: 0 0 11px;
}
.pos-dot.pos-GK { background: #ffd43b; border-color: #f0b400; }
.pos-dot.pos-DF { background: #e7f0fb; border-color: #74a9e0; }
.pos-dot.pos-MF { background: #fff;    border-color: #cfd6dd; }
.pos-dot.pos-FW { background: #ff8f4d; border-color: #e56a1f; }
.pitch-name {
    font-size: 9.5px;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

@media (max-width: 575.98px) {
    .pitch-name { font-size: 8.5px; max-width: 56px; }
    .pitch-num  { width: 21px; height: 21px; font-size: 10px; }
}

/* Ô cầu thủ trên sơ đồ khi có link — giữ nguyên hình dáng của thẻ div. */
a.pitch-player {
    text-decoration: none;
    transition: transform .12s ease;
}
a.pitch-player:hover {
    transform: scale(1.08);
}
/* Hover: KHÔNG đổi màu nền — nền đang mang ý nghĩa vị trí, đổi sẽ làm
   người dùng tưởng cầu thủ đổi tuyến. Dùng viền sáng để báo tương tác. */
a.pitch-player:hover .pitch-num {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .45), 0 1px 3px rgba(0, 0, 0, .3);
}

/* Ảnh cầu thủ trên trang hồ sơ */
.player-photo {
    border-radius: 8px;
    object-fit: cover;
    background: #fff;
    flex: 0 0 82px;
}

/* Ô chỉ số mùa giải */
.stat-tile-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: #1c2b3a;
}
.stat-tile-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #7a828c;
    margin-top: 4px;
}

/* Số áo cầu thủ */
.lineup-num {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #566;
    background: #f1f3f5;
    border-radius: 3px;
    padding: 1px 4px;
    flex: 0 0 auto;
}

/* Dải phong độ W/D/L — người xem bóng đá đọc được trong một giây,
   nhanh hơn nhiều so với nhìn danh sách tỉ số. */
.form-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    flex: 0 0 20px;
}
.form-W { background: #2f9e44; }
.form-D { background: #868e96; }
.form-L { background: #e03131; }
.form-N { background: #dee2e6; color: #868e96; }

/* Cán cân đối đầu */
.h2h-bar {
    display: flex;
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    background: #e9edf1;
}
.h2h-bar > span { display: block; height: 100%; }
.h2h-home { background: #1971c2; }
.h2h-draw { background: #ced4da; }
.h2h-away { background: #e8590c; }

/* Logo đội trên bảng tỉ số có link — giữ nguyên màu trắng khi hover. */
.match-hero a:hover { color: #fff; opacity: .88; }

/* Thẻ vàng / thẻ đỏ */
.card-chip {
    display: inline-block;
    width: 9px;
    height: 13px;
    border-radius: 2px;
    flex: 0 0 auto;
}
.card-yellow { background: #f4c430; }
.card-red    { background: #e03131; }

/* ── Matchday Guide (trang Hub sân) ────────────────────────────────── */

/* Nút nhảy nhanh tới từng nhóm tiện ích, đặt trên nền tối của hero. */
.guide-jump {
    display: inline-block;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    text-decoration: none;
    transition: background .15s ease;
}
.guide-jump:hover {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Lời khuyên rút từ dữ liệu — phần "biết điều gì đó" mà site tỉ số không có. */
.guide-tip {
    position: relative;
    padding: 8px 10px 8px 30px;
    margin-bottom: 6px;
    background: #fff8e6;
    border: 1px solid #f5e3b3;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.55;
    color: #5c4a12;
}
.guide-tip::before {
    content: "!";
    position: absolute;
    left: 10px;
    top: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e8a317;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

/* Dải phân nhóm theo khoảng cách */
.band-header {
    background: #f6f8fa;
    border-bottom: 1px solid #eceff2;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #7a828c;
}

.venue-attribution {
    font-size: 12px;
    color: #8a9099;
    margin-top: 18px;
}

/* ── Khối tiện ích trên trang trận đấu ─────────────────────────────── */
.venue-teaser {
    border-color: #e6e9ed !important;
    background: linear-gradient(180deg, #fbfcfd 0%, #fff 100%);
}

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .fixture-card {
        padding: 12px !important;
    }
    /* Tên đội dài làm vỡ layout trên máy nhỏ. */
    .fixture-card .fw-semibold {
        font-size: 13px !important;
    }
}

/* Ghi chú bản quyền dưới khối video — bắt buộc với site nhúng video
   bên thứ ba. Cố ý để nhỏ và nhạt: cần có mặt, không cần hút mắt. */
.video-disclaimer {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 11px;
    line-height: 1.5;
    color: #8a9099;
}
.video-disclaimer a {
    color: #6c757d;
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════
   DANH SÁCH TRẬN DẠNG HÀNG  (trang giải / quốc gia / đội)
   ──────────────────────────────────────────────────────────────────────
   Trước đây chỉ là một dòng chữ "Colwyn Bay vs Connahs Q." trong
   .list-group, không logo — trông như bản nháp, trong khi bảng xếp hạng
   ngay phía trên lại đầy đủ logo.

   Bố cục: [ngày] [đội nhà →] [tỉ số] [← đội khách]
   Tỉ số nằm giữa với chiều rộng CỐ ĐỊNH nên thẳng hàng theo chiều dọc —
   người đọc quét mắt xuống cột giữa là thấy hết kết quả.
   ══════════════════════════════════════════════════════════════════════ */
.match-row-list > .match-row + .match-row {
    border-top: 1px solid #edf0f3;
}

.match-row {
    padding: 10px 14px;
    gap: 10px;
    transition: background-color .12s ease;
}
a.match-row:hover {
    background: #f7f9fc;
}

/* Ngày + tên giải. Rộng cố định để các cột sau thẳng hàng. */
.match-row-meta {
    flex: 0 0 92px;
    min-width: 0;
}
.match-row-date {
    font-size: 11px;
    line-height: 1.3;
    color: #8a9099;
    white-space: nowrap;
}
.match-row-league {
    font-size: 10px;
    line-height: 1.3;
    color: #a8aeb6;
}

/* Hai cột đội chia đều phần còn lại. min-width:0 là bắt buộc, thiếu nó
   thì text-truncate không hoạt động trong flex. */
.match-row-team {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}
.match-row-team-home {
    justify-content: flex-end;   /* đội nhà dồn về phía tỉ số */
}
.match-row-team-away {
    justify-content: flex-start;
}
.match-row-name {
    font-size: 13.5px;
    font-weight: 500;
    color: #212529;
}
/* Đội thắng in đậm — thấy kết quả mà không cần đọc tỉ số. */
.match-row-team.is-winner .match-row-name {
    font-weight: 700;
}

.match-row-score {
    flex: 0 0 58px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #212529;
    white-space: nowrap;
}
/* Trận chưa đá hiện giờ thi đấu, không phải tỉ số — nhạt hơn để phân biệt. */
.match-row-score.is-upcoming {
    font-size: 12px;
    font-weight: 600;
    color: #8a9099;
}

/* Logo mặc định khi đội không có huy hiệu (6% số trận, chủ yếu giải nghiệp
   dư) hoặc khi ảnh gốc chết. Làm nhạt đi để không tranh sự chú ý với logo
   thật ở các dòng bên cạnh — nó là chỗ giữ nhịp, không phải thông tin. */
.match-card-badge.is-default {
    opacity: .55;
}

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .match-row {
        padding: 9px 10px;
        gap: 7px;
    }
    /* Ngày xuống dòng thay vì chiếm cột riêng — màn hẹp cần chỗ cho tên đội. */
    .match-row-meta {
        flex: 0 0 52px;
    }
    .match-row-name {
        font-size: 12.5px;
    }
    .match-row-score {
        flex: 0 0 46px;
        font-size: 14px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   ẢNH SÂN VẬN ĐỘNG  (Wikimedia Commons)
   ──────────────────────────────────────────────────────────────────────
   Trang Hub trước đây là 1.217 từ văn bản với đúng 2 ảnh, cả hai đều là
   logo giao diện. Ảnh thật là thứ khiến người chưa biết sân chịu ở lại.

   Ghi công tác giả + giấy phép là yêu cầu BẮT BUỘC của CC BY-SA. Phần
   caption cố ý nhỏ và nhạt: phải có mặt, không cần hút mắt.
   ══════════════════════════════════════════════════════════════════════ */
.venue-hero {
    margin: 0;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #eef1f5;
}
.venue-hero img {
    display: block;
    width: 100%;
    /* Tỉ lệ cố định: ảnh Commons đủ mọi khung hình, để nguyên sẽ làm trang
       nhảy bố cục khi tải (CLS). object-fit cắt phần thừa thay vì bóp méo. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.venue-hero figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px 14px 8px;
    /* Nền chuyển dần: chữ trắng phải đọc được kể cả trên ảnh nền sáng. */
    background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
    color: #fff;
    font-size: 11px;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
}
.venue-photo-descr { font-weight: 500; }
.venue-photo-credit { opacity: .82; }
.venue-hero figcaption a { color: #fff; text-decoration: underline; }

/* ── Dữ kiện sân (sức chứa, năm mở, kiến trúc sư) ──────────────────── */
.venue-fact-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
}
.venue-fact-value {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

/* ── Thư viện ảnh ─────────────────────────────────────────────────── */
.venue-gallery {
    display: grid;
    /* auto-fill + minmax: số cột tự co theo bề ngang, không cần media query
       riêng cho từng khổ màn hình. */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.venue-shot { margin: 0; }
.venue-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    background: #eef1f5;
    transition: opacity .12s ease;
}
.venue-shot a:hover img { opacity: .88; }
.venue-shot figcaption {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.4;
    color: #8a9099;
}
.venue-shot figcaption a { color: #8a9099; text-decoration: underline; }

.venue-gallery-note {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.5;
    color: #8a9099;
}

@media (max-width: 575.98px) {
    .venue-hero figcaption { font-size: 10px; padding: 14px 10px 7px; }
    .venue-gallery { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════
   BREADCRUMB
   ──────────────────────────────────────────────────────────────────────
   Tên class .breadcrumb-nav chứ không dùng .breadcrumb của Bootstrap:
   class đó có sẵn background xám, padding và dấu "/" cứng qua
   --bs-breadcrumb-divider — ghi đè hết thì chẳng còn gì của nó.

   Dấu phân cách vẽ bằng ::before nên KHÔNG nằm trong DOM: người dùng bôi
   đen copy đường dẫn sẽ không dính ký tự thừa, và trình đọc màn hình
   không đọc "lớn hơn" giữa mỗi mục.
   ══════════════════════════════════════════════════════════════════════ */
.breadcrumb-nav {
    margin-bottom: 14px;
}
.breadcrumb-nav ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    line-height: 1.5;
}
.breadcrumb-nav li {
    display: flex;
    align-items: center;
    min-width: 0;
}
.breadcrumb-nav li + li::before {
    content: "\203A";        /* › — cân đối hơn ">" ở cỡ chữ nhỏ */
    margin: 0 7px;
    color: #b8c0c9;
    font-size: 13px;
    line-height: 1;
    /* Dấu này là trang trí thuần tuý; đánh dấu để trình đọc màn hình bỏ qua. */
    speak: none;
}
.breadcrumb-nav a {
    color: #5a6672;
    text-decoration: none;
    /* Tên giải/sân có thể rất dài — cắt thay vì đẩy vỡ hàng. */
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .12s ease;
}
.breadcrumb-nav a:hover {
    color: #0b1f3a;
    text-decoration: underline;
}
/* Mục cuối = trang hiện tại: đậm hơn, không phải link. */
.breadcrumb-nav li[aria-current="page"] span {
    color: #1a2430;
    font-weight: 600;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .breadcrumb-nav ol { font-size: 11.5px; }
    .breadcrumb-nav li + li::before { margin: 0 5px; }
    .breadcrumb-nav a { max-width: 130px; }
    .breadcrumb-nav li[aria-current="page"] span { max-width: 180px; }
}