/* =========================
   STYLE.CSS
   File này dùng để chỉnh giao diện
   Màu chính hiện tại: đen đỏ
========================= */

/* Reset cơ bản */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Giu website nam dung trong chieu rong man hinh */
html,
body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

html {
    background: #05080d;
}

/* ============================================================ */
/* COUNTDOWN TRANG CHU: XANH NAVY VA TRANG BANG */
/* ============================================================ */

#home-tab .home-countdown-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    margin-top: 28px;
    padding: 38px 42px;

    border: 1px solid rgba(68, 96, 143, 0.55);
    border-radius: 6px;

    background:
        radial-gradient(
            circle at 50% -18%,
            rgba(87, 119, 173, 0.25),
            transparent 46%
        ),
        linear-gradient(
            145deg,
            #0a1428,
            #050a15 64%,
            #081226
        );

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.34),
        inset 0 0 38px rgba(72, 103, 156, 0.08);
}

/* Hai duong sang Navy - trang o canh tren va duoi */
#home-tab .home-countdown-card::before {
    content: "";

    position: absolute;
    z-index: 1;
    top: 0;
    right: 7%;
    left: 7%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #244c86,
        #f4f8ff,
        #244c86,
        transparent
    );

    box-shadow: 0 0 12px rgba(122, 158, 214, 0.42);
}

#home-tab .home-countdown-card::after {
    content: "";

    position: absolute;
    z-index: 1;
    right: 7%;
    bottom: 0;
    left: 7%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #244c86,
        #f4f8ff,
        #244c86,
        transparent
    );

    box-shadow: 0 0 12px rgba(122, 158, 214, 0.42);

    pointer-events: none;
}

/* SERVER LAUNCH STATUS */
#home-tab .home-countdown-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

#home-tab .home-countdown-header > p {
    color: #9cb5dc;

    font-family: 'Orbitron', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-align: center;
    text-transform: uppercase;
}

/* Trang thai hien tai */
#home-tab .home-countdown-status {
    margin-top: 10px;

    color: #8199bd;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-align: center;
    text-transform: uppercase;
}

/* Hai cham sang doi xung hai ben trang thai */
#home-tab .home-countdown-status::before,
#home-tab .home-countdown-status::after {
    color: #dce9ff;

    text-shadow:
        0 0 9px rgba(205, 224, 255, 0.7);
}

#home-tab .home-countdown-status::before {
    content: "-";
    margin-right: 8px;
}

#home-tab .home-countdown-status::after {
    content: "-";
    margin-left: 8px;
}

#home-tab .home-countdown-card.is-alpha-online
    .home-countdown-status,
#home-tab .home-countdown-card.is-server-online
    .home-countdown-status {
    color: #f4f8ff;

    text-shadow:
        0 0 14px rgba(184, 208, 247, 0.38);
}

/* Tieu de countdown dung Cinzel */
#home-tab .home-countdown-card h3 {
    margin-top: 20px;

    color: #ffffff;

    font-family: 'Cinzel', Georgia, serif;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.3;
    letter-spacing: 1.1px;
    text-align: center;

    text-shadow:
        0 0 14px rgba(255, 255, 255, 0.14),
        0 0 28px rgba(106, 139, 194, 0.22);
}

/* Hai moc AlphaTest va Open Beta */
#home-tab .home-countdown-schedule {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(56px, 0.34fr)
        minmax(0, 1fr);

    gap: 14px;
    align-items: center;

    max-width: 700px;
    margin: 24px auto 0;
}

#home-tab .home-countdown-milestone {
    min-width: 0;

    color: #7189ad;
    text-align: center;
}

#home-tab .home-countdown-milestone p {
    min-width: 0;
}

#home-tab .home-countdown-milestone strong,
#home-tab .home-countdown-milestone small {
    display: block;
}

#home-tab .home-countdown-milestone strong {
    color: #dce8fb;

    font-family: 'Cinzel', Georgia, serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

#home-tab .home-countdown-milestone small {
    margin-top: 6px;

    color: #8298ba;

    font-size: 12px;
    line-height: 1.4;
}

#home-tab .home-countdown-milestone.is-active strong,
#home-tab .home-countdown-milestone.is-complete strong {
    color: #ffffff;

    text-shadow:
        0 0 14px rgba(204, 222, 251, 0.45);
}

/* Duong noi hai moc thoi gian */
#home-tab .home-countdown-route {
    position: relative;

    height: 1px;

    background: linear-gradient(
        90deg,
        #284a7d,
        #eef5ff,
        #284a7d
    );

    box-shadow:
        0 0 10px rgba(126, 158, 208, 0.42);
}

#home-tab .home-countdown-route::before,
#home-tab .home-countdown-route::after {
    content: "";

    position: relative;

    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #f6f9ff;

    box-shadow:
        0 0 11px rgba(180, 205, 245, 0.8);
}

#home-tab .home-countdown-route::before {
    position: absolute;
    top: 50%;
    left: 0;

    transform: translateY(-50%);
}

#home-tab .home-countdown-route::after {
    position: absolute;
    top: 50%;
    right: 0;

    transform: translateY(-50%);
}

/* Dong ho khong con khung bao quanh tung con so */
#home-tab .home-countdown-timer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 3vw, 34px);

    max-width: 760px;
    margin: 38px auto 0;
}

#home-tab .home-countdown-unit {
    position: relative;

    min-width: 0;

    text-align: center;
}

/* Con so su dung EB Garamond */
#home-tab .home-countdown-unit strong {
    display: block;

    color: #f9fbff;

    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(46px, 6vw, 76px);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: 1px;

    text-shadow:
        0 0 9px rgba(255, 255, 255, 0.2),
        0 0 26px rgba(76, 111, 169, 0.36);
}

#home-tab .home-countdown-unit span {
    display: block;

    margin-top: 12px;

    color: #718aad;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

#home-tab .home-countdown-timezone {
    margin-top: 30px;

    color: #627899;

    font-size: 11px;
    letter-spacing: 0.8px;
    text-align: center;
}

/* Hien thi tren dien thoai */
@media (max-width: 600px) {
    #home-tab .home-countdown-card {
        padding: 28px 18px;
    }

    /* Giu tieu de Countdown tren mot dong */
    #home-tab .home-countdown-card h3 {
        width: 100%;

        font-size:
            clamp(
                15px,
                4.8vw,
                21px
            );

        line-height: 1.25;
        letter-spacing: 0.35px;

        white-space: nowrap;
        word-break: keep-all;
        overflow-wrap: normal;
    }

    #home-tab .home-countdown-schedule {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    #home-tab .home-countdown-route {
        width: 1px;
        height: 24px;
        margin: auto;

        background: linear-gradient(
            180deg,
            #284a7d,
            #eef5ff,
            #284a7d
        );
    }

    #home-tab .home-countdown-route::before {
        top: 0;
        left: 50%;

        transform: translate(-50%, -50%);
    }

    #home-tab .home-countdown-route::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;

        transform: translate(-50%, 50%);
    }

    #home-tab .home-countdown-timer {
        gap: 12px;
    }
}

@font-face {
    font-family: 'Reospec';
    src: url('fonts/Reospec.otf') format('opentype');
}

body {
    cursor: url("images/Cursor.cur"), auto;
    font-family: Arial, Helvetica, sans-serif;
    background:
        linear-gradient(
            rgba(7, 11, 18, 0.48),
            rgba(7, 11, 18, 0.48)
        ),
        url("images/Wallpaper.png");

background-size:
    cover,
    110% auto;

background-repeat:
    no-repeat,
    no-repeat;

background-position:
    center,
    center;
background-attachment:
    fixed,
    fixed;
background-blend-mode: 
	color,
	normal;
    color: #ffffff;
}

.logo-box h1 {
    font-family: 'Reospec', Arial, sans-serif;
    letter-spacing: 4px;
}

.section-label,
.characters h2,
.panel h2 {
    font-family: 'Reospec', Arial, sans-serif;
    letter-spacing: 2px;
} 

/* Toan bo khung website */
.page {
    width: 100%;
    max-width: 1650px;

    margin: 0 auto;
    padding:
        200px
        75px
        0;

    display: flex;
    gap: 50px;

    position: relative;
    z-index: 20;

    transform: none;
}

/* =========================
   SIDEBAR
========================= */

.sidebar {
    width: 250px;
    flex-shrink: 0;
	position: sticky;
	top: 20px;
	align-self: flex-start;
	height: fit-content;	
	z-index: 50;
    background:
        linear-gradient(
            rgba(7, 11, 18, 0.20),
            rgba(7, 11, 18, 0.20)
        ),
        url("images/sidebar-scroll.png")
        center/100% 100%
        no-repeat;

    background-blend-mode: color, normal;
    padding: 30px;
}

.logo-box {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    text-align: center;
}

.logo-icon img {
    width: 325%;
    height: 325%;
    object-fit: contain;
}

.logo-icon {
    width: 120px;
    height: 120px;
    margin: auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 50px;
}

.logo-box h1 {
    margin-top: 125px;
    color: #FFFFFF;
    font-size: 25px;
    letter-spacing: 2px;
}

.logo-box p {
    margin-top: 10px;
    font-size: 15px;
    color: rgba(255, 220, 220, 0.7);
}

/* ============================================================ */
/* MENU SIDEBAR: INFINITE ENERGY */
/* ============================================================ */

.sidebar .menu {
    margin-top: 18px;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Nut menu khong co khung vien hai ben */
.sidebar .menu a {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 48px;
    padding: 13px 16px;
	white-space: nowrap;
    border: 0;
    border-radius: 0;
    overflow: hidden;

    color: #91a8b7;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(7, 18, 28, 0.55) 16%,
            rgba(12, 25, 38, 0.82) 50%,
            rgba(7, 18, 28, 0.55) 84%,
            transparent 100%
        );

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    transform: translateX(0);

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease,
        filter 0.25s ease;
}

/* Hai duong vien tren va duoi */
.sidebar .menu a::before,
.sidebar .menu a::after {
    content: "";

    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(49, 95, 120, 0.18) 12%,
            rgba(49, 95, 120, 0.72) 28%,
            rgba(75, 126, 151, 0.82) 50%,
            rgba(49, 95, 120, 0.72) 72%,
            rgba(49, 95, 120, 0.18) 88%,
            transparent 100%
        );

    opacity: 0.7;

    transition:
        opacity 0.25s ease,
        filter 0.25s ease,
        background 0.25s ease;
}

.sidebar .menu a::before {
    top: 0;
}

.sidebar .menu a::after {
    bottom: 0;
}

/* Gom icon va ten chuc nang */
.sidebar .menu-link-main {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    gap: 11px;
	flex: 1 1 auto;
    min-width: 0;
	white-space: nowrap;
}

/* Icon menu */
.sidebar .menu-icon {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    color: #7894a5;

    transition:
        color 0.25s ease,
        filter 0.25s ease,
        transform 0.25s ease;
}

/* Mui ten ben phai */
.sidebar .menu-arrow {
    position: relative;
    z-index: 3;

    color: #678291;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;

    transition:
        color 0.25s ease,
        filter 0.25s ease,
        transform 0.25s ease;
}

/* Vet sang quet qua nut Active */
.sidebar .menu-sweep {
    position: absolute;
    z-index: 1;

    top: 1px;
    bottom: 1px;
    left: -42%;

    width: 34%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(23, 107, 255, 0.04) 22%,
            rgba(126, 231, 255, 0.16) 46%,
            rgba(255, 255, 255, 0.28) 50%,
            rgba(126, 231, 255, 0.16) 54%,
            rgba(23, 107, 255, 0.04) 78%,
            transparent 100%
        );

    filter: blur(1px);
    transform: skewX(-18deg);

    opacity: 0;
    pointer-events: none;
}

/* Hover truot nhe sang phai */
.sidebar .menu a:hover {
    color: #dff7ff;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(7, 26, 50, 0.66) 16%,
            rgba(12, 36, 55, 0.9) 50%,
            rgba(7, 26, 50, 0.66) 84%,
            transparent 100%
        );

    transform: translateX(15px);
}

/* Vien Hover sang hon nhung van mo hai dau */
.sidebar .menu a:hover::before,
.sidebar .menu a:hover::after {
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(7, 26, 82, 0.4) 10%,
            rgba(23, 107, 255, 0.76) 30%,
            rgba(126, 231, 255, 0.9) 50%,
            rgba(23, 107, 255, 0.76) 70%,
            rgba(7, 26, 82, 0.4) 90%,
            transparent 100%
        );

    opacity: 0.9;
}

/* Icon phat sang khi Hover */
.sidebar .menu a:hover .menu-icon {
    color: #82d9ff;

    filter:
        drop-shadow(
            0 0 6px rgba(130, 217, 255, 0.58)
        );

    transform: scale(1.06);
}

.sidebar .menu a:hover .menu-arrow {
    color: #82d9ff;

    filter:
        drop-shadow(
            0 0 5px rgba(130, 217, 255, 0.48)
        );
}

/* Nut dang Active */
.sidebar .menu a.active {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(7, 26, 82, 0.18) 12%,
            rgba(8, 28, 48, 0.94) 30%,
            rgba(10, 35, 54, 0.98) 50%,
            rgba(8, 28, 48, 0.94) 70%,
            rgba(7, 26, 82, 0.18) 88%,
            transparent 100%
        );

    text-shadow:
        0 0 9px rgba(130, 217, 255, 0.28);
}

/* Active: trang sang o giua, xanh tan deu sang hai ben */
.sidebar .menu a.active::before,
.sidebar .menu a.active::after {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #071a52 10%,
            #176bff 25%,
            #7ee7ff 39%,
            #ffffff 50%,
            #7ee7ff 61%,
            #176bff 75%,
            #071a52 90%,
            transparent 100%
        );

    opacity: 1;

    filter:
        drop-shadow(
            0 0 4px rgba(126, 231, 255, 0.95)
        )
        drop-shadow(
            0 0 9px rgba(23, 107, 255, 0.58)
        );
}

/* Icon Active mau trang va Lam Bang */
.sidebar .menu a.active .menu-icon {
    color: #ffffff;

    filter:
        drop-shadow(
            0 0 5px rgba(255, 255, 255, 0.88)
        )
        drop-shadow(
            0 0 10px rgba(126, 231, 255, 0.75)
        );
}

.sidebar .menu a.active .menu-arrow {
    color: #ffffff;

    filter:
        drop-shadow(
            0 0 7px rgba(126, 231, 255, 0.7)
        );
}

/* Chay vet sang tren nut dang Active */
.sidebar .menu a.active .menu-sweep {
    opacity: 1;

    animation:
        sidebarMenuEnergySweep
        2.3s
        ease-in-out
        infinite;
}

/* Menu cha van duoc danh dau khi chon submenu */
.sidebar .menu > .server-guide-menu-btn.has-active-child,
.sidebar .menu > .guide-menu-btn.has-active-child,
.sidebar .menu > .events-menu-btn.has-active-child {
    color: #82d9ff;
}

.sidebar .menu > .server-guide-menu-btn.has-active-child .menu-icon,
.sidebar .menu > .guide-menu-btn.has-active-child .menu-icon,
.sidebar .menu > .events-menu-btn.has-active-child .menu-icon {
    color: #82d9ff;

    filter:
        drop-shadow(
            0 0 7px rgba(130, 217, 255, 0.58)
        );
}

/* Submenu nam lui vao phia trong */
.sidebar .submenu {
    margin: 3px 0 0 30px;
    padding-left: 9px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    border-left:
        1px solid rgba(49, 95, 120, 0.42);
}

.sidebar .submenu a {
    min-height: 39px;
    padding: 10px 12px;

    font-size: 13px;
    font-weight: 600;
}

.sidebar .submenu .menu-icon {
    width: 15px;
    height: 15px;
}

