html,body {
    padding:0;
    margin: 0;
}
.footer-main {
    padding:45px 0;
    font-size: 13px;
}
body {
    background-color: #d4d4d4;
    /* overflow: hidden; */
}

.trasform-center {
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}
.wrapper {
    width: 100%;
    overflow: hidden;
}
.gate {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    /* background: blue; */
    padding-top: 258px;
    position: absolute;
    bottom: 0;
    z-index: 9;
}

.cua-trai-mobile, .cua-phai-mobile {
    display: none;
}

.group-btn-quick {
    margin-top: 6vh;
}

.leftsidegate {
    display: block;
    height: 100%;
    width: 50%;
    left: 0;
    position: relative;
    float:left;
    z-index: 10;
}

.rightsidegate {
    display: block;
    height: 100%;
    width: 50%;
    right: 0;
    position: relative;
    float:right;
    z-index: 10;
}


.gate .cot {
    width: 43.8%;
}

.gate .cua {
    width: 54.8%;
    bottom:4%;
}


.gate .cot,.cua {
    position: absolute;
    bottom: 0;
    transition: 0.5s;
}

.gate .cot-trai {
    left: 0;
    z-index: 999;
}
.gate .cot-phai { 
    right:0;
    z-index: 999;
}

.gate .cua-trai {
    left: 46%;
}

.gate .cua-phai {
    right: 46%;
    transform: scaleX(-1);
}

.di-vao .nhen-wrapper {
    margin-top:0px;
}

.mo-cua .leftsidegate {
    animation: left_stepinto 1s linear 0.2s 1 forwards;
}
.mo-cua .rightsidegate {
    animation: right_stepinto 1s linear 0.2s 1 forwards;
}

.mo-cua .tagline {
    animation: taglineFadeout 0.5s linear 0s 1 forwards;
}

.mo-cua  .menu {
    animation: taglineFadeout 0.5s linear 0s 1 forwards;
}

.mo-cua .cua-trai {
    animation: cuatrai 1s linear 0s 1 forwards;
}

.mo-cua .cua-phai {
    animation: cuatraicopy 1s linear 0s 1 forwards;
}

.di-vao .land {
    animation: landScale 1s linear 0s 1 forwards;
}

.di-vao .cemetery {
    animation: cemeteryScale 1s linear 0s 1 forwards
}

.di-vao .cemetery::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: 0.5s;
}
.di-vao .cemetery.darkness::after {
    background-color: black;
    opacity: 0.5;
}
.di-vao .cemetery.darknessDone {
    width: 140%;
    animation: none;
}


.di-vao .cemetery.darknessDone::after {
    background-color: black;
    opacity: 0.5;
}

.di-vao .cemetery.darknessDone.lighting1 {
    animation: cemeteryLighting1 0.4s linear 0s 1 forwards
}
.di-vao .cemetery.darknessDone.lighting2 {
    animation: cemeteryLighting2 0.4s linear 0s 1 forwards
}


.darkness-object {
    /* animation: landDarkness 1s linear 0s 1 forwards */

}

.di-vao  .house {
    animation: houseScale 1s linear 0s 1 forwards;
}
.di-vao  .moon {
    animation: moonScale 2s linear 0s 1 forwards;
}


/* .wrapper:hover .card {
    animation: giftcardimage 1s linear 1.2s 1 forwards;
} */

