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


:root {

    --navy: #02243e;
    --navy-dark: #011827;

    --blue: #006ec5;
    --blue-2: #0798e8;
    --cyan: #39c9ff;

    --white: #f3f6f7;
    --white-soft: #e5ecef;

    --text: #061b2a;
    --muted: #6f8594;

    --border: #b8cfda;
}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "Inter",
        Arial,
        sans-serif;

    color:
        var(--text);

    background:
        var(--white);

    overflow-x:
        hidden;

}


button,
input {

    font-family:
        inherit;

}


button {

    cursor:
        pointer;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


img {

    display:
        block;

}


/* =====================================================
   HEADER
===================================================== */

.header {

    height:
        66px;

    padding:
        0 4%;

    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    z-index:
        1000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    background:
        rgba(1, 27, 47, .82);

    backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid
        rgba(255,255,255,.1);

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.header-logo {

    width:
        82px;

    max-height:
        38px;

    object-fit:
        contain;

}


.brand strong {

    color:
        white;

    font-size:
        13px;

    letter-spacing:
        4px;

}


.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.wallet-top {

    min-height:
        40px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius:
        50px;

    color:
        white;

    background:
        rgba(255,255,255,.08);

}


.wallet-top span {

    display:
        block;

    color:
        #8ebbd3;

    font-size:
        6px;

}


.wallet-top b {

    display:
        block;

    margin-top:
        1px;

    font-size:
        10px;

}


.account-top {

    min-height:
        40px;

    padding:
        0 15px;

    border:
        0;

    border-radius:
        50px;

    color:
        white;

    background:
        var(--blue-2);

    font-size:
        8px;

    font-weight:
        800;

}


/* =====================================================
   HERO
===================================================== */

.hero {

    min-height:
        100svh;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        105px 20px
        85px;

}


/* =====================================================
   OCEAN
===================================================== */

.ocean {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    background:

        radial-gradient(
            ellipse at 50% -10%,
            #78d6ff 0%,
            #249edc 20%,
            #0871b6 45%,
            #04518a 67%,
            #022f51 100%
        );

}


.ocean::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(0,28,53,.18),
            transparent 25%,
            transparent 75%,
            rgba(0,28,53,.18)
        ),

        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0,17,33,.24)
        );

}


.ocean-top-light {

    position:
        absolute;

    width:
        min(850px,130vw);

    height:
        320px;

    top:
        -180px;

    left:
        50%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(224,248,255,.55);

    filter:
        blur(65px);

}


/* WATER */

.water-line {

    position:
        absolute;

    top:
        -15px;

    left:
        -10%;

    width:
        120%;

    height:
        100px;

    background:

        repeating-radial-gradient(
            ellipse at 50% 0%,
            transparent 0 13px,
            rgba(255,255,255,.32) 14px 16px,
            transparent 17px 30px
        );

    opacity:
        .25;

    transform:
        perspective(500px)
        rotateX(67deg);

}


.water-line-1 {

    animation:
        waterOne
        9s linear infinite;

}


.water-line-2 {

    opacity:
        .14;

    top:
        12px;

    animation:
        waterTwo
        12s linear infinite;

}


@keyframes waterOne {

    to {

        transform:
            perspective(500px)
            rotateX(67deg)
            translateX(80px);

    }

}


@keyframes waterTwo {

    to {

        transform:
            perspective(500px)
            rotateX(67deg)
            translateX(-90px);

    }

}


/* RAYS */

.ray {

    position:
        absolute;

    top:
        -130px;

    width:
        140px;

    height:
        760px;

    opacity:
        .07;

    background:

        linear-gradient(
            to bottom,
            rgba(255,255,255,.9),
            rgba(170,230,255,.18) 50%,
            transparent
        );

    transform-origin:
        top center;

}


.ray-1 {

    left:
        15%;

    transform:
        rotate(11deg);

    animation:
        rayOne
        11s ease-in-out
        infinite alternate;

}


.ray-2 {

    left:
        46%;

    width:
        190px;

    transform:
        rotate(-3deg);

    animation:
        rayTwo
        14s ease-in-out
        infinite alternate;

}


.ray-3 {

    right:
        14%;

    transform:
        rotate(-12deg);

    animation:
        rayThree
        12s ease-in-out
        infinite alternate;

}


@keyframes rayOne {

    to {

        transform:
            rotate(16deg)
            translateX(25px);

    }

}


@keyframes rayTwo {

    to {

        transform:
            rotate(2deg)
            translateX(-25px);

    }

}


@keyframes rayThree {

    to {

        transform:
            rotate(-17deg)
            translateX(-20px);

    }

}


/* LOGO FOCUS */

.hero-focus {

    position:
        absolute;

    left:
        50%;

    top:
        48%;

    width:
        min(680px,95vw);

    height:
        430px;

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

    border-radius:
        50%;

    background:

        radial-gradient(
            ellipse at center,
            rgba(108,216,255,.28),
            rgba(0,95,160,.08) 47%,
            transparent 73%
        );

}


/* =====================================================
   FISH
===================================================== */

.fish {

    position:
        absolute;

    width:
        65px;

    height:
        20px;

    opacity:
        .12;

    background:
        #001c33;

    border-radius:
        70% 35% 35% 70%;

}


.fish::after {

    content:
        "";

    position:
        absolute;

    right:
        -18px;

    top:
        -8px;

    border-top:
        18px solid transparent;

    border-bottom:
        18px solid transparent;

    border-left:
        22px solid #001c33;

}


.fish-1 {

    left:
        -100px;

    top:
        27%;

    animation:
        fishRight
        20s linear infinite;

}


.fish-2 {

    right:
        -120px;

    top:
        22%;

    transform:
        scale(.7)
        rotateY(180deg);

    animation:
        fishLeft
        24s linear infinite;

}


.fish-3 {

    left:
        -100px;

    bottom:
        24%;

    transform:
        scale(.45);

    animation:
        fishRightSmall
        28s linear infinite;

}


.fish-4 {

    right:
        -100px;

    bottom:
        31%;

    transform:
        scale(.35)
        rotateY(180deg);

    animation:
        fishLeftSmall
        25s linear infinite;

}


@keyframes fishRight {

    to {

        transform:
            translateX(
                calc(100vw + 250px)
            );

    }

}


@keyframes fishLeft {

    to {

        transform:
            scale(.7)
            rotateY(180deg)
            translateX(
                calc(100vw + 260px)
            );

    }

}


@keyframes fishRightSmall {

    to {

        transform:
            scale(.45)
            translateX(
                calc(100vw + 250px)
            );

    }

}


@keyframes fishLeftSmall {

    to {

        transform:
            scale(.35)
            rotateY(180deg)
            translateX(
                calc(100vw + 250px)
            );

    }

}


/* =====================================================
   BUBBLES
===================================================== */

.bubble {

    position:
        absolute;

    bottom:
        -50px;

    border:
        1px solid
        rgba(235,250,255,.4);

    border-radius:
        50%;

    background:

        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.23),
            transparent 50%
        );

    animation:
        bubbleUp linear infinite;

}


.b1 {

    width: 10px;
    height: 10px;

    left: 6%;

    animation-duration: 9s;

}


.b2 {

    width: 25px;
    height: 25px;

    left: 18%;

    animation-duration: 13s;
    animation-delay: 1s;

}


.b3 {

    width: 14px;
    height: 14px;

    left: 35%;

    animation-duration: 11s;
    animation-delay: 4s;

}


.b4 {

    width: 36px;
    height: 36px;

    left: 55%;

    animation-duration: 16s;
    animation-delay: 2s;

}


.b5 {

    width: 13px;
    height: 13px;

    right: 28%;

    animation-duration: 10s;

}


.b6 {

    width: 45px;
    height: 45px;

    right: 8%;

    animation-duration: 18s;
    animation-delay: 4s;

}


.b7 {

    width: 18px;
    height: 18px;

    right: 18%;

    animation-duration: 12s;
    animation-delay: 7s;

}


.b8 {

    width: 28px;
    height: 28px;

    left: 73%;

    animation-duration: 14s;
    animation-delay: 6s;

}


@keyframes bubbleUp {

    0% {

        transform:
            translateY(0)
            translateX(0);

        opacity:
            0;

    }

    10% {

        opacity:
            1;

    }

    50% {

        transform:
            translateY(-55vh)
            translateX(12px);

    }

    100% {

        transform:
            translateY(-115vh)
            translateX(-10px);

        opacity:
            0;

    }

}


/* =====================================================
   FLOOR
===================================================== */

.sea-floor {

    position:
        absolute;

    bottom:
        -15px;

    left:
        -5%;

    width:
        110%;

    background:
        #011d32;

}


.floor-back {

    height:
        135px;

    opacity:
        .45;

    clip-path:

        polygon(
            0 70%,
            10% 48%,
            20% 67%,
            31% 44%,
            43% 62%,
            55% 38%,
            68% 60%,
            80% 45%,
            91% 62%,
            100% 48%,
            100% 100%,
            0 100%
        );

}


.floor-front {

    height:
        90px;

    opacity:
        .9;

    clip-path:

        polygon(
            0 58%,
            13% 42%,
            25% 63%,
            38% 50%,
            49% 70%,
            63% 45%,
            75% 65%,
            87% 43%,
            100% 61%,
            100% 100%,
            0 100%
        );

}


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

.hero-content {

    width:
        100%;

    max-width:
        790px;

    position:
        relative;

    z-index:
        10;

    text-align:
        center;

}


.hero-kicker {

    color:
        #e1f7ff;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        6px;

}


.hero-brand {

    margin-top:
        28px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}


.hero-logo {

    width:
        min(520px,88vw);

    height:
        auto;

    object-fit:
        contain;

    filter:

        drop-shadow(
            0 8px 18px
            rgba(0,26,48,.22)
        )

        drop-shadow(
            0 0 10px
            rgba(135,220,255,.18)
        );

}


.hero-box {

    margin-top:
        -5px;

    color:
        white;

    font-size:
        clamp(
            72px,
            11vw,
            130px
        );

    line-height:
        .8;

    font-weight:
        900;

    letter-spacing:
        -7px;

    text-shadow:
        0 8px 20px
        rgba(0,25,45,.28);

}


.hero-desc {

    max-width:
        520px;

    margin:
        35px auto 0;

    color:
        #e1f0f7;

    font-size:
        13px;

    line-height:
        1.7;

}


.hero-button {

    margin-top:
        28px;

    padding:
        15px 24px;

    border:
        1px solid
        rgba(255,255,255,.65);

    border-radius:
        50px;

    color:
        white;

    background:

        linear-gradient(
            135deg,
            #057acb,
            #16b9fa
        );

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2px;

    box-shadow:
        0 10px 30px
        rgba(0,79,140,.32);

    transition:
        .2s;

}


.hero-button:hover {

    transform:
        translateY(-3px);

}


.hero-button:active {

    transform:
        scale(.95);

}


.hero-button span {

    margin-left:
        10px;

}


/* SCROLL */

.scroll-down {
    position: absolute;

    left: 50%;
    bottom: 20px;

    top: auto;

    z-index: 30;

    transform: translateX(-50%);

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

    margin: 0;

    color: white;

    pointer-events: none;
}


.scroll-down span {

    display:
        block;

    width:
        19px;

    height:
        29px;

    margin:
        auto;

    border:
        1px solid
        rgba(255,255,255,.7);

    border-radius:
        20px;

}


.scroll-down b {

    display:
        block;

    margin-top:
        5px;

    animation:
        arrowMove
        1.3s ease-in-out infinite;

}


@keyframes arrowMove {

    50% {

        transform:
            translateY(5px);

    }

}


/* =====================================================
   GENERAL
===================================================== */

.section-container {

    width:
        min(1160px,92%);

    margin:
        auto;

}


.section-title span {

    color:
        var(--blue);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        3px;

}


.section-title h2 {

    margin-top:
        8px;

    color:
        var(--navy);

    font-size:
        clamp(36px,5vw,54px);

    letter-spacing:
        -3px;

}


.section-title p {

    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        10px;

}


/* =====================================================
   BOX SECTION
===================================================== */

.box-section {

    padding:
        75px 0
        90px;

    background:
        var(--white);

}


/* =====================================================
   PRODUCTS
===================================================== */

.products {

    margin-top:
        30px;

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        22px;

}


.product-card {

    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        26px;

    background:
        #edf2f4;

    transition:
        transform .25s,
        box-shadow .25s;

}


.product-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 25px 60px
        rgba(0,71,120,.12);

}


.product-head {

    padding:
        20px 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        #7393a5;

    font-size:
        7px;

    letter-spacing:
        3px;

}


.product-image-area {

    height:
        330px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:

        linear-gradient(
            145deg,
            #d8e9f0,
            #b6dae9
        );

}


.vip-area {

    background:

        linear-gradient(
            145deg,
            #d6eaf2,
            #8bcfea
        );

}


.image-ring {

    position:
        absolute;

    width:
        255px;

    height:
        255px;

    border:
        1px solid
        rgba(0,110,190,.18);

    border-radius:
        50%;

}


/* GAME IMAGE */

.game-image-card {
    width: calc(100% - 48px);
    max-width: 320px;
    aspect-ratio: 16 / 10;

    /* CĂN GIỮA */
    margin: 22px auto 0;

    position: relative;
    overflow: hidden;

    border-radius: 22px;
    background: #082f4d;

    box-shadow: 0 18px 40px rgba(0, 55, 95, .15);
}


.product-card:hover
.game-image-card {

    transform:
        scale(1.035);

}


.game-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.image-gradient {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,19,35,.85)
        );

}


.image-badge {

    position:
        absolute;

    left:
        18px;

    right:
        18px;

    bottom:
        16px;

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

}


.image-badge small {

    color:
        #c9e9f8;

    font-size:
        6px;

    letter-spacing:
        2px;

}


.image-badge strong {

    color:
        white;

    font-size:
        26px;

    font-weight:
        900;

}


.vip-game-card {

    border:
        1px solid
        rgba(77,200,255,.7);

}


/* PRODUCT INFO */

.product-content {

    padding:
        24px;

}


.product-content > small {

    color:
        #7391a2;

    font-size:
        7px;

    letter-spacing:
        2px;

}


.product-content h3 {

    margin-top:
        8px;

    color:
        var(--navy);

    font-size:
        26px;

}


.product-content h3 span {

    color:
        var(--blue);

}


.product-content p {

    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.6;

}


.product-bottom {

    margin-top:
        22px;

    padding-top:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-top:
        1px solid
        #bed2dc;

}


.product-bottom > strong {

    color:
        var(--navy);

    font-size:
        19px;

}


.open-box-btn {

    padding:
        12px 17px;

    border:
        0;

    border-radius:
        50px;

    color:
        white;

    background:
        var(--blue);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2px;

    transition:
        transform .15s,
        background .15s;

}


.open-box-btn span {

    margin-left:
        7px;

}


.open-box-btn:hover {

    background:
        var(--blue-2);

}


.open-box-btn:active {

    transform:
        scale(.92);

}


/* =====================================================
   ACCOUNT
===================================================== */

.account-section {

    padding:
        75px 0
        90px;

    background:

        linear-gradient(
            135deg,
            var(--navy),
            var(--blue)
        );

}


.section-title-light span {

    color:
        #6dd4ff;

}


.section-title-light h2 {

    color:
        white;

}


.account-grid {

    margin-top:
        30px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        22px;

}


.wallet-card,
.profile-card {

    min-height:
        230px;

    padding:
        28px;

    border:
        1px solid
        rgba(255,255,255,.23);

    border-radius:
        24px;

    background:
        rgba(255,255,255,.08);

}


.account-label {

    display:
        block;

    margin-bottom:
        25px;

    color:
        #71d2ff;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        3px;

}


.wallet-card small,
.profile-card small {

    color:
        #bad8e8;

    font-size:
        7px;

    letter-spacing:
        3px;

}


.wallet-card > strong {
    display: block;
    margin-top: 12px;

    color: white;

    font-size: 40px;
    font-weight: 800;

    font-variant-numeric: tabular-nums;

    letter-spacing: -1.5px;

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

.white-btn {

    margin-top:
        25px;

    padding:
        13px 20px;

    border:
        0;

    border-radius:
        50px;

    color:
        var(--blue);

    background:
        white;

    font-size:
        8px;

    font-weight:
        800;

}


.profile-logo {

    width:
        115px;

    height:
        65px;

    margin-bottom:
        14px;

    display:
        flex;

    align-items:
        center;

}


.profile-logo img {

    width:
        100%;

    max-height:
        65px;

    object-fit:
        contain;

}


.profile-card h3 {

    margin-top:
        8px;

    color:
        white;

    font-size:
        24px;

}


.profile-card p {

    margin-top:
        8px;

    color:
        #c4dae6;

    font-size:
        10px;

}


.outline-btn {

    margin-top:
        20px;

    padding:
        12px 18px;

    border:
        1px solid
        rgba(255,255,255,.55);

    border-radius:
        50px;

    color:
        white;

    background:
        transparent;

    font-size:
        8px;

    font-weight:
        800;

}


/* =====================================================
   HISTORY
===================================================== */

.history-section {

    padding:
        75px 0
        90px;

    background:
        var(--white);

}


.history-list {

    margin-top:
        28px;

    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        22px;

    background:
        #edf2f4;

}


.empty-history {

    padding:
        60px 20px;

    text-align:
        center;

}


.empty-history div {

    color:
        var(--blue);

    font-size:
        30px;

}


.empty-history strong {

    display:
        block;

    margin-top:
        13px;

    color:
        var(--navy);

    font-size:
        9px;

    letter-spacing:
        3px;

}


.empty-history p {

    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        9px;

}


.history-item {

    padding:
        18px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-bottom:
        1px solid
        #bfd2db;

}


.history-item:last-child {

    border-bottom:
        0;

}


.history-name {

    color:
        var(--navy);

    font-size:
        11px;

    font-weight:
        700;

}


.history-time {

    margin-top:
        5px;

    color:
        #78909f;

    font-size:
        8px;

}


.history-reward {

    margin-top:
        4px;

    color:
        var(--blue);

    font-size:
        8px;

}


.history-price {

    color:
        var(--blue);

    font-size:
        11px;

    font-weight:
        800;

    white-space:
        nowrap;

}


/* =====================================================
   FOOTER
===================================================== */

footer {

    min-height:
        110px;

    padding:
        25px 5%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    background:
        var(--navy-dark);

    color:
        white;

}


.footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.footer-brand img {

    width:
        85px;

    max-height:
        45px;

    object-fit:
        contain;

}


.footer-brand strong {

    letter-spacing:
        3px;

}


footer > span {

    color:
        #82a8bd;

    font-size:
        8px;

}


/* =====================================================
   MODAL
===================================================== */

.modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        5000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(1,18,31,.75);

    backdrop-filter:
        blur(10px);

}


