:root{--red:#bf1717;--red2:#7d0b0b;--gold:#f1b85e;--text:#eee;--muted:#aaa;--panel:rgba(13,13,13,.91);--line:rgba(217,155,72,.25)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--text);background:#090a0b}body:before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(3,4,5,.15),rgba(3,4,5,.72));z-index:-1;pointer-events:none}.container{width:min(1360px,calc(100% - 40px));margin:auto}a{color:inherit;text-decoration:none}.site-header{height:74px;background:rgba(7,7,8,.96);border-bottom:1px solid #4a3020;position:sticky;top:0;z-index:50;box-shadow:0 3px 18px #000}.nav-wrap{height:100%;display:flex;align-items:center;gap:45px}.brand{width:240px;text-align:center;font-family:Georgia,serif;line-height:.9;text-shadow:0 2px 0 #000,0 0 15px #e3561f}.brand-main{display:block;font-weight:800;font-size:31px;color:#ead2a1;letter-spacing:1px}.brand-sub{display:block;font-weight:800;font-size:22px;color:#e17a33;letter-spacing:1px}.main-nav{display:flex;align-items:stretch;height:100%;gap:4px;flex:1}.main-nav>a{display:flex;align-items:center;padding:0 22px;font-size:14px;font-weight:700;border-bottom:3px solid transparent;white-space:nowrap}.main-nav>a:hover,.main-nav>a.active{color:#ff3b31;background:linear-gradient(rgba(175,20,20,.17),transparent);border-bottom-color:#d52222}.main-nav .user-link{margin-left:auto}.btn-nav{height:40px!important;align-self:center;background:linear-gradient(#b82020,#850d0d);border-radius:5px;border:1px solid #c72b2b!important}.nav-toggle{display:none;margin-left:auto;background:#9c1111;color:#fff;border:0;padding:8px 12px;font-size:20px}main{min-height:70vh}.account-page{padding:38px 0 30px;min-height:780px;background:linear-gradient(rgba(4,5,6,.78),rgba(4,5,6,.9)),url('../img/level15-bg.png') center top/cover fixed no-repeat}.dashboard-layout{display:grid;grid-template-columns:260px 1fr;gap:20px}.account-sidebar{background:rgba(7,7,7,.92);border:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.5);height:max-content}.side-title{padding:17px 20px;color:#888;background:#111;border-bottom:1px solid #222}.account-sidebar a{display:block;padding:17px 22px;border-bottom:1px solid #242424;color:#bbb;font-size:14px}.account-sidebar a:hover,.account-sidebar a.active{color:#fff;background:linear-gradient(90deg,#9d1111,rgba(111,8,8,.5));border-left:3px solid #ea2b22}.dashboard-main{min-width:0}.page-heading{margin:10px 0 22px}.page-heading h1{margin:0;color:var(--gold);font-size:27px}.page-heading p{color:#aaa;margin:7px 0}.topup-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(350px,.9fr);gap:16px}.game-panel{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:24px;box-shadow:0 15px 32px rgba(0,0,0,.55)}.game-panel h2{font-size:16px;margin:0 0 8px;color:#f0d6aa}.game-panel>p{color:#aaa;font-size:14px}.amount-input-wrap{display:flex;margin-top:26px;border:1px solid #444;border-radius:4px;overflow:hidden;background:#111}.amount-input-wrap input{flex:1;min-width:0;padding:17px;background:transparent;color:white;border:0;outline:0;font:inherit}.amount-input-wrap span{display:flex;align-items:center;padding:0 18px;border-left:1px solid #444}.quick-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 33px}.quick-amounts button,.conversion-card{border:1px solid #3c3c3c;background:linear-gradient(#1b1b1b,#111);color:#fff;border-radius:4px;cursor:pointer}.quick-amounts button{padding:13px 8px;font-weight:600}.quick-amounts button:hover,.quick-amounts button.selected,.conversion-card:hover,.conversion-card.selected{border-color:#d1864b;box-shadow:0 0 12px rgba(191,35,26,.25)}.convert-title{font-size:14px;color:#d5c39f}.conversion-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.conversion-card{padding:20px 10px;text-align:center}.conversion-card strong{display:block;font-size:29px;color:var(--gold)}.conversion-card span{display:block;color:#ffc232;font-size:16px;font-weight:700;margin-top:6px}.notice-box{margin-top:25px;padding:18px;border:1px solid #444;border-radius:4px;background:linear-gradient(110deg,#191919,#111)}.notice-box h3{margin:0 0 14px;color:#e8c483;font-size:14px}.notice-box p{font-size:13px;color:#bbb;margin:9px 0}.qr-panel{text-align:center}.qr-panel .expire{margin:10px 0 15px}.qr-box{width:260px;height:260px;margin:0 auto 15px;padding:8px;background:#fff;border-radius:7px}.qr-box img{display:block;width:100%;height:100%;object-fit:contain}.payment-info{padding:15px;background:#101010;border:1px solid #2c2c2c;border-radius:4px;text-align:left}.payment-info div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13px}.payment-info b{text-align:right}.red{color:#ff2a24!important}.gold{color:#ffc24b!important}.qr-note{text-align:left!important;font-size:12px!important;line-height:1.5}.check-payment{width:100%;padding:15px;background:linear-gradient(#c51b1b,#930c0c);border:1px solid #e42e29;border-radius:4px;color:#fff;font-weight:800;cursor:pointer}.site-footer{background:rgba(8,9,10,.97);border-top:1px solid #55402b}.footer-grid{display:grid;grid-template-columns:1.1fr 1.2fr 1fr 1fr;gap:45px;padding:30px 0}.footer-grid h4{color:#e5bd7b;margin:0 0 12px;font-size:14px}.footer-grid p{margin:7px 0;color:#aaa;font-size:12px}.footer-brand{align-self:center;text-align:center;font-family:Georgia,serif}.socials{display:flex;gap:20px}.socials a{display:grid;place-items:center;width:44px;height:44px;background:#254bb2;border-radius:7px;font-weight:bold;font-size:23px}.socials a:nth-child(2){background:#b81624}.socials a:nth-child(3){background:#565fd1}.copyright{border-top:1px solid #222;padding:13px;text-align:center;color:#555;font-size:12px}
/* existing general pages */.hero{min-height:720px;display:flex;align-items:center;position:relative;background:url('../img/level15-bg.png') center top/cover no-repeat}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.28))}.hero-content{position:relative}.hero h1{font-size:58px;margin:16px 0}.hero h1 span{color:#d92b23}.hero p{max-width:670px;line-height:1.7;color:#ccc}.eyebrow{color:#e6b465;font-weight:700}.btn{display:inline-block;padding:13px 22px;border-radius:4px;font-weight:700;margin-right:10px}.btn-primary{background:#a91212}.btn-outline{border:1px solid #aaa}.opening-box{margin-top:25px}.opening-box small,.opening-box strong{display:block}.section{padding:65px 0;background:rgba(8,8,8,.76)}.stats-grid,.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat,.feature-card,.boss-panel,.cta-box{background:#111d;border:1px solid var(--line);padding:25px}.stat strong{font-size:35px;color:var(--gold);display:block}.section-heading{text-align:center}.section-heading span{color:var(--gold)}.card-grid{grid-template-columns:repeat(3,1fr)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px}.check-list{line-height:2}.boss-row{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid #333}.cta-box{display:flex;align-items:center;justify-content:space-between}
@media(max-width:1050px){.main-nav>a{padding:0 10px;font-size:12px}.topup-grid{grid-template-columns:1fr}.dashboard-layout{grid-template-columns:220px 1fr}.footer-grid{grid-template-columns:1fr 1fr}.brand{width:190px}}
@media(max-width:760px){.container{width:min(100% - 22px,1360px)}.site-header{height:auto;min-height:66px}.nav-wrap{min-height:66px;flex-wrap:wrap}.brand{width:auto}.nav-toggle{display:block}.main-nav{display:none;width:100%;height:auto;flex-direction:column;padding-bottom:12px}.main-nav.open{display:flex}.main-nav>a{padding:13px}.dashboard-layout{grid-template-columns:1fr}.account-sidebar{display:none}.topup-grid{grid-template-columns:1fr}.quick-amounts{grid-template-columns:1fr 1fr}.conversion-grid{grid-template-columns:1fr}.game-panel{padding:16px}.qr-box{width:230px;height:230px}.footer-grid{grid-template-columns:1fr}.stats-grid,.card-grid,.two-col{grid-template-columns:1fr}.hero h1{font-size:38px}}

.qr-panel.is-hidden{display:none}.qr-placeholder{width:260px;min-height:260px;margin:0 auto 15px;border:1px dashed #5a4935;border-radius:7px;display:grid;place-items:center;padding:24px;color:#b9a98d;background:rgba(10,10,10,.72);line-height:1.6}.qr-panel.is-ready .qr-placeholder{display:none}.qr-panel:not(.is-ready) .qr-box,.qr-panel:not(.is-ready) .payment-info,.qr-panel:not(.is-ready) .qr-note,.qr-panel:not(.is-ready) .check-payment{display:none}
/* =========================
   TRANG ĐĂNG NHẬP
========================= */

.page-hero {
    padding: 55px 0 35px;
    background:
        linear-gradient(rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.92)),
        url("../images/hero-bg.jpg") center 35% / cover no-repeat;
    border-bottom: 1px solid rgba(220, 165, 75, 0.25);
}

.page-hero h1 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 38px;
    font-weight: 800;
}