.cemetery {
    width: 100%;
    height: 100%;
    /* padding-bottom: 58.35%; */
    position: absolute;
    background: url(./img//bg.webp) no-repeat;
    background-size: cover;
    transform: translateX(-50%);
    top: 0;
    left: 50%;
}
.cemetery .background-mobile {
    display: none;
}
/* 
.cemetery-inner {
    back
} */
/* .cemetery img {
    width: 100%;
} */

.land {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    bottom: 0%;
}
.land .background-desktop {
    width: 2000px;
    bottom: 0%;
}
.land .background-mobile {
    display: none;
}

.house {
    width: 30%;
    position: absolute;
    /* display: inline-block; */
    left: 50%;
    transform: translateX(-50%);
    /* top: 50%; */
    bottom: 0;
    z-index: 9;
}
.house::after {
    position: absolute;
    bottom: -9%;
    content: '';
    height: 20%;
    width: 80%;
    background: #25212a;
    left: 50%;
    transform: translateX(-50%);
}
.moon {
    position: absolute;
    z-index: 8;
    top: -54%;
    left: 50%;
    width: 57.6vw;
    transform: translateX(-50%);
}

.menu-screen {
    text-align: center;
    position: absolute;
    width: 100%;
    height:100%;
    z-index: 12;
}
/* .tagline img {
    width: 300px;
    height:200px;
    position: relative;
    top: 30%;
    z-index: 12;
    display: inline-block;
} */

/* .menu {
    width: 300px;
    height:200px;
    background: rgb(224, 167, 86);
    margin-top:50px;
    z-index: 12;
    display: inline-block;
} */

.hide {
    display: none;
}

.character-bottom  {
    position: absolute;
    bottom: 0;
    width: 100%;
    height:50%;
    z-index: 11;
}
.bingo-inner {
    position: absolute;
    height: 100%;
    width: 100%;
}
.bingo_01 {
    left: -2vw;
    position: absolute;
    width: 13.5%;
    bottom: -3vh;
    transition: 1s;
    height: 0;
    padding-bottom: 11.25%;
}

.over-180-img {
    width: 100%;
    height: 100%;
}

.over-180 {
    left: 1vw;
    position: absolute;
    width: 14.5%;
    transition: 1s;
    height: 9%;
    top: 9%;
    z-index: 1;
}

.glass-over-180  {
    left: 1vw;
    width: 14.5%;
    transition: 1s;
    height: 9%;
    top: 9%;
    z-index: 1;
    position:absolute;
    background: rgba(255, 255, 255, 0.11);
    border-radius: 0px;
    box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid rgba(255, 255, 255, 0.29);
}

.glass-over-180.waiting-zoom-in {
    display: none; 
   
}

.glass-over-180.zoom-in {
    display: block;
    left: 6vw;
    top: 13vh;
}

.over-180.waiting-zoom-in {
    display: none; 
}

.over-180.zoom-in {
    display: block;
    left: 6vw;
    top: 13vh;
}

.icon-download {
    width: 100%;
}

.di-vao .bingo_01 {
    opacity: 0;
}

.bingo_02 {
  position: absolute;
    width: 10.1%;
    transition: 1s;
    margin-left: 18vw;
    bottom: -3vh;
    height: 0;
    padding-bottom: 9.7%;
}

.di-vao .bingo_02 {
    opacity: 0;
}

.bingo_03 {
    margin-right: -6rem;
    position: absolute;
    width: 18.2%;
    right: 0;
    bottom: -7vh;
    transition: 1s;

    padding-bottom: 18.25%;
}

.img-con-ma {
    margin-top: -1vh;
    position: absolute;
    display: none;
    width: 1.9vw;
    margin-left: -1.5vw;
}

.dropdown-icon {
    font-weight: 500;
    font-size: 1vw;
}

.btn-join-now-share {
    margin-top: 1.1vh;
    position: absolute; 
    font-size: 1.2vw;
    z-index: 2;
    color: white;
    width: 16vw;
}

.wrapper-group-btn-detail {
    width: 100%;
    position: relative;
    cursor: pointer;
}

.group-btn-detail {

    display: inline-block;
    height: 6vh !important;
    width: 16vw;
    position: relative;
    cursor: pointer;
    z-index: 115;
    pointer-events: auto;

}

.brightness-btn {
    filter: brightness(1.5);
}

.fixed-toggle-icon-img {
    width: 1.4vw;
    height: 7.1vh;
    position: absolute;
    margin-top: -20vh;
    margin-left: -1.38vw;
    background-image: url(./assets/images/close-fix-menu-v2.webp);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}

.fixed-toggle-icon-img.active {
    background-image: url(./assets/images/open-fix-menu.webp);
}

.an-con-ma {
    display: inline;
}

.join-now-btn {
    width: 16vw;
    z-index: 1;
}

.share-now-btn {
    width: 16vw;
}


.btn-share-now-home {
    margin-top: 1vh;
}

.wrapper-group-btn {
    margin-top: 6vh;
}

.di-vao .bingo_03 {
    opacity: 0;
}

.di-vao .frame-video-wrapper {
    opacity: 0;
}

.bingo_01 .vo {
    background: url("./img/bingo01.webp") no-repeat;
    animation: biNgo_01 3s linear 1s infinite forwards;
    
}
.bingo_01  .mat {
    background: url("./img/bingo01_eye.webp") no-repeat;
    animation: biNgo_01Background 3s linear 0s infinite forwards;
}

.bingo_02 .vo {
    background: url("./img/bingo_02.webp") no-repeat;
    animation: biNgo_01 3s linear 1s infinite forwards;
}
.bingo_02  .mat {
    background: url("./img/bingo_02_eye.webp") no-repeat;
    animation: biNgo_01Background 2s linear 0s infinite forwards;
}

.bingo_03 .vo {
    background: url("./img/bingo_03.webp") no-repeat;
    animation: biNgo_01 3s linear 1s infinite forwards;
}
.bingo_03 .mat {
    background: url("./img/bingo_03_eye.webp") no-repeat;
    animation: biNgo_01Background 2.2s linear 0s infinite forwards;
}

.bingo_01 .mat, .bingo_02 .mat, .bingo_03 .mat {
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: contain;
    animation: biNgo_01 2s linear 0s infinite forwards;
}

.bingo_01 .vo, .bingo_02 .vo, .bingo_03 .vo { 
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    animation: biNgo_01 2s linear 0s infinite forwards;
    background-size: contain;

}


.phihanhgia {
    width: 5.55%;
    position: absolute;
    top: 12.9%;
    right: 14.5%;
    animation: phihanhgia 4s linear 0s infinite forwards;
}

.zombie {
    position: absolute;
    bottom: 5.5%;
    height: 0;
    padding-bottom: 9%;
    width: 4%;
    left: 24.6%;
    z-index: 9;
    /* filter: brightness(0.6); */
}

.zombie .than {
    position: absolute;
    bottom: 0;
    height: 66%
}

.zombie .matphai, .zombie .mattrai {
    width: 100%;
    position: absolute;
    top: 0;
}
.zombie .mattrai {
    display: none;
}


.zombie.quaytrai .mattrai {
    display: block;
}
.zombie.quaytrai .matphai {
    display: none;
}


.zombie .rang {
    display: none;
}
.zombie .rang {
    display: none;
}
.zombie .eyephai , .zombie .eyetrai {
    position: absolute;
    width: 100%;
    position: absolute;
    width: 100%;
    width: 31%;
    top: 15%;
}
.zombie.nhintrai .eyephai {
    left: 42%;
}

.zombie .eyephai {
    left: 44%;
}
.zombie .eyephai {
    left: 44%;
}

.zombie.hamieng .rang {
    display: block;
    display: block;
    position: absolute;
    width: 34%;
    /* top: 29%; */
    top: 26%;
    right: 45%;
    animation: hamieng 0.5s linear 0s 1 forwards;
}

.zombie.quaytrai .eyephai, .eyetrai {
    display: none;
}

.zombie.quaytrai .eyetrai {
    left: 24%;
    width: 30%;
    top: 15.5%;
    display: block;
}

.khonglongxanh {
    position: absolute;
    bottom: 5vh;
    height: 0;
    padding-bottom: 7.3%;
    width: 3%;
    right: 35%;

    z-index: 9;
    transform: scaleX(-1);

    /* filter: brightness(0.6); */
}

.khonglongxanh .dau {
    width: 95%;
    position: absolute;
    top: 0;
    transform-origin: left bottom;
    transform: rotate(359deg);
    animation: khunglonggatdau 1s linear 3s infinite forwards;

}
.khonglongxanh .than {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.ong {
    position: absolute;
    width: 57px;
    height: 116px;
    top:20%;
    left:30%;
    z-index:8;
    transition: 0.2s;
}
.opacity-0 {
    opacity: 0;
}

.ong .than {
    width: 100%;
    position: absolute;
    top: 0;
    left:0;
}

.ong .chan-trai {
    position: absolute;
    width: 24%;
    top: 68%;
    left: 28%;

    transform-origin: center top;
}

.ong .chan-phai {
    position: absolute;
    width: 24%;
    top: 68%;
    left: 50%;

    transform-origin: center top;
}


.ong .tay-trai {
    position: absolute;
    left: 0;
    top: 42%;
    width: 42%;
    transform-origin: right center;
}
.ong .tay-phai {
    position: absolute;
    right: 0;
    top: 39%;
    width: 35%;
    transform-origin: left center;
}

.ong-bay-phai {
   animation: ongbayphai 5s  linear 0s 1 forwards;
}
.ong-bay-phai.ong-bay-giua {
    animation: ongbayphai_giua 2s  linear 0s 1 forwards;
 }
 

.ong-bay-phai .chan-trai {
   animation: ongbayphai_chantrai 5s linear 0.2s 1 forwards;
}
.ong-bay-phai .chan-phai {
    animation: ongbayphai_chanphai 5s linear 0.2s 1 forwards;
}


.ong-bay-trai-sau-nha {
    animation: ongbaytrai_conmakhongchan_baytrai_saunha 6s cubic-bezier(0, 0.86, 0.86, 0.86) 0s 1 forwards
 }
 
 .ong-bay-trai-sau-nha .chan-trai {
    animation: ongbaytrai_saunha_chantrai 6s linear 0.2s 1 forwards;
 }
 .ong-bay-trai-sau-nha .chan-phai {
     animation: ongbaytrai_saunha_chanphai 6s linear 0.2s 1 forwards;
 }

 .conmakhongchan {
    position: absolute;
    width: 40px;
    top: 22%;
    left:30%;
    margin-top: 20px;
    transition: 0.2s;
 }

.conmakhongchan-bayphai {
   animation: mabayphai 5s  linear 0s 1 forwards;
}

.conmakhongchan-bayphai.conmakhongchan-bay-giua {
    animation: mabayphai_giua 2s  linear 0s 1 forwards;
 }

.conmakhongchan-baytrai-saunha  {
    animation: ongbaytrai_conmakhongchan_baytrai_saunha 7s cubic-bezier(0.86, 0.86, 0.86, 0.86) 0s 1 forwards
}
.bat-container {
    width: 150%;
    height: 150%;
    position: absolute;
    top: -32%;
    left: 50%;
    transform: translateX(-50%);
    filter: brightness(0.5);
}
.house img{
    width: 100%;
}

.logo-icon-fb-mobile {
    display: none;
}

.wrapper-2-icon-top {
    position: static;
    height: 100%;
    width: 25vw;
    padding: 0.8vh;
}

.logo-vng {
    margin-left: 2vh;
    height: 100%;
    width: auto;
}

.ptg-icon {
    margin-left: 2vh;
    height: 100%;
    width: auto;
}

.wrapper-social-icon-top {
    display: none;
}

.wrapper-moon {
    position: static;
    height: 18.5vh;
    width: 100%;
}

.title-menu {
    width: 100%;
}

.title-menu-p {
    font-size: 2vh;
    padding: 3vw;
}

.group-header {
    padding: 2vw;
}

.con-ma-menu {
    background-repeat: no-repeat;
    border-radius: none;
    align-items: center;
    margin-left: 3rem;
    align-self: center;
    padding: 6rem;
    border: none;
    background-image: url('./assets/images/gosh-menu-bar.webp');
}

.fixed {
    position: fixed;
    top: 18%;
    right: 1.25vw;
    z-index: 50;
    width: 9vw;
}

.fixed-main {
    width: 8vw;
    height: 32vh;
    border: 1px solid white;
    border-radius: 2.4rem;
    position: relative;
}

.fixed-wrapper {
    height: 32vh;
    width: 8vw;
    padding: 1rem;
    border-radius: 2.4rem;
    background-image: linear-gradient(#ffd96f, #ff7416);
    border: 1px solid whitesmoke;
}

.fixed-qr {
    margin-bottom: 1vh;
}

.frame-video-wrapper {
    position: absolute;
    width: 23.5vw;
    height: 29vh;
    right: 0;
    margin-right: 0vh;
    bottom: 0vh;
    transition: 1s;
    z-index: 15;
}

.title-frame {
    padding: 0.7vw;
    color: white;
    font-size: 1vw;
    margin-left: 3vw;
}

.wrapper-con-ma-ngu {
    position: absolute;
    right: 13vw;
    width: 5vw;
    height: 13vh;
    top: -12vh;
    margin-right: -11vw;
}

.img-con-ma-ngu {
    position: absolute;
    width: 100%;
    height: 100%;
}

.fixed {
    top: 33vh;
}

.frame-video {
    background-image: url(./assets/images/frame-video.webp);
    background-size:  23.5vw 29vh;;
    background-repeat: no-repeat;
    position:absolute;
    width: 100%;
    height: 29vh;
    bottom: 0vh;
}

.wrapper-icon-sound {
    background-color: transparent;
    z-index: 8;
    position: absolute;
    height: 6vh;
    width: 1.75vw;
    margin-top: -3%;
    right: 14vw;
}

.icon-sound {
    background-color: transparent;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(./assets/images/mute_off.webp);
}

.icon-sound.active{
    background-image:url(./assets/images/mute_on.webp);
}

.mxh-list {
    height: auto;
    margin-left: 0.3vw;
    width: 100%;
    margin-top: 0.4vh;
}

.mxh-link .icon {
    width: auto;
    height: 2vh;
}

.detail-quick-icon {
    position: absolute;
    width: 100%;
    height: 4.6vh;
}

.quick-gg {
    margin-top: 4.6vh;
}

.quick-group {
    margin-top: 9.2vh;
}

.mxh-link {
  margin-right: 1vw;
}

.icon-tham-gia-ngay-mobile {
    display: none;
}

.dropdown-group-menu {
    display: none;
    grid-template-columns: auto auto auto auto;
    background-color: #fcec30;
    position: absolute;
    width: 17vw;
    height: 7vh;
    border: 1px;
    float: right;
    right: 0;
    margin-right: 10vw;
}

.dropdown-group-menu.active{
    display: grid;
    border-style: solid;
}

.fixed {
    display: block;
}

.fixed.active {
    transform: translateX(10vw) !important;

}

.iframe-bg-video {
    position: absolute;
    width: 22.77vw;
    margin-left: 0.36vw;
    height: 24.5vh;
    background-color: #f1af52;
    bottom: 0;
}

.frame-video-wrapper {
    display: block;
}

.frame-video-wrapper.active {
    transform: translateY(22vh) !important;

}

.dropdown-group-menu-img{
    height: 5vh;
    width: auto;
    margin-left: 0.7vw;
    margin-top: 0.6vh;
}

.wrapper-quick-download {
    height: 13vh;
    position: relative;
    margin-top: -0.4vh;
}

.singup-text {
    font-style: italic;
    text-decoration: underline;
    color: #347abd;
    font-family:'Roboto Black' ;
    
}

.grid-container-content-card {
    color: #393939;
    list-style-type: disc !important;
    display: grid;
    grid-template-columns: auto auto;
    height: 47vh;
    width: 70%;
    margin: 0 auto;
    padding: 0;
  }
  .grid-item-card-info {
    font-size: 30px;
    text-align: center;
  }

.phuongweq {

    font-size: 1.2vw;
    padding-bottom: 3%;
    line-height: 6px;
    padding-top: 0;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    height: 100%;

    color: white;
    background: url(./assets/images/bg-btn-popup.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    display: block;
    font-family: 'UVN Van';
}

.popup-inner2-card {

animation: displaypopup 0.5s linear 4.2s 1 forwards;
   opacity: 0;
   position: relative;
   transition: 0.5s;
   border-radius: 5rem;
   background: white;
    height: 80% ;
    background-image: url(./assets/images/bg-popup-card.webp) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    font-family: 'Roboto Regular' !important;
 }

.content-detail-card {
    font-size: 1vw;
    margin-left: 10%;
 }

.wrapper-icon-in-card-popup-1 {
    width: 80%;
}
.wrapper-icon-in-card-popup {
    display: grid;
    grid-template-columns: auto auto;
    height: 10%;
    margin: 0 auto;
    padding: 0;
    width: 80%;
    margin-top: 2%;
}

.wrapper-icon-in-card-popup div{
    height: 80%;
    width: 70%;
    position: relative;
    margin-left: 10%;
}

.icon-download-in-popup {
    margin-left: 35%;
}

.wrapper-detail-icon-in-card-popup {
    width: 30.46%;
    height: 10%;
}

.rock-bottom {
    position: absolute;
    height: 0;
    width: 20%;
    height: 27%;
    float: left;
    opacity: 1;
    margin-left: 18.85%;
    bottom: -3%;
    z-index: 9;
    filter: brightness(0.6);
}

.rock-bottom.rock1{
    width: 8.35%;
    bottom: -12%;
    margin-left: 2%;
}

.rock-bottom.rock4{
    width: 8%;
    bottom: -11%;
    right: 11.15%;
    float: right;
}

.smoke-bottom-left {
    position: absolute;
    height: 0;
    width: 52%;
    height: auto;
    float: left;
    opacity: 1;
    margin-left: -11.75%;
    bottom: -8%;
   z-index: 11;
   animation: smoke1 20s linear 0s 1 forwards;
}

.smoke-bottom1 {
    position: absolute;
    height: 0;
    width: 52%;
    height: auto;
    float: left;
    margin-left: 60%;
    opacity: 1;
    bottom: -8%;
    z-index: 11;
   animation: smoke2 18s linear 0s 1 forwards;
}

.smoke-bottom2 {
    position: absolute;
    height: 0;
    width: 52%;
    height: auto;
    float: left;
    opacity: 1;
    bottom: -8%;
    z-index: 11;
    margin-left: 34%;
    animation: smoke3 25s linear 0s 1 forwards;
}


.rock-bottom img{
    width: 100%;
}

.smoke-bottom1 img{
    width: 100%;
}

.smoke-bottom-left img{
    width: 100%;
}

.vertical-menu-dropdown {
    display: none;
}

.dropdown-group-menu-mobile  {
    display: none;
}

.wrapper-icon-sound.hide-icon {
    display: none;
}

.card-desc-role-id {
    color: #b62910;
    font-family: 'Roboto Black';
}

.card-desc {
    margin-left: 7%;
    list-style-type: disc !important;
}

@media screen and (width: 360px) { 

    .gift-card-front {
        width: 77% !important;
    }

    .popup-title-background {
        padding: 5% !important;
    }
}

/* mobile only */
@media screen and (width: 412px) { 

    .gift-card-front {
        width: 77% !important;
    }

    .popup-title-background {
        padding: 5% !important;
    }
}

/* mobile only */
@media screen and (width: 540px) { 

    .gift-card-front {
        width: 65% !important;
    }
}

@media screen and (width: 375px) { 

    .gift-card-front {
        width: 87% !important;
    }
}

@media screen and (width: 600px) { 
    .gift-card-front {
        width: 80% !important;
    }
}

/* moblie for screen */
@media screen and (width: 414px) { 

    .gift-card-front {
        width: 87% !important;
    }

    .popup-title-background {
        padding: 6% !important;
    }

    .text-title-gift-info {
        width: 100% !important;
    }

    .title-gift-info {
        width: 67% !important;
    }

    .phuongweq {
        width: 27vw !important;
    }


    .moon {
        top: -22% !important;
    }
}

/* .gate {
    display: none;;
} */

.quang-tai {
    width: 10%;
    height: 0;
    padding-bottom:6.666666%;
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    bottom:1%;
    /* filter: brightness(0.4); */
}

.quang-tai .than {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.quang-tai .than_trong {
    position: absolute;
    width: 89%;
    bottom: 61px;
    left: 6%;
}


.quang-tai .nap {
    position: absolute;
    width: 94%;
    bottom: 31%;
    left: 4%;

}



.quang-tai .tai_trai {
    position: absolute;
    width: 5%;
    bottom: 35%;
    left: 64%;
    visibility:hidden;
    transform: rotate3d(90, 1, 1, 89deg);
}

.quang-tai .tai_phai {
    position: absolute;
    width: 5%;
    bottom: 32%;
    left: 71%;
    visibility:hidden;
    transform: rotate3d(90, 1, 1, 89deg);
}

.quang-tai .dau {
    position: absolute;
    width: 13%;
    bottom: 35%;
    left: 64%;
    bottom: 15%;

}
.quang-tai .mat {
    position: absolute;
    width: 6%;
    bottom: 35%;
    left: 67%;
    bottom: 42%;
    opacity: 0;
}

.quang-tai.effect .nap {
    position: absolute;
    width: 94%;
    bottom: 31%;
    left: 4%;

    /* transform: rotate3d(90, 1, 1, 50deg); */
    animation: batmapquangtai 1s cubic-bezier(1, 0.08, 0.27, 1.01) 2s 1 forwards,
    daynapquangtai 1s cubic-bezier(1, 0.08, 0.27, 1.01) 8s 1 forwards;
}

.quang-tai.effect .tai_trai {
    animation: xacuop_taytrai 0.05s linear 2s 1 forwards,
    xacuop_taytrai_chui 0.05s linear 8s 1 forwards;
}

.quang-tai.effect .tai_phai {
    animation: xacuop_taytrai 0.05s linear 2.3s 1 forwards,
    xacuop_taytrai_chui 0.05s linear 8s 1 forwards;
}

.quang-tai.effect .dau {
    animation: xacuop_dau 0.05s linear 3s 1 forwards,
    xacuop_dau_chui 0.05s linear 8s 1 forwards;

}
.quang-tai.effect .mat {
    animation: xacuop_mat 2s linear 3s 3 forwards;
}

.quang-tai.no-effect .nap {
    position: absolute;
    width: 94%;
    bottom: 31%;
    left: 4%;
    transform: rotate3d(90, 1, 1, 50deg);
}

.quang-tai.no-effect .tai_trai {
    visibility:visible;
    transform: rotate3d(90, 1, 1,  0deg);
}

.quang-tai.no-effect .tai_phai {
    visibility:visible;
    transform: rotate3d(90, 1, 1,  0deg);
}

.quang-tai.no-effect .dau {
    bottom: 35%;
}
.quang-tai.no-effect .mat {
    opacity: 1;
    left: 67%;
}
hr.new1 {
    border-top: 1px solid #868686;
    width: 70;
}

.click-receive-gift {
    font-family: 'Roboto-Italic';
    font-size: 1.2vw;
    color: #d4b69d;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    bottom: 23.4%
}

.glass-click-receive-gift {

    margin-top: 29%;

    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 26%;
    height: 7%;

    position:absolute;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgb(0 0 0 / 10%);

    border: 1px solid rgba(255, 255, 255, 0.29);
}

.footer-main {
    padding: 3rem 0;
}

.footer-logo-link img{
    width: 80%;
}
/* mobile----------------------------------- */

  

/* @media (max-width: 1284px) {
    .gate {
        background:red;
    }
} */

@media only screen and (max-width: 1020px) {
    .house {
        width: 58%;
    }
    .gate .cot-trai {
        left: -20%;
    }
    .gate .cot-phai {
        right: -20%;
    }

    .land .background-desktop {
        width: 250%;
        bottom: 0%;
    }
    .gate .cua {
        width: 73.8%;
        bottom: 4%;
        height: 40%;
    }
    .land {
        left:50%;
        transform: translateX(-50%);
    }
    .gate .cua-trai {
        left: 25%;
    }
    .gate .cua-phai {
        right: 25%;
    }

    .menu-mobile-items {
        background-color: #eee;
        color: black;
        display: block;
        padding: 14px;
        text-decoration: none;
        font-size: 25px;

    }

    .menu-mobile-items:hover {
        background-color: #ccc;
      }
      
    .menu-mobile-items.active {
    background-color: #ff7006;
    color: white;
    }

    .vertical-menu-dropdown {
        z-index: 120;
        width: 80%;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .vertical-menu-dropdown.active {
        display: block;
    }

    .wrapper-icon-in-card-popup {
        height: 10% !important;}


    .wrapper-content-card {
        height: 60% !important;
    }

    .popup-wrapper-close-icon {
        margin-top: -17% !important;
    }

    /* .popup-wrapper-title {
        height: 20% !important;
    } */

    /* .popup-inner2-card {
        height: 56% !important;
    } */

    /* .popup-card {
        width: 55% !important;
        height: 55% !important;
        margin-top: 29% !important;
    } */

    .frame-video-wrapper {
        display: none;
    }

    .fixed {
        display: none;
    }

    .wrapper-icon-sound {
        width: 5%;
        top: 7%;
        right: 7%;
    }

    .moon {
        top: -15%;
    }    

    .headline-img {
        width: 60%;
    }

    .group-btn-detail {
        width: unset;
    }

    .btn-join-now-share {
        width: 35vw;
        font-size: 20px;
    }

    .join-now-btn {
        width: 35vw;
    }

    .over-180 , .glass-over-180{
        width: 20.5%;
        height: 6%;
    }

    .wrapper-icon-tham-gia-ngay {
        left: 32%;
        width: 34%;
        height: 71%;
    }

    .icon-tham-gia-ngay-mobile {
        margin: 0 auto;
        display: block;
        width: 100%;
        height: 100%;
        font-size: 22px;
        color: white;
        background: url(./assets/images/tham-gia-ngay-top-mobile.webp);
        background-size: 99% 99%;
        background-repeat: no-repeat;
        font-family: "SRN CookieRun", sans-serif;
    }


    .logo-vng {
        margin-left: 0vh;
        padding: 1%;
    }
    
    .ptg-icon {
        padding: 2%;
    }

    .wrapper-2-icon-top {
        position: relative;
        width: 52%;
        margin-left: 0rem;
        display: block;
        padding: 0vw;
    }

    .a-logo-vng {
        position:absolute;
        height:100%;
        width: 100%;
    }

    .a-ptg-icon {
        position:absolute;
        height: 100%;
        width:100%;
        margin-left: 40%;
    }
   
}

@media only screen and (max-width: 720px){

    .footer-main {
        padding: 2rem 0;
    }
    
    .footer-logo-link img{
        width: 90%;
    }

    .gate .cot {
      display: none;
    } 
    .wrapper-icon-in-card-popup {
        margin-top: 3%;
        width: 100%;
    }

    .wrapper-icon-in-card-popup div{
        height: 95%;
        width: 80%;
        position: relative;
    }

    .over-180.zoom-in {
        top: 1%;
        left: 6%;
    }

    .popup-inner2-card {
        height: 49%;
        margin-top: 50%;
        border-radius: 3rem;
     } 

    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0); 
    }

    .dropdown-group-menu {
        display: none !important;
    }

    .dropdown-group-menu-mobile {
        right: unset;
        float:none;
        margin-top: 67vh;
        left: 24%;
        display: none;
        grid-template-columns: auto auto auto auto;
        background-color: #eeeeee;
        position: absolute;
        width: 42%;
        height: 7vh;
        padding: 1% 0%;
        border-radius: 27px;
        border: 1px;
        margin: 0 auto;
    }

    .dropdown-group-menu-mobile.active {
        display: block;
        z-index: 120;
        margin-top: 66%;
    }

    .dropdown-icon {
        font-size: 3.5vw
    }

    .vertical-menu-dropdown {
        z-index: 120;
        width: 80%;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .vertical-menu-dropdown.active {
        display: block;
    }

    .menu-mobile-items {
        background-color: #eee;
        color: black;
        display: block;
        padding: 14px;
        text-decoration: none;
        font-size: 16px;
    }

    .menu-mobile-items:hover {
        background-color: #ccc;
      }
      
    .menu-mobile-items.active {
    background-color: #ff7006;
    color: white;
    }

    .hide-mobile {
        display: none;
    }

    .rock-bottom.rock1 {
        width: 21.4%;
        bottom: 0%;
        margin-left: -1%;
    }

    .rock-bottom.rock4 {
        width: 22.2%;
        bottom: -1%;
        right: -1.85%;
        float: right;
    }

    .fixed {
        display: none;
    }

    .wrapper-icon-sound {
        width: 7vw;
        height: 4.15vh;
        top: 4%;
        z-index: 8;
        right: 3.4vw;
    }

    .over-180 {
        left: 1vw;
        position: absolute;
        width: 24%;
        transition: 1s;
        height: 4%;
        z-index: 8;
        margin-left: 1vw;
        top: 1%;
    }

    .glass-over-180 {
        width: 24%;
        height: 4%;
        top: 1%;
        position: absolute;
        transition: 1s;
        z-index: 8;
        margin-left: 1vw;
    }
    .title-frame {
        display: none;
    }

    .frame-video-wrapper {
        display: none;
    }

    .frame-video {
        display: none;
    }

    .bingo_01 {
        display: none;
    }

    .bingo_02 {
        left: -5vw;
        height: 14.5vh;
        width: 21vw;
        bottom: 32%;
        margin-left: 0;
    }

    .bingo_03 {
        margin-right: -11vw;
        position: absolute;
        width: 32vw;
        right: 0;
        bottom: 40%;
    }

    .wrapper {
        height: 102vh !important;
    }

    .moon {
        top: -16%;
        position: absolute;
        z-index: 7;
        width: 102.6vw;
        transform: 0;
    }

    .an-con-ma {
        display: inline !important;
    }

    .img-con-ma {
        margin-top: -2vh;
        position: absolute;
        display: none;
        width: 5.9vw;
        margin-left: -6.5vw;
    }

    .btn-join-now-share{
        margin-top: 0.8vh;
        position: absolute;
        font-size: 3.5vw;
        z-index: 2;
        color: white;
        width: 42vw;
    }

    .group-btn-detail {
        width: auto;
    }

    .join-now-btn {
        width: 42vw;
        z-index: 1;
    }

    .headline-img {
        width: 82vw;
    }

    .menu-item-mobile {
        width: 100% !important;
    }

    .container {
        width: 100%;
        max-width: 100vw;
        padding: 0 2vw;
    }

    .wrapper-social-icon-top {
        display: none;
        position: relative;
        margin-left: 10vw;
        width: 21.22vw;
        height: 2vh;
    }

    .logo-vng {
        margin-left: 0vh;
        padding: 1%;
    }
    
    .ptg-icon {
        padding: 2%;
    }

    .wrapper-2-icon-top {
        position: relative;
        width: 52%;
        margin-left: 0rem;
        display: block;
        padding: 0vw;
    }

    .a-logo-vng {
        position:absolute;
        height:100%;
        width: 100%;
    }

    .a-ptg-icon {
        position:absolute;
        height: 100%;
        width:100%;
        margin-left: 40%;
    }

    .logo-icon-fb-mobile {
        height: 2vh;
        margin-left: 1rem;
        display: block;
        width: 3.5rem;
        border-radius: 6px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .icon-fb-mobile{
        margin-left: 7vw;
        position:absolute;
        margin-right: 3vw;
        width: 3vw;
        height: 2vh;
        background: url('./assets/images/fb_mobile.webp');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .icon-home-mobile{
        position:absolute;
        margin-right: 3vw;
        width: 5.4vw;
        height: 2vh;
        background: url('./assets/images/Home_mobile.webp');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .icon-group-mobile{
        margin-left: 12vw;
        position:absolute;
        width: 9.4vw;
        height: 2vh;
        background: url('./assets/images/group\ mobile.webp');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .wrapper-icon-tham-gia-ngay {
        left: 32%;
        width: 34%;
        height: 71%;
    }

    .icon-tham-gia-ngay-mobile {
        margin: 0 auto;
        display: block;
        width: 100%;
        height: 100%;
        font-size: 15px;
        color: white;
        background: url(./assets/images/tham-gia-ngay-top-mobile.webp);
        background-size: 99% 99%;
        background-repeat: no-repeat;
        font-family: "SRN CookieRun", sans-serif;
    }

    .header-logo {
        display: block;
        width: 3.5rem;
        height: 4rem;
        border-radius: 6px;
        cursor: pointer;
        flex-shrink: 0; 
    }
    .header-logo img {
        width: auto;
        height: 100%; 
    }
    
    .land .background-desktop {
        display: none;
    }
    .khonglongxanh {
        bottom: 23vh;
        padding-bottom: 19.3%;
        width: 8%;
        right: 14%;
    }
    .ong, .conmakhongchan {
       /* display: none !important; */
    }
    .wrapper, .footer { 
        /* margin-top: -56px; */
    }
    .wrapper__inner {
        height: 100%;
        width: 100%;
        position: relative; 
    }
    
   .main, .cemetery {
        height: 100%;
   }
   .cemetery .background-mobile {
        display: block;
        position: absolute;
        height: 100%;
        width: auto;
        left: 50%;
        transform: translateX(-50%);
   }
  
   .house {
        width: 90%;
        bottom: 16%;
   }


   .gate {
        padding-top:0;
        height: 100%;
        /* display: none; */
   }
    .gate  .cua {
        width: 113%;
        bottom: 20%;
    }
    .gate .cua-trai {
        left: -15%;
    }
    .gate .cua-phai {
        right: -15%;
    }
    .menu-screen {
        /* display: none; */
    }
    .land {
        background: none;
        left: 50%;
        transform: translateX(-50%);
    }
    .land:after {
        display: block;
        content: '';
        position: absolute;
        height: 16%;
        width: 100%;
        bottom: 0;
        background: black;

    }
    .land .background-mobile {
        display: block;
        width: 272%;
        bottom: 13%;
    }
    /* .mo-cua .land{
        animation: none;
    }
    .mo-cua .land .background{
        animation: none;
    } */
    .card-item::before {
        display: block;
        content: '';
        position: absolute;
        background: #ffd96f;
        height: 72%;
        width: 98%;
        top: 9%;
        z-index: 1;
        border-radius: 10%;
    }

    .cua-trai-desktop, .cua-phai-desktop {
        display: none;
    }
    .cua-trai-mobile, .cua-phai-mobile {
        display: block;
    }
    .ong {
        position: absolute;
        width: 35px;
        height: 73px;
        top: 25%;
        left: 6%;
        z-index: 8;
    }
    .ong-bay-phai {
        animation: ongbayphai 2s  linear 0s 1 forwards;
    }

    .ong-bay-trai-sau-nha {
    animation: ongbaytrai_conmakhongchan_baytrai_saunha 6s cubic-bezier(0, 0.86, 0.86, 0.86) 0s 1 forwards
    }
    .zombie {
        bottom: 19.5%;
        height: 107px;
        width: 46px;
        left: 12.6%;
    }
    .quang-tai {
        width: 20%;
        bottom: 17%;
        padding-bottom: 13.3333333%;
    }

    .glass-over-180.zoom-in {
        display: block;
        top: 1%;
        left: 6%;
    }
    
    .smoke-bottom-left {
        width: 70%;
        bottom: -10%;
    }

    .smoke-bottom-left img{
       height: 40vh;
       width: 100%;
    }

    .smoke-bottom2 {
        width: 100%;
        bottom: -14%;
    }

    .smoke-bottom2 img{
        height: 50vh;
        width: 100%;
    }

    .smoke-bottom-left.zoom-in-smoke{
        width: 70%;
        bottom: 10%;
    }

    .smoke-bottom2.zoom-in-smoke {
        bottom: 8%;
    }
}


/* .frame-video-wrapper, .wrapper-con-ma-ngu, .fixed-main, .menu-screen {
    display: none;
} */