.modal.active {

    display:
        flex;

}


.modal-card {

    width:
        min(410px,100%);

    padding:
        28px;

    position:
        relative;

    border:
        1px solid
        #a0c2d2;

    border-radius:
        22px;

    background:
        #edf3f5;

    animation:
        modalIn .25s ease;

}


@keyframes modalIn {

    from {

        opacity:
            0;

        transform:
            translateY(15px)
            scale(.95);

    }

}


.modal-close {

    position:
        absolute;

    top:
        9px;

    right:
        15px;

    border:
        0;

    color:
        #6f8795;

    background:
        transparent;

    font-size:
        27px;

}


.modal-label {

    color:
        var(--blue);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        3px;

}


.modal-card h2 {

    margin-top:
        10px;

    color:
        var(--navy);

    font-size:
        27px;

}


.modal-card p {

    margin:
        12px 0
        16px;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.6;

}


.modal-card input {

    width:
        100%;

    height:
        47px;

    margin-top:
        9px;

    padding:
        0 12px;

    border:
        1px solid
        #b0cad6;

    border-radius:
        11px;

    color:
        var(--navy);

    background:
        white;

    outline:
        none;

}


.modal-card input:focus {

    border-color:
        var(--blue);

}


.modal-action {

    width:
        100%;

    height:
        47px;

    margin-top:
        12px;

    border:
        0;

    border-radius:
        50px;

    color:
        white;

    background:
        var(--blue);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


/* =====================================================
   OPENING SCREEN
===================================================== */

.opening-screen {

    position:
        fixed;

    inset:
        0;

    z-index:
        6000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 50% 40%,
            #0869a7,
            #022b4b 58%,
            #010f1b
        );

}


.opening-screen.active {

    display:
        flex;

}


.opening-background span {

    position:
        absolute;

    border:
        1px solid
        rgba(95,208,255,.18);

    border-radius:
        50%;

}


.opening-background span:nth-child(1) {

    width:
        400px;

    height:
        400px;

    left:
        calc(50% - 200px);

    top:
        calc(50% - 200px);

}


.opening-background span:nth-child(2) {

    width:
        550px;

    height:
        550px;

    left:
        calc(50% - 275px);

    top:
        calc(50% - 275px);

}


.opening-background span:nth-child(3) {

    width:
        700px;

    height:
        700px;

    left:
        calc(50% - 350px);

    top:
        calc(50% - 350px);

}


.opening-content {

    width:
        90%;

    position:
        relative;

    z-index:
        5;

    text-align:
        center;

}


.opening-logo {

    width:
        180px;

    max-height:
        90px;

    margin:
        0 auto 24px;

    object-fit:
        contain;

    animation:
        sharkOpening
        1s ease-in-out
        infinite alternate;

}


@keyframes sharkOpening {

    from {

        transform:
            translateX(-22px);

    }

    to {

        transform:
            translateX(22px);

    }

}


.opening-card {

    width:
        180px;

    height:
        220px;

    margin:
        auto;

    overflow:
        hidden;

    border:
        2px solid
        rgba(126,220,255,.65);

    border-radius:
        24px;

    box-shadow:
        0 0 60px
        rgba(36,182,255,.28);

    animation:
        openingCardPulse
        .6s ease-in-out
        infinite alternate;

}


@keyframes openingCardPulse {

    from {

        transform:
            scale(.96);

    }

    to {

        transform:
            scale(1.04);

    }

}


.opening-card img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.opening-content h3 {

    margin-top:
        30px;

    color:
        white;

    font-size:
        9px;

    letter-spacing:
        3px;

}


.progress {

    width:
        240px;

    height:
        4px;

    margin:
        18px auto 0;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        rgba(255,255,255,.13);

}


.progress span {

    display:
        block;

    width:
        0;

    height:
        100%;

    background:

        linear-gradient(
            90deg,
            var(--blue-2),
            var(--cyan)
        );

}


.opening-content > small {

    display:
        block;

    margin-top:
        8px;

    color:
        #a1cadd;

    font-size:
        8px;

}


/* =====================================================
   TOAST
===================================================== */

#toast {

    position:
        fixed;

    right:
        15px;

    bottom:
        15px;

    z-index:
        9000;

    padding:
        12px 15px;

    border-radius:
        50px;

    color:
        white;

    background:
        var(--navy);

    font-size:
        9px;

    opacity:
        0;

    transform:
        translateY(80px);

    transition:
        .25s;

}


#toast.show {

    opacity:
        1;

    transform:
        none;

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:720px) {

    .header {

        height:
            60px;

        padding:
            0 10px;

    }


    .header-logo {

        width:
            62px;

        max-height:
            29px;

    }


    .brand strong {

        font-size:
            10px;

    }


    .wallet-top {

        padding:
            0 9px;

    }


    .wallet-top span {

        display:
            none;

    }


    .account-top {

        padding:
            0 10px;

        font-size:
            7px;

    }


    .hero {

        min-height:
            100svh;

        padding:
            95px 14px
            78px;

    }


    .hero-kicker {

        font-size:
            7px;

        letter-spacing:
            4px;

    }


    .hero-brand {

        margin-top:
            23px;

    }


    .hero-logo {

        width:
            min(310px,86vw);

    }


    .hero-box {

        margin-top:
            0;

        font-size:
            70px;

        letter-spacing:
            -5px;

    }


    .hero-desc {

        max-width:
            295px;

        margin-top:
            27px;

        font-size:
            10px;

    }


    .hero-button {

        margin-top:
            22px;

        padding:
            14px 20px;

    }


    .ray {

        opacity:
            .045;

    }


    .fish {

        opacity:
            .08;

    }


    .floor-back {

        height:
            105px;

    }


    .floor-front {

        height:
            72px;

    }


    .box-section,
    .account-section,
    .history-section {

        padding:
            58px 0
            70px;

    }


    .section-container {

        width:
            calc(100% - 24px);

    }


    .section-title h2 {

        font-size:
            34px;

        letter-spacing:
            -2px;

    }


    .products,
    .account-grid {

        grid-template-columns:
            1fr;

    }


    .products {

        gap:
            18px;

    }


    .product-image-area {

        height:
            285px;

    }


    .game-image-card {

        width:
            calc(100% - 44px);

        max-width:
            320px;

        height:
            215px;

    }


    .product-content {

        padding:
            20px;

    }


    .product-content h3 {

        font-size:
            24px;

    }


    .product-bottom {

        gap:
            12px;

    }


    .wallet-card,
    .profile-card {

        padding:
            22px;

    }


    .wallet-card > strong {

        font-size:
            34px;

    }


    footer {

        flex-direction:
            column;

        gap:
            15px;

        text-align:
            center;

    }


    .opening-card {

        width:
            155px;

        height:
            195px;

    }

}
.game-image {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;

    /* QUAN TRỌNG: ưu tiên hiển thị phần đầu ảnh */
    object-position: center 20%;

    transition: transform .5s ease;
}
/* =====================================================
   HISTORY COLLAPSE
===================================================== */

.history-list {
    margin-top: 28px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 22px;

    background: #edf2f4;

    transition:
        max-height .65s cubic-bezier(.2,.8,.2,1),
        opacity .35s ease;
}


/* mỗi giao dịch */

.history-item {
    min-height: 82px;

    padding: 16px 20px;

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

    gap: 15px;

    border-bottom: 1px solid #bfd2db;

    transition:
        background .2s ease,
        transform .2s ease;
}


.history-item:last-child {
    border-bottom: 0;
}


.history-item:hover {
    background: rgba(0,110,197,.035);
}


.history-item:active {
    transform: scale(.992);
}


.history-name {
    color: var(--navy);

    font-size: 11px;
    font-weight: 700;
}


.history-time {
    margin-top: 4px;

    color: #78909f;

    font-size: 8px;
}


.history-reward {
    margin-top: 4px;

    color: var(--blue);

    font-size: 8px;
}


.history-price {
    color: var(--blue);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}


/* =====================================================
   NÚT XEM THÊM
===================================================== */

.history-toggle {
    width: fit-content;

    min-width: 145px;

    height: 43px;

    margin: 20px auto 0;

    padding: 0 18px;

    display: none;

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

    gap: 10px;

    border: 1px solid #aac9d8;

    border-radius: 50px;

    background: white;

    color: var(--blue);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 2px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .2s ease;
}


.history-toggle.visible {
    display: flex;
}


.history-toggle:hover {
    background: var(--blue);

    color: white;
}


.history-toggle:active {
    transform: scale(.95);
}


.history-toggle b {
    font-size: 13px;

    transition: transform .45s ease;
}


.history-toggle.expanded b {
    transform: rotate(180deg);
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:720px) {

    .history-item {
        min-height: 74px;

        padding: 14px 15px;
    }


    .history-name {
        font-size: 10px;
    }


    .history-time,
    .history-reward {
        font-size: 7px;
    }


    .history-price {
        font-size: 10px;
    }


    .history-toggle {
        min-width: 135px;

        height: 41px;
    }

}
/* =========================================
   ẢNH KẾT QUẢ MỞ TÚI
========================================= */

.reward-result-image {
    width: 100%;
    height: 180px;

    display: block;

    object-fit: cover;

    /* QUAN TRỌNG:
       kéo ảnh lên để ưu tiên phần đầu nhân vật */
    object-position: center 10%;

    border-radius: 14px;

    margin: 14px 0 12px;

    border: 1px solid #b6d1df;

    background: #dbeaf1;
}
/* =====================================================
   PROFILE CARD INTERACTION
===================================================== */

.profile-card {

    position: relative;

    overflow: hidden;

    isolation: isolate;
}


/* nội dung luôn nổi trên logo chìm */

.profile-card > *:not(.profile-moving-logo) {

    position: relative;

    z-index: 3;
}


/* logo chìm */

.profile-moving-logo {

    position: absolute;

    top: 50%;

    right: -220px;

    width: 220px;

    height: auto;

    transform:
        translateY(-50%);

    opacity: 0;

    pointer-events: none;

    user-select: none;

    z-index: 1;

    filter:
        brightness(0)
        invert(1);

}


/* khi kích hoạt */

.profile-card.logo-active
.profile-moving-logo {

    animation:
        profileSharkMove
        1.5s
        cubic-bezier(.22,.61,.36,1)
        forwards;

}


/* bơi từ phải qua trái */

@keyframes profileSharkMove {

    0% {

        right: -220px;

        opacity: 0;

        transform:
            translateY(-50%)
            scale(.85);

    }


    15% {

        opacity: .08;

    }


    50% {

        opacity: .12;

        transform:
            translateY(-53%)
            scale(1);

    }


    85% {

        opacity: .07;

    }


    100% {

        right: calc(100% + 220px);

        opacity: 0;

        transform:
            translateY(-48%)
            scale(.9);

    }

}


/* card phản hồi khi chạm */

.profile-card.logo-active {

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.08),

        0 18px 45px
        rgba(0,45,85,.16);

}


/* nút */

.outline-btn {

    transition:
        transform .18s ease,
        background .18s ease;
}


.outline-btn:active {

    transform:
        scale(.94);

}
.game-video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    /* ưu tiên phần trên video */
    object-position: center 15%;

    border-radius: inherit;
}


/* Khi chạm card */
.game-image-card:active .game-video {
    transform: scale(1.04);
}


.game-video {
    transition: transform .35s ease;
}
/* =========================================
   FIX CARD 39K + VIP
========================================= */

.products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;

    align-items: stretch;
}


.product-card {
    width: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 26px;

    background: #edf2f4;
}


/* phần ảnh */

.product-image-area {
    width: 100%;

    min-height: 310px;

    position: relative;

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

    flex-shrink: 0;
}


/* phần nội dung luôn nằm dưới ảnh */

.product-content {
    width: 100%;

    padding: 24px;

    display: flex;
    flex-direction: column;

    flex: 1;
}


/* đẩy giá + nút xuống đáy card */

.product-bottom {
    width: 100%;

    margin-top: auto;
    padding-top: 18px;

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

    gap: 15px;

    border-top: 1px solid #bed2dc;
}


/* tránh chữ dài phá layout */

.product-content h3 {
    margin-top: 8px;

    color: var(--navy);

    font-size: 26px;

    line-height: 1.15;

    word-break: normal;
}


.product-content h3 span {
    color: var(--blue);
}


/* MOBILE */

@media(max-width:720px) {

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

    .product-content {
        padding: 20px;
    }

}
/* Ẩn hệ thống đăng nhập cũ */
#accountModal,
.auth-modal,
.login-modal {
    display: none !important;
}
/* =========================================
   SHARK BOX - DEPOSIT
========================================= */

.deposit-amounts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 18px 0;
}

.deposit-amount-btn {
    height: 48px;

    border: 1px solid #afd0df;
    border-radius: 12px;

    background: white;
    color: #073554;

    font-weight: 800;
    cursor: pointer;

    transition: .2s ease;
}

.deposit-amount-btn:hover,
.deposit-amount-btn.active {
    background: #087fd0;
    color: white;
    border-color: #087fd0;
}

.deposit-custom {
    width: 100%;
    height: 48px;

    padding: 0 15px;

    border: 1px solid #afd0df;
    border-radius: 12px;

    outline: none;
    margin-bottom: 14px;
}

.deposit-qr {
    width: 350px;
    height: auto;
    display: block;
    margin: 25px auto 30px;
    border-radius: 12px;
}


.deposit-code-box {
    padding: 15px;

    margin: 14px 0;

    border: 1px dashed #6ab2db;
    border-radius: 14px;

    background: #f4fbff;

    text-align: center;
}

.deposit-code-box small {
    display: block;

    margin-bottom: 6px;

    color: #71899a;

    font-size: 10px;
    letter-spacing: 2px;
}

.deposit-code-box strong {
    color: #0076c8;

    font-size: 24px;
    letter-spacing: 2px;
}

.deposit-status {
    margin-top: 14px;

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

    gap: 8px;

    color: #59798d;

    font-size: 11px;
    font-weight: 700;
}

.deposit-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #149ce3;

    animation: depositPulse 1s infinite;
}

@keyframes depositPulse {

    50% {
        opacity: .25;
        transform: scale(1.5);
    }

}

.deposit-success {
    text-align: center;
    padding: 10px;
}

.deposit-success-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 16px;

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

    border-radius: 50%;

    background: #e5f7ee;
    color: #159447;

    font-size: 30px;
    font-weight: 900;

    animation: successPop .4s ease;
}

@keyframes successPop {

    from {
        transform: scale(.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }

}
/* =========================================
   OPENING ANIMATION
========================================= */

.opening-animation {
    position: relative;
    min-height: 360px;

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

    overflow: hidden;
    text-align: center;
}

.opening-box {
    position: relative;
    z-index: 4;

    width: 140px;
    height: 140px;

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

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #bfeaff
        );

    box-shadow:
        0 20px 50px
        rgba(0, 130, 220, .28);

    animation:
        openingBoxFloat
        1.2s ease-in-out
        infinite alternate;
}

.opening-logo {
    width: 95px;
    height: auto;

    animation:
        openingLogoPulse
        .8s ease-in-out
        infinite alternate;
}

.opening-glow {
    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 174, 255, .35),
            transparent 70%
        );

    animation:
        openingGlow
        1.5s ease-in-out
        infinite alternate;
}

.opening-ring {
    position: absolute;

    border: 1px solid
        rgba(0, 145, 230, .3);

    border-radius: 50%;

    animation:
        openingRing
        2s linear
        infinite;
}

.ring-1 {
    width: 190px;
    height: 190px;
}

.ring-2 {
    width: 240px;
    height: 240px;

    animation-delay: -.8s;
}

.opening-title {
    position: relative;
    z-index: 4;

    margin-top: 35px;
}

.opening-subtitle {
    position: relative;
    z-index: 4;

    margin-top: 5px;
}

.opening-progress {
    position: relative;
    z-index: 4;

    width: 80%;
    height: 6px;

    margin-top: 22px;

    border-radius: 99px;

    background:
        rgba(0, 110, 180, .12);

    overflow: hidden;
}

.opening-progress span {
    display: block;

    width: 0%;
    height: 100%;

    border-radius: 99px;

    background: #078ad8;

    transition:
        width 2s ease;
}

@keyframes openingBoxFloat {

    from {
        transform:
            translateY(4px)
            rotate(-2deg)
            scale(.97);
    }

    to {
        transform:
            translateY(-8px)
            rotate(2deg)
            scale(1.03);
    }
}

@keyframes openingLogoPulse {

    from {
        transform: scale(.92);
    }

    to {
        transform: scale(1.08);
    }
}

@keyframes openingGlow {

    from {
        transform: scale(.8);
        opacity: .5;
    }

    to {
        transform: scale(1.15);
        opacity: 1;
    }
}

@keyframes openingRing {

    from {
        transform:
            scale(.75);
        opacity: .8;
    }

    to {
        transform:
            scale(1.3);
        opacity: 0;
    }
}

.opening-reward-image {
    width: 125px;
    height: 125px;
    object-fit: cover;
    border-radius: 22px;
    
}

.reward-result-image {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 16 / 9;
    object-fit: cover;

    display: block;
    margin: 18px auto;

    border-radius: 18px;
}

.reward-account-box {
    margin-top: 12px;
    padding: 15px 16px;

    border: 1px dashed #69b6df;
    border-radius: 14px;

    background: #f5fbff;
}

.reward-account-box small {
    display: block;

    margin-bottom: 7px;

    color: #7792a3;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.reward-account-box strong {
    display: block;

    color: #087bc7;
    font-size: 18px;
    word-break: break-all;
}

.reward-close-btn {
    margin-top: 10px;
}
/* ẨN TOÀN BỘ PROFILE - KHÔNG XÓA HTML */
.profile-card {
    display: none !important;
}

