.container{
    height: 100vh;
}
.container-account{
    padding:10px  20px 20px 20px !important;
    background-color: #010851;

}
.left-container{
    width: 70%;
    display: flex;
    align-items: start;
}
header .icon-left{
    width: 70%;
    object-fit: cover;
}
.level-container .text-profile{
    font-size: 20px;
    margin-left: 20px;
    font-weight: bold;
    margin-top: 5px ;
}
.list-top{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}
.list-top .item-top{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 23%;
    opacity: 0.5;
}
.list-top .item-top:hover{
    cursor: pointer;
}
.list-top .active{
    opacity: 1;
}

.item-top img{
    width: 51%;

}

.item-top span{
    display:block;
    text-align: center;
    padding: 10px 0;
}
.sub-header_toppain{
    display: flex;
    gap: 20px;
}
.sub-header_toppain .item-toppain{
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(to bottom, #394C70, #212D53);
    width: 48%;
    justify-content: center;
    padding: 5px 5px;
    border-radius: 10px;
    box-shadow: 0 6px 0 #4A555D;
    color: #898989;
}
.sub-header_toppain .item-toppain:hover{
    cursor: pointer;
}

.sub-header_toppain .active-toppain{
    color: #fff;
    background: linear-gradient(to bottom, #224DD2, #1034A4);
    box-shadow: 0 6px 0 #224DD2;
}
.sub-header_toppain .active-toppain img{
    opacity: 1;
}
.item-toppain span{
    font-size: 18px;
    font-weight: bold;
}
.item-toppain img{
    width: 16%;
    object-fit: contain;
    opacity: 0.5;
}
.content-toppain{
    background-color: #1B3584;
    border: 1px solid #4655F5;
    margin: 30px 0;
    padding: 10px;
    border-radius: 10px;
}
.header-content_toppain{
    background-color: #D9D9D9;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}
.header-content_toppain .btn-date{
    border: none;
    background-color: #D9D9D9;
    font-size: 18px;
    width: 33%;
    padding: 10px 0;
    border-radius: 8px;
    font-weight: 550;
    margin: 0 3px;
}
.header-content_toppain .active-date{
    background: linear-gradient(to right, #FF6E14, #FF4400);
    color: #fff;
}
.sub-header_content{
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
}
.sub-header_content span{
    color: #92A9EF;
}
.sub-header_content img{
    cursor: pointer;
}
.top-user{
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}
.top-user span{
    font-size: 17px;
    font-weight: 600;
}
.list-top_user{
    display: flex;
    flex-direction: column;

}
.list-top_user .check-user{
    background: linear-gradient(to right, #EB5119, #F26C1B);
    border: 1px solid #FF8D5C !important;
}
.list-top_user .item-top_user{
    display: grid;
    grid-template-columns: 60px 190px 100px 60px;
    align-items: center;
    padding: 0 10px;
    background-color: #2C51C4;
    border: 1px solid #496DDA;
    border-radius: 10px;
    margin-bottom: 12px;
}
#list-top-reward .item-top_user{
    grid-template-columns: 60px 170px 75px 130px;
    padding: 2px 10px;
}
.item-top_user span{
    font-size: 16px;
}
.item-top_user .stt{
    padding: 0 15px;
    font-size: 20px;
    font-weight: bold;
}
.item-top_user img{
    object-fit: contain;
    width: 60%;
}
.item-top_user .phone{
    display: flex;
    align-items: center;
}
.item-top_user .phone img{
    width: 25%;
}
.list-top_user {
    max-height: 600px; /* hoặc chiều cao mong muốn */
    overflow-y: auto;
}

/* Tuỳ chọn: Tùy chỉnh thanh cuộn cho đẹp hơn (nếu cần) */
.list-top_user::-webkit-scrollbar {
    display: none;
    width: 6px;
}

.list-top_user::-webkit-scrollbar-thumb {
    background: #2C51C4;
    border-radius: 10px;
}

.list-top_user::-webkit-scrollbar-thumb:hover {
    background: #2C51C4;
}
.tab-pane {
    display: none;
}
.tab-pane.show {
    display: block;
}
.header-left{
    padding-top: 10px;
}
@media (max-width: 339px) and (min-width: 320px) {
    .item-top_user img {
        width: 100% !important;
    }

    .item-top_user .phone img {
        width: 23% !important;
    }

    .list-top_user .item-top_user {
        grid-template-columns: 20px 130px 45px 20px !important;
    }

    .item-top_user .stt {
        font-size: 14px !important;
        padding: 0 5px !important;
    }

    .item-toppain span {
        font-size: 13px !important;
        white-space: nowrap;
    }
    .top-user span{
        font-size: 15px;
    }
    .item-top_user span{
        font-size: 13px !important;
    }
    .top-user span {
        font-size: 13px !important;
    }

    #list-top-reward .item-top_user {
        grid-template-columns: 30px 105px 20px 130px !important;
        padding: 4px 10px;
    }
    #list-top-reward .stt{
        padding: 0px 8px;
    }
    #list-top-reward .item-top_user img {
        width: 100% !important;
    }
    #list-top-reward .item-top_user .phone img{
        width: 28% !important;
    }
    #top-reward span{
        font-size: 13px !important;
    }
    #list-top-reward .item-top_user span{
        font-size: 12px !important;
    }
    .header-content_toppain .btn-date {
        padding: 4px 20px !important;
    }
}
@media (max-width: 359px) and (min-width: 340px){
    .item-top_user img{
        width: 100% !important;
    }
    .item-top_user .phone img{
        width: 23% !important;
    }
    .list-top_user .item-top_user{
        grid-template-columns: 20px 140px 55px 20px !important;
    }
    .item-top_user .stt{
        font-size: 14px !important;
        padding: 0 5px !important;
    }
    .item-toppain span {
        font-size: 13px !important;
    }
    #list-top-reward .item-top_user {
        grid-template-columns: 25px 130px 35px 130px !important;
        padding: 4px 10px;
    }
    #list-top-reward .stt{
        padding: 0px 9px !important;
    }
    #list-top-reward .item-top_user img {
        width: 100% !important;
    }
    #list-top-reward .item-top_user .phone img{
        width: 25% !important;
    }
    #top-reward span{
        font-size: 13px !important;
    }
    #list-top-reward .item-top_user span{
        font-size: 12px !important;
    }
    .top-user span{
        font-size: 15px !important;
    }
    .header-content_toppain .btn-date {
        padding: 4px 20px !important;
    }
}
@media (max-width: 379px) and (min-width: 360px){
    .item-top_user img{
        width: 63% !important;
    }
    .item-toppain span{
        white-space: nowrap;
    }
    .item-top_user .phone img{
        width: 28% !important;
    }
    .list-top_user .item-top_user{
        grid-template-columns: 40px 130px 65px 20px !important;
    }
    .item-top_user .stt{
        font-size: 16px;
        padding: 0 9px !important;
    }
    #list-top-reward .item-top_user {
        grid-template-columns: 30px 140px 40px 130px !important;
        padding: 4px 10px;
    }
    .top-user span{
        font-size: 15px !important;
    }
    #list-top-reward .stt{
        padding: 0px 9px !important;
    }
    #list-top-reward .item-top_user img {
        width: 100% !important;
    }
    #list-top-reward .item-top_user .phone img{
        width: 28% !important;
    }
    #top-reward span{
        font-size: 17px !important;
    }
    #list-top-reward .item-top_user span{
        font-size: 12px !important;
    }
    .header-content_toppain .btn-date {
        padding: 4px 20px !important;
    }
}
@media (max-width: 399px) and (min-width: 380px){
    .item-top_user img{
        width: 63% !important;
    }
    .item-top_user .phone img{
        width: 26% !important;
    }
    .list-top_user .item-top_user{
        grid-template-columns: 40px 140px 70px 20px !important;
    }
    .item-top_user .stt{
        font-size: 16px;
        padding: 0 8px !important;
    }
    #list-top-reward .item-top_user {
        grid-template-columns: 30px 140px 40px 130px !important;
        padding: 4px 10px;
    }
    #list-top-reward .stt{
        padding: 0px 8px !important;
    }
    .top-user span{
        font-size: 15px !important;
    }
    #list-top-reward .item-top_user img {
        width: 82% !important;
    }
    #list-top-reward .item-top_user .phone img{
        width: 22% !important;
    }
    #top-reward span{
        font-size: 17px !important;
    }
    #list-top-reward .item-top_user span{
        font-size: 14px !important;
    }
    .header-content_toppain .btn-date {
        padding: 6px 20px !important;
    }
}
@media (max-width: 420px) and (min-width: 400px){
    .item-top_user img{
        width: 58% !important;
    }
    .item-top_user .phone img{
        width: 25% !important;
    }
    .list-top_user .item-top_user{
        grid-template-columns: 50px 150px 70px 20px !important;
    }
    .item-top_user .stt{
        font-size: 16px;
        padding: 0 10px !important;
    }
    #list-top-reward .item-top_user {
        grid-template-columns: 30px 150px 45px 130px !important;
        padding: 2px 10px;
    }
    #list-top-reward .stt{
        padding: 0px 6px !important;
    }
    #list-top-reward .item-top_user img {
        width: 95% !important;
    }
    #list-top-reward .item-top_user .phone img{
        width: 24% !important;
    }
    #top-reward span{
        font-size: 17px !important;
    }
    #list-top-reward .item-top_user span{
        font-size: 14px !important;
    }
    .header-content_toppain .btn-date {
        padding: 6px 20px !important;
    }
}

