/* =====================================================================
   VN CHECKER — BỘ GIAO DIỆN
   ---------------------------------------------------------------------
   Tông màu lấy theo Valorant: nền xanh đen #0F1923, điểm nhấn đỏ #FF4655,
   màu phụ xanh ngọc #00FFC8.

   Ba nguyên tắc dựng bộ giao diện này:
     1. Nền chia 4 tầng độ sáng (nen → nen-mat → nen-the → nen-the-sang)
        để khối nào lồng trong khối nào cũng tách bạch mà không cần viền đậm.
     2. Góc bo 6px — đủ mềm cho dễ nhìn, vẫn giữ nét sắc kiểu Valorant.
        Riêng những chỗ muốn "gắt" thì cắt vát bằng clip-path.
     3. Mỗi thẻ có một vạch màu mảnh ở mép trên, sáng lên khi rê chuột —
        thay cho việc đổ bóng nặng.
   ===================================================================== */

:root {
    /* --- Nền, chia 4 tầng --- */
    --nen:          #0B1219;
    --nen-mat:      #121C25;
    --nen-the:      #18242F;
    --nen-the-sang: #1F2E3B;

    /* --- Viền --- */
    --vien:         #223243;
    --vien-sang:    #33475C;

    /* --- Chữ --- */
    --chu:          #ECE8E1;
    --chu-phu:      #A5B0BD;
    --chu-mo:       #6E7C8B;

    /* --- Màu điểm nhấn --- */
    --do:           #FF4655;
    --do-dam:       #D8323F;
    --do-nhat:      #FF8A94;
    --xanh:         #00FFC8;
    --xanh-dam:     #00C89D;
    --vang:         #FFD64A;
    --tim:          #8B7BFF;
    --xanh-doi:     #4A90D9;   /* màu của Phe Xanh trong game — khác --xanh (ngọc) */

    /* --- Chữ nghệ --- */
    --font-de:      'Rajdhani', sans-serif;
    --font-chu:     'Inter', sans-serif;
    --font-logo:    'Orbitron', monospace;
    --font-ma:      'Consolas', 'SFMono-Regular', monospace;

    /* --- Hiệu ứng --- */
    --bo:           6px;
    --bo-nho:       4px;
    --chuyen:       0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --bong:         0 8px 28px rgba(0, 0, 0, 0.45);
    --bong-nhe:     0 2px 10px rgba(0, 0, 0, 0.3);
    --sang-do:      0 0 24px rgba(255, 70, 85, 0.28);
    --sang-xanh:    0 0 24px rgba(0, 255, 200, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-chu);
    background:
        radial-gradient(1200px 600px at 15% -5%, rgba(255, 70, 85, 0.09), transparent 60%),
        radial-gradient(1000px 500px at 90% 0%, rgba(0, 255, 200, 0.06), transparent 55%),
        var(--nen);
    background-attachment: fixed;
    color: var(--chu);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
.mo { color: var(--chu-mo); }
b, strong { font-weight: 600; }

/* Số liệu luôn thẳng cột nhờ chữ số cùng bề ngang */
.o-so .so, table.du-lieu td, .dong-tran .cot .v, .dong-tran .ti-so {
    font-variant-numeric: tabular-nums;
}

/* Bàn phím lướt tới đâu thấy rõ tới đó */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--xanh);
    outline-offset: 2px;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--nen); }
::-webkit-scrollbar-thumb { background: var(--vien); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--vien-sang); }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ============ THANH ĐIỀU HƯỚNG ============ */
.thanh-nav {
    position: sticky; top: 0; z-index: 900;
    background: rgba(11, 18, 25, 0.88);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--vien);
    padding: 0 28px; height: 64px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.thanh-nav .logo {
    font-family: var(--font-logo); font-weight: 900; font-size: 1.22rem;
    letter-spacing: 2px; display: flex; align-items: center; gap: 10px;
    flex-shrink: 0; transition: var(--chuyen);
}
.thanh-nav .logo:hover { filter: brightness(1.15); }
.thanh-nav .logo b { color: var(--do); font-weight: 900; }
.thanh-nav .logo-hinh {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--do), var(--do-dam));
    color: #fff;
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 900;
    box-shadow: var(--sang-do);
}

.nav-menu { display: flex; gap: 2px; align-items: center; list-style: none; }
.nav-menu .muc {
    font-family: var(--font-de); font-weight: 600; font-size: 0.94rem;
    text-transform: uppercase; letter-spacing: 0.8px; color: var(--chu-phu);
    padding: 8px 14px; border-radius: var(--bo-nho); transition: var(--chuyen);
    position: relative; display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.nav-menu .muc::after {
    content: ''; position: absolute; bottom: 2px; left: 50%; right: 50%;
    height: 2px; background: var(--do); border-radius: 2px;
    transition: var(--chuyen);
}
.nav-menu .muc:hover { color: var(--chu); background: rgba(255, 255, 255, 0.04); }
.nav-menu .muc:hover::after { left: 14px; right: 14px; }
.nav-menu .muc.active { color: var(--do); background: rgba(255, 70, 85, 0.10); }
.nav-menu .muc.active::after { left: 14px; right: 14px; }

/*  Menu là phần CO ĐƯỢC: thiếu chỗ thì nó tự cuộn ngang.
    Khối bên phải (tên tài khoản + Đăng xuất) thì KHÔNG BAO GIỜ được co —
    trước đây nó co, nên ở màn hình vừa vừa nút "Đăng xuất" bị đẩy khuất hẳn.  */
.nav-menu { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-menu::-webkit-scrollbar { display: none; }

.nav-phai { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: nowrap; }
.nav-phai .nut { flex-shrink: 0; }
/*  Tên hiển thị dài thì cắt bằng dấu ba chấm, chứ đừng đẩy nút Đăng xuất đi  */
.nav-phai .nut-vien {
    max-width: 200px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; display: inline-block;
}

/* ============ NÚT ============ */
.nut {
    font-family: var(--font-de); font-weight: 600; font-size: 0.86rem;
    text-transform: uppercase; letter-spacing: 0.6px;
    padding: 9px 18px;
    background: linear-gradient(135deg, var(--do), var(--do-dam));
    color: #fff; border: none; border-radius: var(--bo-nho);
    cursor: pointer; transition: var(--chuyen);
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    line-height: 1.2;
}
.nut:hover  { filter: brightness(1.1); box-shadow: var(--sang-do); transform: translateY(-1px); }
.nut:active { transform: translateY(0); }

.nut-vien {
    background: transparent; border: 1px solid var(--vien-sang); color: var(--chu-phu);
}
.nut-vien:hover {
    border-color: var(--chu); color: var(--chu);
    background: rgba(255, 255, 255, 0.04); box-shadow: none;
}
.nut-nho  { padding: 5px 12px; font-size: 0.76rem; }
.nut-lon  { padding: 13px 26px; font-size: 0.95rem; }
.nut-rong { width: 100%; justify-content: center; padding: 13px; font-size: 0.95rem; }

.hang-nut { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Nút đăng nhập bằng Riot --- */
.nut-riot {
    display: flex; align-items: center; justify-content: center; gap: 11px;
    width: 100%; padding: 15px 20px;
    background: linear-gradient(135deg, #FF4655, #C9202E);
    color: #fff; border-radius: var(--bo);
    font-family: var(--font-de); font-weight: 700; font-size: 1.02rem;
    text-transform: uppercase; letter-spacing: 1.4px;
    box-shadow: 0 6px 20px rgba(255, 70, 85, 0.25);
    transition: var(--chuyen);
}
.nut-riot:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255, 70, 85, 0.36); }
.cham-riot {
    width: 12px; height: 12px; background: #fff; flex-shrink: 0;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.dau-riot {
    display: block; font-family: var(--font-logo); font-weight: 900;
    font-size: 0.72rem; letter-spacing: 3px; color: var(--do);
    margin-bottom: 10px;
}
.dau-riot b { color: var(--chu-mo); font-weight: 900; }

/* ============ KHUNG TRANG ============ */
.trang { min-height: calc(100vh - 64px); }
.boc      { max-width: 1220px; margin: 0 auto; padding: 30px 28px; }
.boc-rong { max-width: 1440px; margin: 0 auto; padding: 24px 28px; }

.bao {
    max-width: 1220px; margin: 16px auto 0; padding: 12px 18px;
    border-radius: var(--bo-nho); font-size: 0.9rem; border-left: 3px solid;
    display: flex; align-items: center; gap: 8px;
}
.bao-ok  { background: rgba(0, 255, 200, 0.08); border-color: var(--xanh); color: var(--xanh); }
.bao-loi { background: rgba(255, 70, 85, 0.08); border-color: var(--do);   color: var(--do-nhat); }

/*  .bao là FLEX — dùng cho băng rôn một dòng (dấu ✔ / ✖ rồi tới chữ).
 *  Nhét vào đó một CÂU có <b> hay <code> thì mỗi thẻ thành MỘT Ô FLEX riêng:
 *  câu văn vỡ ra thành mấy cột rời rạc, chữ đậm nhảy xuống hàng dưới, mà
 *  trình duyệt không kêu tiếng nào. Đã vỡ đúng như thế ở ghi chú "Riot chỉ
 *  công bố tổng số trận theo mùa cho <b>đấu hạng</b>...".
 *  Câu có định dạng bên trong thì thêm .bao-van — nó trả về cách xếp chữ bình
 *  thường, giữ nguyên khung viền và màu nền.  */
.bao-van { display: block; line-height: 1.7; }

.canh-bao {
    max-width: 900px; margin: 40px auto; padding: 20px 24px;
    background: var(--nen-the); border: 1px solid var(--vien);
    border-left: 3px solid var(--vang); border-radius: var(--bo); line-height: 1.65;
}
.canh-bao code, .khoi-giai-thich code {
    background: rgba(255, 255, 255, 0.07); padding: 2px 6px;
    border-radius: 3px; font-family: var(--font-ma); font-size: 0.88em;
}

/* ============ TRANG CHỦ — DẢI TÌM KIẾM ============ */
.dai-tim {
    position: relative; padding: 78px 24px 66px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background:
        radial-gradient(ellipse at 18% 45%, rgba(255, 70, 85, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 55%, rgba(0, 255, 200, 0.13) 0%, transparent 55%),
        linear-gradient(180deg, #101B25, var(--nen));
    overflow: hidden;
    border-bottom: 1px solid var(--vien);
}
.dai-tim::before {
    content: ''; position: absolute; inset: -2px; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
}
.dai-tim > * { position: relative; z-index: 2; }
.dai-tim h1 {
    font-family: var(--font-de); font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.1rem);
    letter-spacing: 2.5px; margin-bottom: 10px; text-align: center; line-height: 1.1;
}
.dai-tim h1 span {
    background: linear-gradient(120deg, var(--do), #FF8A94);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dai-tim .phu { color: var(--chu-phu); margin-bottom: 32px; text-align: center; max-width: 620px; }

.o-tim { display: flex; gap: 10px; width: 100%; max-width: 720px; }
.o-tim input {
    flex: 1; padding: 16px 20px; background: rgba(18, 28, 37, 0.9);
    border: 1px solid var(--vien); border-radius: var(--bo); color: var(--chu);
    font-family: var(--font-chu); font-size: 1rem; outline: none; transition: var(--chuyen);
}
.o-tim input::placeholder { color: var(--chu-mo); }
.o-tim input:focus { border-color: var(--do); box-shadow: 0 0 0 3px rgba(255, 70, 85, 0.14); }
.o-tim button {
    padding: 16px 30px;
    background: linear-gradient(135deg, var(--do), var(--do-dam));
    color: #fff; border: none; border-radius: var(--bo);
    font-family: var(--font-de); font-weight: 700; font-size: 1rem;
    text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: var(--chuyen);
    white-space: nowrap;
}
.o-tim button:hover { filter: brightness(1.1); box-shadow: var(--sang-do); transform: translateY(-1px); }

.goi-y { margin-top: 16px; font-size: 0.85rem; color: var(--chu-mo); text-align: center; }
.goi-y a { color: var(--xanh); }
.goi-y a:hover { text-decoration: underline; }

/* Dòng ghi rõ đang thống kê mùa nào */
.bang-mua {
    margin-top: 18px; display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 16px; border-radius: 999px;
    background: rgba(0, 255, 200, 0.08); border: 1px solid rgba(0, 255, 200, 0.28);
    color: var(--xanh); font-size: 0.83rem; font-weight: 500;
}

/* ============ TIÊU ĐỀ MỤC + THẺ ============ */
.dau-muc {
    display: flex; align-items: center; justify-content: space-between;
    margin: 34px 0 16px; gap: 12px; flex-wrap: wrap;
}
.dau-muc:first-child { margin-top: 6px; }
.dau-muc h2 {
    font-family: var(--font-de); font-weight: 700; font-size: 1.45rem;
    letter-spacing: 1px; display: flex; align-items: center; gap: 10px;
}

.the {
    position: relative;
    background: linear-gradient(180deg, var(--nen-the), var(--nen-mat));
    border: 1px solid var(--vien);
    border-radius: var(--bo); padding: 22px 24px; margin-bottom: 20px;
    transition: border-color var(--chuyen);
}
.the::before {
    content: ''; position: absolute; top: -1px; left: 18px; right: 18px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--vien-sang), transparent);
    border-radius: 2px; transition: var(--chuyen);
}
.the:hover { border-color: var(--vien-sang); }
.the:hover::before { background: linear-gradient(90deg, transparent, var(--do), transparent); }

.the-dau {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.the-dau h2 { font-family: var(--font-de); font-weight: 700; font-size: 1.12rem; letter-spacing: 0.4px; }
.the-dau p  { color: var(--chu-mo); font-size: 0.84rem; margin-top: 2px; }

.tieu-de-nho {
    font-family: var(--font-de); font-weight: 700; font-size: 1rem;
    letter-spacing: 1px; text-transform: uppercase; color: var(--chu-phu);
    margin: 4px 0 14px;
}

.luoi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.luoi-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

/* ============ TIN TỨC ============ */
.luoi-tin { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.the-tin {
    background: linear-gradient(180deg, var(--nen-the), var(--nen-mat));
    border: 1px solid var(--vien); border-radius: var(--bo);
    overflow: hidden; transition: var(--chuyen); display: flex; flex-direction: column;
}
.the-tin:hover { transform: translateY(-4px); border-color: var(--vien-sang); box-shadow: var(--bong); }
.tin-anh {
    height: 132px; position: relative; font-size: 2.9rem;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 50% 60%, rgba(255, 70, 85, 0.16), transparent 65%),
        var(--nen-mat);
}
.tin-the {
    position: absolute; top: 10px; left: 10px;
    background: var(--do); color: #fff;
    font-family: var(--font-de); font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px; padding: 4px 10px; border-radius: 3px;
}
.tin-than { padding: 15px 17px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tin-than h3 { font-family: var(--font-de); font-weight: 600; font-size: 1.02rem; line-height: 1.3; transition: var(--chuyen); }
.the-tin:hover .tin-than h3 { color: var(--do); }
.tin-tom-tat { font-size: 0.82rem; color: var(--chu-phu); line-height: 1.55; flex: 1; }
.tin-ngay { font-size: 0.76rem; color: var(--chu-mo); }

/* ============ HỒ SƠ NGƯỜI CHƠI ============ */
.bang-ho-so {
    position: relative; min-height: 200px;
    border-bottom: 1px solid var(--vien);
    background:
        radial-gradient(ellipse at 12% 100%, rgba(255, 70, 85, 0.30), transparent 55%),
        radial-gradient(ellipse at 75% 20%, rgba(0, 255, 200, 0.16), transparent 55%),
        linear-gradient(180deg, #101B25, var(--nen-mat));
    display: flex; align-items: flex-end; overflow: hidden;
}
.bang-ho-so::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(11, 18, 25, 0.9), transparent 70%);
}
.ho-so-trong {
    position: relative; z-index: 2; width: 100%; max-width: 1220px; margin: 0 auto;
    padding: 24px 28px 0; display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
}
.anh-dai-dien {
    width: 88px; height: 88px; border-radius: var(--bo);
    border: 2px solid var(--do);
    background: linear-gradient(150deg, var(--nen-the-sang), var(--nen-the));
    display: flex; align-items: center; justify-content: center;
    font-size: 2.1rem; font-weight: 700; font-family: var(--font-de); flex-shrink: 0;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), var(--sang-do);
}
.ho-so-ten {
    font-family: var(--font-de); font-weight: 700;
    font-size: clamp(1.3rem, 3vw, 1.85rem); letter-spacing: 1px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ho-so-ten small { color: var(--chu-mo); font-size: 0.6em; font-weight: 600; }

.the-nho {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px; border: 1px solid;
    font-family: var(--font-de); font-weight: 600; font-size: 0.83rem;
    white-space: nowrap;
}

/* --- Thanh lọc mùa giải & chế độ --- */
.thanh-loc {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 14px;
}
.nhom-vien { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nhan-vien {
    font-family: var(--font-de); font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.2px; color: var(--chu-mo);
    margin-right: 4px; min-width: 62px;
}
.vien {
    display: inline-flex; align-items: center;
    padding: 5px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.045); border: 1px solid var(--vien);
    color: var(--chu-phu); font-size: 0.79rem; font-weight: 500;
    transition: var(--chuyen); white-space: nowrap;
}
.vien:hover { border-color: var(--vien-sang); color: var(--chu); background: rgba(255, 255, 255, 0.08); }
.vien.active {
    background: rgba(255, 70, 85, 0.16); border-color: var(--do);
    color: #fff; font-weight: 600;
}

/* Nhãn mã mùa giải nhỏ, ví dụ "e9a3" */
.the-mua {
    display: inline-block; padding: 1px 7px; margin-left: 4px;
    border-radius: 3px; background: rgba(139, 123, 255, 0.16);
    border: 1px solid rgba(139, 123, 255, 0.35); color: var(--tim);
    font-family: var(--font-ma); font-size: 0.68rem; letter-spacing: 0.4px;
    vertical-align: middle;
}

.tab-ho-so { display: flex; gap: 2px; margin-top: 14px; flex-wrap: wrap; }
.tab-ho-so a {
    font-family: var(--font-de); font-weight: 600; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.6px; padding: 10px 16px;
    border-bottom: 2px solid transparent; color: var(--chu-phu);
    transition: var(--chuyen);
}
.tab-ho-so a:hover { color: var(--chu); background: rgba(255, 255, 255, 0.05); }
.tab-ho-so a.active {
    color: var(--do); border-bottom-color: var(--do);
    background: linear-gradient(180deg, transparent, rgba(255, 70, 85, 0.12));
}

.than-ho-so { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.cot-trai, .cot-phai { display: flex; flex-direction: column; gap: 18px; }

.the-hang {
    background: linear-gradient(180deg, var(--nen-the), var(--nen-mat));
    border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px 20px;
    transition: var(--chuyen);
}
.the-hang:hover { border-color: var(--vien-sang); }
.the-hang .nhan {
    font-family: var(--font-de); font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 1.3px; color: var(--chu-mo); margin-bottom: 8px;
}
.the-hang .gia-tri {
    font-family: var(--font-de); font-weight: 700; font-size: 1.4rem;
    display: flex; align-items: center; gap: 10px; line-height: 1.2;
}
.the-hang .gia-tri em { font-size: 1.9rem; font-style: normal; }
.the-dong-bo .nut-rong { margin-top: 4px; }

.dong-doi {
    display: flex; align-items: center; gap: 10px; padding: 9px 0;
    border-bottom: 1px solid var(--vien); transition: var(--chuyen);
}
.dong-doi:last-child { border-bottom: none; }
.dong-doi:hover { background: rgba(255, 255, 255, 0.035); }
.anh-tron {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(140deg, var(--nen-the-sang), var(--nen-mat));
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-size: 0.8rem; font-weight: 700; font-family: var(--font-de);
    border: 1px solid var(--vien-sang); color: var(--chu-phu);
}
.dong-doi .ten { font-size: 0.9rem; font-weight: 500; }
.dong-doi .hang { margin-left: auto; font-size: 0.8rem; }

/* ============ Ô CHỈ SỐ ============ */
.luoi-so     { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 13px; }
.luoi-so-nho { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 9px; margin-top: 12px; }
.o-so {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, var(--nen-the-sang), var(--nen-mat));
    border: 1px solid var(--vien); border-radius: var(--bo);
    padding: 15px 12px; text-align: center; transition: var(--chuyen);
}
.o-so::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--vien-sang); opacity: 0.5; transition: var(--chuyen);
}
.o-so:hover { border-color: var(--vien-sang); transform: translateY(-2px); box-shadow: var(--bong-nhe); }
.o-so .so   { font-family: var(--font-de); font-weight: 700; font-size: 1.45rem; line-height: 1.2; }
.o-so .nhan {
    font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--chu-mo); margin-top: 5px;
}
.o-so.nho       { padding: 11px 8px; }
.o-so.nho .so   { font-size: 1.1rem; }
.o-so.manh .so  { color: var(--do); }
.o-so.manh::after { background: var(--do); }
.o-so.tot .so   { color: var(--xanh); }
.o-so.tot::after { background: var(--xanh); }

/* ============ VÒNG TRÒN TỈ LỆ THẮNG ============ */
.vong-tron { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.vong-tron svg { filter: drop-shadow(0 0 12px rgba(0, 255, 200, 0.18)); }
.vong-tron .vt-so   { fill: var(--chu); font-family: var(--font-de); font-size: 26px; font-weight: 700; text-anchor: middle; }
.vong-tron .vt-nhan { fill: var(--chu-mo); font-family: var(--font-de); font-size: 9.5px; text-anchor: middle; letter-spacing: 0.5px; }
.vt-chu-thich { display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; }
.vt-chu-thich i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; }

/* ============ BẢNG DỮ LIỆU ============ */
.boc-bang { overflow-x: auto; border-radius: var(--bo-nho); }
table.du-lieu { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
table.du-lieu th {
    position: sticky; top: 0; z-index: 2;
    text-align: left; padding: 11px 12px; font-family: var(--font-de);
    font-size: 0.73rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--chu-mo); background: var(--nen-mat);
    border-bottom: 1px solid var(--vien); white-space: nowrap;
}
table.du-lieu td { padding: 11px 12px; border-bottom: 1px solid var(--vien); vertical-align: middle; }
table.du-lieu tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.016); }
table.du-lieu tbody tr:hover { background: rgba(255, 70, 85, 0.06); }
table.du-lieu tr:last-child td { border-bottom: none; }
table.du-lieu .phai { text-align: right; }
table.du-lieu .giua { text-align: center; }
table.du-lieu .trong { text-align: center; color: var(--chu-mo); padding: 34px 16px; line-height: 1.7; }
.thang { color: var(--xanh); font-weight: 600; }
.thua  { color: var(--do);   font-weight: 600; }

