body{
    background: #000;
    color: #fff;
}
.row{
    padding: 0px;
    margin: 0px;
}
.mb{
    display: none;
}
@font-face {  
    font-family: DB-B ;  
    src: url(../fonts/DB-B.TTF ) format("truetype");  
}
.DB-B { font-family: DB-B , verdana, helvetica, sans-serif; }

@font-face {  
    font-family: DB-S ;  
    src: url(../fonts/DB-S.TTF ) format("truetype");  
}
.DB-S { font-family: DB-S , verdana, helvetica, sans-serif; }
p{
    font-family: DB-B;
}
label{
    font-family: DB-B;
}
span{
    font-family: DB-B;
}
button{
    font-family: DB-B;
}
a{
    font-family: DB-B;
}
h1{
    font-family: DB-B;
}
.bg-1{
    background-image: url(../img/bg-1.jpg);
    background-size: cover;
    background-repeat: round;
}
.bg-2{
    background-image: url(../img/bg-2.jpg);
    background-size: cover;
    background-repeat: round;
}
.bg-otp{
    background-image: url(../img/bg-otp.jpg);
    background-size: cover;
    background-repeat: round;
}
.bg-register{
    background-image: url(../img/bg-register.jpg);
    background-size: cover;
    background-repeat: round;
}
.bg-news{
    /*background-image: url(../img/bg-news.jpg);*/
    background-image: url(../img/bg-pc.jpg);
    background-size: cover;
    background-repeat: round;
}
.bg-20{
    background-color: #000;
}
.header{
    
}
.header .top-logo{
    padding-top: 20px;
    padding-bottom: 20px;
}
.header .top-logo .logo-1{
    width: 50%;
    text-align: left;
}
.header .top-logo .logo-1 .logo-t{
    width: 50%;
}
.header .top-logo .login-1{
    width: 50%;
    text-align: right;
}
.header .top-logo .login-1 img{
    width: 35%;
}
.header .top-logo .login-1 img:hover{
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.1);
    transition: 0.5s;
}
.header .head-menu .nav{
    text-align: center;
    justify-content: center;
}
.header .head-menu .nav-link{
    text-align: center;
    font-size: 20px;
    color: #fff;
    padding: .5rem 0;
}
.header .head-menu .nav-link:hover{
    color: #ffd801;
}
.header .head-menu .nav-link img:hover{
    transition: 0.5s;
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.1);
}
.header .head-menu .nav-link .top-1{
    width: 70%;
}
.header .head-menu .nav-link .top-2{
    width: 60%;
}
.header .head-menu .nav-link .top-3{
    width: 54%;
}
.header .head-menu .nav-link .top-4{
    width: 54%;
}
.header .head-menu .nav-link .top-5{
    width: 60%;
}
.header .head-menu .nav-link .top-6{
    width: 74%;
}
.head-article a {
    color: #fb7380;
    text-decoration: none;
}
.head-article a:hover {
    text-decoration: underline;
}
.head-article ul{
    text-align: left;
}
.head-article ul li {
    color: #f9d259;
}
.head-article ul li a{
    font-size: 23px;
}
.head-article h1 {
    text-align: center;
    color: #f9d259;
    text-shadow: 0.15em 0.1em 0.05em rgb(51, 50, 50);
}
.head-article h2 {
    text-align: left;
    background-image: linear-gradient(to bottom right, rgb(10, 10, 10), rgb(95, 90, 90));
    width: 300px;
    height: 40px;
    text-align: center;
    text-shadow: 0.15em 0.1em 0.05em rgb(17, 17, 17);
}