/* =====================================================
   OFFLINE OVERLAY
===================================================== */

.offline-overlay {
    position: fixed;
    inset: 0;

    z-index: 999999;

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

    padding: 20px;

    background: rgba(0, 24, 42, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

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

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


/* KHI MẤT MẠNG */

.offline-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}


/* BOX */

.offline-box {
    width: 100%;
    max-width: 340px;

    background: #f4fbff;

    border-radius: 24px;

    padding: 34px 26px 30px;

    text-align: center;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.25);

    animation:
        offlinePop 0.35s ease;
}


@keyframes offlinePop {

    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }

}


/* ICON */

.offline-icon {
    width: 64px;
    height: 64px;

    margin:
        0 auto
        20px;

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

    border-radius: 50%;

    background: #0784d5;

    color: white;

    font-size: 32px;
    font-weight: 900;

    box-shadow:
        0 0 0 10px
        rgba(7, 132, 213, 0.10);
}


/* LABEL */

.offline-label {
    margin-bottom: 8px;

    color: #0078c9;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 4px;
}


/* TITLE */

.offline-box h2 {
    margin: 0 0 12px;

    color: #002b49;

    font-size: 27px;
    font-weight: 900;
}


/* TEXT */

.offline-box p {
    margin: 0;

    color: #688397;

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


/* LOADING */

.offline-loading {
    width: 100%;
    height: 5px;

    margin:
        25px 0
        13px;

    overflow: hidden;

    border-radius: 100px;

    background: #d5e8f2;
}


.offline-loading span {
    display: block;

    width: 40%;
    height: 100%;

    border-radius: inherit;

    background: #0784d5;

    animation:
        offlineLoading
        1.2s
        infinite ease-in-out;
}


@keyframes offlineLoading {

    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(350%);
    }

}


