.login-pf body {
    background: none;
}

.logout-confirm-form {
    width: 100%;
}

.logout-confirm-message {
    color: #4d4d4d;
    font-size: 20px;
    line-height: 1.35;
    margin: 0 0 26px;
}

.logout-confirm-actions {
    margin: 0;
}

.logout-confirm-back {
    color: #4d4d4d;
    display: inline-block;
    font-size: 20px;
    line-height: 1.35;
    margin-top: 20px;
    text-decoration: none;
}

.logout-confirm-back:hover {
    color: #34358b;
    text-decoration: none;
}

.remember-login-option {
    display: flex;
    align-items: center;
    margin-top: 14px;
}

.remember-login-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #343434;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    user-select: none;
}

.remember-login-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #002c77;
    cursor: pointer;
}

.alert-error {
    background-color: #ffffff;
    /* border-color: #cc0000; */
    color: #F30C0C;
}

.input-error {
    border-color: #F30C0C !important;
}

.numberPhone-msg {
    font-weight: 600;
    color: #00176b !important;
}

#kc-locale ul {
    display: none;
    position: absolute;
    background-color: #fff;
    list-style: none;
    right: 20px;
    top: 30px;
    width: 200px;
    padding: 2px;
}

#kc-locale:hover ul {
    display: block;
    margin: 0;
}

#kc-locale ul li a {
    display: block;
    padding: 1px 11px;
    color: #000 !important;
    border: 1px solid #fff;
    text-decoration: none;
    display: block;
    line-height: 20px;
}

#kc-locale ul li a:hover {
    color: #4d5258;
    background-color: #d4edfa;
    border-color: #b3d3e7;
}

#kc-locale-dropdown a {
    color: #fff;
}

#kc-locale-dropdown a:hover {
    text-decoration: none;
}

a#kc-current-locale-link {
    display: block;
    padding: 5px;
}

a#kc-current-locale-link:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

a#kc-current-locale-link::after {
    content: "\2c5";
    margin-left: 4px;
}

#kc-container-wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;
    padding: 1%;
    flex-direction: row;
}

#kc-left-container {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    z-index: 1;
    background: rgba(255, 255, 255, 0.8);
}

#kc-right-container {
    width: 60%;
    position: relative;

}

.login-pf .container {
    padding-top: 20px;
    color: #333333;
}

.login-pf a:hover {
    color: #34358b;
}

.footer-groups {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#kc-logo {
    width: 100%;
}

.kcAbBrandPic-back {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/ab/ArrowLeft.png?20241203032732");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 20px;
    height: 20px;
}

.kcAbBrandPic-search {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/1e/Icon_search.png?20241205023622");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 20px;
    height: 20px;
}

.kcAbBrandPic-vi {
    background-image: url("../img/main-banner-vi.png");
    background-repeat: no-repeat;
    /* Banner la anh doc (ti le 0.94) trong khung ngang, nen dung contain de khong bi
       cat mat tieu de va hang logo. background-color lap phan trong hai ben, lay dung
       mau bien cua anh nen nhin lien mach. */
    background-size: contain;
    background-color: #eef2fb;
    background-position: center;
    width: 100%;
    height: 100%;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.kcAbBrandPic-en {
    background-image: url("../img/main-banner-en.png");
    background-repeat: no-repeat;
    /* Banner la anh doc (ti le 0.94) trong khung ngang, nen dung contain de khong bi
       cat mat tieu de va hang logo. background-color lap phan trong hai ben, lay dung
       mau bien cua anh nen nhin lien mach. */
    background-size: contain;
    background-color: #eef2fb;
    background-position: center;
    width: 100%;
    height: 100%;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.kcAbBrandPic-id {
    background-image: url("../img/main-banner-id.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #eef2fb;
    background-position: center;
    width: 100%;
    height: 100%;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

div.kc-logo-text span,
div.kcAbBrandPic-vi span,
div.kc-logo-text span,
div.kcAbBrandPic-en span,
div.kcAbBrandPic-id span {
    display: none;
}

div.kc-logo-text {
    background-image: url("../img/antbuddy-logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 150px;
    height: 60px;
}

div.kc-empower {
    margin-top: 10px;
    font-size: 16px;
    color: #34358b;
}

#kc-header {
    overflow: visible;
    white-space: nowrap;
}

#kc-header-wrapper {
    font-size: 26px;
    line-height: 1.2em;
}

#kc-header-name {
    color: #676767;
    font-weight: 700;
    font-size: 36px;
    text-align: center;
    margin-bottom: 75px;
}

#kc-header-name-ant {
    font-weight: 100;
}

#kc-content {
    position: relative;
}

.turnBack {
    font-weight: 700;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0 7px;
    border-radius: 4px;
}

.turnBack span {
    margin-left: 8px;
}

.turnBack:hover {
    background-color: #F7F9FC;
}

#kc-content-wrapper {
    /* overflow-y: hidden; */
    display: flex;
    flex-direction: column;
    width: 75%;
}

#kc-info {
    white-space: normal;
}

#kc-info-wrapper {
    font-size: 13px;
    margin-top: 20px;
}

#kc-form-options span {
    line-height: 30px;
}

#kc-terms-text {
    margin-bottom: 20px;
}

#kc-registration {
    margin-bottom: 15px;
}

/* TOTP */

ol#kc-totp-settings {
    margin: 0;
    padding: 0;
}

ol#kc-totp-settings li {
    margin-top: 1em;
}

ol#kc-totp-settings li:first-of-type {
    margin-top: 0;
}

#kc-totp-secret-qr-code {
    max-width: 150px;
    max-height: 150px;
}

/* OAuth */

#kc-oauth h3 {
    margin-top: 0;
}

#kc-oauth ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#kc-oauth ul li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    padding: 10px 30px;
}

#kc-oauth ul li:first-of-type {
    border-top: 0;
}

#kc-oauth .kc-role {
    display: inline-block;
    width: 50%;
}

/* Code */
#kc-code textarea {
    width: 100%;
    height: 8em;
}

/* Social */

#kc-social-providers ul {
    display: flex;
    list-style-type: none;
    padding: 0;
}

#kc-social-providers ul li {
    margin-right: 5px;
    width: 24%;
    border: 1px solid #F0F0F1;
    border-radius: 8px;
    padding: 7px 0;
}

#kc-social-providers ul li:hover {
    background-color: #F7F9FC;
}

.turnback_opt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 -60px 75px;
    color: #00176b;
}

.form_header {
    font-size: 24px;
    font-weight: 700;
    color: #2C2E32;
    padding: 0;
    margin: 0;
}

.form_title {
    font-size: 14px;
    color: #2C2E32;
    margin: 0px;
}

.form_title-otp {
    font-size: 14px;
    color: #2C2E32;
    text-align: center;
}

.form-select-options-reset {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
}

.config-radio {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.config-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid #BABCC0;
    border-radius: 50%;
}

.config-radio:hover input~.checkmark {
    border: 1px solid #686D76;
}

.config-radio input:checked~.checkmark {
    background-color: #00176B;
    border: 0;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.config-radio input:checked~.checkmark:after {
    display: block;
}

.config-radio .checkmark:after {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
}


.form-select-options-reset .first-opt {
    margin-right: 20px;
}

.custom-input {
    width: 100%;
}

.custom-input-wrapper {
    position: relative;
}

.custom-input-wrapper input {
    transition: border-color 0.3s ease;
}

.custom-input-wrapper input:focus {
    border-color: #000;
}

.custom-input-wrapper label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    transition: 0.3s ease all;
    font-weight: 500;
    padding: 0 4px;
    margin-left: 10px;
    color: #999999;
}

.group-method-getOTP {
    display: flex;
    flex-direction: column;
    border: 1px solid #F0F0F1;
    border-radius: 18px;
    padding: 10px;
}

