.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 ;
}
.inf-user{
    display: flex;
    justify-content: space-between;
}
.inf-user .left-user{
    width: 100%;
    object-fit: cover;
    gap: 0px;
}
.left-user .container-img{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.container-img .img-user{
    width: 40%;
}
.header-left{
    padding-top: 10px;
}
.img-user .avatar-account{
    width: 80%;
    border: 3px solid #FFCC00;
    border-radius: 50%;
}
.left-user .level-user{
    padding: 6px 16px;
    background: linear-gradient(to right, #006FFF, #169EFF);
    text-align: center;
    width: 24%;
    border-radius: 6px;
    margin-left: 2px;
    margin-top: 10px;
    box-shadow: 0 4px 0 #0056cc; /* viền nổi bên dưới */
}
#infUser{
    display: none;
}

.left-user .level-user{
    cursor: pointer;
}

.container-text{
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.container-text .data-inf{
    color: #FFC300;
}
.right-user .btn{
    background-color: #1A62A2;
    border: none;
    padding: 8px 12px;
    color: #fff;
    font-size: 12x;
    font-weight: bold;
    border-radius: 10px;
    white-space: nowrap;
}
#modal-coming-soon {
     display: none;
     position: fixed;
     z-index: 1000;
     top: 0; left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     align-items: center;
     justify-content: center;
     overflow-y: auto;
 }
#modal-coming-soon .modal-content-coming {
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
    display: flex;
    max-height: 95vh;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    top: 30%;
}
#modal-coming-soon .modal-header-coming{
    height: 3vh;
}
#modal-coming-soon .modal-header-coming h5{
    text-align: center;
    margin: 0 !important;
    font-size: 18px;
}
#modal-coming-soon .close-btn {
    font-size: 32px;
    cursor: pointer;
    color: #fff;
    position: absolute;
    right: 0px;
    top: -3%;

}
#modal-coming-soon .close-btn:hover {
    color: #000;
}
#modal-coming-soon .modal-body-coming{

    margin: 0 !important;
    border-radius: 0 0 10px 10px;
    overflow-y: auto;
}
#modal-coming-soon .modal-body-coming img{
    width: 100%;
}
#modal-coming-soon .modal-body-coming .text-coin{
    position: absolute;
    top: 44%;
    left: 35%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}
#modal-coming-soon .text-coin .happy-coin{
    font-size: 20px;
    text-align: center;

}
#modal-coming-soon .text-coin .number-coin{
    text-align: center;
    color: #FFC300;
    font-size: 23px;
    font-weight: bold;
}
#modal-coming-soon .close-btn{
    color: #84A3FF;
    font-size: 40px;
}
#modal-coming-soon .close-btn:hover{
    cursor: pointer;
    color: #84A3FF;
}
@media (max-width: 460px) {

}
@media (max-width: 500px) {
    #modal-coming-soon .modal-body-coming .text-coin {
        left: 33%;
    }

    .level-container .text-profile{
        margin-top: -2px !important;
    }
}@media (max-width: 375px) {
    #modal-coming-soon .modal-body-coming .text-coin {
        left: 32%;
    }
}
.right-user{
    display: flex;
    flex-direction: column;
    gap: 10px;
   margin-top: 45px;
}

.main-content{
    margin: 30px 0;
}
.list-content .img-item{
    padding: 2px 0;
}
.list-content .img-item:hover{
    cursor: pointer;
}
.list-content .item .content-item{
    display: flex;
    align-items: center;
    padding: 0px 20px;
}

.list-content .img-item .icon-mission{
    width: 100% !important;
    object-fit: cover;
}
.content-item .text-item{
    padding: 0 30px;
    font-size: 16px;
    font-weight: 550;
}
.content-item .text-item_mission{
    padding: 0 20px;
}
.list-content .item:hover{
    cursor: pointer;
}
.list-content .item .icon-logout{
    width: 7% !important;
    object-fit: cover;
}
.footer .icon-checkbox{
    width: 6%;
    margin-bottom: 10px;
}
.footer{
    display: flex;
    align-items: center;

}
.footer .text-checkbox{
    margin-left: 10px;
    margin-top: 3px;
}

/* Nền mờ */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}


/* Nội dung popup */
.modal-content {
    background-color: #fff;
    width: 90%;
    top: 15px;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #4655F5;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
    display: flex;
    max-height: 85vh;
    flex-direction: column;
}

/* Header popup */
.modal-header {
   position: relative;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    background-color: #112EA8;
   padding: 15px 0;

}
.modal-header h5{
    text-align: center;
    margin: 0 !important;
    font-size: 18px;
}

