@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

@font-face {
    font-family: 'icomoonArrow';
    src: url('fonts/icomoonArrow.eot?ththti');
    src: url('fonts/icomoonArrow.eot?ththti#iefix') format('embedded-opentype'),
        url('fonts/icomoonArrow.ttf?ththti') format('truetype'),
        url('fonts/icomoonArrow.woff?ththti') format('woff'),
        url('fonts/icomoonArrow.svg?ththti#icomoonArrow') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoonArrow' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-download:before {
    content: "\1f449";
    font-size: 27px;
}

/*************
    ICOMOON -2
    
    *****************/
@font-face {
    font-family: "icomoon-2";
    src: url("../fonts/icomoon-2.eot?c21w1t");
    src: url("../fonts/icomoon-2.eot?c21w1t#iefix") format("embedded-opentype"),
        url("../fonts/icomoon-2.ttf?c21w1t") format("truetype"),
        url("../fonts/icomoon-2.woff?c21w1t") format("woff"),
        url("../fonts/icomoon-2.svg?c21w1t#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "eximbank";
    src: url("../fonts/eximbank.eot?5me6c8");
    src: url("../fonts/eximbank.eot?5me6c8#iefix") format("embedded-opentype"),
        url("../fonts/eximbank.ttf?5me6c8") format("truetype"),
        url("../fonts/eximbank.woff?5me6c8") format("woff"),
        url("../fonts/eximbank.svg?5me6c8#eximbank") format("svg");
    font-weight: normal;
    font-style: normal;
}



[class^="icon2-"],
[class*=" icon2-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon-2" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^="exim-"],
[class*=" exim-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "eximbank" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.exim-EximBank:before {
    content: "\e90b";
}

.icon2-GameIcon_3:before {
    content: "\e903";
}

.icon2-Agribank:before {
    content: "\e900";
    vertical-align: middle;
}

.icon2-VietinBank:before {
    content: "\e901";
    vertical-align: middle;
}

.icon2-BIDV:before {
    content: "\e902";
    vertical-align: middle;
}

.icon2-wechat:before {
    content: "\e904";
}

.icon2-unionpay:before {
    content: "\e905";
}

.icon2-qqpay:before {
    content: "\e906";
}

.icon2-bank-3:before {
    content: "\e907";
}

.icon2-bank-1:before {
    content: "\e908";
}

.icon2-alipay:before {
    content: "\e909";
}

/*.icon2-BIDV.foot5, .icon2-VietinBank.foot5, .icon2-Agribank.foot5 {
          font-size: 75px;
          height: 25px;
          line-height: 0.5;
          vertical-align: text-bottom;
      }*/

.icon-Googlepluss.foot1 {
    font-size: 33px !important;
    vertical-align: middle;
}

/*************
          ICOMOON -2
          
          *****************/
@font-face {
    font-family: "icomoon";
    src: url("../fonts/icomoon.eot?v=20190328");
    src: url("../fonts/icomoon.eot?v=20190328") format("embedded-opentype"),
        url("../fonts/icomoon.ttf?v=20190328") format("truetype"),
        url("../fonts/icomoon.woff?v=20190328") format("woff"),
        url("../fonts/icomoon.svg?v=20190328") format("svg");
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



.icon-DongA:before {
    content: "\e90c";
}

.icon-Sacombank:before {
    content: "\e90f";
}

.icon-TechomBank:before {
    content: "\e911";
}

.icon-VietcomBank:before {
    content: "\e916";
}

.icon-ACB:before {
    content: "\e917";
}

.icon-MasterCardd:before {
    content: "\e90b";
}

.icon-Eighteennn:before {
    content: "\e909";
}

.icon-Googlepluss:before {
    content: "\e90a";
}

.icon-govim:before {
    content: "\e924";
}

.icon-GambleAware:before {
    content: "\e90d";
}

.icon-GamCare:before {
    content: "\e90e";
}

.icon-Facebook:before {
    content: "\e910";
}

.icon-Twitter:before {
    content: "\e912";
}

.icon-Pagcor:before {
    content: "\e913";
}

.icon-Verified-n-Secured:before {
    content: "\e914";
}

.icon-Entropay:before {
    content: "\e915";
}

.icon-Neteller:before {
    content: "\e91a";
}

.icon-Skrill:before {
    content: "\e91b";
}

.icon-Visa:before {
    content: "\e91c";
}

.icon-Contact:before {
    content: "\e91d";
}

.icon-LiveChat:before {
    content: "\e91e";
}

.icon-Skype:before {
    content: "\e91f";
}

.icon-Chrome:before {
    content: "\e920";
}

.icon-explorer:before {
    content: "\e921";
}

.icon-Firefox:before {
    content: "\e922";
}

.icon-Safari:before {
    content: "\e923";
}

.icon-gamingLabs:before {
    content: "\e908";
}


html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 16px;
    background: #011b10;
    background-size: cover;
    font-family: roboto;
    background: #041910 url(../images/banner.jpg) no-repeat top center; 
    background-size: cover;
    overflow: hidden;
}

a {
    text-decoration: none;
}
.mob{
    display: none;
}
.mob img{
    max-width: 100%;
}



@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .register-form {
        min-height: 475px;
        margin: 0 auto;
        display: block;
        background: #00250b;
        background-image: linear-gradient(#075634, #00250b, #00250b ) ;
        box-shadow: none;
        border: 3px solid #ac8e47;
        border-radius: 5px;
        padding: 0 45px;
        width: 470px;
    }
    .lottery-details {
        display: block;
        position: absolute;
        top: 16%;
        left: 7%;
        width: 400px;
        height: 200px;
        border-radius: 8px;
        border: 1px solid #065d38;
        background-color: rgba(4,57,34,.88);
        padding: 20px 15px;
        z-index: 10;
        opacity: 0;
        transform: scale(0);
        transition: all .2s linear;
        -webkit-transition: all .2s linear;
    }
 }
 @supports (-ms-ime-align:auto) {
    .register-form {
        min-height: 475px;
        margin: 0 auto;
        display: block;
        background: #00250b;
        background-image: linear-gradient(#075634, #00250b, #00250b ) ;
        box-shadow: none;
        border: 3px solid #ac8e47;
        border-radius: 5px;
        padding: 0 45px;
        width: 470px;
    }
    .lottery-details {
        display: block;
        position: absolute;
        top: 16%;
        left: 7%;
        width: 400px;
        height: 200px;
        border-radius: 8px;
        border: 1px solid #065d38;
        background-color: rgba(4,57,34,.88);
        padding: 20px 15px;
        z-index: 10;
        opacity: 0;
        transform: scale(0);
        transition: all .2s linear;
        -webkit-transition: all .2s linear;
    }
}

/*-------------- Header ---------------*/
.header {
    width: 100%;
    text-align: center;
    
    position: relative;
    z-index: 2;
}

.header-container {
    max-width: 1455px;
    padding: 15px 0;
    margin: 0 auto;
}

.logo {
    text-align: center;
    display: inline-block;
}

.logo img {
    /* max-height: 50px; */
}

.contain-btn {
    display: inline-block;
    margin: auto 0;
}

.bt {
    display: inline-block;
    min-width: 220px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-weight: 600;
    margin: 0 5px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    outline: none;
    padding:0 4px;
}

.btn-taiungdung {
    color: #fff;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    background: rgb(0, 202, 85);
    background: linear-gradient(180deg, rgba(0, 202, 85, 1) 0%, rgba(50, 203, 114, 1) 28%, rgba(14, 149, 69, 1) 65%, rgba(0, 138, 56, 1) 100%);
}

.btn-dangky {
    color: #222222;
    vertical-align: bottom;
    animation: zoom 1s ease-out;
    -webkit-animation: zoom 1s ease-out infinite;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    background: rgb(255, 244, 142);
    background: linear-gradient(180deg, rgba(255, 244, 142, 1) 0%, rgba(255, 244, 153, 1) 28%, rgba(254, 203, 27, 1) 65%, rgba(254, 203, 27, 1) 100%);
}

.btn-dangnhap {
    color: #222222;
    border: none;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 27%, rgba(204, 197, 197, 1) 65%, rgba(170, 170, 170, 1) 100%);
}

/*-------------------- BANNER ------------------*/
.banner {
    width: 100%;
    position: relative;
    z-index: 2;
}

.banner-container {
    max-width: 1455px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 153px);
    align-items: center;
    position: relative;
    z-index: 3;
}