/* Ô có ảnh nhỏ đứng trước tên (bản đồ, vũ khí) */
.o-ban-do, .o-vu-khi { display: flex; align-items: center; gap: 10px; }
.o-ban-do img {
    width: 34px; height: 34px; object-fit: contain; border-radius: var(--bo-nho);
    background: rgba(255, 255, 255, 0.05); flex-shrink: 0;
}
.o-vu-khi img {
    width: 62px; height: 26px; object-fit: contain; flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.cot-ngang {
    height: 6px; background: rgba(255, 255, 255, 0.07); border-radius: 3px;
    overflow: hidden; min-width: 70px; margin-bottom: 5px;
}
table.du-lieu .cot-ngang + span { display: block; line-height: 1; }
.cot-ngang span { display: block; height: 100%; border-radius: 3px; }
.tien-do { height: 8px; background: rgba(255, 255, 255, 0.07); border-radius: 4px; overflow: hidden; flex: 1; min-width: 60px; }
.tien-do span { display: block; height: 100%; border-radius: 4px; }

/* ============ DÒNG LỊCH SỬ ĐẤU ============ */
.dong-tran {
    display: grid; grid-template-columns: 4px 200px 108px repeat(4, 1fr) 122px;
    align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 8px;
    background: linear-gradient(180deg, var(--nen-the), var(--nen-mat));
    border: 1px solid var(--vien); border-radius: var(--bo);
    transition: var(--chuyen);
}
.dong-tran:hover { border-color: var(--vien-sang); transform: translateX(3px); box-shadow: var(--bong-nhe); }
.dong-tran .vach { width: 4px; height: 100%; min-height: 44px; border-radius: 3px; }
.dong-tran.win  { background: linear-gradient(90deg, rgba(0, 255, 200, 0.07), var(--nen-mat) 42%); }
.dong-tran.lose { background: linear-gradient(90deg, rgba(255, 70, 85, 0.07), var(--nen-mat) 42%); }
.dong-tran.win  .vach { background: var(--xanh); box-shadow: 0 0 10px rgba(0, 255, 200, 0.5); }
.dong-tran.lose .vach { background: var(--do);   box-shadow: 0 0 10px rgba(255, 70, 85, 0.5); }
.dong-tran.draw .vach { background: var(--chu-mo); }
.dong-tran .dac-vu { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dong-tran .ten-dv { font-family: var(--font-de); font-weight: 600; font-size: 0.96rem; }
.dong-tran .ban-do { font-size: 0.76rem; color: var(--chu-mo); }
.dong-tran .ti-so  { font-family: var(--font-de); font-weight: 700; font-size: 1.22rem; }
.dong-tran .cot .v { font-family: var(--font-de); font-weight: 600; font-size: 0.97rem; white-space: nowrap; }
.dong-tran .cot .n { font-size: 0.66rem; text-transform: uppercase; color: var(--chu-mo); letter-spacing: 0.6px; white-space: nowrap; }
.dong-tran .gio    { font-size: 0.76rem; color: var(--chu-mo); text-align: right; line-height: 1.4; }

/* ============ TRANG BẢN ĐỒ & CHIẾN THUẬT ============ */
.khung-ve { display: flex; gap: 20px; align-items: flex-start; }
.cot-ben {
    width: 250px; flex-shrink: 0; background: var(--nen-mat);
    border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px;
}
.cot-ben h3 {
    font-family: var(--font-de); font-weight: 700; font-size: 1rem;
    letter-spacing: 1px; margin-bottom: 14px;
}
.ds-ban-do { display: flex; flex-direction: column; gap: 7px; }
.muc-ban-do {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    background: var(--nen-the); border: 1px solid var(--vien); border-radius: var(--bo-nho);
    font-family: var(--font-de); font-weight: 600; font-size: 0.94rem;
    letter-spacing: 0.4px; transition: var(--chuyen);
}
.muc-ban-do:hover { background: var(--nen-the-sang); border-color: var(--vien-sang); transform: translateX(4px); }
.muc-ban-do.active { border-color: var(--do); background: rgba(255, 70, 85, 0.12); color: var(--do); }
.muc-ban-do .hinh {
    width: 30px; height: 30px; border-radius: var(--bo-nho); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.muc-ban-do small { display: block; font-size: 0.7rem; color: var(--chu-mo); font-weight: 500; letter-spacing: 0; }

.meo {
    margin-top: 16px; padding: 12px 14px; background: var(--nen-the);
    border: 1px solid var(--vien); border-left: 2px solid var(--xanh);
    border-radius: var(--bo-nho);
    font-size: 0.78rem; color: var(--chu-mo); line-height: 1.65;
}

.vung-ve { flex: 1; min-width: 0; position: relative; }
.vung-ve canvas {
    display: block; margin: 0 auto;
    width: auto; height: auto;
    max-width: 100%; max-height: calc(100vh - 200px);
    border: 1px solid var(--vien); border-radius: var(--bo);
    background: #0d1218; cursor: crosshair;
    box-shadow: var(--bong);
}
.thanh-cong-cu {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
    background: var(--nen-the); border: 1px solid var(--vien);
    border-radius: var(--bo); padding: 8px;
}
.nut-cc {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--nen-mat); border: 1px solid var(--vien); border-radius: var(--bo-nho);
    cursor: pointer; transition: var(--chuyen); font-size: 1.05rem; color: var(--chu-phu);
}
.nut-cc:hover  { background: var(--nen-the-sang); color: var(--chu); border-color: var(--vien-sang); }
.nut-cc.active { background: rgba(255, 70, 85, 0.16); border-color: var(--do); color: var(--do); }
.nut-cc.rong   { width: auto; padding: 0 14px; font-size: 0.8rem; font-family: var(--font-de); font-weight: 700; }
.ngan-cc { width: 1px; background: var(--vien); margin: 0 4px; }

/* Bảng chiến thuật — hai cột đội hình */
.khung-ct { display: grid; grid-template-columns: 214px 1fr 214px; gap: 18px; align-items: start; }
.o-doi { background: var(--nen-mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: 14px 12px; }
.o-doi h3 {
    font-family: var(--font-de); font-weight: 700; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 1.2px; text-align: center; margin-bottom: 12px;
}
.o-doi.dong-minh h3 { color: var(--xanh); }
.o-doi.doi-dich  h3 { color: var(--do); }
.suat {
    background: var(--nen-the); border: 1px solid var(--vien); border-radius: var(--bo-nho);
    padding: 8px 10px; display: flex; align-items: center; gap: 9px;
    margin-bottom: 7px; min-height: 50px; transition: var(--chuyen);
}
.suat:hover { border-color: var(--vien-sang); background: var(--nen-the-sang); }
.suat.trong {
    border-style: dashed; opacity: 0.5; justify-content: center;
    font-size: 0.78rem; color: var(--chu-mo);
}
.suat .ten-dv  { font-size: 0.82rem; font-weight: 600; }
.suat .vai-tro { font-size: 0.68rem; color: var(--chu-mo); }
.suat form { margin-left: auto; }
.suat button.bo {
    background: none; border: none; color: var(--chu-mo);
    cursor: pointer; font-size: 1rem; padding: 2px 4px; transition: var(--chuyen);
}
.suat button.bo:hover { color: var(--do); }

/* Danh sách người đang cùng làm một bản vẽ */
.ds-thanh-vien { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.ds-thanh-vien .vien { cursor: pointer; font-family: inherit; }
.ds-thanh-vien form  { display: inline; }
.nut-x {
    background: none; border: none; color: var(--chu-mo); cursor: pointer;
    font-size: 0.8rem; padding: 0 0 0 5px; transition: var(--chuyen);
}
.nut-x:hover { color: var(--do); }

.luoi-dac-vu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 10px; }
.o-dac-vu {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 100%; padding: 6px 3px;
    background: var(--nen-the); border: 1px solid var(--vien);
    border-radius: var(--bo-nho); text-align: center; font-size: 0.71rem; cursor: pointer;
    font-family: var(--font-de); font-weight: 600; letter-spacing: 0.3px; transition: var(--chuyen);
}
.o-dac-vu:hover { border-color: var(--vien-sang); transform: scale(1.06); background: var(--nen-the-sang); }
.o-dac-vu img {
    width: 34px; height: 34px; object-fit: cover; border-radius: var(--bo-nho);
    background: rgba(255, 255, 255, 0.05);
}

.chon-ban-do { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 16px; }
.the-chon-ban-do {
    position: relative; overflow: hidden;
    background: var(--nen-the); border: 1px solid var(--vien); border-radius: var(--bo);
    padding: 20px; text-align: center; height: 158px; transition: var(--chuyen);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-de); font-weight: 700; font-size: 1.12rem; letter-spacing: 1px;
}
.the-chon-ban-do:hover { border-color: var(--do); box-shadow: var(--sang-do); transform: translateY(-4px); }
.the-chon-ban-do .hinh { font-size: 2.7rem; opacity: 0.85; }
.the-chon-ban-do small { font-size: 0.72rem; color: var(--chu-phu); font-weight: 500; letter-spacing: 0; }
.the-chon-ban-do .anh-nen-map {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.42; transition: var(--chuyen);
}
/* Chỉ phủ lớp tối lên thẻ NÀO CÓ ảnh nền, để chữ trên thẻ không ảnh vẫn rõ */
.the-chon-ban-do:has(.anh-nen-map)::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 18, 25, 0.25), rgba(11, 18, 25, 0.85));
}
.the-chon-ban-do:hover .anh-nen-map { opacity: 0.65; transform: scale(1.07); }
.the-chon-ban-do .ten-map, .the-chon-ban-do small, .the-chon-ban-do .hinh {
    position: relative; z-index: 2;
    text-shadow: 0 2px 10px rgba(11, 18, 25, 0.95);
}
.the-chon-ban-do .ten-map { font-size: 1.36rem; letter-spacing: 2px; }

