@font-face {
    font-family: 'SVN-SAF';
    src: url('/uploads/events/halloween/fonts/SVN-SAF.ttf');
    font-weight: bold;
    font-style: italic
}

@font-face {
    font-family: 'Shlop';
    src: url('/uploads/events/halloween/fonts/shlop rg.otf')
}

@font-face {
    font-family: 'Gypsy-Curse';
    src: url('/uploads/events/halloween/fonts/Gypsy Curse.ttf')
}

html {
    font-size: 16px;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    overflow: hidden;
    background: #000;
    height: 100vh;
    margin: 0;
}

/* page login start */

    .background-image {
        height: 100vh;
        background-size: cover;
        background-image: url("/uploads/events/halloween/login/background-mangnhen.webp");
        background-repeat: no-repeat
    }

    .background-image .mat-trang {
        margin-top: 17px;
        margin-left: 47px;
        width: auto;
        max-width: calc(100% / 3);
    }

    .background-image .thanchet-conech {
        position: absolute;
        left: 31px;
        bottom: 0;
        width: auto;
        max-width: calc(100% / 3.3);
    }

    .background-image .nhen-mangnhen, .form-dang-nhap, .thoigian, .title-su-kien, .background-image .su-kien-halloween {
        position: absolute;
        left: 50%;
        transform: translateX(-50%)
    }

    .background-image .su-kien-halloween {
        top: 50px;
        display: none;
    }

    .background-image .phuthuy-ma {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 0;
        width: auto;
        max-width: calc(100% / 4.5);
    }

    .background-image .nhen-mangnhen {
        top: 205px;
        width: auto;
        max-width: 100%;
    }

    .thoigian {
        font-size: 70px;
        color: #fff178;
        font-weight: 700;
        top: 240px;
    }

    .form-dang-nhap {
        top: 370px;
        left: 51%;
    }

    .form-dang-nhap label {
        font-size: 20px;
        color: #fff
    }

    .form-dang-nhap .dang-nhap {
        font-size: 25px;
        color: #fff;
        background: linear-gradient(#282272, #50026d);
        width: 154px;
        height: 50px;
        border-color: #282272;
        border-radius: 6px;
        margin: 0 0 0 auto;
        display: block;
        transition: 1s
    }

    .form-dang-nhap .dang-nhap:hover {
        background: #ff4500;
        border-color: #ff4500;
        box-shadow: 5px 5px 5px #50026d
    }

    .input-group {
        margin-top: 5px
    }

    .form-dang-nhap input {
        width: 500px;
        height: 40px;
        border-radius: 8px;
        border-color: #fff;
        max-width: 100%;
        padding-left: 15px;
    }

    .tzan {
        position: absolute;
        color: #fff178;
        font-family: 'Shlop';
        display: flex;
        left: 0;
        font-size: 25px;
        bottom: 0;
        padding-left: 5px;
        padding-bottom: 5px;
    }

    .title-su-kien {
        font-family: 'Gypsy-Curse';
        background: -webkit-linear-gradient(#ff0, #f00);
        background-clip: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 200px;
        display: block;
        width: 100%;
        top: 0;
        text-align: center;
        z-index: 1;
        line-height: 1.2;
        filter: drop-shadow(0px 0px 2px #000);
        padding-top: 10px;
    }

    .form-dang-nhap .dang-nhap, .form-dang-nhap label, .thoigian {
        font-style: italic;
        font-family: 'Shlop'
    }
/* page login end */


/* page index start */
    .wraper {
        background-image: url("/uploads/events/halloween/background.webp");
        background-size: cover;
        background-position-y: 96%;
        height: 100vh;
        position: relative
    }

    .choice_section {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100vh
    }

    .info, .tutorial {
        font-family: "SVN-SAF";
        color: #fff;
        text-shadow: 0 0 10px black;
        text-align: center;
        margin: 20px 0 10px;
        position: absolute;
        font-size: 17px
    }

    .info {
        top: 0%;
        left: 150px;
    }

    .tutorial {
        top: 4%;
        left: 100px;
    }

    .event_title {
        position: absolute;
        top: 22%;
        left: 400px;
        font-family: 'Shlop';
        text-align: center;
        transform: translateX(-75%)
    }

    .event_title .title {
        font-size: 60px;
        color: #EB6122;
        display: block
    }

    .event_title .slogan {
        font-size: 70px;
        color: #EB6122
    }

    .prizes {

    }

    .swal2-title {
        /*font-family: 'Shlop';*/
        font-size: 40px;
        color: black
    }

    .swal2-confirm.swal2-styled {
        /*font-family: 'Shlop';*/
    }

    .prize {
        position: absolute;
        border-radius: 5px;
        cursor: pointer;
        height: 132px;
        width: 150px;
        transform-origin: bottom;
        filter: drop-shadow(0px 1px 7px #333333f5)
    }

    .prizes__egg--1 {
        clip-path: polygon(0 0, 100% 0, 100% 44%, 88% 59%, 74% 49%, 53% 59%, 34% 49%, 16% 60%, 0 44%);
        position: absolute;
        top: 0px;
        left: 0;
        transition: all 0.3s;
        transform-origin: right;
        transform: rotate(0deg)
    }

    .prizes__egg--2 {
        clip-path: polygon(0 100%, 100% 100%, 100% 44%, 88% 59%, 74% 49%, 53% 59%, 34% 49%, 16% 60%, 0 44%)
    }

    .prize.active .prizes__egg--1 {
        top: -8px;
        left: 2px;
        transform: rotate(16deg)
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .prizes__inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d
    }

    .prize img {
        width: 100%
    }

    .prize.active .prizes__inner {
    }

    .prizes__front, .prizes__back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    .prizes__front {
    }

    .prizes__back {
        background-color: #555;
        color: white;
        transform: rotateY(180deg)
    }

    .logo_1 {
        position: absolute;
        top: 80px;
        left: 175px
    }

    .logo_2 {
        display: none;
        position: absolute;
        top: 200px;
        left: 40px
    }

    .icon__text {
        position: absolute;
        left: 0%;
        width: 100%;
        bottom: 20px;
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        font-family: 'Shlop';
        transition: 500ms
    }

    .btn_icon {
        color: #000;
        display: inline-block;
        position: relative
    }

    .btn_icon:hover {
        color: #fff
    }

    .button_area {
        position: absolute;
        display: flex;
        top: 20px;
        z-index: 1;
        right: 350px;
    }

    .giaithuong {
        color: #f00;
    }

    .color-red {
        color: red;
    }

    /*.linkpageminigame:hover {
        text-decoration: underline;
    }*/
/* page index end */