@media (min-width:368px) {
    .af-user-info .balance-wapper .balance a{
        margin: 0 5px;
    }
}
@media (min-width:400px) {
    .game-list-wrapper{
        grid-template-columns: repeat(3, 1fr);
    }
    .af-user-box .af-nav .icon{
        width: 40px;
    }
}
@media (min-width: 460px) {

    /*partner*/
    #modal-partner .modal-content{
        padding: 25px;
    }
    .partner-logo-wrapper .partner-logo{
        margin: 10px;
        width:calc(25% - 20px);
    }
    .af-user-box .af-nav .icon{
        width: 45px;
    }
}
@media (min-width: 560px) {
    .btn,
    .btn a{
        font-size: 1rem;
    }
    .footer-content .content-wrapper{
        padding: 15px 30px;
    }
    .footer-content .license-wrapper{
        display: flex;
        justify-content: center;
    }
    .footer-content .license-wrapper .logo{
        padding: 10px 20px;
    }
    .app-description {
        font-size: 1rem;
        color: var(--primary-text2);
        font-weight: 400;
    }
    /*lobby page*/
    .game-list-wrapper{
        grid-template-columns: repeat(4, 1fr);
    }
    .hotgame-list-wrapper{
        grid-template-columns: repeat(4, 1fr);
    }
    .game-item .game-img .overlay .icon-play{
        width: 50px;
        height: 50px;
    }
}
@media (min-width: 768px) {
    /*lobby page*/
    .game-list-wrapper{
        grid-template-columns: repeat(5, 1fr);
    }
    .hotgame-list-wrapper{
        grid-template-columns: repeat(5, 1fr);
    }
    /*section referral promo*/
    .rp-wrapper{
        flex-direction: row;
        gap: 20px;
        margin-top: 50px;
    }
    .rp-wrapper .referral-wrapper{
        height: auto;
        min-height: 160px;
    }
    .rp-wrapper .promo-slider{
        width: 40%;
        flex-shrink: 0;
    }
    /*promo page*/
    .filter-content{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .promotion-single .promotion-banner{
        padding: 16px;
    }
}
@media (min-width: 960px) {
    /*header*/
    header{
        background-color: var(--bg-color1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        height: 80px;
        position: sticky;
        top:0;
        z-index: 10;
    }
    .header-wrapper{
        background: none;
        padding: 0;
        position: initial;
        justify-content: flex-start;
        width: 30%;
    }
    .header-wrapper .logo{
        position:initial;
        transform: none;
    }
    .header-wrapper .logo img{
        width: 150px;
    }
    .content-shadow{
        box-shadow: none;
    }
    .game-category-m{
        display: none;
    }
    .notice-wrapper{
        height: 40px;
        margin: 15px 0;
        border-radius: 5px;
    }
    .notice-wrapper .icon{
        display: block;
    }
    .notice-wrapper .notice-content{
        font-size: 16px;
    }
    .nav-bar{
        display: flex;
    }
    .btn-wrapper{
        width: auto;
        margin: 0;
        position: relative;
        gap: 24px;
        flex: 1;
        justify-content: flex-end;
        margin-right: 20px;
    }
    button.lang-btn{
        display: flex;
    }
    .btn-wrapper .input-wrapper{
        display: flex;
        align-items: center;
    }

    header .btn,
    header .btn a{
        padding: 0 15px;
        font-weight: 800;
        white-space: nowrap;
        font-size: 14px;
    }
    .btn-wrapper{
        height: 40px;
    }
    .btn-wrapper .login-btn, 
    .btn-wrapper .login-btn:active, 
    .btn-wrapper .login-btn:focus{
        background-color: var(--primary-color1);
        margin:0;
        display: flex;
        flex-grow: initial;
        min-width: 38px;
        border-radius: 5px;
        align-items: center;
    }
    .btn-wrapper .register-btn, 
    .btn-wrapper .register-btn:active, 
    .btn-wrapper .register-btn:focus{
        background-color: var(--btn-color3);
        margin:0;
        display: flex;
        flex-grow: initial;
        min-width: 38px;
        border-radius: 5px;
        align-items: center;
    }
    .btn-wrapper .login-btn a,
    .btn-wrapper .register-btn a{
        font-size: 14px;
        font-weight: 600;
    }
    button.lang-btn{
        border-radius: 30px;
        height: 45px;
        padding: 5px;
    }
    button.lang-btn .flag-icon{
        width: 30px;
    }

    /*side nav*/
    .side-nav{
        display: none;
    }
    .btn-side-nav{
        display: none;
    }
    .nav-btn{
        width: 30px;
    }
    /*section banner*/
    .section-banner{
        padding: 0px;
    }
    .banner-lg{
        display: block;
    }
    .banner-sm{
        display: none;
    }
    .swiper-banner .swiper-pagination{
        display:flex;
        align-items: center;
        justify-content: center;
    }
    /*sectoion step*/
    .step-wrapper{
        display: flex;
    }
    .section-title{
        display:block;
    }
    /*section hotgame*/
    .hotgame-list-wrapper{
        grid-template-columns: repeat(6, 1fr);
        gap: 15px;
        margin-top: 0px;
    }
    .game-item .game-img{
        border-radius: 10px;
    }
    .game-item .game-img .provider-tag{
        width: 35px;
        height: 35px;
    }
    .game-item .game-img .fav-icon{
        font-size: 18px;
    }
    .game-item .game-title{
        display:block;
    }
    .game-item .game-img .overlay .icon-play{
        width: 60px;
        height: 60px;
    }
    /*section download*/
    .download-wrapper{
        display: flex;
    }
    .seo{
        display: block;
    }
    .seo-text{
        display: block;
    }
    .btn-read-more{
        display:block; 
    }
    footer{
        padding: 0;
        background-color: var(--bg-footer1);
        color: var(--text-color2);
    }
    .footer-content{
        border-bottom: 1px dotted var(--text-color2);
    }
    .copyright-wrapper{
        color:var(--text-color2); 
    }
    .footer-nav{
        display: none;
    }
    .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; 
        }
    }

    /*section sport*/
    .sport-wrapper{
        border-radius: 20px;
        display: block;
        background: var(--bg-gradient);
        height: 300px;
    }
    .sport-wrapper .livetv-btn{
        border-radius: 5px;
        padding: 3px 10px;
        border: 1px solid var(--text-color2);
        background-color: transparent;
        color: var(--text-color2);
        display:inline-flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        cursor: pointer;
        position: absolute;
        top:15px;
        left:15px;
    }
    .sport-banner{
        display: block;
    }
    .sport-wrapper .iframe-wrapper{
        height: 280px;
        width: 40%;
        position: absolute;
        z-index: 1;
        right:15px;
        top:50%;
        transform: translateY(-50%);
    }

    /*lobby page*/
    .sub-page-title{
        background-color: transparent;
        color: var(--text-color1);
        margin: 15px 0;
        font-size: 22px;
    }
    .game-list-wrapper{
        grid-template-columns: repeat(7, 1fr);
    }
    .provider-wrapper{
        border-radius: 5px;
        margin-top: 15px;
        padding: 15px 15px 30px 15px;
    }
    .provider-wrapper .provider-scroll .swiper-wrapper .swiper-slide,
    .provider-wrapper .provider-scroll .swiper-wrapper .swiper-slide.all{
        border-radius: 30px;
        border: 2px solid var(--primary-color1);
        width: 100%;
        height: 45px !important;
        padding: 3px 10px;
        background-color: var(--bg-color1);
        flex-direction: row;
        justify-content: center;
        align-items: center;
        line-height: initial;
    }
    .provider-wrapper .provider-scroll .swiper-wrapper .swiper-slide:hover{
        filter: grayscale(10%) brightness(0.9);
    }
    .provider-wrapper .provider-scroll .swiper-wrapper .swiper-slide.all{
        height: auto;
    }
    .provider-wrapper .provider-scroll .swiper-wrapper .swiper-slide span{
        background-color: transparent;
        margin: 0;
        padding: 0;
        height: auto;
        width: 30px;
        flex-shrink: 0;
    }
    .provider-wrapper .provider-scroll .swiper-wrapper .swiper-slide span.provider-logo{
        background-color: var(--bg-color3);
        width:35px;
        padding: 4px;
        border-radius: 100%;
    }
    .provider-wrapper .provider-scroll .swiper-wrapper .swiper-slide span.provider-name{
        width: auto;
    }
    .provider-wrapper .provider-scroll .swiper-wrapper .swiper-slide.active{
        background-color: var(--primary-color1);
        color: var(--btn-text-color);
    }
    .provider-wrapper .provider-scroll .swiper-wrapper .swiper-slide.active .provider-logo {
        background-color: transparent;
        color: var(--text-color1);
    }
    .provider-wrapper .provider-scroll .swiper-wrapper .swiper-slide.active .provider-logo img{
        display: none !important;
    }
    .provider-wrapper .provider-scroll .swiper-wrapper .swiper-slide.active .provider-logo img.active{
        display: block !important;
        filter:var(--img-filter-black);
    }
    .filter-wrapper .btn-filter span{
        display: block;
    }
    /*info pages*/
    .content-center-box{
        display: flex;
    }
    .content-center-box .side-nav-sub{
        width: 16%;
        flex-shrink: 0;
        min-width: 200px;
    }
    .content-center-box .side-nav-sub ul{
        border-radius: 5px;
        background-color: var(--bg-color1);
        display:block;
        padding: 0;
    }
    .content-center-box .side-nav-sub ul li{
        padding:10px 15px;
        border-bottom:1px solid var(--line-color1);
        display:block;
        font-size: 14px;
        margin: 0;
    }
    .content-center-box .side-nav-sub ul li.active,
    .content-center-box .side-nav-sub ul li:hover{
        background-color: var(--bg-color4);
        border-radius: 0;
    }
    .content-center-box .side-nav-sub ul li.active a,
    .content-center-box .side-nav-sub ul li:hover a{
        color: var(--text-color1);
    }
    .content-center-box .side-nav-sub ul li:last-child{
        border-bottom: 0;
    }
    .content-center-box .content-right{
        margin-top: 0;
        margin-left: 20px;
        min-height: 300px;
        flex-grow: 1;
        padding: 30px;
        border-radius: 5px;
    }

    .footer-content .link-wrapper .link:hover a{
        color: var(--text-color2);
    }

    /*ann*/
    .anncon .tab-content{
        padding:30px 30px 0 30px;
    }
    .ann-title {
        font-size: 22px;
        padding: 15px;
    }
    .download-bar{
        display: none;
    }
    /*modal lang*/
    #modal-lang .lang-title{
        font-size: 16px;
    }
    #modal-lang .flag-wrapper img{
        width: 48px;
    }
    #modal-lang .lang-select-btn{
        padding: 10px;
    }
    /*af header*/
    .af-wrapper .user-id-wrapper{
        padding-right: 15px;
        border-right: 1px solid var(--line-color1);
    }
    .af-wrapper .user-id{
        display: flex;
        gap: 10px;
    }
    .af-wrapper .user-id .profile-icon,
    .af-wrapper .user-id .notice-icon{
        width: 45px;
        height: 45px;
        background-color: var(--primary-color1);
        font-size: 18px;
        flex-shrink: 0;
        color: var(--btn-text-color);
    }
    .af-wrapper .user-id .notice-dot{
        width: auto;
        height: auto;
        padding: 2px 5px;
        color: var(--text-color2);
        font-size: 10px;
        top:0;
        right:-5px;
        left: auto;
        bottom: auto;
        border-radius: 30px;
    }
    .af-wrapper .user-id .notice-dot span{
        display: block;
    }
    .af-wrapper .user-name{
        display: block;
        font-size: 16px;
        font-weight: 500;
    }
    .af-user-info-header{
        display: block;
        margin-left: 15px;
    }
    .af-wrapper .lang-group{
        display: block;
        margin-left: 25px;
        order: 98;
    }
    .af-user-info-header{
        display: flex;
        align-items: center;
        background-color: var(--bg-color9);
        line-height: 45px;
        border-radius: 30px;
    }
    .af-user-info-header .currency{
        width: 20px;
        height: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .af-user-info-header .balance{
        flex-grow: 1;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        font-size: 16px;
    }
    .af-user-info-header .balance .amount{
        text-align: left;
        flex-grow: 1;
        font-weight: bold;
        padding: 0 0px 0 15px;
    }
    .af-user-info-header .btn-deposit{
        border-radius: 10px !important;
        display: flex;
        align-items: center;
        padding: 0;
        color: var(--text-color2);
    }
    .af-user-info-header .btn-deposit a{
        width: 45px;
        height: 45px;
        display: block;
        position: relative;
        top:initial;
        left: initial;
        right: inherit;
        transform: none;
        color: var(--btn-text-color1);
        padding: 0;
        background-color: var(--btn-color2);
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    .af-user-info-header .btn-deposit img{
        width: 20px;
        margin-right: 10px;
    }   
    
    /*af info box*/
    .af-user-box{
        display: none;
    }
    .af-wrapper .user-id .profile-icon:hover, 
    .af-wrapper .user-id .notice-icon:hover{
        background-color: var(--primary-color1);
        filter: grayscale(10%) brightness(0.9);
    }
    .af-wrapper .logout-btn{
        display: flex;
        margin-left: 15px;
        order: 99;
        font-size: 20px;
        align-items: center;
    }
    /*af pages*/
    .af-side-nav{
        display: block;
    }

}
@media (min-width: 1300px) {
    .container{
        width: 78%;
    }
    .leaderboard-wrap .container{
        width: 100%;
    }
    /*lobby page*/
    .game-list-wrapper{
        grid-template-columns: repeat(8, 1fr);
    }
    .referral-qr {
        width: 65%;
    }
    .step-title .step-img{
        right:-30%;
    }
    /* rewards */
    @keyframes upDown {
        0%, 100% {
            bottom: 100px;
        }
        50% {
            bottom: 116px; 
        }
    }
    .reward img {
        height: 120px;
    }
}

@media (min-width: 1400px) {
    .sport-content-wrapper .left{
        width: 40%;
    }
    .sport-content-wrapper .right{
        width: 60%;
    }
}