.text1 {
    text-align: center;
}

.text1 img {
    max-width: 100%;
}

/*-------------------- STEPS ------------------*/

.steps {
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    text-align: center;
}

.step {
    flex-basis: 32%;
    padding: 18px 30px;
    display: block;
    border: solid 2px rgb(213, 199, 3);
    border-radius: 5px;
    background: rgb(0, 48, 29);
    transform: scale(1);
    -webkit-transform: scale(1);
    transition: all 300ms ease-out;
    -webkit-transition: all 300ms ease-out ;
    background: linear-gradient(0deg, rgba(0, 48, 29, 1) 0%, rgba(4, 60, 33, 0.5469538157059699) 57%, rgba(7, 75, 45, 0.5021358885351015) 100%);
}
.step:hover{
    transform: scale(1.04);
    -webkit-transform: scale(1.04);
    transition: all 300ms ease-out;
    -webkit-transition: all 300ms ease-out ;
}
.step1 {
    cursor: pointer;
}

.step hr {
    width: 70%;
    margin: 20px auto;
}

.yellow-text {
    color: #fee71b;
    font-weight: 600;
    text-shadow: 2px 2px #000;
}

.bold-text {
    font-weight: 600;
    font-size: 17px;
}

.bold-text span {
    color: #fee71b;

}