.offline-box small {
    color: #7892a3;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}
/* =====================================================
   SUPPORT - LIGHT VERSION
===================================================== */

.support-card {
    margin: 22px 12px 35px;

    padding: 20px;

    border: 1px solid #b7d6e6;
    border-radius: 22px;

    background: #eef8fd;

    box-shadow:
        0 8px 25px
        rgba(0, 72, 120, 0.06);
}


/* HEADER */

.support-head {
    margin-bottom: 16px;
}

.support-head span {
    display: block;

    margin-bottom: 7px;

    color: #0787d8;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 3px;
}

.support-head h3 {
    margin: 0;

    color: #00385f;

    font-size: 18px;
    font-weight: 900;
}


/* ITEM */

.support-item {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 10px;
    padding: 14px;

    border: 1px solid #c7dfea;
    border-radius: 15px;

    background: #ffffff;

    color: #00385f;

    text-decoration: none;

    cursor: pointer;

    transition: 0.2s ease;

    font-family: inherit;
    text-align: left;
}


.support-item:hover {
    border-color: #0787d8;

    transform: translateY(-1px);

    box-shadow:
        0 6px 18px
        rgba(0, 120, 200, 0.08);
}


/* ICON */

.support-icon {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

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

    border-radius: 12px;

    background: #0787d8;

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}


/* TEXT */

.support-content {
    flex: 1;
    min-width: 0;
}

.support-content strong {
    display: block;

    margin-bottom: 4px;

    color: #00385f;

    font-size: 12px;
    font-weight: 800;
}

.support-content small {
    display: block;

    color: #6d94aa;

    font-size: 9px;

    line-height: 1.5;
}


/* ARROW */

.support-arrow {
    color: #0787d8;

    font-size: 18px;
    font-weight: 900;
}
/* =====================================================
   SHARK BOX
   MOBILE TYPOGRAPHY OPTIMIZED
   DÁN Ở CUỐI CÙNG STYLE.CSS
===================================================== */

@media (max-width: 720px) {

    /* =================================================
       CƠ BẢN
    ================================================= */

    body {
        font-size: 14px;
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    button,
    a,
    input {
        -webkit-tap-highlight-color: transparent;
    }


    /* =================================================
       HEADER
    ================================================= */

    .brand strong {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .wallet-top b {
        font-size: 11px;
        font-weight: 800;
    }

    .account-top {
        min-height: 42px;
        font-size: 9px;
        font-weight: 800;
    }


    /* =================================================
       HERO
    ================================================= */

    .hero-kicker {
        font-size: 9px;
        line-height: 1.5;
        letter-spacing: 4px;
    }

    .hero-desc {
        max-width: 310px;

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

    .hero-button {
        min-height: 46px;

        padding:
            14px 22px;

        font-size: 10px;
        font-weight: 800;

        letter-spacing: 2px;
    }


    /* =================================================
       TIÊU ĐỀ CÁC SECTION
    ================================================= */

    .section-title span {
        font-size: 9px;
        line-height: 1.4;

        letter-spacing: 3px;
    }

    .section-title h2 {
        font-size: 32px;
        line-height: 1.05;

        letter-spacing: -1.8px;
    }

    .section-title p {
        font-size: 12px;
        line-height: 1.6;
    }


    /* =================================================
       CARD TÚI MÙ
    ================================================= */

    .product-head {
        font-size: 9px;
        font-weight: 700;

        letter-spacing: 2.5px;
    }

    .image-badge small {
        font-size: 8px;
        line-height: 1.4;

        letter-spacing: 2px;
    }

    .image-badge strong {
        font-size: 25px;
        line-height: 1;
    }

    .product-content > small {
        font-size: 9px;
        line-height: 1.4;

        letter-spacing: 2px;
    }

    .product-content h3 {
        font-size: 24px;
        line-height: 1.15;
    }

    .product-content p {
        font-size: 12px;
        line-height: 1.65;
    }

    .product-bottom > strong {
        font-size: 20px;
    }

    .open-box-btn {
        min-height: 44px;

        padding:
            12px 18px;

        font-size: 9px;
        font-weight: 900;

        letter-spacing: 2px;
    }


    /* =================================================
       VÍ
    ================================================= */

    .account-label {
        font-size: 9px;
        line-height: 1.4;

        letter-spacing: 3px;
    }

    .wallet-card small {
        font-size: 9px;
        line-height: 1.4;

        letter-spacing: 3px;
    }

    .wallet-card > strong {
        font-size: 36px;
        line-height: 1.05;

        letter-spacing: -1.3px;
    }

    .white-btn {
        min-height: 44px;

        font-size: 9px;
        font-weight: 900;

        letter-spacing: 1.8px;
    }


    /* =================================================
       HỖ TRỢ & HƯỚNG DẪN
    ================================================= */

    .support-head span {
        font-size: 9px;
        line-height: 1.3;

        letter-spacing: 3px;
    }

    .support-head h3 {
        font-size: 18px;
        line-height: 1.15;
    }

    .support-item {
        min-height: 62px;

        padding:
            13px 12px;

        gap: 11px;
    }

    .support-content strong {
        font-size: 12px;
        line-height: 1.35;
    }

    .support-content small {
        margin-top: 2px;

        font-size: 10px;
        line-height: 1.45;
    }

    .support-arrow {
        font-size: 19px;
    }


    /* =================================================
       LỊCH SỬ MỞ TÚI
    ================================================= */

    .history-list {
        margin-top: 22px;
    }

    .history-item {
        min-height: 88px;

        padding:
            15px 14px;

        gap: 10px;
    }

    .history-name {
        font-size: 12px;
        line-height: 1.35;

        font-weight: 800;
    }

    .history-time {
        margin-top: 3px;

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

    .history-reward {
        margin-top: 5px;

        font-size: 9.5px;
        line-height: 1.5;

        font-weight: 600;
    }

    .history-reward div + div {
        margin-top: 1px;
    }

    .history-price {
        font-size: 11px;
        line-height: 1.3;

        font-weight: 900;
    }

    .history-toggle {
        min-width: 138px;
        min-height: 43px;

        font-size: 9px;
        font-weight: 900;

        letter-spacing: 2px;
    }


    /* =================================================
       POPUP CHUNG
    ================================================= */

    .modal-card {
        width:
            min(
                360px,
                calc(100vw - 28px)
            );

        padding:
            26px 22px;
    }

    .modal-label {
        font-size: 9px;
        line-height: 1.4;

        letter-spacing: 3px;
    }

    .modal-card h2 {
        font-size: 25px;
        line-height: 1.12;

        letter-spacing: -0.8px;
    }

    .modal-card p {
        font-size: 12px;
        line-height: 1.65;
    }

    .modal-action {
        min-height: 47px;

        font-size: 9px;
        font-weight: 900;

        letter-spacing: 2px;
    }


    /* =================================================
       TK + MK SAU KHI MỞ TÚI
    ================================================= */

    .reward-account-box {
        padding:
            14px 15px;
    }

    .reward-account-box small {
        font-size: 9px;
        line-height: 1.4;

        letter-spacing: 2px;
    }

    .reward-account-box strong {
        font-size: 17px;
        line-height: 1.4;

        font-weight: 800;

        word-break: break-word;
    }


    /* =================================================
       POPUP MẤT MẠNG
    ================================================= */

    .offline-box {
        max-width: 330px;

        padding:
            30px 23px 27px;
    }

    .offline-label {
        font-size: 9px;
    }

    .offline-box h2 {
        font-size: 25px;
        line-height: 1.15;
    }

    .offline-box p {
        font-size: 12px;
        line-height: 1.65;
    }

    .offline-box small {
        font-size: 9px;
        line-height: 1.4;
    }


    /* =================================================
       TOAST
    ================================================= */

    #toast {
        max-width:
            calc(100vw - 30px);

        padding:
            12px 16px;

        font-size: 11px;
        line-height: 1.4;

        text-align: center;
    }


    /* =================================================
       FOOTER
    ================================================= */

    .footer-brand strong {
        font-size: 12px;
    }

    footer > span {
        font-size: 9px;
        line-height: 1.4;
    }

}


/* =====================================================
   ĐIỆN THOẠI RẤT NHỎ
   iPhone SE / màn 320-380px
===================================================== */

@media (max-width: 380px) {

    .section-title h2 {
        font-size: 29px;
    }

    .product-content h3 {
        font-size: 22px;
    }

    .wallet-card > strong {
        font-size: 33px;
    }

    .support-content strong {
        font-size: 11.5px;
    }

    .support-content small {
        font-size: 9.5px;
    }

    .history-name {
        font-size: 11px;
    }

    .history-price {
        font-size: 10.5px;
    }

    .modal-card h2 {
        font-size: 23px;
    }

}
/* =====================================================
   SHARK BOX
   GLOBAL TYPOGRAPHY + RESPONSIVE OPTIMIZATION
   DÁN Ở CUỐI CÙNG STYLE.CSS
===================================================== */


/* =====================================================
   1. DESKTOP / LAPTOP
   > 1024px
===================================================== */

@media (min-width: 1025px) {

    body {
        font-size: 15px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    /* HEADER */

    .brand strong {
        font-size: 13px;
        letter-spacing: 4px;
    }

    .wallet-top span {
        font-size: 8px;
    }

    .wallet-top b {
        font-size: 12px;
    }

    .account-top {
        font-size: 10px;
    }


    /* HERO */

    .hero-kicker {
        font-size: 10px;
        letter-spacing: 6px;
    }

    .hero-desc {
        font-size: 14px;
        line-height: 1.75;
    }

    .hero-button {
        min-height: 48px;
        font-size: 10px;
    }


    /* SECTION TITLE */

    .section-title span {
        font-size: 9px;
    }

    .section-title h2 {
        font-size: clamp(40px, 4vw, 56px);
        line-height: 1.05;
    }

    .section-title p {
        font-size: 12px;
        line-height: 1.6;
    }


    /* PRODUCT */

    .product-head {
        font-size: 9px;
    }

    .image-badge small {
        font-size: 8px;
    }

    .product-content > small {
        font-size: 9px;
    }

    .product-content h3 {
        font-size: 28px;
        line-height: 1.15;
    }

    .product-content p {
        font-size: 12px;
        line-height: 1.65;
    }

    .product-bottom > strong {
        font-size: 21px;
    }

    .open-box-btn {
        min-height: 44px;
        font-size: 9px;
    }


    /* WALLET */

    .account-label {
        font-size: 9px;
    }

    .wallet-card small,
    .profile-card small {
        font-size: 9px;
    }

    .wallet-card > strong {
        font-size: 42px;
    }

    .white-btn,
    .outline-btn {
        min-height: 44px;
        font-size: 9px;
    }


    /* SUPPORT */

    .support-head span {
        font-size: 9px;
    }

    .support-head h3 {
        font-size: 20px;
    }

    .support-content strong {
        font-size: 13px;
    }

    .support-content small {
        font-size: 10px;
    }


    /* HISTORY */

    .history-name {
        font-size: 12px;
    }

    .history-time {
        font-size: 9px;
    }

    .history-reward {
        font-size: 9.5px;
        line-height: 1.5;
    }

    .history-price {
        font-size: 12px;
    }

    .history-toggle {
        font-size: 9px;
    }


    /* MODAL */

    .modal-label {
        font-size: 9px;
    }

    .modal-card h2 {
        font-size: 29px;
        line-height: 1.1;
    }

    .modal-card p {
        font-size: 12px;
    }

    .modal-action {
        font-size: 9px;
    }

    .reward-account-box small {
        font-size: 9px;
    }

    .reward-account-box strong {
        font-size: 18px;
    }


    /* OFFLINE */

    .offline-box h2 {
        font-size: 28px;
    }

    .offline-box p {
        font-size: 13px;
    }

    .offline-box small {
        font-size: 9px;
    }


    /* TOAST */

    #toast {
        font-size: 11px;
    }

}


/* =====================================================
   2. TABLET
   721px - 1024px
===================================================== */

@media (min-width: 721px) and (max-width: 1024px) {

    body {
        font-size: 14px;
        line-height: 1.5;
    }

    .section-title h2 {
        font-size: 40px;
    }

    .hero-desc {
        font-size: 13px;
    }

    .product-content h3 {
        font-size: 26px;
    }

    .product-content p {
        font-size: 12px;
    }

    .wallet-card > strong {
        font-size: 38px;
    }

    .support-content strong {
        font-size: 12px;
    }

    .support-content small {
        font-size: 10px;
    }

    .history-name {
        font-size: 11px;
    }

    .history-time,
    .history-reward {
        font-size: 9px;
    }

    .modal-card h2 {
        font-size: 27px;
    }

    .modal-card p {
        font-size: 12px;
    }

}


/* =====================================================
   3. MOBILE
   <= 720px
===================================================== */

@media (max-width: 720px) {

    body {
        font-size: 14px;
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    button,
    a,
    input {
        -webkit-tap-highlight-color: transparent;
    }


    /* HEADER */

    .brand strong {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .wallet-top b {
        font-size: 11px;
    }

    .account-top {
        min-height: 42px;
        font-size: 9px;
    }


    /* HERO */

    .hero-kicker {
        font-size: 9px;
        letter-spacing: 4px;
    }

    .hero-desc {
        max-width: 310px;
        font-size: 12px;
        line-height: 1.7;
    }

    .hero-button {
        min-height: 46px;
        font-size: 10px;
    }


    /* SECTION TITLE */

    .section-title span {
        font-size: 9px;
    }

    .section-title h2 {
        font-size: 32px;
        line-height: 1.05;
    }

    .section-title p {
        font-size: 12px;
    }


    /* PRODUCT */

    .product-head {
        font-size: 9px;
    }

    .image-badge small {
        font-size: 8px;
    }

    .product-content > small {
        font-size: 9px;
    }

    .product-content h3 {
        font-size: 24px;
    }

    .product-content p {
        font-size: 12px;
    }

    .product-bottom > strong {
        font-size: 20px;
    }

    .open-box-btn {
        min-height: 44px;
        font-size: 9px;
    }


    /* WALLET */

    .account-label {
        font-size: 9px;
    }

    .wallet-card small {
        font-size: 9px;
    }

    .wallet-card > strong {
        font-size: 36px;
    }

    .white-btn {
        min-height: 44px;
        font-size: 9px;
    }


    /* SUPPORT */

    .support-head span {
        font-size: 9px;
    }

    .support-head h3 {
        font-size: 18px;
    }

    .support-item {
        min-height: 62px;
        padding: 13px 12px;
    }

    .support-content strong {
        font-size: 12px;
        line-height: 1.35;
    }

    .support-content small {
        font-size: 10px;
        line-height: 1.45;
    }

    .support-arrow {
        font-size: 19px;
    }


    /* HISTORY */

    .history-item {
        min-height: 88px;
        padding: 15px 14px;
    }

    .history-name {
        font-size: 12px;
    }

    .history-time {
        font-size: 9px;
    }

    .history-reward {
        font-size: 9.5px;
        line-height: 1.5;
    }

    .history-price {
        font-size: 11px;
    }

    .history-toggle {
        min-height: 43px;
        font-size: 9px;
    }


    /* MODAL */

    .modal-card {
        width: min(
            360px,
            calc(100vw - 28px)
        );

        padding: 26px 22px;
    }

    .modal-label {
        font-size: 9px;
    }

    .modal-card h2 {
        font-size: 25px;
        line-height: 1.12;
    }

    .modal-card p {
        font-size: 12px;
        line-height: 1.65;
    }

    .modal-action {
        min-height: 47px;
        font-size: 9px;
    }

    .reward-account-box small {
        font-size: 9px;
    }

    .reward-account-box strong {
        font-size: 17px;
    }


    /* OFFLINE */

    .offline-box h2 {
        font-size: 25px;
    }

    .offline-box p {
        font-size: 12px;
    }

    .offline-box small {
        font-size: 9px;
    }


    /* TOAST */

    #toast {
        font-size: 11px;
    }

}


/* =====================================================
   4. ĐIỆN THOẠI NHỎ
   <= 380px
===================================================== */

@media (max-width: 380px) {

    .section-title h2 {
        font-size: 29px;
    }

    .product-content h3 {
        font-size: 22px;
    }

    .wallet-card > strong {
        font-size: 33px;
    }

    .support-content strong {
        font-size: 11.5px;
    }

    .support-content small {
        font-size: 9.5px;
    }

    .history-name {
        font-size: 11px;
    }

    .history-price {
        font-size: 10.5px;
    }

    .modal-card h2 {
        font-size: 23px;
    }

}


/* =====================================================
   5. MÀN HÌNH PC RỘNG
   >= 1440px
===================================================== */

@media (min-width: 1440px) {

    .section-container {
        max-width: 1180px;
    }

    .hero-desc {
        font-size: 15px;
    }

    .section-title h2 {
        font-size: 56px;
    }

    .product-content h3 {
        font-size: 30px;
    }

    .product-content p {
        font-size: 13px;
    }

    .wallet-card > strong {
        font-size: 44px;
    }

    .history-name {
        font-size: 13px;
    }

    .history-time,
    .history-reward {
        font-size: 10px;
    }

}
/* =====================================================
   ICON LIÊN QUÂN CẠNH CHỮ BOX
===================================================== */

.hero-box-wrap {
    position: relative;

    width: fit-content;

    margin: -5px auto 0;

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


/* ICON */

.hero-lq-float {
    position: absolute;

    /* đặt ngay sát cạnh phải BOX */
    left: calc(100% + 10px);

    /* căn giữa theo chiều cao BOX */
    top: 50%;

    width: 105px;
    height: 105px;

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

    z-index: 5;

    transform:
        translateY(-50%);

    animation:
        lqFloat
        3s
        ease-in-out
        infinite;

    filter:
        drop-shadow(
            0 12px 22px
            rgba(0, 30, 60, .30)
        );
}


/* ẢNH */

.hero-lq-float img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 22px;

    border:
        2px solid
        rgba(255,255,255,.75);

    box-shadow:
        0 0 22px
        rgba(60,200,255,.30);
}


/* LƠ LỬNG */

@keyframes lqFloat {

    0%,
    100% {

        transform:
            translateY(-50%)
            translateY(0)
            rotate(3deg);

    }

    50% {

        transform:
            translateY(-50%)
            translateY(-10px)
            rotate(-2deg);

    }

}


/* GLOW */

.hero-lq-float::before {
    content: "";

    position: absolute;

    width: 125px;
    height: 125px;

    border-radius: 50%;

    background:
        rgba(45,190,255,.18);

    filter:
        blur(22px);

    z-index: -1;

    animation:
        lqGlow
        2.7s
        ease-in-out
        infinite;
}


@keyframes lqGlow {

    0%,
    100% {
        transform: scale(.9);
        opacity: .45;
    }

    50% {
        transform: scale(1.08);
        opacity: .85;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {

    .hero-lq-float {
        width: 90px;
        height: 90px;

        left:
            calc(100% + 8px);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 720px) {

    .hero-lq-float {
        width: 70px;
        height: 70px;

        left:
            calc(100% + 6px);
    }

}


/* =====================================================
   MOBILE NHỎ
===================================================== */

@media (max-width: 380px) {

    .hero-lq-float {
        width: 60px;
        height: 60px;

        left:
            calc(100% + 4px);
    }

}
/* =====================================================
   HERO RESPONSIVE FIX - ALL DEVICES
   DÁN Ở CUỐI STYLE.CSS
===================================================== */


/* =====================================================
   1. CỤM BOX + ICON LIÊN QUÂN
===================================================== */

.hero-box-wrap {
    position: relative;

    width: fit-content;

    margin:
        -5px auto 0;

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

    transform: none;
}


/* ICON LIÊN QUÂN */

.hero-lq-float {
    position: absolute;

    top: 50%;

    left:
        calc(100% + 12px);

    width: clamp(
        72px,
        8vw,
        110px
    );

    aspect-ratio: 1 / 1;

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

    z-index: 5;

    animation:
        lqFloatResponsive
        3s
        ease-in-out
        infinite;

    filter:
        drop-shadow(
            0 12px 22px
            rgba(0,30,60,.28)
        );
}


.hero-lq-float img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 20%;

    border:
        1px solid
        rgba(255,255,255,.65);

    box-shadow:
        0 0 20px
        rgba(60,200,255,.22);
}


/* FLOAT */

@keyframes lqFloatResponsive {

    0%,
    100% {

        transform:
            translateY(-50%)
            translateY(0)
            rotate(2deg);

    }

    50% {

        transform:
            translateY(-50%)
            translateY(-9px)
            rotate(-2deg);

    }

}


/* =====================================================
   2. HERO CONTENT
===================================================== */

.hero-content {
    width: 100%;

    max-width: 900px;

    margin: auto;

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

    text-align: center;
}


/* SHARK LOGO */

.hero-logo {
    width:
        min(
            520px,
            82vw
        );

    margin-left: auto;
    margin-right: auto;
}


/* BOX */

.hero-box {
    line-height: .85;

    text-align: center;
}


/* MÔ TẢ */

.hero-desc {
    width: min(
        560px,
        88vw
    );

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


/* NÚT */

.hero-button {
    position: relative;

    z-index: 10;
}


/* =====================================================
   3. FIX MŨI TÊN CUỘN XUỐNG
===================================================== */

.scroll-down {
    position: absolute;

    left: 50%;

    bottom: 22px;

    top: auto;

    z-index: 30;

    transform:
        translateX(-50%);

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

    margin: 0;

    pointer-events: none;
}


.scroll-down span {
    display: block;

    width: 19px;
    height: 29px;

    margin: 0 auto;

    border:
        1px solid
        rgba(255,255,255,.7);

    border-radius: 20px;
}


.scroll-down b {
    display: block;

    margin-top: 6px;

    color: white;

    animation:
        arrowMove
        1.3s
        ease-in-out
        infinite;
}


/* =====================================================
   4. DESKTOP LỚN
===================================================== */

@media (min-width: 1440px) {

    .hero-box-wrap {
        transform:
            translateX(-48px);
    }

    .hero-lq-float {
        left:
            calc(100% + 14px);

        width: 110px;
    }

    .scroll-down {
        bottom: 24px;
    }

}


/* =====================================================
   5. DESKTOP / LAPTOP
===================================================== */

@media (min-width: 1025px) and (max-width: 1439px) {

    .hero-box-wrap {
        transform:
            translateX(-42px);
    }

    .hero-lq-float {
        left:
            calc(100% + 12px);

        width: 100px;
    }

    .scroll-down {
        bottom: 22px;
    }

}


/* =====================================================
   6. TABLET
===================================================== */

@media (min-width: 721px) and (max-width: 1024px) {

    .hero-box-wrap {
        transform:
            translateX(-36px);
    }

    .hero-lq-float {
        left:
            calc(100% + 10px);

        width: 88px;
    }

    .hero-desc {
        width:
            min(
                500px,
                85vw
            );
    }

    .scroll-down {
        bottom: 20px;
    }

}


/* =====================================================
   7. MOBILE
===================================================== */

@media (max-width: 720px) {

    .hero-content {
        max-width: 100%;
    }

    .hero-box-wrap {
        transform:
            translateX(-27px);
    }

    .hero-lq-float {
        left:
            calc(100% + 7px);

        width: 66px;
    }

    .hero-logo {
        width:
            min(
                310px,
                84vw
            );
    }

    .hero-desc {
        width:
            min(
                310px,
                88vw
            );

        font-size: 12px;

        line-height: 1.65;
    }

    .hero-button {
        margin-top: 22px;
    }

    .scroll-down {
        bottom: 16px;
    }

}


/* =====================================================
   8. MOBILE NHỎ
===================================================== */

@media (max-width: 380px) {

    .hero-box-wrap {
        transform:
            translateX(-24px);
    }

    .hero-lq-float {
        left:
            calc(100% + 5px);

        width: 58px;
    }

    .hero-logo {
        width:
            min(
                285px,
                86vw
            );
    }

    .hero-desc {
        width:
            min(
                285px,
                90vw
            );
    }

    .scroll-down {
        bottom: 14px;
    }

}
/* =====================================================
   FIX POPUP NẠP TIỀN - GỌN + CĂN GIỮA
===================================================== */

/* Khung popup nạp tiền */
.deposit-modal {
    width: min(360px, calc(100vw - 28px)) !important;

    max-height: 94vh;

    padding: 22px 20px 20px !important;

    margin: auto;

    overflow-y: auto;

    box-sizing: border-box;
}


/* QR luôn nằm chính giữa */
.deposit-modal img,
.deposit-qr,
.qr-image {
    display: block;

    width: 100%;
    max-width: 270px;

    height: auto;

    margin:
        14px auto 16px !important;

    object-fit: contain;
}


/* Các ô số tiền + nội dung */
.deposit-modal .deposit-info,
.deposit-modal .deposit-box {
    width: 100%;

    box-sizing: border-box;

    margin:
        9px auto 0;
}


/* Nút sao chép */
.deposit-modal .modal-action {
    width: 100%;

    min-height: 44px;

    margin-top: 12px;
}


/* Dòng đang chờ */
.deposit-modal .deposit-status {
    margin-top: 10px;
    margin-bottom: 0;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 720px) {

    .deposit-modal {
        width:
            calc(100vw - 34px) !important;

        max-width: 340px;

        max-height: 94dvh;

        padding:
            19px 17px 17px !important;
    }


    /* Tiêu đề */

    .deposit-modal h2 {
        margin-bottom: 6px;

        font-size: 23px;
        line-height: 1.05;
    }


    /* Mô tả */

    .deposit-modal > p {
        margin-top: 7px;
        margin-bottom: 8px;

        font-size: 11px;
        line-height: 1.5;
    }


    /* QR nhỏ lại */

    .deposit-modal img,
    .deposit-qr,
    .qr-image {
        width: 100%;
        max-width: 245px;

        margin:
            10px auto 12px !important;
    }


    /* Giảm chiều cao ô */

    .deposit-modal .deposit-info,
    .deposit-modal .deposit-box {
        padding:
            12px 10px;

        margin-top: 8px;
    }


    /* Nút */

    .deposit-modal .modal-action {
        min-height: 42px;

        margin-top: 10px;
    }

}
/* =====================================================
   BỌT NƯỚC CHO KHU VỰC VÍ & TÀI KHOẢN
   KHÔNG ẢNH HƯỞNG CHỨC NĂNG
===================================================== */

.account-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}


/* lớp bọt phía sau nội dung */

.account-section::before,
.account-section::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 0;
}


/* cụm bọt 1 */

.account-section::before {
    background:

        radial-gradient(
            circle at 8% 18%,
            rgba(255,255,255,.22) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 18% 72%,
            rgba(255,255,255,.16) 0 7px,
            transparent 8px
        ),

        radial-gradient(
            circle at 35% 28%,
            rgba(255,255,255,.13) 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 58% 85%,
            rgba(255,255,255,.16) 0 6px,
            transparent 7px
        ),

        radial-gradient(
            circle at 78% 20%,
            rgba(255,255,255,.15) 0 8px,
            transparent 9px
        ),

        radial-gradient(
            circle at 92% 62%,
            rgba(255,255,255,.18) 0 4px,
            transparent 5px
        );

    animation:
        accountBubblesOne
        14s
        linear
        infinite;

    opacity: .8;
}


/* cụm bọt 2 */

.account-section::after {
    background:

        radial-gradient(
            circle at 12% 92%,
            rgba(255,255,255,.12) 0 10px,
            transparent 11px
        ),

        radial-gradient(
            circle at 47% 58%,
            rgba(255,255,255,.12) 0 5px,
            transparent 6px
        ),

        radial-gradient(
            circle at 68% 35%,
            rgba(255,255,255,.10) 0 12px,
            transparent 13px
        ),

        radial-gradient(
            circle at 88% 88%,
            rgba(255,255,255,.14) 0 7px,
            transparent 8px
        );

    animation:
        accountBubblesTwo
        18s
        linear
        infinite;

    opacity: .55;
}


/* cho nội dung luôn nằm trên bọt */

.account-section > * {
    position: relative;
    z-index: 2;
}


/* chuyển động bọt */

@keyframes accountBubblesOne {

    0% {
        transform:
            translateY(80px);
    }

    50% {
        transform:
            translateY(-20px)
            translateX(8px);
    }

    100% {
        transform:
            translateY(-120px);
    }

}


@keyframes accountBubblesTwo {

    0% {
        transform:
            translateY(120px);
    }

    50% {
        transform:
            translateY(0)
            translateX(-10px);
    }

    100% {
        transform:
            translateY(-140px);
    }

}
/* =====================================================
   THÔNG BÁO TẠO TÀI KHOẢN THÀNH CÔNG
===================================================== */

.new-member-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 20px;

    background: rgba(2, 24, 40, .62);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    animation: memberOverlayIn .3s ease;
}

.new-member-card {
    width: min(350px, 92vw);

    padding: 28px 22px 22px;

    background: #f2f9fc;

    border: 1px solid #afd1e1;
    border-radius: 24px;

    text-align: center;

    box-shadow:
        0 25px 70px
        rgba(0, 24, 44, .30);

    animation:
        memberCardIn
        .5s
        cubic-bezier(.2,.9,.3,1.15);
}

.new-member-check {
    width: 60px;
    height: 60px;

    margin: 0 auto 17px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0076c8,
            #19a9ed
        );

    color: white;

    font-size: 28px;
    font-weight: 900;

    box-shadow:
        0 12px 30px
        rgba(0, 130, 210, .30);

    animation:
        memberCheckIn
        .65s ease;
}

.new-member-label {
    color: #047dcc;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 3px;
}

.new-member-card h2 {
    margin: 9px 0 8px;

    color: #052b45;

    font-size: 24px;
    line-height: 1.08;

    font-weight: 900;
}

.new-member-desc {
    margin: 0 0 18px;

    color: #718897;

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

.new-member-id {
    padding: 15px;

    margin-bottom: 11px;

    border: 1px dashed #61b6df;
    border-radius: 14px;

    background: #ffffff;
}

.new-member-id small {
    display: block;

    margin-bottom: 5px;

    color: #7891a0;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 2px;
}

.new-member-id strong {
    display: block;

    color: #087ccc;

    font-size: 23px;
    font-weight: 900;

    letter-spacing: 1px;
}

.new-member-note {
    margin: 0 0 17px;

    color: #778f9d;

    font-size: 10px;
    line-height: 1.5;
}

.new-member-start {
    width: 100%;
    height: 46px;

    border: 0;
    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #0076cb,
            #119de5
        );

    color: white;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2px;

    cursor: pointer;
}

.new-member-start:active {
    transform: scale(.97);
}

.new-member-overlay.closing {
    animation:
        memberOverlayOut
        .25s ease forwards;
}

.new-member-overlay.closing
.new-member-card {
    animation:
        memberCardOut
        .25s ease forwards;
}

@keyframes memberOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes memberOverlayOut {
    to { opacity: 0; }
}

@keyframes memberCardIn {

    from {
        opacity: 0;

        transform:
            translateY(25px)
            scale(.88);
    }

    to {
        opacity: 1;

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

@keyframes memberCardOut {

    to {
        opacity: 0;

        transform:
            translateY(15px)
            scale(.94);
    }
}

@keyframes memberCheckIn {

    0% {
        transform:
            scale(0)
            rotate(-20deg);
    }

    70% {
        transform:
            scale(1.12)
            rotate(4deg);
    }

    100% {
        transform:
            scale(1)
            rotate(0);
    }
}
/* =====================================================
   LIVE PURCHASE NOTIFICATION
===================================================== */

.purchase-notify {
    position: fixed;

    left: 18px;
    bottom: 22px;

    z-index: 8000;

    width: min(340px, calc(100vw - 36px));

    padding: 13px 15px;

    display: flex;
    align-items: center;

    gap: 12px;

    border: 1px solid rgba(0, 126, 204, .18);
    border-radius: 18px;

    background: rgba(245, 251, 255, .96);

    box-shadow:
        0 16px 45px
        rgba(0, 35, 60, .18);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(35px)
        scale(.95);

    transition:
        opacity .35s ease,
        transform .45s
        cubic-bezier(.2,.8,.2,1);
}


/* HIỆN */

.purchase-notify.show {
    opacity: 1;

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


/* ICON */

.purchase-notify-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0578cb,
            #18b1ee
        );

    color: white;

    font-size: 18px;
    font-weight: 900;

    box-shadow:
        0 8px 20px
        rgba(0, 126, 204, .25);
}


/* CONTENT */

.purchase-notify-content {
    flex: 1;

    min-width: 0;
}

.purchase-notify-content small {
    display: block;

    margin-bottom: 3px;

    color: #0783cf;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 2px;
}

.purchase-notify-content strong {
    display: block;

    color: #062c46;

    font-size: 12px;
    font-weight: 900;

    line-height: 1.35;
}

.purchase-notify-content span {
    display: block;

    margin-top: 2px;

    color: #6c8798;

    font-size: 10px;
}


/* MOBILE */

@media (max-width: 720px) {

    .purchase-notify {
        left: 12px;
        bottom: 14px;

        width:
            calc(100vw - 24px);

        padding:
            12px 13px;
    }

    .purchase-notify-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

}
.shop-switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 0 16px;

    border-radius: 50px;

    background: #0b8ddd;
    color: white;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;

    text-decoration: none;
}
/* =====================================================
   FIX NÚT SHOP ACC
===================================================== */

.hero-acc-button {
    width: 205px !important;
    height: 46px !important;

    margin: 14px auto 0 !important;
    padding: 0 18px !important;

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

    gap: 10px;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,.85) !important;
    border-radius: 50px !important;

    background:
        linear-gradient(
            135deg,
            #057acb,
            #16b9fa
        ) !important;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    letter-spacing: 1.5px;

    white-space: nowrap;

    box-shadow:
        0 10px 30px
        rgba(0,79,140,.28);

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.hero-acc-button span {
    color: #ffffff !important;

    font-size: 14px;
    font-weight: 900;
}


.hero-acc-button:hover {
    transform: translateY(-2px);
}


.hero-acc-button:active {
    transform: scale(.96);
}


/* MOBILE */

@media (max-width: 720px) {

    .hero-acc-button {
        width: 205px !important;
        height: 46px !important;

        font-size: 10px !important;
    }

}


/* MOBILE NHỎ */

@media (max-width: 380px) {

    .hero-acc-button {
        width: 195px !important;
    }

}
/* =====================================================
   SHARK BOX - SHOP ACC
   RESPONSIVE PC / TABLET / MOBILE
===================================================== */


/* =====================================================
   KHU VỰC SHOP ACC
===================================================== */

.acc-shop-section {
    position: relative;

    padding:
        75px 0 90px;

    background:
        linear-gradient(
            180deg,
            #f5fafd 0%,
            #eef7fb 100%
        );

    overflow: hidden;
}


/* CONTAINER */

.acc-shop-section .section-container {
    width: min(1180px, calc(100% - 40px));

    margin:
        0 auto;
}


/* =====================================================
   TITLE
===================================================== */

.acc-shop-section .section-title {
    margin-bottom: 22px;
}

.acc-shop-section .section-title span {
    display: block;

    margin-bottom: 8px;

    color: #0788d5;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 3px;
}

.acc-shop-section .section-title h2 {
    margin: 0;

    color: #042f4d;

    font-size: clamp(
        32px,
        5vw,
        52px
    );

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -1.5px;
}

.acc-shop-section .section-title p {
    margin:
        10px 0 0;

    color: #6b8798;

    font-size: 13px;

    line-height: 1.6;
}


/* =====================================================
   NÚT QUAY LẠI
===================================================== */

.acc-back-btn {
    position: sticky !important;
    top: 68px !important;

    /* QUAN TRỌNG: để thấp */
    z-index: 10 !important;

    width: 100px !important;
    height: 34px !important;

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

    padding: 0 10px !important;

    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: 999px !important;

    background: linear-gradient(
        135deg,
        #078bd3,
        #18b5ef
    ) !important;

    color: #fff !important;
    text-decoration: none !important;

    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .8px !important;

    box-shadow:
        0 6px 16px rgba(0,80,130,.18) !important;
}
/* =====================================================
   GRID ACC
===================================================== */

.acc-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 20px;
}


/* =====================================================
   CARD ACC
===================================================== */

.acc-card {
    position: relative;

    overflow: hidden;

    min-width: 0;

    border:
        1px solid
        #c8dce7;

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 12px 35px
        rgba(0, 53, 88, .08);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.acc-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 18px 42px
        rgba(0, 53, 88, .13);
}


/* =====================================================
   ẢNH ACC
===================================================== */

.acc-card-image {
    width: 100%;

    aspect-ratio:
        4 / 3;

    display: block;

    object-fit: cover;

    background:
        #dfeef5;
}


/* =====================================================
   BODY CARD
===================================================== */

.acc-card-body {
    padding:
        17px;
}


/* MÃ ACC */

.acc-card-code {
    margin-bottom:
        6px;

    color:
        #0787d2;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


/* TÊN ACC */

.acc-card-body h3 {
    margin: 0;

    color:
        #04304e;

    font-size:
        17px;

    font-weight:
        900;

    line-height:
        1.3;
}


/* =====================================================
   TƯỚNG / SKIN
===================================================== */

.acc-info {
    margin-top:
        11px;

    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.acc-info span {
    padding:
        6px 9px;

    border:
        1px solid
        #d2e7f1;

    border-radius:
        50px;

    background:
        #eef8fd;

    color:
        #157bb3;

    font-size:
        9px;

    font-weight:
        800;
}


/* =====================================================
   GIÁ
===================================================== */

.acc-card-price {
    display: block;

    margin-top:
        16px;

    color:
        #0684d1;

    font-size:
        22px;

    font-weight:
        900;

    line-height:
        1.2;
}


/* =====================================================
   NÚT XEM ACC
===================================================== */

.acc-view-btn {
    width: 100%;

    min-height:
        44px;

    margin-top:
        14px;

    border:
        0;

    border-radius:
        50px;

    background:
        linear-gradient(
            135deg,
            #0576c7,
            #15aeed
        );

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px
        rgba(0, 126, 204, .18);

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.acc-view-btn:hover {
    transform:
        translateY(-2px);
}


.acc-view-btn:active {
    transform:
        scale(.97);
}


/* =====================================================
   TABLET
===================================================== */

@media
(
    min-width: 721px
)
and
(
    max-width: 1024px
) {

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

        gap:
            16px;
    }

}


/* =====================================================
   MOBILE
   2 ACC / HÀNG
===================================================== */

@media (max-width: 720px) {

    .acc-shop-section {
        padding:
            48px 0 65px;
    }


    .acc-shop-section
    .section-container {

        width:
            calc(100% - 20px);
    }


    .acc-shop-section
    .section-title h2 {

        font-size:
            30px;

        letter-spacing:
            -1px;
    }


    .acc-shop-section
    .section-title p {

        font-size:
            11px;
    }


    .acc-back-btn {
        min-height:
            39px;

        margin-bottom:
            18px;

        padding:
            0 14px;

        font-size:
            9px;
    }


    /* 2 ACC mỗi hàng */

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

        gap:
            10px;
    }


    .acc-card {
        border-radius:
            15px;
    }


    .acc-card-image {
        aspect-ratio:
            1 / 1;
    }


    .acc-card-body {
        padding:
            11px;
    }


    .acc-card-code {
        font-size:
            7px;

        letter-spacing:
            1.3px;
    }


    .acc-card-body h3 {
        font-size:
            12px;

        line-height:
            1.3;
    }


    .acc-info {
        margin-top:
            8px;

        gap:
            4px;
    }


    .acc-info span {
        padding:
            5px 6px;

        font-size:
            7.5px;
    }


    .acc-card-price {
        margin-top:
            10px;

        font-size:
            15px;
    }


    .acc-view-btn {
        min-height:
            38px;

        margin-top:
            9px;

        font-size:
            8px;

        letter-spacing:
            1px;
    }

}


/* =====================================================
   MOBILE RẤT NHỎ
===================================================== */

@media (max-width: 340px) {

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


    .acc-card-image {
        aspect-ratio:
            16 / 10;
    }


    .acc-card-body h3 {
        font-size:
            14px;
    }


    .acc-card-price {
        font-size:
            18px;
    }

}
/* =========================================
   MÔ TẢ THÔNG TIN ACC
========================================= */

.acc-description {
    margin: 7px 0 0;

    color: #78909f;

    font-size: 9px;
    font-weight: 600;

    line-height: 1.45;

    min-height: 26px;
}

/* Điện thoại */
@media (max-width: 720px) {

    .acc-description {
        margin-top: 5px;

        font-size: 8px;

        line-height: 1.4;

        min-height: 23px;
    }

}
/* =========================================
   FIX ẢNH ACC KHÔNG BỊ MẤT ĐẦU
========================================= */

.acc-card-image {
    width: 100% !important;

    aspect-ratio: 4 / 3;

    display: block;

    object-fit: cover !important;

    object-position: center top !important;

    background: #dfeef5;
}
/* =====================================================
   NÚT MUA ACC - SHARK BOX
===================================================== */

.acc-buy-btn {
    width: 100%;
    height: 42px;

    margin-top: 10px;

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

    border: 1px solid rgba(255,255,255,.7);
    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #0079d2 0%,
            #12a9ec 100%
        );

    color: #ffffff;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.5px;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(0, 125, 205, .22);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}


.acc-buy-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 11px 25px
        rgba(0, 125, 205, .30);
}


.acc-buy-btn:active {
    transform: scale(.97);
}


/* ĐANG XỬ LÝ */

.acc-buy-btn:disabled {
    cursor: wait;

    opacity: .65;

    transform: none;
}


/* HẾT HÀNG THẬT */

.acc-buy-btn.out-stock {
    background: #9bacb6 !important;

    color: #ffffff;

    box-shadow: none;

    cursor: not-allowed;

    opacity: .75;
}


/* MOBILE */

@media (max-width: 720px) {

    .acc-buy-btn {
        height: 40px;

        font-size: 8px;

        letter-spacing: 1.2px;
    }

}
/* =========================================
   HIỆU ỨNG CHUYỂN SANG SHOP ACC
========================================= */

body {
    transition:
        opacity .45s ease,
        transform .45s ease;
}

body.page-leaving {
    opacity: 0;

    transform:
        translateY(-25px);
}
/* =========================================
   NÚT QUAY LẠI TÚI MÙ
========================================= */

.acc-back-btn {
    width: 185px;
    height: 42px;

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

    margin: 0 0 20px;

    border: 1px solid rgba(255,255,255,.85);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #078bd8,
            #16b2ef
        );

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.3px;

    box-shadow:
        0 8px 20px
        rgba(0, 130, 210, .20);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.acc-back-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 11px 25px
        rgba(0, 130, 210, .28);
}

.acc-back-btn:active {
    transform: scale(.97);
}

@media (max-width: 720px) {

    .acc-back-btn {
        width: 170px;
        height: 40px;

        font-size: 8px;
    }

}
/* =====================================================
   FIX 2 NÚT HERO BẰNG NHAU
===================================================== */

.hero-button,
.hero-acc-button {
    width: 205px !important;
    height: 46px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;

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

    box-sizing: border-box !important;

    border-radius: 999px !important;

    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 1.4px !important;

    line-height: 1 !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}

/* khoảng cách giữa 2 nút */
.hero-acc-button {
    margin-top: 14px !important;
}

/* mobile nhỏ */
@media (max-width: 380px) {

    .hero-button,
    .hero-acc-button {
        width: 195px !important;
        height: 44px !important;
        font-size: 9px !important;
    }

}
/* =========================================
   HẾT ACC
========================================= */

.acc-buy-btn.out-stock {
    background:
        linear-gradient(
            135deg,
            #8fa4b1,
            #aebdc6
        ) !important;

    color: #ffffff !important;

    box-shadow: none !important;

    cursor: not-allowed !important;

    opacity: .8;
}

.acc-buy-btn.out-stock::before {
    content: "×";
    margin-right: 7px;

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

.acc-buy-btn.out-stock-shake {
    animation:
        outStockShake .45s ease;
}

@keyframes outStockShake {

    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }

    100% {
        transform: translateX(0);
    }
}
/* =========================================
   TOAST - ẨN MẶC ĐỊNH
========================================= */

#toast {
    position: fixed !important;

    left: 50% !important;
    bottom: 32px !important;

    transform:
        translate(-50%, 15px)
        scale(.95) !important;

    width: max-content !important;
    max-width: calc(100vw - 32px) !important;

    padding: 13px 20px !important;

    background:
        rgba(5, 39, 62, .96) !important;

    color: #ffffff !important;

    border:
        1px solid
        rgba(255,255,255,.15) !important;

    border-radius: 999px !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    text-align: center !important;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.25) !important;

    z-index: 99999 !important;

    backdrop-filter: blur(10px);

    /* QUAN TRỌNG */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease !important;
}