@media (max-width: 440px) and (min-width: 421px){
    .item-top_user img{
        width: 62% !important;
    }
    .item-top_user .phone img{
        width: 23% !important;
    }
    .list-top_user .item-top_user{
        grid-template-columns: 50px 160px 75px 20px !important;
    }
    .item-top_user .stt{
        font-size: 16px;
        padding: 0 10px !important;
    }
    #list-top-reward .item-top_user {
        grid-template-columns: 30px 160px 55px 130px !important;
        padding: 0px 10px;
    }
    #list-top-reward .stt{
        padding: 0px 8px !important;
    }
    #list-top-reward .item-top_user img {
        width: 100% !important;
    }
    #list-top-reward .item-top_user .phone img{
        width: 26% !important;
    }
    #top-reward span{
        font-size: 17px !important;
    }
    #list-top-reward .item-top_user span{
        font-size: 14px !important;
    }
    .header-content_toppain .btn-date {
        padding: 6px 20px !important;
    }
}
@media (max-width: 460px) and (min-width: 441px){
    .item-top_user img{
        width: 70% !important;
    }
    .item-top_user .phone img{
        width: 28% !important;
    }
    .list-top_user .item-top_user{
        grid-template-columns: 50px 180px 75px 20px !important;
    }
    .item-top_user .stt{
        font-size: 16px;
        padding: 0 15px !important;
    }
    #list-top-reward .item-top_user {
        grid-template-columns: 40px 170px 50px 130px !important;
        padding: 4px 10px;
    }
    #list-top-reward .stt{
        padding: 0px 7px !important;
    }
    #list-top-reward .item-top_user img {
        width: 80% !important;
    }
    #list-top-reward .item-top_user .phone img{
        width: 26% !important;
    }
    #top-reward span{
        font-size: 17px !important;
    }
    #list-top-reward .item-top_user span{
        font-size: 14px !important;
    }
    .header-content_toppain .btn-date {
        padding: 8px 20px !important;
    }
}
@media (max-width: 480px) and (min-width: 461px){
    .item-top_user img{
        width: 70% !important;
    }
    .item-top_user .phone img{
        width: 28% !important;
    }
    .list-top_user .item-top_user{
        grid-template-columns: 50px 180px 95px 20px !important;
    }
    .item-top_user .stt{
        font-size: 16px;
        padding: 0 13px !important;
    }
    #list-top-reward .item-top_user {
        grid-template-columns: 40px 180px 65px 130px !important;
        padding: 2px 10px;
    }
    #list-top-reward .stt{
        padding: 0px 4px;
    }
    #list-top-reward .item-top_user img {
        width: 80% !important;
    }
    #list-top-reward .item-top_user .phone img{
        width: 26% !important;
    }
    #top-reward span{
        font-size: 17px !important;
    }
    #list-top-reward .item-top_user span{
        font-size: 14px !important;
    }
    .header-content_toppain .btn-date {
        padding: 8px 20px !important;
    }
}
@media (max-width: 500px) and (min-width: 481px){
    .item-top_user img{
        width: 70% !important;
    }
    .item-top_user .phone img{
        width: 28% !important;
    }
    .list-top_user .item-top_user{
        grid-template-columns: 50px 195px 100px 20px !important;
    }
    .item-top_user .stt{
        font-size: 16px;
        padding: 0 13px !important;
    }
    #list-top-reward .item-top_user {
        grid-template-columns: 40px 190px 65px 130px !important;
        padding: 2px 10px;
    }
    #list-top-reward .stt{
        padding: 0px 4px;
    }
    #list-top-reward .item-top_user img {
        width: 80% !important;
    }
    #list-top-reward .item-top_user .phone img{
        width: 26% !important;
    }
    #top-reward span{
        font-size: 17px !important;
    }
    #list-top-reward .item-top_user span{
        font-size: 14px !important;
    }
    .header-content_toppain .btn-date {
        padding: 8px 20px !important;
    }
}
.value-text {
    display: inline-block;
    width: 100%;
    text-align: start;
}
.mobile-align {
    text-align: center;
}
@media (max-width: 500px) {
    .level-container .text-profile{
        margin-top: -2px !important;
    }
    .mobile-margin-left {
        margin-left: 15px;
    }

    .header-content_toppain .btn-date{
        border: none;
        background-color: #D9D9D9;
        font-size: 16px;
        padding: 8px 20px;
        border-radius: 10px;
        font-weight: 550;
    }
    .item-toppain span{
        font-size: 15px;
    }
    .item-top span{
        font-size: 12px;
    }
    .item-top_user span{
        font-size: 14px;
    }
    header .icon-left{
        width: 50%!important;
    }
    .item-top_user .stt{
        font-size: 16px;
        padding: 0 10px;
    }
    .item-top_user img{
        width: 78%;
    }
    .item-top_user .phone img{
        width: 28%;
    }
    .top-user{
        padding: 10px;
    }
    .list-top_user .item-top_user{
        grid-template-columns: 40px 150px 70px 20px;
        padding: 0px 10px;
    }
    .list-top_user {
        max-height: 500px; /* hoặc chiều cao mong muốn */
        overflow-y: auto;
    }
    /*#list-top-reward .item-top_user {*/
    /*    grid-template-columns: 30px 140px 80px 130px !important;*/
    /*    padding: 4px 10px;*/
    /*}*/
    /*#list-top-reward .stt{*/
    /*    padding: 0px 8px;*/
    /*}*/
    /*#list-top-reward .item-top_user img {*/
    /*    width: 100%;*/
    /*}*/
    /*#list-top-reward .item-top_user .phone{*/
    /*    width: 23%;*/
    /*}*/

    }
@media (max-width: 375px) {
    .item-top_user img{
        width: 60%;
    }
    .item-top_user .phone img{
        width: 30%;
    }
    .top-user{
        padding: 10px;
    }
    .list-top_user .item-top_user{
        grid-template-columns: 40px 130px 70px 20px;
        padding: 2px 10px;
    }
    .list-top_user {
        max-height: 500px; /* hoặc chiều cao mong muốn */
        overflow-y: auto;
    }
}