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

html {
    scroll-behavior: smooth;
}

body {
    background: #080d14;
    color: #ffffff;
    font-family: "Be Vietnam Pro", Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

/* =========================
   TOP BAR - ĐỒNG BỘ VỚI TRANG GAME
========================= */

#topBar {
    position: sticky;
    top: 0;
    z-index: 10000;

    width: 100%;
    height: 55px;

    display: flex;
    align-items: center;

    padding: 0 18px;
    gap: 20px;

    background: #111;
    border-bottom: 1px solid #444;
    color: #fff;
}

.topLogo {
    display: flex;
    align-items: center;

    height: 55px;
    overflow: hidden;
    flex-shrink: 0;
}

.topLogo img {
    height: 100px;
    width: auto;
    max-width: none;
    display: block;
    transform: translateY(5px);
}

.topMenu {
    position: relative;
    flex-shrink: 0;
}

.topMenu button,
.topAccount button,
#searchBtn {
    background: #222;
    color: white;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 7px 10px;
    cursor: pointer;
    font-family: inherit;
}

#menuDropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;

    width: 245px;
    padding: 6px 0;

    background: #222;
    border: 1px solid #555;
    border-radius: 6px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    z-index: 99999;
}

#menuDropdown.show {
    display: block;
}

#menuDropdown a {
    display: block;
    padding: 12px 15px;

    color: white;
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
}

#menuDropdown a:hover {
    background: #444;
    color: #ffc400;
}

.topSearch {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

#searchInput {
    width: 100%;
    max-width: 400px;

    background: #222;
    color: white;

    border: 1px solid #555;
    border-right: 0;
    border-radius: 6px 0 0 6px;

    padding: 8px 12px;
    outline: none;
    font-family: inherit;
}

#searchInput:focus {
    border-color: #777;
}

#searchBtn {
    border-radius: 0 6px 6px 0;
}

.topAccount {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

#loggedInAccount {
    position: relative;
    align-items: center;
    gap: 6px;
}

#topPlayerName {
    max-width: 180px;

    color: #ffd700;
    font-weight: 800;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#accountDropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;

    width: 180px;
    min-width: 180px;

    padding: 6px;

    background: #111;
    border: 1px solid #555;
    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    z-index: 99999;
}

#accountDropdown.show {
    display: block;
}

#accountDropdown button {
    width: 100%;
    display: block;

    padding: 10px 12px;
    margin: 2px 0;

    text-align: left;
    background: transparent;
    border: 0;
    color: #fff;
}

#accountDropdown button:hover {
    background: #333;
}

@media (max-width: 700px) {
    #topBar {
        height: 55px;
        padding: 0 8px;
        gap: 6px;
    }

    .topLogo {
        height: 55px;
    }

    .topLogo img {
        height: 80px;
    }

    .topMenu button {
        padding: 6px 8px;
        font-size: 13px;
    }

    .topSearch {
        flex: 0 0 auto;
    }

    #searchInput {
        display: none;
    }

    #searchBtn {
        border-radius: 6px;
        padding: 7px 9px;
    }

    .topAccount {
        margin-left: auto;
        min-width: 0;
    }

    #topPlayerName {
        max-width: 95px;
        font-size: 13px;
    }

    #accountBtn {
        padding: 5px;
    }

    #googleLoginArea {
        width: 120px;
        overflow: hidden;
        flex-shrink: 0;
    }

    #menuDropdown {
        width: 230px;
    }
}


/* Logo riêng ở footer */
.footerLogo {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-weight: 900;
    letter-spacing: 1px;
}

.footerLogo .logoNS {
    color: #ffc400;
    font-size: 34px;
}

.footerLogo .logoVina {
    color: #32bfff;
    font-size: 23px;
}

.heroSection {
    position: relative;
    width: 100%;
    min-height: 620px;

    display: grid;
    grid-template-columns: minmax(540px, 43%) minmax(680px, 57%);
    gap: 0;

    padding-top:0;

    padding-left:0;

    padding-right:32px;

    padding-bottom:36px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(32, 112, 180, 0.12),
            transparent 45%
        ),
        #080d14;
}

.heroImageBox {
    position: relative;
    min-height: 560px;
    overflow: hidden;

    background: #05080d;
}

.heroImageBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heroImageShade{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to right,
            rgba(8,13,20,0) 55%,
            rgba(8,13,20,.2) 72%,
            rgba(8,13,20,.6) 88%,
            #080d14 100%
        ),

        linear-gradient(
            to bottom,
            rgba(8,13,20,0) 55%,
            rgba(8,13,20,.2) 72%,
            rgba(8,13,20,.6) 88%,
            #080d14 100%
        );

}

.heroImageText {
    position: absolute;
    left: 34px;
    bottom: 32px;
    z-index: 2;
}

.heroImageText span {
    color: #71d5ff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
}

.heroImageText h1 {
    margin-top: 10px;

    color: #ffffff;
    font-size: clamp(34px, 4vw, 64px);
    line-height: 1.02;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.75);
}

.heroImageText strong {
    color: #ffc400;
}
.heroButtons{

    display:flex;

    gap:18px;

    margin-top:30px;

}

.playNowButton{

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

    width:240px;
    height:62px;

    font-size:24px;
    font-weight:bold;

    color:white;

    border-radius:12px;

    background:linear-gradient(135deg,#ff6200,#ffb000);

    box-shadow:0 0 30px rgba(255,120,0,.45);

    transition:.2s;

}

.playNowButton:hover{

    transform:translateY(-4px) scale(1.03);

    box-shadow:0 0 40px rgba(255,160,0,.7);

}

.guideButton{

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

    width:170px;
    height:62px;

    border-radius:12px;

    font-weight:bold;

    background:#1d2a3a;

    transition:.2s;

}

.guideButton:hover{

    background:#2b3d52;

}
.gameDashboard {
    display: grid;
    grid-template-columns: 260px minmax(620px, 1fr) 280px;
    gap: 22px;

    width: calc(100% - 64px);
    margin: 0 auto 50px;
}

.rankingPanel,
.mapSelection,
.chatPanel {
    background: linear-gradient(
        180deg,
        rgba(18, 28, 42, 0.96),
        rgba(7, 13, 22, 0.98)
    );

    border: 1px solid rgba(255, 190, 35, 0.28);
    border-radius: 14px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.rankingPanel,
.chatPanel {
    padding: 20px;
}

.mapSelection {
    padding: 24px;
}

.panelTitle,
.mapSelection > h2 {
    color: #ffc400;
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    letter-spacing: 0.5px;
}

.mapSelection > h2 {
    margin-bottom: 20px;
}
.homeControlPanel {
    min-width: 0;
    padding: 22px 0 0 24px;
}

/* =========================
   KHU CHỌN BẢN ĐỒ
========================= */

.homeMapArea {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) 170px minmax(190px, 1fr);
    align-items: center;
    gap: 18px;
}

.homeMapCard {
    position: relative;
    min-height: 310px;
    padding: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(20, 31, 47, 0.96),
            rgba(6, 12, 21, 0.98)
        );

    border: 1px solid rgba(255, 191, 38, 0.3);
    border-radius: 13px;

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    text-align: center;
    overflow: hidden;
}

.homeMapCard::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(59, 169, 255, 0.13),
            transparent 48%
        );
}

.monthlyHomeMap::before {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(187, 65, 255, 0.14),
            transparent 50%
        );
}

.homeMapLabel {
    position: relative;
    z-index: 1;

    display: inline-block;
    padding: 5px 10px;

    color: #74d8ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.8px;

    background: rgba(22, 133, 188, 0.12);
    border: 1px solid rgba(79, 203, 255, 0.28);
    border-radius: 20px;
}

.monthlyLabel {
    color: #e795ff;
    background: rgba(160, 46, 210, 0.13);
    border-color: rgba(220, 91, 255, 0.3);
}

.homeMapCard h2 {
    position: relative;
    z-index: 1;

    margin-top: 14px;

    color: #ffffff;
    font-size: 22px;
}

.homeMapCard p {
    position: relative;
    z-index: 1;

    margin: 7px 0 16px;

    color: #9eb0c5;
    font-size: 13px;
}

/* Hình xem trước bản đồ */

.homeMapPreview {
    position: relative;
    z-index: 1;

    width: 100%;
    aspect-ratio: 1 / 0.76;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(22, 92, 119, 0.35),
            transparent 70%
        ),
        #0d1722;

    border: 1px solid rgba(90, 195, 239, 0.35);
    border-radius: 9px;
}

.monthlyPreview {
    background:
        radial-gradient(
            circle at center,
            rgba(93, 44, 124, 0.35),
            transparent 72%
        ),
        #151321;

    border-color: rgba(206, 86, 255, 0.35);
}

.gridLine {
    position: absolute;
    display: block;
    background: rgba(186, 220, 237, 0.28);
}

.verticalLine {
    top: 0;
    bottom: 0;
    width: 1px;
}

.horizontalLine {
    left: 0;
    right: 0;
    height: 1px;
}

.v1 {
    left: 25%;
}

.v2 {
    left: 50%;
}

.v3 {
    left: 75%;
}

.h1 {
    top: 25%;
}

.h2 {
    top: 50%;
}

.h3 {
    top: 75%;
}

.previewRock {
    position: absolute;
    width: 17%;
    aspect-ratio: 1;
    transform: rotate(45deg);

    background: linear-gradient(135deg, #777e87, #313843);
    border: 2px solid #989fa8;
    border-radius: 5px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
}

.rockA {
    left: 18%;
    top: 17%;
}

.rockB {
    right: 20%;
    top: 40%;
}

.rockC {
    left: 42%;
    bottom: 13%;
}

/* =========================
   NÚT GIỮA
========================= */

.homeMiddleControls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.homePlayMapButton {
    position: relative;

    width: 190px;
    min-height: 86px;

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

    color: #171000;
    text-align: center;

    background:
        linear-gradient(
            135deg,
            #ffd92e,
            #ff8b00
        );

    border-top: 3px solid #ffe780;
    border-bottom: 3px solid #b95100;

    box-shadow:
        0 0 22px rgba(255, 158, 0, 0.42),
        inset 0 2px 0 rgba(255, 255, 255, 0.42);

    cursor: default;
    user-select: none;
}

.homePlayMapButton::before,
.homePlayMapButton::after {
    content: "";
    position: absolute;
    top: 50%;

    width: 38px;
    height: 60px;

    background: linear-gradient(
        135deg,
        #ffd92e,
        #ff8b00
    );

    transform: translateY(-50%);
}

.homePlayMapButton::before {
    left: -36px;

    clip-path: polygon(
        100% 0,
        45% 0,
        0 50%,
        45% 100%,
        100% 100%,
        72% 50%
    );
}

.homePlayMapButton::after {
    right: -36px;

    clip-path: polygon(
        0 0,
        55% 0,
        100% 50%,
        55% 100%,
        0 100%,
        28% 50%
    );
}

.homeSkinButton {
    width: 118px;
    height: 118px;

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

    color: #ffffff;

    background:
        radial-gradient(
            circle,
            rgba(59, 177, 255, 0.24),
            rgba(13, 26, 42, 0.96) 70%
        );

    border: 2px solid rgba(76, 198, 255, 0.65);
    border-radius: 50%;

    box-shadow:
        0 0 25px rgba(40, 164, 255, 0.25),
        inset 0 0 22px rgba(59, 177, 255, 0.15);

    cursor: pointer;
    transition: 0.2s;
}

.homeSkinButton:hover {
    transform: rotate(-3deg) scale(1.07);
    border-color: #ffc400;
}

.skinIcon {
    margin-bottom: 7px;
    font-size: 29px;
}

.homeSkinButton strong {
    font-size: 14px;
}

/* =========================
   HÀNG TOP 5 + CHAT
========================= */

.homeInfoArea {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) 150px minmax(190px, 1fr);
    gap: 18px;

    margin-top: 20px;
}

.homeRankingBox {
    min-height: 230px;
    padding: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(17, 28, 43, 0.96),
            rgba(6, 12, 21, 0.98)
        );

    border: 1px solid rgba(255, 194, 39, 0.28);
    border-radius: 12px;
}

.homeRankingBox h3 {
    margin-bottom: 13px;

    color: #ffc400;
    font-size: 16px;
    text-align: center;
}

.homeRankList {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.homeRankRow {
    min-height: 30px;

    display: grid;
    grid-template-columns: 25px 1fr auto;
    align-items: center;
    gap: 7px;

    padding: 5px 7px;

    background: rgba(255, 255, 255, 0.035);
    border-radius: 6px;

    color: #c9d5e2;
    font-size: 12px;
}

.homeRankRow b {
    color: #84d6ff;
}

.homeRankRow strong {
    color: #ffc400;
}

.rankOne {
    background:
        linear-gradient(
            90deg,
            rgba(255, 190, 0, 0.2),
            rgba(255, 190, 0, 0.035)
        );
}

.rankOne b {
    color: #ffd52d;
}

.monthlyRankingBox {
    border-color: rgba(189, 79, 255, 0.32);
}

.monthlyRankingBox h3 {
    color: #e38cff;
}

.homeCommunityButtons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 17px;
}

.homeCommunityButtons button {
    width: 100%;
    min-height: 55px;

    color: #ffffff;
    font-size: 15px;
    font-weight: 900;

    border-radius: 9px;
    cursor: pointer;
    transition: 0.2s;
}

.homeChatButton {
    background:
        linear-gradient(
            135deg,
            #0089a8,
            #075172
        );

    border: 1px solid #35dcff;
}

.homeFeedbackButton {
    background:
        linear-gradient(
            135deg,
            #a46b00,
            #654000
        );

    border: 1px solid #ffc641;
}