/*.seo-a{
    text-decoration: none;
    color: #ffd801;
}*/
.banner{
    text-align: center;
    padding-top: 10px;
}
.banner .img-b img{
    width: 100%;
}
.banner .img-regis{
    padding-bottom: 8%;
}
.banner .img-regis img{
    width: 40%;
    border-radius: 50px;
}
.banner .img-regis img:hover{
    box-shadow: 0 0 15px #f0da63;
    transition: 0.5s;
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.1);
}
.banner .regis-b{
    padding-bottom: 8%;
}
.banner .regis-b a{
    font-size: 50px;
    color: #4c1113;
    text-decoration: none;
    background: rgb(255,255,255);
    background: linear-gradient(198deg, rgba(255,255,255,1) 20%, rgba(181,192,196,1) 100%);
    padding: 10px 30px;
    border-radius: 50px;
    border: 4px solid #f0da63;
    box-shadow: 0 0 10px #fff;
}
.banner .regis-b a:hover{
    box-shadow: 0 0 15px #f0da63;
    padding: 12px 40px;
    transition: 0.2s;
}
.content{
    text-align: center;
}
.content .logo-content{
    padding-top: 20px;
}
.content .logo-content .logo-c{
    width: 40%;
    padding-bottom: 20px;
}
.content .txt-c1 p{
    font-size: 50px;
}
.content .txt-c1{
    padding-bottom: 20px;
}
.content .game-all{
    text-align: center;
    padding-bottom: 5%;
}
.content .game-all .game-1{
    width: 50%;
    text-align: center;
    justify-content: center;
}
.content .game-all .game-2{
    width: 50%;
    text-align: center;
    justify-content: center;
}
.content .game-all .game-1 .g-1 img{
    width: 70%;
}
.content .game-all .game-1 .g-1 .play-01 {
    width: 40%;
    margin-top: -80px;
    border-radius: 10px;
}
.content .game-all .game-1 .g-1 .play-02 {
    width: 40%;
    margin-top: -80px;
    border-radius: 10px;
}
.content .game-all .game-1 .g-1 .play-01:hover{
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.1);
    transition: 0.5s;
    box-shadow: 0 0 20px #fff;
}
.content .game-all .game-1 .g-1 .play-02:hover{
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.1);
    transition: 0.5s;
    box-shadow: 0 0 20px #fff;
}
.content .game-all .game-2 .g-2 img{
    width: 70%;
}
.content .game-all .game-2 .g-2 .play-01 {
    width: 40%;
    margin-top: -80px;
    border-radius: 10px;
}
.content .game-all .game-2 .g-2 .play-02 {
    width: 40%;
    margin-top: -80px;
    border-radius: 10px;
}
.content .game-all .game-2 .g-2 .play-01:hover{
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.1);
    transition: 0.5s;
    box-shadow: 0 0 20px #fff;
}
.content .game-all .game-2 .g-2 .play-02:hover{
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.1);
    transition: 0.5s;
    box-shadow: 0 0 20px #fff;
}
.content .img-pro{
    padding-top: 20px;
    padding-bottom: 20px;
}
.content .box-pro{
    width: 50%;
}
.content .img-pro img{
    width: 95%;
}
.content .img-pro .txt-po{
    text-align: left;
    font-size: 20px;
    margin-bottom: 5px;
}
.content .pro-top{
    padding-top: 20px;
}
/*modal-pro*/
.modal .modal-body .img-detail{
    width: 65%;
}
.modal .modal-body a{
    text-decoration: none; 
}
.modal .bg-pro{
    background: #0c0c0c;
}
.modal .bg-f{
    background-color: #7b0304;
    justify-content: center;
}
.modal .bg-hea{
    background-color: #7b0304;
    justify-content: center;
}
.modal .modal-body .txt-po{
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    padding-top: 20px;
    margin-bottom: 10px;
}
/*modal-pro*/
.news{
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: #0000007a;
}
.news .news-head img{
    width: 35%;
    padding-top: 15px;
    padding-bottom: 15px;
}
.news .news-content{
    width: 50%;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
}
.news .news-content .news-form{
    background-color: #000;
    padding: 15px 15px 0 15px;
}
.news .news-content .news-form a{
    text-decoration: none;
}
.news .news-content .img-news img{
    width: 100%;
}
.news .news-content .img-news img:hover{
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.02);
    transition: 0.5s;
}
.news .news-content .news-detail{
    padding-top: 7px;
}
.news .news-content .news-detail p{
    font-size: 19px;
    line-height: 20px;
    text-align: left;
    color: #ff9b0d;
}
.news .news-content .news-more{
    color: #ff9b0d;
    font-size: 18px;
}
.container .txt-head h1 {
    color: #ffc107;
    text-align: center;
    padding-top: 30px;
}
.container .date-time {
    width: 50%;
    text-align: left;
}
.container .date-time p {
    color: #fff;
    font-size: 20px;
}
.container .icon {
    width: 50%;
    text-align: right;
}
.container .icon .icon-2 {
    color: #fff;
    font-size: 20px;
}
.container .icon .icon-2 a {
    color: #fff;
}
.container .detail-img img {
    width: 100%;
}
.container .detail-txt {
    color: #fff;
    padding: 15px 0px 20px;
    text-align: left;
    font-size: 18px;
}
.container .bg-detail{
    background-color: rgba(0, 0, 0, 0.8);
}
.container .btn-new {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.container .btn-new .btn-1 {
    text-align: center;
    text-decoration: none;
    width: 48%;
    margin-right: 10px;
}
.container .btn-new .btn-bgnew {
    font-size: 20px;
    background: #ffc107;
    border: 2px solid #ffc107;
    box-shadow: 0 0 10px #e0bb00;
    border-radius: 56px;
    padding: 5px 60px;
    color: #000;
    text-decoration: none;
    font-family: DB;
}
.container .btn-new .btn-2 {
    text-align: center;
    text-decoration: none;
    width: 48%;
    margin-left: 10px;
}
.otp{
    padding-top: 5%;
}
.otp .logo-otp{
    width: 40%;
    padding-bottom: 5%;
}
.otp .txt-otp1 .p-otp1{
    margin-bottom: 0;
    font-size: 40px;
}
.content .logo-2{
    text-align: center;
    padding-bottom: 20px;
}
.content .logo-2 img{
    width: 50%;
}
.content .txt-login{
    text-align: center;
}
.content .txt-login h1{
    font-size: 40px;
    color: #eab535;
}
.content .top{
    padding-top: 20px; 
}
.box-new .head-news{
    width: 20%;
}
.box-new .bor-new{
    border: double 5px transparent;
    border-radius: 13px;
    background-image: linear-gradient(#000, #000), linear-gradient(to right, #6d6e69, #fff, #6d6e69);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.box-new .txt-hn{
    font-size: 35px;
    margin-bottom: 0px;
}
.box-new .row .news-button {
    width: 100%;
    padding: 10px 0px;
}
.box-new .row .news-button .news-border {
    border: 2px solid #fff;
    width: 100%;
}
.box-new .row .news {
    padding-bottom: 25px;
}
.box-new .row .news .see-all {
    text-align: right;
    padding-top: 35px;
    width: 80%;
}
.box-new .row .news .see-all a {
    background: #fff;
    color: #000;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    padding: 5px 25px;
}
.box-new .news a {
    text-decoration: none;
}
.box-new .news-img img {
    width: 100%;
}
.box-new .row .news .news-txt {
    width: 100%;
    text-align: left;
    line-height: 25px;
    padding-top: 10px;
}
.box-new .news .news-txt .txt-all a {
    color: #fff;
    text-decoration: none;
}
.box-new .txt-all .txt-day {
    color: #fff;
    text-decoration: none;
}
.box-new .row .news .news-img-1 img {
    width: 100%;
}
.box-new .row .news .news-txt-1 {
    width: 100%;
    text-align: left;
}
.box-new .news .txt-head p {
    color: #ffc107;
    text-decoration: none;
    font-size: 30px;
    padding: 5px 0px 0px;
    margin-bottom: 0px;
}
.box-new .txt-all .txt-day {
    color: #fff;
    text-decoration: none;
    margin-bottom: 0px;
}
.box-new .txt-all .txt-detail-new {
    color: #fff;
    margin-bottom: 0px;
}
.boxnews {
    margin-bottom: 25px;
}
.box-new .news .news-txt-1 .txt-head p {
    color: #ffc107;
    text-decoration: none;
    font-size: 21px;
    padding: 0px 0px 0px;
    margin: 0px;
    line-height: 25px;
}
.box-new .news .news-txt-1 .txt-all-1 p {
    color: #fff;
    text-decoration: none;
    margin-top: 0;
    margin-bottom: 0rem;
}
.otp .txt-otp1 .p-otp2{
    color: #eab535;
    font-size: 40px;
}
.otp .img-otp1 img{
    width: 15%;
}
.otp .input-otp{
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 30px;
}
.otp .input-otp .in-1{
    font-size: 25px;
    font-family: DB-B;
}
.otp .input-otp .txt-in1{
    color: #eab535;
    font-size: 22px;
    margin-bottom: 0;
}
.otp .input-otp2{
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 10px;
    display: flex;
}
.otp .input-otp2 .in-2{
    width: 65%;
    font-size: 25px;
    font-family: DB-B;
    margin-right: 20px;
}
.otp .input-otp2 .in-2-2 {
    width: 100%;
    font-size: 25px;
    font-family: DB-B;
}
.otp .input-otp2 .btn-otp{
    width: 35%;
    font-size: 22px;
    color: #000;
}
.otp .action{
    padding-top: 30px;
    padding-bottom: 20%;
}
.otp .action .btn-ac{
    font-size: 35px;
    box-shadow: 0px 10px 2px -5px #fe8d0b;
    border-radius: 10px;
    padding-left: 50px;
    padding-right: 50px;
    width: 50%;
}
.otp .action .btn-ac:hover{
    box-shadow: 0 0 10px #ffc107;
}
.otp .time-otp .time-otp1{
    font-size: 20px;
    color: #ffc107;
}
.msg{
    font-size: 20px;
    color: #ffc107;
}
.register .logo-regis-1{
    padding-top: 5%;
    width: 30%;
}
.register .txt-re1{
    padding-top: 5%;
    padding-bottom: 3%;
    margin-bottom: 0;
    font-size: 60px;
    color: #ffc107;
}
.register .input-register{
    text-align: left;
    padding-left: 20%;
    padding-right: 20%;
}
.register .input-register .txt-in-re1{
    font-size: 25px;
    color: #ffc107;
    margin-bottom: 0;
}
.register .input-register .in-re-1{
    font-size: 22px;
    font-family: DB-B;
}
.register .input-register .txt-in-re2{
    font-size: 25px;
}
.register .register-pro{
    text-align: center;
    padding-top: 20px;
}
.register .register-pro .txt-pro{
    font-size: 40px;
    color: #ffc107;
}
.register .check-pro{
    border-radius: 10px;
    background: #fff;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-top: 20px;
    cursor: pointer;
    text-align: center;
}
.register .check-pro .txt-pro1{
    font-size: 25px;
    color: #000;
}
.register .none-1{
    display: none !important;
}
.register .bg-red{
    background-color: red;
}
.register .bg-red .txt-pro1{
    color: #fff !important;
}
.register .bg-green{
    background-color: rgb(0, 241, 12);
}
.register .bg-green .txt-pro1{
    color: #000 !important;
}
.register .action{
    padding-top: 40px;
    text-align: center;
    padding-bottom: 25%;
}
.register .action .txt-ac1{
    font-size: 25px;
    margin-bottom: 0;
}
.register .action .btn-success{
    margin-top: 20px;
    font-size: 40px;
}
.register .action .btn-danger{
    margin-top: 20px;
    font-size: 40px;
}
.register select{
    font-family: DB-B;
    font-size: 22px;
}
.know_us {
    width: 50%;
}
#know_us_note{
    display: inline-block; 
    width: 45%; 
    font-size: 22px; 
    margin-left: 25px;
    font-family: DB-B;
}
.footer{
    text-align: center;
}
.footer .logo-f{
    padding-top: 5%;
    padding-bottom: 50px;
}
.footer .logo-f .logo-f1{
    width: 50%;
}
.footer .txt-f1 h1{
    font-size: 50px;
    margin-bottom: 0px;
}
.footer .txt-f1 p{
    font-size: 50px;
    line-height: 1;
}
.footer .txt-f2{
    text-align: left;
}
.footer .txt-f3{
    padding-top: 40px;
}
.footer .txt-f2 .txt-fp1{
    margin-bottom: 0;
    font-size: 40px;
    color: #ffd801;
}
.footer .txt-f2 .txt-fp2{
    font-size: 25px;
    margin-bottom: 0px;
}
.menu-sub .menu-s1{
    border: double 10px transparent;
    border-radius: 30px;
    background-image: linear-gradient(#000, #000), linear-gradient(to right, #6d6e69, #fff, #6d6e69);
    background-origin: border-box;
    background-clip: content-box, border-box;
    display: flex;
}
.menu-sub .menu-s1 .menu-s2{
    text-align: center;
    width: 20%;
    padding-top: 10px;
}
.menu-sub .menu-s1 .menu-s2 a{
    font-size: 30px;
    color: #fff;
    text-decoration: none;
}
.menu-sub .menu-s1 .menu-s2 a:hover{
    color: #ffd801;
}
.menu-sub .menu-s1 .menu-s2 p{
    margin-bottom: 0px;
}
.menu-sub .menu-s1 .menu-s2 .sub-1 img{
    width: 40%;
}
.menu-sub .menu-s1 .menu-s2 .sub-2 img{
    width: 45%;
}
.menu-sub .menu-s1 .menu-s2 .sub-3 img{
    width: 45%;
}
.menu-sub .menu-s1 .menu-s2 img:hover{
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.1);
    transition: 0.5s;
}
.aff-1{
    background-color: #0000004a;
    padding: 10px;
}
.aff-2{
    background-color: #000;
}
.aff-1 .detail-aff{
    padding-left: 5%;
    padding-right: 5%;
}
.aff-1 .img-aff{
    text-align: center;
}
.aff-1 .img-aff img{
    width: 100%
}
.aff-1 .txt-aff{
    text-align: left;
    padding-top: 5px;
    padding-bottom: 5px;
}
.aff-1 .txt-aff .txt-aff-1{
    margin-bottom: 0;
    font-size: 24px;
    line-height: 23px;
}
.open-1{
    padding-top: 10px;
    padding-bottom: 10px;
}
.open-1 a{
    text-align: center;
    color: #f9d259;
    text-shadow: 0.15em 0.1em 0.05em rgb(51 50 50);
    font-size: 40px;
    text-decoration: none;
}
.seo-mt img{
    margin-bottom: 30px;
}

@media only screen and (min-width: 100px) and (max-width: 1200px){
    .header .nav-item{
        width: 16.5%;
    }
    .header .head-menu .nav-link .top-1{
        width: 60%;
    }
    .header .head-menu .nav-link .top-2{
        width: 51%;
    }
    .header .head-menu .nav-link .top-3{
        width: 46%;
    }
    .header .head-menu .nav-link .top-4{
        width: 47%;
    }
    .header .head-menu .nav-link .top-5{
        width: 54.5%;
    }
    .header .head-menu .nav-link .top-6{
        width: 63%;
    }
}

@media only screen and (min-width: 100px) and (max-width: 1024px){
    .otp .txt-otp1 .p-otp1 {
        margin-bottom: 0;
        font-size: 30px;
    }
    .otp .txt-otp1 .p-otp2 {
        color: #eab535;
        font-size: 30px;
    }
    .otp .input-otp .txt-in1 {
        color: #eab535;
        font-size: 18px;
        margin-bottom: 0;
    }
    .otp .input-otp {
        padding-left: 10%;
        padding-right: 10%;
    }
    .otp .input-otp2 {
        padding-left: 10%;
        padding-right: 10%;
    }
    .register .input-register {
        text-align: left;
        padding-left: 5%;
        padding-right: 5%;
    }
    .content .game-all .game-1 .g-1 .play-01 {
        width: 40%;
        margin-top: -65px;
    }
    .content .game-all .game-1 .g-1 .play-02 {
        width: 40%;
        margin-top: -65px;
    }
    .content .game-all .game-2 .g-2 .play-01 {
        width: 40%;
        margin-top: -65px;
    }
    .content .game-all .game-2 .g-2 .play-02 {
        width: 40%;
        margin-top: -65px;
    }
    .box-new .news .news-txt-1 .txt-head p {
        font-size: 18px;
    }
    .box-new .news .news-txt-1 .txt-all-1 p {
        font-size: 18px;
    }
    .box-new .news .txt-head p {
        font-size: 20px;
    }
}

@media only screen and (min-width: 521px) and (max-width: 768px){
    
    .wheel-top{
        margin-bottom: 20%;
    }
    .box-new .row .news .news-txt {
        line-height: 20px;
    }
    .boxnews {
        padding-top: 20px;
        margin-bottom: 0px;
    }
    .box-new .txt-all .txt-detail-new {
        font-size: 18px;
    }
    .box-new .txt-all .txt-day {
        font-size: 18px;
    }
    .box-new .row-top{
        padding-top: 20px;
    }
    .news .col-md-6{
        max-width: 100% !important;
        flex: 0 0 100%;
    }
    .news .col-md-5{
        max-width: 100% !important;
        flex: 0 0 100%;
    }
    .box-new .news .news-txt-1 .txt-head p {
        font-size: 20px;
    }
    .box-new .news .news-txt-1 .txt-all-1 p {
        font-size: 20px;
    }
    .box-new .news .txt-head p {
        font-size: 20px;
    }
    .modal .modal-body .img-detail {
        width: 90%;
    }
    .banner .img-regis img {
        width: 45%;
        border-radius: 50px;
    }
    .content .game-all .game-1 .g-1 .play-01 {
        width: 40%;
        margin-top: -50px;
        border-radius: 5px;
    }
    .content .game-all .game-1 .g-1 .play-02 {
        width: 40%;
        margin-top: -50px;
        border-radius: 5px;
    }
    .content .game-all .game-2 .g-2 .play-01 {
        width: 40%;
        margin-top: -50px;
        border-radius: 5px;
    }
    .content .game-all .game-2 .g-2 .play-02 {
        width: 40%;
        margin-top: -50px;
        border-radius: 5px;
    }
    .otp .txt-otp1 .p-otp1 {
        margin-bottom: 0;
        font-size: 25px;
    }
    .otp .txt-otp1 .p-otp2 {
        color: #eab535;
        font-size: 25px;
    }
    .otp .input-otp {
        padding-left: 5%;
        padding-right: 5%;
    }
    .otp .input-otp2 {
        padding-left: 5%;
        padding-right: 5%;
    }
    .register .check-pro .txt-pro1 {
        font-size: 20px;
        color: #000;
    }
    .register .input-register .txt-in-re2 {
        font-size: 19px;
    }
    .container{
        max-width: 720px;
    }
    .menu-sub .menu-s1 .menu-s2 a {
        font-size: 25px;
        color: #fff;
        text-decoration: none;
    }
    .menu-sub{
        position: fixed;
        width: 100%;
        bottom: 0;
    }
    .footer{
        padding-bottom: 20%;
    }
    .menu-sub .container{
        padding-left: 0;
        padding-right: 0;
    }
    .aff-1 .txt-aff .txt-aff-1 {
        margin-bottom: 0;
        font-size: 19px;
        line-height: 20px;
    }
}

@media only screen and (min-width: 521px) and (max-width: 633px){
    .modal .modal-body .img-detail {
        width: 90%;
    }
    .content .txt-c1 p {
        font-size: 40px;
    }
    .otp .txt-otp1 .p-otp1 {
        margin-bottom: 0;
        font-size: 20px;
    }
    .otp .txt-otp1 .p-otp2 {
        color: #eab535;
        font-size: 20px;
    }
    .footer .txt-f1 h1 {
        font-size: 40px;
    }
    .footer .txt-f1 p {
        font-size: 40px;
        line-height: 1;
    }
    .footer .txt-f2 .txt-fp1 {
        font-size: 25px;
    }
    .footer .txt-f2 .txt-fp2 {
        font-size: 20px;
    }
    
}

@media only screen and (min-width: 100px) and (max-width: 580px){
    
    .container .btn-new .btn-1 {
        width: 48%;
        margin-right: 5px;
    }
    .container .btn-new .btn-2 {
        width: 48%;
        margin-left: 5px;
    }
    .container .btn-new .btn-bgnew {
        padding: 0px 0px;
        font-size: 18px;
    }
    .container .btn-new {
        padding-bottom: 30%;
    }
    .container .date-time p {
        font-size: 18px;
    }
    .container .icon .icon-2 {
        font-size: 18px;
    }
    .container .txt-head h1 {
        font-size: 23px;
    }
    .boxnews {
        padding-top: 20px;
        margin-bottom: 0px;
    }
    .modal .modal-body .img-detail {
        width: 90%;
    }
    .bg-news{
        background-image: url(../img/bg-news.jpg);
        background-size: cover;
        background-repeat: round;
    }
    .content .mgb {
        margin-bottom: 85px;
    }
    .content .logo-2 img {
        width: 80%;
    }
    .content .box-pro {
        width: 100%;
    }
    .content .r-top{
        padding-top: 20px;
    }
    .header .top-logo .logo-1 .logo-t {
        width: 65%;
    }
    .header .top-logo .login-1 img {
        width: 45%;
    }
    .header .head-menu .nav-link {
        font-size: 17px;
    }
    .header .head-menu .nav-link .top-1 {
        width: 70%;
    }
    .header .head-menu .nav-link .top-2 {
        width: 60%;
    }
    .header .head-menu .nav-link .top-3{
        width: 54%;
    }
    .header .head-menu .nav-link .top-4{
        width: 55%;
    }
    .header .head-menu .nav-link .top-5{
        width: 63%;
    }
    .header .head-menu .nav-link .top-6{
        width: 74%;
    }
    .banner .regis-b a {
        font-size: 30px;
    }
    .content .txt-c1 p {
        font-size: 40px;
    }
    .otp .txt-otp1 .p-otp1 {
        margin-bottom: 0;
        font-size: 18px;
    }
    .otp .txt-otp1 .p-otp2 {
        color: #eab535;
        font-size: 18px;
    }
    .otp .input-otp {
        padding-left: 5%;
        padding-right: 5%;
    }
    .otp .input-otp2 {
        padding-left: 5%;
        padding-right: 5%;
    }
    .otp .input-otp .txt-in1 {
        color: #eab535;
        font-size: 15px;
        margin-bottom: 0;
    }
    .otp .input-otp .in-1 {
        font-size: 20px;
    }
    .otp .input-otp2 .in-2-2 {
        font-size: 20px;
    }
    .otp .input-otp2 .in-2 {
        font-size: 20px;
    }
    .otp .input-otp2 .btn-otp {
        font-size: 20px;
    }
    .register .check-pro .txt-pro1 {
        font-size: 17px;
        color: #000;
    }
    .register .input-register .txt-in-re2 {
        font-size: 19px;
    }
    .footer{
        padding-bottom: 25%;
    }
    .menu-sub .menu-s1 .menu-s2 a {
        font-size: 20px;
    }
    .menu-sub{
        position: fixed;
        width: 100%;
        bottom: 0;
    }
    .menu-sub .container{
        padding-left: 0;
        padding-right: 0;
    }
    .aff-1 .txt-login{
        text-align: left;
        padding-left: 5%;
    }
    .aff-1 .p-otp2{
        font-size: 30px !important;
    }
    .aff-1 .txt-aff .txt-aff-1 {
        font-size: 18px;
        line-height: 20px;
    }
}

@media only screen and (min-width: 100px) and (max-width: 520px){
    .wheel-top{
        margin-bottom: 30%;
    }
    .seo-mt{
        margin-bottom: 27%;
    }
    .seo-mtt {
        margin-bottom: 100px !important;
    }
    .box-new .row .news .news-txt {
        line-height: 18px;
    }
    .row-top{
        padding-top: 20px;
    }
    .content .txt-c1 p {
        font-size: 30px;
    }
    .footer .txt-f1 h1 {
        font-size: 30px;
        margin-bottom: 0px;
    }
    .footer .txt-f1 p {
        font-size: 30px;
        line-height: 1;
    }
    .footer .txt-f2 .txt-fp1 {
        font-size: 22px;
    }
    .footer .txt-f2 .txt-fp2 {
        font-size: 20px;
    }
}

@media only screen and (min-width: 100px) and (max-width: 497px){
    .box-new .head-news {
        width: 100%;
    }
    .box-new .row .news .see-all {
        width: 100%;
    }
    .aff-1{
        padding-bottom: 30%;
    }
    .know_us {
        width: 100%;
    }
    #know_us_note {
        display: inline-block;
        width: 100%;
        font-size: 18px;
        margin-left: 0;
        font-family: DB-B;
        margin-top: 10px;
    }
    .head-menu .container{
        background-color: #00000017;
    }
    .header .top-logo .logo-1 .logo-t {
        width: 85%;
    }
    .header .top-logo .login-1 img {
        width: 55%;
    }
    .header .nav-item {
        width: 16.66%;
    }
    .header .head-menu .nav-link {
        font-size: 13px;
        padding: 5px 0 0 0;
    }
    .header .head-menu .nav-link p{
        margin-bottom: 0;
    }
    .header .head-menu .nav-link .top-1 {
        width: 64%;
    }
    .header .head-menu .nav-link .top-2 {
        width: 80%;
    }
    .header .head-menu .nav-link .top-3 {
        width: 72%;
    }
    .header .head-menu .nav-link .top-4 {
        width: 73%;
    }
    .header .head-menu .nav-link .top-5 {
        width: 85%;
    }
    .header .head-menu .nav-link .top-6 {
        width: 100%;
    }
    .banner .img-regis img {
        width: 70%;
        border-radius: 50px;
    }
    .content .logo-content .logo-c {
        width: 75%;
        padding-bottom: 20px;
    }
    .content .txt-c1 p {
        font-size: 25px;
    }
    .content .game-all .game-1 .g-1 img {
        width: 80%;
    }
    .content .game-all .game-2 .g-2 img {
        width: 80%;
    }
    .content .game-all .game-1 .g-1 .play-01 {
        width: 40%;
        margin-top: -35px;
        border-radius: 5px;
    }
    .content .game-all .game-1 .g-1 .play-02 {
        width: 40%;
        margin-top: -35px;
        border-radius: 5px;
    }
    .content .game-all .game-2 .g-2 .play-01 {
        width: 40%;
        margin-top: -35px;
        border-radius: 5px;
    }
    .content .game-all .game-2 .g-2 .play-02 {
        width: 40%;
        margin-top: -35px;
        border-radius: 5px;
    }
    .news .news-head img {
        width: 60%;
        padding-bottom: 10px;
    }
    .news{
        padding-bottom: 25%;
    }
    .news .news-content{
        width: 100%;
    }
    .news .news-content .news-detail p{
        font-size: 18px;
        line-height: 19px;
    }
    .otp .img-otp1 img {
        width: 25%;
    }
    .otp .input-otp2 {
        display: block;
    }
    .otp .input-otp2 .in-2 {
        width: 100%;
    }
    .otp .input-otp2 .btn-otp {
        width: 100%;
        margin-top: 15px;
    }
    .otp .action .btn-ac {
        width: 90%;
    }
    .otp .action{
        padding-bottom: 30%;
    }
    .register .logo-regis-1 {
        padding-top: 5%;
        width: 55%;
    }
    .register .input-register .txt-in-re1 {
        font-size: 21px;
        color: #ffc107;
        margin-bottom: 0;
    }
    .register .input-register .in-re-1 {
        font-size: 18px;
        font-family: DB-B;
    }
    .register .input-register .txt-in-re2 {
        font-size: 17px;
    }
    .register select{
        font-family: DB-B;
        font-size: 18px;
    }
    .register .check-pro .txt-pro1 {
        font-size: 20px;
        color: #000;
    }
    .register .action .txt-ac1 {
        font-size: 17px;
        margin-bottom: 0;
    }
    .footer .logo-f .logo-f1 {
        width: 75%;
    }
    .footer .txt-f1 h1 {
        font-size: 25px;
        margin-bottom: 0px;
    }
    .footer .txt-f1 p {
        font-size: 25px;
        line-height: 1;
    }
    .menu-sub .menu-s1 {
        border: double 7px transparent;
    }
    .menu-sub .menu-s1 .menu-s2 a {
        font-size: 17px;
    }
    .menu-sub .menu-s1 .menu-s2 .sub-1 img {
        width: 60%;
    }
    .menu-sub .menu-s1 .menu-s2 .sub-2 img {
        width: 67%;
    }
    .menu-sub .menu-s1 .menu-s2 .sub-3 img {
        width: 67%;
    }
}