/* Vet sang quet tu trai sang phai */
@keyframes sidebarMenuEnergySweep {
    0% {
        left: -42%;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    68% {
        left: 112%;
        opacity: 1;
    }

    82%,
    100% {
        left: 112%;
        opacity: 0;
    }
}

/* Tat chuyen dong neu he thong yeu cau */
@media (prefers-reduced-motion: reduce) {
    .sidebar .menu a,
    .sidebar .menu-icon,
    .sidebar .menu-arrow {
        transition: none;
    }

    .sidebar .menu a.active .menu-sweep {
        animation: none;
        opacity: 0;
    }
}

/* =========================
   MAIN
========================= */

.main {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;

    overflow: hidden;

    border-radius: 5px;
    background: #070b12;
    border: 1px solid #223d4d;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5);
}

/* HERO */
.hero {
    position: relative;
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    border-bottom: 1px solid #223d4d;
    background:
        radial-gradient(circle at 70% 20%, rgba(107, 199, 236, 0.18), transparent 30%),
        linear-gradient(110deg, #070b12 0%, #08111a 55%, #05080d 100%);
}

.badge {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid #315f78;
    background: rgba(127, 29, 29, 0.35);
    color: #ffe0e0;
    font-size: 14px;
}

.hero h2 {
    max-width: 800px;
    margin-top: 28px;
    font-size: 64px;
    line-height: 1.05;
    color: white;
}

.hero p {
    max-width: 680px;
    margin-top: 24px;
    color: rgba(255, 220, 220, 0.7);
    font-size: 18px;
    line-height: 1.8;
}

.hero-buttons {
    margin-top: 32px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    border: none;
    border-radius: 14px;
    padding: 16px 32px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.25s;
}

.btn.primary {
    background: #245f78;
    color: white;
    box-shadow: 0 14px 30px rgba(127, 29, 29, 0.35);
}

.btn.primary:hover {
    background: #3387aa;
}

.btn.secondary {
    background: transparent;
    border: 1px solid #315f78;
    color: #ffe0e0;
}

.btn.secondary:hover {
    background: rgba(127, 29, 29, 0.35);
}

.event-card {
    padding: 24px;
    border-radius: 32px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #315f78;
}

.small-title {
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #696969 !important;
    font-size: 13px !important;
}

.castle-icon {
    margin-top: 20px;
    height: 210px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: #05080d;
    border: 1px solid #223d4d;
    font-size: 80px;
}

.event-card h3 {
    margin-top: 20px;
    font-size: 32px;
}

.event-card p {
    margin-top: 12px;
    color: rgba(255, 220, 220, 0.7);
}

/* =========================
   CONTENT
========================= */

.content-grid {
    padding: 40px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
}

/* Trang chu chi con mot cot sau khi xoa Ranking va News */
#home-tab.content-grid {
    grid-template-columns: minmax(0, 1fr);
}

.section-label {
    color: #696969;
    font-weight: bold;
}

.characters h2,
.panel h2 {
    margin-top: 8px;
    font-size: 32px;
}

/* ============================================================ */
/* TIEU DE TRANG CHU: CONG ANH SANG */
/* ============================================================ */

/* Welcome nam giua hai vach sang doi xung */
#home-tab .characters > .section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    color: #8da4c7;

    font-family: 'Orbitron', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 2.6px;
    text-align: center;
    text-transform: uppercase;
}

#home-tab .characters > .section-label::before,
#home-tab .characters > .section-label::after {
    content: "";

    flex: 0 1 90px;
    min-width: 28px;
    max-width: 90px;
    height: 1px;

    box-shadow:
        0 0 10px rgba(163, 191, 233, 0.42);
}

/* Vach sang ben trai */
#home-tab .characters > .section-label::before {
    background: linear-gradient(
        90deg,
        transparent,
        #365b91,
        #f4f8ff
    );
}

/* Vach sang ben phai */
#home-tab .characters > .section-label::after {
    background: linear-gradient(
        90deg,
        #f4f8ff,
        #365b91,
        transparent
    );
}

/* EVN Server giu nguyen size va su dung font Reospec */
#home-tab .characters > h2 {
    position: relative;

    margin-top: 14px;

    color: #f6f9ff;

    font-family: 'Reospec', Arial, sans-serif;
    text-align: center;

    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.16),
        0 0 28px rgba(75, 108, 165, 0.32);
}

/* Gach chan sang ben duoi EVN Server */
#home-tab .characters > h2::after {
    content: "";

    display: block;

    width: min(310px, 72%);
    height: 1px;
    margin: 15px auto 0;

    background: linear-gradient(
        90deg,
        transparent,
        #365b91,
        #f4f8ff,
        #365b91,
        transparent
    );

    box-shadow:
        0 0 12px rgba(131, 165, 218, 0.46);
}

.character-list {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.character-card {
    text-align: left;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #223d4d;
    background: #0c1520;
    color: white;
    cursor: pointer;
    transition: 0s;
}

.character-card:hover,
.character-card.active {
    border-color: #696969;
    background: rgba(127, 29, 29, 0.35);
}

.char-icon img {
    max-width: 100%;
    height: auto;
    display: block;
}

.character-card h3 {
    margin-top: 10px;
    font-size: 20px;
}

.character-card p {
    margin-top: 12px;
    color: rgba(255, 220, 220, 0.6);
    line-height: 1.6;
    font-size: 14px;
}

.power-bar {
    margin-top: 10px;
    height: 5px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 999px;
    overflow: hidden;
}

.power-bar span {
    display: block;
    height: 100%;
    background: #6bc7ec;
}

.selected-box {
	text-align: center;
    margin-top: 24px;
    padding: 24px;
    border-radius: 24px;
    background: #0c1520;
    border: 1px solid #223d4d;
}

.selected-box p {
    color: rgba(255, 220, 220, 0.6);
}

.selected-box h3 {
    margin-top: 4px;
    font-size: 32px;
    color: #696969;
	letter-spacing: 2px;
}

.selected-box span {
    display: block;
    margin-top: 12px;
    color: rgba(255, 220, 220, 0.75);
}

/* Anh chi tiet cua Class dang chon */
.selected-image-box {
    margin-top: 24px;
    border-radius: 24px;
    border: 1px solid #223d4d;
    overflow: hidden;
    background: #0c1520;
}

.selected-image-box img {
    display: block;
    width: 100%;
    height: auto;
}

/* RIGHT COLUMN */
.right-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.panel {
    padding: 24px;
    border-radius: 24px;
    background: #0c1520;
    border: 1px solid #223d4d;
}

.ranking-row {
    margin-top: 12px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 44px 1fr 54px 90px;
    gap: 8px;
    align-items: center;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.35);
    font-size: 14px;
}

.ranking-row b {
    color: #696969;
}

.ranking-row em,
.ranking-row small {
    color: rgba(255, 220, 220, 0.6);
    font-style: normal;
}

.news-item {
    padding: 16px 0;
    border-bottom: 1px solid #223d4d;
}

.news-item:last-child {
    border-bottom: none;
}

.news-item div {
    color: #696969;
    font-weight: 900;
    font-size: 12px;
}

.news-item h3 {
    margin-top: 6px;
}

.news-item p {
    margin-top: 6px;
    color: rgba(255, 220, 220, 0.6);
    font-size: 14px;
}

/* =========================
   RESPONSIVE ĐIỆN THOẠI
========================= */

@media (max-width: 1100px) {
    .page {
        flex-direction: column;
        align-items: center;
        gap: 30px;

        padding-top: 60px;
    }

    /* Hien Sidebar phia tren noi dung tren man hinh nho */
    .sidebar {
        display: block;

        position: static;
        align-self: center;

        width: min(100%, 320px);
        height: auto;
    }

    .hero,
    .content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .character-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero h2 {
        font-size: 44px;
    }
}

@media (max-width: 600px) {
	.page {
		padding:
			12px
			12px
			0;
	}

.sidebar {
    width: min(100%, 320px);
    max-width: 100%;

    padding:
        26px
        24px;
}

    .hero,
    .content-grid {
        padding: 24px;
    }

    .hero h2 {
        font-size: 36px;
    }

    .ranking-row {
        grid-template-columns: 36px 1fr;
    }

    .ranking-row em,
    .ranking-row small {
        display: none;
    }
}

/* ============================================================ */
/* POPUP XAC NHAN TRUOC KHI VAO WEBSITE */
/* ============================================================ */

body.welcome-popup-open {
    overflow: hidden;
}

.popup-overlay {
    position: fixed;
    z-index: 9999;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 12px;
    overflow: auto;

    background: #000000;
}

.popup-overlay[hidden] {
    display: none !important;
}

.welcome-note-dialog {
    position: relative;

    width: 100%;
    min-width: 0;

    outline: none;
}

/* An noi dung nhung van giu cho trinh doc man hinh */
.welcome-note-visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Popup anh dung chung cho Desktop va Mobile */
.welcome-note-image-view {
    position: relative;

    width: min(
        96vw,
        calc(94vh * 4 / 3),
        1448px
    );

    aspect-ratio: 4 / 3;
    margin: 0 auto;

    animation:
        welcomeNoteShow
        0.36s
        ease
        both;
}

.welcome-note-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* Vung bam trong suot dat tren anh */
.welcome-note-hotspot {
    position: absolute;
    z-index: 2;

    display: block;

    padding: 0;
    border: 0;

    color: transparent;
    background: transparent;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.welcome-note-hotspot:hover {
    background:
        rgba(126, 231, 255, 0.055);
}

.welcome-note-hotspot:focus-visible {
    outline:
        2px solid rgba(191, 238, 255, 0.92);

    outline-offset: 2px;
}

/* Nut X */
.welcome-note-close-hotspot {
    left: 84.50%;
    top: 12.40%;

    width: 4.55%;
    height: 6.50%;
}

/* Dieu khoan su dung */
.welcome-note-terms-hotspot {
    left: 22.15%;
    top: 44.65%;

    width: 11.8%;
    height: 3.0%;
}

/* Chinh sach bao mat */
.welcome-note-security-hotspot {
    left: 35.25%;
    top: 44.65%;

    width: 11.8%;
    height: 3.0%;
}

/* Vung bam chi bang dung kich thuoc o vuong 18 tuoi */
.welcome-note-age-hotspot {
    left: 66.95%;
    top: 72.95%;

    width: 2.35%;
    height: 3.14%;
}

.welcome-note-age-hotspot input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

/* Dau tich hien tren o trong cua anh */
.welcome-note-check-indicator {
    position: absolute;
    z-index: 3;

    left: 66.95%;
    top: 72.95%;

    display: grid;
    place-items: center;

    width: 2.35%;
    aspect-ratio: 1 / 1;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(11px, 1.4vw, 22px);

    font-weight: 700;

    text-shadow:
        0 0 4px #ffffff,
        0 0 10px rgba(23, 107, 255, 0.92);

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.18s ease;
}

.popup-overlay.is-age-confirmed
.welcome-note-check-indicator {
    opacity: 1;
}

/* Nut Tu choi */
.welcome-note-decline-hotspot {
    left: 33.425%;
    top: 82.50%;

    width: 23.0000%;
    height: 8.75%;

    transform: translateX(-50%);
}

/* Nut Dong y */
.welcome-note-agree-hotspot {
    left: 65.7%;
    top: 82.50%;

    width: 23.0000%;
    height: 8.75%;

    transform: translateX(-50%);
}

/* Lam toi nut Dong y khi chua xac nhan 18 tuoi */
.welcome-note-agree-hotspot::after {
    content: "";

    position: absolute;
    inset: 7% -5%;

    background:
        rgba(0, 0, 0, 0.62);

    clip-path:
        polygon(
            10% 0,
            90% 0,
            100% 50%,
            90% 100%,
            10% 100%,
            0 50%
        );

    transition:
        opacity 0.18s ease;
}

.popup-overlay.is-age-confirmed
.welcome-note-agree-hotspot::after {
    opacity: 0;
}

.welcome-note-agree-hotspot:disabled {
    cursor: not-allowed;
}

/* Man hinh Denied su dung nguyen anh 4:3 */
.welcome-note-declined {
    position: relative;

    width: min(
        96vw,
        calc(94vh * 4 / 3),
        1448px
    );

    aspect-ratio: 4 / 3;
    margin: 0 auto;

    animation:
        welcomeNoteShow
        0.36s
        ease
        both;
}

.welcome-note-declined-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* Vung bam trong suot phu vua nut Quay Lai */
.welcome-note-reconsider-hotspot {
    left: 50%;
    top: 64.2%;

    width: 32.35%;
    height: 9.9%;

    transform: translateX(-50%);

    clip-path:
        polygon(
            8% 0,
            92% 0,
            100% 50%,
            92% 100%,
            8% 100%,
            0 50%
        );
}

.welcome-note-reconsider-hotspot:hover {
    background:
        rgba(190, 38, 30, 0.08);
}

.popup-overlay.is-declined
.welcome-note-image-view {
    display: none !important;
}

/* Dua Popup Phap ly len tren Popup xac nhan */
.class-counter-popup.legal-popup {
    z-index: 12000;
}

@keyframes welcomeNoteShow {
    from {
        opacity: 0;

        transform:
            translateY(12px)
            scale(0.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .welcome-note-image-view,
    .welcome-note-declined {
        animation: none;
    }

    .welcome-note-check-indicator,
    .welcome-note-agree-hotspot::after {
        transition: none;
    }
}

/* ============================================================ */
/* Đổi font cho tên Class */
.class-name {
    text-align: center;

    font-family: 'Reospec';

    letter-spacing: 2px;

    color: #d1d5db;

    text-shadow:
        0 0 10px rgba(255,255,255,.25);

    font-size: 18px;
}
/* ============================================================ */
/* ============================================================ */
/* Menu Hướng Dẫn */
.hidden {
    display: none !important;
}
/* ============================================================ */
/* ============================================================ */
/* Menu Vật Phẩm */



/* ============================================================ */
/* EMBER EFFECT <Hiệu ứng tro tàn> */
/* ============================================================ */
.embers {
    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
/* Sau nền : 1 - Trước nền : 999 */
    z-index: 999; 
}

/* Hat nang luong */
.ember {
    position: absolute;
    bottom: -20px;

    width: 1px;
    height: 1px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(151, 222, 255, 1) 0%,
            rgba(107, 199, 236, 0.8) 40%,
            transparent 80%
        );

    box-shadow:
        0 0 12px rgba(107, 199, 236, 0.8);

    animation: emberFloat linear forwards;
}

/* Bay lên */
@keyframes emberFloat {

    0% {
        transform:
            translateY(0)
            translateX(0)
            scale(1);

        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform:
            translateY(-110vh)
            translateX(80px)
            scale(0);

        opacity: 0;
    }
}
/* ============================================================ */
/* Mũi tên Tab hướng dẫn */
/* ============================================================ */
#server-guide-arrow,
#guide-arrow,
#events-arrow {
    display: inline-block;
    transition: 0.25s ease;
}

/* ============================================================ */
/* CAC TAB HUONG DAN SERVER */
/* ============================================================ */

/* Moi tab Huong Dan Server chi su dung mot cot */
.server-guide-tab {
    grid-template-columns: minmax(0, 1fr);
}

.server-guide-page {
    width: 100%;
    min-width: 0;
}

.server-guide-header {
    text-align: center;
}

.server-guide-header .section-label {
    color: #8298ba;

    font-family: 'Orbitron', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.server-guide-header h2 {
    margin-top: 10px;

    color: #f7f9ff;

    font-family: 'Reospec', Arial, sans-serif;
    font-size: 34px;
    letter-spacing: 1.5px;

    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.14),
        0 0 28px rgba(75, 108, 165, 0.28);
}

.server-guide-header > p:last-child {
    max-width: 680px;
    margin: 12px auto 0;

    color: #91a4be;

    font-size: 14px;
    line-height: 1.7;
}

.server-guide-panel {
    max-width: 1000px;
    margin: 32px auto 0;
    padding: 28px;

    border: 1px solid rgba(49, 95, 120, 0.72);
    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            rgba(12, 27, 50, 0.95),
            rgba(6, 13, 25, 0.98)
        );

    text-align: center;

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.28),
        inset 0 0 22px rgba(67, 96, 146, 0.05);
}

.server-guide-panel h3 {
    color: #dce8f8;

    font-family: 'Reospec', Arial, sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
}

/* ============================================================ */
/* DANH SACH THONG TIN SERVER */
/* ============================================================ */

/* Ghi de can giua cua khung Huong Dan chung */
.server-info-panel {
    padding: 0 28px;
    text-align: left;
}

.server-info-list {
    width: 100%;
    margin: 0;
}

/* Moi hang gom nhan ben trai va gia tri ben phai */
.server-info-row {
    display: grid;
    grid-template-columns:
        minmax(190px, 0.42fr)
        minmax(0, 1fr);

    gap: 22px;
    align-items: baseline;

    padding: 16px 4px;

    border-bottom:
        1px solid rgba(78, 123, 157, 0.20);
}

/* Tao duong vien cho hang dau tien */
.server-info-row:first-child {
    border-top:
        1px solid rgba(78, 123, 157, 0.42);
}

/* Nhan thong tin in dam va dung mau Lam Bang */
.server-info-row dt {
    color: #82d9ff;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.3px;

    text-shadow:
        0 0 9px rgba(130, 217, 255, 0.22);
}

/* Gia tri thong tin mau trang */
.server-info-row dd {
    min-width: 0;
    margin: 0;

    color: #f4f8ff;

    font-size: 14px;
    line-height: 1.7;

    overflow-wrap: anywhere;
}