/* =========================================
   CHỈ HIỆN KHI showToast() GẮN CLASS SHOW
========================================= */

#toast.show {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translate(-50%, 0)
        scale(1) !important;
}
/* =========================================
   NÚT QUAY LẠI - GÓC TRÊN TRÁI
   NGAY DƯỚI HEADER
========================================= */

.box-back-home-btn {
    position: fixed !important;

    top: 72px !important;
    left: 12px !important;

    right: auto !important;
    bottom: auto !important;

    z-index: 9998;

    width: 115px;
    height: 38px;

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

    margin: 0 !important;

    border: 1px solid rgba(255,255,255,.8);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #078bd3,
            #19b4ec
        );

    color: #fff;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;

    cursor: pointer;

    box-shadow:
        0 8px 22px
        rgba(0, 65, 105, .25);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.box-back-home-btn:hover {
    transform: translateY(-2px);
}

.box-back-home-btn:active {
    transform: scale(.95);
}


/* MOBILE */

@media (max-width: 720px) {

    .box-back-home-btn {
        top: 68px !important;
        left: 10px !important;

        width: 105px;
        height: 36px;

        font-size: 7.5px;
    }

}
/* =========================================
   QUAY LẠI - ẨN MẶC ĐỊNH
========================================= */

.box-back-home-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform:
        translateY(-10px)
        scale(.94) !important;

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease !important;
}


/* =========================================
   HIỆN KHI ĐẾN PHẦN TÚI MÙ
========================================= */

.box-back-home-btn.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform:
        translateY(0)
        scale(1) !important;
}
/* =====================================================
   NÚT QUAY LẠI - SHARK BOX
   - nằm dưới header bên trái
   - trang chủ tự ẩn
   - cuộn xuống tự hiện
===================================================== */

.box-back-home-btn {

    /* ==============================
       VỊ TRÍ
    ============================== */

    position: fixed !important;

    top: 72px !important;
    left: 12px !important;

    right: auto !important;
    bottom: auto !important;

    z-index: 9998 !important;


    /* ==============================
       KÍCH THƯỚC
    ============================== */

    width: 112px;
    height: 38px;

    margin: 0 !important;

    padding: 0 14px;


    /* ==============================
       CĂN GIỮA
    ============================== */

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

    box-sizing: border-box;


    /* ==============================
       GIAO DIỆN
    ============================== */

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .80
        );

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            #078bd3,
            #18b5ef
        );

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1.2px;

    white-space:
        nowrap;

    cursor:
        pointer;


    /* ==============================
       BÓNG
    ============================== */

    box-shadow:

        0 8px 22px
        rgba(
            0,
            70,
            120,
            .25
        ),

        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            .25
        );


    /* ==============================
       MẶC ĐỊNH ẨN
    ============================== */

    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;


    transform:

        translateY(-8px)
        scale(.94) !important;


    /* ==============================
       CHUYỂN ĐỘNG
    ============================== */

    transition:

        opacity .32s ease,

        transform .32s ease,

        visibility .32s ease,

        box-shadow .2s ease !important;

}


/* =====================================================
   KHI CUỘN XUỐNG
===================================================== */

.box-back-home-btn.show {

    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;


    transform:

        translateY(0)
        scale(1) !important;

}


/* =====================================================
   HOVER PC
===================================================== */

.box-back-home-btn.show:hover {

    transform:

        translateY(-2px)
        scale(1) !important;


    box-shadow:

        0 11px 28px
        rgba(
            0,
            110,
            180,
            .32
        );

}


/* =====================================================
   KHI BẤM
===================================================== */

.box-back-home-btn.show:active {

    transform:

        translateY(0)
        scale(.94) !important;

}


/* =====================================================
   TABLET
===================================================== */

@media
(
    min-width: 721px
)
and
(
    max-width: 1024px
) {

    .box-back-home-btn {

        top:
            70px !important;

        left:
            11px !important;

        width:
            108px;

        height:
            37px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media
(
    max-width: 720px
) {

    .box-back-home-btn {

        top:
            67px !important;

        left:
            9px !important;

        width:
            103px;

        height:
            35px;

        padding:
            0 10px;

        font-size:
            7.5px;

        letter-spacing:
            1px;

    }

}


/* =====================================================
   MOBILE NHỎ
===================================================== */

@media
(
    max-width: 380px
) {

    .box-back-home-btn {

        top:
            64px !important;

        left:
            8px !important;

        width:
            98px;

        height:
            34px;

        font-size:
            7px;

    }

}
/* =====================================================
   NÚT QUAY LẠI SHOP ACC
===================================================== */

.acc-back-btn {
    width: 100px;
    height: 34px;

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

    margin: 10px 0 20px 0;
    padding: 0 10px;

    box-sizing: border-box;

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

    background:
        linear-gradient(
            135deg,
            #078bd3,
            #18b5ef
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;

    box-shadow:
        0 7px 18px
        rgba(0, 91, 145, .20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


/* PC */

.acc-back-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 9px 22px
        rgba(0, 91, 145, .28);
}


/* KHI BẤM */

.acc-back-btn:active {
    transform: scale(.95);
}


/* MOBILE */

@media (max-width: 720px) {

    .acc-back-btn {
        width: 100px;
        height: 34px;

        margin:
            10px 0
            20px 0;

        font-size: 7px;
    }

}
.acc-back-btn {
    position: sticky !important;
    top: 68px !important;

    z-index: 20 !important;

    width: 100px !important;
    height: 34px !important;

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

    padding: 0 10px !important;

    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: 999px !important;

    background: linear-gradient(
        135deg,
        #078bd3,
        #18b5ef
    ) !important;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .8px !important;

    box-shadow:
        0 6px 16px rgba(0, 80, 130, .18) !important;
}
/* Khi modal mở thì ẩn nút QUAY LẠI */
body.modal-open .acc-back-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* =====================================================
   LỚP POPUP / MODAL LUÔN NẰM TRÊN NÚT QUAY LẠI
===================================================== */

.modal,
.opening-screen,
.offline-overlay,
.deposit-modal,
.reward-modal {
    z-index: 9999 !important;
}


/* lớp nền tối của modal */
.modal::before,
.modal-overlay {
    z-index: 9998 !important;
}


/* toast vẫn nằm cao nhất */
#toast,
.purchase-notify {
    z-index: 10000 !important;
}

/* =====================================================
   GIỮ NÚT QUAY LẠI NẰM DƯỚI POPUP / MODAL
===================================================== */

.acc-back-btn,
.acc-back-home-btn,
.acc-back-sticky-btn,
.box-back-home-btn,
#accBackStickyBtn {
    z-index: 10 !important;
}


/* =====================================================
   POPUP LUÔN NẰM TRÊN NÚT QUAY LẠI
===================================================== */

.modal,
.opening-screen,
.offline-overlay {
    z-index: 9999 !important;
}

#toast,
.purchase-notify {
    z-index: 10000 !important;
}
/* =========================================
   RED OCEAN - VÍ & TÀI KHOẢN
========================================= */

.account-section {
    background:
        radial-gradient(
            circle at 70% 18%,
            rgba(255, 75, 95, .18),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 80%,
            rgba(255, 50, 70, .14),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #4a0613 0%,
            #790b1f 48%,
            #a30f28 100%
        ) !important;

    color: #fff !important;
}


/* tiêu đề */
.account-section .section-title span {
    color: #ff9aac !important;
}

.account-section .section-title h2 {
    color: #ffffff !important;
}


/* CARD VÍ */
.wallet-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .10),
            rgba(255, 255, 255, .035)
        ) !important;

    border:
        1px solid
        rgba(255, 180, 190, .38) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 18px 45px rgba(70, 0, 15, .22) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* chữ WALLET */
.wallet-card .account-label {
    color: #ffb0bc !important;
}


/* chữ SỐ DƯ HIỆN TẠI */
.wallet-card small,
.wallet-card span {
    color: rgba(255,255,255,.72) !important;
}


/* SỐ DƯ */
#walletBalance {
    color: #ffffff !important;

    text-shadow:
        0 0 18px
        rgba(255, 40, 70, .25);
}