.homeCommunityButtons button:hover {
    transform: translateY(-3px);
    filter: brightness(1.15);
}
.homeMapCard{
    display:block;
    text-decoration:none;
    color:inherit;
}
.homeMapCard {
    display: block;
    cursor: pointer;
    transition: 0.22s;
}

.homeMapCard:hover {
    transform: translateY(-5px);
    border-color: #ffc400;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.42),
        0 0 25px rgba(255, 190, 0, 0.18);
}
.homeSelectHint{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.hintText {
    text-align: center;
    white-space: nowrap;
}

.hintText span {
    display: block;
    margin-bottom: 6px;

    color: #ffc943;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
}

.hintText strong {
    display: block;

    color: #ffffff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;

    text-shadow:
        0 0 8px rgba(255, 190, 0, 0.7),
        0 0 18px rgba(255, 150, 0, 0.4);
}

.hintArrows{
    display:flex;
    justify-content:space-between;
    width:140px;
}

.leftArrow,
.rightArrow{
    color:#ffb400;
    font-size:48px;
    font-weight:900;

    text-shadow:
        0 0 10px #ffb400,
        0 0 22px rgba(255,180,0,.8);

    animation: arrowPulse 1.2s ease-in-out infinite;
}
@keyframes arrowGlow{

    from{
        transform:translateX(0);
        opacity:.7;
    }

    to{
        opacity:1;
    }

}

.leftArrow{
    animation-name:leftMove;
}

.rightArrow{
    animation-name:rightMove;
}

@keyframes leftMove{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-8px);
    }

}

@keyframes rightMove{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(8px);
    }

}
@keyframes arrowPulse{
    0%,100%{
        transform:scale(1);
        opacity:.8;
    }

    50%{
        transform:scale(1.18);
        opacity:1;
    }
}
.heroImageText h1 span{
    display:block;
    font-size:38px;
    font-weight:900;
    line-height:0.95;
}

.heroImageText .yellow{
    font-size:38px;
    color:#ffc107;
    margin-top:8px;
}




/* =========================================================
   KHO SKIN TRÊN TRANG CHỦ
========================================================= */
body.skinModalOpen {
    overflow: hidden;
}

.skinVaultModal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.skinVaultModal.open {
    display: flex;
}

.skinVaultBackdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 20%, rgba(0, 174, 255, .14), transparent 32%),
        radial-gradient(circle at 80% 70%, rgba(142, 65, 255, .13), transparent 35%),
        rgba(1, 5, 10, .88);
    backdrop-filter: blur(8px);
}

.skinVault {
    position: relative;
    z-index: 1;
    width: min(1180px, 96vw);
    max-height: min(860px, 92vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(77, 207, 255, .45);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16, 28, 42, .98), rgba(4, 9, 17, .99));
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .62),
        0 0 55px rgba(37, 163, 255, .13),
        inset 0 1px rgba(255, 255, 255, .08);
}

.skinVaultGlow {
    position: absolute;
    pointer-events: none;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .12;
}

.skinGlowBlue {
    left: -180px;
    top: -170px;
    background: #00b7ff;
}

.skinGlowPurple {
    right: -170px;
    bottom: -210px;
    background: #8c4cff;
}

.skinVaultHeader {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    padding: 24px 28px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.skinEyebrow {
    display: block;
    margin-bottom: 5px;
    color: #64d8ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.4px;
}

.skinVaultHeader h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1;
}

.skinVaultHeader p {
    margin: 9px 0 0;
    color: #93a8bd;
    font-size: 14px;
}

.skinVaultClose {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 31px;
    line-height: 1;
    cursor: pointer;
    transition: .18s;
}

.skinVaultClose:hover {
    background: #b82736;
    border-color: #ff6675;
    transform: rotate(4deg);
}

.skinVaultTabs {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
    padding: 15px 28px 0;
}

.skinTab {
    min-width: 140px;
    padding: 11px 18px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px 10px 0 0;
    background: rgba(255,255,255,.035);
    color: #8699ad;
    font-weight: 900;
    cursor: pointer;
}

.skinTab.active {
    color: #07111b;
    background: linear-gradient(135deg, #68ddff, #2fa5ff);
    border-color: #81e5ff;
    box-shadow: 0 0 20px rgba(52, 184, 255, .25);
}

.skinVaultBody {
    position: relative;
    z-index: 2;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 28px 28px;
}

.skinPane {
    display: none;
}

.skinPane.active {
    display: block;
}

.skinGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(170px, 1fr));
    gap: 15px;
}

.skinUnit {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    background:
        linear-gradient(180deg, rgba(28, 42, 61, .88), rgba(8, 15, 25, .94));
    box-shadow: inset 0 1px rgba(255,255,255,.04);
    transition: .2s;
}

.skinUnit:hover {
    transform: translateY(-4px);
    border-color: rgba(100, 216, 255, .38);
}

.featuredSkin {
    border-color: rgba(101, 211, 255, .42);
    box-shadow:
        0 0 28px rgba(45, 180, 255, .11),
        inset 0 1px rgba(255,255,255,.06);
}

.skinUnitTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.skinTypeBadge,
.skinStatus {
    padding: 5px 7px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .7px;
}

.skinTypeBadge {
    color: #7edcff;
    background: rgba(32, 164, 219, .12);
    border: 1px solid rgba(94, 213, 255, .25);
}

.defaultStatus {
    color: #95a6b7;
    background: rgba(255,255,255,.04);
}

.skinAvailable {
    color: #ffe36f;
    background: rgba(255, 197, 0, .11);
    border: 1px solid rgba(255, 202, 28, .25);
}

.skinPreviewStage {
    height: 112px;
    margin: 13px 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 11px;
    background:
        radial-gradient(circle, rgba(79, 188, 255, .13), transparent 60%),
        rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.055);
}

.skinUnit h3,
.monsterSkinCard h3 {
    margin: 0;
    color: #fff;
}

.skinUnit h3 {
    font-size: 17px;
}

.skinUnit p {
    min-height: 54px;
    margin: 7px 0 12px;
    color: #8fa3b7;
    font-size: 12px;
    line-height: 1.45;
}

.towerGlyph {
    position: relative;
    display: block;
    width: 62px;
    height: 62px;
    filter: drop-shadow(0 0 10px rgba(255,255,255,.14));
}

.normalTowerGlyph {
    background: #f0443b;
    clip-path: polygon(50% 0, 93% 33%, 78% 100%, 22% 100%, 7% 33%);
    filter: drop-shadow(0 0 12px rgba(255,60,45,.42));
}

.iceTowerGlyph,
.miniDefaultIce {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #c8f3ff 62%, #71cfff);
    box-shadow: 0 0 20px rgba(133, 224, 255, .5);
}

.poisonTowerGlyph {
    width: 56px;
    height: 56px;
    background: #20b94b;
    box-shadow: 0 0 18px rgba(28, 211, 75, .35);
}

.airTowerGlyph {
    background: #2672ff;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 0 12px rgba(38,114,255,.5));
}

.energyTowerGlyph {
    background: #ffd91a;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    filter: drop-shadow(0 0 14px rgba(255,215,0,.58));
}

.frostPreviewImage {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 0 13px rgba(84, 211, 255, .58));
}

.skinLockedButton {
    width: 100%;
    padding: 9px 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    color: #6f8193;
    font-weight: 800;
}

.iceSkinChoices {
    display: grid;
    gap: 7px;
}

.iceSkinChoice {
    position: relative;
    width: 100%;
    min-height: 54px;
    display: grid;
    grid-template-columns: 38px 1fr 22px;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;
    background: rgba(255,255,255,.035);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: .18s;
}

.iceSkinChoice:hover:not(:disabled) {
    border-color: #64d8ff;
    background: rgba(60, 184, 255, .09);
}

.iceSkinChoice.selected {
    border-color: #ffd632;
    background: linear-gradient(90deg, rgba(255, 205, 31, .12), rgba(255,255,255,.03));
    box-shadow: 0 0 13px rgba(255, 205, 31, .1);
}

.iceSkinChoice.locked {
    opacity: .55;
    cursor: not-allowed;
}

.iceSkinChoice b,
.iceSkinChoice small {
    display: block;
}

.iceSkinChoice b {
    font-size: 12px;
}

.iceSkinChoice small {
    margin-top: 2px;
    color: #7f95aa;
    font-size: 9px;
}

.skinCheck {
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffd52e;
    color: #111;
    font-style: normal;
    font-weight: 900;
    text-align: center;
    line-height: 20px;
}

.iceSkinChoice.selected .skinCheck {
    display: block;
}

.miniSkinPreview {
    width: 30px;
    height: 30px;
    display: block;
}

.miniFrostImage {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.monsterSkinGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(270px, 1fr));
    gap: 12px;
}

.monsterSkinCard {
    min-height: 94px;
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background:
        linear-gradient(90deg, rgba(21,33,49,.93), rgba(8,14,23,.96));
    transition: .18s;
}

.monsterSkinCard:hover {
    transform: translateX(4px);
    border-color: rgba(255, 112, 130, .28);
}

.monsterSkinCard h3 {
    font-size: 15px;
}

.monsterSkinCard p {
    margin: 4px 0 0;
    color: #7f93a7;
    font-size: 11px;
}

.monsterGlyph {
    display: block;
    justify-self: center;
    width: 43px;
    height: 43px;
    filter: drop-shadow(0 0 12px rgba(255,255,255,.18));
}

.circleMonster {
    border-radius: 50%;
}

.squareMonster {
    border-radius: 3px;
}

.triangleMonster {
    clip-path: polygon(100% 50%, 0 0, 0 100%);
}

.pentagonMonster {
    clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}