/* Chuyen thanh hai dong tren man hinh nho */
@media (max-width: 600px) {
    .server-info-panel {
        padding: 0 18px;
    }

    .server-info-row {
        grid-template-columns: minmax(0, 1fr);

        gap: 6px;
        padding: 15px 0;
    }
}

/* ============================================================ */
/* BANG DIEU KIEN RESET: COUNTDOWN RAIL */
/* ============================================================ */

/* Ghi de giao dien khung Huong Dan chung */
#reset-conditions-tab .reset-conditions-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 28px;

    border:
        1px solid rgba(68, 96, 143, 0.55);

    border-radius: 6px;

    background:
        radial-gradient(
            circle at 50% -18%,
            rgba(87, 119, 173, 0.24),
            transparent 46%
        ),
        linear-gradient(
            145deg,
            #0a1428,
            #050a15 64%,
            #081226
        );

    text-align: left;

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.34),
        inset 0 0 38px rgba(72, 103, 156, 0.08);
}

/* Hai duong sang tren va duoi giong Countdown */
#reset-conditions-tab .reset-conditions-panel::before,
#reset-conditions-tab .reset-conditions-panel::after {
    content: "";

    position: absolute;
    z-index: 1;

    right: 7%;
    left: 7%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #244c86,
            #f4f8ff,
            #244c86,
            transparent
        );

    box-shadow:
        0 0 12px rgba(122, 158, 214, 0.42);

    pointer-events: none;
}

#reset-conditions-tab .reset-conditions-panel::before {
    top: 0;
}

#reset-conditions-tab .reset-conditions-panel::after {
    bottom: 0;
}

/* Dua noi dung len tren hai duong trang tri */
#reset-conditions-tab .reset-table-heading,
#reset-conditions-tab .reset-table-scroll {
    position: relative;
    z-index: 2;
}

/* Tieu de nam phia tren bang */
#reset-conditions-tab .reset-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 18px;
}

/* Ten bang dung font giong Countdown */
#reset-conditions-tab .reset-table-heading h3 {
    margin: 0;

    color: #eaf2ff;

    font-family: 'Cinzel', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.8px;

    text-shadow:
        0 0 14px rgba(204, 222, 251, 0.22);
}

/* Nhan phien ban ben phai */
#reset-conditions-tab .reset-table-heading span {
    color: #6f86a8;

    font-family: 'Orbitron', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    white-space: nowrap;
}

/* Cho phep cuon ngang tren man hinh hep */
#reset-conditions-tab .reset-table-scroll {
    width: 100%;
    overflow-x: auto;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(130, 217, 255, 0.48)
        rgba(7, 11, 18, 0.72);

    -webkit-overflow-scrolling: touch;
}

/* Bang dieu kien Reset */
#reset-conditions-tab .reset-conditions-table {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;
    table-layout: fixed;

    color: #dbe7f6;

    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* Can giua tieu de va du lieu */
#reset-conditions-tab .reset-conditions-table th,
#reset-conditions-tab .reset-conditions-table td {
    padding: 15px 12px;

    text-align: center;
    white-space: nowrap;
}

/* Tieu de cac cot */
#reset-conditions-tab .reset-conditions-table thead th {
    color: #c2d4ef;

    border-bottom:
        1px solid rgba(68, 96, 143, 0.55);

    font-family: 'Orbitron', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

/* Duong phan cach giua cac hang */
#reset-conditions-tab .reset-conditions-table tbody td {
    color: #dbe7f6;

    border-bottom:
        1px solid rgba(45, 70, 103, 0.36);

    transition:
        color 180ms ease,
        background-color 180ms ease;
}

/* Hang cuoi khong can duong ke */
#reset-conditions-tab
    .reset-conditions-table
    tbody
    tr:last-child
    td {
    border-bottom: 0;
}

/* Lam noi bat cot Reset */
#reset-conditions-tab
    .reset-conditions-table
    tbody
    td:first-child {
    color: #ffffff;

    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;

    text-shadow:
        0 0 14px rgba(204, 222, 251, 0.42);
}

/* Hieu ung khi di chuot qua tung hang */
#reset-conditions-tab
    .reset-conditions-table
    tbody
    tr:hover {
    background:
        rgba(87, 119, 173, 0.11);
}

#reset-conditions-tab
    .reset-conditions-table
    tbody
    tr:hover
    td {
    color: #ffffff;
}

/* Thanh cuon ngang tren Chrome va Edge */
#reset-conditions-tab
    .reset-table-scroll::-webkit-scrollbar {
    height: 7px;
}

#reset-conditions-tab
    .reset-table-scroll::-webkit-scrollbar-track {
    background: rgba(7, 11, 18, 0.72);
}

#reset-conditions-tab
    .reset-table-scroll::-webkit-scrollbar-thumb {
    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            #244c86,
            #82d9ff,
            #244c86
        );
}

/* Hien thi tren dien thoai */
@media (max-width: 600px) {
    #reset-conditions-tab .reset-conditions-panel {
        padding: 22px 16px;
    }

    #reset-conditions-tab .reset-table-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    #reset-conditions-tab .reset-conditions-table {
        min-width: 760px;
    }
}

/* ============================================================ */
/* TIMELINE LO TRINH GAME */
/* ============================================================ */

/* Ghi de can giua cua khung Huong Dan chung */
.game-roadmap-panel {
    --game-roadmap-row-space: 10px;

    padding: 30px 34px;
    text-align: left;
}

/* Danh sach cac moc theo thu tu thoi gian */
.game-roadmap-list {
    position: relative;

    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 0 0 42px;

    list-style: none;
}

/* Duong nang luong noi cac moc */
.game-roadmap-list::before {
    content: "";

    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 9px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            #82d9ff,
            #176bff
        );

    box-shadow:
        0 0 10px rgba(126, 231, 255, 0.50);
}

/* Moi moc trong lo trinh */
.game-roadmap-item {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(240px, 0.48fr)
        minmax(0, 1fr);

    gap: 100px;
    align-items: start;

    padding:
        12px
        0
        var(--game-roadmap-row-space);

    border-bottom:
        1px solid rgba(70, 112, 148, 0.20);
}

/* Tao khoang cach cho cac moc tu thu hai tro di */
.game-roadmap-item + .game-roadmap-item {
    padding-top:
        var(--game-roadmap-row-space);
}

/* Cham sang tren tung moc */
.game-roadmap-item::before {
    content: "";

    position: absolute;
    top: 16px;
    left: -40px;

    width: 16px;
    height: 16px;

    border: 2px solid #82d9ff;
    border-radius: 50%;

    background: #050a13;

    box-shadow:
        0 0 0 5px rgba(23, 107, 255, 0.12),
        0 0 16px rgba(126, 231, 255, 0.55);
}

/* Can lai cham sang cua cac moc tu thu hai */
.game-roadmap-item + .game-roadmap-item::before {
    top:
        calc(
            var(--game-roadmap-row-space)
            + 4px
        );
}

/* Ten item */
.game-roadmap-milestone h3 {
    margin: 0;

    color: #f4f8ff;

    font-family: 'Reospec', Arial, sans-serif;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: 1px;
	white-space: nowrap;
    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.16);
}

/* Thoi gian mo moc */
.game-roadmap-milestone span {
    display: block;

    margin-top: 5px;

    color: #82d9ff;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;

    text-shadow:
        0 0 10px rgba(130, 217, 255, 0.22);
}

/* Tieu de cot Thong tin */
.game-roadmap-content strong {
    display: block;

    color: #f4f8ff;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

/* Noi dung chi tiet cua tung moc */
.game-roadmap-content p {
    max-width: none;
    margin: 10px 0 0;

    color: #91a4be;

    font-size: 14px;
    line-height: 1.7;
}

/* Chuyen timeline thanh mot cot tren man hinh nho */
@media (max-width: 600px) {
    .game-roadmap-panel {
        padding: 26px 18px;
    }

    .game-roadmap-list {
        padding-left: 34px;
    }

    .game-roadmap-list::before {
        left: 7px;
    }

    .game-roadmap-item {
        grid-template-columns: minmax(0, 1fr);

        gap: 15px;
        padding-bottom:
    var(--game-roadmap-row-space);
    }

    .game-roadmap-item::before {
        left: -34px;
    }
	
	.game-roadmap-milestone h3 {
    white-space: normal;
}
}

/* ============================================================ */
/* Chuột hover Button/Link */
/* ============================================================ */
button:hover,
a:hover {

    cursor: url("images/CursorGet.cur"), pointer;
}
/* Chuột Click */
body:active {

    cursor: url("images/CursorClick.cur"), auto;
}

/* ============================================================ */
/* DIEU CHINH RIENG CHO TAB CLASS */
/* ============================================================ */

/* Tab Class chi dung mot cot va can giua toan bo noi dung */
#guide-tab {
    grid-template-columns: minmax(0, 1fr);
}

#guide-tab .characters {
    width: 100%;
    min-width: 0;
}

#guide-tab .section-label,
#guide-tab .characters > h2 {
    text-align: center;
	transform: translateY(-15px);
}

#guide-tab .character-list,
#guide-tab .selected-box {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Chinh kich thuoc 5 khung Select Class */
#guide-tab .character-list {
    max-width: 1000px;
}

/* Lam vuong khung ten va mo ta Class */
#guide-tab .selected-box {
    border-radius: 4px;
}

/* Tao khung anh bang nhau cho ca 5 Class */
#guide-tab .character-card .char-icon {
    aspect-ratio: 1122 / 1402;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#guide-tab .character-card .char-icon img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transform-origin: center;
}

/* Phong to 4 anh de can bang voi Class MG */
#guide-tab .character-card:not([data-name="Magic Gladiator"]) .char-icon img {
    transform: scale(1.00);
}

/* Mo rong mo ta va giu noi dung o chinh giua */
#guide-tab #selected-description {
    width: 100%;
    max-width: 1300px;
    margin: 16px auto 0;
    line-height: 1.8;
}

/* Can giua anh Class Info, khong phong lon qua kich thuoc goc */
#guide-tab .selected-image-box {
    width: 100%;
    max-width: 800px;
    margin: 24px auto 0;
}

/* ============================================================ */
/* HIEU UNG CLASS DANG DUOC CHON */
/* ============================================================ */

@property --class-led-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

#guide-tab .character-card {
    isolation: isolate;
    transform-origin: center;
}

#guide-tab .character-card.active {
    border: 2px solid transparent;

    background:
        linear-gradient(
            #0c1520,
            #0c1520
        ) padding-box,

        conic-gradient(
            from var(--class-led-angle),

            transparent 0deg,
            transparent 18deg,

            #071a52 28deg,
            #176bff 40deg,
            #7ee7ff 50deg,
            #ffffff 58deg,
            #7ee7ff 66deg,
            #176bff 76deg,
            #071a52 88deg,

            transparent 100deg,
            transparent 198deg,

            #071a52 208deg,
            #176bff 220deg,
            #7ee7ff 230deg,
            #ffffff 238deg,
            #7ee7ff 246deg,
            #176bff 256deg,
            #071a52 268deg,

            transparent 280deg,
            transparent 360deg
        ) border-box;

    animation:
        classLedBorder
        2.2s
        linear
        infinite;
}

/* Chu Class dang chon phat sang xanh trang */
#guide-tab .character-card.active .class-name {
    color: #ffffff;

    text-shadow:
        0 0 7px rgba(255, 255, 255, 0.92),
        0 0 16px rgba(126, 231, 255, 0.90),
        0 0 28px rgba(23, 107, 255, 0.55);
}

@keyframes classLedBorder {
    to {
        --class-led-angle: 360deg;
    }
}

/* ============================================================ */
/* HIEU UNG CHUYEN CLASS INFO */
/* ============================================================ */

#guide-tab .selected-box,
#guide-tab .selected-image-box {
    will-change: opacity, transform, filter;

    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        filter 0.22s ease;
}

/* An noi dung cu truoc khi thay Class */
#guide-tab .class-info-is-leaving {
    opacity: 0;
    transform: scale(0.985);
    filter: blur(2px) brightness(0.7);
}

/* Hien ten va mo ta tu duoi len */
#guide-tab .selected-box.class-info-cinematic-in {
    animation: classInfoTextRise 0.65s ease-out both;
}

/* Hien anh bang Fade va Zoom dien anh */
#guide-tab .selected-image-box.class-info-cinematic-in {
    animation:
        classInfoCinematicIn
        0.85s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

@keyframes classInfoTextRise {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes classInfoCinematicIn {
    0% {
        opacity: 0;
        transform: scale(0.91);
        filter: blur(7px) brightness(0.55);
    }

    55% {
        opacity: 1;
        filter: blur(0) brightness(1.12);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    #guide-tab .selected-box,
    #guide-tab .selected-image-box {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================ */
/* BO CUC NGANG THU GON CHO CLASS INFO */
/* ============================================================ */

#guide-tab .class-info-compact {
    --class-info-image-width: 385px;

    width: 100%;
    max-width: 1400px;
    margin: 24px auto 0;

    display: grid;
    grid-template-columns:
        var(--class-info-image-width)
        minmax(0, 1fr);

    gap: 20px;
    align-items: stretch;
}

/* Lam vuong hai khung Class Info */
#guide-tab .class-info-compact .selected-image-box,
#guide-tab .class-info-compact .selected-box {
    border-radius: 4px;
}

/* Anh Class Info nam ben trai */
#guide-tab .class-info-compact .selected-image-box {
    width: var(--class-info-image-width);
    max-width: none;
    margin: 0;

    aspect-ratio: 2 / 3;
    align-self: start;
}

#guide-tab .class-info-compact .selected-image-box img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}

/* Ten, vai tro va mo ta nam ben phai */
#guide-tab .class-info-compact .selected-box {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

#guide-tab .class-info-compact #selected-description {
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
}

/* Chuyen thanh bo cuc doc tren man hinh hep */
@media (max-width: 900px) {
    #guide-tab .class-info-compact {
        grid-template-columns: 1fr;
    }

    #guide-tab .class-info-compact .selected-image-box {
        width: min(
            100%,
            var(--class-info-image-width)
        );

        justify-self: center;
    }
}

/* ============================================================ */
/* THANH CHI SO CLASS - PHUONG AN 2: DAI SANG QUET */
/* ============================================================ */

/* Dua ten va mo ta len tren, danh phan duoi cho cac thanh chi so */
#guide-tab .class-info-compact .selected-box {
    min-height: calc(var(--class-info-image-width) * 1.5);
    padding: 18px 28px 24px;
    justify-content: flex-start;
    text-align: left;
}

#guide-tab .class-info-text {
    position: relative;
    flex: 0 0 auto;
    padding-bottom: 26px;
}

/* Duong ke vang ben duoi phan mo ta */
#guide-tab .class-info-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 6px;
    width: min(320px, 65%);
    height: 2px;
    background: linear-gradient(
        90deg,
        #f2ba57,
        rgba(242, 186, 87, 0)
    );
    opacity: 0.75;
}

/* Ten Class su dung font Cinzel giong Countdown */
#guide-tab .class-info-compact .selected-box #selected-name {
    margin: 0;
    color: #ffffff;

    font-family: 'Cinzel', Georgia, serif;
    font-size: clamp(30px, 3.5vw, 46px);
    font-weight: 700;

    line-height: 0.98;
    letter-spacing: 0.5px;

    text-shadow:
        0 2px 20px rgba(255, 47, 24, 0.16);
}

/* Loai nhan vat mau vang */
#guide-tab .class-info-compact .selected-box #selected-role {
    margin-top: 8px;
    color: #f2ba57;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: none;
}

/* Mo ta mau trang xam */
#guide-tab .class-info-compact #selected-description {
    margin: 14px 0 0;
    color: #bbb6ae;
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.65;
}

/* Day cum thanh chi so xuong cuoi khung thong tin */
#guide-tab .class-stats {
    width: 100%;
    margin-top: auto;
    padding-top: 22px;
    display: grid;
    gap: 10px;
}

#guide-tab .class-stat {
    --stat-color-start: #8c151c;
    --stat-color-end: #ff4b35;
}

#guide-tab .class-stat[data-stat="speed"] {
    --stat-color-start: #8a5312;
    --stat-color-end: #f5bd4f;
}

#guide-tab .class-stat[data-stat="stamina"] {
    --stat-color-start: #24672c;
    --stat-color-end: #74d179;
}

#guide-tab .class-stat[data-stat="energy"] {
    --stat-color-start: #173e81;
    --stat-color-end: #65a7ff;
}

#guide-tab .class-stat-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}

/* Ghi de style span chung cua selected-box */
#guide-tab .class-stat-heading span,
#guide-tab .class-stat-fill {
    display: block;
    margin-top: 0;
}

