@media (max-width:1276px) {
/* page login start */
    .background-image {
        width: auto
    }

    .background-image .mat-trang {
        margin: 8px 0 0 16px
    }

    .background-image .su-kien-halloween {
        top: 50px;
        left: 205px;
        z-index: 2;
        filter: drop-shadow(0 0 .75em #000);
        max-width: calc(100% - 205px);
        transform: none;
    }

    .background-image .nhen-mangnhen {
        z-index: 2;
        top: 185px;
        max-width: 60%;
    }

    .background-image .thanchet-conech {
        left: 1%;
        margin-top: auto;
    }

    .thoigian {
        z-index: 2;
        font-size: 40px;
        width: 100%;
        top: 205px;
        text-align: center;
    }


    .form-dang-nhap {
        top: 45%;
        z-index: 2
    }

    .form-dang-nhap label {
        color: #fff
    }

    .input-group .input-code, .input-group .input-email {
        width: 95%
    }

    .form-dang-nhap .dang-nhap {
        display: block;
        margin: 0 auto
    }

    .title-su-kien {
        font-size: 150px;
        z-index: 2;
        line-height: 1.1;
    }
/* page login end */


/* page index start */
    .button_area {
        top: 10px;
        right: 150px;
    }

    .prize:nth-child(1) {
        top: 23%;
        right: 560px;
    }

    .prize:nth-child(2) {
        top: 23%;
        right: 406px
    }

    .prize:nth-child(3) {
        top: 23%;
        right: 253px
    }

    .prize:nth-child(4) {
        top: 23%;
        right: 100px
    }

    .prize:nth-child(5) {
        top: 46%;
        right: 560px;
    }

    .prize:nth-child(6) {
        top: 46%;
        right: 406px
    }

    .prize:nth-child(7) {
        top: 46%;
        right: 253px
    }

    .prize:nth-child(8) {
        top: 46%;
        right: 100px
    }

    .prize:nth-child(9) {
        top: 69%;
        right: 560px;
    }

    .prize:nth-child(10) {
        top: 69%;
        right: 406px
    }

    .prize:nth-child(11) {
        top: 69%;
        right: 253px
    }

    .prize:nth-child(12) {
        top: 69%;
        right: 100px
    }

    .event_title .title,
    .event_title .slogan {
        text-shadow: 0 0 5px #000;
    }

    .logo_1 {
        top: 114px;
        left: 124px;
    }

    .event_title {
        top: 33%;
        left: 350px;
    }

    .info {
        top: 6%;
        left: 100px;
        font-size: 15px;
    }

    .tutorial {
        top: 10%;
        left: 60px;
        font-size: 15px;
    }
/* page index end */
}

@media (max-width:1110px) {

    .background-image .thanchet-conech {
        left: 0;
    }

    .background-image .nhen-mangnhen {
        top: 150px;

    }

    .thoigian {
        font-size: 50px;
        top: 170px;
    }

    .form-dang-nhap {
        top: 280px;
    }
}


@media (max-width:1024px) {
    .wraper{
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    .button_area{
        top: 90px;
        left: 54%;
        transform: translateX(-50%);
    }

    .logo_1{
        left: 26%;
        top: 13%;
        max-width: 260px;
        transform: translateX(-50%);
    }

    .logo_2{
        left: 50%;
        top: 31%;
        transform: translateX(-50%);
        max-width: 450px;
    }

    .prizes{
        grid-template-columns: repeat(4, 108px);
        justify-content: center;
    }

    .prize{
        width: 11%;
    }

    .prize:nth-child(1) {
        top: 39%;
        right: 410px;
    }

    .prize:nth-child(2) {
        top: 39%;
        right: 290px;
    }

    .prize:nth-child(3) {
        top: 39%;
        right: 170px;
    }

    .prize:nth-child(4) {
        top: 39%;
        right: 50px;
    }

    .prize:nth-child(5) {
        top: 57%;
        right: 410px;
    }

    .prize:nth-child(6) {
        top: 57%;
        right: 290px;
    }

    .prize:nth-child(7) {
        top: 57%;
        right: 170px;
    }

    .prize:nth-child(8) {
        top: 57%;
        right: 50px;
    }

    .prize:nth-child(9) {
        top: 75%;
        right: 410px;
    }

    .prize:nth-child(10) {
        top: 75%;
        right: 290px;
    }

    .prize:nth-child(11) {
        top: 75%;
        right: 170px;
    }

    .prize:nth-child(12) {
        top: 75%;
        right: 50px;
    }

    .event_title {
        left: 333px;
        top: 23%;
    }

    .info {
        left: 80px;
    }

    .tutorial {
        left: 40px;
    }
}



@media (max-width:900px) {
    .background-image {
        width: auto
    }

    .background-image .su-kien-halloween {
        top: 50px;
        z-index: 2;
        filter: drop-shadow(0 0 .75em #000);
        transform: translateX(-50%);
        max-width: calc(80% - 50px);
        left: 50%
    }

    .background-image .nhen-mangnhen {
        z-index: 2;
        top: 170px;
    }

    .background-image .thanchet-conech {
        top: 439px;
        left: 0;
        margin-top: auto;
    }

    .thoigian {
        font-size: 35px;
        top: 195px;
    }

    .form-dang-nhap {
        top: 276px;
        width: 450px;
        z-index: 2;
        max-width: calc(100% - 50px);
        left: 50%;
        transform: translateX(-50%)
    }

    .form-dang-nhap .label-code, .form-dang-nhap .label-email {
        color: #fff;
        text-shadow: 0 0 3px #000, 0 0 5px #00f
    }

    .input-group .input-code, .input-group .input-email {
        width: 95%
    }

    .form-dang-nhap .dang-nhap {
        display: block;
        margin: 0 auto
    }

}

@media (max-width: 767px) {
    .title-su-kien {
        font-size: 100px;
    }
} 


@media (max-width:700px) {
    .background-image {
        width: auto
    }

    .background-image .su-kien-halloween {
        top: 50px;
        z-index: 2;
        filter: drop-shadow(0 0 .75em #000);
        transform: translateX(-50%);
        max-width: calc(100% - 150px);
        left: 50%
    }

    .background-image .nhen-mangnhen {
        z-index: 2;
        top: 170px;
    }

    .background-image .thanchet-conech {
        top: 439px;
        left: 0;
        margin-top: auto;
    }

    .thoigian {
        z-index: 2;
        width: 700px;
        font-size: 26px;
        top: 195px;
        text-align: center;
        max-width: calc(100%)
    }

    .form-dang-nhap {
        top: 276px;
        width: 450px;
        z-index: 2;
        max-width: calc(100% - 50px);
        left: 50%;
        transform: translateX(-50%)
    }

    .form-dang-nhap .label-code, .form-dang-nhap .label-email {
        color: #fff;
        text-shadow: 0 0 3px #000, 0 0 5px #00f
    }

    .input-group .input-code, .input-group .input-email {
        width: 95%
    }

    .form-dang-nhap .dang-nhap {
        display: block;
        margin: 0 auto
    }

}


@media all and (max-width:600px){
    .img{
        transform: translateX(0px);
        
    }
    .btn-run{
        position: absolute;
        bottom: 30%;
        right: 22%;
    }
    
    body{
        background-size: unset;
        background-position: center;
    }
}


/* Dành cho điện thoại */
@media all and (max-width:520px) {
    .logo_1{
        top: 25%;
        width: 70%;
        max-width: 250px;
    }
    .logo_2{
        left: 50%;
        top: 35%;
        width: 90%;
        max-width: 300px;
        transform: translateX(-50%);
    }
    .button_area{
        top: 21%;
        left: 50%;
        transform: translateX(-50%);
    }
    .prizes{
        grid-template-columns: repeat(4, 68px);
        justify-content: center;
    }
    .prize{
        height: 90px;
        width: 59px;
    }
    .btn_icon{
        width: 114px;
        top: 5px;
    }
    .btn_icon img{
        width:100%;
    }
    .icon__text{
        font-size: 14px;
    }
}

/* màn hình ngang của j7 */
@media (min-width: 521px) and (max-width: 640px) {
    .title-su-kien {
        font-size: 60px;
    }

    .background-image .mat-trang {
        width: auto;
        max-width: calc(100% / 5);
    }
    .background-image .nhen-mangnhen {
        top: 27%;
        width: 250px;
    }
    .thoigian {
        font-size: 13px;
        top: 90px;
    }
    .background-image .thanchet-conech {
        top: 0;
    }

    .tzan {
        font-size: 13px;
    }

    .form-dang-nhap {
        top: 130px;
        width: 300px;
    }

    .form-dang-nhap .dang-nhap {
        padding: 0;
        width: 100px;
        height: 30px;
        font-size: 15px;
    }

    .form-dang-nhap input {
        height: 30px;
    }

    .form-dang-nhap label {
        font-size: 13px;
        display: none;
    }

    .help-block {
        font-size: 11px;
        margin: 0;
    }

    .form-group {
        margin-bottom: 5px;
    }


    .logo_1, .event_title {
        display: none;
    }

    

    .tutorial,.info {
        display: block;
        width: 100%;
        transform: unset;
        text-align: unset;
        font-size: 11px;
    }

    .info {
        top: 0;
        left: 20px;
    }

    .tutorial {
        left: 20px;
        top: 20px;
    }

    .button_area {
        top: 15px;
        right: 0;
        left: unset;
        transform: unset;
    }

    .button_area img {
        width: 50px;
    }

    .icon__text {
        bottom: 4px;
        font-size: 11px;
    }

    .prize:nth-child(1) {
        top: 21%;
        left: 5%;
    }

    .prize:nth-child(2) {
        top: 21%;
        left: 55%;
        right: unset;
    }

    .prize:nth-child(3) {
        top: 21%;
        right: 56%;
    }

    .prize:nth-child(4) {
        top: 21%;
        right: 5%;
    }

    .prize:nth-child(5) {
        top: 41%;
        left: 5%;
    }

    .prize:nth-child(6) {
        top: 41%;
        left: 55%;
        right: unset;
    }

    .prize:nth-child(7) {
        top: 41%;
        right: 56%;
    }

    .prize:nth-child(8) {
        top: 41%;
        right: 5%;
    }

    .prize:nth-child(9) {
        top: 61%;
        left: 5%;
    }

    .prize:nth-child(10) {
        top: 61%;
        left: 55%;
        right: unset;
    }

    .prize:nth-child(11) {
        top: 61%;
        right: 56%;
    }

    .prize:nth-child(12) {
        top: 61%;
        right: 5%;
    }
}


@media (max-width: 520px) {
/* page login start */
    .background-image .su-kien-halloween, .form-dang-nhap {
        z-index: 2;
        max-width: calc(100% - 50px);
        left: 50%;
        transform: translateX(-50%)
    }

    .background-image {
        width: auto
    }

    .background-image .su-kien-halloween {
        top: 50px;
        filter: drop-shadow(0 0 .75em #000);
    }

    .background-image .nhen-mangnhen {
        z-index: 2;
        top: 165px;
        max-width: 100%;
    }

    .background-image .thanchet-conech {
        top: 439px;
        left: 0;
        margin-top: auto;
        height: auto;
        bottom: 35px;
    }

    .background-image .phuthuy-ma {
        bottom: 35px;
    }

    .thoigian {
        font-size: 25px;
        top: 180px;
    }


    .form-dang-nhap {
        top: 230px;
        width: 471px;
    }

    .form-dang-nhap .label-code, .form-dang-nhap .label-email {
        color: #fff;
        text-shadow: 0 0 3px #000, 0 0 5px #00f
    }

    .input-group .input-code, .input-group .input-email {
        width: 95%
    }

    .form-dang-nhap .dang-nhap {
        display: block;
        margin: 0 auto
    }

    .title-su-kien {
        font-size: 75px;
    }

    .form-dang-nhap input {
        width: 500px;
        height: 35px;
    }

    .form-dang-nhap .dang-nhap {
        width: 140px;
        height: 40px;
    }
/* page login end */

/* page index start */
    .prize {
        height: auto;
    }

    .info {
        display: flex;
        left: unset;
        width: 100%;
        justify-content: center;
        top: 0;
        font-size: 11px;
    }

    .tutorial {
        left: 50%;
        font-size: 11px;
        transform: translateX(-50%);
        display: block;
        width: 100%;
        top: 15px;
    }

    .button_area {
        width: 100%;
        justify-content: center;
        top: 8%;
    }

    .event_title {
        display: none;
    }

    .logo_1 {
        left: 50%;
    }


    .prize:nth-child(1) {
        top: 39%;
        left: 5%;
    }

    .prize:nth-child(2) {
        top: 39%;
        right: 55%;
    }

    .prize:nth-child(3) {
        top: 39%;
        left: 55%;
    }

    .prize:nth-child(4) {
        top: 39%;
        right: 5%;
    }

    .prize:nth-child(5) {
        top: 57%;
        left: 5%;
    }

    .prize:nth-child(6) {
        top: 57%;
        right: 55%;
    }

    .prize:nth-child(7) {
        top: 57%;
        left: 55%;
    }

    .prize:nth-child(8) {
        top: 57%;
        right: 5%;
    }

    .prize:nth-child(9) {
        top: 75%;
        left: 5%;
    }

    .prize:nth-child(10) {
        top: 75%;
        right: 55%;
    }

    .prize:nth-child(11) {
        top: 75%;
        left: 55%;
    }

    .prize:nth-child(12) {
        top: 75%;
        right: 5%;
    }
/* page index end */
}



/*@media (max-width:420px) {
    .background-image .su-kien-halloween, .form-dang-nhap {
        z-index: 2;
        max-width: calc(100% - 50px);
        left: 50%;
        transform: translateX(-50%)
    }

    .background-image {
        width: auto
    }

    .background-image .su-kien-halloween {
        top: 50px;
        filter: drop-shadow(0 0 .75em #000)
    }

    .background-image .nhen-mangnhen {
        z-index: 2;
        width: 700px;
        top: 110px;
        max-width: calc(100%)
    }

    .background-image .thanchet-conech {
        top: 439px;
        width: 380px;
        left: 0;
        margin-top: auto;
        max-width: calc(100% - 150px)
    }


    .form-dang-nhap {
        top: 276px;
        width: 450px
    }

    .form-dang-nhap .label-code, .form-dang-nhap .label-email {
        color: #fff;
        text-shadow: 0 0 3px #000, 0 0 5px #00f
    }

    .input-group .input-code, .input-group .input-email {
        width: 95%
    }

    .form-dang-nhap .dang-nhap {
        display: block;
        margin: 0 auto
    }



    .title-su-kien {
        font-size: 70px;
    }

}*/

/*@media (max-width:360px) {
    .background-image .su-kien-halloween, .form-dang-nhap {
        z-index: 2;
        max-width: calc(100% - 50px);
        left: 50%;
        transform: translateX(-50%)
    }

    .background-image {
        width: auto
    }

    .background-image .su-kien-halloween {
        top: 50px;
        filter: drop-shadow(0 0 .75em #000)
    }

    .background-image .nhen-mangnhen {
        z-index: 2;
        width: 700px;
        top: 110px;
        max-width: calc(100%)
    }

    .background-image .thanchet-conech {
        top: 439px;
        width: 380px;
        left: 0;
        margin-top: auto;
        max-width: calc(100% - 150px)
    }

    .thoigian {
        top: 125px
    }

    .form-dang-nhap {
        top: 180px;
        width: 450px
    }

    .form-dang-nhap .label-code, .form-dang-nhap .label-email {
        color: #fff;
        text-shadow: 0 0 3px #000, 0 0 5px #00f
    }

    .input-group .input-code, .input-group .input-email {
        width: 95%
    }

    .form-dang-nhap .dang-nhap {
        display: block;
        margin: 0 auto
    }

}*/

/*@media (max-width:320px) {
    .background-image .su-kien-halloween, .form-dang-nhap {
        z-index: 2;
        max-width: calc(100% - 50px);
        left: 50%;
        transform: translateX(-50%)
    }

    .background-image {
        width: auto
    }

    .background-image .su-kien-halloween {
        top: 50px;
        filter: drop-shadow(0 0 .75em #000);
    }

    .background-image .nhen-mangnhen {
        z-index: 2;
        width: 700px;
        top: 170px;
        max-width: calc(100%)
    }

    .background-image .thanchet-conech {
        top: 439px;
        width: 187px;
        left: 0;
        margin-top: auto;
        max-width: calc(100% - 133px);
        height: auto;
    }

    .thoigian {
        font-size: 25px;
        top: 180px;
    }


    .form-dang-nhap {
        top: 230px;
        width: 471px;
    }

    .form-dang-nhap .label-code, .form-dang-nhap .label-email {
        color: #fff;
        text-shadow: 0 0 3px #000, 0 0 5px #00f
    }

    .input-group .input-code, .input-group .input-email {
        width: 95%
    }

    .form-dang-nhap .dang-nhap {
        display: block;
        margin: 0 auto
    }

    .title-su-kien {
        font-size: 70px;
        z-index: 2;
        top: 10px;
        filter: drop-shadow(0 0 1px #000);
    }

    .tzan {
        width: 100%;
        justify-content: center;
        top: 24%;
        z-index: 3;
        font-size: 13px;
        bottom: 0;
        left: 72%;
    }

    .form-dang-nhap input {
        width: 500px;
        height: 35px;
    }

    .form-dang-nhap .dang-nhap {
        width: 140px;
        height: 40px;
    }

    .prize {
        height: auto;
    }
}*/
 
/* Dành cho máy tính bảng chiều dọc */
@media all and (min-width: 600px) {
    
}

/* Dành cho máy tính bảng chiều ngang */
@media all and (min-width: 1024px) {
}

/* Dành cho màn hình desktop */
@media all and (min-width: 1280px) {

}



@media all and (min-width: 320px ) and (max-width:768px){ 

}
@media all and (min-width:1080px){
    
}

@keyframes shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0eg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}