.page-hero p {
    margin: 0;
    color: #c8c8c8;
    font-size: 16px;
}

.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-card {
    width: 100%;
    max-width: 480px;
    padding: 35px;
    background:
        linear-gradient(
            145deg,
            rgba(24, 24, 24, 0.98),
            rgba(8, 8, 8, 0.98)
        );
    border: 1px solid rgba(215, 163, 75, 0.38);
    border-radius: 6px;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.auth-card label {
    display: block;
    margin-bottom: 20px;
    color: #e7e7e7;
    font-size: 15px;
    font-weight: 600;
}

.auth-card input {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 9px;
    padding: 0 14px;
    color: #ffffff;
    font-size: 15px;
    font-family: inherit;
    background: #0b0b0b;
    border: 1px solid #393939;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    transition: 0.25s ease;
}

.auth-card input:hover {
    border-color: #72562b;
}

.auth-card input:focus {
    border-color: #d19a42;
    box-shadow: 0 0 0 3px rgba(209, 154, 66, 0.12);
}

.auth-card .btn.full {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 5px;
    border: 1px solid #e04038;
    border-radius: 4px;
    cursor: pointer;
}

.form-note {
    margin: 22px 0 0;
    color: #bcbcbc;
    text-align: center;
    font-size: 14px;
}

.form-note a {
    color: #e0a64f;
    font-weight: 700;
    text-decoration: none;
}

.form-note a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Thông báo lỗi, thành công */

.alert {
    width: 100%;
    max-width: 480px;
    margin-bottom: 16px;
    padding: 13px 16px;
    border-radius: 4px;
    box-sizing: border-box;
}

.alert.error {
    color: #ffd6d6;
    background: rgba(175, 24, 24, 0.22);
    border: 1px solid rgba(232, 59, 59, 0.55);
}

.alert.success {
    color: #d8ffe2;
    background: rgba(25, 131, 60, 0.2);
    border: 1px solid rgba(54, 184, 91, 0.45);
}

/* Responsive */

@media (max-width: 768px) {
    .page-hero {
        padding: 38px 0 28px;
    }

    .page-hero h1 {
        font-size: 30px;
    }

    .auth-card {
        padding: 25px 20px;
    }
}
/* =====================================
   TRANG QUẢN LÝ TÀI KHOẢN
===================================== */

.account-hero {
    position: relative;
    padding: 58px 0 48px;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.94),
            rgba(0, 0, 0, 0.72)
        ),
        url("../images/hero-bg.jpg") center 40% / cover no-repeat;
    border-bottom: 1px solid rgba(209, 157, 70, 0.28);
}

