* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background-color: #0d0d0d;
    color: #ffffff;
}

/* NAVBAR */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    padding: 15px 40px;
    border-bottom: 2px solid #ffcc00;
}

.logo {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    font-style: italic;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: #888;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

.nav-links a.active, .nav-links a:hover {
    color: #ffcc00;
}

.login-btn {
    background: transparent;
    border: 1px solid #555;
    color: #aaa;
    padding: 6px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

/* LAYOUT CONTAINER (Ép buộc 2 cột nằm ngang) */
.container {
    display: flex;
    flex-direction: row; 
    max-width: 1200px;
    margin: 30px auto;
    gap: 30px;
    align-items: flex-start;
}

/* SIDEBAR */
.sidebar {
    width: 250px;
    flex-shrink: 0; /* Khóa chết chiều rộng, không cho méo */
}

.sidebar h3 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-style: italic;
}

.mt-20 {
    margin-top: 30px;
}

.stages {
    list-style: none;
}

.stages li {
    padding: 12px 15px;
    background-color: transparent; 
    border: 1px solid #333;
    border-left: 3px solid transparent;
    color: #888;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: -1px; 
}

.stages li small {
    font-weight: normal;
    font-size: 11px;
    color: #666;
    display: block;
    margin-top: 3px;
}

.stages li.active {
    border-left: 3px solid #ffcc00;
    color: #fff;
    background-color: #1a1a1a;
}

/* MAIN CONTENT TABLE */
.content {
    flex: 1; 
    width: 100%;
}

.table-wrapper {
    background-color: #1a1a1a;
    border: 1px solid #333;
}

/* Chia tỷ lệ các cột cho đều chữ */
.col-time { width: 120px; text-align: center; }
.col-match { width: 150px; text-align: center; }
.col-status { width: 150px; text-align: center; }
.col-booyah { flex: 1; text-align: left; padding-left: 40px; }
.col-stats { width: 120px; text-align: center; }

.table-header {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #333;
    color: #888;
    font-size: 12px;
    font-weight: bold;
    background-color: #000;
}

/* TIÊU ĐỀ NGÀY GIỜ (Căn chỉnh chuẩn theo ảnh Garena gốc) */
.date-header {
    background-color: #252525;
    padding: 12px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333;
}

.date-header .date-text {
    color: #fff; /* Thời gian màu trắng */
    font-size: 13px;
    font-weight: bold;
}

.date-header .highlight-text {
    color: #ffcc00; /* Tên giải màu vàng */
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 20px;
}

/* DANH SÁCH TRẬN */
.match-item {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #333;
    font-size: 13px;
    color: #ccc;
    align-items: center; 
}

.match-item:hover {
    background-color: #222;
}

.status-completed { color: #aaa; }
.status-upcoming { color: #ffb800; }

.team-booyah { 
    display: flex;
    gap: 10px;
    align-items: center; 
    font-weight: bold;
    color: #fff; 
}

.team-booyah img { 
    width: 25px;
    height: 25px;
    object-fit: contain;
    border-radius: 4px;
}

.btn-stats {
    background: transparent;
    border: 1px solid #555;
    color: #888;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 11px;
    cursor: pointer;
    font-weight: bold;
}

.btn-stats:hover {
    border-color: #ffcc00;
    color: #ffcc00;
}

/* ================= BẢNG POPUP VÀ LƯỚI GARENA (FULL CHUẨN) ================= */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #050505; z-index: 9999; overflow-y: auto; }
.btn-back-top { position: absolute; top: 30px; left: 40px; background: transparent; border: 1px solid #555; color: #aaa; padding: 8px 20px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; }
.btn-back-top:hover { color: #fff; border-color: #ffcc00; }
.modal-content { width: 90%; max-width: 1000px; margin: 40px auto; padding-top: 30px; }
.modal-header { text-align: center; margin-bottom: 30px; }
.modal-title { color: #ffcc00; font-size: 24px; font-weight: bold; text-transform: uppercase;}
.modal-title .text-white { color: #fff; }

/* Khung thông tin trận đấu */
.match-info-banner { display: flex; justify-content: space-between; align-items: center; background-color: #1a1a1a; border-top: 3px solid #ffcc00; padding: 20px 50px; margin-bottom: 0; }
.info-box { text-align: center; }
.time-box .label { color: #fff; font-size: 13px; margin-bottom: 5px; }
.time-box .date { color: #aaa; font-size: 15px; font-weight: bold; margin-bottom: 5px;}
.time-box .time { color: #ffcc00; font-size: 32px; font-weight: bold; }
.booyah-box .booyah-text { color: #ffcc00; font-style: italic; font-size: 24px; margin-bottom: 10px; font-weight: 900;}
.booyah-box img { width: 50px; height: 50px; object-fit: contain; }
.booyah-box .winner-name { color: #888; font-size: 12px; margin-top: 5px; text-transform: uppercase; }
.nav-box { display: flex; align-items: center; gap: 15px; }
.arrow-btn { background: transparent; border: 1px solid #555; color: #aaa; padding: 5px 10px; cursor: pointer;}
.arrow-btn:hover { border-color: #ffcc00; color: #ffcc00; }
.match-number { color: #fff; font-weight: bold; font-size: 16px;}

/* ================= LƯỚI BẢNG ĐIỂM (GRID TABLE) ================= */
.grid-table { display: grid; grid-template-columns: 8% 20% 14% 14% 10% 18% 8% 8%; background-color: #151515; border: 1px solid #333; max-height: 400px; overflow-y: auto; }
.grid-table::-webkit-scrollbar { width: 6px; }
.grid-table::-webkit-scrollbar-track { background: #111; }
.grid-table::-webkit-scrollbar-thumb { background: #ffcc00; border-radius: 10px; }

.g-header { background-color: #1a1a1a; color: #888; font-weight: bold; font-size: 11px; padding: 15px 5px; display: flex; align-items: center; justify-content: center; border-bottom: 2px solid #333; position: sticky; top: 0; z-index: 10; text-transform: uppercase; }
.g-cell { color: #ccc; font-size: 13px; padding: 12px 5px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #222; }
.g-header.text-left, .g-cell.text-left { justify-content: flex-start; padding-left: 20px; }

/* Các lệnh gộp dòng */
.span-4 { grid-row: span 4; border-bottom: 1px solid #555; }
.col-tong-diem { background-color: #222; }
.tong-diem-val { background-color: #222; color: #ffcc00; font-weight: bold; font-size: 14px; }
.p-row-last { border-bottom: 1px solid #555; }
.team-name-cell { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: bold; }
.team-name-cell img { width: 20px; height: 20px; border-radius: 3px; }
/* ================= TRANG ĐỘI TUYỂN (TEAM PAGE) ================= */
.team-page-wrapper {
    display: flex; flex-direction: column; width: 100%;
}

/* 1. Chọn Đội (Top) */
.team-selector-section {
    display: flex; align-items: center; justify-content: center;
    background-color: #222; padding: 20px; border-radius: 4px 4px 0 0;
    gap: 15px; border-bottom: 2px solid #333;
}
.team-grid-12 {
    display: flex; gap: 15px; overflow-x: auto; scrollbar-width: none;
}
.t-icon {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    cursor: pointer; opacity: 0.5; transition: 0.3s;
}
.t-icon:hover, .t-icon.active { opacity: 1; }
.t-icon img {
    width: 60px; height: 60px; object-fit: contain;
    background: #111; border: 1px solid #444; border-radius: 5px;
    padding: 5px;
}
.t-icon.active img { border-color: #ffcc00; }
.t-icon span { color: #fff; font-size: 11px; font-weight: bold; }

/* 2. Banner Thông tin (Middle) */
.team-info-banner {
    display: flex; align-items: center; gap: 30px;
    background-color: #252525; padding: 30px 40px;
}
.big-logo-box img {
    width: 120px; height: 120px; background: #fff;
    padding: 10px; border-radius: 5px;
}
.team-desc-box h2 { color: #ffcc00; font-size: 24px; margin-bottom: 10px; text-transform: uppercase;}
.team-desc-box p { color: #ccc; font-size: 14px; line-height: 1.6; max-width: 600px; }

/* 3. Lưới Tuyển Thủ (Bottom) */
.players-grid {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
    background-color: #151515; padding: 40px 20px; border-radius: 0 0 4px 4px;
}

/* THẺ TUYỂN THỦ CẮT GÓC (ESPORTS STYLE) */
.player-card {
    width: calc(33.333% - 20px); min-width: 250px;
    background-color: #1a1a1a; position: relative;
    /* Lệnh cắt 2 góc trên y hệt Garena */
    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%, 0 15px);
    border-bottom: 3px solid #ffcc00; 
    display: flex; flex-direction: column; align-items: center;
    transition: 0.3s; cursor: pointer;
}
.player-card:hover { transform: translateY(-5px); background-color: #222;}

/* Tam giác vàng góc trái trên */
.player-card::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 20px; height: 20px; background: #ffcc00;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ================= 1. TRẢ LẠI ẢNH FULL THẺ GAME NHƯ CŨ ================= */
.p-avatar {
    width: 100% !important;
    height: 100% !important; 
    min-height: 280px !important; /* Kéo giãn ảnh ra cho bằng với hồ sơ game gốc */
    object-fit: cover !important; /* Lấp đầy toàn bộ khung mà không bị méo */
    object-position: center top !important; /* Ưu tiên hiển thị phần nóc ảnh (chỗ có logo) */
    display: block !important;
    margin: 0 !important;
}

/* ================= CANH SÁT LỀ PHẢI & LÙI XUỐNG NÉ CHỮ CÓ SẴN ================= */
.p-info-top {
    position: absolute !important;
    top: 25px !important;      /* 🚨 Chìa khóa đây: Tăng lên 25px để cả cụm chữ tụt xuống 1 dòng */
    right: 5px !important;     /* Vẫn ép sát rịt vào khung viền bên phải */
    margin: 0 !important;      
    padding: 0 !important;     
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    z-index: 999 !important;   
}
/* Chữ Tên Vàng */
.p-name { 
    color: #ffaa00 !important;
    font-size: 15px !important; 
    font-weight: bold !important; 
    text-transform: uppercase !important; 
    margin-bottom: 3px !important; /* Khoảng cách nhỏ giữa tên và role */
    text-shadow: 2px 2px 4px #000, -1px -1px 2px #000 !important; /* Viền đen dày để chữ nổi bần bật */
    line-height: 1 !important;
}

/* Chữ Role Xanh Lá (Nằm ngay dưới Tên) */
.p-tag { 
    color: #00FF00 !important; 
    font-size: 12px !important; 
    font-weight: 800 !important; 
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0px 0px 4px #00FF00 !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* ================= TÌM VÀ SỬA ĐOẠN NÀY TRONG STYLE.CSS ================= */
.btn-xem-them {
    position: absolute;
    bottom: 10px;
    right: 15px; /* Canh lề phải 15px */
    left: 15px;  /* THÊM LỆNH NÀY: Canh luôn lề trái 15px để ép chữ nằm trong khung */
    text-align: right; /* Ép chữ phải dồn về bên phải */
    color: #888;
    font-size: 11px;
    font-weight: bold;
}
.btn-xem-them .arrow { color: #ffcc00; margin-left: 5px; font-size: 10px;}
/* ================= TRANG ĐỘI TUYỂN (TEAM PAGE) ================= */
.team-page-wrapper { display: flex; flex-direction: column; width: 100%; }

/* 1. Chọn 12 Đội (2 Hàng x 6 Cột) */
.team-selector-section {
    display: flex; align-items: center; justify-content: center;
    background-color: #222; padding: 30px; border-radius: 4px 4px 0 0;
    gap: 20px; border-bottom: 2px solid #333;
}
.team-grid-12 {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Ép chia đúng 6 cột */
    gap: 20px 30px; /* Khoảng cách dọc 20px, ngang 30px */
    justify-items: center;
}
.t-icon {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    cursor: pointer; opacity: 0.4; transition: 0.3s;
}
.t-icon:hover, .t-icon.active { opacity: 1; }
.t-icon img {
    width: 65px; height: 65px; object-fit: contain;
    background: #fff; border: 2px solid transparent; border-radius: 5px;
    padding: 5px;
}
.t-icon.active img { border-color: #ffcc00; }
.t-icon span { color: #fff; font-size: 12px; font-weight: bold; }

/* 2. Banner Thông tin */
.team-info-banner {
    display: flex; align-items: center; gap: 30px;
    background-color: #2a2a2a; padding: 30px 50px;
}
.big-logo-box img { width: 120px; height: 120px; background: #fff; padding: 10px; border-radius: 5px; }
.team-desc-box h2 { color: #ffcc00; font-size: 24px; margin-bottom: 10px; text-transform: uppercase;}
.team-desc-box p { color: #ccc; font-size: 14px; line-height: 1.6; max-width: 600px; }

/* 3. Lưới Tuyển Thủ */
.players-grid {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
    background-color: #151515; padding: 40px 20px; border-radius: 0 0 4px 4px;
}

/* Thẻ cầu thủ cắt góc */
.player-card {
    width: calc(33.333% - 20px); min-width: 230px;
    background-color: #1a1a1a; position: relative;
    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%, 0 15px);
    border-bottom: 3px solid #ffcc00; 
    display: flex; flex-direction: column; align-items: center;
    transition: 0.3s; cursor: pointer;
}
.player-card:hover { transform: translateY(-5px); background-color: #222;}
.player-card::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 20px; height: 20px; background: #ffcc00;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.p-info-top { width: 100%; display: flex; flex-direction: column; align-items: flex-end; padding: 15px 20px 0 0; z-index: 2; }
.p-name { color: #fff; font-size: 15px; font-weight: bold; text-transform: uppercase; }
.p-tag { color: #888; font-size: 11px; margin-top: 3px; border: 1px solid #555; padding: 2px 5px; border-radius: 3px;}
.p-avatar { width: 100%; height: 220px; object-fit: contain; object-position: bottom; margin-top: -30px; z-index: 1; }
.btn-xem-them { position: absolute; bottom: 10px; right: 15px; color: #888; font-size: 11px; font-weight: bold; }
.btn-xem-them .arrow { color: #ffcc00; margin-left: 5px; font-size: 10px;}
/* Lưới 8 đội cho giải CUS */
.team-grid-8 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 cột (4 logo 1 hàng) */
    gap: 15px;
    justify-content: center;
    margin: 20px auto;
    max-width: 400px; /* Ép độ rộng để nó rớt xuống 2 hàng cho đẹp */
}
/* ================= 1. CĂN CHỈNH LOGO & TÊN ================= */
.small-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 3px;
}

.short-name {
    font-weight: bold;
    color: #fff;
}

/* ================= 2. BẢN QUYỀN GÓC TRÁI ================= */
.footer-copyright {
    position: fixed;
    bottom: 15px;
    left: 20px;
    color: #666;
    font-size: 12px;
    line-height: 1.6;
    z-index: 1000;
    pointer-events: none;
}

.footer-copyright .eng-text {
    font-size: 11px;
    font-style: italic;
    color: #555;
}

/* ================= 3. THIẾT KẾ KHUNG GARENA CHUẨN MỰC ================= */
/* Ép Khung Lưới Chống Vỡ */
#data-bang-diem {
    display: grid !important;
    grid-template-columns: 60px 140px 120px 120px 100px 1fr 80px 100px !important;
    gap: 0 !important;
    background-color: transparent !important;
}

/* Ép tất cả các ô đổ màu nền sậm Garena, Tiêu diệt vạch ngang */
#data-bang-diem .g-cell {
    border: none !important;
    background-color: #1a1a1a !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Định dạng Khối 5 Cột Bên Trái (Hạng, Đội, Điểm) */
.span-4-row {
    grid-row: span 4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 4px solid #000 !important; /* Ranh giới chia đội */
}

/* Căn trái cho tên đội và tạo khoảng cách với logo */
.span-4-row.team-name-cell {
    justify-content: flex-start;
    gap: 10px; 
}

/* Khối Đen Tổng Điểm & Số Vàng */
.span-4-row.cot-xam-garena {
    background-color: #0d0d0d !important;
    color: #ffcc00 !important;
    font-size: 18px !important;
    font-weight: bold;
}

/* Định dạng 3 Cột Người Chơi Bên Phải */
.player-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    color: #ccc;
}
.player-cell.text-left {
    justify-content: flex-start;
    padding-left: 10px;
}
.player-cell.p-row-last {
    border-bottom: 4px solid #000 !important;
}

/* Chống vỡ giao diện trên Điện Thoại */
#modal-thong-so {
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch;
}
#data-bang-diem {
    min-width: 800px !important; 
}
/* ================= TÚT LẠI KHUNG VIỀN & HEADER CHUẨN GARENA ================= */

/* 1. Lên màu cho hàng Tiêu Đề (Header) */
#data-bang-diem .g-header {
    background-color: #1f1f1f !important; /* Xám sáng hơn nền để tách biệt khối */
    color: #888888 !important; /* Chữ màu xám lông chuột chuyên nghiệp */
    font-size: 13px !important;
    font-weight: bold;
    text-transform: uppercase;
    padding: 16px 0 !important;
    border-bottom: 3px solid #000000 !important; /* Vạch đen dày chốt dưới header */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Căn trái Tiêu đề "Đội" và "Người chơi" cho thẳng tắp với dữ liệu bên dưới */
#data-bang-diem .g-header:nth-child(2),
#data-bang-diem .g-header:nth-child(6) {
    justify-content: flex-start !important;
    padding-left: 10px !important;
}

/* 3. Viền bao quanh Bảng điểm cho cứng cáp (Tạo cảm giác đóng khung) */
#data-bang-diem {
    border-left: 1px solid #222 !important;
    border-right: 1px solid #222 !important;
    border-bottom: 1px solid #222 !important;
}

/* 4. Chỉnh màu chữ Tuyển thủ cho dịu mắt đúng chuẩn */
.player-cell {
    color: #cccccc !important; 
}

/* 5. Phép thuật biến Thanh cuộn thô kệch thành chuẩn eSports */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #ffcc00; /* Thanh cuộn màu vàng xịn xò */
    border-radius: 2px;
}
/* ================= VIỀN KẺ RÀNH MẠCH CHUẨN GARENA 100% ================= */

/* 1. Kẻ vạch ngang mỏng màu xám mờ cho tất cả các ô (Chia đội và chia từng người chơi) */
div#data-bang-diem div.g-cell,
div#data-bang-diem div.g-header {
    border: none !important; /* Xóa sạch các viền tạp nham */
    border-bottom: 1px solid #2a2a2a !important; /* Vạch xám mờ tinh tế chuẩn Garena */
}

/* 2. Đóng khung viền bao quanh toàn bộ bảng */
div#data-bang-diem {
    border: 1px solid #2a2a2a !important;
    border-bottom: none !important; /* Chống bị viền đôi ở dưới cùng đáy bảng */
}
/* ================= TINH CHỈNH ALIGN & CỘT TỔNG ĐIỂM FULL XÁM ================= */

/* 1. Kéo chữ "NGƯỜI CHƠI" ra giữa cho gần lại với "HẠ GỤC" */
#data-bang-diem .g-header:nth-child(6) {
    justify-content: center !important;
    padding-left: 0 !important;
}

/* Đưa luôn cả Tên Tuyển thủ ra giữa cho thẳng hàng với tiêu đề (Chuẩn Garena) */
#data-bang-diem .player-cell.text-left {
    justify-content: center !important;
    padding-left: 0 !important;
}

/* 2. Phủ màu Xám Đen (Full Xám) cho toàn bộ cây cột TỔNG ĐIỂM */
/* Đổi màu nền của Header TỔNG ĐIỂM (Cột số 5) */
#data-bang-diem .g-header:nth-child(5) {
    background-color: #0d0d0d !important;
}

/* Đảm bảo ô số liệu bên dưới cũng chung 1 mã màu đen sậm để tạo dải liền mạch */
#data-bang-diem .span-4-row.cot-xam-garena {
    background-color: #0d0d0d !important;
}
/* ================= GHI ĐÈ TỶ LỆ CỘT LẦN CUỐI (TỶ LỆ VÀNG) ================= */
#data-bang-diem {
    /* Ép lại kích thước các cột: Cột Tổng điểm (số 5) to ra 160px, cột Người chơi (1fr) sẽ bị ép nhỏ lại */
    grid-template-columns: 70px 160px 130px 130px 160px 1fr 100px 120px !important;
    min-width: 900px !important; /* Mở rộng bảng ra xíu cho thoáng */
}
/* ================= THIẾT KẾ NÚT MŨI TÊN GARENA ================= */

/* 1. Ép khoảng cách giữa mũi tên và chữ gần lại */
.match-nav-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Thu hẹp khoảng cách lại cho khít */
    margin-bottom: 20px;
}

/* 2. Cố định chữ TRẬN ở giữa để khi chuyển từ 1 đến 6 không bị giật khung */
.chu-tran {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    min-width: 80px; 
    text-align: center;
}

/* 3. Đóng khung vuông xám cho mũi tên */
.nav-arrow {
    width: 34px;
    height: 34px;
    border: 1px solid #555555; /* Khung viền xám cứng cáp */
    color: #888888;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease; /* Hiệu ứng chuyển màu mượt mà */
    background-color: rgba(255, 255, 255, 0.02); 
}

/* 4. Hiệu ứng lia chuột (Hover) - Viền Vàng Phát Sáng */
.nav-arrow:hover {
    border-color: #ffcc00 !important; /* Đổi viền sang vàng */
    color: #ffcc00 !important; /* Đổi màu mũi tên sang vàng */
    /* Tạo hiệu ứng Glow (Tỏa sáng) ra xung quanh */
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.4), inset 0 0 4px rgba(255, 204, 0, 0.2); 
    transform: scale(1.05); /* Phóng to lên một tí ti tạo cảm giác bấm */
}
/* ================= LÀM NỔI BẬT TÊN TUYỂN THỦ TRONG THẺ ================= */
.p-info-top .p-name {
    color: #ffaa00 !important; /* Nhuộm màu cam eSports rực rỡ */
    /* Đắp viền đen 4 phía cực mạnh để chống chìm vào ảnh nền */
    text-shadow: 2px 2px 3px #000000, 
                -2px -2px 3px #000000, 
                 2px -2px 3px #000000, 
                -2px 2px 3px #000000 !important; 
    font-size: 16px !important; /* Chữ to ra một xíu xiu cho dễ đọc */
    font-weight: 900 !important; /* Tô đậm nét chữ */
}
/* ================= CHỈNH LẠI TỶ LỆ ẢNH VÀ TÊN TUYỂN THỦ ================= */

/* 1. Thu nhỏ Tên và làm viền mỏng lại cho tinh tế */
.p-info-top .p-name {
    font-size: 13px !important; /* Chữ nhỏ nhắn, vừa vặn hơn */
    color: #ffaa00 !important;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000 !important; /* Viền mỏng lại cho đỡ thô */
}
/* ================= PHA TRỘN: MENU DỌC BÊN TRÁI MÀU ĐỎ ================= */

/* 1. Ép viền của các mục đang chọn ở Menu Trái thành màu Đỏ */
.container > div:not(.content) .active,
.sidebar .active,
.menu-left .active {
    border-left-color: #ff1a1a !important;
}

/* 2. Đổi luôn viền Đỏ khi rê chuột (hover) vào menu trái cho đồng bộ */
.container > div:not(.content) li:hover,
.container > div:not(.content) .menu-item:hover,
.sidebar .menu-item:hover {
    border-left-color: #ff1a1a !important;
}

/* 3. Tiện tay nhuộm Đỏ luôn thanh cuộn (Scrollbar) cho chiến */
::-webkit-scrollbar-thumb {
    background: #ff1a1a !important; 
}
::-webkit-scrollbar-thumb:hover {
    background: #cc0000 !important; 
}
/* ================= NHUỘM ĐỎ ĐƯỜNG KẺ NGANG DƯỚI HEADER ================= */
header, .header, .navbar, .top-bar, .top-header, #header {
    border-bottom-color: #ff1a1a !important;
}

/* Phòng hờ trường hợp viền đó nằm ở khung container bên dưới */
.container, .main-container, .wrapper {
    border-top-color: #ff1a1a !important;
}
/* ================= 1. GÓC TỌA ĐỘ CHO THẺ GAME (BẮT BUỘC) ================= */
.player-card {
    position: relative !important; /* ĐÂY LÀ SỢI DÂY TRÓI: Ép chữ phải nằm gọn bên trong thẻ, không được bay ra ngoài */
    overflow: hidden !important;   /* Cắt gọt mép thẻ cho vuông vức */
}
/* ================= 1. GÓC TỌA ĐỘ CHO THẺ GAME ================= */
.player-card {
    position: relative !important; 
    /* Tớ bỏ overflow: hidden đi để không bị cắt lẹm mất góc thẻ của bạn nữa */
}

/* ================= LOGO TRÊN THANH MENU ================= */
.navbar .logo {
    display: flex !important;
    align-items: center !important; /* Canh giữa logo và chữ theo chiều dọc */
    gap: 10px !important; /* Khoảng cách giữa ảnh logo và chữ UZI LEGENDS */
}

.navbar .logo img {
    height: 35px !important; /* Chiều cao logo (Nhung có thể tăng giảm cho vừa mắt, tầm 30px-40px là đẹp) */
    width: auto !important;
    border-radius: 4px !important; /* Bo cong 4 góc logo một tí xíu cho sang trọng */
    object-fit: contain !important;
}