@media only screen and (min-width: 100px) and (max-width: 375px){
    .header .head-menu .nav-link {
        font-size: 12px;
    }
    .content .game-all .game-1 .g-1 .play-01 {
        width: 40%;
        margin-top: -28px;
    }
    .content .game-all .game-1 .g-1 .play-02 {
        width: 40%;
        margin-top: -28px;
    }
    .content .game-all .game-2 .g-2 .play-01 {
        width: 40%;
        margin-top: -28px;
    }
    .content .game-all .game-2 .g-2 .play-02 {
        width: 40%;
        margin-top: -28px;
    }
}

@media only screen and (min-width: 100px) and (max-width: 356px){
    .header .head-menu .nav-link {
        font-size: 11px;
    }
    .banner .regis-b a {
        font-size: 25px;
    }
    .menu-sub .menu-s1 .menu-s2 a {
        font-size: 13px;
    }
}

@media only screen and (min-width: 100px) and (max-width: 330px){

    .register .input-register .txt-in-re1 {
        font-size: 18px;
    }
    .register .input-register .in-re-1 {
        font-size: 15px;
        font-family: DB-B;
    }
    .register select{
        font-family: DB-B;
        font-size: 15px;
    }
    .register .input-register .txt-in-re2 {
        font-size: 14px;
    }
    .register .check-pro .txt-pro1 {
        font-size: 17px;
    }
    .register .action .txt-ac1 {
        font-size: 15px;
        margin-bottom: 0;
    }
    .content .game-all .game-1 .g-1 .play-01 {
        width: 40%;
        margin-top: -25px;
    }
    .content .game-all .game-1 .g-1 .play-02 {
        width: 40%;
        margin-top: -25px;
    }
    .content .game-all .game-2 .g-2 .play-01 {
        width: 40%;
        margin-top: -25px;
    }
    .content .game-all .game-2 .g-2 .play-02 {
        width: 40%;
        margin-top: -25px;
    }
}
@media (min-width: @screen-sm-min) { ... }
@media (min-width: @screen-sm-min) { ... }