/* NÚT NẠP TIỀN */
.wallet-card .primary-btn,
.wallet-card button,
.deposit-btn {
    background:
        linear-gradient(
            135deg,
            #ff244a 0%,
            #d90d32 55%,
            #a50824 100%
        ) !important;

    color: #ffffff !important;

    border:
        1px solid
        rgba(255,255,255,.20) !important;

    box-shadow:
        0 10px 28px rgba(170, 0, 35, .30),
        inset 0 1px 0 rgba(255,255,255,.16) !important;

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


/* chạm nút */
.wallet-card .primary-btn:active,
.wallet-card button:active,
.deposit-btn:active {
    transform: scale(.97);
}


/* hover PC */
@media (hover:hover) {

    .wallet-card .primary-btn:hover,
    .wallet-card button:hover,
    .deposit-btn:hover {
        filter: brightness(1.08);

        box-shadow:
            0 12px 34px rgba(210, 0, 45, .42),
            0 0 20px rgba(255, 40, 70, .18);
    }
}


/* bong bóng / hiệu ứng trang trí nếu có */
.account-section .bubble,
.account-section [class*="bubble"] {
    border-color:
        rgba(255, 150, 165, .18) !important;

    background:
        rgba(255, 80, 100, .08) !important;
}
/* =========================================
   PRICE + OPEN BUTTON ANIMATION
========================================= */

.product-bottom {
    position: relative;
    overflow: visible;
}

/* GIÁ NHỊP NHẸ */
.product-bottom > strong {
    display: inline-block;
    position: relative;

    animation:
        pricePulse 2.2s ease-in-out infinite;

    transform-origin: left center;
}

@keyframes pricePulse {
    0%,
    100% {
        transform: scale(1);
        text-shadow: none;
    }

    50% {
        transform: scale(1.05);
        text-shadow:
            0 0 14px rgba(0, 150, 255, .25);
    }
}


/* NÚT MỞ TÚI */
.open-box-btn {
    position: relative;
    overflow: hidden;

    animation:
        openBtnPulse 2.4s ease-in-out infinite;
}

@keyframes openBtnPulse {
    0%,
    100% {
        transform: translateY(0) scale(1);

        box-shadow:
            0 8px 18px
            rgba(0, 120, 210, .18);
    }

    50% {
        transform: translateY(-2px) scale(1.025);

        box-shadow:
            0 12px 28px
            rgba(0, 150, 255, .35);
    }
}


/* ÁNH SÁNG CHẠY QUA NÚT */
.open-box-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -80%;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.32),
            transparent
        );

    transform: skewX(-18deg);

    animation:
        openBtnShine 3s ease-in-out infinite;

    pointer-events: none;
}

@keyframes openBtnShine {
    0%,
    65% {
        left: -80%;
    }

    100% {
        left: 140%;
    }
}


/* MŨI TÊN DI CHUYỂN */
.open-box-btn span {
    display: inline-block;

    animation:
        arrowMove 1.1s ease-in-out infinite;
}

@keyframes arrowMove {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}


/* GẠCH SÁNG NHỎ DƯỚI GIÁ */
.product-bottom > strong::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 26px;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #009cff,
            transparent
        );

    animation:
        priceLine 1.8s ease-in-out infinite;
}

@keyframes priceLine {
    0%,
    100% {
        width: 22px;
        opacity: .5;
    }

    50% {
        width: 48px;
        opacity: 1;
    }
}
/* =========================================
   SHARK BOX - ACC CARD PREMIUM MOTION
========================================= */

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

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

    animation:
        accFloat 4.8s ease-in-out infinite;

    box-shadow:
        0 10px 28px rgba(0, 55, 95, .10);
}


/* lệch nhịp từng card để nhìn tự nhiên hơn */
.acc-card:nth-child(2n) {
    animation-delay: -1.2s;
}

.acc-card:nth-child(3n) {
    animation-delay: -2.1s;
}

.acc-card:nth-child(4n) {
    animation-delay: -.7s;
}


@keyframes accFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


/* =========================================
   GLOW VIỀN CARD
========================================= */

.acc-card::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(0, 180, 255, .10),
            rgba(0, 180, 255, .55),
            rgba(255,255,255,.15),
            rgba(0, 180, 255, .10)
        );

    -webkit-mask:
    
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: .55;

    animation:
        accBorderGlow 3.6s ease-in-out infinite;

    pointer-events: none;

    z-index: 5;
}


@keyframes accBorderGlow {
    0%,
    100% {
        opacity: .25;
    }

    50% {
        opacity: .8;
    }
}


/* =========================================
   ÁNH SÁNG QUÉT QUA TOÀN CARD
========================================= */

.acc-card::after {
    content: "";

    position: absolute;

    top: -30%;
    left: -80%;

    width: 45%;
    height: 160%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );

    transform: rotate(16deg);

    animation:
        accCardSweep 5.5s ease-in-out infinite;

    pointer-events: none;

    z-index: 4;
}


.acc-card:nth-child(2n)::after {
    animation-delay: -1.5s;
}

.acc-card:nth-child(3n)::after {
    animation-delay: -2.8s;
}


@keyframes accCardSweep {
    0%,
    68% {
        left: -80%;
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        left: 140%;
        opacity: 0;
    }
}


/* =========================================
   ẢNH ACC ZOOM NHẸ
========================================= */

.acc-card-image {
    transition:
        transform 4.5s ease,
        filter .35s ease;

    transform: scale(1.01);

    animation:
        accImageBreath 6s ease-in-out infinite;
}


.acc-card:nth-child(2n) .acc-card-image {
    animation-delay: -1.5s;
}


@keyframes accImageBreath {
    0%,
    100% {
        transform: scale(1.01);
    }

    50% {
        transform: scale(1.045);
    }
}


/* =========================================
   TAG NHẤP NHẸ
========================================= */

.acc-card .acc-tag,
.acc-card .stat-pill,
.acc-card [class*="tag"],
.acc-card [class*="pill"] {
    animation:
        accTagPulse 2.8s ease-in-out infinite;
}


@keyframes accTagPulse {
    0%,
    100% {
        transform: translateY(0);
        filter: brightness(1);
    }

    50% {
        transform: translateY(-1px);
        filter: brightness(1.08);
    }
}


/* =========================================
   GIÁ NHẤP NHẸ
========================================= */

.acc-card-price,
.acc-price,
.acc-card .price {
    display: inline-block;

    animation:
        accPricePulse 2.4s ease-in-out infinite;
}


@keyframes accPricePulse {
    0%,
    100% {
        transform: scale(1);
        text-shadow: none;
    }

    50% {
        transform: scale(1.04);

        text-shadow:
            0 0 12px
            rgba(0, 160, 255, .25);
    }
}


/* =========================================
   NÚT MUA ACC
========================================= */

.acc-buy-btn {
    position: relative;
    overflow: hidden;

    animation:
        accBuyPulse 2.8s ease-in-out infinite;

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


@keyframes accBuyPulse {
    0%,
    100% {
        transform: translateY(0);

        box-shadow:
            0 8px 18px
            rgba(0, 140, 220, .18);
    }

    50% {
        transform: translateY(-2px);

        box-shadow:
            0 12px 28px
            rgba(0, 160, 255, .32);
    }
}


/* ánh sáng chạy trên nút */
.acc-buy-btn::after {
    content: "";

    position: absolute;

    top: 0;
    left: -80%;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.32),
            transparent
        );

    transform: skewX(-18deg);

    animation:
        accBuyShine 3.4s ease-in-out infinite;

    pointer-events: none;
}


@keyframes accBuyShine {
    0%,
    65% {
        left: -80%;
    }

    100% {
        left: 140%;
    }
}


/* =========================================
   HOVER PC
========================================= */

@media (hover:hover) {

    .acc-card:hover {
        transform:
            translateY(-8px)
            scale(1.015);

        box-shadow:
            0 18px 42px
            rgba(0, 70, 120, .18);
    }

    .acc-card:hover .acc-card-image {
        filter:
            brightness(1.06)
            saturate(1.08);
    }

    .acc-buy-btn:hover {
        transform:
            translateY(-2px)
            scale(1.02);

        filter:
            brightness(1.06);
    }
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:720px) {

    .acc-card {
        animation-duration: 5.2s;
    }

    .acc-card::after {
        animation-duration: 6.2s;
    }

    .acc-card-image {
        animation-duration: 6.5s;
    }
}


/* =========================================
   TÔN TRỌNG NGƯỜI DÙNG GIẢM CHUYỂN ĐỘNG
========================================= */

@media (prefers-reduced-motion: reduce) {

    .acc-card,
    .acc-card::before,
    .acc-card::after,
    .acc-card-image,
    .acc-buy-btn,
    .acc-buy-btn::after,
    .acc-card-price,
    .acc-price,
    .acc-card .price,
    .acc-card .acc-tag,
    .acc-card .stat-pill,
    .acc-card [class*="tag"],
    .acc-card [class*="pill"] {
        animation: none !important;
    }
}
/* NÚT QUAY LẠI - RED */
.acc-back-btn {
    background: linear-gradient(
        135deg,
        #ff3151 0%,
        #e31338 50%,
        #b40728 100%
    ) !important;

    border: 1px solid rgba(255,255,255,.65) !important;

    color: #fff !important;

    box-shadow:
        0 7px 18px rgba(190, 0, 40, .28),
        0 0 14px rgba(255, 35, 70, .15) !important;

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

.acc-back-btn:hover {
    filter: brightness(1.1);

    box-shadow:
        0 9px 24px rgba(220, 0, 45, .38),
        0 0 18px rgba(255, 40, 70, .22) !important;
}

.acc-back-btn:active {
    transform: scale(.95);
}
/* =========================================
   NÚT QUAY LẠI TÚI MÙ - RED
========================================= */

.box-back-home-btn {
    background: linear-gradient(
        135deg,
        #ff3151 0%,
        #e31338 50%,
        #b40728 100%
    ) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255,255,255,.65) !important;

    box-shadow:
        0 7px 18px rgba(190,0,40,.28),
        0 0 14px rgba(255,35,70,.18) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease !important;
}


/* PC hover */
.box-back-home-btn:hover {
    filter: brightness(1.12);

    box-shadow:
        0 10px 25px rgba(220,0,45,.40),
        0 0 20px rgba(255,40,70,.25) !important;

    transform: translateY(-2px);
}


/* Khi bấm */
.box-back-home-btn:active {
    transform: scale(.95);
}
/* ==================================================
   HERO BUTTONS - PREMIUM MOTION
================================================== */

.hero-button,
.hero-acc-button {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #078bd3 0%,
            #19b6ef 55%,
            #087fc2 100%
        ) !important;

    color: #ffffff !important;

    border:
        1px solid
        rgba(255,255,255,.85) !important;

    box-shadow:
        0 10px 24px rgba(0, 110, 180, .22),
        0 0 16px rgba(40, 190, 255, .12) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;

    animation:
        heroButtonFloat
        3.2s ease-in-out infinite;
}


/* nút thứ 2 lệch nhịp */
.hero-acc-button {
    animation-delay: -1.2s;
}


/* nổi nhẹ */
@keyframes heroButtonFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}


/* ánh sáng quét ngang */
.hero-button::before,
.hero-acc-button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -80%;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform: skewX(-18deg);

    animation:
        heroButtonShine
        3.6s ease-in-out infinite;

    pointer-events: none;
}


.hero-acc-button::before {
    animation-delay: -1.4s;
}


@keyframes heroButtonShine {

    0%,
    65% {
        left: -80%;
    }

    100% {
        left: 140%;
    }
}


/* hover PC */
@media (hover:hover) {

    .hero-button:hover,
    .hero-acc-button:hover {
        filter: brightness(1.08);

        transform:
            translateY(-3px)
            scale(1.02);

        box-shadow:
            0 14px 32px rgba(0,130,210,.32),
            0 0 22px rgba(40,190,255,.18) !important;
    }
}


/* khi bấm */
.hero-button:active,
.hero-acc-button:active {
    transform: scale(.97);
}


/* ==================================================
   QUAY LẠI - ĐỔI VỀ XANH
================================================== */

.acc-back-btn,
.acc-back-home-btn,
.box-back-home-btn {
    background:
        linear-gradient(
            135deg,
            #078bd3 0%,
            #18b5ef 55%,
            #087fc2 100%
        ) !important;

    color: #ffffff !important;

    border:
        1px solid rgba(255,255,255,.85) !important;

    box-shadow:
        0 7px 18px rgba(0,91,145,.20),
        0 0 12px rgba(30,180,240,.10) !important;

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


.acc-back-btn:hover,
.acc-back-home-btn:hover,
.box-back-home-btn:hover {
    filter: brightness(1.08);

    box-shadow:
        0 9px 22px rgba(0,110,175,.28),
        0 0 16px rgba(30,180,240,.16) !important;
}


.acc-back-btn:active,
.acc-back-home-btn:active,
.box-back-home-btn:active {
    transform: scale(.95);
}


/* giảm chuyển động nếu thiết bị yêu cầu */
@media(prefers-reduced-motion: reduce) {

    .hero-button,
    .hero-acc-button,
    .hero-button::before,
    .hero-acc-button::before {
        animation: none !important;
    }
}
/* =========================================================
   SHARK BOX - LIGHT OCEAN BACKGROUND
   Nền xanh nhạt động thay cho nền trắng
========================================================= */

/* NỀN CHUNG */
body {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(46, 190, 255, .13),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 45%,
            rgba(0, 130, 210, .10),
            transparent 30%
        ),
        linear-gradient(
            160deg,
            #f7fcff 0%,
            #eaf8ff 45%,
            #dff3fc 100%
        ) !important;

    background-attachment: fixed !important;
}


/* =========================================================
   CÁC KHU VỰC TRƯỚC ĐÂY CÓ NỀN TRẮNG
========================================================= */

.box-section,
.acc-shop-section,
.acc-page,
.history-section,
.support-section {

    position: relative !important;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(54, 190, 245, .10),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 60%,
            rgba(0, 125, 200, .08),
            transparent 28%
        ),
        linear-gradient(
            160deg,
            rgba(248,253,255,.97),
            rgba(229,247,255,.94),
            rgba(241,250,255,.96)
        ) !important;

    overflow: hidden;
}


/* =========================================================
   LỚP ÁNH SÁNG NƯỚC CHUYỂN ĐỘNG
========================================================= */

.box-section::before,
.acc-shop-section::before,
.acc-page::before,
.history-section::before,
.support-section::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: 10%;
    left: -260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(50,190,245,.12) 0%,
            rgba(50,190,245,.06) 35%,
            transparent 68%
        );

    pointer-events: none;

    z-index: 0;

    animation:
        sharkOceanGlow 12s
        ease-in-out infinite alternate;
}


@keyframes sharkOceanGlow {

    0% {
        transform:
            translate3d(-30px, 0, 0);
    }

    50% {
        transform:
            translate3d(180px, 100px, 0);
    }

    100% {
        transform:
            translate3d(320px, -30px, 0);
    }
}


/* =========================================================
   BONG BÓNG NƯỚC LỚN
========================================================= */

.box-section::after,
.acc-shop-section::after,
.acc-page::after,
.history-section::after,
.support-section::after {

    content: "";

    position: absolute;

    width: 38px;
    height: 38px;

    right: 7%;
    top: 30%;

    border-radius: 50%;

    border:
        1px solid rgba(0,150,220,.13);

    background:
        radial-gradient(
            circle at 32% 28%,
            rgba(255,255,255,.85) 0 5%,
            rgba(70,195,245,.10) 25%,
            rgba(0,130,200,.04) 55%,
            transparent 72%
        );

    box-shadow:
        inset 2px 2px 5px rgba(255,255,255,.55),
        0 4px 14px rgba(0,130,190,.08);

    pointer-events: none;

    z-index: 0;

    animation:
        sharkBubbleFloat
        7s ease-in-out infinite;
}


@keyframes sharkBubbleFloat {

    0%,
    100% {
        transform:
            translateY(30px)
            translateX(0)
            scale(.85);

        opacity: .35;
    }

    50% {
        transform:
            translateY(-80px)
            translateX(-16px)
            scale(1);

        opacity: .75;
    }
}


/* =========================================================
   ĐẢM BẢO NỘI DUNG NẰM TRÊN HIỆU ỨNG
========================================================= */

.box-section > *,
.acc-shop-section > *,
.acc-page > *,
.history-section > *,
.support-section > * {

    position: relative;
    z-index: 1;
}


/* =========================================================
   CARD GIỮ TRẮNG ĐỂ TÁCH KHỎI NỀN
========================================================= */

.box-card,
.acc-card,
.support-card,
.history-card {

    background:
        rgba(255,255,255,.90) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    box-shadow:
        0 10px 30px rgba(0,85,135,.08) !important;
}


/* =========================================================
   QUAN TRỌNG - KHÔNG ĐỤNG PHẦN VÍ
========================================================= */

.account-section {

    /* phần Ví dùng CSS riêng hiện tại */
    position: relative;
    z-index: 2;
}


/* =========================================================
   MOBILE - HIỆU ỨNG NHẸ HƠN
========================================================= */

@media(max-width:720px) {

    .box-section::before,
    .acc-shop-section::before,
    .acc-page::before,
    .history-section::before,
    .support-section::before {

        width: 360px;
        height: 360px;

        opacity: .8;
    }

    .box-section::after,
    .acc-shop-section::after,
    .acc-page::after,
    .history-section::after,
    .support-section::after {

        width: 28px;
        height: 28px;
    }
}
/* =========================================
   NÚT HỖ TRỢ TRONG CARD VÍ
========================================= */

.wallet-support-btn {
    width: 100%;
    height: 42px;

    margin-top: 10px;

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

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,.38);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.05)
        );

    color: #ffffff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.2px;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 6px 16px rgba(70,0,20,.10);

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.wallet-support-btn:hover {
    background:
        rgba(255,255,255,.16);

    box-shadow:
        0 8px 20px rgba(65,0,18,.16);

    transform: translateY(-1px);
}

.wallet-support-btn:active {
    transform: scale(.97);
}