.select-method-getOTP {
    display: flex;
    background-color: white;
    border: 1px solid #F0F0F1;
    border-radius: 8px;
    margin-bottom: 10px;
    justify-content: flex-start;
    padding: 5px 10px;
    font-weight: 600;
    font-size: 1.3rem;
}

.select-method-getOTP:last-child {
    margin-bottom: 0;
}

.select-method-getOTP:hover {
    background-color: #F7F9FC;
    cursor: pointer;
}

.select-method-getOTP:disabled {
    background-color: #f7f7f7;
    cursor: not-allowed;
}

.otp-method-option {
    align-items: center;
    gap: 10px;
}

.otp-method-option input[type="radio"] {
    margin: 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #1E88E5;
    cursor: pointer;
}

.otp-method-option--selected {
    border-color: #1E88E5;
    background-color: #F3F9FF;
}

.otp-method-option--disabled {
    background-color: #f7f7f7;
    cursor: not-allowed;
}

.otp-method-option--disabled input[type="radio"],
.otp-method-option--disabled span {
    cursor: not-allowed;
}

.onboarding-notice-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: #EAF4FF;
    border: 1px solid #CFE6FF;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.onboarding-notice-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #1E88E5;
}

.onboarding-notice-text {
    margin: 0;
    font-size: 1.3rem;
    color: #35424C;
}

.onboarding-terms-notice {
    margin-top: 20px;
    font-size: 1.2rem;
    color: #8da2b5;
    text-align: center;
}

.onboarding-terms-notice a {
    color: #1E88E5;
    text-decoration: none;
}

.onboarding-terms-notice a:hover {
    text-decoration: underline;
}


.custom-input-wrapper input:focus+label,
.custom-input-wrapper input:not(:placeholder-shown)+label {
    top: 0;
    font-size: 15px;
    color: #000;
    background: white;
}


.otp-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.otp-input {
    width: 48px;
    height: 48px;
    font-size: 1.7rem;
    font-weight: 700;
    text-align: center;
    border: 1px solid #D0D2D5;
    border-radius: 4.8px;
    outline: none;
    transition: border-color 0.3s;
}

.otp-input:focus {
    border-color: #00176b;
}

.otp-countdown {
    font-size: 1.5rem;
    color: #00176b;
    font-weight: 600;
}

.submit-hidden {
    display: none;
}

input:-webkit-autofill {
    background-color: #e6f0ff !important;
    box-shadow: 0 0 0 1000px #e6f0ff inset !important;
    -webkit-text-fill-color: #000 !important;
}

input:-webkit-autofill~label {
    display: none;
}

.login_options {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.org-group-input {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.input-with-icon {
    position: relative;
}

.input-with-icon .input-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #8da2b5;
    pointer-events: none;
}

.input-has-icon {
    padding-left: 38px !important;
}

.org-group-input span {
    color: #00176b;
    font-size: 1.5rem;
    font-weight: 700;
    margin-left: 5px;
}

.checkbox-container {
    display: flex;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #4a4a4a;
}

.checkbox-container input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    accent-color: #002c77;
    border-radius: 4px;
}

.termsCheckbox {
    font-weight: 400;
}

.termsCheckbox a {
    font-weight: 700;
}

.custom-select-lang {
    padding: 0;
}

/* #kc-social-providers ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
}

#kc-social-providers li {
    display: block;
    margin-top: 5px;
}

#kc-social-providers li:first-of-type {
    margin-top: 0;
} */

.country-code-list {
    position: absolute;
    width: 26%;
    height: 150px;
    overflow-y: scroll;
    border-radius: 8px;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #F0F0F1;
    cursor: pointer;
    list-style-type: none;
    z-index: 99999999;
}

.country-code-list::-webkit-scrollbar {
    width: 5px;
}

.country-code-list::-webkit-scrollbar-thumb {
    background-color: #c0c0c0;
    border-radius: 10px;
}

.country-code-list::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.country-code-list::-webkit-scrollbar-thumb:hover {
    background-color: #a0a0a0;
}

.country-code-list li {
    display: flex;
    align-items: center;
    padding: 6px;
}

.country-code-search {
    width: 100%;
    padding: 4px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    border: 1px solid #F0F0F1;
    border-radius: 6px;
    box-sizing: border-box;
    outline: none;
    transition: border 0.3s ease;
}

.country-code-search input:focus {
    border: none;
    box-shadow: none;
    outline: none;
}

.country-code-search:focus {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.search-input {
    border: none;
    outline: none;
    flex-grow: 1;
}

.search-input:focus,
.search-input:active,
.search-input:focus-visible {
    border: none;
}

.zocial {}

.zocial:hover {
    color: #fff !important;
}

.zocial.facebook,
.zocial.github,
.zocial.google,
.zocial.microsoft,
.zocial.stackoverflow,
.zocial.linkedin,
.zocial.twitter {
    background-image: none;
    border-radius: 2px;

    font-family: "Open Sans", sans-serif;
    font-weight: normal;

    box-shadow: none;
    text-shadow: none;
}

.zocial.google {
    background-color: #dd4b39 !important;
}

.zocial.facebook:hover,
.zocial.github:hover,
.zocial.google:hover,
.zocial.microsoft:hover,
.zocial.stackoverflow:hover,
.zocial.linkedin:hover,
.zocial.twitter:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%) !important;
}

/* Copy of zocial windows classes to be used for microsoft's social provider button */
.zocial.microsoft {
    background-color: #0052a4;
    color: #fff;
}

.zocial.microsoft:before {
    content: "\f15d";
}

#kc-footer-wrapper {
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    #kc-container-wrapper {
        position: absolute;
        width: 100%;
    }

    #kc-logo-wrapper {
        position: absolute;
        top: 50px;
        right: 50px;
    }

    .login-pf .container {
        padding-left: inherit;
    }

    .login-pf .container .login {
        padding-right: 20px;
    }

    .login-pf .container .details {
        border-left: none;
        padding-left: 20px;
    }

    #kc-locale {
        position: relative;
        width: 200px;
        left: -230px;
        text-align: right;
        z-index: 9999;
    }



}

@media (max-width: 767px) {

    #kc-logo-wrapper {
        background-position: center;
        width: 100%;
        margin: 20px 0;
    }

    #kc-header {
        float: none;
        text-align: center;
    }

    #kc-form {
        float: none;
    }

    #kc-info-wrapper {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 15px;
        padding-top: 15px;
        padding-left: 0px;
        padding-right: 15px;
    }

    #kc-left-container {
        width: 100%;
        padding: 0 15px;
    }

    #kc-right-container {
        display: none;
    }

    .login-pf .container {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #kc-locale {
        position: absolute;
        width: 200px;
        top: 10px;
        right: 0px;
        text-align: right;
        z-index: 9999;
    }

    .country-code-list {
        width: 63%;
    }
}

@media (max-width: 446px) {
    .form_header {
        font-size: 20px;
    }

    .form_title {
        font-size: 12px;
    }

    .custom-input-wrapper label {
        font-size: 11px;
        padding: 0 4px;
        margin-left: 0px;
    }

    .custom-input-wrapper input:focus+label,
    .custom-input-wrapper input:not(:placeholder-shown)+label {
        top: 0;
        font-size: 11px;
        color: #000;
        background: white;
    }

    .form-select-options-reset {
        margin: 15px 0;
        font-size: 10px;
    }

    .checkmark {
        height: 17px;
        width: 17px;
    }

    .config-radio .checkmark:after {
        width: 7px;
        height: 7px;
    }

    .turnback_opt {
        margin: 0 -40px 75px;
    }

    #kc-left-container {
        width: 100%;
        padding: 0;
    }
}

.tooltip-otp {
    position: relative;
    cursor: pointer;
}

.tooltip-otp:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.tooltip-otp::after {
    opacity: 0;
    pointer-events: none;
}

/* Login screen — matches the authentication view in the AntBuddy design system. */
.login-screen {
    width: 372px;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 24px;
    color: #2c2e32;
}