.account-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #d8a34d;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.account-hero h1 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.2;
}

.account-hero p {
    margin: 0;
    color: #bdbdbd;
}

.account-section {
    min-height: 600px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(130, 72, 20, 0.08),
            transparent 38%
        ),
        #060606;
}

.account-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 25px;
    align-items: start;
}

/* Thanh bên */

.account-sidebar {
    padding: 28px 20px 20px;
    background: linear-gradient(
        145deg,
        rgba(23, 23, 23, 0.98),
        rgba(8, 8, 8, 0.98)
    );
    border: 1px solid rgba(208, 154, 64, 0.35);
    border-radius: 7px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.account-avatar {
    display: flex;
    width: 76px;
    height: 76px;
    margin: 0 auto 14px;
    align-items: center;
    justify-content: center;
    color: #17100a;
    font-size: 33px;
    font-weight: 900;
    background: linear-gradient(145deg, #f1c471, #a96b24);
    border: 3px solid rgba(255, 231, 176, 0.18);
    border-radius: 50%;
    box-shadow: 0 0 28px rgba(224, 157, 61, 0.2);
}

.account-sidebar h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 21px;
}

.account-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 25px;
    color: #9edcaf;
    font-size: 13px;
}

.account-status i {
    display: block;
    width: 8px;
    height: 8px;
    background: #3bc76c;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(59, 199, 108, 0.7);
}