/* =========================================
   SUPPORT POPUP
========================================= */

.support-popup-item {
    width: 100%;
    min-height: 62px;

    margin-top: 10px;
    padding: 10px 12px;

    box-sizing: border-box;

    display: grid;
    grid-template-columns: 38px 1fr 20px;

    align-items: center;
    gap: 10px;

    border: 1px solid #c9e1ee;
    border-radius: 14px;

    background: #f8fcff;

    text-decoration: none;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.support-popup-item:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0,90,145,.10);
}

.support-popup-icon {
    width: 36px;
    height: 36px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #078bd3,
            #18b5ef
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;
}

.support-popup-item strong {
    display: block;

    color: #06344f;

    font-size: 11px;
}

.support-popup-item small {
    display: block;

    margin-top: 3px;

    color: #7893a3;

    font-size: 8px;
}

.support-popup-item > b {
    color: #058bd2;

    font-size: 18px;
}
/* ẨN TOÀN BỘ HỖ TRỢ CŨ */
.support-section,
.support-card {
    display: none !important;
}
/* =====================================================
   FIX QUAY LẠI
   - LUÔN HIỆN
   - NẰM BÊN PHẢI
   - KHÔNG CHẠY THEO KHI CUỘN
===================================================== */

.box-back-home-btn,
.acc-back-btn,
.acc-back-home-btn {

    /* trở về luồng bình thường */
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    /* LUÔN HIỆN */
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    /* ĐẨY SANG PHẢI */
    margin-left: auto !important;
    margin-right: 12px !important;

    margin-top: 10px !important;
    margin-bottom: 18px !important;

    /* kích thước */
    width: 100px !important;
    height: 34px !important;

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

    padding: 0 12px !important;

    box-sizing: border-box !important;

    /* giao diện */
    background:
        linear-gradient(
            135deg,
            #078bd3 0%,
            #12a9e5 100%
        ) !important;

    color: #ffffff !important;

    border:
        1px solid rgba(255,255,255,.95) !important;

    border-radius: 999px !important;

    box-shadow:
        0 7px 18px rgba(0,91,145,.22) !important;

    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .8px !important;

    text-decoration: none !important;

    /* TẮT CODE CHUYỂN ĐỘNG CŨ */
    transform: none !important;
    animation: none !important;

    z-index: 20 !important;
}


/* TẮT hiệu ứng cũ nếu có */
.box-back-home-btn::before,
.box-back-home-btn::after,
.acc-back-btn::before,
.acc-back-btn::after,
.acc-back-home-btn::before,
.acc-back-home-btn::after {

    content: none !important;
}
/* =========================================
   FIX NÚT QUAY LẠI NGANG HÀNG TIÊU ĐỀ
========================================= */

.section-title {
    position: relative !important;
}


/* tạo khoảng trống bên phải để nút không đè chữ */
.box-section .section-title h2 {
    padding-right: 115px !important;
}


/* nút nằm đúng ngang dòng CHỌN TÚI MÙ */
.box-back-home-btn {
    position: absolute !important;

    right: 0 !important;

    /* chỉnh đúng ngang tâm tiêu đề */
    top: 24px !important;

    width: 92px !important;
    height: 32px !important;

    margin: 0 !important;

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

    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            #078bd3,
            #18b5ef
        ) !important;

    color: #fff !important;

    border: 1px solid rgba(255,255,255,.9) !important;

    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .8px !important;

    box-shadow:
        0 7px 16px rgba(0,91,145,.18) !important;

    transform: none !important;
    animation: none !important;
}
/* =====================================================
   SHOP ACC - TIÊU ĐỀ + QUAY LẠI CÙNG HÀNG
===================================================== */

/* vùng tiêu đề shop */
.acc-shop-header,
.acc-shop-title-wrap {
    position: relative !important;
}


/* SHOP ACC LIÊN QUÂN */
.acc-shop-section h1,
.acc-page h1,
.acc-shop-title {
    font-size: 24px !important;
    line-height: 1.05 !important;

    /* chừa chỗ cho nút bên phải */
    padding-right: 105px !important;

    margin-bottom: 8px !important;

    white-space: nowrap !important;
}


/* NÚT QUAY LẠI TRANG ACC */
.acc-back-btn,
.acc-back-home-btn {
    position: absolute !important;

    /* bên phải */
    right: 10px !important;

    /* đưa lên ngang với SHOP ACC LIÊN QUÂN */
    top: 22px !important;

    left: auto !important;
    bottom: auto !important;

    width: 90px !important;
    height: 32px !important;

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

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

    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            #078bd3,
            #18b5ef
        ) !important;

    border: 1px solid rgba(255,255,255,.9) !important;

    color: #ffffff !important;

    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .7px !important;

    box-shadow:
        0 7px 16px rgba(0,91,145,.18) !important;

    transform: none !important;
    animation: none !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* MOBILE */
@media(max-width:720px) {

    .acc-shop-section h1,
    .acc-page h1,
    .acc-shop-title {
        font-size: 22px !important;
        padding-right: 100px !important;
    }

    .acc-back-btn,
    .acc-back-home-btn {
        width: 88px !important;
        height: 31px !important;

        right: 8px !important;
        top: 21px !important;
    }
}
/* THU NHỎ SHOP ACC LIÊN QUÂN */
.acc-shop-section .section-title h2 {
    font-size: 25px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;

    padding-right: 90px !important;
    white-space: nowrap !important;
    transform: translateY(4px) !important;
}
/* NÚT QUAY LẠI TÚI MÙ - TO GIỐNG SHOP ACC */
.box-section .box-back-home-btn {
    width: 92px !important;
    height: 38px !important;

    padding: 0 10px !important;

    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .6px !important;

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

    border-radius: 999px !important;
}
/* =====================================================
   FIX GIAO DIỆN TÚI MÙ TRÊN MÁY TÍNH
   Không ảnh hưởng điện thoại
===================================================== */

@media (min-width: 900px) {

    /* CHỌN TÚI MÙ */
    .box-section .section-title h2 {
        font-size: 34px !important;
        line-height: 1.05 !important;
        letter-spacing: -1px !important;

        margin: 6px 0 8px !important;
        padding-right: 130px !important;

        white-space: nowrap !important;
    }


    /* 01 / BLIND BOX */
    .box-section .section-title > span {
        font-size: 8px !important;
        letter-spacing: 3px !important;
    }


    /* mô tả */
    .box-section .section-title p {
        font-size: 12px !important;
        margin-top: 8px !important;
    }


    /* QUAY LẠI */
    .box-section .box-back-home-btn {
        width: 105px !important;
        height: 38px !important;

        right: 0 !important;
        top: 22px !important;

        padding: 0 14px !important;

        font-size: 7px !important;
        letter-spacing: .8px !important;

        border-radius: 999px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
/* =====================================================
   GOLD ACCENT - STANDARD + GIÁ TÚI MÙ
===================================================== */

/* STANDARD / PREMIUM */
.product-head span:first-child {
    color: #d99b00 !important;
    font-weight: 900 !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.9),
        0 0 8px rgba(255,190,0,.20);
}


/* GIÁ 49.000đ / 79.000đ */
.product-price {
    color: #d99b00 !important;
    font-weight: 900 !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.9),
        0 0 9px rgba(255,190,0,.20);
}


/* gạch nhỏ dưới giá cũng chuyển vàng */
.product-price::after {
    background:
        linear-gradient(
            90deg,
            #ffc928,
            #ff9f00
        ) !important;

    box-shadow:
        0 0 8px rgba(255,185,0,.35);
}
/* =====================================================
   FIX VIP CARD - CHỮ SÁNG RÕ TRÊN NỀN TỐI
===================================================== */

/* nền VIP */
.vip-card .product-content {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255, 205, 90, .14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #071725 0%,
            #0b2234 55%,
            #10293d 100%
        ) !important;
}


/* SHARK BOX / PREMIUM */
.vip-card .product-content > small {
    color: #d8b35d !important;
}


/* TÚI MÙ */
.vip-card .product-content h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* phần SS VIP 79K */
.vip-card .product-content h3 span {
    color: #f2c45e !important;
    -webkit-text-fill-color: #f2c45e !important;
}


/* mô tả */
.vip-card .product-content p {
    color: #c4d1da !important;
}


/* đường kẻ */
.vip-card .product-content p {
    border-color: rgba(255,255,255,.20) !important;
}


/* GIÁ */
.vip-card .product-bottom > strong {
    color: #f3c75f !important;

    text-shadow:
        0 0 10px rgba(243,199,95,.18);
}


/* gạch nhỏ dưới giá nếu có */
.vip-card .product-bottom > strong::after {
    background:
        linear-gradient(
            90deg,
            #f3c75f,
            #ffdf8a
        ) !important;
}


/* NÚT VIP */
.vip-card .open-box-btn {
    background:
        linear-gradient(
            135deg,
            #c28725,
            #f0c65a,
            #b77518
        ) !important;

    color: #071725 !important;

    border:
        1px solid rgba(255,225,145,.75) !important;

    box-shadow:
        0 8px 22px rgba(190,135,25,.28) !important;
}


/* mũi tên */
.vip-card .open-box-btn span {
    color: #071725 !important;
}
/* =====================================================
   CARD THỨ 1 = STANDARD 49K
===================================================== */

.products .product-card:first-child .product-content {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(0, 190, 255, .20),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #dff6ff 0%,
            #bfe8f8 55%,
            #a8ddf1 100%
        ) !important;
}


/* SHARK BOX / STANDARD */
.products .product-card:first-child .product-content > small {
    color: #237fa4 !important;
}


/* TÚI MÙ */
.products .product-card:first-child .product-content h3 {
    color: #062c46 !important;
}


/* SS 49K */
.products .product-card:first-child .product-content h3 span {
    color: #008fd5 !important;
}


/* mô tả */
.products .product-card:first-child .product-content p {
    color: #52798d !important;
}


/* GIÁ 49.000đ */
.products .product-card:first-child .product-bottom > strong {
    color: #0078b8 !important;
}


/* NÚT MỞ TÚI */
.products .product-card:first-child .open-box-btn {
    background:
        linear-gradient(
            135deg,
            #006fbd,
            #00b8ee 55%,
            #008bd5
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 8px 22px
        rgba(0,145,210,.25) !important;
}


/* STANDARD TRÊN ĐẦU */
.products .product-card:first-child .product-head span:first-child {
    color: #009bd7 !important;
}
/* =====================================================
   SHOP ACC - NỀN XANH BĂNG GIỐNG TÚI MÙ 49K
===================================================== */

/* phần nội dung bên dưới ảnh của tất cả ACC */
.acc-card-content {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(0, 190, 255, .15),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #e8f8ff 0%,
            #d2f0fb 55%,
            #b9e7f7 100%
        ) !important;
}


/* nếu nội dung card của bạn không có acc-card-content
   thì áp dụng trực tiếp nền cho toàn bộ card */
.acc-card {
    background:
        linear-gradient(
            135deg,
            #e8f8ff 0%,
            #d2f0fb 55%,
            #b9e7f7 100%
        ) !important;

    border:
        1px solid rgba(0, 140, 195, .18) !important;

    box-shadow:
        0 10px 25px rgba(0, 95, 145, .10) !important;
}
/* =====================================================
   VIP 79K - LIGHT GOLD LUXURY
   Vàng champagne nhạt, sáng dần sang phải
===================================================== */

/* NỀN PHẦN DƯỚI VIP */
.vip-card .product-content {
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(255, 211, 92, .30),
            transparent 42%
        ),
        linear-gradient(
            120deg,
            #fff8df 0%,
            #ffefba 45%,
            #ffe28a 72%,
            #ffd45c 100%
        ) !important;
}


/* SHARK BOX / PREMIUM */
.vip-card .product-content > small {
    color: #a97800 !important;
    -webkit-text-fill-color: #a97800 !important;
}


/* TÚI MÙ */
.vip-card .product-content h3 {
    color: #082c43 !important;
    -webkit-text-fill-color: #082c43 !important;
}


/* SS VIP 79K */
.vip-card .product-content h3 span {
    color: #c88600 !important;
    -webkit-text-fill-color: #c88600 !important;
}


/* MÔ TẢ */
.vip-card .product-content p {
    color: #6d6758 !important;

    border-color:
        rgba(145, 104, 0, .22) !important;
}


/* GIÁ 79.000đ */
.vip-card .product-bottom > strong {
    color: #b87900 !important;
    -webkit-text-fill-color: #b87900 !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.50) !important;
}


/* GẠCH NHỎ DƯỚI GIÁ */
.vip-card .product-bottom > strong::after {
    background:
        linear-gradient(
            90deg,
            #b87900,
            #f1b82d
        ) !important;
}


/* NÚT MỞ TÚI */
.vip-card .open-box-btn {
    background:
        linear-gradient(
            120deg,
            #b87812 0%,
            #e8ad32 35%,
            #ffd76b 62%,
            #d99518 100%
        ) !important;

    color: #082536 !important;
    -webkit-text-fill-color: #082536 !important;

    border:
        1px solid rgba(255, 232, 157, .90) !important;

    box-shadow:
        0 8px 22px rgba(190, 135, 25, .25) !important;
}
/* =====================================================
   FIX MÀU 2 TÚI MÙ
   CARD 1 = STANDARD
   CARD 2 = PREMIUM
===================================================== */


/* =====================================================
   1. NỀN SAU ẢNH CẢ 2 CARD -> TRẮNG
===================================================== */

.products .product-card:nth-child(1) .product-image-area,
.products .product-card:nth-child(2) .product-image-area {
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(0, 170, 220, .05),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f9fdff 55%,
            #eef8fc 100%
        ) !important;
}


/* vòng tròn phía sau ảnh giữ xanh rất nhẹ */
.products .product-card .image-ring {
    border-color:
        rgba(0, 150, 210, .16) !important;
}


/* =====================================================
   2. THANH STANDARD -> XANH BĂNG
===================================================== */

.products .product-card:nth-child(1) .product-head {
    background:
        linear-gradient(
            120deg,
            #dff6ff 0%,
            #c5ecfa 55%,
            #aee3f7 100%
        ) !important;
}


/* STANDARD */
.products .product-card:nth-child(1) .product-head span {
    color: #008fc9 !important;
    -webkit-text-fill-color: #008fc9 !important;
}


/* số 01 */
.products .product-card:nth-child(1) .product-head b {
    color: #1284ad !important;
}


/* =====================================================
   3. THANH PREMIUM -> VÀNG
===================================================== */

.products .product-card:nth-child(2) .product-head {
    background:
        linear-gradient(
            120deg,
            #fff8df 0%,
            #ffecad 55%,
            #ffd667 100%
        ) !important;
}


/* PREMIUM */
.products .product-card:nth-child(2) .product-head span {
    color: #b77800 !important;
    -webkit-text-fill-color: #b77800 !important;
}


/* số 02 */
.products .product-card:nth-child(2) .product-head b {
    color: #a66c00 !important;
}
/* =====================================================
   SHARK BOX - WATER GLASS BACKGROUND
   Hiệu ứng cho vùng trắng phía sau ảnh
===================================================== */

/* vùng ảnh của cả 2 túi */
.products .product-card:nth-child(1) .product-image-area,
.products .product-card:nth-child(2) .product-image-area {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255,255,255,.95) 0%,
            rgba(244,251,255,.95) 45%,
            rgba(228,245,252,.92) 100%
        ) !important;
}


/* =========================================
   STANDARD - ÁNH NƯỚC XANH
========================================= */

.products .product-card:nth-child(1) .product-image-area::before {
    content: "";
    position: absolute;

    width: 360px;
    height: 360px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,190,245,.13) 0%,
            rgba(0,190,245,.07) 30%,
            transparent 68%
        );

    border:
        1px solid rgba(0,170,225,.13);

    box-shadow:
        0 0 50px rgba(0,180,235,.08),
        inset 0 0 40px rgba(0,180,235,.05);

    animation:
        sharkWaterPulse 4s ease-in-out infinite;

    pointer-events: none;
    z-index: -1;
}


/* =========================================
   VIP - ÁNH VÀNG CHAMPAGNE
========================================= */

.products .product-card:nth-child(2) .product-image-area::before {
    content: "";
    position: absolute;

    width: 360px;
    height: 360px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,205,70,.14) 0%,
            rgba(255,218,110,.07) 32%,
            transparent 68%
        );

    border:
        1px solid rgba(225,175,45,.14);

    box-shadow:
        0 0 50px rgba(235,185,50,.08),
        inset 0 0 40px rgba(255,210,80,.05);

    animation:
        sharkWaterPulse 4s ease-in-out infinite;

    pointer-events: none;
    z-index: -1;
}


/* =========================================
   DẢI ÁNH SÁNG CHẠY QUA NỀN
========================================= */

.products .product-card .product-image-area::after {
    content: "";

    position: absolute;

    top: -30%;
    left: -45%;

    width: 32%;
    height: 160%;

    transform: rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    filter: blur(10px);

    animation:
        sharkLightMove 6s ease-in-out infinite;

    pointer-events: none;
    z-index: 0;
}


/* ảnh luôn nằm trên hiệu ứng */
.products .product-card .product-image-area img,
.products .product-card .product-image-area video {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes sharkWaterPulse {

    0%, 100% {
        transform:
            translate(-50%, -50%)
            scale(.92);

        opacity: .55;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.08);

        opacity: 1;
    }
}