.login-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin-bottom: 53px;
}

.login-brand img {
    display: block;
    height: 40px;
    width: auto;
    object-fit: contain;
}

.login-brand span {
    margin-left: 1px;
    color: #00176b;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -1.2px;
}

.auth-login-form {
    margin: 0;
}

.auth-login-heading {
    margin: 0 0 30px;
    text-align: center;
}

.auth-login-heading h1 {
    margin: 0 0 4px;
    color: #1E293B;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0;
}

.auth-login-heading p {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
    color: #686D76;
    max-width: 330px;
    margin: 0 auto;
}

.auth-mode-tabs {
    display: flex;
    align-items: center;
    width: 228px;
    max-width: 100%;
    height: 40px;
    margin: 0 auto 33px;
    padding: 2px;
    border-radius: 10px;
    background: #f0f0f1;
    box-sizing: border-box;
}

.auth-mode-tab {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 36px;
    border-radius: 8px;
    color: #686d76;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
}

.auth-mode-tab:hover,
.auth-mode-tab:focus {
    color: #00176b;
    text-decoration: none;
}

.auth-mode-tab--active {
    color: #2c2e32;
    background: #ffffff;
    border: 1px solid #F0F0F1;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 23, 107, 0.12);
}

.auth-field {
    margin-bottom: 16px;
}

.auth-field--password {
    margin-bottom: 0;
}

.auth-field label {
    display: block;
    margin: 0 0 6px;
    color: #2C2E32;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0;
}

.auth-field input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e1e3e7;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
    color: #2c2e32;
    font-size: 14px;
    outline: none;
}

.auth-field input::placeholder {
    color: #b5b8c0;
}

.auth-field input:focus {
    border-color: #00176b;
    box-shadow: 0 0 0 3px rgba(0, 23, 107, 0.08);
}

.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(0, 23, 107, 0.08);
    -webkit-text-fill-color: #2c2e32;
}

.auth-input-control {
    position: relative;
}

.auth-field--invalid input {
    padding-right: 36px;
    border-color: #f30c0c;
}

.auth-field--invalid input:focus {
    border-color: #f30c0c;
    box-shadow: 0 0 0 3px rgba(243, 12, 12, 0.08);
}

.auth-field--invalid input:-webkit-autofill,
.auth-field--invalid input:-webkit-autofill:hover,
.auth-field--invalid input:-webkit-autofill:focus {
    border-color: #f30c0c;
    box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(243, 12, 12, 0.08);
}

.auth-field-alert-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    pointer-events: none;
    background: url('../img/IconAlert.svg') center / 16px 16px no-repeat;
}

.auth-field--invalid .auth-password-toggle {
    right: 10px;
}

.auth-password-control {
    position: relative;
}

.auth-password-control input {
    padding-right: 44px;
}

.auth-field--invalid .auth-password-control input {
    padding-right: 72px;
}

.auth-password-control .auth-field-alert-icon {
    right: 40px;
}

.auth-password-toggle {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: url('../img/IconSPW.svg') center / 20px 20px no-repeat;
    cursor: pointer;
}

.auth-password-toggle--visible {
    background-image: url('../img/IconPW.svg');
}

.auth-form-error {
    display: block;
    min-height: 16px;
    margin: 6px 0 0;
    color: #f30c0c;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    overflow-wrap: anywhere;
}

.auth-form-error a {
    color: #f30c0c;
    font-weight: 500;
    text-decoration: none;
}

.auth-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 20px;
    margin: 16px 0 28px;
    font-size: 14px;
}

.auth-login-options>a {
    color: #2C2E32;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0;
    text-decoration: none;
}

.auth-login-options>a:hover,
.auth-login-options>a:focus {
    color: #00176b;
    text-decoration: none;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    cursor: pointer;
}

.auth-remember input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 6px;
    border: 1px solid #BABCC0;
    opacity: 1;
    accent-color: #00176b;
    cursor: pointer;
}

.auth-remember span {
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0;
    color: #4A4D54;
}

.auth-submit {
    display: block;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 9px;
    background: #00176b;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 44px;
    text-align: center;
}

.auth-submit:hover,
.auth-submit:focus {
    background: #102b80;
    color: #ffffff;
}

.auth-submit:disabled {
    background: #b0b7d1;
    cursor: not-allowed;
}

.auth-final-submit {
    display: none;
}

.auth-social-login {
    margin-top: 20px;
}

.auth-social-divider {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 20px;
}

.auth-social-divider span {
    flex: 1;
    height: 1px;
    background: #f0f0f1;
}

.auth-social-divider em {
    color: #686d76;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.auth-social-login ul {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-social-login li {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #f0f0f1;
    border-radius: 8px;
    background: #f7f9fc;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.auth-social-login li:hover {
    border-color: #e2e7f1;
}

.auth-social-login li a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #2c2e32;
    text-decoration: none;
}

.auth-social-login .google-signin-logo,
.auth-social-login .facebook-signin-logo,
.auth-social-login .microsoft-signin-logo,
.auth-social-login .zalo-signin-logo,
.registration-social-login .google-signin-logo,
.registration-social-login .facebook-signin-logo,
.registration-social-login .microsoft-signin-logo,
.registration-social-login .zalo-signin-logo {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0;
}

.auth-terms {
    margin: 31px -12px 0;
    color: #686d76;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.auth-terms a {
    color: #005ce6;
    font-weight: 500;
    text-decoration: none;
}

.auth-terms a:hover,
.auth-terms a:focus {
    text-decoration: underline;
}

@media (min-width: 768px) {
    #kc-left-container:has(.login-screen) {
        justify-content: space-between;
        padding: 0 40px;
    }

    /*
     * Cac frame thiet ke dung chung mot khung cho moi man xac thuc: padding 24px,
     * cot trai 592px co dinh, banner an het phan con lai - o 1440x900 ra dung
     * 800x852 (frame Default 32421:41304 va Dang ky 32448:379088). Cac man
     * .registration-screen da theo khung nay; rieng man dang nhap con dung
     * padding 1% / trai 40% / phai 60% nen banner lech kich thuoc so voi dang ky.
     */
    body:has(.login-screen) #kc-container-wrapper {
        height: 100vh;
        max-height: 100vh;
        min-height: 0;
        padding: 24px;
        box-sizing: border-box;
        overflow: hidden;
    }

    body:has(.login-screen) #kc-left-container {
        width: 592px;
        min-width: 592px;
    }

    body:has(.login-screen) #kc-right-container {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
    }

    #kc-right-container:has(.kcAbBrandPic-vi),
    #kc-right-container:has(.kcAbBrandPic-en),
    #kc-right-container:has(.kcAbBrandPic-id) {
        overflow: hidden;
        border: 1px solid #f0f0f1;
        border-radius: 24px;
    }

    #kc-right-container .kcAbBrandPic-vi,
    #kc-right-container .kcAbBrandPic-en,
    #kc-right-container .kcAbBrandPic-id {
        border-radius: 0;
    }
}

@media (max-width: 767px) {
    .login-screen {
        padding: 24px 0 12px;
    }

    .login-brand {
        margin-bottom: 36px;
    }

    .auth-terms {
        margin-right: 0;
        margin-left: 0;
    }
}

/* Registration flow */
.registration-screen {
    width: 372px;
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 0 12px;
    color: #2c2e32;
}

.registration-content,
.registration-step {
    width: 100%;
}

.registration-nav {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: space-between;
}

/* Man nhap so dien thoai khong co nut quay lai nen logo dung giua thay vi day sang phai. */
.registration-nav--brand-only {
    justify-content: center;
}

.registration-back {
    display: inline-flex;
    min-height: 32px;
    padding: 0 10px;
    align-items: center;
    gap: 6px;
    border: 1px solid #e1e3e7;
    border-radius: 8px;
    background: #fff;
    color: #686d76;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
}

.registration-back:hover,
.registration-back:focus {
    color: #00176b;
    text-decoration: none;
}