/* ============ FORM ĐĂNG NHẬP / ĐĂNG KÝ ============ */
.trang-xac-thuc {
    min-height: calc(100vh - 64px);
    display: flex; align-items: center; justify-content: center; padding: 44px 20px;
}
.the-xac-thuc {
    width: 100%; max-width: 430px;
    background: linear-gradient(180deg, var(--nen-the), var(--nen-mat));
    border: 1px solid var(--vien); border-radius: 10px; padding: 32px;
    box-shadow: var(--bong);
}
.the-xac-thuc.rong { max-width: 560px; }
.dau-xac-thuc { margin-bottom: 22px; }
.the-xac-thuc h1 { font-family: var(--font-de); font-weight: 700; font-size: 1.62rem; letter-spacing: 1.5px; }
.the-xac-thuc .phu { color: var(--chu-mo); font-size: 0.87rem; margin-top: 6px; }

.vach-hoac {
    display: flex; align-items: center; gap: 14px;
    margin: 22px 0; color: var(--chu-mo); font-size: 0.76rem;
    text-transform: uppercase; letter-spacing: 1.4px;
}
.vach-hoac::before, .vach-hoac::after {
    content: ''; flex: 1; height: 1px; background: var(--vien);
}

.o-nhap { margin-bottom: 16px; }
.o-nhap label {
    display: block; font-family: var(--font-de); font-weight: 600; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 1.1px; color: var(--chu-phu); margin-bottom: 6px;
}
.o-nhap input, .o-nhap select, .o-nhap textarea {
    width: 100%; padding: 12px 14px; background: var(--nen);
    border: 1px solid var(--vien); border-radius: var(--bo-nho); color: var(--chu);
    font-family: var(--font-chu); font-size: 0.94rem; outline: none; transition: var(--chuyen);
}
.o-nhap textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
.o-nhap input:focus, .o-nhap select:focus, .o-nhap textarea:focus {
    border-color: var(--do); box-shadow: 0 0 0 3px rgba(255, 70, 85, 0.12);
}
.o-nhap input::placeholder, .o-nhap textarea::placeholder { color: var(--chu-mo); }
.o-nhap select:disabled { opacity: 0.45; cursor: not-allowed; }

/* Nhiều ô nằm cùng một hàng */
.hang-o-nhap { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 16px; }
.hang-o-nhap .o-nhap { margin-bottom: 0; }

.o-tick {
    display: flex; align-items: center; gap: 9px; margin-bottom: 16px;
    font-size: 0.87rem; color: var(--chu-phu); cursor: pointer;
}
.o-tick input { width: 17px; height: 17px; accent-color: var(--do); cursor: pointer; }

.chan-xac-thuc {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-top: 18px;
    padding-top: 16px; border-top: 1px solid var(--vien); font-size: 0.85rem;
}
.chan-xac-thuc a { color: var(--xanh); }
.chan-xac-thuc a:hover { text-decoration: underline; }

.goi-y-tk {
    margin-top: 18px; padding: 12px 14px; background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--vien-sang); border-radius: var(--bo-nho);
    font-size: 0.81rem; color: var(--chu-phu); line-height: 1.75;
}

.khoi-giai-thich {
    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--vien);
    border-left: 2px solid var(--vang);
    border-radius: var(--bo-nho); padding: 15px 17px; margin-bottom: 22px;
    font-size: 0.86rem; line-height: 1.7; color: var(--chu-phu);
}
.khoi-giai-thich b { color: var(--chu); }
.khoi-giai-thich p { margin-top: 8px; }

.khoi-ma {
    background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo-nho);
    padding: 11px 13px; margin: 9px 0;
    font-family: var(--font-ma); font-size: 0.78rem; color: var(--xanh);
    white-space: pre-wrap; word-break: break-all; line-height: 1.6;
}

.khoi-luu-y {
    background: rgba(255, 214, 74, 0.07); border: 1px solid rgba(255, 214, 74, 0.28);
    border-radius: var(--bo-nho); padding: 11px 14px; margin-bottom: 16px;
    font-size: 0.81rem; color: #E8D9A8; line-height: 1.65;
}

/* ============ MÀN ĐĂNG NHẬP BẰNG RIOT ============
   Nền là ảnh splash thật của một bản đồ, phủ lớp tối để chữ luôn đọc được.
   Thẻ ở giữa mang thương hiệu VN CHECKER — cố ý KHÔNG nhái trang đăng nhập
   của Riot, vì một trang trông giống hệt riotgames.com mà lại hỏi mật khẩu
   chính là cái bẫy mà người chơi cần tránh.                                */
.man-dang-nhap {
    position: relative; min-height: calc(100vh - 64px);
    display: flex; align-items: center; justify-content: center;
    padding: 44px 20px; overflow: hidden;
}
.nen-dang-nhap {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.85;
    animation: keoNen 26s ease-in-out infinite alternate;
}
@keyframes keoNen { from { transform: scale(1.04); } to { transform: scale(1.14); } }
.man-dang-nhap::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(11, 18, 25, 0.30), rgba(11, 18, 25, 0.80) 75%),
        linear-gradient(180deg, rgba(255, 70, 85, 0.10), rgba(11, 18, 25, 0.72) 55%);
}

.the-dang-nhap {
    position: relative; z-index: 2;
    width: 100%; max-width: 480px;
    background: rgba(20, 30, 40, 0.9);
    backdrop-filter: blur(16px) saturate(130%);
    border: 1px solid var(--vien-sang); border-radius: 12px;
    padding: 32px 34px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}
.the-dang-nhap h1 {
    font-family: var(--font-de); font-weight: 700; font-size: 1.55rem;
    letter-spacing: 1.6px; margin-top: 22px;
}
.the-dang-nhap .phu { color: var(--chu-mo); font-size: 0.87rem; margin: 6px 0 22px; }

.dau-dang-nhap {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 18px; border-bottom: 1px solid var(--vien);
}
.dau-dang-nhap .logo-hinh {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--do), var(--do-dam)); color: #fff;
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-logo); font-size: 1.05rem; font-weight: 900;
    flex-shrink: 0; box-shadow: var(--sang-do);
}
.logo-chu {
    font-family: var(--font-logo); font-weight: 900; font-size: 1.05rem; letter-spacing: 2px;
}
.logo-chu b { color: var(--do); font-weight: 900; }
.logo-phu { font-size: 0.74rem; color: var(--chu-mo); letter-spacing: 0.4px; margin-top: 2px; }