@keyframes sharkLightMove {

    0% {
        left: -45%;
        opacity: 0;
    }

    20% {
        opacity: .6;
    }

    55% {
        opacity: .35;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}


/* giảm chuyển động nếu thiết bị yêu cầu */
@media (prefers-reduced-motion: reduce) {

    .products .product-card .product-image-area::before,
    .products .product-card .product-image-area::after {
        animation: none !important;
    }
}
/* =====================================================
   FIX 49K / VIP BỊ HIỆU ỨNG CHE
===================================================== */

/* vùng ảnh */
.product-image-area {
    position: relative !important;
    isolation: isolate !important;
}


/* hiệu ứng nền phải nằm dưới */
.product-image-area::before {
    z-index: 0 !important;
}

.product-image-area::after {
    z-index: 1 !important;
}


/* card ảnh / video nằm trên hiệu ứng nền */
.game-image-card {
    position: relative !important;
    z-index: 3 !important;
}


/* ảnh và video */
.game-image-card img,
.game-image-card video,
.game-video {
    position: relative !important;
    z-index: 3 !important;
}


/* lớp gradient trên ảnh */
.image-gradient {
    z-index: 4 !important;
}


/* QUAN TRỌNG:
   49K / VIP luôn nằm trên cùng
*/
.image-badge {
    position: absolute !important;
    z-index: 10 !important;
}


/* chữ nhỏ SHARK BOX / PREMIUM */
.image-badge small {
    position: relative !important;
    z-index: 11 !important;
}


/* chữ 49K / VIP */
.image-badge strong {
    position: relative !important;
    z-index: 12 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    text-shadow:
        0 2px 8px rgba(0,0,0,.35) !important;
}
/* =====================================================
   MODBOX - FILE ĐÃ MUA
===================================================== */

#purchasedFilesList .history-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;

    width: 100% !important;
    min-height: 78px !important;

    padding: 14px 16px !important;
    box-sizing: border-box !important;
}


/* phần tên file */
#purchasedFilesList .history-item > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}


/* tên file */
#purchasedFilesList .history-name {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}


/* chữ đã mua */
#purchasedFilesList .history-time {
    margin-top: 5px !important;

    font-size: 10px !important;
    line-height: 1.2 !important;
}


/* khu nút */
#purchasedFilesList .history-item > div:last-child {
    flex: 0 0 auto !important;
}


/* NÚT TẢI FILE */
.purchased-download-btn {
    display: inline-flex !important;

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

    width: auto !important;
    min-width: 100px !important;
    height: 38px !important;

    padding: 0 16px !important;

    border-radius: 12px !important;

    background:
        linear-gradient(
            110deg,
            #0876c9,
            #00aee8
        ) !important;

    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    letter-spacing: .6px !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    overflow: visible !important;

    box-sizing: border-box !important;

    box-shadow:
        0 6px 14px
        rgba(0,130,210,.20) !important;
}


/* MOBILE */
@media (max-width:720px) {

    #purchasedFilesList .history-item {
        padding: 12px !important;
        gap: 10px !important;
    }

    #purchasedFilesList .history-name {
        font-size: 11px !important;
    }

    .purchased-download-btn {
        min-width: 88px !important;
        height: 36px !important;

        padding: 0 11px !important;

        font-size: 9px !important;

        border-radius: 10px !important;
    }
}
/* =====================================================
   MODBOX - CĂN GIỮA CHỮ TRONG NÚT POPUP
===================================================== */

.modal-action,
.modal button,
#modal button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    line-height: 1 !important;

    height: 46px !important;
    min-height: 46px !important;

    padding: 0 20px !important;

    box-sizing: border-box !important;
}

/* Nút TẢI FILE */
.modal-action {
    font-family: inherit !important;
    font-weight: 800 !important;
    letter-spacing: .5px !important;
}

/* Nếu nút có icon ↓ */
.modal-action span,
.modal-action svg,
.modal-action i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Khoảng cách giữa icon và chữ */
.modal-action span + span,
.modal-action svg + span,
.modal-action i + span {
    margin-left: 5px !important;
}
/* =====================================================
   MODBOX - ẨN HOÀN TOÀN KHU VỰC TÚI MÙ
===================================================== */

/* Ẩn section túi mù */
#boxes,
.box-section,
.blind-box-section,
#blindBoxSection {
    display: none !important;
}
/* KHÓA CUỘN Ở TRANG SẢNH */
body.home-page {
    height: 100vh;
    overflow: hidden !important;
}
/* =====================================================
   MODBOX - DARK PREMIUM CARD
   Ghi đè giao diện card SHOP FILE MOD
===================================================== */

.acc-card {
    background: linear-gradient(
        145deg,
        #12324a 0%,
        #081d30 100%
    ) !important;

    border: 1px solid rgba(70, 211, 255, 0.35) !important;

    border-radius: 16px !important;

    box-shadow:
        0 12px 30px rgba(0, 15, 30, 0.28),
        0 0 0 1px rgba(30, 180, 230, 0.06) !important;

    overflow: hidden !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}


/* HOVER CARD */
.acc-card:hover {
    transform: translateY(-4px) !important;

    border-color:
        rgba(75, 220, 255, 0.65) !important;

    box-shadow:
        0 18px 38px rgba(0, 15, 30, 0.38),
        0 0 20px rgba(20, 190, 240, 0.10) !important;
}


/* PHẦN CHỨA NỘI DUNG */
.acc-card-body {
    background:
        linear-gradient(
            180deg,
            rgba(18, 50, 74, 0.98),
            rgba(7, 27, 45, 0.98)
        ) !important;
}


/* MÃ MOD */
.acc-card-code {
    color: #4bdcff !important;

    font-weight: 900 !important;

    letter-spacing: 1.2px !important;
}


/* TÊN FILE / TÊN SKIN */
.acc-card-body h3 {
    color: #ffffff !important;

    font-weight: 900 !important;
}


/* CÁC TAG ANDROID / FILE MOD */
.acc-info span {
    background:
        rgba(60, 205, 255, 0.10) !important;

    color: #72ddff !important;

    border:
        1px solid rgba(70, 210, 255, 0.25) !important;

    border-radius: 20px !important;
}


/* TAG TẢI SAU KHI MUA */
.acc-info .acc-status {
    background:
        rgba(255, 255, 255, 0.07) !important;

    color:
        rgba(255, 255, 255, 0.78) !important;

    border-color:
        rgba(255, 255, 255, 0.12) !important;
}


/* GIÁ */
.acc-card-price {
    color: #42d8ff !important;

    font-weight: 900 !important;

    text-shadow:
        0 0 12px rgba(50, 210, 255, 0.20);
}


/* NÚT MUA FILE */
.acc-buy-btn {
    background:
        linear-gradient(
            135deg,
            #0798d8 0%,
            #16c5f4 100%
        ) !important;

    color: #ffffff !important;

    border:
        1px solid rgba(255, 255, 255, 0.35) !important;

    box-shadow:
        0 8px 22px rgba(0, 160, 220, 0.25) !important;
}


/* HOVER NÚT */
.acc-buy-btn:hover {
    background:
        linear-gradient(
            135deg,
            #08a9e9 0%,
            #31d7ff 100%
        ) !important;

    box-shadow:
        0 11px 28px rgba(0, 180, 240, 0.38) !important;

    transform: translateY(-2px);
}


/* ẢNH */
.acc-card-image {
    border-bottom:
        1px solid rgba(80, 210, 255, 0.15) !important;
}
/* =====================================================
   FILE ĐÃ MUA - NÚT TẢI
===================================================== */

.mod-history-item {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        12px !important;

    padding:
        14px 16px !important;

    background:
        rgba(255,255,255,.32) !important;

    border-bottom:
        1px solid
        rgba(20,100,140,.12) !important;

    box-sizing:
        border-box !important;
}


/* TÊN FILE */

.mod-history-info {
    min-width:
        0 !important;

    flex:
        1 !important;
}


.mod-history-item .history-name {
    color:
        #09263b !important;

    font-size:
        12px !important;

    font-weight:
        900 !important;

    line-height:
        1.25 !important;

    text-transform:
        uppercase !important;
}


.mod-history-item .history-time {
    margin-top:
        5px !important;

    color:
        rgba(20,60,80,.55) !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;
}


/* =====================================================
   NÚT ↓ TẢI FILE
===================================================== */

.history-download-btn {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex-shrink:
        0 !important;

    min-width:
        92px !important;

    height:
        34px !important;

    padding:
        0 13px !important;

    box-sizing:
        border-box !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            135deg,
            #0798d8 0%,
            #16c5f4 100%
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.55) !important;

    color:
        #ffffff !important;

    text-decoration:
        none !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .4px !important;

    box-shadow:
        0 5px 14px
        rgba(0,150,210,.22) !important;

    transition:
        .2s ease !important;
}


.history-download-btn:hover {

    transform:
        translateY(-2px) !important;

    background:
        linear-gradient(
            135deg,
            #08a9e9 0%,
            #31d7ff 100%
        ) !important;

    box-shadow:
        0 8px 18px
        rgba(0,180,240,.32) !important;
}


.history-download-btn:active {

    transform:
        translateY(0) !important;

}


/* =====================================================
   FILE ĐANG CẬP NHẬT
===================================================== */

.history-file-wait {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-width:
        92px !important;

    height:
        34px !important;

    padding:
        0 12px !important;

    box-sizing:
        border-box !important;

    border-radius:
        999px !important;

    background:
        rgba(10,50,70,.08) !important;

    border:
        1px solid
        rgba(10,80,110,.12) !important;

    color:
        rgba(10,50,70,.55) !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;
}
/* =====================================================
   MODBOX - NỀN SHOP NHẸ, KHÔNG GÂY PHÂN TÂM
   ===================================================== */

.acc-shop-section {
  position: relative !important;
  overflow: hidden !important;

  /* Nền xanh trắng rất nhẹ */
  background: #f3fbfd !important;
}


/* Tắt toàn bộ hiệu ứng trang trí nền */
.acc-shop-section::before,
.acc-shop-section::after {
  display: none !important;
  content: none !important;
}


/* =====================================================
   CARD MOD - NỔI BẬT TRÊN NỀN NHẸ
   ===================================================== */

.acc-card {
  background: linear-gradient(
    145deg,
    #e8faff 0%,
    #dff6fb 55%,
    #d5f1f7 100%
  ) !important;

  border: 1px solid rgba(30, 160, 195, 0.20) !important;

  border-radius: 16px !important;

  box-shadow:
    0 8px 22px rgba(30, 120, 150, 0.12) !important;
}


/* Phần nội dung card */
.acc-card-body {
  background: linear-gradient(
    180deg,
    #e9faff 0%,
    #e0f6fa 100%
  ) !important;
}


/* =====================================================
   CHỮ TRÊN CARD
   ===================================================== */

.acc-card-code {
  color: #159bc1 !important;
}

.acc-card-body h3 {
  color: #17485a !important;
  font-weight: 900 !important;
}


/* Thông tin */
.acc-info span {
  background: rgba(255,255,255,0.65) !important;
  border: 1px solid rgba(30,160,195,0.14) !important;
  color: #347d8f !important;
}


/* Trạng thái */
.acc-info .acc-status {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(30,160,195,0.10) !important;
  color: #62838c !important;
}


/* Giá */
.acc-card-price {
  color: #079dcc !important;
  text-shadow: none !important;
}


/* Đường ngăn dưới ảnh */
.acc-card-image {
  border-bottom: 1px solid rgba(30,160,195,0.12) !important;
}


/* =====================================================
   NÚT MUA - GIỮ NỔI BẬT
   ===================================================== */

.acc-buy-btn {
  background: linear-gradient(
    135deg,
    #079bd8 0%,
    #16c4ed 100%
  ) !important;

  color: #fff !important;

  border: 1px solid rgba(255,255,255,0.7) !important;

  box-shadow:
    0 6px 16px rgba(0,150,210,0.18) !important;
}

.acc-buy-btn:hover {
  background: linear-gradient(
    135deg,
    #08a9e7 0%,
    #29d2f5 100%
  ) !important;

  box-shadow:
    0 8px 20px rgba(0,160,220,0.22) !important;
}
/* =====================================================
   MODBOX - LỊCH SỬ / FILE ĐÃ MUA TRẮNG
   + GIỮ NGUYÊN MÀU PHẦN VÍ
   + HIỆU ỨNG KÍNH / BÓNG NHẸ
   ===================================================== */


/* ================================
   1. GIỮ NGUYÊN NỀN PHẦN VÍ
   ================================ */

.account-section {
  /* KHÔNG đổi background của ví */
  position: relative !important;
}


/* ================================
   2. KHU VỰC LỊCH SỬ / FILE ĐÃ MUA
   ================================ */

.purchased-section,
.purchase-history,
.history-section,
#purchasedFiles,
#purchasedFilesList {
  background: #ffffff !important;
}


/* Tắt hiệu ứng nền cũ của lịch sử */
.purchased-section::before,
.purchased-section::after,
.purchase-history::before,
.purchase-history::after,
.history-section::before,
.history-section::after {
  display: none !important;
  content: none !important;
}


/* ================================
   3. CARD FILE ĐÃ MUA
   ================================ */

.purchased-file-item,
.purchase-item,
.history-item {

  background: rgba(255,255,255,0.88) !important;

  border: 1px solid rgba(20,140,175,0.12) !important;

  border-radius: 16px !important;

  box-shadow:
    0 4px 14px rgba(30,90,110,0.08),
    0 1px 3px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    transform .2s ease,
    box-shadow .2s ease !important;
}


/* Hiệu ứng nổi nhẹ khi rê chuột */
.purchased-file-item:hover,
.purchase-item:hover,
.history-item:hover {

  transform: translateY(-2px) !important;

  box-shadow:
    0 8px 22px rgba(30,100,125,0.12),
    0 2px 5px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}


/* ================================
   4. TIÊU ĐỀ LỊCH SỬ
   ================================ */

.purchased-section h2,
.purchase-history h2,
.history-section h2 {

  color: #183f4d !important;

  text-shadow:
    0 1px 1px rgba(255,255,255,0.8) !important;
}


/* ================================
   5. CHỮ FILE ĐÃ MUA
   ================================ */

.purchased-file-item h3,
.purchase-item h3,
.history-item h3 {

  color: #214c5b !important;

  font-weight: 800 !important;
}


/* ================================
   6. THÔNG TIN PHỤ
   ================================ */

.purchased-file-item span,
.purchase-item span,
.history-item span {

  color: #6b8790 !important;
}


/* ================================
   7. NÚT TẢI
   ================================ */

.purchased-download-btn {

  background: linear-gradient(
    135deg,
    #079bd8 0%,
    #16c4ed 100%
  ) !important;

  color: #ffffff !important;

  border: 1px solid rgba(255,255,255,0.7) !important;

  box-shadow:
    0 5px 14px rgba(0,150,210,0.18),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}


/* ================================
   8. HIỆU ỨNG KÍNH NHẸ
   ================================ */

.purchased-file-item::before,
.purchase-item::before,
.history-item::before {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  border-radius: inherit !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.45),
      transparent 45%
    ) !important;

  opacity: .55 !important;
}
/* =====================================================
   MODBOX - CARD XANH BIỂN ĐẬM HƠN
   ===================================================== */

.acc-card {
  background: linear-gradient(
    145deg,
    #c9edf6 0%,
    #b7e3ee 50%,
    #a6d9e6 100%
  ) !important;

  border: 1px solid rgba(20, 140, 175, 0.28) !important;

  box-shadow:
    0 8px 22px rgba(30, 120, 150, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}


/* Phần nội dung card */
.acc-card-body {
  background: linear-gradient(
    180deg,
    #cceff7 0%,
    #bce6ef 55%,
    #addce7 100%
  ) !important;
}


/* Mã S1 / S2 / S3 / S4 */
.acc-card-code {
  color: #087fa5 !important;
}


/* Tên sản phẩm */
.acc-card-body h3 {
  color: #123f50 !important;
  font-weight: 900 !important;
}


/* Thông tin */
.acc-info span {
  background: rgba(255,255,255,0.48) !important;
  border: 1px solid rgba(20,140,175,0.20) !important;
  color: #216b7d !important;
}


/* Trạng thái */
.acc-info .acc-status {
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(20,140,175,0.16) !important;
  color: #557984 !important;
}


/* Giá */
.acc-card-price {
  color: #057fa8 !important;
  text-shadow: 0 1px 4px rgba(0,130,170,0.10) !important;
}


/* Đường ngăn dưới ảnh */
.acc-card-image {
  border-bottom: 1px solid rgba(20,140,175,0.18) !important;
}
/* =====================================================
   MODBOX - LÀM CHỮ TRÊN CARD NỔI HƠN
   ===================================================== */

/* Mã S1 / S2 / S3 / S4 */
.acc-card-code {
  color: #006b8f !important;
  font-weight: 900 !important;
  text-shadow:
    0 1px 1px rgba(255,255,255,0.65) !important;
}


/* Tên file */
.acc-card-body h3 {
  color: #0b3545 !important;
  font-weight: 900 !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.65),
    0 2px 4px rgba(0,60,80,0.10) !important;
}


/* Các thông tin nhỏ */
.acc-info span {
  color: #155c70 !important;
  font-weight: 700 !important;

  background: rgba(255,255,255,0.58) !important;

  text-shadow:
    0 1px 1px rgba(255,255,255,0.7) !important;
}


/* Trạng thái */
.acc-info .acc-status {
  color: #315d69 !important;
  font-weight: 700 !important;

  background: rgba(255,255,255,0.68) !important;
}


/* Giá tiền */
.acc-card-price {
  color: #006d94 !important;
  font-weight: 950 !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.7),
    0 2px 5px rgba(0,100,135,0.15) !important;
}
/* =====================================================
   MODBOX - PHẦN BÊN TRONG LỊCH SỬ MUA FILE MÀU XANH
   ===================================================== */

/* Khung chứa danh sách file đã mua */
#purchasedFilesList {
  background: #dff4fa !important;
  border-radius: 18px !important;
  padding: 12px !important;
}


/* Từng file đã mua */
.purchased-file-item,
.purchase-item,
.history-item {
  background: linear-gradient(
    145deg,
    #c9edf6 0%,
    #b8e4ee 100%
  ) !important;

  border: 1px solid rgba(20, 140, 175, 0.22) !important;

  border-radius: 14px !important;

  box-shadow:
    0 5px 16px rgba(20, 110, 140, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.7) !important;
}


/* Tên FILE MOD SKIN */
.purchased-file-item h3,
.purchase-item h3,
.history-item h3 {
  color: #103f50 !important;
  font-weight: 900 !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.65) !important;
}


/* Thông tin ngày mua / hạn sử dụng */
.purchased-file-item span,
.purchase-item span,
.history-item span {
  color: #397080 !important;
}


/* Nút tải */
.purchased-download-btn {
  background: linear-gradient(
    135deg,
    #079bd8 0%,
    #16c4ed 100%
  ) !important;

  color: #fff !important;

  border: 1px solid rgba(255,255,255,0.7) !important;

  box-shadow:
    0 5px 14px rgba(0,150,210,0.18) !important;
}