.registration-brand {
    display: inline-flex;
    align-items: flex-end;
    color: #00176b;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.registration-brand img {
    width: 91px;
    height: auto;
    margin-right: 2px;
}

.registration-intro,
.registration-step .form_header,
.registration-step .form_title,
.registration-step .form_title-otp {
    text-align: center;
}

.registration-intro h1,
.registration-step .form_header {
    margin: 0;
    color: #17191c;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.registration-intro p,
.registration-step .form_title {
    margin: 8px 0 0;
    color: #686d76;
    font-size: 14px;
    line-height: 20px;
}

.registration-mode-tabs {
    margin: 26px 0 28px;
}

.registration-screen .group-select-input-form {
    display: flex;
    width: 100%;
    margin-top: 0;
    align-items: flex-end;
    gap: 8px;
}

.registration-screen .country-code-dropdown {
    flex: 0 0 auto;
}

.registration-screen .country-code-button {
    display: flex;
    height: 40px;
    min-width: 78px;
    padding: 0 10px;
    align-items: center;
    gap: 5px;
    border: 1px solid #dfe2e8;
    border-radius: 8px;
    background: #fff;
    color: #2c2e32;
    font-size: 14px;
}

.registration-screen .group-select-input-form .custom-input-wrapper {
    flex: 1 1 auto;
    margin: 0;
}

.registration-screen .custom-input-wrapper {
    position: relative;
    width: 100%;
    margin: 0 0 18px;
    padding-top: 19px;
}

.registration-screen .custom-input-wrapper label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
    transform: none;
    background: transparent;
    color: #4d5259;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    pointer-events: none;
}

.registration-screen .custom-input-wrapper .form-control,
.registration-screen .custom-input-wrapper input[type="text"],
.registration-screen .custom-input-wrapper input[type="email"],
.registration-screen .custom-input-wrapper input[type="tel"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dfe2e8;
    border-radius: 8px;
    box-shadow: none;
    color: #2c2e32;
    font-size: 14px;
}

.registration-screen .custom-input-wrapper .form-control:focus,
.registration-screen .custom-input-wrapper input:focus {
    border-color: #005ce6;
    box-shadow: 0 0 0 3px rgba(0, 92, 230, .12);
}

.registration-screen .custom-input-wrapper.org-group-input input {
    padding-right: 112px;
}

.registration-screen .custom-input-wrapper.org-group-input>span {
    position: absolute;
    right: 12px;
    bottom: 11px;
    color: #686d76;
    font-size: 13px;
}

.registration-screen .group-method-getOTP {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
}

.registration-screen .select-method-getOTP {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #dfe2e8;
    border-radius: 8px;
    background: #fff;
    color: #2c2e32;
    font-size: 14px;
    font-weight: 500;
}

.registration-screen .select-method-getOTP:hover:not(:disabled) {
    border-color: #005ce6;
    background: #f4f8ff;
}

.registration-screen .otp-container {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.registration-screen .otp-input {
    width: 48px;
    height: 48px;
    border: 1px solid #dfe2e8;
    border-radius: 8px;
    color: #00176b;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.registration-screen .otp-input:focus {
    border-color: #005ce6;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 92, 230, .12);
}

.registration-screen .checkbox-container {
    display: flex;
    margin: 4px 0 20px;
    align-items: flex-start;
    gap: 8px;
    color: #686d76;
    font-size: 12px;
    line-height: 18px;
}

.registration-screen .checkbox-container input {
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: #005ce6;
}

.registration-screen .checkbox-container label {
    margin: 0;
    font-weight: 400;
}

.registration-screen .checkbox-container a {
    color: #005ce6;
    text-decoration: none;
}

.registration-screen .registration-divider {
    margin-top: 24px;
}

.registration-screen .registration-social-login {
    margin-top: 16px;
}

.registration-screen .registration-terms {
    margin: 22px 0 0;
}

.registration-screen .text-danger {
    color: #d92d20;
    font-size: 12px;
    line-height: 16px;
}

@media (max-width: 767px) {
    .registration-screen {
        padding-top: 24px;
    }
}

/* Registration refresh — aligned with the AntCRM authentication screens. */
body:has(.registration-screen) {
    background: #ffffff;
    color: #17191c;
    font-family: Inter, Roboto, Arial, sans-serif;
}

body:has(.registration-screen) #kc-container-wrapper {
    min-height: 900px;
    height: 100vh;
    padding: 24px;
}

body:has(.registration-screen) #kc-left-container {
    width: 592px;
    min-width: 592px;
    padding: 0 40px;
    background: #ffffff;
}

body:has(.registration-screen) #kc-right-container {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    border: 1px solid #f0f0f1;
    border-radius: 24px;
}

body:has(.registration-screen) #kc-right-container .kcAbBrandPic-vi,
body:has(.registration-screen) #kc-right-container .kcAbBrandPic-en,
body:has(.registration-screen) #kc-right-container .kcAbBrandPic-id {
    border-radius: 0;
}

body:has(.registration-screen) #kc-content-wrapper {
    width: 512px;
    max-width: 100%;
}

/*
 * The reference frame pins the nav to the top of the panel, the footer to the
 * bottom and centres whatever the current step renders in between. Stretch the
 * Keycloak wrappers so the step content can be centred with auto margins
 * instead of a hand-tuned offset per step.
 */
body:has(.registration-screen) #kc-content-wrapper,
body:has(.registration-screen) #kc-form,
body:has(.registration-screen) #kc-form-wrapper {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

body:has(.registration-screen) #kc-footer-wrapper {
    width: 512px;
    max-width: 100%;
}

body:has(.registration-screen) #kc-footer {
    border-top: 1px solid #f0f0f1;
}

/* Inter is wider than the patternfly default, so let the chip grow instead of
   wrapping "Tiếng Việt" onto two lines. */
body:has(.registration-screen) .selected-language {
    width: auto;
    white-space: nowrap;
}

body:has(.registration-screen) #kc-footer hr {
    display: none;
}

.registration-screen {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 512px;
    max-width: 100%;
    margin: 0;
    padding: 24px 0 0;
    color: #2c2e32;
    font-family: Inter, Roboto, Arial, sans-serif;
}

.registration-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

/* Nav on top, step content centred in the space left over above the footer. */
.registration-nav {
    min-height: 40px;
    margin-bottom: auto;
}

.registration-content>#kc-register-form {
    margin-bottom: auto;
}

.registration-back {
    box-sizing: border-box;
    min-height: 36px;
    height: 36px;
    justify-content: center;
    padding: 0 12px;
    gap: 4px;
    border-color: #d0d2d5;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    color: #2c2e32;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.registration-back>span {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    /*
     * Net ve cua glyph mui ten chi cao ~0.25em va nam quanh truc toan hoc (phia tren baseline),
     * nen align-items: center chi can giua HOP chu chu khong can giua net ve - mui ten bi thap
     * hon tam nut 0.175em. Keo len dung phan lech do.
     */
    transform: translateY(-0.175em);
}

.registration-brand {
    color: #00176b;
    font-size: 18px;
    font-weight: 700;
}

.registration-brand img {
    width: 110px;
    margin-right: 0;
}

.registration-hero {
    width: 372px;
    max-width: 100%;
    margin: 0 auto 32px;
    text-align: center;
}

.registration-hero h1 {
    margin: 0;
    color: #2c2e32;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
}

.registration-hero p {
    margin: 4px 0 0;
    color: #686d76;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.registration-wizard {
    display: flex;
    flex-direction: column;
    width: 372px;
    max-width: 100%;
    margin: 0 auto;
}

.registration-auth-flow {
    width: 372px;
    max-width: 100%;
    margin: 0 auto;
}