.account-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 14px;
    text-align: left;
}

.account-menu a {
    display: flex;
    min-height: 46px;
    margin-bottom: 5px;
    padding: 0 13px;
    align-items: center;
    gap: 10px;
    color: #bdbdbd;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: 0.2s ease;
}

.account-menu a:hover,
.account-menu a.active {
    color: #ffffff;
    background: rgba(174, 28, 23, 0.2);
    border-color: rgba(224, 57, 48, 0.42);
}

.account-menu a.active {
    box-shadow: inset 3px 0 0 #d72f28;
}

/* Nội dung chính */

.account-main {
    padding: 30px;
    background: linear-gradient(
        145deg,
        rgba(20, 20, 20, 0.98),
        rgba(7, 7, 7, 0.98)
    );
    border: 1px solid rgba(208, 154, 64, 0.3);
    border-radius: 7px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
}

.account-title {
    display: flex;
    margin-bottom: 25px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.account-title span {
    color: #d49d48;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.account-title h2 {
    margin: 5px 0 0;
    color: #ffffff;
    font-size: 27px;
}

.account-id {
    padding: 9px 13px;
    color: #d0d0d0;
    font-size: 13px;
    background: #090909;
    border: 1px solid #303030;
    border-radius: 4px;
}

.account-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.account-info-card {
    position: relative;
    display: flex;
    min-height: 105px;
    padding: 21px;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid #2c2c2c;
    border-radius: 5px;
    transition: 0.2s ease;
}

.account-info-card:hover {
    border-color: rgba(208, 154, 64, 0.55);
    transform: translateY(-2px);
}

.account-info-card.ecoin-card {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(210, 145, 52, 0.12),
            transparent 42%
        ),
        rgba(255, 255, 255, 0.025);
}

.info-icon {
    display: flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    background: rgba(206, 149, 60, 0.09);
    border: 1px solid rgba(206, 149, 60, 0.24);
    border-radius: 50%;
}

.info-content {
    min-width: 0;
}

.info-content span {
    display: block;
    margin-bottom: 7px;
    color: #8f8f8f;
    font-size: 13px;
}

.info-content strong {
    display: block;
    color: #ffffff;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.info-content .empty-value {
    color: #777777;
    font-style: italic;
    font-weight: 500;
}

.info-action {
    margin-left: auto;
    color: #dcaa59;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.info-action:hover {
    color: #ffffff;
}

.account-security {
    display: flex;
    margin-top: 22px;
    padding: 21px;
    align-items: center;
    gap: 17px;
    background: rgba(42, 93, 55, 0.1);
    border: 1px solid rgba(76, 155, 96, 0.25);
    border-radius: 5px;
}

.security-icon {
    font-size: 29px;
}

.account-security h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 17px;
}

.account-security p {
    margin: 0;
    color: #a9a9a9;
    font-size: 13px;
    line-height: 1.6;
}

.account-security .btn {
    margin-left: auto;
    white-space: nowrap;
}

/* Responsive */