#guide-tab .class-stat-heading span {
    color: rgba(255, 238, 228, 0.82);
    font-size: 12px;
    font-weight: 700;
}

#guide-tab .class-stat-value {
    color: #ffffff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

#guide-tab .class-stat-track {
    position: relative;
    width: 100%;
    height: 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.58);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}

#guide-tab .class-stat-fill {
    position: absolute;
    inset: 1px auto 1px 1px;
    width: var(--stat-value);
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        var(--stat-color-start),
        var(--stat-color-end)
    );
    box-shadow: 0 0 10px var(--stat-color-end);
    transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Vet sang chay tu trai sang phai ben trong thanh */
#guide-tab .class-stat-fill::after {
    content: "";
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -48px;
    width: 38px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.88),
        transparent
    );
    filter: blur(1px);
    transform: skewX(-18deg);
    animation: classStatSheen 2.6s ease-in-out infinite;
}

#guide-tab .class-stat:nth-child(2) .class-stat-fill::after {
    animation-delay: 0.16s;
}

#guide-tab .class-stat:nth-child(3) .class-stat-fill::after {
    animation-delay: 0.32s;
}

#guide-tab .class-stat:nth-child(4) .class-stat-fill::after {
    animation-delay: 0.48s;
}

/* Thanh nap lai tu 0 den thong so moi khi doi Class */
#guide-tab .class-stats-is-updating .class-stat-fill {
    animation: classStatFillIn 0.78s
        cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes classStatFillIn {
    from {
        width: 0;
    }

    to {
        width: var(--stat-value);
    }
}

@keyframes classStatSheen {
    0%,
    22% {
        left: -48px;
        opacity: 0;
    }

    36% {
        opacity: 1;
    }

    68%,
    100% {
        left: calc(100% + 48px);
        opacity: 0;
    }
}

@media (max-width: 900px) {
    #guide-tab .class-info-compact .selected-box {
        min-height: 360px;
        padding: 22px;
    }

    #guide-tab .class-stats {
        margin-top: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #guide-tab .class-stat-fill,
    #guide-tab .class-stat-fill::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================ */
/* BANG MAU CLASS INFO: XANH DEM VA LAM BANG */
/* ============================================================ */

/* Gom anh va noi dung thanh mot khung thong nhat */
#guide-tab .class-info-compact {
    gap: 0;
    border: 1px solid #315f78;
    border-radius: 5px;
    overflow: hidden;
    background: #070b12;
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.36),
        inset 0 0 42px rgba(255, 255, 255, 0.015);
}

/* Khung anh ben trai */
#guide-tab .class-info-compact .selected-image-box {
    border: 0;
    border-right: 1px solid rgba(49, 95, 120, 0.7);
    border-radius: 0;
    background: #070b12;
}

/* Khung ten, mo ta va chi so ben phai */
#guide-tab .class-info-compact .selected-box {
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(107, 199, 236, 0.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0c1520,
            #070b12
        );
    box-shadow:
        inset 0 0 42px rgba(255, 255, 255, 0.015);
}

/* Ten Class mau trang kem anh sang xanh nhe */
#guide-tab .class-info-compact .selected-box #selected-name {
    color: #ffffff;
    text-shadow:
        0 2px 18px rgba(107, 199, 236, 0.18);
}

/* Loai nhan vat mau lam bang */
#guide-tab .class-info-compact .selected-box #selected-role {
    color: #82d9ff;
}

/* Mo ta mau trang xam lanh */
#guide-tab .class-info-compact #selected-description {
    color: #b7c2ca;
}

/* Duong phan cach lam bang mo dan */
#guide-tab .class-info-text::after {
    background: linear-gradient(
        90deg,
        #82d9ff,
        rgba(107, 199, 236, 0)
    );
    opacity: 0.78;
}

/* Nen thanh chi so co anh xanh rat nhe */
#guide-tab .class-stat-track {
    border-color: rgba(107, 199, 236, 0.12);
    background: rgba(107, 199, 236, 0.09);
}

/* Chuyen duong phan cach sang nam ngang tren man hinh nho */
@media (max-width: 900px) {
    #guide-tab .class-info-compact .selected-image-box {
        border-right: 0;
        border-bottom:
            1px solid rgba(49, 95, 120, 0.7);
    }
}

/* ============================================================ */
/* NUT MO BAN DO KHAC CHE CLASS */
/* ============================================================ */

/* Can giua nut va tao duong phan cach phia duoi */
#guide-tab .class-counter-action {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    margin-top: 16px;
    padding-bottom: 22px;
}

/* Duong sang ben duoi dao nguoc tu phai sang trai */
#guide-tab .class-counter-action::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;

    width: min(320px, 65%);
    height: 2px;

    background:
        linear-gradient(
            to left,
            #82d9ff,
            rgba(107, 199, 236, 0)
        );

    opacity: 0.78;
}

/* Nut Class Counter su dung hai LED duoi nhau */
:is(#guide-tab, #grand-challenge-tab) .class-counter-button {
    position: relative;
    isolation: isolate;

    display: grid;

    grid-template-columns:
        23px
        minmax(0, 1fr)
        23px;

    align-items: center;
    justify-items: center;
    gap: 12px;

    width: min(100%, 270px);
    min-height: 52px;
    margin: 0;
    padding: 11px 18px;

    border: 2px solid transparent;
    border-radius: 4px;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(12, 32, 48, 0.98),
            rgba(6, 17, 27, 0.99)
        ) padding-box,

        conic-gradient(
            from var(--class-led-angle),

            transparent 0deg,
            transparent 20deg,

            #071a52 28deg,
            #176bff 38deg,
            #7ee7ff 47deg,
            #ffffff 54deg,
            #7ee7ff 61deg,
            #176bff 70deg,
            #071a52 80deg,

            transparent 90deg,
            transparent 200deg,

            #071a52 208deg,
            #176bff 218deg,
            #7ee7ff 227deg,
            #ffffff 234deg,
            #7ee7ff 241deg,
            #176bff 250deg,
            #071a52 260deg,

            transparent 270deg,
            transparent 360deg
        ) border-box;

    font-family: 'Reospec', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 1px;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.28),
        inset 0 0 16px rgba(130, 217, 255, 0.07);

    transform: translateY(0);

    animation:
        classLedBorder
        3.2s
        linear
        infinite;

    transition:
        filter 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

/* Can chinh giua dong chu trong cot giua */
:is(#guide-tab, #grand-challenge-tab) .class-counter-button > span {
    min-width: 0;

    justify-self: stretch;

    text-align: center;
    white-space: nowrap;
}

/* Kich thuoc chung cua hai icon */
:is(#guide-tab, #grand-challenge-tab) .class-counter-icon {
    display: block;

    width: 22px;
    height: 22px;

    transition:
        color 0.22s ease,
        filter 0.22s ease,
        transform 0.22s ease;
}

/* Icon hai thanh kiem cheo */
:is(#guide-tab, #grand-challenge-tab) .class-counter-button:hover
.class-counter-swords {
    color: #eafcff;
    width: 28px;
    height: 28px;
    filter:
        drop-shadow(
            0 0 5px rgba(130, 217, 255, 0.45)
        );
}

/* Icon cai khien */
:is(#guide-tab, #grand-challenge-tab) .class-counter-shield {
    color: #dce8f8;
    width: 28px;
    height: 28px;
    filter:
        drop-shadow(
            0 0 7px rgba(220, 232, 248, 0.28)
        );
}

/* Hover chi ung sang nhe va nang nut len */
:is(#guide-tab, #grand-challenge-tab) .class-counter-button:hover {
    filter: brightness(1.06);

    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.34),
        0 0 9px rgba(126, 231, 255, 0.16),
        inset 0 0 18px rgba(130, 217, 255, 0.09);

    transform: translateY(-3px);
}



:is(#guide-tab, #grand-challenge-tab) .class-counter-button:hover
.class-counter-shield {
    color: #ffffff;

    filter:
        drop-shadow(
            0 0 10px rgba(130, 217, 255, 0.72)
        );

    transform: scale(1.06);
}

:is(#guide-tab, #grand-challenge-tab) .class-counter-button:focus-visible {
    outline: 2px solid #7ee7ff;
    outline-offset: 4px;
}

/* ============================================================ */
/* POPUP BAN DO KHAC CHE CLASS */
/* ============================================================ */

body.class-counter-popup-open {
    overflow: hidden;
}

.class-counter-popup {
    position: fixed;
    z-index: 9000;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 12px;

    background: rgba(1, 4, 8, 0.84);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    backdrop-filter: blur(5px);

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}

.class-counter-popup.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.class-counter-dialog {
    width: min(
        620px,
        calc(100vw - 24px)
    );

    max-height: calc(100vh - 24px);
    padding: 16px;

    overflow: auto;
    overscroll-behavior: contain;

    border: 1px solid rgba(130, 217, 255, 0.62);
    border-radius: 5px;

    color: #f7f9ff;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(130, 217, 255, 0.10),
            transparent 30%
        ),
        #050a11;

    box-shadow:
        0 0 32px rgba(23, 107, 255, 0.36),
        0 28px 70px rgba(0, 0, 0, 0.72),
        inset 0 0 26px rgba(130, 217, 255, 0.05);

    opacity: 0;

    transform:
        translateY(14px)
        scale(0.96);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.class-counter-popup.is-visible
.class-counter-dialog {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.class-counter-popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    padding-bottom: 12px;

    border-bottom:
        1px solid rgba(130, 217, 255, 0.18);
}

.class-counter-popup-header p {
    margin: 0;

    color: #82d9ff;

    font-family: 'Orbitron', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.class-counter-popup-header h2 {
    margin: 5px 0 0;

    color: #ffffff;

    font-family: 'Reospec', Arial, sans-serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 1px;

    text-shadow:
        0 0 18px rgba(130, 217, 255, 0.18);
}

.class-counter-close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;

    width: 44px;
    height: 44px;
    padding: 0;

    border:
        1px solid rgba(130, 217, 255, 0.32);

    border-radius: 3px;

    color: #dce8f8;
    background: rgba(7, 18, 28, 0.88);

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.class-counter-close svg {
    width: 20px;
    height: 20px;
}

.class-counter-close:hover {
    color: #ffffff;
    border-color: #82d9ff;

    box-shadow:
        0 0 18px rgba(130, 217, 255, 0.28);
}

.class-counter-close:focus-visible {
    outline: 2px solid #7ee7ff;
    outline-offset: 3px;
}

.class-counter-figure {
    width: min(
        560px,
        calc(100vw - 64px),
        calc(100vh - 190px)
    );

    margin: 16px auto 0;
}

.class-counter-figure img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.class-counter-figure figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 12px;

    color: #9cb2c0;

    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.class-counter-figure figcaption span {
    color: #82d9ff;
    font-size: 18px;

    text-shadow:
        0 0 10px rgba(130, 217, 255, 0.55);
}

@media (max-width: 480px) {
    .class-counter-dialog {
        padding: 12px;
    }

    .class-counter-popup-header h2 {
        font-size: 20px;
    }

    .class-counter-figure {
        width: min(
            560px,
            calc(100vw - 48px),
            calc(100vh - 170px)
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .class-counter-popup,
    .class-counter-dialog,
    :is(#guide-tab, #grand-challenge-tab) .class-counter-button {
        transition: none;
    }

    :is(#guide-tab, #grand-challenge-tab) .class-counter-button {
        animation: none;
    }
}

/* ============================================================ */
/* HIEU UNG CHUYEN TAB: FADE + RISE */
/* ============================================================ */

/* Tab cu mo dan truoc khi an */
.tab-content.tab-is-leaving {
    animation: tabFadeOut 160ms ease forwards;
    pointer-events: none;
}

/* Tab moi mo dan va truot nhe len */
.tab-content.tab-is-entering {
    animation: tabFadeRiseIn 420ms
        cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Hieu ung thoat cua tab cu */
@keyframes tabFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* Hieu ung xuat hien cua tab moi */
@keyframes tabFadeRiseIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Giam chuyen dong neu thiet bi yeu cau */
@media (prefers-reduced-motion: reduce) {
    .tab-content.tab-is-leaving,
    .tab-content.tab-is-entering {
        animation-duration: 1ms !important;
    }
}

/* ============================================================ */
/* BO CHON SKILL: XANH DEM VA LAM BANG */
/* ============================================================ */

#guide-tab .class-skill-panel {
    width: 100%;
    max-width: 1400px;
    margin: 18px auto 0;
    padding: 22px;
    border: 1px solid #315f78;
    border-radius: 5px;
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(130, 217, 255, 0.09),
            transparent 34%
        ),
        linear-gradient(135deg, #0c1520, #070b12);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.32),
        inset 0 0 36px rgba(255, 255, 255, 0.012);
}

#guide-tab .class-skill-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(130, 217, 255, 0.18);
}

#guide-tab .class-skill-label {
    margin: 0 0 4px;
    color: #82d9ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#guide-tab .class-skill-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(20px, 2vw, 27px);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.15;
    text-shadow: 0 2px 16px rgba(130, 217, 255, 0.14);
}

#guide-tab #class-skill-count {
    flex: 0 0 auto;
    color: #9cb2c0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#guide-tab .class-skill-layout {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 18px;
}

#guide-tab .class-skill-selector {
    display: grid;
    grid-template-columns: 62px;
    align-content: start;
    gap: 9px;
}

#guide-tab .class-skill-button {
    position: relative;
    display: grid;
    width: 62px;
    min-height: 66px;
    padding: 8px;
    place-items: center;
    border: 1px solid rgba(130, 217, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    color: #8fa8b7;
    background: rgba(4, 11, 18, 0.78);
    cursor: pointer;
    opacity: 0.62;
    filter: saturate(0.35) brightness(0.75);
    transform: scale(0.95);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        opacity 180ms ease,
        filter 180ms ease,
        transform 180ms ease;
}



#guide-tab .class-skill-button:hover,
#guide-tab .class-skill-button:focus-visible {
    border-color: rgba(130, 217, 255, 0.62);
    opacity: 0.9;
    filter: saturate(0.75) brightness(0.95);
    outline: none;
    transform: scale(0.98);
}

#guide-tab .class-skill-button.is-active {
    border: 1px solid transparent;
    color: #ffffff;
    opacity: 1;
    filter: none;
    transform: scale(1);

    background:
        linear-gradient(
            #07121c,
            #07121c
        ) padding-box,

        conic-gradient(
            from var(--class-led-angle),

            transparent 0deg,
            transparent 18deg,

            #071a52 28deg,
            #176bff 40deg,
            #7ee7ff 50deg,
            #ffffff 58deg,
            #7ee7ff 66deg,
            #176bff 76deg,
            #071a52 88deg,

            transparent 100deg,
            transparent 198deg,

            #071a52 208deg,
            #176bff 220deg,
            #7ee7ff 230deg,
            #ffffff 238deg,
            #7ee7ff 246deg,
            #176bff 256deg,
            #071a52 268deg,

            transparent 280deg,
            transparent 360deg
        ) border-box;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16),
        0 0 18px rgba(130, 217, 255, 0.35),
        inset 0 0 15px rgba(130, 217, 255, 0.10);

    animation:
        classLedBorder 2.2s linear infinite;
}

#guide-tab .class-skill-button-icon {
    display: grid;
    width: 37px;
    height: 48px;
    place-items: center;
}

#guide-tab .class-skill-button-icon img,
#guide-tab .selected-skill-icon img {
    display: block;
    width: 37px;
    height: 48px;
    object-fit: cover;
}

#guide-tab .class-skill-button-icon img[hidden],
#guide-tab .selected-skill-icon img[hidden],
#guide-tab .class-skill-button-placeholder[hidden],
#guide-tab #selected-skill-placeholder[hidden] {
    display: none !important;
}

#guide-tab .class-skill-button-placeholder,
#guide-tab #selected-skill-placeholder {
    color: currentColor;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

#guide-tab .selected-skill-box {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 22px;
    min-height: 336px;
    padding: 22px 28px 28px;
    align-items: start;
    border: 1px solid rgba(130, 217, 255, 0.16);
    border-radius: 3px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(130, 217, 255, 0.075),
            rgba(130, 217, 255, 0) 38%
        ),
        rgba(3, 9, 15, 0.64);
}

#guide-tab .selected-skill-box::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        #82d9ff
    );
    opacity: 0.65;
}

#guide-tab .selected-skill-icon {
    display: grid;
    width: 72px;
    height: 84px;
    place-items: center;
    border: 1px solid rgba(130, 217, 255, 0.36);
    border-radius: 3px;
    color: #ffffff;
    background: rgba(7, 18, 28, 0.9);
    box-shadow:
        0 0 22px rgba(130, 217, 255, 0.15),
        inset 0 0 18px rgba(130, 217, 255, 0.07);
}

