@media (min-width: 420px) {
    .btn{
        padding: 5px 10px;
    }
    .sport .title{
        font-size: 1.2rem;
    }
    .section-transaction h1{
        font-size: 1.2rem;
    }
    .section-games h1{
        font-size: 1.2rem;
    }
    .game-category-m li{
        width:5rem;
        font-size: 0.9rem;
    }
    .gamelist-subpage{
        grid-template-columns: repeat(3, 1fr);
    }
    .sport .sport-wrapper{
        width: calc( 100% - 5rem );
    }
    .acct-nav-wrapper .icon{
        font-size: 0.6rem;
    }
    .footer-nav{
        max-width: 600px;
        left: 50%;
        transform: translateX(-50%);
    }
    .nav-open-content-m .nav-menu-top{
        grid-template-columns: repeat(3, 1fr);
    }
    .nav-open-content-m .download{
        flex-direction:row;
    }
    /*partner*/
    #modal-partner .modal-content{
        padding: 25px;
    }
    .partner-logo-wrapper .partner-logo{
        margin: 10px;
        width:calc(25% - 20px);
    }
}
@media (min-width: 576px) {
    .btn{
        padding: 5px 15px;
    }
     /*header*/
    .logo-text{
        font-size: 7vw;
    }
    .game-category-m li{
        width:6rem;
        font-size: 0.9rem;
    }
    .sport .sport-wrapper{
        width: calc( 100% - 6rem );
    }
    .sport .hotmatch-iframe{
        height: 300px;
    }
    .gamelist-wrapper{
        --visible-cols: 4;
        --col-gap: 15px;
        --col-hint: 0px;
        --scrollbar-padding: 20px;
        --col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint) / var(--visible-cols));
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: var(--col-size);
        grid-auto-columns: var(--col-size);
        overflow-x: auto;
        grid-gap: var(--col-gap);
    }
    .gamelist-subpage{
        grid-template-columns: repeat(4, 1fr);
    }
    .footer-wrapper{
        display: flex;
    }
}
@media (min-width: 768px) {
    .logo-text{
        font-size: 5vw;
    }
    .game-category-m li{
        width:8rem;
        font-size: 1rem;
    }
    .sport .sport-wrapper{
        width: calc( 100% - 8rem );
    }
    .gamelist-wrapper{
        --visible-cols: 5;
        --col-gap: 20px;
        --col-hint: 0px;
        --scrollbar-padding: 20px;
        --col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint) / var(--visible-cols));
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: var(--col-size);
        grid-auto-columns: var(--col-size);
        overflow-x: auto;
        grid-gap: var(--col-gap);
    }
    .gamelist-subpage{
        grid-template-columns: repeat(5, 1fr);
    }
    .acct-bar .user-info-m{
        padding-right: 20px;
        width: 200px;
    }
    .info-wrapper .profile-icon,
    .info-wrapper .level-icon{
        width: 45px;
    }
    .info-wrapper .username{
        font-size: 1rem;
    }
    .info-wrapper .level{
        font-size: 1rem;
        line-height: 1rem;
    }
    .acct-nav-wrapper .icon{
        font-size: 1rem;
    }
    .section-games .nav-tabs-wrapper .btn-more span .text-games{
        display:inline;
    }
    .section-games .nav-tabs-wrapper .btn-more{
        font-size: 1rem;
    }
    .section-games .nav-tabs{
        width: calc(100% - 130px);
    }
    .section-games .nav-tabs-wrapper .btn-more{
        width:120px;
    }
    .footer-tnc-wrapper .tnc ul{
        display: flex;
    }
}
@media (min-width: 900px) {
    .content-center{
        padding-bottom: 0px;
    }
    .game-category-m li{
        width:10rem;
        font-size: 1.2rem;
    }
    .sport .sport-wrapper{
        width: calc( 100% - 10rem );
    }
    .gamelist-wrapper{
        --visible-cols: 6;
        --col-gap: 20px;
        --col-hint: 0px;
        --scrollbar-padding: 20px;
        --col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint) / var(--visible-cols));
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: var(--col-size);
        grid-auto-columns: var(--col-size);
        overflow-x: auto;
        grid-gap: var(--col-gap)
    }
    .section-download .app-download-wrapper .app-download-title{
            font-size: 3vw;
    }
}
@media (min-width: 960px) {
    body { 
        font-size: 14px; 
    }
    .nav-open{
        overflow: initial;
    }
    /*header*/
    .logo-text{
        font-size: 2.5vw;
    }
    .top-header{
        z-index: 10;
        padding: 0;
        height: 70px;
    }
    .top-header-container{
        display: flex;
        justify-content:space-between;
        align-items: center;
    }
    .top-header-container .overlay{
        display: none !important;
    }
    .nav-bar{
        position:relative;
    }
    .nav-group-wrapper{
        width: 100%;
        flex-grow: 1;
    }
    .nav-bar ul.nav-group{
        display: flex;
        justify-content: end;
    }
    .nav-bar ul.nav-group::-webkit-scrollbar{
        display: none;
    }
    .second-header{
        background: var(--bg-header2);
        position: initial;
        top:initial;
        transform: none;
        right:initial;
    }
    .second-header-wrapper .left{
        display: flex;
    }
    .second-header-wrapper .right{
        position:relative;
        top:initial;
        transform: none;
        right:auto;
        z-index: 0;
    }
    .second-header-wrapper .right ul{
        display: flex;
    }
    .second-header .login-btn a,
    .second-header .register-btn a,
    .second-header .logout-btn a,
    .second-header .deposit-btn a{
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .second-header .logout-btn,
    .second-header .deposit-btn{
    display: inline-block;
    }
    .nav-dropdown-group{
        position: relative;
        width: initial;
    }
    .nav-btn{
        position: relative;
        top: initial;
        right:initial;
        transform: none;
        margin-left: 1rem;
        font-size: 2rem;
    }
    .nav-dropdown{
        background-color:var(--bg-navdropdown);
        left:initial;
        padding: 25px;
        width: 498px;
        max-width:498px;
        top:53px;
        right:0;
        height: initial;
        display: none;
        overflow: initial;
    }
    .nav-dropdown.open{
        display: block;
        animation: none;
    }
    .nav-dropdown.close{
        display: none;
        animation: none;
    }
    .nav-open-content{
        display: flex;
    }
    .nav-open-content-m{
        display: none;
    }
    .nav-open-content-m .nav-menu-top .item-list{
        font-size: 1rem;
    }
    .nav-game {
        width: 45%;
        padding: 0 15px;
        height: 600px;
        overflow-y: scroll;
    }
    .nav-special{
        background: var(--bg-navdropdown2);
        border-radius: 10px;
        width: 55%;
        padding: 0 30px 60px 30px;
    }
    /*header after login*/
    .acct-wrapper{
        display: flex;
        font-size: 1rem;
        margin-right: 10px;
        align-items: flex-start;
    }
    .acct-wrapper .level-wrapper,
    .acct-wrapper .balance-wrapper{
        margin-left: 10px;
        padding-right: 10px;
        border-right: 1px solid var(--bg-mobile-nav-bottom-line);
    }
    .acct-wrapper .balance-wrapper{
        display: flex;
    }
    .acct-wrapper .balance-wrapper .btn-refresh{
        width: 17px;
        height: 17px;
        border-radius: 100%;
        background-color: var(--theme-color);
        line-height: 17px;
        color: var(--bg-header2);
        font-size: 0.6rem;
        position: relative;
        font-weight: 900;
    }
    .acct-wrapper .balance-wrapper .btn-refresh i,
    .acct-wrapper .balance-wrapper .btn-refresh svg{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
    .acct-wrapper .balance-wrapper .balance{
        margin-right: 15px;
        display: flex;
        align-items: flex-start;
        font-weight: 900;
    }
    .acct-wrapper .balance-wrapper .balance span{
        color: var(--theme-color);
        font-size: 0.8rem;
        margin-top: 0px;
        margin-right: 5px;
        font-weight: 500;
    }
    .acct-wrapper .user-wrapper .user-group{
        position: relative;
    }
    .acct-wrapper .user-wrapper .user-group .user-icon{
        width: 20px;
        margin: 0 15px;
    }
    .acct-wrapper .user-wrapper .user-group ul,
    .acct-wrapper .user-wrapper .down-list-group ul{
        display: block;
    }
    .acct-wrapper .user-wrapper .user-group ul li,
    .acct-wrapper .user-wrapper .down-list-group ul li{
        padding: 5px 15px;
        font-size: 0.9rem;
        margin: 0;
        text-transform: capitalize;
    }
    .acct-wrapper .user-wrapper .user-group ul li:hover,
    .acct-wrapper .user-wrapper .down-list-group ul li:hover{
        background-color: var(--bg-header2);
        color: var(--primary-text2);
    }
    .acct-wrapper .user-wrapper .user-btn{
        font-size: 1rem;
        color: var(--theme-color);
        display: flex;
        height: 42px;
        align-items: center;
        margin-left: 10px;
    }
    .acct-wrapper .user-wrapper .down-list-group .down-list-btn{
        color: var(--primary-text2);
        display: flex;
        height: 42px;
        align-items: center;
        font-size: 1rem;
        margin-left: 20px;
    }
    .acct-wrapper .level-wrapper{
        display: flex;
        align-items: center;
    }
    .acct-wrapper .level-wrapper .icon{
        width: 30px;
    }
    .acct-wrapper .level-wrapper span{
        margin-left: 5px;
    }
    .balance-wrapper-m{
        display: none;
    }
    .acct-bar{
        display: none;
    }
    .acct-wrapper{
        display: flex;
        align-items: center;
    }
    .acct-wrapper .user-wrapper{
        display: flex;
    }
    /*section banner*/
    .swiper-banner-thumb{
        display: flex;
        justify-content: flex-start;
    }
    .section-banner .banner-sm{
        display: none;
    }
    .section-banner .banner-lg{
        display: block;
    }
    /*section sport*/
    .step-wrapper{
        background:var(--bg-step-wrapper);
        display: none;
    }
    .step{
        position: relative;
    }
    .step-wrapper-container{
        display: flex;
        justify-content: center;
        max-width: 1200px;
        margin: 0 auto;
        padding-left: 50px;
    }
    .step-content{
        display: flex;
        position: absolute;
        top:50%;
        left:30px;
        transform: translateY(-50%);
        align-items: center;
    }
    .step-content img {
        width: 45px;
        height: 45px;
    }
    .step-content .step-content-text{
        margin-left: 15px;
    }
    .step-content-text .title{
        color:var(--theme-color);
        font-weight: bold;
        margin-bottom: 10px;
        text-transform: uppercase;
        font-size: 0.9rem;
    }
    .step-content-text .text{
        color:var(--light-text);
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.9rem;
    }
    .section-sport{
        background-image:var(--bg-section-sport);
        padding-bottom: 50px;
    }
    .section-sport.gamelist-page{
        background: none;
    }
    .sport .sport-wrapper{
        display:flex;
        padding-top: 50px;
    }
    .sport .left{
        flex-grow: 1;
        width: 60%;
    }
    .sport .right{
        width: 40%;
        padding-top: 0;
    }
    .sport .swiper-sport-slider .banner-text p{
        font-size: 1rem;
    }
    .sport .swiper-sport-slider .swiper-slide{
        overflow: hidden;
    }
    .sport .swiper-sport-slider .swiper-slide .player-img{
        position: relative;
        z-index: 1;
        left: -25%;
    }
    .sport .sport-wrapper{
        width: 100%;
        display:flex;
        padding-top: 50px;
        padding-left: 0;
    }
    .sport .title{
        font-size: 1.5rem;
        margin: 0;
    }
    .step-wrapper{
        display: block;
    }
    .sport .game-category-m{
        display: none;
    }
    .sport .swiper-sport-thumb{
        display: block;
    }
    .sport .swiper-sport-slider{
        display: block;
    }
    .sport .swiper-sport-slider-m{
        display: none;
    }
    .sport-contact{
        display: flex;
    }
    .section-transaction{
        padding: 50px 0px;
    }
    /*section game list*/
    .section-games .nav-tabs .nav-link span{
        display: inline;
    }
    .section-transaction h1,
    .section-games h1{
        font-size: 1.5rem;
    }
    .gamelist-wrapper{
        display: grid;
        grid-auto-flow: initial;
        grid-auto-columns: initial;
        overflow-x: auto;
        grid-gap:20px;
        grid-template-columns: repeat(7, 1fr);
    }
    .game-item-wrapper,
    .game-item{
        border-radius: 10px;
    }
    .game-item .game-title{
        font-size: 0.9rem;
    }
    .game-item .game-title span{
        width: calc( 100% - 20px );
    }
    
    /*gamelist page*/
    .gamelist-subpage-wrapper{
        margin: 0;
    }
    .recommend-game-wrapper .recommend-game-swiper{
        width: 100%;
    }
    .sport .sport-wrapper.gamelist-page-wrapper{
        display: grid;
        gap: 30px;
        grid-template-columns: 200px calc(100% - 230px);
        padding-top: 20px;
    }
    .gamelist-subpage {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }
    .tools-box{
        grid-row: span 2;
        max-height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .tools-box .search-wrapper{
        display: none;
    }
    .provider-selection{
        width: 100%;
    }
    .provider-selection ul li{
        padding: 20px 5px;
        margin-right: 0;
        margin-left: 20px;
        font-size: 1rem;
        font-weight: normal;
        position: relative;
    }
    .provider-selection ul li .corner-icon{
        position: absolute;
        top:0;
        left: -20px;
        width: 40px;
        display: block;
    }
    .provider-selection ul li .provider-logo{
        width: 30px;
    }
    .provider-selection ul li:last-child{
        border-bottom: none;
    }
    .provider-selection ul li.active,
    .provider-selection ul li:hover{
        color: var(--theme-color);
    }
    .provider-selection ul li.active .provider-logo,
    .provider-selection ul li:hover .provider-logo{
        filter: var(--image-filter-theme-color);
    }
    .provider-selection-btn{
        display: none;
    }
    .provider-selection .dropdown-menu{
        display: block !important;
        z-index: 0;
        margin-top: 0;
        padding: 0;
        max-height: initial;
    }
    .gamelist-subpage-wrapper .nav-tabs-wrapper{
        display: flex;
        justify-content: space-between;
    }
    .nav-tabs-wrapper .search-wrapper{
        border: 1px solid var(--bg-mobile-nav-bottom-line);
        border-radius: 5px;
        display: flex;
        padding: 7px 10px;
        align-items: center;
    }
    .nav-tabs-wrapper .search-wrapper input{
        font-size: 1rem;
    }
    .gamelist-subpage-wrapper .nav-tabs{
        border: none;
    }
    .gamelist-subpage-wrapper .nav-tabs .nav-link{
        padding: 5px 20px;
        border-radius: 0;
        border: none;
        border-right: 1px solid var(--bg-mobile-nav-bottom-line);
    }
    .gamelist-subpage-wrapper .nav-tabs .nav-item:last-child .nav-link{
        border-right:none;
    }
    .gamelist-subpage-wrapper .nav-tabs .nav-link.active{
        background:none;
        color: var(--theme-color);
        border-color: var(--bg-mobile-nav-bottom-line);
    }
    .gamelist-subpage-wrapper .nav-tabs .nav-item{
        margin: 0;
    }
    /*section download*/
    .section-download{
        background-color: var(--bg-section-download);
        padding: 30px 0 0 0;
    }
    .section-download .download-box{
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
    }
    .section-download .download-box-m{
        display: none;
    }
    .section-download .container{
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
    .section-download .download-wrapper{
        display: flex;
        margin: 30px 0;
    }
    .section-download .app-download-wrapper .decs{
        margin-bottom: 15px;
        font-size: 3vw;
    }
    .section-download .left{
        width: 40%;
        position: relative;
        top: initial;
        transform: none;
    }
    /* referral */
    .referral-wrapper {
        margin: 0 auto;
        padding: 32px 0 0;
    }
    .referral-qr {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 16px 32px;
        width: 65%;
    }
    .referral-qr-code {
        padding: 16px;
        border-radius: 20px;
    }
    .referral-qr-code > img {
        height: 117px;
    }
    .referral-share-text {
        font-size: 16px;
        text-align: left;
    }
    .referral-qr-share {
        width: calc(100% - 149px);
        padding-left: 32px;
        padding-right: 0;
    }
    .referral-share-link {
        padding: 10px;
    }
    .referral-link {
        padding: 13px 16px;
        border-radius: 10px;
        font-size: 16px;
        width: calc(100% - 190px);
    }
    .referral-btn {
        margin-left: 10px;
    }
    .btn-referral {
        width: 180px;
        font-size: 16px;
        padding: 13px 16px;
        border-radius: 10px;
    }
    .referral-detail {
        padding: 24px 0 32px;
        display: flex;
        flex-direction: row;
        margin: 0 -12px;
    }
    .referral-detail-single {
        flex: 1 0 0%;
        margin: 0 12px 0;
    }
    .referral-detail-top {
        font-size: 18px;
        padding: 10px 16px;
    }
    .statistic-single-top {
        font-size: 14px;
    }
    .btn-referral-detail {
        min-width: 170px;
    }
    .table-referral tr > th {
        font-size: 14px;
    }
    .table-referral tr > td {
        font-size: 14px;
    }

    /*section footer*/
    footer{
        padding: 50px 0;
    }
    .footer-wrapper{
        display: flex;
        justify-content: flex-start;
    }
    .footer-wrapper .col{
        margin-right: 20px;
        margin-top: 0px;
    }
    .footer-wrapper .col .title{
        font-size: 1rem;
    }
    footer .logo{
        height: 25px;
        margin:10px 10px 10px 0px;
    }
    .seo-text,
    .btn-read-more{
        display: block;
    }
    .footer-tnc-wrapper{
        display: flex;
        justify-content: space-between;
    }
    .footer-tnc-wrapper .tnc ul,
    .footer-tnc-wrapper .social-icon ul{
        justify-content: flex-start;
        margin-bottom: 0;
    }
    .footer-tnc-wrapper .tnc ul li{
        padding:0 15px;
        border-right: 1px solid var(--tnc-color);
        font-size: 1rem;
        text-align: left;
    }
    .copyright-wrapper{
        text-align: left;
    }
    /*promotion page*/
    .promotion-wrapper ul{
        border-bottom: none;
    }
    .promotion-wrapper ul li {
        border: none;
        border-radius: 0;
        border-left:1px solid var(--bg-mobile-nav-bottom-line);
        text-transform: capitalize;
    }
    .promotion-wrapper ul li span{
        color: var(--primary-text2);
        display: inline-block;
        margin-left: 5px;
        opacity: 0.5;
    }
    .promotion-wrapper ul li:first-child{
        margin-left: 0;
        border-left: 0;
    }
    .promotion-wrapper ul li:last-child{
        margin-right: 0;
    }
    .promotion-wrapper ul li.mixitup-control-active {
        color:var(--text-light);
        background-color: transparent;
    }
    .promotion-wrapper ul li.mixitup-control-active span{
        color: var(--theme-color);
        opacity: 1;
    }
    .promo-modal-content-top{
        display: flex;
    }
    .promo-modal-content-top .promo-banner{
        max-width: 240px;
    }
    .promo-modal-content-top .btn-close{
        color: var(--text-light);
    }
    /* review  */
    .review-wrapper {
        padding: 32px 0;
    }
    .title-page {
        font-size: 22px;
    }
    .data-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .level-status-wrapper {
        display: flex;
    }
    .level-status {
        margin-right: 20px;
    }
    .level-desc-row {
        margin-bottom: 20px;
        font-size: 16px;
    }
    .level-desc {
        margin-top: 0;
    }
    .chart2-wrapper {
        width: 500px !important;
        margin-right: 15px;
    }
    .ranking-wrapper {
        padding-right: 30px;
        width: 50%;
    }
    
    /*text pages*/
    .content-center-box{
        display:flex;
    }
    .side-nav ul{
        display: block;
        padding:20px;
    }
    .side-nav ul li{
        border-bottom: 1px solid var(--bg-mobile-nav-bottom-line);
    }
    /*af*/
    .af-side-nav{
        display: block;
        width: 220px;
    }
    .af-box{
        padding: 20px;
        width: calc(100% - 220px);
    }
    .payment{
        display: grid;
    }
    /*footer nav*/
    .footer-nav{
        display: none;
    }
    /*modal*/
    .annbox {
        padding:20px;
    }
    .ann-title{
        margin-bottom: 20px;
    }
    .live-chat-floating{
        right:20px;
        bottom:20px;
        z-index: 10;
    }
    .live-chat-wrapper{
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    @keyframes blink{
        20%{
            width: 80px;
            height: 80px;
            opacity: 1;
        }
        30%{
            width: 60px;
            height: 60px;
            opacity: 0;
        }
    }
    .app-download{
        display: none;
    }
    .reward {
        position: fixed;
        bottom: 100px;
        right: 16px;
        z-index: 9;
        animation: upDown 1s ease-in-out infinite;
    }
    .reward a {
        display: block;
    }
    @keyframes upDown {
        0%, 100% {
            bottom: 100px;
        }
        50% {
            bottom: 106px; 
        }
    }
}


@media (min-width: 1000px) {
    .sport .swiper-sport-slider .swiper-slide .player-img{
        left: -22%;
    }
    .section-download .app-download-wrapper .app-download-title{
        font-size: 2rem;
    }
    .section-download .app-download-wrapper .decs{
        font-size: 1.7rem;
    }
    .section-download .left,
    .section-download .right{
        width: 50%;
    }
    .section-download .left{
        position: initial;
        left: inherit;
        top: initial;
        transform: none;
    }
}
@media (min-width: 1100px) {
    .sport .swiper-sport-slider .swiper-slide .player-img{
        left: -10%;
    }
}

@media (min-width: 1200px) {
    .sport .swiper-sport-slider .swiper-slide .player-img{
        position: relative;
        z-index: 1;
        left: 0;
    }
    .step-wrapper-container{
        padding-left: 100px;
    }
    .step-content{
        top:50%;
        left:50px;
    }
    .step-content img {
        width: 63px;
        height: 63px;
    }
    .step-content-text .title {
        font-size: 1.2rem;
    }
    .step-content-text .text {
        font-size: 1.2rem;
    }
    .section-download .download-box{
        padding: 50px 100px 0 100px;
    }
    /* rewards */
    @keyframes upDown {
        0%, 100% {
            bottom: 100px;
        }
        50% {
            bottom: 116px; 
        }
    }
    .reward img {
        height: 120px;
    }
}

/*add by dev*/
@media (max-width: 425px) {
  .game-item-wrapper .hover-overlay .btn-play {
      font-size: 0.5rem;
  }
}
 
@media (min-width: 1200px) {
  .game-item .game-title .fav-icon:hover i {
    color: var(--theme-color);
    opacity:1;
  }
}