/* Nút đóng */
.close-btn {
    font-size: 32px;
    cursor: pointer;
    color: #fff;
    position: absolute;
    right: 10px;
    top: 10%;

}
.close-btn:hover {
    color: #000;
}
.modal-body{
    background-color: #010851;
    margin: 0 !important;
    overflow-y: auto;
}
.modal-body p{
    margin: 0 !important;
    padding: 20px 10px;
    text-align: justify;
}
.form-submit{
    padding: 10px;
}
/* Form */
.form-group {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
    align-items: center;

}
.form-group label {
    font-weight: 500;
    margin-bottom: 5px;
    min-width: 25%;
}
.form-group input {
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    background-color: #1B3584;
    border: none;
    min-width: 70%;
    color: #fff ;
}
.form-group input::placeholder {
    color: #6C90FF;
    font-style: italic;
    opacity: 1; /* Đảm bảo không bị mờ quá */
}
.form-group input[type="date"]{
    color: #6C90FF;
}

.btn-submit{
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    margin-top: 30px;
    margin-bottom: 20px;
}
/* Nút submit */
.btn-custom {
    background: linear-gradient(90deg, #0BA104 0%, #18D00F 100%);
box-shadow: 0 4px 0 #18D00F;
    color: white;
    padding: 7px 10px;
    width: 100%;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-custom:hover {
    background-color: #0056b3;
}
.list-vip .item-vip{
    margin: 10px 10px;
    background-color: #141D76;
    border-radius: 10px;
    border: 1px solid #3E4D9A;
    padding: 5px 10px ;
}
.progress-bar {
    width: 50%;
    height: 12px;
    background-color: #0a1a55; /* nền đen xanh đậm */
    border-radius: 20px;
    overflow: hidden;
    padding: 2px;
}
.list-vip .header-item_vip{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.list-vip .header-item_vip img{
    width: 10%;
    object-fit: contain;
}
.list-vip .header-item_vip .text-header_vip{
    padding: 0 !important;
    font-weight: bold;
    margin-top:10px !important;
}
.list-vip .header-item_vip .vip-o{
    margin-top: 5px;
}
.item-vip .content-item_vip .text-desc{
    color: #FFEA00;
    width: 100%;
    text-align: start;
    font-size: 12px;
}
.list-vip .inf-item_vip{
    padding: 10px !important;
}
.content-item_vip .text-interest{
    white-space: nowrap;
}
.content-item_vip .conainer-text_desc{
    display: flex;
    flex-direction: column;
}
input[type="date"] {
    position: relative;
    color: rgb(108, 144, 255); /* màu chữ bên trong input */
    border: none;
    font-size: 17px;
}

/* chỉnh màu icon date */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%) invert(63%) sepia(39%) saturate(5232%) hue-rotate(208deg) brightness(104%) contrast(102%);
    opacity: 1;
}



.progress-fill {
    height: 100%;
    background: linear-gradient(
        to bottom,
        #0BCE18 0%,
        #097C11 55%,
        #00FA11 97%
    );
    border-radius: 20px;
    transition: width 0.3s ease-in-out;
}
.item-vip .title-item{
    text-align: center;
    margin: 0 !important;
    padding: 5px 0 0 0 !important;
}
#infoVip .modal-body{
    padding: 15px 0 20px 0;
}
.list-vip .item-vip .content-item_progress{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 0;
}
.list-vip .item-vip .content-item_vip{
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    align-items: center;
    padding: 10px 0px;
}
.item-vip .content-item_vip span{
    font-weight: bold;
}
.list-vip .item-vip .progress-text{
    text-align: center;
    padding: 5px 0;
}
.modal-body {
    overflow-y: auto;
    max-height: 80vh;
    padding: 10px;

    /* Scroll đẹp */
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent; /* Firefox */
}

.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(#0BA104, #18D00F);
    border-radius: 8px;
}
.item .text-item_login,
.item .text-item_logout,
.item .text-item_register
{
    padding: 10px 30px;

}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.item .text-item_inf{
    padding: 10px 30px;
}
/* Hiệu ứng */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
.level-container .text-profile{
    margin-top: 5px ;
}


@media screen and (max-width: 767px){
    .container-text span{
        font-size: 14px;
    }
    .item-setting img{
        width: 10% !important;
    }
    .item-setting{
        margin-left: 5px !important;
    }

    .form-group label {

        min-width: 29%;
    }
    .form-group input {

        min-width: 66%;

    }
    .item .text-item_login,
    .item .text-item_logout,
    .item .text-item_register
    {
        padding: 0px 28px;

    }
    .right-user{
        margin-top:45px ;
    }
    .right-user .btn{
        padding: 5px 10px;
    }
    .left-user .level-user{
        margin-left: 0px;
    }
    .container-account {
        padding: 0 10px;
    }
    .left-container{
        width: 100%;
    }
    header .icon-left{
        width: 50%;
    }
    .level-container .text-profile {
        margin-left: 20px;
    }
    .list-content .item .content-item{
        padding: 5px 20px !important;
    }
    .item-mission{
       margin-left: 3px !important;
    }
    .list-content .item{

        height: 40px;
    }
    .item .text-item_inf{
        padding: 3px 25px;
    }
}