.registration-auth-flow .registration-step {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.registration-progress {
    display: contents;
}

.registration-progress-item {
    display: flex;
    min-height: 40px;
    padding: 8px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    color: #4a4d54;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}

.registration-progress-item:nth-child(1) {
    order: 1;
}

.registration-progress-item:nth-child(2) {
    order: 3;
}

.registration-progress-item:nth-child(3) {
    order: 4;
}

.registration-progress-item.is-active {
    border: 1px solid #f0f0f1;
    background: #ffffff;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .06), 0 4px 6px -1px rgba(0, 0, 0, .10);
    color: #2c2e32;
    font-weight: 500;
}

.registration-progress-marker {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2c2e32;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.registration-progress-item.is-active .registration-progress-marker {
    background: #0967ff;
}

.registration-progress-item.is-complete .registration-progress-marker {
    background: #00176b;
    font-size: 0;
}

.registration-progress-item.is-complete .registration-progress-marker::after {
    content: "✓";
    font-size: 14px;
    line-height: 1;
}

.registration-step {
    width: 314px;
    max-width: calc(100% - 40px);
    margin: 0 9px 0 41px;
}

.registration-step--phone,
.registration-step--otp-method,
.registration-step--otp {
    order: 2;
}

.registration-step--organization {
    order: 3;
}

.registration-step--profile {
    order: 4;
}

.registration-wizard--step-3 .registration-step--profile {
    order: 2;
}

.registration-wizard--step-4 .registration-progress-item:nth-child(2) {
    order: 2;
}

.registration-wizard--step-5 .registration-progress-item:nth-child(2) {
    order: 2;
}

.registration-wizard--step-5 .registration-progress-item:nth-child(3) {
    order: 3;
}

.registration-wizard--step-5 .registration-step--profile {
    order: 4;
}

.registration-wizard--step-3 .registration-step--profile,
.registration-wizard--step-4 .registration-step--organization,
.registration-wizard--step-5 .registration-step--profile {
    box-sizing: border-box;
    width: 372px;
    max-width: 100%;
    margin: 0;
    padding: 8px 9px 12px 41px;
    border: 1px solid #f0f0f1;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .10);
}

.registration-step--phone .registration-mode-tabs {
    display: flex;
    width: 224px;
    height: 40px;
    margin: 26px auto 28px;
}

.registration-step--phone .registration-mode-tabs .auth-mode-tab {
    font-size: 13px;
}

.registration-step .form_header {
    margin: 0;
    color: #25265a;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
}

.registration-step .form_title,
.registration-step .form_title-otp {
    color: #686d76;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
}

.registration-screen .group-select-input-form {
    gap: 8px;
}

.registration-screen .country-code-button,
.registration-screen .custom-input-wrapper .form-control,
.registration-screen .custom-input-wrapper input[type="text"],
.registration-screen .custom-input-wrapper input[type="email"],
.registration-screen .custom-input-wrapper input[type="tel"] {
    height: 40px;
    border-color: #f0f0f1;
    border-radius: 8px;
    font-size: 12px;
}

.registration-screen .custom-input-wrapper label {
    color: #4a4d54;
    font-size: 12px;
    font-weight: 500;
}

.registration-screen .custom-input-wrapper .form-control:focus,
.registration-screen .custom-input-wrapper input:focus {
    border-color: #0967ff;
    box-shadow: 0 0 0 3px rgba(9, 103, 255, .12);
}

.registration-screen .group-method-getOTP {
    grid-template-columns: 1fr;
    margin-top: 16px;
}

.registration-screen .select-method-getOTP {
    height: 44px;
    border-color: #f0f0f1;
    border-radius: 8px;
    font-size: 13px;
}

.registration-screen .otp-container {
    justify-content: flex-start;
    gap: 6px;
}

.registration-screen .otp-input {
    width: 42px;
    height: 48px;
    border-color: #babcc0;
    border-radius: 8px;
}

.registration-screen .checkbox-container {
    color: #686d76;
    font-size: 12px;
}

.registration-screen .checkbox-container a,
.registration-screen .text-inline {
    color: #0967ff;
}

.registration-screen .btn.ab-btn,
.registration-screen input.btn.ab-btn {
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: #00176b;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.registration-screen .btn.ab-btn:hover,
.registration-screen .btn.ab-btn:focus {
    background: #00145e;
    color: #ffffff;
}

.registration-screen .btn.ab-btn:disabled,
.registration-screen input.btn.ab-btn:disabled {
    background: #b0b7d1;
    color: #ffffff;
    opacity: 1;
}

.registration-wizard .registration-password-fields input.btn.ab-btn {
    width: 100%;
}

@media (max-width: 1023px) {
    body:has(.registration-screen) #kc-container-wrapper {
        min-height: 100vh;
        height: auto;
        padding: 16px;
    }

    body:has(.registration-screen) #kc-left-container {
        width: 100%;
        min-width: 0;
        padding: 0;
    }

    body:has(.registration-screen) #kc-content-wrapper,
    body:has(.registration-screen) #kc-footer-wrapper {
        width: min(512px, 100%);
    }

    body:has(.registration-screen) #kc-right-container,
    body:has(.login-screen) #kc-right-container {
        display: none;
    }

    /*
     * Man dang nhap truoc day giu 2 cot xuong tan 768px, con cac man dang ky an
     * banner tu duoi 1024px. Voi cot trai 592px co dinh thi trong khoang 768-1023px
     * banner chi con 128-384px nen bi bop det. Dong bo breakpoint cho khop dang ky.
     */
    body:has(.login-screen) #kc-left-container {
        width: 100%;
        min-width: 0;
    }

    .registration-screen {
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    body:has(.registration-screen) #kc-container-wrapper {
        padding: 12px;
    }

    .registration-screen {
        padding-top: 12px;
    }

    .registration-brand img {
        width: 100px;
    }

    .registration-wizard,
    .registration-hero {
        width: 100%;
    }

    .registration-step {
        width: calc(100% - 40px);
    }
}

/* Registration wizard: the post-OTP account setup states. */
.registration-wizard {
    width: 372px;
}