#guide-tab .selected-skill-content {
    min-width: 0;
}

#guide-tab #selected-skill-index {
    display: block;
    margin-bottom: 7px;
    color: #82d9ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

#guide-tab #selected-skill-name {
    margin: 0 0 10px;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(22px, 2.4vw, 31px);
    line-height: 1.15;
}

#guide-tab #selected-skill-description {
    max-width: 820px;
    margin: 0;
    color: #b7c2ca;
    font-size: 14px;
    line-height: 1.75;
}

#guide-tab .selected-skill-line {
    width: min(460px, 72%);
    height: 1px;
    margin-top: 18px;
    background: linear-gradient(
        90deg,
        #82d9ff,
        rgba(130, 217, 255, 0)
    );
}

/* Video demo Skill theo bo cuc dien anh 16:9 */
#guide-tab .selected-skill-video-box {
    position: relative;
    width: min(100%, 1000px);
    aspect-ratio: 16 / 9;
    margin-top: 20px;

    border:
        1px solid rgba(130, 217, 255, 0.28);

    border-radius: 3px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 32%,
            rgba(130, 217, 255, 0.12),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #0b1926,
            #050b12
        );

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.34),
        inset 0 0 28px rgba(130, 217, 255, 0.04);
}

#guide-tab #selected-skill-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #03070b;
}

#guide-tab #selected-skill-video[hidden],
#guide-tab .selected-skill-video-placeholder[hidden] {
    display: none !important;
}

#guide-tab .selected-skill-video-placeholder {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;

    color: #ffffff;
    text-align: center;
}

#guide-tab .selected-skill-video-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 30%,
            rgba(130, 217, 255, 0.06) 50%,
            transparent 70%
        );

    pointer-events: none;
}

#guide-tab .selected-skill-video-play {
    position: relative;

    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 3px;
    place-items: center;

    border:
        1px solid rgba(130, 217, 255, 0.65);

    border-radius: 50%;

    background: rgba(7, 18, 28, 0.86);

    box-shadow:
        0 0 20px rgba(130, 217, 255, 0.2),
        inset 0 0 14px rgba(130, 217, 255, 0.08);
}

#guide-tab .selected-skill-video-play::after {
    content: "";

    width: 0;
    height: 0;
    margin-left: 4px;

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid #82d9ff;
}

#guide-tab .selected-skill-video-placeholder strong,
#guide-tab .selected-skill-video-placeholder small {
    position: relative;
    z-index: 1;
    font-family: Arial, Helvetica, sans-serif;
}

#guide-tab .selected-skill-video-placeholder strong {
    font-size: 14px;
    font-weight: 700;
}

#guide-tab .selected-skill-video-placeholder small {
    color: #9cb2c0;
    font-size: 12px;
}

#guide-tab .selected-skill-video-label {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 11px;

    padding: 4px 7px;

    border:
        1px solid rgba(130, 217, 255, 0.22);

    border-radius: 2px;

    color: #82d9ff;
    background: rgba(3, 9, 15, 0.76);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    pointer-events: none;
}

@media (max-width: 700px) {
    #guide-tab .class-skill-panel {
        padding: 16px;
    }

    #guide-tab .class-skill-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    #guide-tab .class-skill-selector {
        grid-template-columns:
            repeat(auto-fit, minmax(56px, 1fr));
        gap: 8px;
    }

    #guide-tab .class-skill-button {
        width: 100%;
    }

    #guide-tab .selected-skill-box {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 16px;
        min-height: 210px;
        padding: 20px;
        align-items: start;
    }

    #guide-tab .selected-skill-icon {
        width: 58px;
        height: 70px;
    }
}

@media (max-width: 480px) {
    #guide-tab .class-skill-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    #guide-tab .selected-skill-box {
        grid-template-columns: minmax(0, 1fr);
    }
	
	#guide-tab .selected-skill-video-box {
		width: 100%;
	}
	
}

@media (prefers-reduced-motion: reduce) {
    #guide-tab .class-skill-button {
        transition: none;
    }

    #guide-tab .class-skill-button.is-active {
        animation: none;
    }
}

/* ============================================================ */
/* TAB SU KIEN: BO CUC 5 THUMBNAIL */
/* ============================================================ */

.event-gallery-tab {
    width: 100%;
    padding: 40px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(66, 96, 148, 0.12),
            transparent 28%
        ),
        #070b12;
}

.event-gallery-header {
    text-align: center;
}

.event-gallery-header .section-label {
    color: #8298ba;

    font-family: 'Orbitron', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.event-gallery-header h2 {
    margin-top: 10px;

    color: #f7f9ff;

    font-family: 'Reospec', Arial, sans-serif;
    font-size: 34px;
    letter-spacing: 1.5px;

    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.14),
        0 0 28px rgba(75, 108, 165, 0.28);
}

.event-gallery-header > p:last-child {
    max-width: 660px;
    margin: 12px auto 0;

    color: #91a4be;

    font-size: 14px;
    line-height: 1.7;
}

.event-thumbnail-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;

    width: 100%;
    max-width: 1000px;
    margin: 32px auto 0;
}

@property --event-led-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.event-thumbnail-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    min-width: 0;
    padding: 9px 9px 14px;

    border: 1px solid rgba(54, 82, 126, 0.7);
    border-radius: 6px;

    background:
        linear-gradient(
            180deg,
            rgba(127, 29, 29, 0.40),
            rgba(62, 12, 18, 0.52)
        ),
        #0c1118;

    text-align: center;
    cursor: url("images/CursorGet.cur"), pointer;
    transform-origin: center;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.24),
        inset 0 0 20px rgba(67, 96, 146, 0.04);

    transition:
        filter 0.35s ease,
        opacity 0.35s ease,
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

/* Lam toi, mat mau va thu nho Boss chua duoc chon */
.event-thumbnail-card:not(.active) {
    filter:
        grayscale(70%)
        brightness(58%)
        saturate(55%);

    opacity: 0.70;
    transform: scale(0.90);
}

.event-thumbnail-card::before {
    content: "";

    position: absolute;
    z-index: 2;
    top: 0;
    right: 12%;
    left: 12%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #315888,
        #f4f8ff,
        #315888,
        transparent
    );

    opacity: 0.42;
}

.event-thumbnail-media {
    overflow: hidden;

    aspect-ratio: 1122 / 1402;

    border: 1px solid rgba(53, 83, 130, 0.48);
    border-radius: 3px;

    background: #050a13;
}

.event-thumbnail-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.88)
        contrast(1.05)
        brightness(0.88);

    transition:
        transform 320ms ease,
        filter 320ms ease;
}

/* Khung tam khi su kien chua co anh the */
.challenge-event-placeholder {
    display: grid;
    place-items: center;

    padding: 18px;

    color: #8298ba;

    font-family: 'Orbitron', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;

    background:
        radial-gradient(
            circle,
            rgba(87, 184, 255, 0.10),
            #050a13 68%
        );
}

.event-thumbnail-card h3 {
    margin-top: 13px;

    color: #cbd7e9;

    font-family: 'Reospec', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: 0.4px;
}

.event-thumbnail-card:not(.active):hover {
    border-color: rgba(214, 229, 253, 0.72);

    filter:
        grayscale(35%)
        brightness(70%)
        saturate(78%);

    opacity: 0.90;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.32),
        0 0 18px rgba(79, 112, 168, 0.18),
        inset 0 0 22px rgba(81, 112, 164, 0.07);

    transform: translateY(-3px) scale(0.95);
}

.event-thumbnail-card:not(.active):hover::before {
    opacity: 0.9;
}

.event-thumbnail-card:hover .event-thumbnail-media img {
    filter:
        saturate(1)
        contrast(1.08)
        brightness(1);

    transform: scale(1.05);
}

.event-thumbnail-card:not(.active):hover h3 {
    color: #ffffff;

    text-shadow:
        0 0 12px rgba(190, 211, 244, 0.3);
}

/* ============================================================ */
/* BOSS DANG DUOC CHON */
/* ============================================================ */

.event-thumbnail-card.active {
    z-index: 5;

    border: 2px solid transparent;

    filter: none;
    opacity: 1;

    background:
        linear-gradient(
            180deg,
            rgba(14, 58, 101, 0.96),
            rgba(5, 21, 40, 0.98)
        ) padding-box,

        conic-gradient(
            from var(--event-led-angle),

            transparent 0deg,
            transparent 18deg,

            #071a52 28deg,
            #176bff 40deg,
            #7ee7ff 50deg,
            #ffffff 58deg,
            #7ee7ff 66deg,
            #176bff 76deg,
            #071a52 88deg,

            transparent 100deg,
            transparent 198deg,

            #071a52 208deg,
            #176bff 220deg,
            #7ee7ff 230deg,
            #ffffff 238deg,
            #7ee7ff 246deg,
            #176bff 256deg,
            #071a52 268deg,

            transparent 280deg,
            transparent 360deg
        ) border-box;

    will-change:
        transform,
        box-shadow;

    animation:
        eventLedBorder
        2.2s
        linear
        infinite;
}

.event-thumbnail-card.active::before {
    opacity: 1;
}

/* Vien anh Boss dang chon chuyen sang xanh */
.event-thumbnail-card.active .event-thumbnail-media {
    border-color: rgba(126, 231, 255, 0.72);

    box-shadow:
        0 0 16px rgba(23, 107, 255, 0.22),
        inset 0 0 14px rgba(126, 231, 255, 0.08);
}

.event-thumbnail-card.active .event-thumbnail-media img {
    filter:
        saturate(1.06)
        contrast(1.08)
        brightness(1.03);

    transform: scale(1.04);
}

.event-thumbnail-card.active h3 {
    color: #ffffff;

    text-shadow:
        0 0 7px rgba(255, 255, 255, 0.92),
        0 0 16px rgba(126, 231, 255, 0.90),
        0 0 28px rgba(23, 107, 255, 0.55);
}

.event-thumbnail-card:focus-visible {
    outline: 2px solid #7ee7ff;
    outline-offset: 4px;
}

@keyframes eventLedBorder {
    to {
        --event-led-angle: 360deg;
    }
}

@media (max-width: 900px) {
    .event-thumbnail-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .event-gallery-tab {
        padding: 24px;
    }

    .event-thumbnail-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }
}

@media (max-width: 400px) {
    .event-thumbnail-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-thumbnail-card,
    .event-thumbnail-media,
    .event-thumbnail-media img {
        transition: none;
    }

    .event-thumbnail-card.active {
        animation:
            eventLedBorder 4s linear infinite;

        transform:
            translateY(-6px)
            scale(1.025);

        box-shadow:
            0 14px 28px rgba(0, 0, 0, 0.55),
            0 0 20px rgba(126, 231, 255, 0.65),
            0 0 36px rgba(23, 107, 255, 0.38);
    }
}

/* ============================================================ */
/* KHUNG THONG TIN BOSS */
/* ============================================================ */

.boss-info-panel {
    position: relative;
    overflow: hidden;

    width: 100%;
    max-width: 1000px;
    margin: 0 auto 36px;

    color: #d9e4ec;

    border: 1px solid rgba(161, 195, 219, 0.26);
    border-radius: 8px;

    background:
        radial-gradient(
            circle at 50% -24%,
            rgba(87, 184, 255, 0.18),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #07111c,
            #030810
        );

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.04),
        0 20px 52px rgba(0, 0, 0, 0.46),
        0 0 24px rgba(87, 184, 255, 0.08);
}

.boss-info-panel::before,
.boss-info-panel::after {
    content: "";

    position: absolute;
    left: 10%;
    z-index: 2;

    width: 80%;
    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(87, 184, 255, 0.88),
            transparent
        );

    box-shadow:
        0 0 15px rgba(87, 184, 255, 0.42);
}

.boss-info-panel::before {
    top: 0;
}

.boss-info-panel::after {
    bottom: 0;
}

.boss-info-header {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 22px 28px 18px;

    border-bottom:
        1px solid rgba(165, 194, 215, 0.13);
}

.boss-info-emblem {
    display: grid;
    flex: 0 0 auto;
    place-items: center;

    width: 52px;
    height: 52px;

    color: #57b8ff;

    border:
        1px solid rgba(87, 184, 255, 0.46);
    border-radius: 5%;

    background:
        radial-gradient(
            circle,
            rgba(87, 184, 255, 0.16),
            rgba(3, 10, 17, 0.92)
        );

    box-shadow:
        inset 0 0 18px
        rgba(87, 184, 255, 0.12);
}

.boss-info-emblem svg {
    width: 27px;
    height: 27px;
}

.boss-info-kicker,
.boss-info-name,
.boss-info-caption {
    margin: 0;
}

.boss-info-kicker {
    color: #57b8ff;

    font-family: 'Orbitron', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.boss-info-name {
    margin-top: 5px;

    color: #f1f7fb;

    font-family: 'Reospec', Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-shadow:
        0 0 18px rgba(87, 184, 255, 0.22);
}

.boss-info-caption {
    margin-top: 4px;

    color: #8598aa;

    font-size: 13px;
}

.boss-info-content {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(240px, 0.34fr);
}

.boss-info-details {
    padding: 25px 28px 28px;

    border-right:
        1px solid rgba(165, 194, 215, 0.13);
}

.boss-info-section-title {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 14px;

    color: #cbd9e3;

    font-family: 'Orbitron', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.boss-info-section-title svg {
    width: 20px;
    height: 20px;

    color: #57b8ff;
}

/*
    Dieu chinh rieng icon dong ho.
    Khong anh huong icon phan thuong.
*/
.boss-info-details >
.boss-info-section-title svg {
    width: 20px;
    height: 20px;

    margin-left: 12px;
}

.boss-info-times {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 7px;
}

.boss-info-times > span {
    position: relative;

    min-width: 0;
    padding: 11px 4px;

    color: #dce7ee;

    font-family: 'Orbitron', Arial, sans-serif;
    font-size: 12px;
    text-align: center;

    border:
        1px solid rgba(87, 184, 255, 0.20);
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            rgba(87, 184, 255, 0.10),
            rgba(5, 14, 23, 0.54)
        );
}

.boss-info-map {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 12px;

    margin-top: 22px;
    padding-top: 20px;

    border-top:
        1px solid rgba(165, 194, 215, 0.12);
}

/* ============================================================ */
/* DOI VI TRI MAP VA THOI GIAN BOSS INFO */
/* ============================================================ */

.boss-info-details {
    display: flex;
    flex-direction: column;
}

/* Dua Map len tren */
.boss-info-map {
    order: 1;

    margin-top: 0;
    margin-bottom: 22px;

    padding-top: 0;
    padding-bottom: 20px;

    border-top: 0;
    border-bottom:
        1px solid rgba(165, 194, 215, 0.12);
}

/* Dua tieu de Thoi gian xuong duoi */
.boss-info-details >
.boss-info-section-title {
    order: 2;
	gap: 24px;
	color: #8598aa;
}

/* Dua danh sach gio xuong duoi */
.boss-info-times {
    order: 3;
}

.boss-info-map-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    color: #57b8ff;
}

.boss-info-map-icon svg {
    width: 22px;
    height: 22px;
}