.nut-riot.tat {
    background: linear-gradient(135deg, #4A2830, #3A222A);
    color: var(--chu-mo); box-shadow: none; cursor: not-allowed;
    border: 1px dashed rgba(255, 70, 85, 0.35);
}
.nut-riot.tat:hover { transform: none; filter: none; box-shadow: none; }
.nut-riot.tat .cham-riot { background: var(--chu-mo); }

.chu-nut {
    font-size: 0.81rem; color: var(--chu-mo); line-height: 1.65;
    margin: 11px 0 0; text-align: center;
}

/* Ô tra cứu nhanh ngay trên trang đăng nhập — xem thành tích thì khỏi đăng nhập */
.o-tim-nho { display: flex; gap: 8px; }
.o-tim-nho input {
    flex: 1; min-width: 0; padding: 11px 14px; background: var(--nen);
    border: 1px solid var(--vien); border-radius: var(--bo-nho); color: var(--chu);
    font-family: var(--font-chu); font-size: 0.92rem; outline: none; transition: var(--chuyen);
}
.o-tim-nho input::placeholder { color: var(--chu-mo); }
.o-tim-nho input:focus { border-color: var(--xanh); box-shadow: 0 0 0 3px rgba(0, 255, 200, 0.12); }
.o-tim-nho button {
    padding: 11px 20px; background: transparent; color: var(--xanh);
    border: 1px solid var(--xanh); border-radius: var(--bo-nho); cursor: pointer;
    font-family: var(--font-de); font-weight: 600; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.6px; transition: var(--chuyen);
    white-space: nowrap;
}
.o-tim-nho button:hover { background: rgba(0, 255, 200, 0.12); box-shadow: var(--sang-xanh); }
.lien-ket { color: var(--xanh); }
.lien-ket:hover { text-decoration: underline; }

/* Khối hướng dẫn gấp lại được */
.chi-tiet {
    margin-top: 20px; border: 1px solid var(--vien); border-radius: var(--bo);
    background: rgba(255, 255, 255, 0.025); overflow: hidden;
}
.chi-tiet summary {
    padding: 12px 15px; cursor: pointer; list-style: none;
    font-family: var(--font-de); font-weight: 600; font-size: 0.84rem;
    text-transform: uppercase; letter-spacing: 0.9px; color: var(--chu-phu);
    display: flex; align-items: center; gap: 8px; transition: var(--chuyen);
}
.chi-tiet summary::-webkit-details-marker { display: none; }
.chi-tiet summary::before { content: '▸'; color: var(--do); transition: var(--chuyen); }
.chi-tiet[open] summary::before { transform: rotate(90deg); }
.chi-tiet summary:hover { color: var(--chu); background: rgba(255, 255, 255, 0.04); }
.noi-chi-tiet {
    padding: 4px 15px 15px; font-size: 0.83rem; line-height: 1.75; color: var(--chu-phu);
    border-top: 1px solid var(--vien);
}
.noi-chi-tiet p { margin-top: 10px; }
.noi-chi-tiet code {
    background: rgba(255, 255, 255, 0.07); padding: 2px 6px;
    border-radius: 3px; font-family: var(--font-ma); font-size: 0.88em; color: var(--xanh);
}

@media (max-width: 560px) {
    .the-dang-nhap { padding: 24px 20px; }
}

/* ============ CHÂN TRANG ============ */
.chan-trang {
    border-top: 1px solid var(--vien); margin-top: 44px; padding: 24px 28px 92px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; font-size: 0.84rem; color: var(--chu-phu);
    background: rgba(11, 18, 25, 0.6);
}

/* ============ KHUNG CHAT ============ */
.khung-chat {
    position: fixed; right: 0; bottom: 0; width: 306px; z-index: 800;
    background: linear-gradient(180deg, var(--nen-the), var(--nen-mat));
    border: 1px solid var(--vien); border-radius: 8px 0 0 0;
    display: flex; flex-direction: column; transition: transform var(--chuyen);
    box-shadow: -6px 0 26px rgba(0, 0, 0, 0.55);
}
.khung-chat.thu-gon { transform: translateY(calc(100% - 43px)); }
.chat-dau {
    padding: 11px 14px; background: var(--nen-mat); border-bottom: 1px solid var(--vien);
    border-radius: 8px 0 0 0;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; user-select: none;
}
.chat-ten {
    font-family: var(--font-de); font-weight: 600; font-size: 0.9rem;
    letter-spacing: 0.4px; display: flex; align-items: center; gap: 8px; min-width: 0;
}
.chat-ten > span:not(.cham):not(.so-do) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-ten .cham {
    width: 8px; height: 8px; border-radius: 50%; background: #4CAF50;
    animation: nhapNhay 2.4s infinite; flex-shrink: 0;
}
@keyframes nhapNhay { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
.chat-nut-thu { background: none; border: none; color: var(--chu-mo); cursor: pointer; font-size: 1rem; }
.chat-than {
    height: 284px; overflow-y: auto; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 9px;
}
.tin { display: flex; gap: 8px; align-items: flex-start; }
.tin .anh-tron { width: 24px; height: 24px; font-size: 0.62rem; }
.tin .noi-dung {
    background: rgba(255, 255, 255, 0.05); padding: 7px 11px; border-radius: 8px 8px 8px 2px;
    font-size: 0.83rem; line-height: 1.5; max-width: 208px; word-wrap: break-word;
}
.tin .nguoi-gui { font-weight: 600; font-size: 0.72rem; margin-bottom: 2px; color: var(--xanh); }
.tin.cua-toi .noi-dung { background: rgba(255, 70, 85, 0.14); }
.tin.cua-toi .nguoi-gui { color: var(--do); }
.chat-nhap { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--vien); }
.chat-nhap input {
    flex: 1; padding: 9px 12px; background: var(--nen); border: 1px solid var(--vien);
    border-radius: var(--bo-nho); color: var(--chu); font-size: 0.85rem; outline: none; font-family: var(--font-chu);
}
.chat-nhap input:focus { border-color: var(--do); }
.chat-nhap button {
    padding: 9px 14px; background: var(--do); color: #fff; border: none; border-radius: var(--bo-nho);
    cursor: pointer; font-family: var(--font-de); font-weight: 600; font-size: 0.8rem;
}
.chat-nhap button:hover { background: var(--do-dam); }

/* ============ ẢNH THẬT LẤY TỪ DỮ LIỆU GAME ============ */
.chip-dac-vu {
    width: 34px; height: 34px; border-radius: var(--bo-nho); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; font-family: var(--font-de); font-weight: 700; color: #0F1923;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.chip-dac-vu img { width: 100%; height: 100%; object-fit: cover; display: block; }

.huy-hieu { vertical-align: middle; object-fit: contain; flex-shrink: 0; }
.huy-hieu-trong { color: var(--chu-mo); }
.o-hang { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.the-hang .gia-tri .huy-hieu { margin-right: 2px; }
.the-nho .huy-hieu { margin-right: 2px; }

.the-dac-vu-tu { position: relative; overflow: hidden; min-height: 134px; }
.the-dac-vu-tu .anh-dac-vu-tu {
    position: absolute; right: -20px; bottom: -10px; height: 132px;
    object-fit: contain; opacity: 0.92; pointer-events: none;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
}
.the-dac-vu-tu .gia-tri, .the-dac-vu-tu .mo, .the-dac-vu-tu .nhan { position: relative; z-index: 2; }

.muc-ban-do img.hinh {
    width: 34px; height: 34px; object-fit: contain; border-radius: var(--bo-nho);
    background: rgba(255, 255, 255, 0.05); flex-shrink: 0;
}

/* ============ NHẬT KÝ ĐỒNG BỘ ============ */
.khung-log {
    background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo-nho);
    padding: 14px 16px; max-height: 440px; overflow-y: auto;
    font-family: var(--font-ma); font-size: 0.83rem; line-height: 1.75;
}
.dong-log { color: var(--chu-phu); white-space: pre-wrap; }
.dong-log.ok  { color: var(--xanh); }
.dong-log.loi { color: var(--do-nhat); }

/* ============ THANH TIẾN ĐỘ MẺ NẠP NỀN ============
   Mẻ "Nạp toàn cầu" chạy nền, tien_do.js hỏi máy chủ mỗi giây rồi đổ số vào
   đây. Ba màu ba trạng thái: đang chạy (xanh, có vệt sáng chạy qua), xong
   (xanh đặc), hỏng (đỏ).                                                   */
.tien-do-nap {
    border: 1px solid var(--vien); border-radius: var(--bo-nho);
    background: var(--nen-mat); padding: 14px 16px; margin: 0 0 16px;
}
.tien-do-dau {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.88rem;
}
.tien-do-dau .mo { font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.tien-do-ray {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}
.tien-do-ray > i {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: var(--xanh); transition: width 0.4s ease;
}
.tien-do-ray > i.dang-chay {
    background: linear-gradient(90deg, var(--xanh), #6ce8ff, var(--xanh));
    background-size: 200% 100%; animation: tien-do-chay 1.1s linear infinite;
}
.tien-do-ray > i.xong   { background: var(--xanh); }
.tien-do-ray > i.co-loi { background: var(--do); }

@keyframes tien-do-chay { to { background-position: -200% 0; } }

.tien-do-nap .khung-log { max-height: 180px; }

/* Ai tắt hiệu ứng chuyển động thì bỏ luôn vệt sáng chạy — thanh vẫn dài ra
   bình thường nên không mất thông tin gì.                                   */
@media (prefers-reduced-motion: reduce) {
    .tien-do-ray > i { transition: none; }
    .tien-do-ray > i.dang-chay { animation: none; background: var(--xanh); }
}

.nhan-nguon {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
    border-radius: 999px; font-family: var(--font-de); font-weight: 600; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.6px; border: 1px solid;
    white-space: nowrap;
}
.nhan-nguon.that { color: var(--xanh); border-color: rgba(0, 255, 200, 0.35); background: rgba(0, 255, 200, 0.10); }
.nhan-nguon.mau  { color: var(--vang); border-color: rgba(255, 214, 74, 0.35); background: rgba(255, 214, 74, 0.10); }
.nhan-nguon.mau:hover { background: rgba(255, 214, 74, 0.2); }

/* ============ BẠN BÈ ============ */
.dong-ban {
    display: flex; align-items: center; gap: 12px; padding: 11px 0;
    border-bottom: 1px solid var(--vien); flex-wrap: wrap;
}
.dong-ban:last-child { border-bottom: none; }
.dong-ban .anh-tron { width: 40px; height: 40px; font-size: 0.88rem; }
.ban-ten { flex: 1; min-width: 160px; }
.ban-ten b { font-size: 0.95rem; }
.ban-phu { font-size: 0.76rem; color: var(--chu-phu); margin-top: 2px; }
.ban-hang { min-width: 124px; font-size: 0.85rem; }
.ban-nut { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.loi-nhan {
    margin: -4px 0 10px 52px; font-size: 0.84rem; color: var(--chu-phu);
    background: rgba(255, 255, 255, 0.03); border-left: 2px solid var(--xanh);
    padding: 8px 12px; border-radius: var(--bo-nho);
}
.cham-online {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #4CAF50; margin-left: 6px; vertical-align: middle;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.7);
}
.so-do {
    display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
    padding: 0 5px; background: var(--do); color: #fff; border-radius: 9px;
    font-size: 0.69rem; font-weight: 700; text-align: center;
}

/* ---- Danh sách bạn bè bên trong khung chat ---- */
.chat-dong-ban {
    display: flex; align-items: center; gap: 10px; padding: 9px 6px;
    border-radius: var(--bo-nho); cursor: pointer; transition: var(--chuyen);
}
.chat-dong-ban:hover { background: rgba(255, 255, 255, 0.05); }
.chat-dong-ban .anh-tron { width: 32px; height: 32px; font-size: 0.7rem; }
.cdb-giua { flex: 1; min-width: 0; }
.cdb-ten { font-size: 0.86rem; font-weight: 600; }
.cdb-phu {
    font-size: 0.74rem; color: var(--chu-mo); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.chat-trong {
    padding: 18px 12px; text-align: center; color: var(--chu-mo);
    font-size: 0.82rem; line-height: 1.65; display: block;
}
.chat-loi-moi {
    display: block; padding: 9px 12px; margin: 6px 0;
    background: rgba(255, 70, 85, 0.10); border: 1px solid rgba(255, 70, 85, 0.3);
    border-radius: var(--bo-nho); font-size: 0.8rem; color: var(--do);
}
.chat-nut-ve {
    background: none; border: none; color: var(--chu-phu); cursor: pointer;
    font-size: 1rem; padding: 0 4px; display: none;
}
.chat-nut-ve:hover { color: var(--chu); }

/* ============ MÀN HÌNH NHỎ ============ */
@media (max-width: 1150px) {
    /*  minmax(0, 1fr) chứ KHÔNG phải 1fr.
        1fr có kích thước tối thiểu ngầm là min-content, mà cột phải chứa bảng
        số liệu rộng 693px — thế là cả cột trái bị kéo rộng theo, tràn ra ngoài
        màn hình điện thoại (đo được: khung 349px, cột 693px). minmax(0, 1fr)
        cho phép co nhỏ hơn min-content, để mấy bảng bên trong tự cuộn ngang
        trong khung .boc-bang của chúng.                                       */
    .than-ho-so { grid-template-columns: minmax(0, 1fr); }
    .khung-ct   { grid-template-columns: 1fr; }
    .luoi-2     { grid-template-columns: 1fr; }
    .khung-ve   { flex-direction: column; }
    .cot-ben    { width: 100%; }
    .ds-ban-do  { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    .muc-ban-do { white-space: nowrap; }
    .dong-tran  { grid-template-columns: 4px 1fr 92px; row-gap: 10px; }
    .dong-tran .gio { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 860px) {
    .thanh-nav { height: auto; flex-wrap: wrap; padding: 10px 16px; }
    .nav-menu  { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; }
    .nav-menu .muc { padding: 6px 10px; font-size: 0.8rem; }
    .boc, .boc-rong { padding: 22px 16px; }
    .o-tim { flex-direction: column; }
    .ho-so-trong { padding: 16px 16px 0; gap: 14px; }
    .anh-dai-dien { width: 62px; height: 62px; font-size: 1.5rem; }
    .luoi-so { grid-template-columns: repeat(2, 1fr); }
    .khung-chat { width: 100%; border-radius: 8px 8px 0 0; }
    .nhan-vien { min-width: auto; width: 100%; }
    .chan-trang { padding-bottom: 96px; }
}

/* ===========================================================================
   Ô LỌC DẠNG XỔ XUỐNG  (thay cho dãy "viên thuốc" cũ ở hồ sơ)
   =========================================================================== */
.thanh-loc { flex-direction: row; flex-wrap: wrap; gap: 14px; align-items: flex-end; }

.o-loc { display: flex; flex-direction: column; gap: 5px; min-width: 190px; }
.nhan-loc {
    font-family: var(--font-de); font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.2px; color: var(--chu-mo);
}
.o-loc select {
    appearance: none; -webkit-appearance: none;
    padding: 9px 32px 9px 12px;
    background: var(--nen-the) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23A5B0BD' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 11px;
    border: 1px solid var(--vien); border-radius: var(--bo-nho);
    color: var(--chu); font-family: var(--font-chu); font-size: 0.88rem;
    cursor: pointer; transition: var(--chuyen);
}
.o-loc select:hover  { border-color: var(--vien-sang); }
.o-loc select:focus  { outline: none; border-color: var(--do); box-shadow: 0 0 0 3px rgba(255, 70, 85, 0.14); }
.o-loc select option { background: var(--nen-the); color: var(--chu); }

/* ===========================================================================
   TRANG CHI TIẾT TRẬN ĐẤU  (/Tran)
   =========================================================================== */
.bang-tran { position: relative; overflow: hidden; border-bottom: 1px solid var(--vien); }
.bang-tran .nen-tran {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.16; filter: saturate(0.7);
}
.bang-tran::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11, 18, 25, 0.55), var(--nen) 96%);
}
.bang-tran.thang { box-shadow: inset 4px 0 0 var(--xanh); }
.bang-tran.thua  { box-shadow: inset 4px 0 0 var(--do); }
.bang-tran.hoa   { box-shadow: inset 4px 0 0 var(--chu-mo); }

.trong-bang-tran {
    position: relative; z-index: 1;
    max-width: 1180px; margin: 0 auto; padding: 26px 24px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.tran-ban-do {
    font-family: var(--font-de); font-size: 1.9rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; line-height: 1.1;
}
.tran-phu { color: var(--chu-phu); font-size: 0.9rem; margin-top: 4px; }
.tran-gio { color: var(--chu-mo); font-size: 0.83rem; margin-top: 6px; }

.tran-ti-so { display: flex; align-items: center; gap: 12px; font-family: var(--font-de); }
.tran-ti-so span { font-size: 3rem; font-weight: 700; line-height: 1; }
.tran-ti-so .thang { color: var(--xanh); text-shadow: var(--sang-xanh); }
.tran-ti-so .thua  { color: var(--do); }
.tran-ti-so .gach  { color: var(--chu-mo); font-size: 2rem; }

/* Tỉ số kèm tên hai phe hai bên: "Phe Đỏ  3 : 13  Phe Xanh" */
.khoi-ti-so { display: flex; align-items: center; gap: 16px; }
.nhan-ben {
    font-family: var(--font-de); font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.4px; color: var(--chu-mo);
    writing-mode: horizontal-tb; white-space: nowrap;
}
.nhan-ben.do   { color: var(--do); }
.nhan-ben.xanh { color: var(--xanh-doi); }

/* --- Dải diễn biến từng hiệp --- */
.chu-thich-hiep {
    display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px;
    font-size: 0.76rem; color: var(--chu-mo);
}
.chu-thich-hiep span { display: inline-flex; align-items: center; gap: 5px; }
.chu-thich-hiep i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chu-thich-hiep i.o-do   { background: var(--do); }
.chu-thich-hiep i.o-xanh { background: var(--xanh-doi); }

.dai-hiep { display: flex; align-items: flex-start; gap: 4px; padding-bottom: 4px; }
.hiep { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.hiep-o {
    width: 26px; height: 26px; border-radius: var(--bo-nho);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; line-height: 1;
    background: var(--nen-the); border: 1px solid var(--vien); color: var(--chu-mo);
    transition: var(--chuyen);
}
.hiep-o.do   { background: rgba(255, 70, 85, 0.20);  border-color: rgba(255, 70, 85, 0.6);  color: var(--do-nhat); }
.hiep-o.xanh { background: rgba(74, 144, 217, 0.20); border-color: rgba(74, 144, 217, 0.6); color: #9CC6EE; }
.hiep:hover .hiep-o { transform: translateY(-2px); filter: brightness(1.3); }
.hiep-so { font-family: var(--font-ma); font-size: 0.64rem; color: var(--chu-mo); }
.hiep-ngat {
    width: 1px; align-self: stretch; margin: 0 7px;
    background: var(--vien-sang); flex: none;
}

/* Vệt màu bên trái khối phe, khớp với màu trên dải hiệp */
.khoi-phe.vach-do   { border-left: 3px solid var(--do); }
.khoi-phe.vach-xanh { border-left: 3px solid var(--xanh-doi); }

/* Hạng trung bình của phe, in cạnh tên đội */
.hang-tb {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.78rem; color: var(--chu-phu); white-space: nowrap;
}

/* --- Một phe --- */
.khoi-phe {
    background: linear-gradient(180deg, var(--nen-the), var(--nen-mat));
    border: 1px solid var(--vien); border-radius: var(--bo);
    margin-bottom: 18px; overflow: hidden;
}
.khoi-phe.phe-thang { border-left: 3px solid var(--xanh); }
.khoi-phe.phe-thua  { border-left: 3px solid var(--do); }

.dau-phe {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 18px; border-bottom: 1px solid var(--vien);
    background: rgba(0, 0, 0, 0.06);
}
.ten-phe {
    font-family: var(--font-de); font-size: 1.05rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.1px;
}
.the-ket-qua {
    font-family: var(--font-de); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 1.4px; padding: 3px 9px; border-radius: var(--bo-nho);
}
.the-ket-qua.thang { color: var(--xanh); background: rgba(0, 255, 200, 0.1); border: 1px solid rgba(0, 255, 200, 0.35); }
.the-ket-qua.thua  { color: var(--do);   background: rgba(255, 70, 85, 0.1);  border: 1px solid rgba(255, 70, 85, 0.35); }
.diem-phe {
    margin-left: auto; font-family: var(--font-de);
    font-size: 1.7rem; font-weight: 700; line-height: 1;
}

/* --- Bảng điểm --- */
.cuon-ngang { overflow-x: auto; }
/* min-width lớn vì bảng có 16 cột như tracker.gg — hẹp hơn thì .cuon-ngang
   cho cuộn ngang, chứ đừng ép chữ xuống dòng thành bảng nát.                */
table.bang-diem { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 1080px; }
table.bang-diem th {
    font-family: var(--font-de); font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; color: var(--chu-mo);
    padding: 9px 8px; text-align: center; border-bottom: 1px solid var(--vien);
    white-space: nowrap;
}
table.bang-diem th.trai { text-align: left; padding-left: 18px; }
table.bang-diem td { padding: 9px 8px; text-align: center; border-bottom: 1px solid rgba(34, 50, 67, 0.55); }
table.bang-diem tr:last-child td { border-bottom: none; }
table.bang-diem tbody tr:hover { background: rgba(255, 255, 255, 0.032); }

.dong-diem.toi { background: rgba(0, 255, 200, 0.055); }
.dong-diem.toi:hover { background: rgba(0, 255, 200, 0.085); }

.o-nguoi { display: flex; align-items: center; gap: 10px; text-align: left !important; padding-left: 18px !important; min-width: 210px; }
.khoi-ten { min-width: 0; }
.ten-nguoi { font-weight: 600; color: var(--chu); white-space: nowrap; }
.ten-nguoi:hover { color: var(--xanh); }
.tag-nho { color: var(--chu-mo); font-weight: 400; font-size: 0.86em; }
.duoi-ten { color: var(--chu-mo); font-size: 0.76rem; margin-top: 1px; white-space: nowrap; }

.o-hang { width: 46px; }
.o-hang .huy-hieu { display: block; margin: 0 auto; }

.o-acs { width: 78px; }
.acs-so { font-family: var(--font-de); font-size: 1.02rem; font-weight: 700; line-height: 1.15; }
.acs-nen { height: 3px; border-radius: 2px; background: var(--vien); overflow: hidden; margin-top: 3px; }
.acs-nen i { display: block; height: 100%; background: var(--do); border-radius: 2px; }

table.bang-diem td.o-so { font-family: var(--font-de); font-size: 0.95rem; font-weight: 600; }
table.bang-diem td.o-so.manh { color: var(--chu); }
table.bang-diem td.o-so.duong { color: var(--xanh); }
table.bang-diem td.o-so.am    { color: var(--do-nhat); }
table.bang-diem td.o-so.bang  { color: var(--chu-mo); }

.anh-vu-khi { height: 20px; width: auto; vertical-align: middle; opacity: 0.9; }
table.du-lieu td.trai, table.du-lieu th.trai { text-align: left; }

@media (max-width: 860px) {
    .trong-bang-tran { padding: 18px 16px; }
    .tran-ban-do { font-size: 1.4rem; }
    .tran-ti-so span { font-size: 2.2rem; }
    .o-loc { min-width: 0; width: 100%; }
}

/* ===========================================================================
   THANH MẠCH ĐẬP — "đang theo dõi · đồng bộ sau 2:47 · [Đồng bộ ngay]"
   =========================================================================== */
.nhip {
    display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin-top: 12px; padding: 6px 8px 6px 12px;
    background: rgba(0, 0, 0, 0.28); border: 1px solid var(--vien);
    border-radius: 999px; font-size: 0.79rem; color: var(--chu-phu);
}
.nhip-cham {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--xanh); box-shadow: 0 0 0 0 rgba(0, 255, 200, 0.55);
    animation: nhip-dap 2s ease-out infinite; flex: none;
}
.nhip-cham.loi { background: var(--do); animation: none; box-shadow: none; }
.nhip-cham.tat { background: var(--chu-mo); animation: none; box-shadow: none; }
@keyframes nhip-dap {
    0%   { box-shadow: 0 0 0 0 rgba(0, 255, 200, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(0, 255, 200, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 200, 0); }
}
.nhip-chu { white-space: nowrap; }
.nhip-dem {
    font-family: var(--font-ma); font-size: 0.78rem; color: var(--chu-mo);
    white-space: nowrap;
}
/*  Dấu chấm ngăn cách chỉ hiện khi CÓ số. Đồng hồ rỗng (đang đồng bộ, hay
 *  chưa biết) mà vẫn in dấu chấm thì thanh có một dấu "·" lửng lơ.
 *  :empty bắt đúng chuyện đó — phần tử không có nội dung nào.  */
.nhip-dem:not(:empty)::before { content: '·'; margin-right: 7px; color: var(--vien-sang); }
/*  Nút đồng bộ giờ chỉ còn một hình hai mũi tên tròn, không còn chữ.
 *  Ép hình VUÔNG và canh giữa bằng flex: nút chỉ chứa mỗi cái <svg>, để
 *  padding kiểu cũ thì nó ra hình chữ nhật dẹt và mũi tên lệch sang một bên.  */
.nhip-nut {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: 999px; cursor: pointer;
    background: rgba(255, 70, 85, 0.12); border: 1px solid rgba(255, 70, 85, 0.4);
    color: var(--do-nhat); transition: var(--chuyen); flex-shrink: 0;
}
.nhip-nut:hover:not(:disabled) { background: rgba(255, 70, 85, 0.2); color: var(--chu); }
.nhip-nut:disabled { opacity: 0.45; cursor: default; }
.nhip-nut svg { display: block; }

/*  Đang lấy dữ liệu thì cái nút tự quay — thay cho dòng chữ "đang lấy dữ
 *  liệu…" cũ. Quay 1,1 giây một vòng: nhanh hơn thì trông sốt ruột, chậm hơn
 *  thì tưởng treo.
 *  Quay CHÍNH CÁI SVG chứ không quay cả nút, để viền tròn và nền đứng yên —
 *  quay cả nút thì viền cũng quay theo, nhìn rung mắt.  */
.nhip-nut.dang-quay svg { animation: nhip-xoay 1.1s linear infinite; }
@keyframes nhip-xoay { to { transform: rotate(360deg); } }

/*  Ai bật "giảm chuyển động" trong Windows/Android thì đừng quay nữa — mờ đi
 *  là đủ để biết nó đang bận. (cùng quy tắc với mục E10 work.txt)  */
@media (prefers-reduced-motion: reduce) {
    .nhip-nut.dang-quay svg { animation: none; }
    .nhip-nut.dang-quay     { opacity: 0.55; }
}

/* --- Thanh Live Update khi nằm trên thanh điều hướng --- */
.thanh-nav .nhip {
    margin-top: 0; padding: 4px 6px 4px 10px; font-size: 0.74rem;
    background: rgba(0, 0, 0, 0.35); gap: 7px;
}
.thanh-nav .nhip .nhip-dem { font-size: 0.72rem; }
.thanh-nav .nhip .nhip-nut { padding: 3px 9px; font-size: 0.7rem; }
/*  CHÚ Ý: KHÔNG khai lại .nav-phai ở đây.
    Bản cũ đặt "flex-wrap: wrap" mà quên "flex-shrink: 0", đè mất khai báo gốc
    ở mục THANH ĐIỀU HƯỚNG, nên khối bên phải bị bóp và nút Đăng xuất biến mất
    ở màn hình cỡ vừa. Quy tắc của .nav-phai chỉ nằm ở MỘT chỗ duy nhất.        */

@media (max-width: 1180px) {
    .thanh-nav .nhip .nhip-dem { display: none; }
}
/*  Thanh Live Update xuống hàng riêng SỚM HƠN menu: 8 mục menu + thanh nhịp +
    hai nút là quá rộng, nhường chỗ cho nút Đăng xuất trước đã.                */
@media (max-width: 1120px) {
    .thanh-nav { height: auto; flex-wrap: wrap; padding: 8px 20px; }
    .thanh-nav .nhip { order: 4; width: 100%; justify-content: center; margin-top: 2px; }
    .thanh-nav .nhip .nhip-dem { display: inline; }
}

/* ===========================================================================
   MÀN HÌNH ĐIỆN THOẠI — CHẶN TRÀN NGANG
   ---------------------------------------------------------------------------
   ĐO ĐƯỢC TRƯỚC KHI SỬA, ở khổ 390px (iPhone dựng đứng):

       toàn trang   : rộng 725px  ->  tràn ra ngoài màn hình 335px
       .logo        : 218px
       .nav-menu    : 341px  (tự cuộn ngang bên trong — không phải thủ phạm)
       .nav-phai    : 705px  <-- thủ phạm

   .nav-phai để flex-wrap:nowrap + flex-shrink:0 nên nó KHÔNG chịu co, cứ thế
   đẩy cả trang rộng ra. Người dùng phải vuốt ngang mới đọc hết, chữ thì bị
   cắt — đúng cái "xấu" nhìn thấy trên điện thoại.

   Riêng cục Live Update chiếm 341px một mình, vì khối 1120px ở trên cho nó
   width:100%. Trên máy tính bảng thì hợp lý, xuống điện thoại thì phải thu
   lại — nên mấy dòng dưới phải viết .thanh-nav .nhip cho đủ độ ưu tiên,
   viết .nhip trơn là bị luật trên đè mất.

   SAU KHI SỬA: toàn trang 381px (vừa khít 390px), thanh menu cao 125px.
   =========================================================================== */

@media (max-width: 860px) {
    .thanh-nav { row-gap: 6px; gap: 8px; padding: 8px 12px; }
    .logo      { min-width: 0; flex-shrink: 1; }

    /*  Cho phép xuống hàng và co lại — đây là nút thắt của cả trang  */
    .nav-phai  {
        flex-wrap: wrap; justify-content: flex-end; align-items: center;
        min-width: 0; max-width: 100%; row-gap: 6px;
    }
    .nav-phai .nut, .nav-phai .nut-vien { flex-shrink: 1; min-width: 0; }
    .nav-phai .nut-vien { max-width: 38vw; }   /* tên dài thì cắt bằng ba chấm */

    /*  Live Update: bỏ ĐỒNG HỒ ĐẾM cho đỡ chật, nhưng GIỮ NÚT "Đồng bộ ngay".
        Bản đầu ẩn luôn cả nút — hoá ra trên điện thoại thành nhìn được mà
        không bấm được, vì nút ấy chính là thứ duy nhất bấm được trong khối
        này (xem nhip.js: nut.addEventListener('click', ...)).                */
    .thanh-nav .nhip { width: auto; order: 0; margin-top: 0; gap: 6px; padding: 4px 8px; }
    .thanh-nav .nhip .nhip-dem { display: none; }
    /*  Nới cao lên ~32px: ngón tay bấm chứ không phải con trỏ chuột  */
    .thanh-nav .nhip .nhip-nut { display: inline-block; padding: 8px 12px; font-size: 0.74rem; }
}

@media (max-width: 560px) {
    .logo-hinh { width: 28px; height: 28px; font-size: 0.95rem; }
    .logo      { font-size: 0.98rem; }

    /*  Màn hẹp thì bỏ chữ "Live Update On", chỉ còn đèn báo + nút bấm.
        Đèn xanh/đỏ đã nói đủ trạng thái, còn nút thì phải giữ.               */
    .thanh-nav .nhip .nhip-chu { display: none; }

    .nav-phai .nut  { padding: 6px 9px; font-size: 0.74rem; }
    .nav-menu .muc  { padding: 5px 9px; font-size: 0.76rem; }
}

/* ===========================================================================
   TỔNG QUAN HỒ SƠ — VAI TRÒ · ĐỘ CHÍNH XÁC · VŨ KHÍ HAY DÙNG
   =========================================================================== */
.luoi-vai-tro { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.o-vai-tro {
    background: var(--nen-mat); border: 1px solid var(--vien);
    border-left: 3px solid var(--tim); border-radius: var(--bo); padding: 13px 15px;
}
.vt-ten {
    font-family: var(--font-de); font-size: 0.92rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px;
}
.vt-wr, .vt-kda { font-family: var(--font-de); font-size: 1.34rem; font-weight: 700; line-height: 1.2; }
.vt-kda { margin-top: 8px; }
.vt-nhan {
    display: block; font-family: var(--font-chu); font-size: 0.68rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1px; color: var(--chu-mo); margin-top: 1px;
}
.vt-td { color: var(--chu-mo); font-size: 0.78rem; margin-top: 2px; }

.do-chinh-xac { display: flex; flex-direction: column; gap: 12px; }
.dong-trung { display: grid; grid-template-columns: 52px 62px 1fr 90px; align-items: center; gap: 12px; }
.tr-nhan {
    font-family: var(--font-de); font-size: 0.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; color: var(--chu-phu);
}
.tr-pt { font-family: var(--font-de); font-size: 1.06rem; font-weight: 700; }
.tr-thanh {
    display: block; height: 7px; border-radius: 4px;
    background: var(--vien); overflow: hidden;
}
.tr-thanh i { display: block; height: 100%; border-radius: 4px; background: var(--xanh); }
.tr-thanh.nho { height: 4px; margin-top: 4px; }
.tr-so { color: var(--chu-mo); font-size: 0.79rem; text-align: right; }

.luoi-sung { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.o-sung {
    position: relative; text-align: center; padding: 16px 12px 14px;
    background: var(--nen-mat); border: 1px solid var(--vien); border-radius: var(--bo);
}
.sung-hang {
    position: absolute; top: 8px; left: 10px;
    font-family: var(--font-de); font-size: 0.78rem; font-weight: 700; color: var(--chu-mo);
}
.sung-anh { height: 34px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 8px; }
.sung-ten { font-family: var(--font-de); font-size: 1rem; font-weight: 700; letter-spacing: 0.5px; }
.sung-so { font-family: var(--font-de); font-size: 1.3rem; font-weight: 700; margin-top: 8px; }

@media (max-width: 860px) {
    .dong-trung { grid-template-columns: 46px 56px 1fr; }
    .dong-trung .tr-so { grid-column: 2 / -1; text-align: left; }
}

/* Dòng mùa giải bấm được, dẫn tới trọn danh sách trận của mùa đó */
.lien-ket-mua { color: var(--chu); }
.lien-ket-mua:hover { color: var(--xanh); }

/* ===========================================================================
   LỊCH SỬ ĐẤU GOM THEO NGÀY  (giống dải "Aug 19 · 4 · 0W 4L" của tracker.gg)
   =========================================================================== */
.dai-ngay {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px;
    padding: 11px 16px; margin: 18px 0 10px;
    background: var(--nen-mat); border: 1px solid var(--vien);
    border-left: 3px solid var(--vien-sang); border-radius: var(--bo);
}
.dai-ngay:first-child { margin-top: 0; }
.dn-ngay {
    font-family: var(--font-de); font-size: 0.98rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px; margin-right: auto;
}
.dn-so {
    display: block; font-family: var(--font-chu); font-size: 0.72rem;
    font-weight: 500; letter-spacing: 0; color: var(--chu-mo); text-transform: none;
}
.dn-td { font-family: var(--font-de); font-size: 1rem; font-weight: 700; }
.o-ngay { text-align: right; min-width: 62px; }
.o-ngay .v { font-family: var(--font-de); font-size: 0.98rem; font-weight: 700; line-height: 1.2; }
.o-ngay .v.duong { color: var(--xanh); }
.o-ngay .v.am    { color: var(--do-nhat); }
.o-ngay .v.bang  { color: var(--chu-mo); }
.o-ngay .n {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.9px;
    color: var(--chu-mo); margin-top: 1px;
}
.nhom-ngay { display: block; }

@media (max-width: 860px) {
    .dai-ngay { gap: 8px 14px; padding: 10px 12px; }
    .dn-ngay { width: 100%; margin-right: 0; }
    .o-ngay { min-width: 54px; text-align: left; }
}

/* ============ BIỂU ĐỒ ĐƯỜNG THEO MÙA ============
   Vẽ bằng SVG tĩnh trong HoSoServlet (hàm bieuDoMua). Màu và cỡ chữ để hết
   ngoài này để đổi giao diện không phải đụng vào mã sinh hình.            */
.bieu-do-mua {
    border: 1px solid var(--vien); border-radius: var(--bo-nho);
    background: var(--nen-mat); padding: 14px 16px 10px; margin: 0 0 18px;
}
.bieu-do-mua .do-thi { width: 100%; height: auto; display: block; overflow: visible; }

.chu-thich-bd {
    display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px;
    font-size: 0.78rem; color: var(--chu-phu);
}
.chu-thich-bd span { display: inline-flex; align-items: center; gap: 6px; }
.chu-thich-bd i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }

.do-thi .luoi    { stroke: var(--vien); stroke-width: 1; }
.do-thi .vach-50 { stroke: var(--vien-sang); stroke-width: 1; stroke-dasharray: 4 4; }

.do-thi .duong { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.do-thi .duong.acs { stroke: var(--xanh); }
.do-thi .duong.ty  { stroke: var(--do); }

.do-thi .cham     { stroke: var(--nen-mat); stroke-width: 2; }
.do-thi .cham.acs { fill: var(--xanh); }
.do-thi .cham.ty  { fill: var(--do); }

.do-thi text { font-family: var(--font-de); fill: var(--chu-mo); font-size: 11px; }
.do-thi .so-truc.trai { text-anchor: end; }
.do-thi .so-truc.phai { text-anchor: start; }
.do-thi .ten-muc { text-anchor: middle; fill: var(--chu-phu); font-size: 11px; }

@media (max-width: 860px) {
    .do-thi text { font-size: 13px; }
}

/* ============ TRANG SO SÁNH HAI NGƯỜI CHƠI ============
   Mỗi dòng ba phần: số bên trái — nhãn + thanh chia ở giữa — số bên phải.
   Thanh chia dùng đúng tỉ lệ giữa hai con số, nên liếc một cái là biết ai hơn
   bao nhiêu, không phải đọc từng con số.                                    */
.ss-dau {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--vien);
}
.ss-nguoi { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 240px; }
/* row-reverse đảo luôn chiều trục chính, nên flex-START mới là mép PHẢI.
   Để flex-end như bản đầu thì cả khối bị dồn vào giữa, dính vào chữ VS. */
.ss-nguoi.phai { justify-content: flex-start; text-align: right; flex-direction: row-reverse; }
.ss-vs {
    font-family: var(--font-de); font-weight: 700; font-size: 1.1rem;
    color: var(--chu-mo); letter-spacing: 0.08em;
}
.anh-dai-dien.nho { width: 52px; height: 52px; font-size: 1.25rem; flex-shrink: 0; }
/* Tên hạng bên phải bị cắt thành "Bất..." vì khối co lại — cấm xuống dòng
   và cho phép nó tràn ra thay vì bị bóp.                                        */
.ss-nguoi .o-hang { white-space: nowrap; }
.ss-nguoi > div    { min-width: 0; }

.ss-bang { display: flex; flex-direction: column; gap: 2px; }
.ss-dong {
    display: grid; grid-template-columns: 110px 1fr 110px; align-items: center;
    gap: 12px; padding: 9px 4px; border-radius: var(--bo-nho);
}
.ss-dong:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.ss-dong:hover          { background: rgba(255, 255, 255, 0.05); }

.ss-so {
    font-family: var(--font-de); font-weight: 700; font-size: 1rem;
    font-variant-numeric: tabular-nums; color: var(--chu-phu); text-align: center;
}
.ss-so.hon { color: var(--xanh); }

.ss-nhan {
    text-align: center; font-size: 0.78rem; color: var(--chu-mo);
    margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.04em;
}
.ss-ray { display: flex; height: 6px; gap: 2px; }
.ss-ray > i {
    display: block; height: 100%; background: var(--vien-sang);
    transition: width 0.3s ease;
}
.ss-ray > i.ben-a { border-radius: 999px 0 0 999px; }
.ss-ray > i.ben-b { border-radius: 0 999px 999px 0; }
.ss-ray > i.hon   { background: var(--xanh); }

.ss-hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ss-ten-cot {
    font-family: var(--font-de); font-size: 0.9rem; margin: 0 0 10px;
    color: var(--chu-phu); font-weight: 600;
}
.ss-cot-dv { display: flex; flex-direction: column; gap: 8px; }
.ss-dv {
    display: flex; align-items: center; gap: 10px; padding: 7px 9px;
    background: var(--nen-mat); border: 1px solid var(--vien);
    border-radius: var(--bo-nho); font-size: 0.85rem;
}

@media (max-width: 860px) {
    .ss-dong { grid-template-columns: 78px 1fr 78px; gap: 8px; }
    .ss-so { font-size: 0.88rem; }
    .ss-hai-cot { grid-template-columns: 1fr; }
    .ss-nguoi.phai { flex-direction: row; text-align: left; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .ss-ray > i { transition: none; }
}

/* ============ ẢNH ĐẠI DIỆN THẬT (PLAYER CARD) ============
   oDaiDien() trong main.hql in ra HAI lớp lồng nhau:

       <div class="anh-dai-dien">            <- ô vuông / tròn có sẵn từ trước
         <span class="chu-dau">L</span>      <- chữ cái đầu, NẰM DƯỚI
         <img src="...smallart.png">         <- ảnh thẻ thật, PHỦ LÊN TRÊN
       </div>

   Phủ lên chứ không thay thế, vì ba lýo:
     · lúc ảnh chưa tải xong ô vẫn có hình, không nhấp nháy khoảng trắng
     · mất mạng thì onerror gỡ thẻ <img>, lộ lại chữ cái đầu y như cũ
     · ai chưa chạy VN_Checker_AnhThe.sql thì không có <img> nào cả, vẫn chạy đúng

   Tấm thẻ người chơi là ảnh vuông nhưng phần đẹp nằm ở giữa — object-fit: cover
   để nó lấp đầy ô mà không bị bóp méo.                                       */
.anh-dai-dien, .anh-tron { position: relative; overflow: hidden; }

.anh-dai-dien > img, .anh-tron > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}

.anh-dai-dien > .chu-dau, .anh-tron > .chu-dau {
    position: relative; z-index: 0; line-height: 1;
}

/* Ô tròn trong danh sách thì bọ ảnh theo luôn */
.anh-tron > img { border-radius: 50%; }

/* Tấm thẻ bản WIDE làm nền băng rôn hồ sơ — đúng kiểu tracker.gg.
   Đặt dưới cùng (z-index 0) và làm mờ đi, vì lớp phủ .bang-ho-so::after chỉ
   tối ở phía dưới — để ảnh sáng nguyên là chữ tên người chơi chìm mất.       */
.bang-ho-so > .nen-the {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
    opacity: 0.34;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
            mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}
.bang-ho-so::after { z-index: 1; }

/* ============ BẢNG "ĐÃ GẶP" (Encounters) ============
   Bản đầu để cột tự co giãn, kết quả là "1 (thắng 1 · 100%)" gãy làm ba dòng
   còn huy hiệu hạng thì dính vào số trận bên cạnh. Nay cố định bề rộng cột
   (đặt thẳng trên thẻ <th>) và đẩy phần chú thích xuống hẳn dòng dưới.       */
/* KHÔNG dùng table-layout: fixed ở đây. Đã thử, và cột "Hạng" bị bóp còn
   ~55px nên "Chưa Xếp Hạng" cụt thành "Ch...". Để trình duyệt tự co cột theo
   nội dung thì đúng hơn — be rộng ở thẻ <th> chỉ còn là gợi ý.                 */
.bang-gap td, .bang-gap th { vertical-align: middle; }
/* Cột số căn phải nằm ngay sát nhãn hạng bên trái, trông như dính vào nhau */
.bang-gap td.phai, .bang-gap th.phai { padding-left: 16px; }

/* Dòng phụ nhỏ nằm dưới con số chính */
.phu-dong {
    font-size: 0.72rem; line-height: 1.35; margin-top: 2px;
    white-space: nowrap;
}
.khong-xuong-dong { white-space: nowrap; }

/* Nhãn hạng trong bảng: cắt bớt tên dài thay vì đẩy cột bên cạnh */
.bang-gap .o-hang {
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap; font-size: 0.82rem;
}

/* ==========================================================================
   BA TRẠNG THÁI: ĐANG TẢI · MẤT MẠNG · KHÔNG CÓ DỮ LIỆU
   (mã chạy nằm ở trangthai.js, khối rỗng do hàm khungTrong() trong main.hql in ra)
   ========================================================================== */

/* ---- 1. Vạch chạy trên đỉnh trang ---- */
.vach-tai{
    position:fixed; top:0; left:0; right:0; height:3px;
    z-index:9999; pointer-events:none;
    opacity:0; transition:opacity .25s;
}
.vach-tai.chay{ opacity:1 }
.vach-tai i{
    display:block; height:100%; width:0;
    background:linear-gradient(90deg,var(--do,#FF4655),var(--xanh,var(--xanh)));
    box-shadow:0 0 10px rgba(0, 255, 200, .6);
    animation:vachChay 12s cubic-bezier(.1,.6,.3,1) forwards;
}
/* Bò nhanh tới 90% rồi bò chậm dần — không bao giờ tự chạm 100%, vì trang tải
   xong lúc nào là chuyện của máy chủ, đoán bừa rồi đứng im ở 100% trông tệ hơn. */
@keyframes vachChay{
    0%{ width:0 } 12%{ width:38% } 30%{ width:62% }
    60%{ width:80% } 100%{ width:92% }
}
.vach-tai.xong i{ width:100%; transition:width .18s ease-out; animation:none }

/* ---- 2. Dải mất mạng ---- */
.dai-mang{
    position:fixed; left:50%; top:-70px; transform:translateX(-50%);
    z-index:9998; display:flex; align-items:center; gap:12px;
    padding:11px 18px; border-radius:0 0 10px 10px;
    background:#3A1B1B; border:1px solid #C0453F; border-top:0;
    color:#FFB3AE; font-size:.88rem;
    box-shadow:0 8px 26px rgba(0, 0, 0, 0.45);
    transition:top .3s cubic-bezier(.2,.9,.3,1.2);

    /*  width:max-content là bắt buộc, không phải cho đẹp.
        Khối này position:fixed + left:50%, nên chỗ trống mà trình duyệt tính
        cho nó chỉ là NỬA màn hình bên phải. Trên điện thoại 390px, nửa đó là
        195px — chữ bị bóp thành cột dọc mỗi dòng một từ, cao 241px, che kín
        cả thanh menu. max-content cho nó trải hết một dòng rồi mới bị
        max-width chặn lại: đo lại còn 366 x 66px, gọn như phải thế.          */
    width:max-content;
    max-width:calc(100vw - 24px);
}
.dai-mang.hien{ top:0 }
.dai-mang.da-ve{ background:#12301F; border-color:#2F855A; color:#9AE6B4 }
.dai-mang .dm-cham{
    width:9px; height:9px; border-radius:50%; background:#F87171; flex:none;
    animation:daiNhap 1.1s infinite;
}
.dai-mang.da-ve .dm-cham{ background:#48BB78; animation:none }
@keyframes daiNhap{ 0%,100%{opacity:1} 50%{opacity:.25} }
.dai-mang .dm-nut{
    flex:none; padding:5px 12px; cursor:pointer;
    background:transparent; border:1px solid currentColor; border-radius:4px;
    color:inherit; font:inherit; font-size:.82rem;
}
.dai-mang .dm-nut:hover{ background:rgba(255, 255, 255, 0.08) }
.dai-mang.da-ve .dm-nut{ display:none }

/* ---- 3. Khối "không có dữ liệu" ---- */
.khung-trong{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:10px; padding:44px 24px;
    background:var(--nen-the,#111C24); border:1px dashed var(--vien,#2B3A45);
    border-radius:8px; margin:6px 0;
}
.khung-trong .kt-hinh{ font-size:2.6rem; line-height:1; opacity:.75 }
.khung-trong .kt-tieu-de{ font-size:1.02rem; font-weight:700; color:var(--chu,#E8ECF1) }
.khung-trong .kt-mo-ta{
    font-size:.87rem; color:var(--chu-mo,#9BA4B0);
    max-width:520px; line-height:1.75;
}
.khung-trong .nut{ margin-top:6px }

/* ---- 4. Ô xương cá lúc đang chờ dữ liệu ---- */
.xuong-ca{
    background:linear-gradient(90deg,
        var(--nen-mat,#16222B) 25%, #1E2C36 37%, var(--nen-mat,#16222B) 63%);
    background-size:400% 100%;
    animation:xuongCa 1.3s ease-in-out infinite;
    border-radius:4px; height:14px; margin:8px 0;
}
@keyframes xuongCa{ 0%{background-position:100% 0} 100%{background-position:0 0} }

@media (prefers-reduced-motion: reduce){
    .vach-tai i, .dai-mang .dm-cham, .xuong-ca{ animation:none }
}

/* ---- Ô chọn ngôn ngữ trên thanh điều hướng ---- */
.chon-nn{
    display:inline-flex; align-items:center; gap:0;
    border:1px solid var(--vien,#2B3A45); border-radius:4px; overflow:hidden;
    margin-right:4px; flex:none;
}
.chon-nn .nn-nut{
    padding:5px 9px; font-size:.74rem; font-weight:700; letter-spacing:.05em;
    color:var(--chu-mo,#9BA4B0); text-decoration:none; line-height:1;
    background:transparent; transition:background .15s, color .15s;
}
.chon-nn .nn-nut:hover{ background:rgba(255, 255, 255, 0.06); color:var(--chu,#E8ECF1) }
.chon-nn .nn-nut.active{ background:var(--do,#FF4655); color:#fff }

/*  Nhãn hai mảnh: bản dài cho màn hình rộng, bản ngắn cho điện thoại.
 *  Mặc định hiện bản dài; khối @media bên dưới đảo lại.  */
.chu-ngan { display: none; }

/* ===========================================================================
   ĐIỆN THOẠI  (≤ 600px)
   ---------------------------------------------------------------------------
   Trước mục này, chỗ hẹp nhất trang lo tới là 560px và chỉ vá lặt vặt. Mở
   trên điện thoại thật thì vẫn là một trang WEB bị bóp nhỏ: thanh menu cuộn
   ngang, dòng lịch sử đấu 8 cột chen nhau, nút bấm bé hơn đầu ngón tay.

   Mục này làm nó thành APP:
     · thanh điều hướng xuống ĐÁY màn hình, kiểu tab bar — ngón cái với tới
     · đầu trang chỉ còn logo + đăng nhập
     · dòng lịch sử đấu xếp thành hai tầng thay vì tám cột
     · mọi chỗ bấm được cao tối thiểu 44px

   VÌ SAO ĐỂ Ở ĐÂY CHỨ KHÔNG LÀM APP RIÊNG: app điện thoại (PWA) chính là
   trang này. Sửa ở đây là app đổi theo, không phải phát hành lại gì cả.
   =========================================================================== */
@media (max-width: 600px) {

    /* --- Đầu trang: bỏ hết menu, chỉ giữ logo và khối bên phải --- */
    /*
     *  BẮT BUỘC BỎ backdrop-filter Ở ĐÂY, và đây là lý do — bẫy CSS thật sự
     *  khó thấy:
     *
     *  Phần tử có backdrop-filter (hay filter, transform, will-change) trở
     *  thành KHUNG CHỨA của mọi con position:fixed bên trong nó. Thanh menu
     *  dưới đáy là con của .thanh-nav, nên "fixed; bottom:0" KHÔNG bám đáy
     *  màn hình mà bám đáy CỦA CHÍNH THANH ĐẦU TRANG — thanh tab rơi tọt lên
     *  đầu trang, đè lên logo.
     *  Trình duyệt không báo gì cả, chỉ hiện ra sai. Đã vỡ đúng như thế trên
     *  điện thoại thật.
     *
     *  Bỏ backdrop-filter thì mất hiệu ứng mờ nền, nên tô nền đục thay vào —
     *  trên điện thoại chẳng ai nhận ra khác biệt.
     */
    .thanh-nav {
        height: 54px; padding: 0 12px; flex-wrap: nowrap;
        gap: 8px; justify-content: space-between;
        backdrop-filter: none; -webkit-backdrop-filter: none;
        background: #0B1219;
    }
    .logo      { font-size: 1rem; gap: 6px; }
    .logo-hinh { width: 26px; height: 26px; font-size: 0.9rem; }

    /* --- Menu thành thanh tab dưới đáy --- */
    .nav-menu {
        order: 0;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
        width: 100%; margin: 0;
        display: flex; justify-content: space-around; align-items: stretch;
        gap: 0; padding: 4px 2px;
        /* Nền đục hẳn: thanh này nằm đè lên nội dung đang cuộn bên dưới, để
           trong suốt thì chữ chồng lên chữ, đọc không ra. */
        background: rgba(11, 18, 25, 0.97);
        backdrop-filter: blur(18px) saturate(140%);
        border-top: 1px solid var(--vien);
        /* Chừa chỗ cho vạch Home của iPhone và thanh cử chỉ Android — thiếu
           dòng này thì mục cuối bị vạch đó che mất một nửa. */
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none;
    }
    .nav-menu::-webkit-scrollbar { display: none; }

    .nav-menu li { flex: 0 0 auto; }
    .nav-menu .muc {
        display: flex; align-items: center; justify-content: center; gap: 5px;
        min-height: 44px; padding: 6px 10px; white-space: nowrap;
        font-size: 0.72rem; letter-spacing: 0.2px;
        border-radius: 10px;
        /* Chữ trong thanh tab rất ngắn, hoa hết trông như đang hét */
        text-transform: none;
    }
    /*
     *  ĐÃ BỎ mẹo ::first-line để phóng to emoji. Mục menu là "🏠 Trang chủ"
     *  nằm TRỌN MỘT DÒNG — không có chỗ nào xuống dòng, nên ::first-line phủ
     *  cả câu và phóng to luôn cả chữ. Muốn icon to hơn chữ thì phải tách
     *  emoji ra một thẻ riêng trong HTML, không làm được bằng CSS.
     */

    /* Chừa chỗ cho thanh tab, không thì nó che mất cuối trang */
    .chan-trang { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
    .trang      { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

    /* -----------------------------------------------------------------
       KHỐI BÊN PHẢI ĐẦU TRANG
       Trên màn 375px, nhãn "ĐĂNG NHẬP BẰNG RIOT" đẩy tràn khỏi thanh điều
       hướng và bị cắt mất một nửa — nhìn như trang vỡ. Đổi sang nhãn ngắn,
       và bỏ luôn cái tag "#1810" sau tên người dùng.
       ----------------------------------------------------------------- */
    /*  flex-wrap PHẢI LÀ nowrap Ở ĐÂY.
     *  Thanh nav cao cố định 54px. Để khối bên phải xuống dòng thì nó tràn
     *  hẳn ra ngoài thanh và đè lên nội dung trang — đã thấy đúng như vậy ở
     *  khổ 375px và 393px: ô VI/EN một dòng, nút ĐĂNG NHẬP rơi xuống dòng
     *  dưới, cả hai lòi ra ngoài viền. Cùng họ với lỗi mục 28 work.txt.  */
    .nav-phai {
        gap: 6px; flex-wrap: nowrap; flex-shrink: 1; min-width: 0;
    }
    .nav-phai .nut {
        padding: 7px 9px; font-size: 0.68rem; letter-spacing: 0;
        max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /*  ĐÃ ĐĂNG NHẬP: BỎ HẲN NÚT TÊN NGƯỜI DÙNG TRÊN ĐIỆN THOẠI.
     *  Thanh nav 375px không đủ chỗ cho logo + VI/EN + tên + Đăng xuất. Cố
     *  nhét vào thì tên bị cắt còn "L..." và nút Đăng xuất còn "NG XUẤ" —
     *  cả hai đều vô nghĩa, mà lại chiếm chỗ.
     *  Không mất đường nào cả: hồ sơ của mình vẫn ở ngay mục "Hồ sơ" trên
     *  thanh tab dưới đáy.  */
    .nav-phai .nut-vien { display: none; }

    /*  Ô đổi ngôn ngữ thu nhỏ lại — nó chỉ có hai chữ VI / EN  */
    .chon-nn        { flex-shrink: 0; }
    .chon-nn .nn-nut { padding: 4px 7px; font-size: 0.66rem; }

    /*  Logo co được để nhường chỗ, và cắt bằng ba chấm nếu vẫn chật  */
    .logo { min-width: 0; overflow: hidden; }
    .chu-dai  { display: none; }
    .chu-ngan { display: inline; }

    /* Thanh nhịp sống chiếm nhiều chỗ mà trên điện thoại không ai đọc kịp */
    .nhip { display: none; }

    /* --- Hồ sơ --- */
    .ho-so-trong  { flex-direction: column; align-items: flex-start; padding: 14px 12px 0; gap: 10px; }
    .anh-dai-dien { width: 54px; height: 54px; font-size: 1.3rem; }
    .ten-nguoi-choi, .ho-so-ten h1 { font-size: 1.3rem; }

    /* Ô lọc mùa/chế độ: mỗi ô một dòng, đủ rộng để bấm */
    .thanh-loc { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
    .o-loc     { min-width: 0; width: 100%; }
    .o-loc select { min-height: 44px; font-size: 0.95rem; }

    /* Dải tab trong hồ sơ (Tổng quan / Trận đấu / ...) cuộn ngang được */
    .tab-hoso, .dai-tab {
        overflow-x: auto; scrollbar-width: none;
        flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    }
    .tab-hoso::-webkit-scrollbar, .dai-tab::-webkit-scrollbar { display: none; }
    .tab-hoso a, .dai-tab a { flex: 0 0 auto; min-height: 44px; display: flex; align-items: center; }

    /* --- Ô chỉ số --- */
    .luoi-so     { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .luoi-so-nho { grid-template-columns: repeat(3, 1fr); gap: 7px; }
    .o-so        { padding: 10px 8px; }
    .o-so .v     { font-size: 1.05rem; }
    .o-so .n     { font-size: 0.56rem; }

    /* -----------------------------------------------------------------
       DÒNG LỊCH SỬ ĐẤU — TÁM CỘT KHÔNG THỂ NHÉT VÀO MÀN HÌNH 390px
       Xếp lại thành hai tầng: tầng trên là đặc vụ + bản đồ + tỉ số,
       tầng dưới là bốn chỉ số. Vạch màu thắng/thua kéo dọc bên trái.
       ----------------------------------------------------------------- */
    .dong-tran {
        grid-template-columns: 4px 1fr auto;
        grid-template-areas:
            "vach dacvu tiso"
            "vach cot   cot";
        gap: 8px 10px; padding: 10px 12px;
    }
    .dong-tran:hover { transform: none; }   /* điện thoại không có con trỏ */
    .dong-tran .vach   { grid-area: vach; height: 100%; }
    .dong-tran .dac-vu { grid-area: dacvu; min-width: 0; }
    .dong-tran .ti-so  { grid-area: tiso; font-size: 1rem; }
    .dong-tran .gio    { display: none; }   /* đã có "3 giờ trước" trong khối đặc vụ */
    .dong-tran .ten-dv { font-size: 0.9rem; }
    .dong-tran .ban-do { font-size: 0.72rem; }

    /* Bốn ô chỉ số gom thành một hàng riêng ở tầng dưới */
    .dong-tran .cot {
        grid-area: cot;
        display: inline-flex; flex-direction: column; align-items: flex-start;
        min-width: 0; margin-right: 14px;
    }
    .dong-tran .cot .v { font-size: 0.86rem; }
    .dong-tran .cot .n { font-size: 0.56rem; }

    /* --- Bảng: luôn cuộn ngang, đừng ép chữ xuống dòng --- */
    .cuon-ngang { -webkit-overflow-scrolling: touch; }
    .du-lieu th, .du-lieu td { padding: 8px 9px; font-size: 0.8rem; white-space: nowrap; }

    /* --- Trang chi tiết trận --- */
    .khoi-ti-so   { gap: 8px; }
    .tran-ti-so   { font-size: 1.9rem; }
    .tran-ban-do  { font-size: 1.15rem; }
    .bang-diem th, .bang-diem td { font-size: 0.76rem; padding: 6px 7px; }

    /* --- Ô tìm ở trang /Tim --- */
    .dai-tim h1     { font-size: 1.5rem; }
    .dai-tim .phu   { font-size: 0.85rem; }
    .o-tim input    { min-height: 48px; font-size: 1rem; }
    .o-tim button   { min-height: 48px; }

    /* --- Chỗ nào bấm được cũng phải đủ to cho ngón tay --- */
    .nut, .nut-vien { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

    /* Khung chat nổi che mất thanh tab — đẩy nó lên trên thanh tab */
    .nut-chat, .khung-chat { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* Màn hình rất hẹp (≤ 380px): bớt một cột ở dãy chỉ số nhỏ */
@media (max-width: 380px) {
    .luoi-so-nho { grid-template-columns: repeat(2, 1fr); }
    .nav-menu .muc { padding: 6px 8px; font-size: 0.68rem; }
}

/* ===========================================================================
   TRANG TẢI ỨNG DỤNG  (/TaiApp)
   =========================================================================== */
.luoi-tai { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

.the-tai { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 30px 24px; }
.the-tai h2      { margin: 0; font-family: var(--font-de); font-size: 1.5rem; letter-spacing: 1px; }
.tai-icon        { font-size: 3rem; line-height: 1; display: flex; align-items: center;
                   justify-content: center; height: 3rem; }

/* Logo Windows / Android vẽ bằng SVG ngay trong TaiAppServlet.hql, không phải
   emoji nữa — emoji mỗi hệ điều hành vẽ một kiểu khác nhau.
   Cỡ đặt ở đây chứ không đặt trong thẻ svg: thẻ svg có width/height làm đường
   lùi cho lúc CSS chưa tải, còn cỡ thật thì để CSS quyết, đúng lệ của file này. */
.tai-logo        { width: 3rem; height: 3rem; display: block; }

/* Bốn bước cài đặt trên thẻ Windows. Số bước tự đánh bằng counter chứ không
   dùng list-style mặc định — dấu chấm của trình duyệt canh lệch với chữ khi
   dòng dài xuống hai hàng. */
.tai-buoc        { list-style: none; counter-reset: buoc; margin: 14px 0 0;
                   padding: 0; text-align: left; max-width: 42ch; }
.tai-buoc li     { counter-increment: buoc; position: relative; padding-left: 30px;
                   margin-bottom: 10px; color: var(--chu-phu);
                   font-size: 0.82rem; line-height: 1.65; }
.tai-buoc li::before {
                   content: counter(buoc); position: absolute; left: 0; top: 1px;
                   width: 20px; height: 20px; border-radius: 50%;
                   background: var(--nen-mat); border: 1px solid var(--vien);
                   color: var(--chu); font-size: 0.7rem; font-weight: 700;
                   display: flex; align-items: center; justify-content: center; }

/* Khối "Nếu Windows báo chặn" — gấp lại được, vì phần lớn người tải sẽ không
   gặp cảnh báo nào cả. Bày sẵn ra thì thành doạ người ta. */
.tai-gap         { margin-top: 14px; text-align: left; max-width: 42ch; width: 100%; }
.tai-gap summary { cursor: pointer; font-size: 0.8rem; color: var(--chu-phu);
                   padding: 8px 0; list-style-position: inside; }
.tai-gap summary:hover { color: var(--chu); }
.tai-gap-than    { font-size: 0.78rem; line-height: 1.75; color: var(--chu-mo);
                   padding: 4px 0 8px; }

/* Khối "Không yên tâm thì đừng cài" */
.tai-tin         { text-align: left; font-size: 0.82rem; line-height: 1.75; }
.tai-tin a       { color: var(--do); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   /MaNguon — biểu mẫu xin mã nguồn
   --------------------------------------------------------------------------- */
.mn-luoi         { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 18px; }
.mn-o            { margin-bottom: 16px; }
.mn-o label      { display: block; margin-bottom: 6px; font-size: 0.82rem;
                   color: var(--chu-phu); font-weight: 700; }
/* :not([type=checkbox]) là bắt buộc. Thiếu nó thì luật width:100% dưới đây
   tóm luôn cả ô tích trong .mn-chon: ô tích phình ra chiếm hết dòng, còn phần
   chữ bị ép thành một cột hẹp bên phải, đọc từng chữ một xuống dòng. */
.mn-o input:not([type=checkbox]),
.mn-o textarea   { width: 100%; padding: 10px 13px; background: var(--nen-mat);
                   border: 1px solid var(--vien); border-radius: 2px;
                   color: var(--chu); font-size: 0.88rem; font-family: inherit;
                   outline: none; }
.mn-o input:not([type=checkbox]):focus,
.mn-o textarea:focus { border-color: var(--do); }
.mn-o input[readonly]:not([type=checkbox]),
.mn-o textarea[readonly] { color: var(--chu-phu); background: var(--nen); }

/* Lá thư đọc bằng font đều nét: người ta soi từng dòng cam kết trong đó, mà
   font đều nét thì các dòng thụt đầu dòng xếp thẳng hàng, dễ đọc hơn hẳn. */
.mn-thu          { font-family: Consolas, "Courier New", monospace;
                   font-size: 0.8rem; line-height: 1.6; white-space: pre; }

.mn-sao          { color: var(--do); }
.mn-tuychon      { color: var(--chu-mo); font-weight: 400; font-size: 0.76rem; }

/* PHẢI ghi kèm .mn-o, không thì thua luật .mn-o label ngay phía trên: cả hai
   cùng một mức ưu tiên, mà .mn-o label (lớp + thẻ) mạnh hơn .mn-chon (chỉ lớp),
   nên display:flex bị display:block đè — ô tích rơi lên trên chữ. */
.mn-o .mn-chon   { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
                   border: 1px solid var(--vien); border-radius: 2px; margin-bottom: 8px;
                   cursor: pointer; }
.mn-o .mn-chon:hover   { border-color: var(--vien-sang); }
.mn-o .mn-chon input   { width: auto; margin-top: 3px; flex-shrink: 0;
                         accent-color: var(--do); }
.mn-o .mn-chon span    { flex: 1; display: block; font-size: 0.85rem;
                         color: var(--chu); font-weight: 400; }
.mn-o .mn-chon small   { display: block; margin-top: 2px; color: var(--chu-mo); font-size: 0.76rem; }

.mn-nut          { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

@media (max-width: 760px) {
  .mn-luoi { grid-template-columns: 1fr; }
  .mn-nut .nut { width: 100%; text-align: center; }
}

/* Thanh mời cập nhật app. Chỉ hiện trong app máy tính khi bản đang chạy cũ hơn
   bản trên máy chủ — xem coBanAppMoi() trong main.hql.
   Màu vàng chứ không đỏ: đây là lời mời, không phải lỗi. Đỏ ở trang này vốn
   dành cho hỏng hóc, dùng lẫn thì người ta hoảng vì một tin vui. */
.bao-capnhat     { display: flex; align-items: center; justify-content: space-between;
                   gap: 14px; flex-wrap: wrap;
                   border-color: var(--vang); color: var(--chu); }
.bao-capnhat b   { color: var(--vang); }
.bao-capnhat-nut { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 700px) {
  .bao-capnhat     { flex-direction: column; align-items: flex-start; }
  .bao-capnhat-nut { width: 100%; }
}
.tai-phu         { margin: 0; color: var(--chu-phu); font-size: 0.9rem; line-height: 1.7; max-width: 40ch; }
.tai-ghi-chu     { margin: 0; color: var(--chu-mo); font-size: 0.78rem; line-height: 1.7; max-width: 42ch; }

/* Nút đang mờ phải TRÔNG RA là chưa dùng được, không thì người ta bấm mãi rồi
   tưởng trang hỏng. Con trỏ đổi thành dấu cấm luôn cho rõ. */
.the-tai .nut:disabled,
.the-tai .nut[disabled] { opacity: 0.4; cursor: not-allowed; filter: saturate(0.3); }

/* ============ TRANG VĂN BẢN DÀI (Điều khoản, Chính sách riêng tư) ============
   Chữ chạy hết chiều ngang màn hình rộng thì mắt phải quét quá xa, đọc mấy
   dòng là mỏi và mất dòng. max-width 74ch giữ mỗi dòng quanh 70-80 ký tự,
   đúng khoảng dễ đọc nhất — cùng lý do mọi cuốn sách đều hẹp hơn tờ báo. */
.van-ban { max-width: 74ch; margin: 0 auto; padding: 30px 34px 38px; line-height: 1.75; }
.van-ban .vb-ngay { color: var(--chu-mo); font-size: 0.82rem; margin: 0 0 22px; }
.van-ban .vb-h2 {
    font-size: 1.04rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--do); margin: 30px 0 10px; padding-top: 18px;
    border-top: 1px solid var(--vien);
}
.van-ban .vb-h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
/* Mục chỉ có tiêu đề rỗng (dùng để nối một đoạn sau danh sách) thì bỏ hẳn
   khoảng trống, không thì giữa trang hở ra một mảng trắng không hiểu vì sao. */
.van-ban .vb-h2:empty { display: none; }
.van-ban .vb-p { margin: 0 0 13px; color: var(--chu-phu); }
.van-ban .vb-ul { margin: 4px 0 16px; padding-left: 22px; color: var(--chu-phu); }
.van-ban .vb-ul li { margin-bottom: 9px; }
.van-ban b { color: var(--chu); }
.van-ban code {
    font-family: var(--font-ma); font-size: 0.88em; color: var(--sang-xanh);
    background: var(--nen-mat); padding: 1px 6px; border-radius: 4px;
}
.van-ban a { color: var(--sang-xanh); }
@media (max-width: 600px) { .van-ban { padding: 22px 18px 30px; } }

/* Hàng liên kết pháp lý ở chân trang */
.chan-phap-ly { display: flex; gap: 14px; flex-wrap: wrap; }
.chan-phap-ly a { color: var(--chu-phu); text-decoration: none; }
.chan-phap-ly a:hover { color: var(--do); }

/* =====================================================================
   TRANG TRÒ CHUYỆN TOÀN MÀN HÌNH  (/chat — xem web/trochuyen.js)
   ---------------------------------------------------------------------
   Ba cột: kênh · dòng tin · ai đang online.

   CHIỀU CAO ĐO BẰNG dvh CHỨ KHÔNG PHẢI vh. Trên điện thoại, 100vh tính cả
   phần bị thanh địa chỉ của trình duyệt che mất, nên ô nhập tin nằm lọt
   dưới mép màn hình và không ai gõ được. dvh co theo thanh địa chỉ.
   64px là chiều cao thanh điều hướng.
   ===================================================================== */
.muc-chat .khung-chat { display: none; }   /* đã có trang này thì khỏi cần khung nổi */
.muc-chat .trang      { min-height: 0; }
.muc-chat footer.chan-trang { display: none; }

.tc-boc {
    display: grid; grid-template-columns: 250px 1fr 210px;
    height: calc(100dvh - 64px);
    background: var(--nen);
}

.tc-ben {
    background: var(--nen-mat); border-right: 1px solid var(--vien);
    overflow-y: auto; padding: 14px 0;
}
.tc-phai { border-right: none; border-left: 1px solid var(--vien); }

.tc-muc {
    padding: 12px 16px 7px; font-family: var(--font-de);
    font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--chu-mo);
}
.tc-ds { padding: 0 8px; }
.tc-trong { padding: 10px 12px; font-size: 0.8rem; color: var(--chu-mo); line-height: 1.6; }
.tc-trong a { color: var(--xanh); }

.tc-dong {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; margin-bottom: 2px;
    border-radius: var(--bo-nho); cursor: pointer;
    transition: background var(--chuyen);
}
.tc-dong:hover   { background: var(--nen-the); }
.tc-dong.dang-mo { background: var(--nen-the-sang); box-shadow: inset 2px 0 0 var(--do); }
.tc-dong-chu { flex: 1; min-width: 0; }
.tc-dong-chu b {
    display: block; font-size: 0.88rem; color: var(--chu); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-dong-chu small {
    display: block; font-size: 0.75rem; color: var(--chu-mo);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-cham {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--chu-mo); flex-shrink: 0;
}
.tc-cham.on { background: var(--xanh); box-shadow: 0 0 8px rgba(0, 255, 200, 0.6); }

/* ---- Cột giữa ---- */
.tc-giua { display: flex; flex-direction: column; min-width: 0; }

.tc-dau-phong {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 20px; border-bottom: 1px solid var(--vien);
    background: var(--nen-mat);
}
.tc-dau-phong h2 { font-family: var(--font-de); font-size: 1.1rem; color: var(--chu); }
.tc-dau-phong p  { font-size: 0.78rem; margin-top: 2px; }
.tc-nut-ben { display: none; }

.tc-than {
    flex: 1; overflow-y: auto; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 2px;
}

.tc-vach-ngay {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 0 10px; color: var(--chu-mo); font-size: 0.74rem;
}
.tc-vach-ngay::before, .tc-vach-ngay::after {
    content: ''; flex: 1; height: 1px; background: var(--vien);
}

.tc-nhom { display: flex; gap: 11px; padding: 5px 0; }
.tc-nhom .tc-than-nhom { min-width: 0; flex: 1; }
.tc-ten-dong { display: flex; align-items: baseline; gap: 9px; }
.tc-ten-dong b { font-size: 0.88rem; color: var(--chu); }
.tc-gio, .tc-gio-nho { font-size: 0.7rem; color: var(--chu-mo); }
.tc-gio-nho { margin-left: 8px; opacity: 0; transition: opacity var(--chuyen); }
.tc-chu:hover .tc-gio-nho { opacity: 1; }

.tc-chu {
    font-size: 0.9rem; color: var(--chu-phu); line-height: 1.55;
    word-break: break-word; padding: 1px 0;
}

/* Tin của chính mình: đổi màu tên và vạch mảnh bên trái, KHÔNG đổi bên như
   ứng dụng nhắn tin hai người. Phòng chung có nhiều người nói xen nhau, dồn
   một nửa số tin sang phải thì mắt phải nhảy qua nhảy lại suốt. */
.tc-nhom.cua-toi .tc-ten-dong b { color: var(--xanh); }
.tc-nhom.cua-toi .tc-than-nhom {
    border-left: 2px solid rgba(0, 255, 200, 0.35); padding-left: 9px; margin-left: -11px;
}

.tc-anh {
    position: relative; width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 50%; overflow: hidden; background: var(--nen-the-sang);
    display: flex; align-items: center; justify-content: center;
}
.tc-anh span { font-family: var(--font-de); font-size: 0.78rem; color: var(--chu-phu); }
.tc-anh img  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tc-nhap {
    display: flex; gap: 10px; padding: 14px 20px;
    border-top: 1px solid var(--vien); background: var(--nen-mat);
}
.tc-nhap input {
    flex: 1; padding: 11px 14px; font-size: 0.9rem; font-family: var(--font-chu);
    background: var(--nen); color: var(--chu);
    border: 1px solid var(--vien); border-radius: var(--bo-nho);
}
.tc-nhap input:focus { outline: none; border-color: var(--do); }
.tc-nhap-khach { justify-content: center; }

/* ---- Cột phải ---- */
.tc-nguoi {
    display: flex; align-items: center; gap: 9px; padding: 6px 10px;
    font-size: 0.84rem; color: var(--chu-phu);
}
.tc-nguoi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-nguoi .tc-anh { width: 26px; height: 26px; }
.tc-nguoi .tc-anh span { font-size: 0.62rem; }

/* ---- Màn hình hẹp ---- */
@media (max-width: 1000px) {
    .tc-boc { grid-template-columns: 250px 1fr; }
    .tc-phai { display: none; }
}
@media (max-width: 700px) {
    .tc-boc { grid-template-columns: 1fr; }
    .tc-nut-ben { display: inline-block; }
    /* Cột kênh trượt đè lên trên thay vì chiếm chỗ — màn 375px mà chia đôi
       thì cả hai nửa đều không đọc được. */
    .tc-trai {
        position: fixed; left: 0; top: 64px; bottom: 0; width: 250px; z-index: 700;
        transform: translateX(-100%); transition: transform var(--chuyen);
        box-shadow: 6px 0 26px rgba(0, 0, 0, 0.5);
    }
    .tc-boc.mo-ben .tc-trai { transform: translateX(0); }
}

/* Thanh điều hướng có 8 mục kể từ khi thêm "Trò chuyện". Ở màn hình vừa vừa
   (laptop 1366–1536px) mục cuối bị đẩy khuất ra ngoài mép — menu vẫn cuộn
   ngang được nhưng nhìn như trang vỡ. Bóp nhẹ khoảng đệm và cỡ chữ thì cả 8
   mục vừa khít, khỏi cần giấu mục nào đi. */
@media (max-width: 1800px) {
    .nav-menu .muc { padding: 8px 9px; font-size: 0.87rem; letter-spacing: 0.3px; }
    .thanh-nav { padding: 0 18px; gap: 10px; }
}

/* Trang trò chuyện trên điện thoại (dưới 600px, xem khối "GIAO DIỆN ĐIỆN
   THOẠI" ở trên): thanh đầu trang thấp còn 54px, còn MENU thì rời xuống thành
   thanh tab cố định ở đáy màn hình. Phải trừ CẢ HAI đầu — bản đầu chỉ trừ
   64px của đầu trang nên ô nhập tin nằm lọt hẳn dưới thanh tab, nhìn thấy mà
   không gõ được. */
@media (max-width: 600px) {
    .tc-boc {
        height: calc(100dvh - 54px - 56px - env(safe-area-inset-bottom, 0px));
    }
    .tc-trai {
        top: 54px;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
}