@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap);
body{margin:0;padding:0;font-family:"SF Pro",sans-serif;background-size:cover;background-attachment:fixed;color:#fff;overflow-x:hidden;overflow-y:hidden;height:100vh}
.number-reward{width:260px;margin:20px auto 0}
.prize-number span{display:inline-block;white-space:nowrap;transform-origin:left center}
.number-reward .prize-number{display:block;width:260px;height:130px;background-image:url(../images/bg_reward.png);background-size:contain;background-repeat:no-repeat;background-position:center;padding-left:15px;font-size:38px;font-weight:900;color:#fff9c9;text-shadow:0 3px 0 #00000055,0 6px 10px rgb(0 0 0/.5);border-radius:20px}
.number-reward .prize-number span{ min-width: 140px; margin-top: 30px; float: left;}
.text-main{background:linear-gradient(90deg,#EC6612 0%,#F50000 100%);-webkit-background-clip:text;background-clip:text;color:#fff0}
.container{text-align:center}
.top-logo img{width:350px}
.title-box{width:100%}
.title-box .title-mobile{display:none}
.title-box .title-pc{display:block;width:100%;max-width:800px;margin:0 auto}
.chest img{width:600px;height:400px}
.form-box{margin:20px auto 20px;background:#fff;padding:15px 20px;border-radius:12px;width:95%;max-width:800px}
.input-wrapper{gap:20px}
.input-box{flex:1;display:flex;flex-direction:column;gap:6px;margin-bottom:15px;text-align:left}
.input-box label{font-weight:700;font-size:16px}
.input-box input{background-color:#EFEFEF;width:100%;padding:10px 12px;font-size:16px;border-radius:8px;border:none;outline:none}
.input-stk{box-shadow:0 4px 4px rgb(0 0 0/.25)}
.otp-wrapper{display:flex;gap:12px}
.otp-input{border-radius:10px;text-align:center;font-size:16px;width:48px!important}
.btn-box{display:flex;justify-content:center;gap:24px;margin-top:20px}
.btn-box.phan-thuong-btn{display: block;padding: 50px 0px;}

.btn-box.phan-thuong-btn .box-item{margin-bottom: 20px;}
.btn-box.phan-thuong-btn button{background: url('../images/bg_btn.png') no-repeat top center;border: 0px; width: 100%;color: #fff; font-weight: bold; height: 69px;font-size: 15px;max-width: 404px;position: relative;}
.btn-box.phan-thuong-btn .box-x-multiple{position: relative; max-width: 404px; margin: 0px auto;}
.btn-box.phan-thuong-btn .x-multiple{position: absolute;top: -20px; left: 20px;display: inline-block;animation: scalePulse 1s infinite ease-in-out; transform-origin: center;
        background: linear-gradient(180deg, #FFFBD6 32.93%, #FFC902 82.93%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-family: 'UTM Avo', sans-serif;
    -webkit-text-stroke: 1.5px #C00000;
    font-size: 25px; z-index: 2;
}

.btn-box.phan-thuong-btn .btn-napngay {
    position: relative;
    overflow: hidden; /* bắt buộc */
    border-radius: 30px;
}

/* lớp shine */
.btn-box.phan-thuong-btn .btn-napngay::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -150%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.75),
        transparent
    );
    transform: skewX(-25deg);
    animation: shineDiagonal 2.8s ease-in-out infinite;
    pointer-events: none;
}

.btn-box.phan-thuong-btn .box-item  i{ background: linear-gradient(180deg, #FFFFFF 32.93%, #FFF2A9 82.93%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    font-size: 24px;
    font-weight: bold;
    font-family: 'UTM Avo', sans-serif;
    font-style: normal;
}
.btn-box.phan-thuong-btn .box-item .total-price.multiple{
    background: linear-gradient(180deg, #FFFBD6 32.93%, #ffff00 82.93%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-family: 'UTM Avo', sans-serif;
}


@keyframes shineDiagonal {
    0% {
        left: -150%;
    }
    50% {
        left: 130%;
    }
    100% {
        left: -150%;
    }
}

@keyframes scalePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.phan-thuong-wrapper{ background: url("../images/phanthuong-frame.png") no-repeat center top;}
.btn-hd,.btn-xn,.btn-open-ruong,.pt-napngay,.pt-nhanthuong{cursor:pointer}
.event-modal{background:#252525;border:1px solid #EC6612;border-radius:12px;color:#fff;padding:10px 20px;position:relative}
.modal-header{padding:0}
.modal-title{font-size:24px}
.section-title{font-size:18px;font-weight:700;margin-bottom:10px;text-transform:uppercase}
.event-section ul{padding-left:0}
.event-section ul li{margin-bottom:6px;list-style:none;text-align:start}
.btn-close-white{background:#fff0;border:none}
.btn-close-white img{width:32px;height:32px}
.error-msg{color:#f44;font-size:14px;margin-top:-4px}
.mo-ruong{display:none;text-align:center;cursor:pointer;position:absolute;top:calc(65vh - 100px);left:50%;transform:translateX(-50%)}
.mo-ruong img{max-width:280px;width:100%}
#huongdan-close{position:relative}
.ptcb img{width:60%}
.open-chest-modal,.final-prize-modal{background:#fff0;border:none}
.chest-open .img-open{width:90%}
.chest-open .final-prize{margin:auto;width:33%}
.chest-open .final-chest{width:70%;margin:auto}
.modal-backdrop.show{opacity:.8!important;background-color:#000!important}

@keyframes shakeChest{0%{transform:rotate(0)}20%{transform:rotate(5deg)}40%{transform:rotate(-5deg)}60%{transform:rotate(4deg)}80%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.chest-open.shake{animation:shakeChest 2s ease-in-out}
.img-final{display:none}
.img-final.show{display:block}
.phan-thuong-wrapper{display:none;margin-top:-30px}
.spin-frame{padding-top:130px;position:relative}
.first-character,.second-character,.third-character,.four-character{position:absolute;font-size:75px;font-weight:700}
.first-character{bottom:30px;left:38%}
.second-character{bottom:30px;left:45%}
.third-character{bottom:30px;left:52%}
.four-character{bottom:30px;left:58.5%}
.phan-thuong-title{padding:35px}
.phan-thuong-btn{padding:100px 0}

@media(max-width:1400px){
.first-character{left:36%}
.second-character{left:44%}
.third-character{left:52%}
.four-character{left:60%}
}

@media(max-width:1200px){
.first-character{left:34%}
.second-character{left:43%}
.third-character{left:52%}
.four-character{left:62%}
}

@media(max-width:992px){
.title-box img,.ptcb img{width:100%}
.chest-open .final-prize{width:56%}
.chest-open .final-chest{width:100%}
.phan-thuong-wrapper{background-size:100% auto!important}
.phan-thuong-wrapper .btn-box{gap:12px;margin:20px 80px 0}
.spin-frame{padding-top:95px}
.spin-frame img{width:51%}
.first-character,.second-character,.third-character,.four-character{font-size:55px}
.first-character{left:33%;bottom:25px}
.second-character{left:43%;bottom:25px}
.third-character{left:53%;bottom:25px}
.four-character{left:62%;bottom:25px}
.phan-thuong-title{padding:12px;font-size:16px}
.pt-nhanthuong img,.pt-napngay img{width:100%}
}

@media(max-width:767px){
body{min-height:100svh;overflow-x:hidden;overflow-y:auto}
.title-box .title-pc{display:none}
.title-box .title-mobile{display:block;width:100%}
.chest img{width:80%;height:auto}
.mo-ruong{top:calc(58vh - 100px)}
.mo-ruong img{max-width:250px}
.form-box{padding:10px;margin:15px auto 30px;max-width:92%;width:92%}
.input-wrapper{flex-direction:column;gap:8px}
.input-box{margin-bottom:8px}
.input-box label{font-size:13px}
.input-box input{font-size:14px;padding:10px 12px}
.btn-xn img,.btn-hd img{width:100%}
.modal-title{font-size:20px}
.section-title{font-size:16px}
.event-section ul li{font-size:14px}
.btn-close-white img{width:24px;height:24px}
.chest-open .img-open{width:80%}
.chest-open .final-prize{width:75%}
.chest-open .final-chest{width:80%}
#xacnhan-prize img{width:50%!important}
.phan-thuong-wrapper{margin-top:50px}
.spin-frame{padding-top:150px;}
.spin-frame img{width:40%}
.first-character,.second-character,.third-character,.four-character{font-size:30px}
.first-character{left:37%;bottom:15px}
.second-character{left:45%;bottom:15px}
.third-character{left:52%;bottom:15px}
.four-character{left:60%;bottom:15px}
.phan-thuong-title{padding:8px;font-size:14px}
}

@media screen and (max-width: 767px) {
#huongdan-close .chest{
    min-height: 250px; 
    margin-top: 20px;
    background-size: 
        85% 85%,
        95% 95%;
    background-position: 
        center center,
        center center;
}
.chest-img{
    width: 50%;
    margin-top: -30px;
}

.btn-box.phan-thuong-btn .box-item{margin-bottom: 5px;}
.btn-box.phan-thuong-btn button{height: 53px; font-size: 11px; background-size: contain; line-height: 1.2;}

.btn-box.phan-thuong-btn{margin-left: 50px; margin-right: 50px; margin-top: 50px; padding: 45px 30px;}

.btn-box.phan-thuong-btn button .break-mobile{display: block; margin-top: 0px;}

.phan-thuong-wrapper{ background: url("../images/phanthuong-frame-mobile2.png") no-repeat center top; }

.phan-thuong-title div{margin-bottom: 5px;}

.btn-box.phan-thuong-btn .box-item i{font-size: 19px;}
.btn-box.phan-thuong-btn .x-multiple{top:-15px;font-size: 20px;}}

.box-confirm-popup{
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
}
.box-confirm-popup .box-confirm-popup-inner{position: relative;background: #FDF6EB;padding:16px 8px;min-width: 350px;border:2px solid #F40000;border-radius: 31px;text-align: center;}
.box-confirm-popup button{background: transparent;border:0px;outline: 0;}
.box-confirm-popup button.btn-close{position: absolute;top: 2px;right:13px;}
.box-confirm-popup .box-content{font-size: 17px;font-weight: bold;color:#000000;margin-bottom: 40px;}
.box-confirm-popup .box-content .total-price{color:#FF0000;font-size: 23px;}

@media(max-width:575px){
.top-logo img{width:100%}
.btn-open-ruong img{width:275px}
#xacnhan-prize img{width:230px!important}
.btn-box.phan-thuong-btn .box-item i{font-size: 14px;}
}

@media(max-width:500px){

.first-character,.second-character,.third-character,.four-character{font-size:25px}
.btn-box.phan-thuong-btn{margin-top: 15px;}
}

@media screen and (max-width: 450px) {
    .btn-box.phan-thuong-btn button{height: 42px; font-size: 11px; background-size: contain;}
    .btn-box.phan-thuong-btn .box-item{margin-bottom: 5px;}

    .phan-thuong-title{font-size:12px}
    .spin-frame{padding-top:100px}
    .first-character,.second-character,.third-character,.four-character{font-size:24px}

    .btn-box.phan-thuong-btn{margin-top: 33px;}
    .btn-box.phan-thuong-btn .btn-napngay{height: 42px;}

/* 
    
    .spin-frame img{ max-width: 215px; margin-top: 20px; width: 100%;}
    .first-character, .second-character, .third-character, .four-character{font-size: 33px;font-weight: bold;}
    .first-character{left: 31%;}
    .second-character{left:42%;}
    .third-character{left:53%;}
    .four-character{left:65%} */
    .phan-thuong-title{font-size: 12px;}
    .phan-thuong-title div{margin-bottom: 5px;}

}


@media(max-width:400px){
.phan-thuong-wrapper .btn-box{margin:0 40px}
.first-character,.second-character,.third-character,.four-character{font-size:22px;bottom:14px}
.btn-box.phan-thuong-btn{margin-bottom: 10px;}
}

@media(max-width:375px){
.phan-thuong-wrapper .btn-box{padding:50px 0 60px;margin:0 35px}
.spin-frame{padding-top:60px}
.first-character,.second-character,.third-character,.four-character{bottom:9px}
}

@media(max-width:365px){
.mo-ruong img{max-width:220px}
.mo-ruong{top:calc(56vh - 100px)}
.form-box{padding:8px;margin:10px auto 20px;max-width:90%;width:90%}
.input-box label{font-size:12px}
.input-box input{font-size:14px;padding:8px 10px}
#huongdan-close .chest{
    min-height: 180px;
    margin-top: 10px;
    background-size: 
        75% 75%,
        85% 85%;
}
.chest-img{
    width: 45%;
    margin-top: -20px;
}
}

#huongdan-close .chest{
    width: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
    margin-top: 10px;
    position: relative;
    background-image: 
        url(../images/flash.png),
        url(../images/coin.png);
    background-position: 
        center center,
        center center;
    background-repeat: no-repeat, no-repeat;
    background-size: 
        80% 80%,
        90% 90%;
}

.chest-img{
    width: 45%;
    height: auto;
    position: relative;
    z-index: 2;
    margin-top: -30px;
}

#huongdan-close .chest.step-2{
    transform-origin:50% 80%; /* rất quan trọng – trục lắc */
    animation:chestShake 1.5s ease-in-out infinite;
    margin-top: 75px;
}

@keyframes chestShake {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(3deg); }
  30%  { transform: rotate(-3deg); }
  45%  { transform: rotate(2deg); }
  60%  { transform: rotate(-2deg); }
  75%  { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}