.boss-info-map p {
    margin: 0;

    color: #8598aa;

    font-family: 'Orbitron', Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.boss-info-map-name {
    display: block;
    margin-top: 3px;

    color: #edf5fa;

    font-family: 'Reospec', Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.boss-info-reward {
    display: grid;
    align-content: center;
    justify-items: center;

    min-height: 235px;
    padding: 24px;

    text-align: center;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(220, 151, 43, 0.13),
            transparent 34%
        );
}

.boss-info-reward .boss-info-section-title {
    justify-content: center;
}

.boss-info-reward-frame {
    position: relative;

    display: grid;
    place-items: center;

    width: 108px;
    height: 108px;

    border:
        1px solid rgba(227, 179, 89, 0.32);
    border-radius: 7px;

    background:
        radial-gradient(
            circle,
            rgba(242, 183, 72, 0.20),
            rgba(10, 10, 8, 0.72) 68%
        );

    box-shadow:
        inset 0 0 22px rgba(223, 165, 51, 0.09),
        0 0 24px rgba(210, 145, 32, 0.08);
}

.boss-info-reward-image {
    display: block;

    width: 32px;
    height: 32px;

    object-fit: contain;
    image-rendering: pixelated;

    filter:
        drop-shadow(
            0 0 10px
            rgba(231, 167, 54, 0.34)
        );
}

.boss-info-reward-name {
    margin-top: 13px;

    color: #e8cf9a;

	font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.7px;
}

/* ============================================================ */
/* ENERGY FADE CHO PHAN THUONG BOSS */
/* ============================================================ */

/*
    260ms de mo di.
    260ms de hien tro lai.
    Tong thoi gian chuyen canh la 520ms.
*/
.boss-info-reward-image,
.boss-info-reward-name {
    transition:
        opacity
        260ms
        ease;
}

/*
    Chi lam mo anh va ten.
    Khong lam mo khung Boss Info.
*/
.boss-info-reward.is-changing
.boss-info-reward-image,
.boss-info-reward.is-changing
.boss-info-reward-name {
    opacity: 0;
}

/*
    Tat chuyen dong neu nguoi dung
    dang bat che do giam chuyen dong.
*/
@media (prefers-reduced-motion: reduce) {
    .boss-info-reward-image,
    .boss-info-reward-name {
        transition: none;
    }
}

@media (max-width: 760px) {
    .boss-info-header {
        padding:
            20px
            18px
            17px;
    }

    .boss-info-name {
        font-size: 20px;
    }

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

    .boss-info-details {
        padding:
            22px
            18px
            24px;

        border-right: 0;
        border-bottom:
            1px solid rgba(165, 194, 215, 0.13);
    }

    .boss-info-times {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .boss-info-reward {
        min-height: 220px;
    }
}

/* ============================================================ */
/* CAROUSEL FROST DISSOLVE DUNG CHUNG */
/* ============================================================ */

/*
    Class va hai nhom Boss dung chung
    mot khung, mot toc do va nam vi tri.
*/
.frost-carousel-list {
    /*
        Chi can sua cac bien nay neu muon
        doi toc do cho ca Class va Boss.
    */
    --frost-carousel-move-time: 620ms;
    --frost-carousel-opacity-time: 520ms;
    --frost-carousel-filter-time: 620ms;
    --frost-carousel-frame-time: 420ms;

    position: relative;

    display: block;
    overflow: hidden;

    width: 100%;
    max-width: 1000px;
    height: 390px;

    margin:
        32px
        auto
        0;

    perspective: 1200px;
}

/*
    Quy tac chuyen dong dung chung
    cho the Class va the Boss.
*/
.frost-carousel-list >
:is(
    .character-card,
    .event-thumbnail-card
) {
    --frost-carousel-x: -50%;
    --frost-carousel-y: 0px;
    --frost-carousel-scale: 1;

    position: absolute;
    top: 12px;
    left: 50%;

    width:
        calc(
            (100% - 64px) / 5
        );

    min-width: 0;
    overflow: hidden;

    transform:
        translateX(
            var(--frost-carousel-x)
        )
        translateY(
            var(--frost-carousel-y)
        )
        scale(
            var(--frost-carousel-scale)
        );

    transition:
        transform
            var(--frost-carousel-move-time)
            cubic-bezier(0.20, 0.80, 0.20, 1),
        opacity
            var(--frost-carousel-opacity-time)
            ease,
        filter
            var(--frost-carousel-filter-time)
            ease,
        border-color
            var(--frost-carousel-frame-time)
            ease,
        box-shadow
            var(--frost-carousel-frame-time)
            ease;

    will-change:
        transform,
        opacity,
        filter;
}

/* The xa nhat ben trai */
.frost-carousel-list >
[data-carousel-position="-2"] {
    --frost-carousel-x:
        calc(-250% - 32px);

    --frost-carousel-y: 18px;
    --frost-carousel-scale: 0.84;

    z-index: 2;

    opacity: 0.34;

    filter:
        grayscale(78%)
        brightness(52%)
        saturate(50%)
        blur(1.8px);
}

/* The gan nhat ben trai */
.frost-carousel-list >
[data-carousel-position="-1"] {
    --frost-carousel-x:
        calc(-150% - 16px);

    --frost-carousel-y: 10px;
    --frost-carousel-scale: 0.92;

    z-index: 4;

    opacity: 0.62;

    filter:
        grayscale(52%)
        brightness(68%)
        saturate(66%)
        blur(0.7px);
}

/* The duoc chon nam chinh giua */
.frost-carousel-list >
[data-carousel-position="0"] {
    --frost-carousel-x: -50%;
    --frost-carousel-y: -6px;
    --frost-carousel-scale: 1.025;

    z-index: 8;

    opacity: 1;
    filter: none;
}

/* The gan nhat ben phai */
.frost-carousel-list >
[data-carousel-position="1"] {
    --frost-carousel-x:
        calc(50% + 16px);

    --frost-carousel-y: 10px;
    --frost-carousel-scale: 0.92;

    z-index: 4;

    opacity: 0.62;

    filter:
        grayscale(52%)
        brightness(68%)
        saturate(66%)
        blur(0.7px);
}

/* The xa nhat ben phai */
.frost-carousel-list >
[data-carousel-position="2"] {
    --frost-carousel-x:
        calc(150% + 32px);

    --frost-carousel-y: 18px;
    --frost-carousel-scale: 0.84;

    z-index: 2;

    opacity: 0.34;

    filter:
        grayscale(78%)
        brightness(52%)
        saturate(50%)
        blur(1.8px);
}

/* The thu sau cua Boss nam ngoai vung hien thi */
.frost-carousel-list >
[data-carousel-position="hidden"] {
    --frost-carousel-x: -50%;
    --frost-carousel-y: 20px;
    --frost-carousel-scale: 0.70;

    z-index: 0;

    opacity: 0;

    filter:
        grayscale(100%)
        brightness(35%)
        blur(5px);

    pointer-events: none;
}

/*
    Hover dung chung va khong lam sai
    vi tri cua cac the phu.
*/
.frost-carousel-list >
[data-carousel-position]:not(.active):hover {
    opacity: 0.92;

    filter:
        grayscale(22%)
        brightness(80%)
        saturate(88%)
        blur(0);

    transform:
        translateX(
            var(--frost-carousel-x)
        )
        translateY(
            calc(
                var(--frost-carousel-y) - 4px
            )
        )
        scale(
            calc(
                var(--frost-carousel-scale) + 0.035
            )
        );
}

/*
    Khoa the active vao dung vi tri giua.
    Khong dung animation Float cu.
*/
.frost-carousel-list >
[data-carousel-position].active {
    transform:
        translateX(
            var(--frost-carousel-x)
        )
        translateY(
            var(--frost-carousel-y)
        )
        scale(
            var(--frost-carousel-scale)
        );
}

/* Class va Boss giu animation LED rieng */
#guide-tab
.frost-carousel-list >
.character-card.active {
    animation:
        classLedBorder
        2.2s
        linear
        infinite;
}

.event-carousel-tab
.frost-carousel-list >
.event-thumbnail-card.active {
    animation:
        eventLedBorder
        2.2s
        linear
        infinite;
}

/* Man hinh vua: chi hien the giua va hai the ben */
@media (max-width: 900px) {
    .frost-carousel-list {
        height: 370px;
    }

    .frost-carousel-list >
    :is(
        .character-card,
        .event-thumbnail-card
    ) {
        width:
            min(
                190px,
                45%
            );
    }

    .frost-carousel-list >
    [data-carousel-position="-2"],
    .frost-carousel-list >
    [data-carousel-position="2"] {
        opacity: 0;
        pointer-events: none;
    }

    .frost-carousel-list >
    [data-carousel-position="-1"] {
        --frost-carousel-x:
            calc(-150% - 12px);
    }

    .frost-carousel-list >
    [data-carousel-position="1"] {
        --frost-carousel-x:
            calc(50% + 12px);
    }
}

/* Dien thoai: van giu mot hang */
@media (max-width: 600px) {
    .frost-carousel-list {
        height: 340px;
    }

    .frost-carousel-list >
    :is(
        .character-card,
        .event-thumbnail-card
    ) {
        width:
            min(
                170px,
                56%
            );
    }

    .frost-carousel-list >
    [data-carousel-position="-1"] {
        --frost-carousel-x:
            calc(-135% - 8px);

        --frost-carousel-scale: 0.82;
    }

    .frost-carousel-list >
    [data-carousel-position="1"] {
        --frost-carousel-x:
            calc(35% + 8px);

        --frost-carousel-scale: 0.82;
    }
}

/*
    Khoi phuc chieu cao rieng cua Class.
    Khong lam thay doi carousel Boss.
*/
#guide-tab .frost-carousel-list {
    height: 315px;
}

/* Chieu cao Class tren man hinh nho */
@media (max-width: 760px) {
    #guide-tab .frost-carousel-list {
        height: 320px;
    }
}

/* Ton trong tuy chon giam chuyen dong */
@media (prefers-reduced-motion: reduce) {
    .frost-carousel-list >
    :is(
        .character-card,
        .event-thumbnail-card
    ) {
        transition: none;
    }

    #guide-tab
    .frost-carousel-list >
    .character-card.active,
    .event-carousel-tab
    .frost-carousel-list >
    .event-thumbnail-card.active {
        animation: none;
    }

    .frost-carousel-list >
    [data-carousel-position="-2"],
    .frost-carousel-list >
    [data-carousel-position="-1"],
    .frost-carousel-list >
    [data-carousel-position="1"],
    .frost-carousel-list >
    [data-carousel-position="2"] {
        filter:
            grayscale(60%)
            brightness(64%);
    }
}

/* ============================================================ */
/* KET THUC CAROUSEL FROST DISSOLVE DUNG CHUNG */
/* ============================================================ */

/* ============================================================ */
/* CHONG SAO CHEP NOI DUNG CO BAN */
/* ============================================================ */

/* Chan boi den noi dung tren website */
html,
body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Chan keo anh va video ra ngoai trinh duyet */
img,
video {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Van cho phep thao tac trong cac o nhap lieu */
input,
textarea,
select,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}


/* ============================================================ */
/* TAB TAI GAME: XANH DEM VA LAM BANG */
/* ============================================================ */

#download-tab {
    width: 100%;
    color: #ffffff;
    background: #070b12;
}

#download-tab .download-page {
    width: 100%;
}

/* Tieu de va logo trang tri */
#download-tab .download-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 280px;
    padding: 42px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(240px, 360px);
    align-items: center;
    gap: 28px;

    border-bottom: 0;

    background:
        radial-gradient(
            circle at 77% 48%,
            rgba(23, 107, 255, 0.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #0c1520,
            #070b12 64%,
            #091b29
        );
}

#download-tab .download-hero::after {
    content: "";

    position: absolute;
    z-index: -1;
    inset: 0;

    background:
        linear-gradient(
            rgba(107, 199, 236, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(107, 199, 236, 0.035) 1px,
            transparent 1px
        );

    background-size: 34px 34px;
    pointer-events: none;
}

#download-tab .download-hero-copy {
    position: relative;
    z-index: 2;
}

#download-tab .download-hero .section-label {
    margin: 0 0 8px;
    color: #82d9ff;
    letter-spacing: 3px;
    text-transform: uppercase;
}

#download-tab .download-hero h2 {
    margin: 0;
    color: #ffffff;
    font-family: 'Reospec', Arial, sans-serif;
    font-size: 42px;
    letter-spacing: 2px;
    text-shadow:
        0 0 18px rgba(107, 199, 236, 0.22);
}

#download-tab .download-hero-copy > p:last-child {
    max-width: 640px;
    margin: 18px 0 0;
    color: #aebdca;
    font-size: 16px;
    line-height: 1.75;
}

#download-tab .download-hero-logo {
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;
    max-width: 350px;
    height: auto;
    margin: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 18px rgba(107, 199, 236, 0.30)
        );
}

#download-tab .download-content {
    padding: 34px 40px 44px;
}

/* Khung tai Client */
#download-tab .download-client-panel {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(250px, 0.75fr);

    border:
        1px solid rgba(49, 95, 120, 0.82);
    border-radius: 5px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(12, 31, 46, 0.98),
            rgba(7, 18, 28, 0.98)
        );

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.30),
        inset 0 0 35px rgba(107, 199, 236, 0.025);
}

#download-tab .download-client-main,
#download-tab .download-mirror-panel {
    min-width: 0;
    padding: 24px;
}

#download-tab .download-client-main {
    border-right:
        1px solid rgba(49, 95, 120, 0.64);
}

#download-tab .download-client-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

#download-tab .download-client-icon {
    flex: 0 0 54px;

    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(130, 217, 255, 0.52);
    border-radius: 5px;

    color: #82d9ff;
    background:
        radial-gradient(
            circle,
            rgba(107, 199, 236, 0.18),
            rgba(7, 18, 28, 0.78)
        );

    box-shadow:
        inset 0 0 16px rgba(107, 199, 236, 0.10),
        0 0 18px rgba(107, 199, 236, 0.10);
}

#download-tab .download-client-icon svg {
    width: 24px;
    height: 24px;
}

#download-tab .download-overline {
    margin: 0 0 6px;
    color: #82d9ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#download-tab .download-client-heading h3,
#download-tab .download-panel-heading h3,
#download-tab .download-section-heading h3,
#download-tab .download-step-content h3 {
    margin: 0;
    color: #ffffff;
}

#download-tab .download-client-heading h3 {
    font-size: 25px;
}

#download-tab .download-client-heading p:last-child {
    margin: 7px 0 0;
    color: #aebdca;
    line-height: 1.6;
}

#download-tab .download-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin-top: 22px;

    border-top:
        1px solid rgba(49, 95, 120, 0.50);
    border-bottom:
        1px solid rgba(49, 95, 120, 0.50);
}

#download-tab .download-meta-item {
    min-width: 0;
    padding: 13px 12px;

    border-right:
        1px solid rgba(49, 95, 120, 0.42);
    border-bottom:
        1px solid rgba(49, 95, 120, 0.42);
}

#download-tab .download-meta-item:nth-child(2n) {
    border-right: 0;
}

#download-tab .download-meta-item:nth-last-child(-n + 2) {
    border-bottom: 0;
}

#download-tab .download-meta-item span,
#download-tab .download-meta-item strong {
    display: block;
}

#download-tab .download-meta-item span {
    margin-bottom: 5px;
    color: #8199aa;
    font-size: 12px;
}

#download-tab .download-meta-item strong {
    min-height: 20px;
    color: #dff7ff;
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Hien dau gach khi du lieu dang de trong */
#download-tab .download-meta-item strong:empty::after,
#download-tab [data-download-spec]:empty::after {
    content: "—";
    color: #5f7889;
}

#download-tab .download-actions {
    margin-top: 20px;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#download-tab .download-button {
    position: relative;
    isolation: isolate;

    min-height: 46px;
    padding: 12px 20px;

    border-radius: 4px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        box-shadow 0.22s ease;
}

#download-tab .download-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

#download-tab .download-button-primary {
    border:
        1px solid rgba(205, 246, 255, 0.72);

    color: #ffffff;
    background:
        linear-gradient(
            90deg,
            #0f5f87,
            #278fba 50%,
            #0f5f87
        );

    box-shadow:
        0 0 16px rgba(107, 199, 236, 0.22),
        inset 0 0 14px rgba(255, 255, 255, 0.08);
}

#download-tab .download-button-secondary {
    border:
        1px solid rgba(49, 95, 120, 0.92);

    color: #cceeff;
    background: #081723;
}

/* Danh sach may chu du phong */
#download-tab .download-panel-heading {
    margin-bottom: 12px;
}

#download-tab .download-mirror-list {
    display: grid;
}

#download-tab .download-mirror-button {
    width: 100%;
    min-height: 58px;
    padding: 10px 2px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border: 0;
    border-bottom:
        1px solid rgba(49, 95, 120, 0.46);

    color: #ffffff;
    background: transparent;

    text-align: left;
    cursor: pointer;
}

#download-tab .download-mirror-button:last-child {
    border-bottom: 0;
}

#download-tab .download-mirror-button > span,
#download-tab .download-mirror-button strong,
#download-tab .download-mirror-button small {
    display: block;
}

#download-tab .download-mirror-button strong {
    font-size: 14px;
}

#download-tab .download-mirror-button small {
    margin-top: 4px;
    color: #8199aa;
}

#download-tab .download-mirror-button b {
    color: #82d9ff;
    font-size: 17px;
    transition: transform 0.2s ease;
}

#download-tab .download-mirror-button:hover b {
    transform: translate(2px, -2px);
}

/* Thong bao lien ket tai */
#download-tab .download-notice {
    margin-top: 16px;
    padding: 13px 15px;

    display: flex;
    align-items: flex-start;
    gap: 11px;

    border-left: 2px solid #82d9ff;

    color: #aebdca;
    background: rgba(36, 95, 120, 0.13);
}

#download-tab .download-notice > span {
    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #07111b;
    background: #82d9ff;

    font-weight: 700;
}

#download-tab .download-notice p {
    margin: 0;
    line-height: 1.6;
}

/* Tieu de chung cua tung khu vuc */
#download-tab .download-section {
    margin-top: 32px;
}