/*-------------- GAMES ---------------*/
.games {
    width: 100%;
    text-align: center;
    background: #041910 url(../images/games-bg.jpg) no-repeat top center;
}

.img-container {
    max-width: 1518px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 30px 0;
}



.img-container img {
    max-width: 100%;
}

.img-container p {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 0;
    padding: 10px 0;
    background: rgb(0, 0, 0, 0.7);
}
.img-container .each-game {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    min-height: 260px;
    max-height: 400px;
    width: 473px;
    border: 2px solid #dec900;
    border-radius: 5px;
    margin: 10px;
    cursor: pointer;
    background: url(../images/pergameBG.jpg);
    transform: scale(1);
    -webkit-transform:scale(1) ;
    transition: all 300ms ease-out;
    -webkit-transition:all 300ms ease-out ;
}

.img-container .each-game:hover {
    transform: scale(1.05);
    -webkit-transform:scale(1.05) ;
    transition: all 300ms ease-out;
}
.lottery-details {
    display: block;
    position: absolute;
    top: 16%;
    left: 7%;
    width: 400px;
    height: 200px;
    border-radius: 8px;
    border: 1px solid #065d38;
    background-color: rgba(4,57,34,.88);
    padding: 20px 15px;
    z-index: 10;
    opacity: 0;
    transform: scale(0);
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
}
.lottery-details span{
    color: white;
    font-size: 18px;
    text-align: left;
}
/* .game-text.active{
    display: block;
    transition: all 300ms ease-out;
    -webkit-transition: all 300ms ease-out;
} */
.text2 {
    padding: 55px 0 0;
}

.text2 img {
    max-width: 100%;
}


.fix-size {
    max-width: 100%;
}

.fix-size.two {
    margin-top: 40px;
}

/*-------------- FOOT TEXT ---------------*/

.text-box {
    max-width: 1455px;
    text-align: left;
    font-size: 16px;
    margin: 50px auto;
    color: #fff;
    padding: 40px 15px;
    border-radius: 5px;
    background: #222222 url(../images/BGTEXT.jpg) no-repeat center;
    background-size: cover;
}

