.acc-register .edu-section {
        padding: 10px 0;
}
.acc-register .form-group label {
        font-weight: 600;
        padding-bottom: 5px;
        font-size: 15px;
}
.acc-register input[type=checkbox],
input[type=radio] {
        line-height: normal;
        width: 20px;
        height: 20px;
}
.acc-register .edu-checkbox {
        display: inline-flex;
        align-items: center;
        margin-right: 20px;
}
.acc-register .edu-checkbox label {
        padding-left: 5px;
        padding-bottom: 0;
}
.acc-register .pr-0 {
        padding-right: 0;
}
.acc-register .pl-0 {
        padding-left: 0;
}
.acc-register .dt-detail div:first-child {
        padding-left: 0;
}
.acc-register .dt-detail div:last-child {
        padding-right: 0;
}
.acc-register .hedaotao {
        font-size: 18px !important;
        margin-bottom: 10px;
}
.acc-register .btn-primary:hover {
        background-color: #0076c0;
}
.acc-register .btn-primary {
        background-color: #0076c0;
        color: #fff;
        font-weight: 600;
        font-size: 15px;
        border: none;
        padding: 8px 20px;
}
.acc-register .dangnhap {
        font-size: 15px;
}
.acc-register .avatar-container {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-direction: row-reverse;
}
.acc-register .avatar-preview {
        width: 111px;
        height: 111px;
        object-fit: cover;
        border-radius: 50%;
        border: 1px solid #ccc;
}
.acc-register .avatar-upload {
        flex: 1;
}
.UIAccountLogin {
}
.UIAccountLogin .ulNotLoggedIn {
        float: right;
        display: flex;
        list-style: none;
        gap: 5px;
        margin-bottom: 0;
        padding: 0;
}
.UIAccountLogin .ulNotLoggedIn li:first-child a {
        background: #ff0000;
        display: block;
        position: relative;
        height: 35px;
        min-width: 12px;
        padding: 0 15px;
        color: #fff;
        font-size: 14px;
        text-transform: uppercase;
        vertical-align: middle;
        text-decoration: none;
        line-height: 35px;
        font-weight: bold;
}
.LoginPanel .form-group:nth-last-child(2) {
        text-align: center;
}
.UIAccountLogin .ulNotLoggedIn li:last-child a {
        background: #09f;
        display: block;
        position: relative;
        height: 35px;
        min-width: 12px;
        padding: 0 15px;
        color: #fff;
        font-size: 14px;
        text-transform: uppercase;
        vertical-align: middle;
        text-decoration: none;
        line-height: 35px;
        font-weight: bold;
}
.UIAccountLogin .ulNotLoggedIn li:first-child a:hover {
        background: #09f;
        color: #fff;
        text-decoration: none;
}
.UIAccountLoginOne {
        max-width: 400px;
        margin: 20px auto;
        background-color: #ffffff;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        animation: fadeIn 0.5s ease-in-out;
}
.LoginPanel {
        background-color: #ffffff;
        padding: 20px 0;
}
.LoginPanel .toggle-password-btn {
        position: absolute;
        top: 70%;
        right: 14px;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #666;
        cursor: pointer;
        font-size: 18px;
        padding: 0;
        z-index: 10;
}
.LoginPanel .card-header {
        background: #0076c0;
        color: #fff;
        font-size: 22px;
        font-weight: 600;
        padding: 20px;
        text-align: center;
}
.LoginPanel .card-body {
        padding: 30px;
}
.LoginPanel .form-group {
        margin-bottom: 20px;
}
.LoginPanel .control-label {
        display: block;
        font-weight: 600;
        margin-bottom: 6px;
        color: #333;
        font-size: 15px;
        text-align: left;
}
.LoginPanel .form-control {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #ddd;
        border-radius: 10px;
        font-size: 15px;
        transition: 0.3s ease;
}
.LoginPanel .form-control:focus {
        border-color: #09f;
        box-shadow: 0 0 8px rgba(0, 153, 255, 0.3);
        outline: none;
}
.LoginPanel .btn-login {
        background-color: #0076c0;
        color: #fff;
        border: none;
        padding: 8px 20px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-right: 10px;
}
.LoginPanel .btn-login:hover {
        background-color: #0076c0;
}
.LoginPanel .lnkSendMail {
        display: block;
        margin-top: 15px;
        font-size: 15px;
        color: #242424;
        text-align: center;
        text-decoration: none;
}
.LoginPanel .lnkSendMail:hover {
        text-decoration: underline;
}
.fa-camera {
        padding-right: 5px;
}
#file-name {
        margin-left: 10px;
}
.profile .infouser .form-label {
        font-weight: 600;
        font-size: 15px;
        width: 150px;
}
.profile .infouser .avatar-container {
        text-align: right;
}
.profile .btn-primary:hover, .UIChangePassword .btn-primary:hover{
        background-color: #0076c0;
}
.profile .btn-primary, .UIChangePassword .btn-primary{
        background-color: #0076c1;
        color: #fff;
        font-weight: 600;
        font-size: 15px;
        border: none;
        padding: 8px 20px;
}
.profile .infouser .avatar-container .avatar-preview {
        width: 225px;
}
.btn-secondary{
        font-weight: 600;
        font-size: 15px;
        border: none;
        padding: 8px 20px;
}
@keyframes fadeIn {
        from {
                opacity: 0;
                transform: translateY(20px);
        }
        to {
                opacity: 1;
                transform: translateY(0);
        }
}
.GetPassword {
        background-color: #ffffff;
        padding: 20px 0;
}
.GetPassword .card-body {
        max-width: 400px;
        margin: 20px auto;
        background-color: #ffffff;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 30px;
        animation: fadeIn 0.5s ease-in-out;
}
.GetPassword .card-body .form-group {
        margin-bottom: 20px;
}
.GetPassword .card-body .form-group:nth-child(2) {
        text-align: center;
}
.GetPassword .card-body .control-label {
        display: block;
        font-weight: 600;
        margin-bottom: 6px;
        color: #333;
        font-size: 15px;
}
.GetPassword .card-body .form-control {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #ddd;
        border-radius: 10px;
        font-size: 15px;
        transition: 0.3s ease;
}
.GetPassword .card-body .form-control:focus {
        border-color: #09f;
        box-shadow: 0 0 8px rgba(0, 153, 255, 0.3);
        outline: none;
}
.GetPassword .card-body .btn-login {
        background-color: #ffce27;
        color: #292525;
        border: none;
        padding: 8px 20px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-right: 10px;
}
.GetPassword .card-body .lblMailInfo{
        text-align: center;
        display: block;
        font-size: 15px;
        color: red;
}
.GetPassword .card-body .btn-login:hover {
        background-color: #0d6efd;
}
.btn-primary:focus, .btn-secondary:focus {
        box-shadow: unset !important;
}
.btn-primary:active:focus, .btn-secondary:active:focus{
        box-shadow: unset !important;
}
.UIAccountLogin .ulAcountInfo {
        position: absolute;
        top: 210px;
        left: 0;
}
.ulAcountInfo .ulLoggedIn {
        display: flex;
        list-style: none;
        gap: 5px;
}
.UIAccountLogin .ulLoggedIn li:first-child a {
        background: #ff0000;
        display: block;
        position: relative;
        height: 35px;
        min-width: 12px;
        padding: 0 15px;
        color: #fff;
        font-size: 12px;
        text-transform: uppercase;
        vertical-align: middle;
        text-decoration: none;
        line-height: 35px;
        font-weight: bold;
}
.LoginPanel .form-group:nth-child(3) {
        text-align: center;
}
.UIAccountLogin .ulLoggedIn li:last-child a {
        background: #09f;
        display: block;
        position: relative;
        height: 35px;
        min-width: 12px;
        padding: 0 15px;
        color: #fff;
        font-size: 12px;
        text-transform: uppercase;
        vertical-align: middle;
        text-decoration: none;
        line-height: 35px;
        font-weight: bold;
}
.UIAccountLogin .ulLoggedIn .avatar img {
        height: 35px;
        width: 35px;
        background: #069;
}
.UIChangePassword .error span {
        padding-bottom: 10px;
        color: red;
        text-align: center;
        display: block;
}
.UIChangePassword .content {
        max-width: 400px;
        margin: 20px auto;
        background-color: #ffffff;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        overflow: hidden;
}
.UIChangePassword .content .inputform label {
        font-weight: 600;
        margin-bottom: 6px;
        color: #333;
        font-size: 14px;
}
.UIChangePassword .content .inputform .form-control {
        width: 100%;
        padding: 5px 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        transition: 0.3s ease;
}
.UIChangePassword .content .inputform .form-control:focus {
        border-color: #09f;
        box-shadow: 0 0 8px rgba(0, 153, 255, 0.3);
        outline: none;
}
.UIChangePassword .form-actions {
        text-align: center;
}
.UIChangePassword .form-group {
        margin-bottom: 18px;
}
.UIChangePassword .form-group label {
        flex: 0 0 135px;
        text-align: right;
        margin-right: 10px;
}
.UIChangePassword .input-wrapper {
        flex: 1;
        position: relative;
}
.UIChangePassword .toggle-password-btn {
        position: absolute;
        top: 45%;
        right: 10px;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #666;
        cursor: pointer;
        font-size: 15px;
        padding: 0;
        z-index: 10;
}
.UIChangePassword .card-header {
        background: linear-gradient(to right, #ffc708, #ffe89b);
        color: #292525;
        font-size: 22px;
        font-weight: 600;
        padding: 20px;
        text-align: center;
}
@media only screen and (max-width: 768px) {
        .UIAccountLogin .ulAcountInfo {
                position: unset;
                margin: 5px;
        }
        .UIAccountLogin .ulNotLoggedIn {
                float: unset;
                justify-content: center;
        }
        .row>* {
                padding-left: 0;
                padding-right: 0;
                margin-top: 5px;
        }
        #file-name, #filename {
                display: block;
                margin-left: 0;
                margin-top: 5px;
        }
        .acc-register .avatar-container {
                display: block;
                align-items: center;
                gap: 10px;
                flex-direction: row-reverse;
                text-align: center;
        }
        .acc-register .avatar-upload {
                margin-top: 5px;
        }
        .UIAccountLogin,
        .UIChangePassword, .profile,  .acc-register {
                width: 100vw;
                padding: 10px;
        }
        .table-3-col .infouser td {
                display: revert !important;
        }
        .infouser .row:first-child {
                display: flex;
                flex-direction: column-reverse;
        }
        .profile .infouser .avatar-container {
                text-align: center;
        }
        .profile .infouser .avatar-container .avatar-preview {
                width: 150px;
        }
        .ulAcountInfo .ulLoggedIn {
                justify-content: center;
                padding-left: 0;
        }
}