.diamondMonster {
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.normalMonster { background: #35d05f; }
.blueMonster { background: #248cff; }
.flyMonster { background: #268cff; }
.splitMonster { background: #51d869; }
.thoiMonster { background: #ff9d26; }
.bossMonster { background: #a33bda; transform: scale(1.14); }
.bigFlyMonster { background: #9c42d7; transform: scale(1.18); }
.bigBlueMonster { background: #347dff; transform: scale(1.18); }
.splitBigMonster { background: #a33bda; transform: scale(1.18); }
.thoiBuMonster { background: #a33bda; transform: scale(1.18); }

.bossCard {
    border-color: rgba(174, 70, 229, .18);
}

.comingSkin {
    padding: 6px 8px;
    border-radius: 20px;
    color: #899aac;
    background: rgba(255,255,255,.04);
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
}

.skinVaultFooter {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 28px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.18);
    color: #8ba0b4;
    font-size: 12px;
}

.skinSavedDot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: #38e27d;
    box-shadow: 0 0 8px rgba(56,226,125,.7);
}


@media (max-width: 950px) {
    .skinGrid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 650px) {
    .skinVaultModal {
        padding: 8px;
    }

    .skinVault {
        max-height: 95vh;
        border-radius: 15px;
    }

    .skinVaultHeader {
        padding: 17px 16px 13px;
    }

    .skinVaultHeader p {
        display: none;
    }

    .skinVaultTabs {
        padding: 12px 16px 0;
    }

    .skinTab {
        flex: 1;
        min-width: 0;
    }

    .skinVaultBody {
        padding: 14px 14px 20px;
    }

    .skinGrid,
    .monsterSkinGrid {
        grid-template-columns: 1fr;
    }

    .skinUnit {
        min-height: 0;
    }

    .skinUnit p {
        min-height: 0;
    }

    .monsterSkinCard {
        grid-template-columns: 58px 1fr;
    }

    .comingSkin {
        grid-column: 2;
        justify-self: start;
    }

    .skinVaultFooter {
        padding: 12px 15px;
        flex-direction: column;
        align-items: stretch;
    }
}


/* =========================================================
   BXH 2 MAP + POPUP TOP 100
========================================================= */
.homeRankHeader {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 62px;
    align-items: center;
    gap: 8px;
    padding: 0 8px 7px;
    color: #71869a;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .65px;
}

.homeRankHeader span {
    min-width: 0;
}

.homeRankHeader strong {
    text-align: right;
}

.homeTop100Button {
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 211, 64, .42);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,205,42,.12), rgba(255,143,0,.06));
    color: #ffd94e;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .5px;
    cursor: pointer;
    transition: .18s;
}

.homeTop100Button:hover {
    border-color: #ffd93c;
    background: linear-gradient(180deg, rgba(255,205,42,.22), rgba(255,143,0,.11));
    transform: translateY(-1px);
}

.homeRankEmpty {
    padding: 25px 8px;
    color: #8495a6;
    text-align: center;
    font-size: 12px;
}

body.rankingModalOpen {
    overflow: hidden;
}

.homeRankingModal {
    position: fixed;
    inset: 0;
    z-index: 22000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.homeRankingModal.open {
    display: flex;
}

.homeRankingBackdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 194, 31, .11), transparent 36%),
        rgba(0, 4, 9, .88);
    backdrop-filter: blur(7px);
}

.homeRankingPopup {
    position: relative;
    z-index: 1;
    width: min(660px, 94vw);
    max-height: min(820px, 92vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 210, 58, .48);
    border-radius: 19px;
    background:
        linear-gradient(180deg, rgba(19, 28, 39, .99), rgba(5, 10, 17, .995));
    box-shadow:
        0 34px 90px rgba(0,0,0,.65),
        0 0 38px rgba(255, 190, 30, .10);
}

.homeRankingPopupHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 21px 23px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.homeRankingPopupHeader span {
    display: block;
    margin-bottom: 4px;
    color: #c18c24;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.homeRankingPopupHeader h2 {
    margin: 0;
    color: #ffd944;
    font-size: 25px;
}

.homeRankingClose {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    color: white;
    font-size: 28px;
    cursor: pointer;
}

.homeRankingClose:hover {
    background: #a9202d;
    border-color: #e44755;
}

.homeRankingPopupColumns,
.homeTop100Row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 90px;
    align-items: center;
    gap: 10px;
}

.homeRankingPopupColumns {
    padding: 11px 22px;
    color: #6f8295;
    background: rgba(255,255,255,.025);
    border-bottom: 1px solid rgba(255,255,255,.055);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;
}

.homeRankingPopupColumns strong,
.homeTop100Row strong {
    text-align: right;
}

.homeRankingPopupList {
    min-height: 180px;
    overflow-y: auto;
    padding: 6px 13px 15px;
}

.homeTop100Row {
    min-height: 43px;
    margin-top: 4px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #e9f0f6;
    background: rgba(255,255,255,.025);
}

.homeTop100Row:hover {
    background: rgba(255,255,255,.05);
}

.homeTop100Row b {
    color: #8295a8;
    font-size: 12px;
}

.homeTop100Row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}

.homeTop100Row strong {
    color: #7cdbff;
    font-size: 13px;
}

.homeTop100Row.topMedal {
    border-color: rgba(255,255,255,.07);
}

.homeTop100Row.topMedal1 {
    background: linear-gradient(90deg, rgba(255,201,27,.13), rgba(255,255,255,.02));
}

.homeTop100Row.topMedal1 b,
.homeTop100Row.topMedal1 span {
    color: #ffd83c;
}

.homeTop100Row.topMedal2 b,
.homeTop100Row.topMedal2 span {
    color: #d6e0e8;
}

.homeTop100Row.topMedal3 b,
.homeTop100Row.topMedal3 span {
    color: #d99864;
}

.rankingLoading {
    padding: 55px 10px;
    color: #8193a5;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 600px) {
    .homeRankingModal {
        padding: 8px;
    }

    .homeRankingPopup {
        max-height: 95vh;
        border-radius: 14px;
    }

    .homeRankingPopupHeader {
        padding: 17px 15px 13px;
    }

    .homeRankingPopupHeader h2 {
        font-size: 20px;
    }

    .homeRankingPopupColumns,
    .homeTop100Row {
        grid-template-columns: 46px minmax(0, 1fr) 68px;
    }

    .homeRankingPopupColumns {
        padding-left: 15px;
        padding-right: 15px;
    }

    .homeRankingPopupList {
        padding-left: 8px;
        padding-right: 8px;
    }
}


/* =========================================================
   CHAT TỔNG + GÓP Ý TRÊN TRANG CHỦ
========================================================= */
body.communityModalOpen {
    overflow: hidden;
}

.homeCommunityModal {
    position: fixed;
    inset: 0;
    z-index: 23000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.homeCommunityModal.open {
    display: flex;
}

.homeCommunityBackdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(0, 213, 255, .12), transparent 35%),
        rgba(0, 4, 9, .89);
    backdrop-filter: blur(7px);
}

.homeCommunityPopup {
    position: relative;
    z-index: 1;
    width: min(650px, 95vw);
    max-height: min(820px, 92vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(52, 211, 255, .46);
    border-radius: 19px;
    background:
        linear-gradient(180deg, rgba(15, 28, 41, .99), rgba(5, 10, 17, .995));
    box-shadow:
        0 34px 90px rgba(0,0,0,.65),
        0 0 40px rgba(0, 190, 255, .10);
}

.homeCommunityHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 20px 22px 15px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.homeCommunityHeader span {
    display: block;
    margin-bottom: 4px;
    color: #46d7ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.homeCommunityHeader h2 {
    margin: 0;
    color: #fff;
    font-size: 25px;
}

.homeCommunityClose {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

.homeCommunityClose:hover {
    background: #a9202d;
    border-color: #e44755;
}

.homeCommunityMode {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.homeCommunityMode[hidden] {
    display: none !important;
}

.homeChatMessages {
    height: min(480px, 57vh);
    overflow-y: auto;
    padding: 13px;
}

.homeChatMessage {
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.homeChatMeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.homeChatMeta b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffd83d;
    font-size: 12px;
}

.homeChatMeta time {
    flex-shrink: 0;
    color: #63788c;
    font-size: 9px;
}

.homeChatMessage p {
    margin: 5px 0 0;
    color: #edf4fa;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.homeChatLoading {
    padding: 55px 10px;
    color: #8295a7;
    text-align: center;
    font-size: 13px;
}

.homeCommunityComposer,
.homeFeedbackForm {
    padding: 13px;
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(0,0,0,.18);
}

.homeCommunityComposer textarea,
.homeFeedbackForm textarea {
    width: 100%;
    resize: none;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    outline: none;
    background: rgba(0,0,0,.32);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
}

.homeCommunityComposer textarea:focus,
.homeFeedbackForm textarea:focus {
    border-color: #42d6ff;
    box-shadow: 0 0 0 2px rgba(66,214,255,.08);
}

.homeComposerBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 8px;
}

.homeComposerBottom span {
    color: #71869a;
    font-size: 10px;
}

.homeComposerBottom span.error {
    color: #ff6b75;
}

.homeComposerBottom span.success {
    color: #4cff88;
}

.homeComposerBottom button {
    min-width: 110px;
    padding: 9px 14px;
    border: 1px solid #57dfff;
    border-radius: 8px;
    background: linear-gradient(135deg, #17b8d9, #087b9b);
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.homeComposerBottom button:disabled {
    opacity: .55;
    cursor: wait;
}

.homeFeedbackIntro {
    padding: 34px 25px 20px;
    text-align: center;
}

.homeFeedbackIcon {
    font-size: 45px;
}

.homeFeedbackIntro h3 {
    margin: 8px 0 5px;
    color: #fff;
    font-size: 19px;
}

.homeFeedbackIntro p {
    max-width: 430px;
    margin: 0 auto;
    color: #8397aa;
    font-size: 12px;
    line-height: 1.55;
}

.homeFeedbackForm {
    padding: 16px 22px 22px;
    border-top: 0;
    background: transparent;
}

@media (max-width: 600px) {
    .homeCommunityModal {
        padding: 8px;
    }

    .homeCommunityPopup {
        max-height: 95vh;
        border-radius: 14px;
    }

    .homeCommunityHeader {
        padding: 16px 14px 12px;
    }

    .homeCommunityHeader h2 {
        font-size: 20px;
    }

    .homeChatMessages {
        height: 58vh;
    }
}


/* =========================================================
   PREVIEW MAP THẬT 10x10 TRÊN TRANG CHỦ
========================================================= */
.homeMapCard {
    justify-content: flex-start;
}

.homeMapText {
    width: 100%;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    margin-bottom: 10px;
    text-align: center;
}

.homeMapText strong {
    color: #f3f7fb;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .45px;
    line-height: 1.15;
}

.homeMapText span {
    color: #91a5b7;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

.monthlyMapText strong {
    color: #ffd14a;
}

.monthlyMapText span {
    color: #e3b866;
}

.realMapPreview {
    width: min(100%, 218px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.42);
    border-radius: 7px;
    background: #111a22;
    box-shadow:
        inset 0 0 25px rgba(0,0,0,.38),
        0 9px 24px rgba(0,0,0,.20);
}

.realMapCell {
    position: relative;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid rgba(255,255,255,.13);
    border-bottom: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.018);
}

.realMapCell:nth-child(10n) {
    border-right: 0;
}

.realMapCell:nth-child(n+91) {
    border-bottom: 0;
}

.realMapCell.startCell {
    background:
        radial-gradient(circle at 40% 35%, #7aff9c, #16bb58 55%, #087833);
    box-shadow:
        inset 0 0 0 1px rgba(190,255,205,.8),
        0 0 10px rgba(31,225,102,.45);
}

.realMapCell.startCell::after {
    content: "S";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #05220f;
    font-size: 9px;
    font-weight: 1000;
}

.realMapCell.endCell {
    background:
        radial-gradient(circle at 40% 35%, #ff8b8b, #e52c36 56%, #86121a);
    box-shadow:
        inset 0 0 0 1px rgba(255,190,190,.8),
        0 0 10px rgba(255,52,65,.42);
}

.realMapCell.endCell::after {
    content: "E";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #310507;
    font-size: 9px;
    font-weight: 1000;
}

/* Đá preview đồng bộ kiểu vẽ drawRocks() trong game.js */
.realMapCell.rockCell {
    background: #292929;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.55);
    overflow: visible;
}

.realMapCell.rockCell::before {
    content: "";
    position: absolute;
    left: 8%;
    top: 7%;
    width: 84%;
    height: 86%;
    background: #777;
    clip-path: polygon(6% 72%, 0 39%, 22% 9%, 61% 3%, 91% 29%, 86% 74%, 60% 91%, 24% 87%);
    box-shadow: inset 0 0 0 1px #222;
}

.realMapCell.rockCell::after {
    content: "";
    position: absolute;
    left: 26%;
    top: 19%;
    width: 52%;
    height: 34%;
    background: #aaa;
    clip-path: polygon(0 18%, 55% 0, 100% 42%, 21% 100%);
    opacity: .95;
}

.classicHomeMap .realMapPreview {
    border-color: rgba(78,214,255,.52);
}

.monthlyHomeMap .realMapPreview {
    border-color: rgba(255,180,47,.63);
}

@media (max-width: 700px) {
    .homeMapText {
        min-height: 48px;
        margin-bottom: 7px;
    }

    .homeMapText strong {
        font-size: 13px;
    }

    .homeMapText span {
        font-size: 9px;
    }

    .realMapPreview {
        width: min(100%, 180px);
    }
}








/* =========================================================
   CANH RIÊNG BXH THEO 2 NÚT BẢN ĐỒ
========================================================= */
/* BXH cổ điển: giữ cạnh trái, bóp cạnh phải 10px */
.homeInfoArea .homeRankingBox:not(.monthlyRankingBox) {
    width: calc(100% - 10px);
    max-width: none;
    box-sizing: border-box;
    justify-self: start;
    margin-left: 0;
    margin-right: 10px;
}

/* BXH tháng: giữ cạnh phải, bóp cạnh trái 10px */
.homeInfoArea .monthlyRankingBox {
    width: calc(100% - 10px);
    max-width: none;
    box-sizing: border-box;
    justify-self: end;
    margin-left: 10px;
    margin-right: 0;
}


/* =========================================================
   PHẦN DƯỚI TRANG CHỦ - SEO / GIỚI THIỆU / GAME CONTENT
========================================================= */
.seoIntroSection,
.howToPlaySection,
.towerShowcaseSection,
.monsterSection,
.seoLongformSection,
.faqSection,
.finalSeoCTA {
    width: min(1380px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

.seoIntroSection {
    padding: 86px 0 42px;
}

.seoSectionHead {
    max-width: 900px;
    margin: 0 auto 34px;
    text-align: center;
}

.seoSectionHead > span,
.seoLongformLead > span,
.monsterIntro > span {
    display: inline-block;
    margin-bottom: 10px;
    color: #4fdcff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.2px;
}

.seoSectionHead h2,
.seoLongformLead h2,
.monsterIntro h2 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(27px, 3.2vw, 43px);
    line-height: 1.13;
    letter-spacing: -.6px;
}

.seoSectionHead p,
.monsterIntro > p {
    max-width: 800px;
    margin: 15px auto 0;
    color: #8fa2b5;
    font-size: 14px;
    line-height: 1.75;
}

.compactHead {
    margin-bottom: 25px;
}

.seoIntroGrid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    gap: 18px;
}

.seoIntroMain,
.seoHighlights {
    border: 1px solid rgba(87, 205, 255, .14);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(20, 34, 49, .82), rgba(7, 13, 21, .96));
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.seoIntroMain {
    padding: 31px 32px;
}

.seoMiniLabel {
    color: #ffd349;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.seoIntroMain h3 {
    max-width: 720px;
    margin: 8px 0 13px;
    color: #fff;
    font-size: clamp(21px, 2.4vw, 31px);
    line-height: 1.2;
}

.seoIntroMain > p {
    margin: 0;
    max-width: 810px;
    color: #92a4b6;
    font-size: 13px;
    line-height: 1.75;
}

.seoFeatureStrip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-top: 27px;
}

.seoFeatureStrip > div {
    padding: 14px 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
}

.seoFeatureStrip strong,
.seoFeatureStrip span {
    display: block;
}

.seoFeatureStrip strong {
    color: #57dbff;
    font-size: 20px;
}

.seoFeatureStrip span {
    margin-top: 3px;
    color: #778b9e;
    font-size: 10px;
}

.seoHighlights {
    padding: 26px;
}

.seoHighlights h3 {
    margin: 0 0 15px;
    color: #fff;
    font-size: 18px;
}

.seoHighlightItem {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    align-items: start;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.seoHighlightItem:last-child {
    border-bottom: 0;
}

.seoHighlightItem b {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #09151e;
    background: #43d899;
    font-size: 12px;
}

.seoHighlightItem span {
    color: #9aabba;
    font-size: 12px;
    line-height: 1.55;
}


/* HOW TO PLAY */
.howToPlaySection {
    padding: 50px 0 62px;
}

.howToPlayGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
}

.playStep {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    padding: 23px 20px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 15px;
    background:
        linear-gradient(150deg, rgba(19, 31, 44, .95), rgba(6, 12, 19, .98));
}

.playStep > i {
    position: absolute;
    top: 8px;
    right: 12px;
    color: rgba(255,255,255,.055);
    font-size: 56px;
    font-weight: 1000;
    font-style: normal;
}

.playStepIcon {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(79, 214, 255, .22);
    border-radius: 12px;
    background: rgba(47, 190, 235, .08);
    font-size: 21px;
}

.playStep h3 {
    margin: 0;
    color: #fff;
    font-size: 17px;
}

.playStep p {
    margin: 8px 0 0;
    color: #8295a8;
    font-size: 12px;
    line-height: 1.6;
}


/* TOWERS */
.towerShowcaseSection {
    padding: 65px 0;
    border-top: 1px solid rgba(255,255,255,.045);
}

.seoTowerGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
}

.seoTowerCard {
    position: relative;
    min-height: 305px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(24, 37, 53, .87), rgba(7, 13, 21, .98));
    transition: transform .2s, border-color .2s;
}

.seoTowerCard:hover {
    transform: translateY(-5px);
    border-color: rgba(94, 213, 255, .28);
}

.seoTowerNumber {
    position: absolute;
    top: 12px;
    right: 14px;
    color: rgba(255,255,255,.055);
    font-size: 42px;
    font-weight: 1000;
}

.seoTowerIcon {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 9px 0 15px;
    border-radius: 12px;
    background:
        radial-gradient(circle, rgba(255,255,255,.055), transparent 65%),
        rgba(0,0,0,.14);
}

.seoTowerIcon > span {
    display: block;
    width: 55px;
    height: 55px;
}

.normalSeoShape {
    background: #f0443b;
    clip-path: polygon(50% 0, 93% 33%, 78% 100%, 22% 100%, 7% 33%);
    filter: drop-shadow(0 0 12px rgba(255,64,52,.36));
}

.iceSeoShape {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #d3f4ff 62%, #67cfff);
    box-shadow: 0 0 18px rgba(108,211,255,.38);
}

.poisonSeoShape {
    width: 52px !important;
    height: 52px !important;
    background: #20ba4b;
    box-shadow: 0 0 15px rgba(32,186,75,.28);
}

.airSeoShape {
    background: #2d72ff;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 0 13px rgba(45,114,255,.4));
}

.energySeoShape {
    background: #ffdb25;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    filter: drop-shadow(0 0 13px rgba(255,219,37,.38));
}

.seoTowerCard h3 {
    margin: 0;
    color: #fff;
    font-size: 17px;
}

.seoTowerCard p {
    min-height: 92px;
    margin: 8px 0 15px;
    color: #8295a7;
    font-size: 11.5px;
    line-height: 1.65;
}

.towerRole {
    display: inline-block;
    padding: 6px 8px;
    border-radius: 6px;
    color: #72dfff;
    background: rgba(65, 202, 244, .075);
    border: 1px solid rgba(65,202,244,.13);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .7px;
}


/* MONSTERS */
.monsterSection {
    display: grid;
    grid-template-columns: .83fr 1.17fr;
    gap: 28px;
    align-items: center;
    padding: 72px 0;
    border-top: 1px solid rgba(255,255,255,.045);
}

.monsterIntro {
    padding-right: 20px;
}

.monsterIntro > p {
    margin-left: 0;
}

.inlinePlayLink {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 205, 54, .42);
    border-radius: 9px;
    color: #ffd84a;
    background: rgba(255, 200, 37, .07);
    font-size: 11px;
    font-weight: 900;
}

.monsterTypeGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.monsterTypeGrid article {
    min-height: 92px;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 12px;
    background: rgba(15, 25, 36, .7);
}

.monsterTypeGrid article:last-child {
    grid-column: 1 / -1;
}

.monsterTypeGrid h3 {
    margin: 0;
    color: #fff;
    font-size: 13px;
}

.monsterTypeGrid p {
    margin: 3px 0 0;
    color: #7d91a5;
    font-size: 10px;
    line-height: 1.5;
}

.monsterSeoGlyph {
    display: block;
    justify-self: center;
    width: 38px;
    height: 38px;
    background: #8a45d8;
    filter: drop-shadow(0 0 10px rgba(155,72,226,.3));
}

.monsterSeoCircle { border-radius: 50%; }
.monsterSeoSquare { background: #3485ff; }
.monsterSeoTriangle {
    background: #4a88ff;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
}
.monsterSeoPentagon {
    background: #45ca68;
    clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}
.monsterSeoDiamond {
    background: #ff9d2e;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}


/* LONG-FORM SEO */
.seoLongformSection {
    padding: 68px 0;
    border-top: 1px solid rgba(255,255,255,.045);
}

.seoLongformLead {
    max-width: 750px;
    margin-bottom: 28px;
}

.seoLongformColumns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

.seoLongformColumns > div {
    padding: 22px;
    border-left: 2px solid rgba(70, 211, 255, .34);
    background: linear-gradient(90deg, rgba(52,183,222,.045), transparent);
}

.seoLongformColumns h3 {
    margin: 0 0 8px;
    color: #f7fbff;
    font-size: 15px;
}

.seoLongformColumns p {
    margin: 0;
    color: #7f93a7;
    font-size: 11.5px;
    line-height: 1.7;
}


/* FAQ */
.faqSection {
    padding: 66px 0;
    border-top: 1px solid rgba(255,255,255,.045);
}

.faqGrid {
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    gap: 8px;
}

.faqGrid details {
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 11px;
    background: rgba(13, 23, 34, .78);
    overflow: hidden;
}

.faqGrid summary {
    position: relative;
    padding: 15px 46px 15px 17px;
    color: #eaf3fa;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.faqGrid summary::-webkit-details-marker {
    display: none;
}

.faqGrid summary::after {
    content: "+";
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: #55d9ff;
    font-size: 21px;
}

.faqGrid details[open] summary::after {
    content: "−";
}

.faqGrid details p {
    margin: 0;
    padding: 0 17px 16px;
    color: #8194a6;
    font-size: 11.5px;
    line-height: 1.65;
}


/* FINAL CTA */
.finalSeoCTA {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    margin-top: 25px;
    margin-bottom: 72px;
    padding: 35px 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border: 1px solid rgba(255, 203, 48, .28);
    border-radius: 20px;
    background:
        linear-gradient(110deg, rgba(26, 39, 54, .98), rgba(13, 19, 29, .99));
}

.finalSeoGlow {
    position: absolute;
    width: 440px;
    height: 440px;
    right: -120px;
    top: -210px;
    border-radius: 50%;
    background: rgba(255, 178, 0, .11);
    filter: blur(85px);
    pointer-events: none;
}

.finalSeoCTA > div:not(.finalSeoGlow) {
    position: relative;
    z-index: 1;
}

.finalSeoCTA > div > span {
    color: #ffd044;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.finalSeoCTA h2 {
    margin: 7px 0 5px;
    color: #fff;
    font-size: clamp(26px, 3vw, 40px);
}

.finalSeoCTA p {
    margin: 0;
    color: #8598aa;
    font-size: 12px;
}

.finalSeoActions {
    display: flex;
    gap: 9px;
    flex-shrink: 0;
}

.finalSeoActions a {
    padding: 12px 17px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.ctaPrimary {
    color: #151000;
    background: linear-gradient(135deg, #ffd737, #ff9d00);
    border: 1px solid #ffe164;
}

.ctaSecondary {
    color: #66ddff;
    background: rgba(65, 198, 239, .06);
    border: 1px solid rgba(86, 214, 255, .36);
}


/* FOOTER POLISH */
.footer {
    border-top: 1px solid rgba(255,255,255,.07);
    background: #080d13;
}

.footerLinks a {
    color: #788b9d;
    transition: color .18s;
}

.footerLinks a:hover {
    color: #5fdcff;
}


/* RESPONSIVE */
@media (max-width: 1050px) {
    .seoTowerGrid {
        grid-template-columns: repeat(3, 1fr);
    }

    .howToPlayGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .seoFeatureStrip {
        grid-template-columns: repeat(2, 1fr);
    }

    .monsterSection {
        grid-template-columns: 1fr;
    }

    .monsterIntro {
        padding-right: 0;
    }
}

@media (max-width: 800px) {
    .seoIntroSection,
    .howToPlaySection,
    .towerShowcaseSection,
    .monsterSection,
    .seoLongformSection,
    .faqSection,
    .finalSeoCTA {
        width: min(100% - 24px, 1380px);
    }

    .seoIntroSection {
        padding-top: 55px;
    }

    .seoIntroGrid,
    .seoLongformColumns {
        grid-template-columns: 1fr;
    }

    .seoTowerGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .finalSeoCTA {
        align-items: flex-start;
        flex-direction: column;
        padding: 28px 24px;
    }

    .finalSeoActions {
        width: 100%;
        flex-wrap: wrap;
    }

    .finalSeoActions a {
        flex: 1 1 200px;
        text-align: center;
    }
}

@media (max-width: 520px) {
    .seoSectionHead h2,
    .seoLongformLead h2,
    .monsterIntro h2 {
        font-size: 26px;
    }

    .seoIntroMain,
    .seoHighlights {
        padding: 20px;
    }

    .howToPlayGrid,
    .seoTowerGrid,
    .monsterTypeGrid {
        grid-template-columns: 1fr;
    }

    .monsterTypeGrid article:last-child {
        grid-column: auto;
    }

    .seoFeatureStrip {
        grid-template-columns: repeat(2, 1fr);
    }

    .seoTowerCard {
        min-height: 0;
    }

    .seoTowerCard p {
        min-height: 0;
    }
}


/* =========================================================
   RESPONSIVE CỤM TRÊN TRANG CHỦ
   - Điện thoại ngang: bóp toàn cụm gần giống desktop
   - Điện thoại dọc: ảnh ở trên, cụm map/BXH ở dưới
========================================================= */

/* Tablet + điện thoại ngang */
@media (max-width: 1100px) and (orientation: landscape) {
    .heroSection {
        width: 1280px;
        max-width: none;
        transform-origin: top left;
        transform: scale(calc(100vw / 1280));
        margin-bottom: calc((700px * (100vw / 1280)) - 700px);
    }

    .heroImageBox {
        min-width: 0;
    }

    .homeControlPanel {
        min-width: 0;
    }

    .heroImageBox,
    .homeControlPanel {
        height: 700px;
    }

    .homeMapArea,
    .homeInfoArea {
        gap: 18px;
    }

    .homeMapCard {
        min-width: 0;
    }

    .homeRankingBox {
        min-width: 0;
    }
}

/* Điện thoại dọc */
@media (max-width: 700px) and (orientation: portrait) {
    .heroSection {
        width: 100%;
        max-width: none;
        display: block;
        transform: none;
        margin: 0;
        padding: 0;
    }

    .heroImageBox {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 10;
        border-radius: 0;
    }

    .heroImageBox img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .heroImageText {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .heroImageText > span {
        display: block;
        font-size: clamp(8px, 2.8vw, 10px);
        letter-spacing: clamp(.8px, .35vw, 1.6px);
        white-space: nowrap;
    }

    .heroImageText h1 {
        font-size: clamp(18px, 7vw, 44px);
        line-height: 1;
        white-space: nowrap;
    }

    .heroImageText h1 span {
        display: block;
        font-size: inherit !important;
        line-height: inherit !important;
        white-space: nowrap;
    }

    .heroImageText .yellow {
        font-size: inherit !important;
    }

    .homeControlPanel {
        width: 100%;
        min-width: 0;
        height: auto;
        padding: 18px 12px 24px;
        border-left: 0;
    }

    .homeMapArea {
        display: grid;
        grid-template-columns: 1fr 82px 1fr;
        gap: 8px;
        align-items: start;
    }

    .homeMapCard {
        width: 100%;
        min-width: 0;
        padding: 12px 8px;
        border-radius: 12px;
    }

    .homeMapText {
        min-height: 52px;
        margin-bottom: 8px;
    }

    .homeMapText strong {
        font-size: 12px;
    }

    .homeMapText span {
        font-size: 8px;
    }

    .realMapPreview {
        width: 100%;
        max-width: none;
    }

    .homeMiddleControls {
        width: 82px;
        min-width: 82px;
        gap: 14px;
    }

    .homeSelectHint {
        transform: scale(.72);
        transform-origin: top center;
        margin-bottom: -18px;
    }

    .homeSkinButton {
        width: 72px;
        height: 72px;
        padding: 0;
        border-radius: 50%;
    }

    .homeSkinButton .skinIcon {
        font-size: 22px;
    }

    .homeSkinButton strong {
        font-size: 8px;
    }

    .homeInfoArea {
        display: grid;
        grid-template-columns: 1fr 82px 1fr;
        gap: 8px;
        align-items: start;
        margin-top: 12px;
    }

    .homeInfoArea .homeRankingBox:not(.monthlyRankingBox),
    .homeInfoArea .monthlyRankingBox {
        width: 100%;
        max-width: none;
        margin: 0;
        justify-self: stretch;
        min-width: 0;
        padding: 10px 7px;
    }

    .homeRankingBox h3 {
        font-size: 11px;
        white-space: normal;
        line-height: 1.25;
    }

    .homeRankHeader {
        grid-template-columns: 28px minmax(0,1fr) 45px;
        gap: 4px;
        padding-left: 2px;
        padding-right: 2px;
        font-size: 7px;
    }

    .homeRankRow {
        grid-template-columns: 28px minmax(0,1fr) 45px;
        gap: 4px;
        padding-left: 2px;
        padding-right: 2px;
        min-height: 31px;
    }

    .homeRankRow b,
    .homeRankRow span,
    .homeRankRow strong {
        font-size: 9px;
    }

    .homeTop100Button {
        padding: 7px 4px;
        font-size: 8px;
    }

    .homeCommunityButtons {
        width: 82px;
        min-width: 82px;
        gap: 8px;
        align-self: stretch;
    }

    .homeChatButton,
    .homeFeedbackButton {
        width: 82px;
        min-width: 82px;
        padding: 9px 4px;
        font-size: 9px;
    }
}

/* Máy rất hẹp */
@media (max-width: 430px) and (orientation: portrait) {
    .homeMapArea,
    .homeInfoArea {
        grid-template-columns: minmax(0,1fr) 66px minmax(0,1fr);
        gap: 6px;
    }

    .homeMiddleControls,
    .homeCommunityButtons {
        width: 66px;
        min-width: 66px;
    }

    .homeSkinButton {
        width: 60px;
        height: 60px;
    }

    .homeChatButton,
    .homeFeedbackButton {
        width: 66px;
        min-width: 66px;
        font-size: 8px;
    }

    .homeMapText strong {
        font-size: 10px;
    }

    .homeMapText span {
        font-size: 7px;
    }

    .homeRankingBox h3 {
        font-size: 9px;
    }
}


/* =========================================================
   MOBILE DỌC - SẮP XẾP LẠI CỤM MAP / BXH CHO GỌN
========================================================= */
@media (max-width: 700px) and (orientation: portrait) {

    /* 2 map thành 2 cột cân nhau */
    .homeMapArea {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .classicHomeMap {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .monthlyHomeMap {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .homeMapCard {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px 9px 11px !important;
        align-self: start !important;
    }

    .homeMapText {
        min-height: 48px !important;
        margin-bottom: 8px !important;
    }

    .homeMapText strong {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    .homeMapText span {
        font-size: 7.5px !important;
        line-height: 1.25 !important;
    }

    .realMapPreview {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* Cụm chọn bản đồ/skin nằm thành 1 hàng riêng bên dưới 2 map */
    .homeMiddleControls {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 16px !important;
        margin-top: 4px !important;
        padding: 7px 0 2px !important;
    }

    .homeSelectHint {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        transform: none !important;

        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .homeSelectHint .hintText {
        text-align: right !important;
    }

    .homeSelectHint .hintText span {
        font-size: 8px !important;
        letter-spacing: 1.5px !important;
    }

    .homeSelectHint .hintText strong {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .homeSelectHint .hintArrows {
        display: flex !important;
        gap: 7px !important;
    }

    .homeSelectHint .leftArrow,
    .homeSelectHint .rightArrow {
        font-size: 22px !important;
    }

    .homeSkinButton {
        width: auto !important;
        height: 46px !important;
        min-width: 116px !important;
        padding: 0 13px !important;
        border-radius: 12px !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
    }

    .homeSkinButton .skinIcon {
        font-size: 19px !important;
    }

    .homeSkinButton strong {
        font-size: 10px !important;
        white-space: nowrap !important;
    }


    /* 2 BXH thành 2 cột rộng hơn, không có cột giữa */
    .homeInfoArea {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        margin-top: 10px !important;
    }

    .homeInfoArea .homeRankingBox:not(.monthlyRankingBox) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .homeInfoArea .monthlyRankingBox {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .homeInfoArea .homeRankingBox:not(.monthlyRankingBox),
    .homeInfoArea .monthlyRankingBox {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 10px 8px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .homeRankingBox h3 {
        min-height: 29px !important;
        margin: 0 0 7px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    .homeRankHeader,
    .homeRankRow {
        grid-template-columns: 22px minmax(0, 1fr) 42px !important;
        gap: 5px !important;
    }

    .homeRankHeader {
        padding: 0 4px 6px !important;
        font-size: 6.5px !important;
        line-height: 1.1 !important;
    }

    .homeRankHeader span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .homeRankRow {
        min-height: 36px !important;
        padding: 0 5px !important;
    }

    .homeRankRow b {
        font-size: 8.5px !important;
    }

    .homeRankRow span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 9px !important;
    }

    .homeRankRow strong {
        white-space: nowrap !important;
        font-size: 9px !important;
        text-align: right !important;
    }

    .homeTop100Button {
        margin-top: 8px !important;
        padding: 7px 3px !important;
        font-size: 7.5px !important;
        white-space: nowrap !important;
    }


    /* Chat + góp ý xuống một hàng riêng */
    .homeCommunityButtons {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        min-width: 0 !important;

        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;

        margin-top: 0 !important;
        align-self: auto !important;
    }

    .homeChatButton,
    .homeFeedbackButton {
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }
}

/* Máy dọc rất hẹp */
@media (max-width: 390px) and (orientation: portrait) {
    .homeMapArea,
    .homeInfoArea {
        gap: 7px !important;
    }

    .homeMapCard {
        padding: 10px 7px !important;
    }

    .homeMapText strong {
        font-size: 9.5px !important;
    }

    .homeMapText span {
        font-size: 6.8px !important;
    }

    .homeSelectHint .hintText strong {
        font-size: 15px !important;
    }

    .homeSkinButton {
        min-width: 100px !important;
        height: 42px !important;
    }

    .homeRankingBox h3 {
        font-size: 8.5px !important;
    }

    .homeRankHeader,
    .homeRankRow {
        grid-template-columns: 20px minmax(0, 1fr) 38px !important;
        gap: 3px !important;
    }

    .homeRankRow span,
    .homeRankRow strong {
        font-size: 8px !important;
    }
}


/* =========================================================
   MOBILE DỌC - BỐ CỤC THEO BẢN VẼ
   2 MAP
   CHỌN BẢN ĐỒ + 2 MŨI TÊN
   CHỌN SKIN NGANG
   2 BXH
========================================================= */
@media (max-width: 700px) and (orientation: portrait) {

    .homeControlPanel {
        padding: 18px 12px 24px !important;
    }

    /* ===== HÀNG 1: 2 MAP ===== */
    .homeMapArea {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .classicHomeMap {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .monthlyHomeMap {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .homeMapCard {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px 9px 11px !important;
        margin: 0 !important;
    }

    .homeMapText {
        min-height: 48px !important;
        margin-bottom: 8px !important;
    }

    .homeMapText strong {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    .homeMapText span {
        font-size: 7.5px !important;
        line-height: 1.25 !important;
    }

    .realMapPreview {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
    }


    /* ===== HÀNG 2 + 3: CHỌN BẢN ĐỒ / CHỌN SKIN ===== */
    .homeMiddleControls {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 10px !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
    }

    .homeSelectHint {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 8px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 2px !important;
        transform: none !important;
    }

    .homeSelectHint .hintText {
        order: 1 !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .homeSelectHint .hintText span {
        display: block !important;
        font-size: 8px !important;
        letter-spacing: 1.8px !important;
        line-height: 1 !important;
    }

    .homeSelectHint .hintText strong {
        display: block !important;
        font-size: 19px !important;
        line-height: 1 !important;
        margin-top: 3px !important;
    }

    /* 2 mũi tên nằm dưới chữ, mỗi cái hướng lên 1 map */
    .homeSelectHint .hintArrows {
        order: 2 !important;
        width: 86% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
        margin-top: -1px !important;
    }

    .homeSelectHint .leftArrow,
    .homeSelectHint .rightArrow {
        display: inline-block !important;
        font-size: 27px !important;
        line-height: 1 !important;
        color: #ffbf15 !important;
        filter: drop-shadow(0 0 8px rgba(255, 177, 0, .55)) !important;
    }

    /* Xoay mũi tên để hướng lên đúng 2 map */
    .homeSelectHint .leftArrow {
        transform: rotate(90deg) !important;
    }

    .homeSelectHint .rightArrow {
        transform: rotate(-90deg) !important;
    }


    /* ===== HÀNG 3: NÚT SKIN NGANG FULL ===== */
    .homeSkinButton {
        order: 3 !important;

        width: 100% !important;
        max-width: none !important;
        height: 48px !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 16px !important;

        border-radius: 10px !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .homeSkinButton .skinIcon {
        font-size: 20px !important;
    }

    .homeSkinButton strong {
        font-size: 11px !important;
        white-space: nowrap !important;
        letter-spacing: .3px !important;
    }


    /* ===== HÀNG 4: 2 BXH ===== */
    .homeInfoArea {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        margin-top: 12px !important;
    }

    .homeInfoArea .homeRankingBox:not(.monthlyRankingBox) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .homeInfoArea .monthlyRankingBox {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .homeInfoArea .homeRankingBox:not(.monthlyRankingBox),
    .homeInfoArea .monthlyRankingBox {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 10px 8px !important;

        box-sizing: border-box !important;
    }

    .homeRankingBox h3 {
        min-height: 29px !important;
        margin: 0 0 7px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    .homeRankHeader,
    .homeRankRow {
        grid-template-columns: 22px minmax(0, 1fr) 42px !important;
        gap: 5px !important;
    }

    .homeRankHeader {
        padding: 0 4px 6px !important;
        font-size: 6.5px !important;
        line-height: 1.1 !important;
    }

    .homeRankHeader span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .homeRankRow {
        min-height: 36px !important;
        padding: 0 5px !important;
    }

    .homeRankRow b {
        font-size: 8.5px !important;
    }

    .homeRankRow span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 9px !important;
    }

    .homeRankRow strong {
        white-space: nowrap !important;
        font-size: 9px !important;
        text-align: right !important;
    }

    .homeTop100Button {
        margin-top: 8px !important;
        padding: 7px 3px !important;
        font-size: 7.5px !important;
        white-space: nowrap !important;
    }


    /* ===== CHAT + GÓP Ý NẰM DƯỚI 2 BXH ===== */
    .homeCommunityButtons {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        min-width: 0 !important;

        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;

        margin: 0 !important;
        align-self: auto !important;
    }

    .homeChatButton,
    .homeFeedbackButton {
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;

        padding: 0 10px !important;
        border-radius: 10px !important;

        font-size: 10px !important;
        white-space: nowrap !important;
    }
}


/* Máy rất hẹp */
@media (max-width: 390px) and (orientation: portrait) {
    .homeMapArea,
    .homeInfoArea {
        gap: 7px !important;
    }

    .homeMapCard {
        padding: 10px 7px !important;
    }

    .homeMapText strong {
        font-size: 9.5px !important;
    }

    .homeMapText span {
        font-size: 6.8px !important;
    }

    .homeSelectHint .hintText strong {
        font-size: 17px !important;
    }

    .homeSelectHint .hintArrows {
        width: 90% !important;
    }

    .homeSkinButton {
        height: 44px !important;
    }

    .homeRankingBox h3 {
        font-size: 8.5px !important;
    }

    .homeRankHeader,
    .homeRankRow {
        grid-template-columns: 20px minmax(0, 1fr) 38px !important;
        gap: 3px !important;
    }

    .homeRankRow span,
    .homeRankRow strong {
        font-size: 8px !important;
    }
}


/* =========================================================
   MOBILE DỌC - CHỈNH 2 MŨI TÊN CHỌN BẢN ĐỒ
========================================================= */
@media (max-width: 700px) and (orientation: portrait) {
    .homeSelectHint .hintArrows {
        width: 68% !important;
        margin-top: -10px !important;
    }
}


/* =========================================================
   MOBILE DỌC - MŨI TÊN CÙNG HÀNG VỚI CHỌN BẢN ĐỒ
========================================================= */
@media (max-width: 700px) and (orientation: portrait) {

    .homeSelectHint {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 0 28px !important;
        margin: 0 !important;
    }

    .homeSelectHint .hintText {
        grid-column: 2 !important;
        grid-row: 1 !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .homeSelectHint .hintArrows {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;

        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;

        pointer-events: none !important;
    }

    .homeSelectHint .leftArrow,
    .homeSelectHint .rightArrow {
        font-size: 27px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .homeSelectHint .leftArrow {
        transform: rotate(90deg) translateY(-2px) !important;
    }

    .homeSelectHint .rightArrow {
        transform: rotate(-90deg) translateY(-2px) !important;
    }
}


/* =========================================================
   ĐIỆN THOẠI NGANG - ẢNH TRÊN, CỤM MAP/BXH Ở DƯỚI
========================================================= */
@media (max-width: 1100px) and (orientation: landscape) {

    .heroSection {
        width: 100% !important;
        max-width: none !important;
        display: block !important;
        transform: none !important;
        transform-origin: initial !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .heroImageBox {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 7 !important;
        border-radius: 0 !important;
    }

    .heroImageBox img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .heroImageText {
        left: 28px !important;
        right: 28px !important;
        bottom: 24px !important;
    }

    .heroImageText > span {
        display: block !important;
        font-size: clamp(9px, 1.8vw, 14px) !important;
        letter-spacing: clamp(1px, .22vw, 2px) !important;
        white-space: nowrap !important;
    }

    .heroImageText h1 {
        font-size: clamp(22px, 5vw, 64px) !important;
        line-height: .98 !important;
        white-space: nowrap !important;
    }

    .heroImageText h1 span {
        display: block !important;
        font-size: inherit !important;
        line-height: inherit !important;
        white-space: nowrap !important;
    }

    .heroImageText .yellow {
        font-size: inherit !important;
    }

    .homeControlPanel {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        padding: 18px 24px 26px !important;
        border-left: 0 !important;
    }

    .homeMapArea {
        width: 100% !important;
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            180px
            minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: start !important;
    }

    .classicHomeMap {
        grid-column: 1 !important;
    }

    .homeMiddleControls {
        grid-column: 2 !important;
        width: 180px !important;
        min-width: 180px !important;
        align-self: center !important;
    }

    .monthlyHomeMap {
        grid-column: 3 !important;
    }

    .homeMapCard {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }

    .realMapPreview {
        width: min(100%, 260px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .homeInfoArea {
        width: 100% !important;
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            180px
            minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: start !important;
        margin-top: 16px !important;
    }

    .homeInfoArea .homeRankingBox:not(.monthlyRankingBox) {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        justify-self: stretch !important;
    }

    .homeCommunityButtons {
        grid-column: 2 !important;
        width: 180px !important;
        min-width: 180px !important;
        align-self: center !important;
    }

    .homeInfoArea .monthlyRankingBox {
        grid-column: 3 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        justify-self: stretch !important;
    }

    .homeChatButton,
    .homeFeedbackButton {
        width: 100% !important;
    }
}

@media (max-width: 950px) and (orientation: landscape) {

    .heroImageBox {
        aspect-ratio: 16 / 6.5 !important;
    }

    .homeControlPanel {
        padding: 14px 16px 22px !important;
    }

    .homeMapArea,
    .homeInfoArea {
        grid-template-columns:
            minmax(0, 1fr)
            145px
            minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .homeMiddleControls,
    .homeCommunityButtons {
        width: 145px !important;
        min-width: 145px !important;
    }

    .homeSelectHint .hintText strong {
        font-size: 22px !important;
    }

    .homeSkinButton {
        width: 110px !important;
        height: 110px !important;
    }

    .homeRankingBox h3 {
        font-size: 12px !important;
    }
}


/* =========================================================
   CHỮ CHƠI NGAY TRÊN 2 CARD BẢN ĐỒ
========================================================= */
.homeMapPlayNow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    margin: 5px auto 0;
    padding: 4px 10px;

    border: 1px solid rgba(255, 215, 70, .52);
    border-radius: 999px;

    background: linear-gradient(
        180deg,
        rgba(255, 205, 48, .18),
        rgba(255, 145, 0, .08)
    );

    color: #ffd94a;
    font-style: normal;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .55px;
    line-height: 1;

    box-shadow:
        0 0 11px rgba(255, 185, 0, .13),
        inset 0 1px rgba(255,255,255,.08);
}

.homeMapCard:hover .homeMapPlayNow {
    border-color: #ffe36a;
    background: linear-gradient(
        180deg,
        rgba(255, 213, 60, .28),
        rgba(255, 145, 0, .14)
    );
    color: #fff3a5;
}

@media (max-width: 700px) and (orientation: portrait) {
    .homeMapText {
        min-height: 65px !important;
    }

    .homeMapPlayNow {
        margin-top: 4px;
        padding: 3px 8px;
        font-size: 7.5px;
    }
}

@media (max-width: 390px) and (orientation: portrait) {
    .homeMapText {
        min-height: 61px !important;
    }

    .homeMapPlayNow {
        font-size: 6.8px;
        padding: 3px 6px;
    }
}


/* =========================================================
   SPOTLIGHT CHỌN BẢN ĐỒ
   Bấm "CHƠI NGAY" ở phần dưới -> cuộn lên và chỉ làm sáng 2 map
   + cụm CHỌN BẢN ĐỒ ở giữa.
========================================================= */
.mapSpotlightOverlay {
    position: fixed;
    inset: 0;
    z-index: 19980;

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

    background: rgba(0, 3, 8, .78);
    backdrop-filter: blur(2px);

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.mapSpotlightOverlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Đưa đúng 3 khối cần chọn lên trên lớp tối */
body.mapSpotlightOpen .classicHomeMap,
body.mapSpotlightOpen .monthlyHomeMap,
body.mapSpotlightOpen .homeMiddleControls {
    position: relative !important;
    z-index: 20020 !important;
}

/* Hai map sáng nổi rõ */
body.mapSpotlightOpen .classicHomeMap,
body.mapSpotlightOpen .monthlyHomeMap {
    filter: brightness(1.13) saturate(1.08);
    box-shadow:
        0 0 0 2px rgba(255, 221, 87, .85),
        0 0 24px rgba(255, 194, 37, .32),
        0 18px 45px rgba(0,0,0,.5) !important;

    transform: translateY(-2px);
}

/* Chữ CHỌN BẢN ĐỒ + mũi tên sáng lên */
body.mapSpotlightOpen .homeMiddleControls {
    filter: brightness(1.3);
}

body.mapSpotlightOpen .homeSelectHint .hintText span,
body.mapSpotlightOpen .homeSelectHint .hintText strong {
    color: #fff6c9 !important;
    text-shadow:
        0 0 8px rgba(255, 199, 47, .7),
        0 0 20px rgba(255, 164, 0, .38);
}

body.mapSpotlightOpen .homeSelectHint .leftArrow,
body.mapSpotlightOpen .homeSelectHint .rightArrow {
    color: #ffd42f !important;
    filter:
        drop-shadow(0 0 8px rgba(255, 191, 0, .9))
        drop-shadow(0 0 18px rgba(255, 145, 0, .55)) !important;
}

/* Nút skin không phải mục tiêu của spotlight -> làm dịu lại */
body.mapSpotlightOpen .homeSkinButton {
    opacity: .25 !important;
    filter: grayscale(.45) brightness(.6) !important;
    pointer-events: none !important;
}

/* Gợi ý nhẹ cho người dùng */
body.mapSpotlightOpen .homeMapCard {
    animation: mapSpotlightPulse 1.4s ease-in-out infinite alternate;
}

@keyframes mapSpotlightPulse {
    from {
        box-shadow:
            0 0 0 2px rgba(255, 221, 87, .65),
            0 0 18px rgba(255, 194, 37, .23),
            0 18px 45px rgba(0,0,0,.5);
    }
    to {
        box-shadow:
            0 0 0 2px rgba(255, 230, 109, .95),
            0 0 34px rgba(255, 194, 37, .48),
            0 18px 45px rgba(0,0,0,.5);
    }
}

/* Trên mobile tránh blur quá nặng */
@media (max-width: 700px) {
    .mapSpotlightOverlay {
        backdrop-filter: blur(1px);
        background: rgba(0, 3, 8, .82);
    }

    body.mapSpotlightOpen .classicHomeMap,
    body.mapSpotlightOpen .monthlyHomeMap {
        transform: none;
    }
}


/* =========================================================
   LÀM NỔI TÊN CỦA CHÍNH NGƯỜI CHƠI - CHAT + BXH
========================================================= */
.homeRankRow.ownPlayerRow,
.homeTop100Row.ownPlayerRow {
    position: relative;
    border-color: rgba(74, 221, 255, .58) !important;
    background: linear-gradient(90deg, rgba(32, 180, 224, .18), rgba(61, 211, 255, .07)) !important;
    box-shadow: inset 3px 0 0 #55ddff, 0 0 12px rgba(56, 210, 255, .10);
}
.homeRankRow.ownPlayerRow span,
.homeTop100Row.ownPlayerRow span {
    color: #79e5ff !important;
    font-weight: 900 !important;
    text-shadow: 0 0 8px rgba(61, 213, 255, .28);
}
.homeRankRow.ownPlayerRow b,
.homeRankRow.ownPlayerRow strong,
.homeTop100Row.ownPlayerRow b,
.homeTop100Row.ownPlayerRow strong {
    font-weight: 900 !important;
}
.homeChatMessage.ownChatMessage {
    border-color: rgba(64, 213, 255, .46) !important;
    background: linear-gradient(135deg, rgba(36, 176, 221, .16), rgba(30, 92, 129, .08)) !important;
    box-shadow: inset 3px 0 0 #51dafa, 0 0 13px rgba(62, 211, 255, .08);
}
.homeChatMessage.ownChatMessage .homeChatMeta b {
    color: #6fe2ff !important;
    font-weight: 900 !important;
}
.ownNameBadge {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 5px;
    border: 1px solid rgba(91, 225, 255, .45);
    border-radius: 999px;
    background: rgba(59, 207, 241, .12);
    color: #89eaff;
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
    vertical-align: middle;
    letter-spacing: .5px;
}
@media (max-width: 700px) {
    .homeRankRow.ownPlayerRow,
    .homeTop100Row.ownPlayerRow {
        box-shadow: inset 2px 0 0 #55ddff, 0 0 8px rgba(56, 210, 255, .08);
    }
    .ownNameBadge {
        margin-left: 3px;
        padding: 2px 4px;
        font-size: 6px;
    }
}


/* =========================================================
   BXH MAP THÁNG - THỜI GIAN + RƯƠNG THƯỞNG SKIN
========================================================= */
.monthlyRankPeriod {
    margin: -2px 0 9px;
    color: #c99f54;
    font-size: 9px;
    font-weight: 800;
    text-align: center;
    letter-spacing: .45px;
}

.monthlyRewardBox {
    display: grid;
    grid-template-columns: 33px minmax(0, 1fr);
    align-items: center;
    gap: 7px;

    margin-bottom: 9px;
    padding: 7px 8px;

    border: 1px solid rgba(255, 197, 56, .34);
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 196, 42, .13),
            rgba(255, 117, 24, .05)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.035),
        0 0 12px rgba(255, 175, 30, .07);
}

.monthlyRewardChest {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background: rgba(255, 184, 31, .12);

    font-size: 18px;

    filter: drop-shadow(0 0 5px rgba(255, 190, 35, .34));
}

.monthlyRewardBox div {
    min-width: 0;
}

.monthlyRewardBox b,
.monthlyRewardBox span:not(.monthlyRewardChest) {
    display: block;
}

.monthlyRewardBox b {
    color: #ffd75a;
    font-size: 7.5px;
    font-weight: 1000;
    letter-spacing: .7px;
    line-height: 1.15;
}

.monthlyRewardBox span:not(.monthlyRewardChest) {
    margin-top: 2px;

    color: #e6c88b;
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.25;
}

.waveChest {
    display: inline-block;
    margin-right: 2px;
    font-size: 9px;
    vertical-align: -1px;
}

/* Mobile dọc: giữ khung thưởng gọn, không làm BXH quá cao */
@media (max-width: 700px) and (orientation: portrait) {
    .monthlyRankPeriod {
        margin-bottom: 6px;
        font-size: 6.5px;
    }

    .monthlyRewardBox {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 4px;
        margin-bottom: 6px;
        padding: 5px 5px;
        border-radius: 6px;
    }

    .monthlyRewardChest {
        width: 21px;
        height: 21px;
        font-size: 13px;
        border-radius: 5px;
    }

    .monthlyRewardBox b {
        font-size: 5.5px;
        letter-spacing: .25px;
    }

    .monthlyRewardBox span:not(.monthlyRewardChest) {
        margin-top: 1px;
        font-size: 6px;
        line-height: 1.15;
    }

    .waveChest {
        font-size: 7px;
        margin-right: 0;
    }
}


/* =========================================================
   TOP 5 MAP THÁNG - RƯƠNG THƯỞNG SAU TÊN NGƯỜI CHƠI
========================================================= */

/* Khung thưởng cũ phía trên không dùng nữa */
.monthlyRewardBox {
    display: none !important;
}

/* Riêng 5 dòng bảng tháng: Hạng | Tên | Rương | Wave */
.homeRankRow.monthlyRewardRow {
    grid-template-columns: 28px minmax(0, 1fr) 30px 48px !important;
    gap: 5px !important;
}

.monthlyChestButton {
    width: 27px;
    height: 27px;
    padding: 0;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 202, 54, .42);
    border-radius: 7px;

    background:
        radial-gradient(circle at 50% 35%, rgba(255,221,89,.18), transparent 68%),
        rgba(255, 169, 22, .07);

    color: #ffd952;
    font-size: 15px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        inset 0 1px rgba(255,255,255,.06),
        0 0 8px rgba(255, 181, 28, .08);

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.monthlyChestButton:hover {
    transform: scale(1.08);
    border-color: #ffda55;
    box-shadow:
        0 0 12px rgba(255, 183, 31, .27),
        inset 0 1px rgba(255,255,255,.08);
}

/* Popup thưởng */
body.monthlyRewardOpen {
    overflow: hidden;
}

.monthlyRewardModal {
    position: fixed;
    inset: 0;
    z-index: 25000;

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

    padding: 18px;
}

.monthlyRewardModal.open {
    display: flex;
}

.monthlyRewardBackdrop {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 50% 40%, rgba(255,184,34,.10), transparent 34%),
        rgba(0,3,8,.87);

    backdrop-filter: blur(6px);
}

.monthlyRewardPopup {
    position: relative;
    z-index: 1;

    width: min(420px, 92vw);
    padding: 29px 24px 25px;

    text-align: center;

    border: 1px solid rgba(255, 208, 75, .46);
    border-radius: 18px;

    background:
        linear-gradient(180deg, rgba(28,32,38,.99), rgba(9,12,17,.995));

    box-shadow:
        0 30px 80px rgba(0,0,0,.62),
        0 0 35px rgba(255,183,32,.10);
}

.monthlyRewardClose {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;

    background: rgba(255,255,255,.04);
    color: #fff;

    font-size: 22px;
    cursor: pointer;
}

.monthlyRewardBigChest {
    margin-bottom: 10px;
    font-size: 50px;

    filter: drop-shadow(0 0 14px rgba(255,193,42,.30));
}

.monthlyRewardPopup > span {
    color: #d5a943;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.monthlyRewardPopup h2 {
    margin: 7px 0 9px;

    color: #ffd959;
    font-size: 21px;
    line-height: 1.2;
}

.monthlyRewardPopup p {
    max-width: 330px;
    margin: 0 auto;

    color: #c5ced6;
    font-size: 12px;
    line-height: 1.55;
}

.monthlyRewardPopup small {
    display: block;
    margin-top: 13px;

    color: #7e8b97;
    font-size: 9px;
}

/* Mobile dọc */
@media (max-width: 700px) and (orientation: portrait) {
    .homeRankRow.monthlyRewardRow {
        grid-template-columns: 20px minmax(0, 1fr) 22px 38px !important;
        gap: 3px !important;
    }

    .monthlyChestButton {
        width: 21px;
        height: 21px;
        border-radius: 5px;
        font-size: 12px;
    }

    .monthlyRewardPopup {
        padding: 24px 18px 21px;
    }

    .monthlyRewardBigChest {
        font-size: 42px;
    }

    .monthlyRewardPopup h2 {
        font-size: 17px;
    }

    .monthlyRewardPopup p {
        font-size: 11px;
    }
}


/* =========================================================
   TOP 5 MAP CỔ ĐIỂN - RƯƠNG THƯỞNG SAU TÊN
========================================================= */

/* Cả map cổ điển và map tháng đều có 4 cột:
   Hạng | Tên | Rương | Wave */
.homeRankRow.rewardChestRow {
    grid-template-columns: 28px minmax(0, 1fr) 30px 48px !important;
    gap: 5px !important;
}

.rewardChestButton {
    width: 27px;
    height: 27px;
    padding: 0;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 202, 54, .42);
    border-radius: 7px;

    background:
        radial-gradient(circle at 50% 35%, rgba(255,221,89,.18), transparent 68%),
        rgba(255, 169, 22, .07);

    color: #ffd952;
    font-size: 15px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        inset 0 1px rgba(255,255,255,.06),
        0 0 8px rgba(255, 181, 28, .08);

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.rewardChestButton:hover {
    transform: scale(1.08);
    border-color: #ffda55;
    box-shadow:
        0 0 12px rgba(255, 183, 31, .27),
        inset 0 1px rgba(255,255,255,.08);
}

/* Map cổ điển dùng tông xanh nhẹ để phân biệt */
.classicChestButton {
    border-color: rgba(82, 217, 255, .40);
    background:
        radial-gradient(circle at 50% 35%, rgba(100,225,255,.14), transparent 68%),
        rgba(38, 156, 207, .07);
    box-shadow:
        inset 0 1px rgba(255,255,255,.06),
        0 0 8px rgba(65, 207, 255, .07);
}

.classicChestButton:hover {
    border-color: #76e4ff;
    box-shadow:
        0 0 12px rgba(81, 215, 255, .24),
        inset 0 1px rgba(255,255,255,.08);
}

.classicRewardPopup {
    border-color: rgba(92, 217, 255, .42);
    box-shadow:
        0 30px 80px rgba(0,0,0,.62),
        0 0 35px rgba(61,207,255,.10);
}

.classicRewardPopup > span {
    color: #67dfff;
}

.classicRewardPopup h2 {
    color: #7ce7ff;
}

@media (max-width: 700px) and (orientation: portrait) {
    .homeRankRow.rewardChestRow {
        grid-template-columns: 20px minmax(0, 1fr) 22px 38px !important;
        gap: 3px !important;
    }

    .rewardChestButton {
        width: 21px;
        height: 21px;
        border-radius: 5px;
        font-size: 12px;
    }
}


/* =========================================================
   FIX NÚT ĐÓNG POPUP RƯƠNG - DỄ BẤM TRÊN ĐIỆN THOẠI
========================================================= */

/* Vùng bấm thật lớn hơn, dấu X vẫn gọn ở giữa */
.monthlyRewardClose {
    top: 8px !important;
    right: 8px !important;

    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;

    padding: 0 !important;
    margin: 0 !important;

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

    border-radius: 12px !important;

    font-size: 28px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;

    z-index: 5 !important;
}

/* Dấu X nằm đúng tâm nút */
.monthlyRewardClose::before {
    content: "";
    position: absolute;
    inset: -4px;
}

/* Chừa khoảng trên để nút X không đè nội dung popup */
.monthlyRewardPopup {
    padding-top: 38px !important;
}

/* Điện thoại: vùng bấm 52x52 để ngón tay dễ chạm */
@media (max-width: 700px) {
    .monthlyRewardClose {
        top: 6px !important;
        right: 6px !important;

        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;

        font-size: 30px !important;
    }

    .monthlyRewardPopup {
        padding-top: 43px !important;
    }
}


/* =========================================================
   2 BẢNG TOP 5 - NGẮN HƠN VÀ CAO BẰNG NHAU
========================================================= */

/* Hai khung dùng cùng cách bố trí để luôn bằng nhau */
.homeInfoArea .homeRankingBox,
.homeInfoArea .monthlyRankingBox {
    display: flex !important;
    flex-direction: column !important;
    height: 292px !important;
    min-height: 292px !important;
    max-height: 292px !important;
    box-sizing: border-box !important;
}

/* Tiêu đề giữ cùng chiều cao */
.homeInfoArea .homeRankingBox h3 {
    min-height: 24px !important;
    margin-bottom: 5px !important;
}

/* Dòng ngày bên bảng tháng chiếm chỗ cố định.
   Bảng cổ điển được cân bằng bằng khoảng trống tương ứng ở list/header. */
.monthlyRankPeriod {
    height: 15px !important;
    min-height: 15px !important;
    margin: -2px 0 4px !important;
    line-height: 15px !important;
}

/* Header và 5 dòng bóp thấp xuống */
.homeInfoArea .homeRankHeader {
    min-height: 22px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.homeInfoArea .homeRankRow {
    min-height: 30px !important;
    height: 30px !important;
}

/* List không tự kéo dài */
.homeInfoArea .homeRankList {
    flex: 0 0 auto !important;
}

/* Nút Top 100 nằm sát hơn */
.homeInfoArea .homeTop100Button {
    margin-top: 6px !important;
    min-height: 28px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Bảng cổ điển không có dòng ngày:
   thêm khoảng đệm đúng bằng dòng ngày của bảng tháng để mọi hàng ngang nhau */
.homeInfoArea .homeRankingBox:not(.monthlyRankingBox) .homeRankHeader {
    margin-top: 15px !important;
}

/* Mobile dọc: ngắn hơn nữa nhưng 2 bảng vẫn bằng nhau */
@media (max-width: 700px) and (orientation: portrait) {
    .homeInfoArea .homeRankingBox,
    .homeInfoArea .monthlyRankingBox {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .homeInfoArea .homeRankingBox h3 {
        min-height: 22px !important;
        margin-bottom: 3px !important;
    }

    .monthlyRankPeriod {
        height: 12px !important;
        min-height: 12px !important;
        line-height: 12px !important;
        margin: -1px 0 3px !important;
    }

    .homeInfoArea .homeRankingBox:not(.monthlyRankingBox) .homeRankHeader {
        margin-top: 12px !important;
    }

    .homeInfoArea .homeRankHeader {
        min-height: 18px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    .homeInfoArea .homeRankRow {
        min-height: 27px !important;
        height: 27px !important;
    }

    .homeInfoArea .homeTop100Button {
        margin-top: 5px !important;
        min-height: 25px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}


/* =========================================================
   CẢ BẢNG TOP 5 LÀ NÚT XEM TOP 100
========================================================= */
.homeInfoArea .homeRankingBox.clickableRankingBox {
    cursor: pointer !important;
    user-select: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

/* Bỏ khoảng dành cho nút Top 100 cũ, bảng ngắn lại */
.homeInfoArea .homeTop100Button {
    display: none !important;
}

.homeInfoArea .homeRankingBox.clickableRankingBox:hover {
    border-color: rgba(95, 216, 255, .52) !important;
    box-shadow:
        0 0 0 1px rgba(77, 209, 255, .12),
        0 10px 25px rgba(0,0,0,.18) !important;
}

.homeInfoArea .homeRankingBox.clickableRankingBox:active {
    transform: scale(.992);
}

.homeInfoArea .homeRankingBox.clickableRankingBox:focus-visible {
    outline: 2px solid rgba(91, 220, 255, .72);
    outline-offset: 2px;
}

/* Rương là nút riêng nên con trỏ vẫn thể hiện rõ */
.homeInfoArea .rewardChestButton,
.homeInfoArea .monthlyChestButton,
.homeInfoArea .classicChestButton {
    cursor: pointer !important;
}

/* Không còn nút dưới nên giảm chiều cao 2 bảng thêm chút */
.homeInfoArea .homeRankingBox,
.homeInfoArea .monthlyRankingBox {
    height: 258px !important;
    min-height: 258px !important;
    max-height: 258px !important;
}

@media (max-width:700px) and (orientation:portrait) {
    .homeInfoArea .homeRankingBox,
    .homeInfoArea .monthlyRankingBox {
        height: 222px !important;
        min-height: 222px !important;
        max-height: 222px !important;
    }
}


/* =========================================================
   FIX CHIỀU CAO 2 BẢNG TOP 5 - KHÔNG CẮT NGƯỜI THỨ 5
========================================================= */
.homeInfoArea .homeRankingBox,
.homeInfoArea .monthlyRankingBox {
    height: 286px !important;
    min-height: 286px !important;
    max-height: 286px !important;
}

/* Mobile dọc cũng nới thêm để hàng số 5 không lọt ra ngoài */
@media (max-width: 700px) and (orientation: portrait) {
    .homeInfoArea .homeRankingBox,
    .homeInfoArea .monthlyRankingBox {
        height: 246px !important;
        min-height: 246px !important;
        max-height: 246px !important;
    }
}


/* =========================================================
   CANH LẠI TÊN + RƯƠNG + WAVE TRONG 2 BẢNG TOP 5
========================================================= */

/* Canh giữa theo chiều dọc trước */
.homeInfoArea .homeRankRow.rewardChestRow {
    align-items: center !important;
}

/* Kéo tên, rương và wave lên nhẹ để nằm đúng giữa dòng */
.homeInfoArea .homeRankRow.rewardChestRow > span,
.homeInfoArea .homeRankRow.rewardChestRow > strong,
.homeInfoArea .homeRankRow.rewardChestRow > .rewardChestButton,
.homeInfoArea .homeRankRow.rewardChestRow > .monthlyChestButton,
.homeInfoArea .homeRankRow.rewardChestRow > .classicChestButton {
    transform: translateY(-2px) !important;
}

/* Rương không được có margin làm lệch dòng */
.homeInfoArea .rewardChestButton,
.homeInfoArea .monthlyChestButton,
.homeInfoArea .classicChestButton {
    margin: 0 !important;
    align-self: center !important;
    vertical-align: middle !important;
}

/* Mobile kéo nhẹ hơn để khỏi sát mép trên */
@media (max-width: 700px) and (orientation: portrait) {
    .homeInfoArea .homeRankRow.rewardChestRow > span,
    .homeInfoArea .homeRankRow.rewardChestRow > strong,
    .homeInfoArea .homeRankRow.rewardChestRow > .rewardChestButton,
    .homeInfoArea .homeRankRow.rewardChestRow > .monthlyChestButton,
    .homeInfoArea .homeRankRow.rewardChestRow > .classicChestButton {
        transform: translateY(-1px) !important;
    }
}


/* =========================================================
   FIX BẤM NGUYÊN BẢNG TOP 5 -> MỞ TOP 100
========================================================= */
.homeInfoArea .homeRankingBox.clickableRankingBox {
    cursor: pointer !important;
    user-select: none;
}

.homeInfoArea .homeRankingBox.clickableRankingBox:hover {
    border-color: rgba(85, 218, 255, .48) !important;
}

.homeInfoArea .homeRankingBox.clickableRankingBox:focus-visible {
    outline: 2px solid rgba(85, 218, 255, .72);
    outline-offset: 2px;
}

.homeInfoArea .homeTop100Button {
    display: none !important;
}

/* Rương vẫn là nút riêng và ưu tiên thao tác riêng */
.homeInfoArea .rewardChestButton,
.homeInfoArea .monthlyChestButton,
.homeInfoArea .classicChestButton {
    position: relative;
    z-index: 3;
    cursor: pointer !important;
}


/* =========================================================
   TOP 100 - HIỆN RƯƠNG CHO 5 NGƯỜI ĐẦU
========================================================= */
.homeTop100Row.topFiveRewardRow {
    grid-template-columns: 42px minmax(0, 1fr) 38px 70px !important;
    gap: 8px !important;
    align-items: center !important;
}

.top100ChestButton {
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    display: grid;
    place-items: center;
    border-radius: 7px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    position: relative;
    z-index: 5;
}

.homeTop100Row:not(.topFiveRewardRow) {
    grid-template-columns: 42px minmax(0, 1fr) 70px !important;
}

@media (max-width: 700px) {
    .homeTop100Row.topFiveRewardRow {
        grid-template-columns: 30px minmax(0, 1fr) 28px 52px !important;
        gap: 5px !important;
    }

    .homeTop100Row:not(.topFiveRewardRow) {
        grid-template-columns: 30px minmax(0, 1fr) 52px !important;
    }

    .top100ChestButton {
        width: 25px;
        height: 25px;
        font-size: 13px;
        border-radius: 6px;
    }
}


/* =========================================================
   FIX LOGO MỚI TRÊN THANH MENU
   Giữ đúng tỉ lệ ảnh, không làm thanh menu cao lên
========================================================= */

.topLogo {
    height: 55px !important;
    max-width: 190px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.topLogo img {
    width: auto !important;
    height: 50px !important;
    max-width: 185px !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
}

@media (max-width: 700px) {
    .topLogo {
        height: 55px !important;
        max-width: 158px !important;
        flex: 0 1 158px !important;
    }

    .topLogo img {
        width: auto !important;
        height: 45px !important;
        max-width: 158px !important;
        object-fit: contain !important;
        transform: none !important;
    }
}

@media (max-width: 390px) {
    .topLogo {
        max-width: 138px !important;
        flex-basis: 138px !important;
    }

    .topLogo img {
        height: 42px !important;
        max-width: 138px !important;
    }
}


/* =========================================================
   BÀI VIẾT TRÊN TRANG CHỦ
========================================================= */
.articlesSection {
    max-width: 1180px;
    margin: 28px auto 56px;
    padding: 34px;
    border: 1px solid rgba(66, 199, 255, .24);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(10, 25, 40, .96), rgba(7, 13, 24, .98));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.articlesHeader { margin-bottom: 24px; }
.articlesHeader > span {
    display: block;
    margin-bottom: 7px;
    color: #ffbf18;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
}
.articlesHeader h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(26px, 3vw, 38px);
}
.articlesHeader p {
    max-width: 760px;
    margin: 0;
    color: #aebed0;
    line-height: 1.7;
}

.articlesGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.articleCard {
    overflow: hidden;
    border: 1px solid rgba(255, 191, 24, .22);
    border-radius: 18px;
    background: rgba(17, 30, 46, .9);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.articleCard:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 191, 24, .6);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}
.articleImage {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #080d14;
}
.articleImage img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.articleBody { padding: 20px; }
.articleTag {
    color: #55d7ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.3px;
}
.articleBody h3 { margin: 9px 0 10px; line-height: 1.35; }
.articleBody h3 a { color: #fff; text-decoration: none; }
.articleBody h3 a:hover { color: #ffca37; }
.articleBody p { margin: 0 0 16px; color: #aebed0; line-height: 1.65; }
.articleReadMore {
    color: #ffca37;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 900px) {
    .articlesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .articlesSection { margin: 18px 12px 38px; padding: 22px 16px; }
    .articlesGrid { grid-template-columns: 1fr; }
    .articleBody { padding: 17px; }
}


/* Nút xem toàn bộ bài viết */
.articlesAllWrap {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
.articlesAllBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid rgba(255, 202, 55, .5);
    border-radius: 12px;
    color: #ffca37;
    background: rgba(255, 202, 55, .07);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.articlesAllBtn:hover {
    transform: translateY(-2px);
    background: rgba(255, 202, 55, .13);
    border-color: rgba(255, 202, 55, .85);
}

/* Tiền thưởng Top 5 Map Tháng */
.monthlyCashRewards {
    width: min(320px, 100%);
    margin: 14px auto 0;
    display: grid;
    gap: 6px;
}

.monthlyCashRewards > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 11px;
    border: 1px solid rgba(255, 217, 89, .16);
    border-radius: 8px;
    background: rgba(255, 217, 89, .055);
}

.monthlyCashRewards strong {
    color: #d7dee5;
    font-size: 11px;
    font-weight: 800;
}

.monthlyCashRewards b {
    color: #ffd959;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 700px) {
    .monthlyCashRewards {
        margin-top: 11px;
        gap: 5px;
    }

    .monthlyCashRewards > div {
        padding: 6px 10px;
    }
}



/* ===== LỊCH SỬ 5 LẦN CHỐT TOP 5 MAP THÁNG ===== */
.homeRankingHeaderActions{display:flex;align-items:center;gap:9px}
.monthlyHistoryButton{
    min-height:36px;padding:0 12px;border:1px solid rgba(255,204,66,.52);
    border-radius:9px;background:linear-gradient(135deg,rgba(156,102,0,.92),rgba(82,50,0,.96));
    color:#ffe07a;font:900 11px/1 "Be Vietnam Pro",Arial,sans-serif;letter-spacing:.35px;cursor:pointer;
}
.monthlyHistoryButton:hover{filter:brightness(1.14)}
.monthlyHistoryButton[hidden]{display:none!important}
body.monthlyHistoryOpen{overflow:hidden}
.monthlyHistoryModal{
    position:fixed;inset:0;z-index:27000;display:none;align-items:center;justify-content:center;
    padding:18px;font-family:"Be Vietnam Pro",Arial,sans-serif
}
.monthlyHistoryModal.open{display:flex}
.monthlyHistoryBackdrop{position:absolute;inset:0;background:rgba(0,4,9,.91);backdrop-filter:blur(7px)}
.monthlyHistoryPopup{
    position:relative;z-index:1;width:min(720px,95vw);max-height:min(860px,92vh);
    display:flex;flex-direction:column;overflow:hidden;color:#fff;
    background:linear-gradient(180deg,rgba(20,26,38,.995),rgba(5,9,15,.998));
    border:1px solid rgba(255,205,64,.5);border-radius:18px;box-shadow:0 34px 90px rgba(0,0,0,.7)
}
.monthlyHistoryHeader{
    display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px 14px;
    border-bottom:1px solid rgba(255,255,255,.1)
}
.monthlyHistoryHeader span{display:block;color:#8898aa;font-size:10px;font-weight:900;letter-spacing:1.3px}
.monthlyHistoryHeader h2{margin:4px 0 0;color:#ffe06a;font-size:19px}
.monthlyHistoryClose{
    width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:10px;
    background:rgba(255,255,255,.06);color:#fff;font-size:25px;cursor:pointer
}
.monthlyHistoryList{padding:14px;overflow:auto}
.monthlyHistoryGroup{
    margin-bottom:14px;overflow:hidden;border:1px solid rgba(255,255,255,.11);
    border-radius:12px;background:rgba(255,255,255,.025)
}
.monthlyHistoryGroup:last-child{margin-bottom:0}
.monthlyHistoryGroupHead{
    display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;
    background:linear-gradient(90deg,rgba(255,188,33,.11),rgba(255,255,255,.015));
    border-bottom:1px solid rgba(255,255,255,.08)
}
.monthlyHistoryGroupHead strong{color:#ffd759;font-size:12px}
.monthlyHistoryGroupHead time{color:#9eb0c2;font-size:11px;font-weight:700}
.monthlyHistoryColumns,.monthlyHistoryRow{
    display:grid;grid-template-columns:54px minmax(0,1fr) 72px 96px;align-items:center;gap:8px
}
.monthlyHistoryColumns{padding:8px 12px;color:#6f8296;font-size:9px;font-weight:900;letter-spacing:.45px}
.monthlyHistoryColumns i{font-style:normal;text-align:center}
.monthlyHistoryColumns strong{text-align:right}
.monthlyHistoryRow{
    min-height:42px;padding:6px 12px;border-top:1px solid rgba(255,255,255,.055);font-size:12px
}
.monthlyHistoryRow>b{color:#93a6b8}
.monthlyHistoryRow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.monthlyHistoryRow i{font-style:normal;text-align:center;color:#d9e5ef;font-weight:900}
.monthlyHistoryRow strong{text-align:right;color:#8df1ae;font-size:11px}
.monthlyHistoryRow.historyTop1{background:rgba(255,198,31,.07)}
.monthlyHistoryRow.historyTop1>b{color:#ffd93f}
.monthlyHistoryRow.historyTop2>b{color:#dce8f3}
.monthlyHistoryRow.historyTop3>b{color:#efb176}
@media(max-width:560px){
    .homeRankingHeaderActions{gap:6px}
    .monthlyHistoryButton{min-height:34px;padding:0 9px;font-size:10px}
    .monthlyHistoryModal{padding:10px}
    .monthlyHistoryHeader{padding:15px 14px 12px}
    .monthlyHistoryHeader h2{font-size:16px}
    .monthlyHistoryList{padding:9px}
    .monthlyHistoryColumns,.monthlyHistoryRow{grid-template-columns:43px minmax(0,1fr) 55px 82px;gap:5px}
    .monthlyHistoryColumns{padding:7px 9px;font-size:8px}
    .monthlyHistoryRow{padding:6px 9px;font-size:11px}
    .monthlyHistoryRow strong{font-size:10px}
    .monthlyHistoryGroupHead{align-items:flex-start;flex-direction:column;gap:3px}
}


/* ===== SKIN THÁP ĐỘC VIP - DÙNG THỬ MIỄN PHÍ ===== */
.featuredPoisonSkin {
    border-color: rgba(113, 255, 55, .38);
    box-shadow: 0 0 28px rgba(85, 255, 37, .09), inset 0 1px rgba(255,255,255,.06);
}
.poisonPreviewStage {
    background: radial-gradient(circle, rgba(98, 255, 40, .14), transparent 62%), rgba(0,0,0,.20);
}
.poisonPreviewImage {
    width: 72px; height: 72px; object-fit: contain;
    filter: drop-shadow(0 0 13px rgba(108,255,45,.46));
}
.miniDefaultPoison {
    width: 30px; height: 30px; border-radius: 5px;
    background: #20b94b; box-shadow: 0 0 10px rgba(28,211,75,.34);
}
.miniPoisonImage {
    width: 34px; height: 34px; object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(108,255,45,.38));
}
.poisonSkinChoice:hover:not(:disabled) {
    border-color: #7dff43;
    background: rgba(83, 255, 40, .075);
}

/* ===== CỔNG CHÀO NGƯỜI CHƠI MỚI ===== */
.newPlayerGate{
    position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;
    padding:18px;font-family:"Be Vietnam Pro",sans-serif
}
.newPlayerGate.show{display:flex}
.newPlayerGateBackdrop{
    position:absolute;inset:0;background:rgba(2,6,13,.88);backdrop-filter:blur(8px)
}
.newPlayerGateCard{
    position:relative;width:min(500px,100%);overflow:hidden;text-align:center;
    border:1px solid rgba(255,214,68,.28);border-radius:22px;padding:28px 28px 25px;
    background:radial-gradient(circle at 50% -20%,rgba(255,193,31,.18),transparent 46%),#0b1019;
    box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 50px rgba(255,188,35,.07)
}
.newPlayerGateLogo img{width:108px;max-height:50px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,199,43,.18))}
.newPlayerGateEyebrow{display:block;margin-top:8px;color:#ffc928;font-size:10px;font-weight:900;letter-spacing:1.6px}
.newPlayerGateCard h2{margin:8px 0 9px;color:#fff;font-size:25px;line-height:1.15;font-weight:900}
.newPlayerGateIntro{max-width:405px;margin:0 auto 18px;color:#aebbd0;font-size:13px;line-height:1.7}
.newPlayerGateIntro strong{color:#8ef3aa}
.newPlayerGoogleBox{
    display:flex;flex-direction:column;align-items:center;gap:11px;padding:17px;border:1px solid rgba(93,156,255,.2);
    border-radius:15px;background:rgba(47,104,202,.07)
}
.newPlayerBenefit{color:#d8e7ff;font-size:12px;font-weight:800}
.newPlayerDivider{display:flex;align-items:center;gap:12px;margin:17px 0;color:#68778a;font-size:10px;font-weight:900}
.newPlayerDivider:before,.newPlayerDivider:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.1)}
.newPlayerGuestForm label{display:block;margin-bottom:9px;color:#edf3fb;font-size:12px;font-weight:800;text-align:left}
.newPlayerNameRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
.newPlayerNameRow input{
    min-width:0;height:46px;border:1px solid rgba(255,255,255,.13);border-radius:11px;padding:0 13px;
    background:#080d15;color:#fff;outline:none;font:700 13px "Be Vietnam Pro",sans-serif
}
.newPlayerNameRow input:focus{border-color:#ffc72c;box-shadow:0 0 0 3px rgba(255,199,44,.08)}
.newPlayerNameRow button{
    height:46px;border:0;border-radius:11px;padding:0 16px;cursor:pointer;background:linear-gradient(180deg,#ffd747,#e9a813);
    color:#1d1603;font:900 12px "Be Vietnam Pro",sans-serif;white-space:nowrap;box-shadow:0 8px 24px rgba(238,174,20,.17)
}
.newPlayerGuestForm small{display:block;margin-top:8px;color:#6f7e91;font-size:9px;text-align:left;line-height:1.5}
.newPlayerGateError{min-height:16px;margin:7px 0 0;color:#ff7d84;font-size:10px;font-weight:800;text-align:left}
body.newPlayerGateOpen{overflow:hidden}
@media(max-width:560px){
    .newPlayerGate{padding:12px}
    .newPlayerGateCard{padding:23px 16px 20px;border-radius:18px}
    .newPlayerGateCard h2{font-size:21px}
    .newPlayerGateIntro{font-size:12px}
    .newPlayerNameRow{grid-template-columns:1fr}
    .newPlayerNameRow button{width:100%}
}

/* =========================================================
   TOP 5 MAP CỔ ĐIỂN - THẺ SKIN ĐẶC QUYỀN
========================================================= */
.classicTop5Only[hidden]{display:none!important}
.skinVaultTabs .classicTop5Only{white-space:nowrap}
.classicTop5RewardHead{
    margin-bottom:16px;padding:16px 18px;border:1px solid rgba(255,215,0,.28);
    border-radius:14px;background:linear-gradient(135deg,rgba(255,208,56,.10),rgba(255,255,255,.025));
}
.classicTop5RewardHead>span{display:block;color:#ffd85b;font-size:12px;font-weight:900;letter-spacing:.08em}
.classicTop5RewardHead h3{margin:5px 0 3px;color:#fff;font-size:24px}
.classicTop5RewardHead p{margin:0 0 5px;color:#8de7ff;font-weight:900}
.classicTop5RewardHead small{color:#9fb0c1;line-height:1.5}
.classicTop5RewardGrid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:16px}
.classicTop5RewardCard{border-color:rgba(255,214,71,.38)!important;box-shadow:0 0 0 1px rgba(255,210,62,.06),0 12px 30px rgba(0,0,0,.20)}
.classicTop5Pick{width:100%}
@media(max-width:700px){
    .skinVaultTabs{overflow-x:auto;scrollbar-width:none}
    .skinVaultTabs::-webkit-scrollbar{display:none}
    .skinVaultTabs .skinTab{flex:0 0 auto;min-width:max-content!important;padding-left:14px;padding-right:14px}
    .classicTop5RewardGrid{grid-template-columns:1fr}
    .classicTop5RewardHead h3{font-size:20px}
}