/* Đăng nhập / đăng ký / quên mật khẩu / external — chỉ nạp từ Views/Authen/* */
.authen-page #main-login {
    max-width: 500px !important;
    padding-top: 70px;
    width: 100%;
    margin: 0 auto 50px;
}

.authen-page #main-login .tab-pane {
    border: unset !important;
}

.authen-page #main-login .form-control[readonly] {
    background-color: #fff !important;
}

.authen-page #main-login .panel {
    width: 100%;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.authen-page #main-login .nav-tabs .nav-item button,
.authen-page #main-login .nav-tabs .nav-item.nav-link {
    padding: 0 20px;
    font-size: 16px;
    font-weight: 700;
    color: #222;
    line-height: 40px;
    border-radius: 0;
    border: none;
}

.authen-page #main-login .nav-tabs .nav-item button:hover,
.authen-page #main-login .nav-tabs .nav-item.nav-link:hover {
    border: none;
}

.authen-page #main-login .nav-tabs .nav-item:first-child button,
.authen-page #main-login .nav-tabs .nav-item:first-child .nav-link {
    border-left: none;
}

.authen-page #main-login .nav-tabs .nav-item button.active,
.authen-page #main-login .nav-tabs .nav-item .nav-link.active {
    border-top: 3px solid var(--color-brand-primary, #008848);
    border-right: solid 1px #eaeaea;
    background-color: #fff;
}

.authen-page #main-login .nav-tabs .nav-item:last-child button,
.authen-page #main-login .nav-tabs .nav-item:last-child .nav-link {
    border-left: solid 1px #eaeaea;
}

.authen-page #main-login .tab-content {
    padding: 30px 15px;
}

@media only screen and (max-width: 512px) {
    .authen-page #main-login .tab-content {
        padding: 0;
    }

    .authen-page #main-login .tab-content .tab-pane {
        padding: 15px;
    }
}

.authen-page #main-login .right-content {
    border-left: solid 1px #eaeaea;
}

.authen-page #socialLoginList .btn-social {
    width: 230px;
    padding: 8px 10px 8px 36px;
    margin-bottom: 10px;
}

@media (max-width: 576px) {
    .authen-page #socialLoginList .btn-social {
        width: 100% !important;
    }
}

.authen-page #socialLoginList .btn-facebook {
    color: #fff;
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, .2);
}

.authen-page #socialLoginList .btn-google {
    color: #fff;
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, .2);
}

.authen-page .btn-social {
    position: relative;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.authen-page .btn-social > :first-child {
    position: absolute;
    top: 3px;
    bottom: 0;
    left: 0;
    width: 32px;
    line-height: 34px;
    font-size: 1.6em;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, .2);
}

.authen-page .btn-social .ng-binding {
    font-size: 14px;
}

.authen-page .wrap-login {
    max-width: 450px;
    margin: 0 auto;
    padding: 20px 18px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
}

.authen-page .wrap-login .title {
    font-size: 17px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 0.02em;
    color: #333;
}

.authen-page .wrap-login input::placeholder {
    font-style: italic;
    font-size: 14px;
}

.authen-page .wrap-login .btn-login {
    background-color: #00529b;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
}

.authen-page .wrap-login .btn-refesh-password {
    background-color: #ebebeb;
    color: #000;
}

.authen-page .wrap-login .btn-fb {
    background-color: #2a416f;
    color: #fff;
    width: 100%;
}

.authen-page .form-separator {
    color: #ccc;
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.authen-page .form-separator:before,
.authen-page .form-separator:after {
    display: block;
    content: '';
    border-top: 1px solid #EFEFEF;
    width: calc(50% - 25px);
}

.authen-page .avatar-external {
    text-align: center;
}

.authen-page .avatar-external img {
    width: 100px;
    margin: 0 auto;
    border-radius: 50%;
    padding: 2px;
    border: 1px solid #eee;
    object-fit: cover;
}

.authen-page .avatar-external .lb-avatar {
    margin-top: 20px;
    font-weight: 500;
    font-size: 15px;
    color: #707070;
}

/* Quên mật khẩu: #main full width */
.authen-page#main,
section.authen-page#main {
    min-height: 50vh;
}

.authen-page .a-register {
    font-weight: 600;
}

/* Một tab (External login) */
.authen-page #main-login .nav-tabs .nav-item:only-child {
    flex: 1 1 auto;
}

.authen-page #main-login .nav-tabs .nav-item:only-child .nav-link {
    width: 100%;
    text-align: center;
}