/*-------------- BANK ---------------*/
.bank {
    background: #028843;
    background-image: linear-gradient(to right, #015e2f, #016633, #016d36, #01753a, #017d3e, #038544, #048e4a, #069650, #09a05a, #0bab65, #0db56f, #0ec07a);
}

.footbox.footvn-icon a {
    margin-right: 7px;
    vertical-align: bottom;
}

.footbox a {
    display: inline-block;
    margin-right: 15px;
    color: #9cd0a0;
}

.container {
    padding: 15px 0;
    font-size: 22px;
    color: #9cd0a0;
}

.sub-text {
    font-size: 16px;
}

.foot3 {
    font-size: 90px;
    vertical-align: middle;
    line-height: 40px !important;
}



/* --------------------Footer ------------------*/

.footer {
    width: 100%;
    min-height: 65px;
    padding-bottom: 10px;
    height: auto;
    background: rgb(7, 134, 81);
    background: linear-gradient(180deg, rgba(7, 134, 81, 1) 0%, rgba(0, 54, 15, 1) 100%);
}

.wrap-footer {
    max-width: 1455px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

.phone {
    flex-basis: 42%;


}

.wrap-phone {
    width: 250px;
    height: 60px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto;
}

.img-foot.phone {
    max-width: 60px;
    height: 60px;
    background: url(../images/footer-img.png);
    background-position: -244px 0;
    margin-top: -10px;
}

.img-foot.phone:hover {
    transform: scale(1.1);
    transition: transform 300ms ease;
}

.hotline {
    color: white;
    margin-left: 10px;
    line-height: 50px;
}

.deposit {
    flex-basis: 16%;
}

.wrap-deposit {
    width: 225px;
    margin: 0 auto;
}

.img-foot.donate {
    max-width: 225px;
    height: 67px;
    background: url(../images/footer-img.png);
    background-position: -374px 0;
    margin-top: -10px;
    cursor: pointer;
}

.img-foot.donate:hover {
    transform: scale(1.08);
    transition: transform 300ms ease;
}

.list-support {
    flex-basis: 42%;
    text-align: center;

}

.wrap-foot {
    height: 60px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.wrap-foot a {
    margin-left: 5px;
    width: 94px;
}

.wrap-foot a:hover {
    transform: scale(1.1);
    transition: transform 300ms ease;
}

.wrap-foot a:last-child {
    margin-left: 0;
}

.img-foot.payment {
    cursor: pointer;
    background: url(../images/footer-img.png);
    background-position: -376px 116px;
    margin-top: -10px;
}

.img-foot.guide {
    cursor: pointer;
    background: url(../images/footer-img.png);
    background-position: -471px 116px;
    margin-top: -10px;
}

.img-foot.support {
    cursor: pointer;
    background: url(../images/footer-img.png);
    background-position: -565px 116px;
    margin-top: -10px;
}

.img-foot.gift {
    cursor: pointer;
    background: url(../images/footer-img.png);
    background-position: 94px 116px;
    margin-top: -10px;
}


/*-------------------- REGISER ------------------*/
.form-dk {
    margin: 0 auto;
}

.clear {
    clear: both;
}

.register-form {
    min-height: 475px;
    margin: 0 auto;
    display: block;
    background: #00250b;
    background-image: linear-gradient(#075634, #00250b, #00250b ) ;
    box-shadow: none;
    border: 3px solid #ac8e47;
    border-radius: 5px;
    padding: 0 45px;
    width: 470px;
}

.register-text {
    display: block;
    color: white;
    text-align: center;
    margin-top: 25px;
    font: 600 18px roboto;
}

.register-text span {
    font-size: 25px;
    color: #fee71b;
    /*  background: rgb(255,204,0);*/
    /*  background: linear-gradient(0deg, rgba(255,204,0,1) 0%, rgba(241,224,65,1) 69%, rgba(255,214,0,1) 100%);*/
    /*-webkit-background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
}

.register-form>.close {
    color: #fff;
    opacity: 1;
    margin-top: 16px;
    margin-right: 31px;
    z-index: 9999;
    position: relative;
    cursor: pointer;
}

.inner-wrap {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 999;
    padding-top: 25px;
}

.register-form input[type="text"],
.register-form input[type="password"],
.register-form input[type="email"],
.register-form textarea,
.register-form select {
    background: #000;
    width: 100%;
    height: 43px;
    background-size: contain;
    border: none;
    padding-left: 20px;
    margin: 0 auto;
    font-size: 21px;
    display: block;
    line-height: 1;
    margin-bottom: 6px;
    border-radius: 6px;
    position: relative;
    z-index: 999;
    color: #fff;
    border: 1px solid #ca9645;
    outline: none;
}

.register-form input[type=submit]  {
    background: url('../images/submit_btn.png?v=0001') center no-repeat;
    background-size: 100%;
    display: block;
    border: 0;
    max-width: 359px;
    min-height: 66px;
    height: 66px;
    width: 100%;
    text-indent: -777em;
    margin: 0 auto;
}

.errorMsg {
    padding: 8px;
    background: #e74e4e;
    border: 1px solid #860404;
    color: #fff;
    display: none;
    font-size: 14px;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999999;
    box-sizing: border-box;
    right: 10px;
    -moz-box-sizing: border-box;
    border-radius: 5px;
}

.successMsg {
    padding: 8px;
    background: #6bb34b;
    border: 1px solid #1b4a07;
    color: #fff;
    display: none;
    font-size: 14px;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 999;
    box-sizing: border-box;
    right: 10px;
    -moz-box-sizing: border-box;
    border-radius: 5px;
}

.birthDate select {
    width: 31.8%;
    display: block;
    float: left;
    margin-right: 8px;
    padding-left: 5px;
    font-size: 13px;
    line-height: 19px;
    position: relative;
}

.birthDate select:last-child {
    margin-right: 0;
}

.msg-error {
    color: #fff;
    font-size: 12px;
    margin-top: -5px;
    display: none;
    padding: 0 10px;
    margin-bottom: 5px;
}

.msg-error-focus {
    position: relative;
    color: #fff;
    font-size: 12px;
    margin-top: -5px;
    display: block;
    padding: 0 10px;
    margin-bottom: 5px;
    background: #015e2f;
}

.capbox-inner {
    position: relative;
}

#CaptchaDiv {
    font-size: 17px;
    font-style: italic;
    color: #fff;
    background-color: gray;
    padding: 4px;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    width: 100px;
    float: right;
    height: 43px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 41px;
    z-index: 999;
}

.dangky {
    outline: none;
    border: none;
    border-radius: 4px;
    width: 100%;
    margin: 15px 0 35px 0;
    font-size: 18px;
    font-weight: 600;
    height: 50px;
    background: #fee71b;
    animation: zoom 1s ease-out;
    -webkit-animation: zoom 1s ease-out infinite;
    background-image: linear-gradient(to right top, #ffc400, #ffca03, #ffd107, #ffd70d, #ffde13, #ffe22c, #fee73d, #feeb4c, #feee65, #fff17c, #fff391, #fff6a6);
}

/* --------------------PopUP ------------------*/

.popup-Scratch {
    width: 100%;
    display: none;
    position: fixed;
    z-index: 9999;
    top: 34%;
    padding: 0 10px;
}

.center-box {
    max-width: 661px;
    height: 397px;
    margin: 0 auto;
    border-radius: 5px;
    background: rgb(5, 117, 18);
    background: linear-gradient(180deg, rgba(5, 117, 18, 1) 0%, rgba(2, 65, 12, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#831b1b', endColorstr='#380000', GradientType=0);
    border: 2px solid #d68c06;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.popup-Scratch .close {
    color: #fff;
    opacity: 1;
    margin-top: 7px;
    margin-right: 10px;
    cursor: pointer;
}

.gift-game {
    width: 100%;
    margin-top: -90px;
}

.popup-Scratch h4 {
    text-align: center;
    color: #fee71b;
    font-weight: 600;
    font-size: 22px;
}

.popup-info {
    margin-top: 45%;
    border-radius: 5px;
    padding: 20px;
    color: #fff;
    background: rgb(5, 117, 18);
    background: linear-gradient(180deg, rgba(5, 117, 18, 1) 0%, rgba(2, 65, 12, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#831b1b', endColorstr='#380000', GradientType=0);
    border: 2px solid #d68c06;
}

.popup-info>.close {
    color: #fff;
    opacity: 1;
    margin-top: 7px;
    margin-right: 10px;
    z-index: 999;
    position: relative;
    cursor: pointer;
}

.playerLeft {
    width: 340px;
    height: 508px;
    display: block;
    background: url(../images/playerGirl.png?v=111) no-repeat;
    background-size: contain;
    position: absolute;
    left: -140px;
    top: -126px;
    z-index: 8;
}

.popup-info .customDiv {
    position: relative;
    display: block;
    padding: 29px 4px 29px 163px;
    min-height: 200px;
    font-size: 20px;
    color: #fff;
    margin: 40px 41px;
}
#scratch1{
    margin:0 auto;
}


.popup-Scratch2 {
    width: 720px;
    height: 397px;
    display: none;
    position: fixed;
    z-index: 9999;
    top: 34%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    background: rgb(5, 117, 18);
    background: linear-gradient(180deg, rgba(5, 117, 18, 1) 0%, rgba(2, 65, 12, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#831b1b', endColorstr='#380000', GradientType=0);
    border: 2px solid #d68c06;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.popup-Scratch2 p {
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    margin-top: 65px;
    margin-right: 21px;
    padding: 5px;
}

.popup-Scratch2 .close {
    color: #fff;
    opacity: 1;
    margin-top: 7px;
    margin-right: 10px;
    cursor: pointer;
}

/* download ios android */


.download-content {
    background: #fff url(../images/dl-background.jpg) no-repeat center;
    background-size: cover;
    text-align: center;
    padding: 25px;
    margin: 30% auto 0;
}

.popup-info2 {
    padding: 20px;
    text-align: center;
}

.dl-close {
    color: #fff;
    position: fixed;
    top: -20px;
    right: -20px;
    opacity: 1;
    filter: alpha(opacity=100);
    cursor: pointer;
}

.dl-close:hover,
.dl-close:focus {
    color: #fff;
    text-decoration: none;
    filter: alpha(opacity=80);
    opacity: 0.8;
}

.dl-desc {
    color: #5f0510;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.dl-title {
    color: #5f0510;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}

.dl-qrdes {
    color: #5f0510;
    font-size: 12px;
    font-weight: 600;
    margin: 10px 0;
}

.dl-app {
    display: flex;
    justify-content: center;
    text-align: center;
}

.ios {
    margin-right: 10px;
}

.dl-btn {
    display: inline-block;
    background: url(../images/dl-btn.png) no-repeat center;
    background-size: contain;
    width: 274px;
    height: 60px;
    color: #f9e917;
    text-decoration: none;
    line-height: 60px;
    padding-left: 30px;
    animation: scaling 3s linear infinite;
    -webkit-animation: scaling 800ms ease infinite;
    font-size: 12px;
}

.dl-btn>i {
    display: inline-block;
    font-size: 20px;
    vertical-align: middle;
    margin: 0 5px;
}

.dl-img {
    max-width: 100%;
}

.dl-btn-ios {
    display: inline-block;
    background: url(../images/apple.png) no-repeat center;
    background-size: contain;
    width: 274px;
    height: 60px;
    color: #f9e917;
    text-decoration: none;
    line-height: 60px;
    padding-left: 30px;
    animation: scaling 3s linear infinite;
    -webkit-animation: scaling 800ms ease infinite;
    font-size: 12px;
}

.dl-btn-ios>i {
    display: inline-block;
    font-size: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

.dl-img {
    max-width: 80%;
    margin-bottom: 10px;
}

.ios img {
    width: 80%;
    margin-bottom: 10px;
}

.dl-dangky {
    width: 100%;
    margin: 16px 0 0;
    font-size: 25px;
    height: 53px;
    line-height: 53px;
}

.dl-dangky>i {
    font-size: 25px;
}

.cover-text {
    margin: 1.5% auto;
    display: block;
    max-width: 100%;
}

.form-tab {
    display: flex;
    align-items: center;
    text-align: center;
    background: #021f09;
    max-width: 363px;
    margin: 0 auto;
    border: 3px solid #ac8e47;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}
.form-tab > * {
    flex: 1;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 49px;
}
.form-tab a {
    text-decoration: none;
    color: #dcce72;
    outline: none;
}
.form-tab > span {
    background-image: linear-gradient(to bottom, #ca9645, #f1e27d , #f1e27d, #bb803b);
}

/*  floating download bar */
.download-bar {
    background: url('../images/dl_bg.png') top center no-repeat;
    position: fixed;
    top: 15%;
    right: 0;
    z-index: 3;
    display: block;
    width: 206px;
    height: 63px;
    color: #fff;
    font-size: 20px;
    line-height: 63px;
    text-indent: 77px;
    text-decoration: none;
    font-weight: 700;
}
.download-bar:hover {
    color: #fff;
    text-decoration: none;
}


#particles-js {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1;
    top: 0;
}

@media(max-width:1599px){
    html,
    body {
        overflow: initial;
    }
    
    .logo img { max-height: 100px;}
    .cover-text { 
        margin: 0 auto 1.5%;
    }
    .form-dk {
        margin-bottom: 20px;;
    }
}

@media(max-width:1024px) {
    .playerLeft {
        height: 425px;
        left: -75px;
    }
}

@media(max-width:767px) {
    .playerLeft {
        height: 300px;
        left: 0px;
        top: -100px;
    }

    .popup-info .customDiv {
        padding: 150px 4px 0px 0px;
        margin: 40px 20px;
    }

    .noness {
        display: none;
    }
}

@media (max-width:555px) {
    .ios {
        margin-right: 0;
    }

    .dl-app {
        flex-direction: column;
    }

    .dl-btn-ios {
        margin-bottom: 10px;
        margin-left: -10px;
        height: 50px;
        line-height: 50px;
        font-size: 10px;
    }

    .dl-img {
        width: 50%;
    }

    .ios img {
        width: 50%;
    }

    .dl-btn {
        height: 50px;
        line-height: 50px;
        font-size: 10px;
    }

}


/* --------------animation-----------------*/


@keyframes zoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.03);
    }
}

@keyframes godown {
    0% {
        opacity: 0;
    }

    0% {
        opacity: 1;
    }
}



.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

@-webkit-keyframes shake {

    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}


/* ----------RESPONSIVE------------- */
@media (max-width:1455px) {
    .header-container {
        /* padding: 5px 10px;
        flex-wrap: wrap;
        justify-content: space-around; */
    }

    .logo {
        /* flex-basis: 100%;
        margin-bottom: 10px; */
    }

    .register-form {
        /* margin: 0 20px 40px 0; */
    }

    .steps {
        padding: 0 10px;
    }

    .wrap-footer {
        display: block;
    }

    .deposit {
        margin: 20px 0;
    }
    
    .text-box{
        margin: 40px 10px;
    }
}

@media (max-width:1455px) {
    .download-bar {
        top: 5%;
    }
}

@media (max-width:768px) {
    .mob{
        display: block;
    }
    .desk{
        display: none;
    }
    .logo img {
        max-height: 75px;
    }

    .banner{
        /* background: #011b10; */
    }

    .form-dk {
        float: none;
        padding: 0 10px;
    }
 
    .register-form{
        /* margin: 20px auto; */
    }

    .bank {
        text-align: center;
    }

    .cover-text {
        padding: 0 2%;
        margin: 0 auto 17px;
    }
    
    .download-bar {
        top: auto;
        bottom: 0;
        left: 0;
        padding: 0;
        background: #064a2a;
        width: 100%;
        text-align: center;
        text-indent: 0;
        height: auto;
        line-height: 55px;
    }

    .download-bar span {
        display: inline-block;
    }

    .banner-container {
        display: block;
        height: auto;
        margin-bottom: 75px;
    }

    .birthDate select {
        width: 31.5%;
    }

    .form-dk {
        margin-bottom: 0;
    }
}

@media (max-width:700px) {
    .steps {
        flex-wrap: wrap;
        justify-content: center;
    }

    .step {
        flex-basis: 98%;
        margin: 10px 0;
    }

    .bt {
        min-width: 110px;
        font-size: 14px;
    }

    .text1 {
        padding: 20px 5px;
    }

    .img-container .each-game:nth-child(5) {
        padding-bottom: 60px;
    }
}
@media (max-width:600px){
    .lottery-details{
        width: 90%;
        left: 5%;
        top: 10%;
        height: 165px;
    }
    .lottery-details span{
        font-size: 14px;
    }
    .img-container p {
        font-size: 24px;
    }
    .step{
        min-height: 250px;
    }

    .form-tab > * {
        font-size: 16px;
        line-height: 35px;
    }
    .register-form {
        padding-left: 15px;
        padding-right: 15px;;
        width: 100%;
    }
}
@media (max-width:424px) {
    .img-foot.payment {
        background-position: 0 -144px;
        width: 64px;
        height: 46px;
    }

    .img-foot.guide {
        background-position: -443px 46px;
        width: 64px;
        height: 46px;
    }

    .img-foot.support {
        background-position: -135px 46px;
        width: 64px;
        height: 46px;
    }

    .img-foot.gift {
        background-position: 175px 46px;
        width: 67px;
        height: 46px;
        margin-right: 5px;
    }

    .contain-btn {
        display: flex;
    }

    .bt {
        font-size: 12px;
        min-width: 95px;
    }

    .icon-download {
        display: none;
    }
    
}

@media (max-width:375px) {
    .birthDate select {
        width: 31.1%;
    }

    .bt {
        font-size: 10px;
    }
}