#download-tab .download-section-heading {
    margin-bottom: 16px;
    padding-bottom: 13px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;

    border-bottom:
        1px solid rgba(49, 95, 120, 0.58);
}

#download-tab .download-section-heading > p {
    margin: 0;
    color: #8199aa;
    font-size: 13px;
    text-align: right;
}

/* Nut chuyen cau hinh */
#download-tab .download-config-tabs,
#download-tab .download-step-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#download-tab .download-config-button,
#download-tab .download-step-button {
    min-height: 42px;
    padding: 10px 14px;

    border:
        1px solid rgba(49, 95, 120, 0.56);
    border-radius: 4px;

    color: #91a8b7;
    background: #081723;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

#download-tab .download-config-button:hover,
#download-tab .download-step-button:hover,
#download-tab .download-config-button.is-active,
#download-tab .download-step-button.is-active {
    color: #ffffff;
    border-color: rgba(130, 217, 255, 0.72);
    background: rgba(36, 95, 120, 0.34);
    box-shadow:
        inset 0 0 15px rgba(107, 199, 236, 0.08),
        0 0 12px rgba(107, 199, 236, 0.08);
}

/* Bang cau hinh */
#download-tab .download-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top:
        1px solid rgba(49, 95, 120, 0.58);
    border-bottom:
        1px solid rgba(49, 95, 120, 0.58);
}

#download-tab .download-spec-item {
    min-width: 0;
    padding: 15px 14px;

    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;

    border-right:
        1px solid rgba(49, 95, 120, 0.42);
    border-bottom:
        1px solid rgba(49, 95, 120, 0.42);

    background: rgba(12, 31, 46, 0.42);
}

#download-tab .download-spec-item:nth-child(2n) {
    border-right: 0;
}

#download-tab .download-spec-item:nth-last-child(-n + 2) {
    border-bottom: 0;
}

#download-tab .download-spec-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(130, 217, 255, 0.34);
    border-radius: 4px;

    color: #82d9ff;
    background: rgba(36, 95, 120, 0.16);

    font-size: 11px;
    font-weight: 700;
}

#download-tab .download-spec-item strong,
#download-tab .download-spec-item [data-download-spec] {
    display: block;
}

#download-tab .download-spec-item strong {
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 14px;
}

#download-tab .download-spec-item [data-download-spec] {
    min-height: 18px;
    color: #9eb2c0;
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* Huong dan cai dat */
#download-tab .download-step-tabs {
    margin-bottom: 13px;
}

#download-tab .download-step-panel {
    min-height: 210px;
    padding: 22px;

    display: grid;
    grid-template-columns:
        minmax(170px, 0.70fr)
        minmax(0, 1.30fr);
    align-items: center;
    gap: 24px;

    border-top:
        1px solid rgba(49, 95, 120, 0.58);
    border-bottom:
        1px solid rgba(49, 95, 120, 0.58);

    background: rgba(12, 31, 46, 0.46);

    animation:
        downloadStepFadeRise
        0.38s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

#download-tab .download-step-visual {
    min-height: 150px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(130, 217, 255, 0.32);
    border-radius: 5px;

    background:
        linear-gradient(
            rgba(107, 199, 236, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(107, 199, 236, 0.045) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle,
            rgba(36, 95, 120, 0.32),
            rgba(7, 18, 28, 0.84)
        );

    background-size:
        24px 24px,
        24px 24px,
        auto;
}

#download-tab .download-step-visual span {
    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(214, 247, 255, 0.68);
    border-radius: 50%;

    color: #dff7ff;
    background: rgba(8, 28, 43, 0.90);

    font-family: 'Orbitron', Arial, sans-serif;
    font-size: 22px;

    box-shadow:
        0 0 24px rgba(107, 199, 236, 0.18),
        inset 0 0 18px rgba(107, 199, 236, 0.12);
}

#download-tab .download-step-content > p {
    margin: 10px 0 0;
    color: #aebdca;
    line-height: 1.65;
}

#download-tab .download-step-content ul {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

#download-tab .download-step-content li {
    position: relative;
    margin-top: 8px;
    padding-left: 18px;
    color: #91a8b7;
    line-height: 1.55;
}

#download-tab .download-step-content li::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0.72em;

    width: 8px;
    height: 1px;

    background: #82d9ff;
    box-shadow:
        0 0 5px rgba(130, 217, 255, 0.70);
}

/* Danh sach luu y */
#download-tab .download-help-list {
    border-top:
        1px solid rgba(49, 95, 120, 0.58);
}

#download-tab .download-help-item {
    border-bottom:
        1px solid rgba(49, 95, 120, 0.58);
}

#download-tab .download-help-button {
    width: 100%;
    min-height: 54px;
    padding: 12px 2px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    border: 0;

    color: #ffffff;
    background: transparent;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: left;

    cursor: pointer;
}

#download-tab .download-help-button b {
    color: #82d9ff;
    font-size: 20px;
    font-weight: 400;
    transition: transform 0.2s ease;
}

#download-tab .download-help-button[aria-expanded="true"] b {
    transform: rotate(45deg);
}

#download-tab .download-help-answer {
    padding: 0 36px 16px 2px;
    color: #91a8b7;
    line-height: 1.65;
}

#download-tab .download-help-answer code {
    color: #cceeff;
}

@keyframes downloadStepFadeRise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive cho tab Tai Game */
@media (max-width: 900px) {
    #download-tab .download-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    #download-tab .download-hero-logo {
        max-width: 280px;
    }

    #download-tab .download-client-panel,
    #download-tab .download-step-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    #download-tab .download-client-main {
        border-right: 0;
        border-bottom:
            1px solid rgba(49, 95, 120, 0.64);
    }
}

@media (max-width: 600px) {
    #download-tab .download-hero,
    #download-tab .download-content {
        padding: 24px;
    }

    #download-tab .download-hero h2 {
        font-size: 34px;
    }

    #download-tab .download-hero-logo {
        max-width: 230px;
    }

    #download-tab .download-meta-grid,
    #download-tab .download-spec-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #download-tab .download-meta-item,
    #download-tab .download-meta-item:nth-child(2n),
    #download-tab .download-meta-item:nth-last-child(-n + 2),
    #download-tab .download-spec-item,
    #download-tab .download-spec-item:nth-child(2n),
    #download-tab .download-spec-item:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom:
            1px solid rgba(49, 95, 120, 0.42);
    }

    #download-tab .download-meta-item:last-child,
    #download-tab .download-spec-item:last-child {
        border-bottom: 0;
    }

    #download-tab .download-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    #download-tab .download-section-heading > p {
        text-align: left;
    }

    #download-tab .download-actions,
    #download-tab .download-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #download-tab .download-button,
    #download-tab .download-config-button,
    #download-tab .download-step-button,
    #download-tab .download-help-button b,
    #download-tab .download-step-panel {
        animation: none;
        transition: none;
    }
}

/* ============================================================ */
/* FOOTER TOAN CHIEU RONG */
/* ============================================================ */

/*
    Day la dai nen Footer toan man hinh.
    Khong tao card, khong bo goc va khong co vien bao quanh.
*/
.site-footer {
    position: relative;
    z-index: 20;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
	max-width: 100%;
	min-width: 0;
    margin:
        50px
        0
        0;

    color: #dbe9f8;

    background:
        rgba(3, 7, 13, 0.92);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Duong phan cach mong phia tren Footer */
.site-footer::before {
    content: "";

    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(62, 119, 169, 0.44),
            rgba(174, 230, 255, 0.66),
            rgba(62, 119, 169, 0.44),
            transparent
        );

    box-shadow:
        0 0 14px rgba(126, 219, 255, 0.14);
}

/*
    Chi gioi han chieu rong noi dung.
    Nen Footer van trai het chieu rong man hinh.
*/
.site-footer-inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}

/* Logo va slogan */
.site-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.site-footer-brand img {
    display: block;

    width: clamp(165px, 22vw, 220px);
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 18px rgba(0, 0, 0, 0.44)
        );
}

.site-footer-brand h2 {
    margin: 10px 0 0;

    color: #f0f7ff;

    font-family:
        'Reospec',
        Arial,
        sans-serif;

    font-size: 22px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;

    text-shadow:
        0 0 8px rgba(126, 211, 255, 0.22),
        0 0 18px rgba(126, 211, 255, 0.20);
}

/* Hai dong gioi thieu ben duoi EVN Server */
.site-footer-tagline {
    margin-top: 14px;

    text-align: center;
}

/* Dong gioi thieu chinh */
.site-footer-tagline p:first-child {
    margin: 0;

    color: #c9dceb;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.4px;

    text-shadow:
        0 0 10px rgba(126, 211, 255, 0.14);
}

/* Dong gia tri cua Server */
.site-footer-tagline p:last-child {
    margin:
        8px
        0
        0;

    color: #78b6d9;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.2px;

    text-shadow:
        0 0 10px rgba(79, 178, 229, 0.16);
}

/* Duong trang tri Countdown Rail */
.site-footer-rail {
    display: flex;
    align-items: center;

    width: min(520px, 86%);
    height: 1px;

    margin: 24px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(90, 146, 202, 0.54),
            transparent
        );
}

/* Vien kim cuong giua Countdown Rail */
.site-footer-rail span {
    width: 7px;
    height: 7px;
    margin: auto;

    border:
        1px solid #b9eaff;

    background: #398bd2;

    box-shadow:
        0 0 12px rgba(126, 219, 255, 0.82);

    transform: rotate(45deg);
}

/* Hang thong tin phia duoi */
.site-footer-information {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    margin-top: 24px;
}

/* Trang thai Website */
.site-footer-status {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #bdd0e4;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

/* Cham tron xanh bao Website dang hoat dong */
.site-footer-status-dot {
    flex: 0 0 auto;

    width: 12px;
    height: 12px;

    border:
        2px solid #8ef0b1;

    border-radius: 50%;

    background: #22c76a;

    box-shadow:
        0 0 0 4px rgba(34, 199, 106, 0.11),
        0 0 15px rgba(34, 199, 106, 0.72);

    animation:
        siteFooterStatusPulse
        2.1s
        ease-in-out
        infinite;
}

/* Gach ngan cach dung */
.site-footer-divider {
    width: 1px;
    height: 44px;

    background:
        linear-gradient(
            transparent,
            rgba(110, 158, 207, 0.56),
            transparent
        );
}

/* Thong bao cong dong */
.site-footer-community {
    display: flex;
    align-items: center;
    gap: 11px;
}

/* Icon khien va dau tich */
.site-footer-shield {
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(69, 223, 131, 0.36);

    border-radius: 5px;

    color: #45df83;
    background: rgba(33, 200, 105, 0.08);

    box-shadow:
        inset 0 0 14px rgba(69, 223, 131, 0.07);
}

.site-footer-shield svg {
    display: block;

    width: 23px;
    height: 23px;
}

/* Noi dung mien tru */
.site-footer-community p {
    margin: 0;

    color: #9fb3c9;

    font-size: 13px;
    line-height: 1.55;
}

/* Nhip sang nhe cua cham trang thai */
@keyframes siteFooterStatusPulse {
    0%,
    100% {
        opacity: 0.82;
        transform: scale(0.90);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Footer tren man hinh nho */
@media (max-width: 600px) {
    .site-footer-inner {
        padding:
            38px
            20px
            32px;
    }

    .site-footer-information {
        flex-direction: column;
        gap: 17px;
    }

    .site-footer-divider {
        width: min(300px, 90%);
        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(110, 158, 207, 0.56),
                transparent
            );
    }

    .site-footer-community {
        justify-content: center;
    }

    .site-footer-community p {
        max-width: 240px;
    }
}

/* Tat chuyen dong neu nguoi dung yeu cau */
@media (prefers-reduced-motion: reduce) {
    .site-footer-status-dot {
        animation: none;
    }
}

/* ============================================================ */
/* KET THUC FOOTER TOAN CHIEU RONG */
/* ============================================================ */

/* ============================================================ */
/* BO CUC FOOTER: PHAP LY VA LOGO */
/* ============================================================ */

/* Chia Footer thanh ba cot doi xung */
.site-footer-layout {
    display: grid;

    grid-template-columns:
        clamp(250px, 20vw, 320px)
        minmax(0, 1fr)
        clamp(250px, 20vw, 320px);

    min-height: 320px;
}

/* Cot trai */
.site-footer-legal {
    min-width: 0;
    padding: 34px 24px;

    border-right: 0;

    background: transparent;
}

/* Tieu de Phap ly va Bao mat */
.site-footer-legal-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;

    color: #d4b66f;

    font-family:
        'Orbitron',
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.site-footer-legal-icon {
    display: grid;
    place-items: center;

    width: 16px;
    height: 16px;

    color: #d4b66f;
}

.site-footer-legal-icon svg {
    width: 15px;
    height: 15px;
}

/* Danh sach ba nut Phap ly */
.site-footer-legal-nav {
    margin-top: 20px;

    border-top:
        1px solid rgba(83, 128, 164, 0.10);
}

.site-footer-legal-link {
    width: 100%;
    min-height: 46px;
    padding: 10px 2px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    border: 0;
    border-bottom:
        1px solid rgba(83, 128, 164, 0.12);

    color: #91a6b9;
    background: transparent;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    font-weight: 400;
    text-align: left;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease,
        background 0.2s ease;
}

.site-footer-legal-link b {
    color: #65849d;

    font-size: 19px;
    font-weight: 400;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.site-footer-legal-link:hover {
    padding-left: 8px;

    color: #dff6ff;

    background:
        linear-gradient(
            90deg,
            rgba(34, 105, 150, 0.10),
            transparent
        );
}

.site-footer-legal-link:hover b {
    color: #82d9ff;

    transform: translateX(2px);
}

.site-footer-legal-link:focus-visible {
    outline:
        2px solid #7ee7ff;

    outline-offset: 2px;
}

/* Trang thai nam trong cot trai */
.site-footer-legal
.site-footer-information {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;

    margin-top: 22px;
}

.site-footer-legal
.site-footer-status {
    justify-content: flex-start;

    padding:
        1px
        16px;

    background: transparent;
}

/* Doi vach dung thanh vach ngang */
.site-footer-legal
.site-footer-divider {
    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(110, 158, 207, 0.40),
            transparent
        );
}

.site-footer-legal
.site-footer-community {
    align-items: center;

    padding:
        0
        2px;
}

/* Cot phai chua Logo */
.site-footer-brand-panel {
    position: relative;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        44px
        40px
        38px;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(40, 106, 155, 0.12),
            transparent 34%
        );
}

/* ============================================================ */
/* POPUP PHAP LY VA BAO MAT */
/* ============================================================ */

/* Tang chieu rong de hien thi bo cuc Quyen Rieng Tu */
.legal-popup-dialog {
    width: min(
        1100px,
        calc(100vw - 32px)
    );
}

/* Vung noi dung chung */
.legal-popup-content {
    padding:
        8px
        0
        4px;

    text-align: left;
}

/* Danh sach noi dung Quyen Rieng Tu */
.legal-privacy-content {
    display: grid;
}

/* Tung muc noi dung */
.legal-privacy-item {
    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    align-items: start;
    gap: 20px;

    padding:
        26px
        12px;

    border-bottom:
        1px solid rgba(126, 231, 255, 0.09);
}

/* So thu tu 01 den 04 */
.legal-privacy-number {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(126, 231, 255, 0.24);

    border-radius: 8px;

    color: #7ee7ff;

    background:
        linear-gradient(
            145deg,
            rgba(7, 26, 82, 0.15),
            rgba(5, 14, 24, 0.64)
        );

    font-family:
        'Orbitron',
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 700;

    box-shadow:
        inset 0 0 14px rgba(23, 107, 255, 0.06),
        0 0 10px rgba(126, 231, 255, 0.04);
}

/* Tieu de cua tung muc */
.legal-privacy-copy h3 {
    margin: 0;

    color: #f3f8ff;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;

    text-shadow:
        0 0 9px rgba(255, 255, 255, 0.10),
        0 0 15px rgba(126, 231, 255, 0.10);
}

/* Mo ta cua tung muc */
.legal-privacy-copy p {
    margin:
        8px
        0
        0;

    color: #91a8b8;

    font-size: 13px;
    line-height: 1.75;
}

/* Khung Luu y */
.legal-privacy-note {
    display: grid;

    grid-template-columns:
        32px
        minmax(0, 1fr);

    align-items: start;
    gap: 14px;

    margin:
        22px
        12px
        8px;

    padding:
        18px
        20px;

    border:
        1px solid rgba(126, 231, 255, 0.18);

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            rgba(7, 26, 82, 0.12),
            rgba(5, 14, 22, 0.54),
            rgba(7, 26, 82, 0.06)
        );

    box-shadow:
        inset 0 0 20px rgba(23, 107, 255, 0.04);
}