.registration-wizard .registration-progress-item {
    min-height: 44px;
    padding: 10px 10px;
    gap: 10px;
    color: #4a4d54;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}

.registration-wizard .registration-progress-marker {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    background: #2c2e32;
    font-size: 12px;
    line-height: 20px;
}

/*
 * The active step is a single elevated card in the reference, but the DOM
 * splits it in two (progress row + step fields) so the collapsed rows can stay
 * in document order. Only the lower half carries the shadow — a shadow on the
 * upper half would paint a seam across the middle of the card.
 */
.registration-wizard .registration-progress-item.is-active {
    min-height: 54px;
    padding: 10px 10px 4px;
    border-color: #f0f0f1;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
    color: #2c2e32;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.registration-wizard .registration-progress-item.is-active .registration-progress-marker {
    background: #0967ff;
}

.registration-wizard .registration-progress-item.is-complete .registration-progress-marker {
    background: #28b83e;
}

.registration-wizard--step-3 .registration-step--profile,
.registration-wizard--step-4 .registration-step--organization,
.registration-wizard--step-5 .registration-step--profile {
    padding: 0 16px 12px 41px;
    border-color: #f0f0f1;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .06), 0 4px 6px -1px rgba(0, 0, 0, .10);
}

.registration-wizard .registration-step-description {
    margin: 0 0 16px !important;
    color: #686d76;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.registration-wizard .registration-step .form-group {
    margin-bottom: 8px;
}

.registration-wizard .custom-input-wrapper {
    display: flex;
    flex-direction: column;
    margin: 0 0 10px;
    padding-top: 0;
}

.registration-wizard .custom-input-wrapper label {
    position: static;
    order: -1;
    display: block;
    margin: 0 0 6px;
    padding: 0;
    transform: none;
    background: transparent;
    color: #2c2e32;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
}

.registration-wizard .custom-input-wrapper .form-control,
.registration-wizard .custom-input-wrapper input[type="text"],
.registration-wizard .custom-input-wrapper input[type="email"],
.registration-wizard .custom-input-wrapper input[type="password"] {
    height: 40px;
    padding: 0 34px 0 10px;
    border: 1px solid #f0f0f1;
    border-radius: 10px;
    background: #ffffff;
    color: #2c2e32;
    font-size: 13px;
    line-height: 18px;
}

.registration-wizard .custom-input-wrapper input.is-filled {
    background: #f7f9fc;
}

.registration-wizard .custom-input-wrapper input::placeholder {
    color: #babcc0;
    opacity: 1;
}

.registration-wizard .custom-input-wrapper input.input-error {
    border-color: #f30c0c;
    box-shadow: none;
}

.registration-wizard .custom-input-wrapper input.input-error:focus {
    border-color: #f30c0c;
    box-shadow: 0 0 0 2px rgba(243, 12, 12, .08);
}

.registration-wizard .registration-field-error-icon {
    position: absolute;
    right: 9px;
    bottom: 12px;
    z-index: 2;
    width: 16px;
    height: 16px;
    background: url('../img/danger.svg') center / 16px 16px no-repeat;
    pointer-events: none;
}

.registration-wizard .registration-field-valid-icon {
    position: absolute;
    right: 102px;
    bottom: 11px;
    z-index: 2;
    display: inline-flex;
    width: 15px;
    height: 15px;
    align-items: center;
    justify-content: center;
    border: 1px solid #28b83e;
    border-radius: 50%;
    background: #fff;
    color: #28b83e;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.registration-wizard .org-group-input>.registration-field-error-icon {
    right: 102px;
}

.registration-screen .registration-wizard .org-group-input>span:not(.registration-field-error-icon):not(.registration-field-valid-icon) {
    right: 0;
    bottom: 11px;
    font-size: 13px;
    font-weight: 400;
}

.registration-wizard .org-group-input input {
    width: calc(100% - 98px) !important;
    padding-right: 34px !important;
}

.registration-wizard .text-danger,
.registration-wizard .registration-field-success {
    margin: -3px 0 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.registration-wizard .text-danger {
    color: #f30c0c;
}

.registration-wizard .registration-field-success {
    color: #28b83e;
}

.registration-wizard .margin-top-10 {
    margin-top: 12px;
}

.registration-wizard .registration-wizard-action {
    display: inline-flex;
    width: auto !important;
    min-width: 0;
    height: 36px !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 12px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.registration-wizard .registration-wizard-action--next>span::after {
    content: "  →";
    font-size: 20px;
    font-weight: 400;
    vertical-align: -1px;
}

.registration-wizard .registration-wizard-action--submit {
    display: flex;
    width: 100% !important;
    margin: 16px 0 10px;
}

.registration-wizard .registration-password-fields .col-xs-12 {
    padding: 0;
}

.registration-wizard .registration-step--organization .col-xs-12 {
    padding: 0;
}

.registration-wizard .registration-password-fields .kc-form-group {
    margin-bottom: 0;
}

.registration-wizard .registration-password-fields .show-password,
.registration-wizard .registration-password-fields .hide-password {
    top: auto;
    right: 8px;
    bottom: 10px;
    width: 18px;
    height: 18px;
    margin: 0;
    background-size: 18px 18px;
}

.registration-wizard .registration-password-fields .custom-input-wrapper.has-field-error .show-password,
.registration-wizard .registration-password-fields .custom-input-wrapper.has-field-error .hide-password {
    right: 8px;
}

.registration-wizard .registration-password-fields .registration-field-error-icon {
    right: 36px;
}

.registration-wizard .checkbox-container.registration-wizard-terms {
    display: block;
    margin: 0;
    color: #4a4d54;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.registration-wizard .registration-wizard-terms .termsCheckbox,
.registration-wizard .registration-wizard-terms a {
    font-weight: 400;
}

.registration-wizard .registration-wizard-terms a {
    color: #0967ff;
    font-weight: 500;
    text-decoration: none;
}

.registration-wizard .registration-wizard-terms a:hover {
    text-decoration: underline;
}

.registration-wizard .registration-password-fields #kc-form-buttons {
    margin: 0;
}

@media (max-width: 575px) {

    .registration-wizard,
    .registration-wizard--step-3 .registration-step--profile,
    .registration-wizard--step-4 .registration-step--organization,
    .registration-wizard--step-5 .registration-step--profile {
        width: 100%;
    }
}

/* OTP channel selection — matches the compact 1440px registration reference. */
.registration-step--otp-method .registration-otp-method-intro {
    margin: 0 0 28px;
    text-align: center;
}

.registration-step--otp-method .registration-otp-method-intro h2 {
    margin: 0;
    color: #2c2e32;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
}

.registration-step--otp-method .registration-otp-method-intro p {
    margin: 4px 0 0;
    color: #686d76;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.registration-step--otp-method .registration-otp-method-intro strong {
    color: #2c2e32;
    font-weight: 500;
}

.registration-step--otp-method .registration-otp-method-error {
    margin: -16px 0 12px;
    color: #f30c0c;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
}

.registration-step--otp-method .group-method-getOTP {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.registration-step--otp-method .select-method-getOTP {
    position: relative;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    justify-content: flex-start;
    gap: 0;
    border: 1px solid #f0f0f1;
    border-radius: 12px;
    background: #ffffff;
    color: #4a4d54;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
}

.registration-step--otp-method .select-method-getOTP:hover:not(:disabled) {
    border-color: #0967ff;
    background: #ffffff;
}

.registration-step--otp-method .select-method-getOTP.is-selected {
    border-color: #0967ff;
    box-shadow: 0 0 0 3px rgba(57, 105, 227, .2);
    color: #2c2e32;
    font-weight: 500;
}

.registration-step--otp-method .select-method-getOTP:disabled {
    color: #9b9da3;
    background: #fafafa;
}

.registration-step--otp-method .select-method-getOTP>div {
    width: 20px;
    height: 20px;
    margin: 0 4px 0 0;
    flex: 0 0 20px;
}

.registration-step--otp-method .otp-method-radio {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    border: 1px solid #babcc0;
    border-radius: 50%;
}

.registration-step--otp-method .is-selected .otp-method-radio {
    border: 6px solid #00176b;
}

.registration-step--otp-method .registration-otp-send {
    width: 100%;
    height: 44px;
    margin-top: 32px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: #00176b;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.registration-step--otp-method .registration-otp-send:hover:not(:disabled) {
    background: #00145e;
}

.registration-step--otp-method .registration-otp-send:disabled {
    background: #b0b7d1;
    cursor: not-allowed;
}

/* OTP verification — default, focus, filled, loading and invalid-code states. */
.registration-step--otp .registration-otp-intro {
    margin: 0;
    text-align: center;
}

.registration-step--otp .registration-otp-intro h2 {
    margin: 0;
    color: #2c2e32;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
}

.registration-step--otp .registration-otp-intro p {
    margin: 4px 0 0;
    color: #686d76;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.registration-step--otp .registration-otp-intro strong {
    color: #2c2e32;
    font-weight: 500;
}

.registration-step--otp .registration-otp-form {
    width: 100%;
}

.registration-step--otp .otp-container {
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.registration-step--otp .otp-input,
.registration-screen .registration-step--otp .otp-input {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #d0d2d5;
    border-radius: 12px;
    background: #ffffff;
    color: #2c2e32;
    font-family: inherit;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-align: center;
    caret-color: #17191c;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.registration-step--otp .otp-input:focus,
.registration-screen .registration-step--otp .otp-input:focus {
    border: 2px solid #0967ff;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(56, 106, 255, .15);
}

.registration-step--otp .otp-input.input-error,
.registration-screen .registration-step--otp .otp-input.input-error {
    border-color: #f30c0c;
    box-shadow: none;
}

.registration-step--otp .registration-otp-error {
    min-height: 16px;
    margin: 12px 0 0;
    color: #f30c0c;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
}

.registration-step--otp .registration-otp-action {
    margin-top: 32px;
}

.registration-step--otp .registration-otp-error+.registration-otp-action {
    margin-top: 12px;
}

.registration-step--otp .registration-otp-confirm {
    display: inline-flex;
    width: 100%;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: #00176b;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.registration-step--otp .registration-otp-confirm:disabled {
    background: #b0b7d1;
    color: #ffffff;
    cursor: not-allowed;
}

.registration-step--otp .registration-otp-confirm:not(:disabled):hover {
    background: #00145e;
}

.registration-otp-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 103, 255, .28);
    border-top-color: #0967ff;
    border-radius: 50%;
    animation: registration-otp-spin .8s linear infinite;
}

@keyframes registration-otp-spin {
    to {
        transform: rotate(360deg);
    }
}

.registration-step--otp .registration-otp-resend {
    margin: 12px 0 0;
    color: #444b57;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
}

.registration-step--otp .registration-otp-resend strong {
    color: #2c2e32;
    font-weight: 500;
}

.registration-step--otp .registration-otp-resend a,
.registration-step--otp .registration-otp-resend button {
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0967ff;
    font: inherit;
    font-weight: 500;
    text-decoration: none;
}

.registration-step--otp .registration-otp-resend a:hover,
.registration-step--otp .registration-otp-resend button:hover {
    color: #00176b;
    text-decoration: underline;
}

.registration-step--otp .registration-otp-lock {
    text-align: center;
}

.registration-step--otp .registration-otp-lock h2 {
    margin: 0;
    color: #2c2e32;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
}

.registration-step--otp .registration-otp-lock>p:not(.registration-otp-lock-help) {
    margin: 4px 0 0;
    color: #686d76;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.registration-step--otp .registration-otp-lock-timer {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 32px 0;
}

.registration-step--otp .registration-otp-lock-timer span {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d0d2d5;
    border-radius: 12px;
    background: #ffffff;
    color: #b0b7d1;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.registration-step--otp .registration-otp-lock-timer i {
    color: #b0b7d1;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.registration-step--otp .registration-otp-lock-timer.is-active span {
    border-color: #f30c0c;
    background: #ffffff;
    color: #f30c0c;
}

.registration-step--otp .registration-otp-lock-timer.is-active i {
    color: #f30c0c;
}

.registration-step--otp .registration-otp-lock-resend {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: #00176b;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.registration-step--otp .registration-otp-lock-resend:disabled {
    background: #b0b7d1;
    cursor: not-allowed;
}

.registration-step--otp .registration-otp-lock-resend:not(:disabled):hover {
    background: #00145e;
}

.registration-step--otp .registration-otp-lock-help {
    margin: 12px 0 0;
    color: #444b57;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}

.registration-step--otp .registration-otp-lock-help a {
    color: #0967ff;
    font-weight: 500;
    text-decoration: none;
}

.registration-step--otp .registration-otp-lock-help a:hover {
    color: #00176b;
    text-decoration: underline;
}

/* Registration contact step — compact field and social sign-in layout. */
.registration-content.registration-screen--step-0 .registration-hero {
    margin-bottom: 32px;
}

.registration-step--phone .registration-mode-tabs {
    width: 224px;
    height: 40px;
    margin: 0 auto 32px;
    padding: 2px;
    border-radius: 10px;
}

.registration-step--phone .registration-mode-tabs .auth-mode-tab {
    font-size: 13px;
}

.registration-step--phone .registration-phone-field {
    margin: 0;
}

.registration-step--phone .registration-phone-field>label {
    display: block;
    margin: 0 0 4px;
    color: #2c2e32;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.registration-step--phone .registration-phone-control {
    position: relative;
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    border: 1px solid #f0f0f1;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.registration-step--phone .registration-phone-control:focus-within {
    border: 2px solid #0967ff;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(56, 106, 255, .15);
}

.registration-step--phone .registration-phone-control.has-error {
    border-color: #f30c0c;
    background: #ffffff;
}

.registration-step--phone .registration-phone-control.has-error:focus-within {
    border-color: #f30c0c;
    box-shadow: none;
}

.registration-step--phone .registration-phone-prefix {
    display: inline-flex;
    height: 100%;
    align-items: center;
    padding: 0 0 0 8px;
    color: #2c2e32;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    white-space: nowrap;
}

.registration-step--phone .registration-phone-control input,
.registration-screen .registration-step--phone .registration-phone-control input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 36px 0 4px;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: #2c2e32;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}

.registration-step--phone .registration-phone-control input::placeholder {
    color: #babcc0;
    opacity: 1;
}

.registration-step--phone .registration-phone-error-icon {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: url('../img/danger.svg') center / 16px 16px no-repeat;
    pointer-events: none;
}

.registration-step--phone .registration-phone-action {
    margin-top: 32px;
}

.registration-step--phone .text-danger {
    margin-top: 4px !important;
    color: #f30c0c;
    font-size: 12px;
    line-height: 16px;
}

.registration-step--phone .registration-phone-continue {
    display: inline-flex;
    width: 100%;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: #00176b;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.registration-step--phone .registration-phone-continue>span:last-child {
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    /* Cung ly do nhu mui ten o nut quay lai: can giua net ve chu khong phai hop chu. */
    transform: translateY(-0.175em);
}

.registration-step--phone .registration-phone-continue:disabled {
    background: #b0b7d1;
    color: #ffffff;
    cursor: not-allowed;
}

.registration-step--phone .registration-phone-continue:not(:disabled):hover {
    background: #00145e;
}

.registration-step--phone .registration-divider {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 20px 0;
    color: #686d76;
    font-size: 12px;
    line-height: 16px;
}

.registration-step--phone .registration-divider::before,
.registration-step--phone .registration-divider::after {
    height: 1px;
    flex: 1;
    background: #f0f0f1;
    content: '';
}

.registration-step--phone .registration-divider>span {
    padding: 0;
}

ul.registration-social-login {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.registration-step--phone .registration-social-login {
    margin-top: 0;
}

.registration-step--phone .registration-social-login li {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #f0f0f1;
    border-radius: 8px;
    background: #f7f9fc;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.registration-step--phone .registration-social-login li a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.registration-step--phone .registration-terms {
    max-width: 372px;
    margin: 32px auto 0;
    color: #4a4d54;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
}

.registration-step--phone .registration-terms a {
    color: #0967ff;
    font-weight: 500;
    text-decoration: none;
}

.registration-step--phone .registration-terms a:hover {
    color: #00176b;
    text-decoration: underline;
}

@media (max-width: 575px) {
    .registration-step--otp .otp-container {
        gap: 6px;
    }
}

/* ==========================================================================
   Onboarding sau khi dang ky bang social (Google/Microsoft) - FR-UPD-002.
   Tai dung lai khung .registration-screen cua register.ftl; phan ben duoi chi
   bu cac cho thiet ke khac voi luong tu dang ky.
   ========================================================================== */

.registration-content>#kc-idp-onboarding-form {
    margin-bottom: auto;
}

/* Man "Xac thuc tai khoan" khong co prefix ma quoc gia truoc o input, nen tra
   lai padding ngang cua Input Field trong thiet ke (8px inset + 4px content). */
.registration-step--idp-phone .registration-phone-control input,
.registration-screen .registration-step--idp-phone .registration-phone-control input {
    padding-left: 12px;
}

/* Man "Thiet lap cong ty": label nam tren input, hau to ten mien nam ngoai o. */
.registration-step--idp-company .idp-company-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.registration-step--idp-company .idp-field>label {
    display: block;
    margin: 0 0 4px;
    color: #2c2e32;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.registration-step--idp-company .idp-field-control {
    position: relative;
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    border: 1px solid #f0f0f1;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.registration-step--idp-company .idp-field-control:focus-within {
    border: 2px solid #0967ff;
    box-shadow: 0 0 0 4px rgba(56, 106, 255, .15);
}

.registration-step--idp-company .idp-field-control.has-error,
.registration-step--idp-company .idp-field-control.has-error:focus-within {
    border: 1px solid #f30c0c;
    box-shadow: none;
}

.registration-step--idp-company .idp-field-control input,
.registration-screen .registration-step--idp-company .idp-field-control input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 32px 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: #2c2e32;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}

.registration-step--idp-company .idp-field-control input::placeholder {
    color: #babcc0;
    opacity: 1;
}

.registration-step--idp-company .idp-field-error-icon {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: url('../img/danger.svg') center / 16px 16px no-repeat;
    pointer-events: none;
}

.registration-step--idp-company .idp-domain-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.registration-step--idp-company .idp-domain-suffix {
    display: inline-flex;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    color: #2c2e32;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
}

.registration-step--idp-company .text-danger {
    margin-top: 4px !important;
    color: #f30c0c;
    font-size: 12px;
    line-height: 16px;
}

.registration-step--idp-company .idp-field-success {
    margin-top: 4px;
    color: #28b83e;
    font-size: 12px;
    line-height: 16px;
}

.registration-step--idp-company .idp-company-action {
    margin-top: 32px;
}

.registration-step--idp-company .idp-company-submit {
    display: inline-flex;
    width: 100%;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: #00176b;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.registration-step--idp-company .idp-company-submit:disabled {
    background: #b0b7d1;
    cursor: not-allowed;
}

.registration-step--idp-company .idp-company-submit:not(:disabled):hover {
    background: #00145e;
}

.idp-onboarding .idp-onboarding-terms {
    margin: 12px 0 0;
    color: #4a4d54;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
}

.idp-onboarding .idp-onboarding-terms a {
    color: #0967ff;
    font-weight: 500;
    text-decoration: none;
}

.idp-onboarding .idp-onboarding-terms a:hover {
    color: #00176b;
    text-decoration: underline;
}

/* ==========================================================================
   Toast "Dang ky thanh cong!" tren man dang nhap (frame cuoi cua FR-UPD-002).
   ========================================================================== */

.ab-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1100;
    display: flex;
    width: 400px;
    max-width: calc(100vw - 32px);
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border: 1px solid #9cdea6;
    border-radius: 12px;
    background: #eaf8ec;
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
    font-family: Inter, Roboto, Arial, sans-serif;
}

/* Hop 20px theo layout, net ve 32px tran ra ngoai dung nhu trong thiet ke. */
.ab-toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ab-toast-icon>img {
    display: block;
    width: 32px;
    height: 32px;
    margin: -6px;
}

.ab-toast-body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding-right: 32px;
}

.ab-toast-title {
    margin: 0;
    color: #2c2e32;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.ab-toast-text {
    margin: 0;
    color: #4a4d54;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.ab-toast-close {
    position: absolute;
    top: 7px;
    right: 9px;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.ab-toast-close>img {
    display: block;
    width: 11.6667px;
    height: 11.6667px;
}

@media (max-width: 575px) {
    .ab-toast {
        top: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

/* ==========================================================================
   FR-UPD-012 - Quen mat khau (Lay lai mat khau / Dat mat khau moi).
   Tai dung khung .registration-screen cua register.ftl va cac o nhap .auth-*
   cua man dang nhap; phan ben duoi chi bu cac cho thiet ke khac hai luong do.
   ========================================================================== */

.reset-password-screen .registration-content>.reset-password-flow {
    margin-bottom: auto;
}

/* Tab Email / So dien thoai: 240px, hai tab chia deu, khoang cach 4px. */
.reset-method-tabs {
    display: flex;
    width: 240px;
    max-width: 100%;
    margin: 0 auto 32px;
    gap: 4px;
}

.reset-method-tab {
    display: inline-flex;
    flex: 1 0 0;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #4a4d54;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.reset-method-tab--active {
    border-color: #e2e7f1;
    background: #f7f9fc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    color: #2c2e32;
    font-weight: 500;
}

/*
 * Icon tab lay tu thiet ke, to mau bang mask de doi theo mau chu cua tab
 * (dang chon #2c2e32, con lai #4a4d54). Hop icon 16px; net ve giu dung kich
 * thuoc thiet ke - mail phu kin 16px, dien thoai 11.6655px can giua.
 */
.reset-method-tab-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.reset-method-tab-icon--email {
    -webkit-mask-image: url('../img/icon-mail-16.svg');
    mask-image: url('../img/icon-mail-16.svg');
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

.reset-method-tab-icon--phone {
    -webkit-mask-image: url('../img/icon-phone-16.svg');
    mask-image: url('../img/icon-phone-16.svg');
    -webkit-mask-size: 11.6655px 11.6657px;
    mask-size: 11.6655px 11.6657px;
}

/* O nhap theo do do cua thiet ke: nhan 13px, o cao 40px, vien #f0f0f1. */
.reset-password-screen .reset-field {
    margin-bottom: 0;
}

.reset-password-screen .reset-field>label {
    margin: 0 0 4px;
    font-size: 13px;
}

.reset-password-screen .auth-field input {
    border-color: #f0f0f1;
    font-size: 13px;
    line-height: 18px;
}

.reset-password-screen .auth-field input::placeholder {
    color: #babcc0;
    opacity: 1;
}

.reset-password-screen .auth-field input:focus {
    border: 2px solid #0967ff;
    box-shadow: 0 0 0 4px rgba(56, 106, 255, .15);
}

.reset-password-screen .auth-field--invalid input,
.reset-password-screen .auth-field--invalid input:focus {
    border: 1px solid #f30c0c;
    box-shadow: none;
}

/*
 * Thiet ke dung icon canh bao tam giac (vuesax/bold/danger) - dung lai danger.svg
 * san co cua luong dang ky, khong phai IconAlert.svg hinh tron cua man dang nhap.
 */
.reset-password-screen .auth-field-alert-icon {
    right: 8px;
    background-image: url('../img/danger.svg');
}

/*
 * Thiet ke xep icon sat le phai: 8px inset - mat 16px - cach 4px - canh bao 16px.
 */
.reset-password-screen .auth-password-control .auth-field-alert-icon {
    right: 28px;
}

/*
 * Thiet ke hien mat GACH CHEO khi mat khau dang bi an (bam vao de hien) - nguoc
 * chieu voi man dang nhap dang dung mat thuong. Ca hai asset deu la #686d76 san co.
 */
.reset-password-screen .auth-password-toggle {
    top: 50%;
    right: 8px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background-image: url('../img/IconPW.svg');
    background-size: 16px 16px;
}

.reset-password-screen .auth-password-toggle--visible {
    background-image: url('../img/IconSPW.svg');
}

.reset-password-screen .auth-password-control input {
    padding-right: 32px;
}

.reset-password-screen .auth-field--invalid .auth-password-control input {
    padding-right: 52px;
}

.reset-password-screen .auth-form-error {
    min-height: 0;
    margin: 4px 0 0;
}

.reset-password-screen .auth-form-success {
    margin: 4px 0 0;
    color: #28b83e;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

/* Nut chinh: bo goc 8px va chu 500 theo thiet ke (man dang nhap dung 9px/600). */
.reset-password-screen .reset-submit {
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    font-weight: 500;
}

.reset-password-screen .reset-identify-action,
.reset-password-screen .reset-password-action {
    margin-top: 32px;
}

.reset-password-screen .reset-account-question {
    margin: 12px 0 0;
    color: #4a4d54;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
}

.reset-password-screen .reset-account-question a {
    color: #0967ff;
    font-weight: 500;
    text-decoration: none;
}

.reset-password-screen .reset-account-question a:hover,
.reset-password-screen .reset-account-question a:focus {
    text-decoration: underline;
}

.reset-password-screen .reset-password-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reset-password-screen .reset-terms {
    margin: 16px 0 0;
    line-height: 16px;
}

.reset-password-screen .reset-submit-error {
    margin: 0 0 8px;
    text-align: center;
}