*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}

html,body{
    width:100%;
    min-height:100%;
}

body{
    margin:0;
    padding:0;
    overflow-x:hidden;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    background:#045e57;
}

/* APP MOBILE GIỮ NGUYÊN TRÊN CẢ MÁY TÍNH */
.app{
    width:430px;
    max-width:430px;
    min-height:100vh;
    margin:auto;
    padding:18px 14px 40px;
    position:relative;
    text-align:center;

    background:url("images/nen.jpg") no-repeat center center;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;

    box-shadow:0 0 40px rgba(0,0,0,.35);
}

/* ẨN NHƯNG GIỮ NGUYÊN KHOẢNG TRỐNG */
.bg-coins,
.title-wrap,
.title-main,
.title-sub{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* TOP */
.top-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.circle-btn{
    width:50px;
    height:50px;
    border-radius:50%;
    background:linear-gradient(#fff6d8,#efc66e);
    color:#a86718;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    font-weight:900;
    box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* RIBBON */
.ribbon{
    display:inline-block;
    margin-top:18px;
    padding:10px 22px;
    border-radius:999px;
    background:linear-gradient(180deg,#ffaf2f,#f07a00);
    color:#fff;
    font-size:16px;
    font-weight:900;
    box-shadow:0 5px 0 #b95b00,0 12px 20px rgba(0,0,0,.25);
}

/* LƯỢT QUAY */
.spin-left{
    width:75%;
    height:58px;
    margin:16px auto 20px;

    border-radius:999px;

    background:linear-gradient(
        180deg,
        #5ffcff 0%,
        #00d5ff 55%,
        #008cff 100%
    );

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

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

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

    text-shadow:0 2px 8px rgba(0,0,0,.45);

    box-shadow:
        0 0 18px rgba(0,212,255,.45),
        0 8px 24px rgba(0,0,0,.35);
}

.spin-left span{
    color:#ffe66d;
    font-size:32px;
    margin:0 4px;
}

/* STAGE */
.wheel-stage{
    position:relative;
    width:100%;
    margin-top:10px;
}

.wheel-stage::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:390px;
    height:390px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(0,217,255,.25),
        rgba(0,217,255,.08) 45%,
        transparent 75%
    );
    filter:blur(8px);
}

/* POINTER */
.pointer{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    z-index:20;

    width:0;
    height:0;

    border-left:18px solid transparent;
    border-right:18px solid transparent;
    border-top:36px solid #ffd400;

    filter:
        drop-shadow(0 3px 0 #d89d00)
        drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

.pointer::before{
    content:"";
    position:absolute;
    top:-34px;
    left:-13px;

    border-left:13px solid transparent;
    border-right:13px solid transparent;
    border-top:28px solid #fff3a0;

    opacity:.9;
}

.pointer::after{
    content:"";
    position:absolute;

    width:14px;
    height:14px;
    border-radius:50%;

    background:radial-gradient(circle,#fff7b5,#ffcb05);

    top:-45px;
    left:-7px;

    box-shadow:
        0 0 0 3px #ffd400,
        0 4px 10px rgba(0,0,0,.35);
}

/* WHEEL */
.wheel-box{
    width:320px;
    height:320px;
    margin:auto;
    position:relative;
}

.wheel{
    width:100%;
    height:100%;
    border-radius:50%;
    overflow:hidden;
    position:relative;

    /* viền chính mảnh */
    border:4px solid rgba(255,255,255,.95);

    /* viền glow hiện đại */
    box-shadow:

        /* viền cyan ngoài */
        0 0 0 6px rgba(0,217,255,.75),

        /* glow mềm */
        0 0 18px rgba(0,217,255,.35),

        /* bóng đổ */
        0 12px 28px rgba(0,0,0,.38);

    transition:transform 6s cubic-bezier(.17,.67,.15,1);
}

/* CENTER */
.center-button{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

    width:105px;
    height:105px;
    border-radius:50%;

    background:
    radial-gradient(circle at 30% 30%,
    #6fffff,
    #00cfff 45%,
    #005eff 100%);

    border:10px solid #ffe66d;

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

    color:#fff;
    font-size:22px;
    font-weight:900;

    z-index:10;
    cursor:pointer;

    text-shadow:0 2px 10px rgba(0,0,0,.5);

    box-shadow:
        0 0 25px rgba(0,212,255,.55),
        0 10px 30px rgba(0,0,0,.45);
}

/* LABEL */
.wheel-label{
    position:absolute;
    width:72px;
    text-align:center;
    color:#fff;
    font-size:10px;
    font-weight:900;
    line-height:1.05;
    text-shadow:0 2px 4px rgba(0,0,0,.5);
    z-index:5;
    transition:opacity .25s ease;
    pointer-events:none;
}

.wheel-label img{
    width:32px;
    height:32px;
    object-fit:contain;
    display:block;
    margin:0 auto 3px;
}

/* MARQUEE */
.marquee{
    width:100%;
    height:62px;
    margin:28px auto 22px;
    border-radius:18px;

    background:linear-gradient(
        180deg,
        rgba(0,20,50,.92),
        rgba(0,8,25,.96)
    );

    border:2px solid #00d9ff;

    display:flex;
    align-items:center;
    overflow:hidden;

    box-shadow:
        0 0 16px rgba(0,217,255,.45),
        0 12px 24px rgba(0,0,0,.3);
}

.speaker{
    width:52px;
    min-width:52px;
    font-size:24px;
}

.marquee-track{
    flex:1;
    overflow:hidden;
    white-space:nowrap;
}

.marquee-content{
    display:inline-block;
    white-space:nowrap;
    color:#ffd83b;
    font-size:16px;
    font-weight:900;
    animation:marquee 16s linear infinite;
}

@keyframes marquee{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
}

/* NOTE */
.note-box{
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.92),
        rgba(220,245,255,.92)
    );

    border-radius:24px;
    padding:20px 16px;

    color:#003d66;

    font-size:18px;
    font-weight:900;
    line-height:1.5;

    border:2px solid rgba(0,217,255,.45);

    box-shadow:
        0 0 20px rgba(0,212,255,.18),
        0 10px 28px rgba(0,0,0,.28);
}

/* POPUP */
.popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
}

.popup-box{
    width:90%;
    max-width:380px;
    background:linear-gradient(180deg,#fff,#fff4d7);
    border-radius:28px;
    padding:28px 22px;
    border:4px solid #ffd96d;
    text-align:center;
}

.popup-box h2{
    font-size:28px;
    color:#ff3c3c;
    margin-bottom:12px;
}

.claim-btn{
    display:inline-block;
    margin-top:20px;
    padding:14px 28px;
    border-radius:999px;
    background:linear-gradient(180deg,#ff9422,#ff5d00);
    color:#fff;
    text-decoration:none;
    font-size:20px;
    font-weight:900;
    box-shadow:0 6px 0 #b54b00,0 12px 22px rgba(0,0,0,.25);
}

/* FIX MOBILE */
html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
}

body{
    display:block !important;
    background:#000814;
}

.app{
    width:100% !important;
    max-width:430px !important;
    min-height:100vh !important;

    margin:0 auto !important;

    overflow:hidden !important;

    padding:12px 14px 40px !important;

    background:url("images/nen.jpg") no-repeat center center !important;
    background-size:cover !important;
}

/* Giữ vòng quay cố định giữa màn */
.wheel-stage{
    width:100% !important;
    overflow:visible !important;
}

.wheel-box{
    width:320px !important;
    height:320px !important;
    margin:0 auto !important;
}

.wheel-stage::before{
    width:340px !important;
    height:340px !important;
}

/* Mobile nhỏ */
@media(max-width:390px){
    .wheel-box{
        width:300px !important;
        height:300px !important;
    }

    .wheel-stage::before{
        width:320px !important;
        height:320px !important;
    }

    .center-button{
        width:88px !important;
        height:88px !important;
        font-size:24px !important;
    }
}

/* THAY CHỮ CSS THÀNH ẢNH */
.title-wrap{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;

    width:100%;
    max-width:460px;
    height:200px;

    margin:14px auto 18px;

    position:relative;
    z-index:30;

    background:url("images/chuvongquay.png") no-repeat center center;
    background-size:contain;

    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* ẨN CHỮ CSS CŨ */
.title-main,
.title-sub{
    display:none !important;
}

/* ẨN THANH CAM */
.ribbon{
    display:none !important;
}

/* MOBILE */
@media(max-width:390px){

    .title-wrap{
        max-width:310px;
        height:105px;

        margin:10px auto 16px;
    }

}