/* Icon khien trong khung Luu y */
.legal-privacy-note-icon {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    color: #7ee7ff;

    filter:
        drop-shadow(
            0 0 7px rgba(126, 231, 255, 0.28)
        );
}

.legal-privacy-note-icon svg {
    width: 24px;
    height: 24px;
}

/* Tieu de Luu y */
.legal-privacy-note strong {
    display: block;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
}

/* Noi dung Luu y */
.legal-privacy-note p {
    margin:
        6px
        0
        0;

    color: #7f96a8;

    font-size: 11px;
    line-height: 1.65;
}

/* Responsive cho Popup Quyen Rieng Tu */
@media (max-width: 600px) {
    .legal-popup-dialog {
        width:
            calc(100vw - 24px);
    }

    .legal-privacy-item {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap: 14px;

        padding:
            22px
            4px;
    }

    .legal-privacy-number {
        width: 38px;
        height: 38px;
    }

    .legal-privacy-copy h3 {
        font-size: 16px;
    }

    .legal-privacy-note {
        grid-template-columns:
            28px
            minmax(0, 1fr);

        margin:
            18px
            4px
            6px;

        padding:
            16px
            14px;
    }
}

/* ============================================================ */
/* KET THUC POPUP PHAP LY */
/* ============================================================ */

/* Xep doc Footer tren man hinh nho */
@media (max-width: 760px) {
    .site-footer-layout {
        grid-template-columns:
            minmax(0, 1fr);
    }

    /* Logo hien thi truoc tren dien thoai */
    .site-footer-brand-panel {
        order: -1;

        min-height: 250px;
        padding:
            38px
            20px
            32px;

        border-bottom:
            1px solid rgba(72, 124, 169, 0.18);
    }

    .site-footer-legal {
        padding:
            30px
            20px;

        border-right: 0;
    }
}

@media (max-width: 600px) {
    .site-footer-inner {
        padding: 0;
    }

    .site-footer-legal
    .site-footer-information {
        align-items: stretch;
    }

    .site-footer-legal
    .site-footer-divider {
        width: 100%;
    }
}

/* ============================================================ */
/* KET THUC BO CUC FOOTER PHAP LY */
/* ============================================================ */

/* ============================================================ */
/* FONT TIEU DE CLASS COUNTER */
/* ============================================================ */

:is(#guide-tab, #grand-challenge-tab) .class-counter-title {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1px;
}

/* ============================================================ */
/* CAC NUT CHUC NANG CO DINH: ICE CAPSULE */
/* ============================================================ */

.evn-quick-actions {
    position: fixed;
    z-index: 8500;
    top: 50%;
    right: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;

    pointer-events: none;

    transform:
        translateY(-50%);
}

/* Nut Ice Capsule */
.evn-quick-action {
    position: relative;

    display: block;

    width: 60px;
    height: 60px;
    padding: 0;

    overflow: hidden;

    border: 0;

    border-radius:
        10px
        0
        0
        10px;

    color: #ffffff;

    /* Nen giong nut Menu khi chua duoc chon */
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(7, 18, 28, 0.55) 16%,
            rgba(12, 25, 38, 0.82) 50%,
            rgba(7, 18, 28, 0.55) 84%,
            transparent 100%
        );

    box-shadow: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;

    pointer-events: auto;

    appearance: none;
    -webkit-appearance: none;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    transition:
        width 0.22s ease,
        color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

/*
    Icon duoc dat doc lap.
    right 18px + icon 24px tao vi tri chinh giua nut 60px.
*/
.evn-quick-action svg {
    position: absolute;
    z-index: 3;

    top: 50%;
    right: 18.5px;

    width: 23px;
    height: 23px;

    color: #ffffff;

    filter:
        drop-shadow(
            0 0 4px rgba(255, 255, 255, 0.82)
        );

    transform:
        translateY(-50%);

    transition:
        color 0.18s ease,
        filter 0.18s ease,
        transform 0.18s ease;
}

/* Noi dung an nam ben trai Icon */
.evn-quick-action-label {
    position: absolute;
    z-index: 3;

    top: 50%;
    right: 60px;

    margin: 0;

	color: #ffffff;

	text-shadow:
    0 0 5px rgba(255, 255, 255, 0.42);

    letter-spacing: 0.8px;
    white-space: nowrap;

    opacity: 0;

    transform:
        translate(
            14px,
            -50%
        );

    transition:
        opacity 0.13s ease,
        transform 0.19s ease;
}

/* Mo rong Capsule khi di chuot */
.evn-quick-action:hover,
.evn-quick-action:focus-visible {
    width: 130px;

    color: #ffffff;

    /* Chi huong sang trang nhe, khong doi mau nen */
    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.05),
        0 0 8px rgba(255, 255, 255, 0.20);
}

/* Hien noi dung khi Capsule mo rong */
.evn-quick-action:hover
.evn-quick-action-label,
.evn-quick-action:focus-visible
.evn-quick-action-label {
    opacity: 1;

    transform:
        translate(
            0,
            -50%
        );
}

/* Tang do noi bat cua Icon khi Hover */
.evn-quick-action:hover svg,
.evn-quick-action:focus-visible svg {
    color: #ffffff;

    filter:
        drop-shadow(
            0 0 5px rgba(255, 255, 255, 0.95)
        )
        drop-shadow(
            0 0 11px rgba(255, 255, 255, 0.32)
        );

    transform:
        translateY(-50%)
        scale(1.05);
}

.evn-quick-action:focus-visible {
    outline:
        2px solid rgba(255, 255, 255, 0.72);

    outline-offset: 3px;
}

/* ============================================================ */
/* ANH TRONG POPUP HUONG DAN DANG KY */
/* ============================================================ */

/* Tang rieng kich thuoc Popup Dang Ky */
.register-guide-dialog {
    width: min(
        1300px,
        calc(100vw - 32px)
    );
}

.register-guide-figure {
    width: min(
        1200px,
        calc(100vw - 72px)
    );

    margin:
        16px
        auto
        0;
}

.register-guide-figure img {
    display: block;

    width: 100%;
    height: auto;
    max-height:
        calc(100vh - 190px);

    object-fit: contain;
}

/* Giao dien tren man hinh nho */
@media (max-width: 760px) {
    .evn-quick-actions {
        gap: 8px;
    }

.evn-quick-action {
    width: 52px;
    height: 52px;
    padding: 0;
}

/*
    Icon 24px, can giua trong nut 52px:
    (52px - 24px) / 2 = 14px.
*/
.evn-quick-action svg {
    right: 14.5px;
}

    /*
        Tren man hinh cam ung chi giu icon,
        khong mo rong nut de tranh che noi dung.
    */
    .evn-quick-action:hover,
    .evn-quick-action:focus-visible {
        width: 52px;
    }

    .evn-quick-action-label {
        display: none;
    }
}

@media (max-width: 480px) {
    .register-guide-figure {
        width: min(
            560px,
            calc(100vw - 48px)
        );
    }
}

/* Tat chuyen dong neu nguoi dung yeu cau */
@media (prefers-reduced-motion: reduce) {
    .evn-quick-action,
    .evn-quick-action-label {
        transition: none;
    }
}

/* ============================================================ */
/* KET THUC CAC NUT ICE CAPSULE */
/* ============================================================ */

/* ============================================================ */
/* TANG KICH THUOC POPUP CLASS COUNTER */
/* ============================================================ */

/* Tang kich thuoc khung Popup */
#class-counter-popup
.class-counter-dialog {
    width: min(
        900px,
        calc(100vw - 32px)
    );
}

/* Tang kich thuoc anh Class Counter */
#class-counter-popup
.class-counter-figure {
    width: min(
        840px,
        calc(100vw - 72px),
        calc(100vh - 190px)
    );
}

/* ============================================================ */
/* NUT VA POPUP DIEU KIEN DAI THU THACH */
/* ============================================================ */

/*
    Them cot thu ba de dat nut
    sat ben phai thong tin Map.
*/
#grand-challenge-tab .boss-info-map {
    grid-template-columns:
        44px
        minmax(0, 1fr)
        150px;
}

#grand-challenge-tab
.boss-info-map
.class-counter-button {
    justify-self: end;

    width: 150px;
    min-width: 150px;
    padding-left: 18px;
    padding-right: 18px;
}

/*
    Giu kich thuoc Popup
    giong Popup Class Counter.
*/
#challenge-condition-popup
.class-counter-dialog {
    width: min(
        900px,
        calc(100vw - 32px)
    );
}

#challenge-condition-popup
.class-counter-figure {
    width: min(
        850px,
        calc(100vw - 72px),
        calc(100vh - 190px)
    );
}

/*
    Giu dung ti le goc
    cua anh Dieu Kien.
*/
#challenge-condition-popup
.class-counter-figure img {
    width: 100%;
    height: auto;
    max-height:
        calc(100vh - 190px);

    aspect-ratio: auto;
    object-fit: contain;
}

/*
    Tren man hinh nho,
    dua nut xuong mot hang rieng.
*/
@media (max-width: 760px) {
    #grand-challenge-tab
    .boss-info-map {
        grid-template-columns:
            42px
            minmax(0, 1fr);
    }

    #grand-challenge-tab
    .boss-info-map
    .class-counter-button {
        grid-column: 1 / -1;

        justify-self: center;

        width: min(100%, 270px);
        margin-top: 14px;
    }
}

/* ============================================================ */
/* JOIN US - PHUONG AN 10: FROST CONSOLE */
/* ============================================================ */

/* Tieu de can giua va khong con nen luoi */
#download-tab .download-hero {
    min-height: 0;
    padding: 38px 40px 22px;

    display: block;

    border-bottom: 0;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 5%,
            rgba(107, 199, 236, 0.10),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #0a111b,
            #070b12
        );
}

/* Xoa lop luoi o vuong cu */
#download-tab .download-hero::after {
    display: none;
}

#download-tab .download-hero-copy {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

/*
    Reset lai section-label vi no dang la
    the p cuoi cung trong download-hero-copy.
*/
#download-tab
.download-hero-copy >
p.section-label:last-child {
    max-width: none;
    margin: 0 0 8px;

    color: #82d9ff;

    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 3px;
}

#download-tab .download-hero h2 {
    margin: 0;

    font-size: 42px;
    text-align: center;
}

/* Gioi han chieu rong phan noi dung */
#download-tab .download-content {
    width: min(100%, 1040px);
    margin: 0 auto;
    padding: 16px 40px 44px;
}

/* Khung Frost Console */
#download-tab .download-client-panel {
    display: block;

    width: 100%;
    max-width: 940px;
    margin: 0 auto;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(12, 31, 46, 0.98),
            rgba(7, 18, 28, 0.98)
        );
}

/*
    Ben trai la ten Client.
    Ben phai la phien ban va ngay cap nhat.
*/
#download-tab .download-client-main {
    display: grid;

    grid-template-columns:
        minmax(260px, 1fr)
        minmax(300px, 1fr);

    align-items: center;
    gap: 22px 34px;

    padding: 28px;

    border-right: 0;
    border-bottom: 0;
}

#download-tab .download-client-heading {
    align-items: center;
}

/* Khung vuong bao quanh icon hop giay */
#download-tab .download-client-icon {
    flex: 0 0 54px;

    width: 54px;
    height: 54px;

    border-radius: 5px;
}

/* Kich thuoc icon hop giay */
#download-tab .download-client-icon svg {
    width: 25px;
    height: 25px;
}

/* Hai o thong tin ben phai */
#download-tab .download-meta-grid {
    margin-top: 0;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border:
        1px solid rgba(49, 95, 120, 0.50);
    border-radius: 4px;

    overflow: hidden;
}

#download-tab .download-meta-item {
    padding: 15px 14px;

    border-bottom: 0;
}

#download-tab .download-meta-item:nth-child(2n) {
    border-right: 0;
}

/* Dat nut tai o chinh giua ben duoi */
#download-tab .download-actions {
    grid-column: 1 / -1;

    margin-top: 0;

    justify-content: center;
}

/* ============================================================ */
/* LED GIONG HET NUT CLASS COUNTER */
/* ============================================================ */

#download-tab .download-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: min(100%, 244px);
    min-height: 52px;
    padding: 11px 18px;

    border: 2px solid transparent;
    border-radius: 4px;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(12, 32, 48, 0.98),
            rgba(6, 17, 27, 0.99)
        ) padding-box,

        conic-gradient(
            from var(--class-led-angle),

            transparent 0deg,
            transparent 20deg,

            #071a52 28deg,
            #176bff 38deg,
            #7ee7ff 47deg,
            #ffffff 54deg,
            #7ee7ff 61deg,
            #176bff 70deg,
            #071a52 80deg,

            transparent 90deg,
            transparent 200deg,

            #071a52 208deg,
            #176bff 218deg,
            #7ee7ff 227deg,
            #ffffff 234deg,
            #7ee7ff 241deg,
            #176bff 250deg,
            #071a52 260deg,

            transparent 270deg,
            transparent 360deg
        ) border-box;

    font-family: 'Reospec', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 1px;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.28),
        inset 0 0 16px rgba(130, 217, 255, 0.07);

    transform: translateY(0);

    animation:
        classLedBorder
        3.2s
        linear
        infinite;

    transition:
        filter 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

/* Icon ben trong nut tai */
#download-tab .download-button-icon {
    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    color: #dce8f8;

    filter:
        drop-shadow(
            0 0 7px rgba(220, 232, 248, 0.28)
        );

    transition:
        color 0.22s ease,
        filter 0.22s ease,
        transform 0.22s ease;
}

/* Hover giong nut Class Counter */
#download-tab .download-button-primary:hover {
    filter: brightness(1.06);

    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.34),
        0 0 9px rgba(126, 231, 255, 0.16),
        inset 0 0 18px rgba(130, 217, 255, 0.09);

    transform: translateY(-3px);
}

#download-tab
.download-button-primary:hover
.download-button-icon {
    color: #ffffff;

    filter:
        drop-shadow(
            0 0 10px rgba(130, 217, 255, 0.72)
        );

    transform: scale(1.06);
}

#download-tab .download-button-primary:focus-visible {
    outline: 2px solid #7ee7ff;
    outline-offset: 4px;
}

/* Dong thong bao cung chieu rong voi khung tai */
#download-tab .download-notice {
    width: 100%;
    max-width: 940px;
    margin: 16px auto 0;
}

/* Responsive */
@media (max-width: 820px) {
    #download-tab .download-hero {
        padding: 32px 24px 20px;
    }

    #download-tab .download-content {
        padding:
            14px
            24px
            36px;
    }

    #download-tab .download-client-main {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 22px;
    }
}

@media (max-width: 520px) {
    #download-tab .download-hero h2 {
        font-size: 32px;
    }

    #download-tab .download-client-main {
        padding: 22px 18px;
    }

    #download-tab .download-client-heading {
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    #download-tab .download-meta-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    #download-tab .download-meta-item,
    #download-tab .download-meta-item:nth-child(2n) {
        border-right: 0;
    }

    #download-tab .download-meta-item:first-child {
        border-bottom:
            1px solid rgba(49, 95, 120, 0.42);
    }
}

/* Tat chuyen dong neu nguoi dung yeu cau */
@media (prefers-reduced-motion: reduce) {
    #download-tab .download-button-primary {
        animation: none;
        transition: none;
    }
}

/* ============================================================ */
/* XOA RANH GIOI GIUA DOWNLOAD HERO VA DOWNLOAD PAGE */
/* ============================================================ */

#download-tab .download-hero {
    border-bottom: 0 !important;
    background: transparent !important;
}

/* ============================================================ */
/* INWARD SIGNAL CHO BA NUT CHUC NANG */
/* ============================================================ */

.evn-quick-action {
    animation:
        evnQuickActionInwardSignal
        1.0s
        ease-in-out
        infinite;

    will-change: transform;
}

/* Nut Join Us chuyen dong sau nut Dang Ky */
.evn-quick-action:nth-child(2) {
    animation-delay: -0.34s;
}

/* Nut Zalo chuyen dong sau nut Join Us */
.evn-quick-action:nth-child(3) {
    animation-delay: -0.68s;
}

@keyframes evnQuickActionInwardSignal {
    0%,
    68%,
    100% {
        transform: translateX(0);
    }

    78% {
        transform: translateX(-10.00px);
    }

    88% {
        transform: translateX(-1.7px);
    }
}

/* Tat chuyen dong neu nguoi dung yeu cau */
@media (prefers-reduced-motion: reduce) {
    .evn-quick-action {
        animation: none;
    }
}