@media (max-width: 900px) {
    .account-layout {
        grid-template-columns: 1fr;
    }

    .account-sidebar {
        text-align: left;
    }

    .account-avatar {
        margin-left: 0;
    }

    .account-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .account-hero {
        padding: 38px 0 32px;
    }

    .account-hero h1 {
        font-size: 29px;
    }

    .account-main {
        padding: 20px 15px;
    }

    .account-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-info-card {
        padding: 18px 14px;
    }

    .account-security {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-security .btn {
        width: 100%;
        margin-left: 0;
    }
}

/* BẢNG XẾP HẠNG */

.ranking-section {
    min-height: 600px;
    background: #070707;
}

.ranking-card {
    padding: 28px;
    background: linear-gradient(145deg, #151515, #080808);
    border: 1px solid rgba(207, 154, 65, 0.35);
    border-radius: 6px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
}

.ranking-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.ranking-heading span {
    color: #d9a24a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ranking-heading h2 {
    margin: 5px 0 0;
    color: #fff;
    font-size: 28px;
}

.ranking-count {
    padding: 8px 12px;
    color: #ccc;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 4px;
}

.ranking-table-wrap {
    overflow-x: auto;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-table th,
.ranking-table td {
    padding: 15px 16px;
    text-align: left;
    border-bottom: 1px solid #292929;
}

.ranking-table th {
    color: #d8a24c;
    font-size: 13px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.025);
}

.ranking-table td {
    color: #d4d4d4;
}

.ranking-table tbody tr:hover {
    background: rgba(205, 146, 54, 0.06);
}

.character-name {
    color: #fff;
}

.kill-value {
    color: #e0a648 !important;
    font-weight: 800;
}

.rank-number {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1b1b1b;
    border: 1px solid #3b3b3b;
}

.rank-1 {
    color: #1a1205;
    background: #e5b547;
}

.rank-2 {
    color: #151515;
    background: #bfc4ca;
}

.rank-3 {
    color: #180d05;
    background: #bf773d;
}

.faction-badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.faction-badge.light {
    color: #cde7ff;
    background: rgba(50, 118, 190, 0.18);
    border: 1px solid rgba(77, 148, 220, 0.4);
}

.faction-badge.fury {
    color: #ffd0d0;
    background: rgba(177, 39, 39, 0.18);
    border: 1px solid rgba(218, 55, 55, 0.4);
}

.ranking-empty {
    padding: 35px !important;
    text-align: center !important;
    color: #888 !important;
}

.online-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin: 18px 0 24px;
}

.online-stat-card {
    padding: 16px 20px;
    border: 1px solid rgba(222, 166, 62, 0.4);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
}

.online-stat-card span {
    display: block;
    margin-bottom: 6px;
    color: #c9c9c9;
    font-size: 14px;
}

.online-stat-card strong {
    display: block;
    color: #efb54f;
    font-size: 28px;
}

.online-stat-card.light {
    border-color: rgba(70, 139, 255, 0.5);
}

.online-stat-card.light strong {
    color: #72a7ff;
}

.online-stat-card.fury {
    border-color: rgba(218, 54, 54, 0.55);
}

.online-stat-card.fury strong {
    color: #ff6868;
}

.online-player-table thead th[data-sort-type] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.online-player-table thead th[data-sort-type]:hover {
    color: #ffd06c;
    background: rgba(230, 168, 58, 0.08);
}

.online-player-table thead th.sort-asc,
.online-player-table thead th.sort-desc {
    color: #ffd06c;
}

.sort-icon {
    display: inline-block;
    margin-left: 5px;
    color: #888;
    font-size: 11px;
}

.sort-asc .sort-icon,
.sort-desc .sort-icon {
    color: #ffd06c;
}

@media (max-width: 768px) {
    .online-stat-grid {
        grid-template-columns: 1fr;
    }
}

button.online-stat-card {
    width: 100%;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

button.online-stat-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.025);
}

button.online-stat-card.active {
    box-shadow:
        0 0 0 2px rgba(237, 179, 75, 0.2),
        0 0 20px rgba(237, 179, 75, 0.08);
}

button.online-stat-card.light.active {
    box-shadow:
        0 0 0 2px rgba(77, 142, 255, 0.25),
        0 0 20px rgba(77, 142, 255, 0.12);
}

button.online-stat-card.fury.active {
    box-shadow:
        0 0 0 2px rgba(255, 64, 64, 0.25),
        0 0 20px rgba(255, 64, 64, 0.12);
}

/* =========================
   TRANG TIME BOSS
========================= */

.boss-history-section {
    min-height: 620px;
    background: #070707;
}

.boss-history-card {
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(20, 20, 20, 0.98),
            rgba(7, 7, 7, 0.98)
        );
    border: 1px solid rgba(210, 156, 64, 0.36);
    border-radius: 7px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.boss-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.boss-history-heading span {
    color: #dc9f3f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.boss-history-heading h2 {
    margin: 5px 0 7px;
    color: #ffffff;
    font-size: 28px;
}

.boss-history-heading p {
    margin: 0;
    color: #9d9d9d;
}

.boss-history-count {
    padding: 10px 15px;
    color: #e5b35d;
    font-weight: 700;
    white-space: nowrap;
    background: #090909;
    border: 1px solid rgba(216, 157, 59, 0.4);
    border-radius: 5px;
}

.boss-name {
    color: #ffbc4b;
}

.boss-killer {
    color: #5cdb8b;
}

.boss-map {
    color: #88bfff;
}

.boss-note {
    margin-top: 25px;
    padding: 18px 20px;
    color: #c7c7c7;
    line-height: 1.6;
    background: rgba(217, 156, 55, 0.07);
    border: 1px solid rgba(217, 156, 55, 0.28);
    border-radius: 5px;
}

.boss-note strong {
    color: #e7b75e;
}

.boss-note p {
    margin: 6px 0 0;
}

@media (max-width: 700px) {
    .boss-history-card {
        padding: 20px 14px;
    }

    .boss-history-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}