body {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}

a,
a:link,
a:visited,
a:hover {
    text-decoration: none;
    color: #009981;
}
.login-container {
    display: flex;
    flex-direction: column;
}

.login-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: auto;
    min-height: 550px;
    width: 100%;
    justify-content: center;
}

.login-welcome {
    font-size: 18px;
    font-weight: 700;
}

login-welcome strong {
    font-size: 18px;
    font-weight: 700;
}

.login-input {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.login-control {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-text-field, .login-input input {
    border: 1px solid #C9C9C9;
    padding: 0 12px;
    border-radius: 5px;
    height: 42px;
    font-size: 14px;
    font-family: 'Inter';
}

    .login-input input[type=checkbox], .login-input input[type=radio] {
        height: unset;
    }

.login-button, .login-input button {
    background: rgba(0, 153, 129, 1);
    border: 0;
    color: #fff;
    height: 44px;
    border-radius: 5px;
    font-weight: 600;
}

.login-username {
    color: #009981;
    font-size: 18px;
    font-weight: 700;
}

.text-underline {
    text-decoration: underline !important;
}

.password-container {
    position: relative;
    display: flex;
}

    .password-container input {
        width: 100%;
    }

    .password-container i {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        font-size: 18px;
        color: #888;
        cursor: pointer;
    }

.text-separator {
    align-items: center;
    text-align: center;
    color: #757575;
    display: flex;
}

    .text-separator::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid #ddd;
        margin: 0 0 0 10px;
    }

    .text-separator::before {
        content: "";
        flex: 1;
        border-bottom: 1px solid #ddd;
        margin: 0 10px 0 0;
    }

.external-form .facebook {
    background: #1877F2;
    color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 5px;
    border: 1px solid #1877F2;
    color: #FFF;
    line-height: 40px;
    cursor: pointer;
    font-weight: 600;
}

    .external-form .facebook:hover {
        background: #0355BE;
    }

.external-form .google {
    background: #fff;
    color: rgba(117, 117, 117, 1);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid #C9C9C9;
    border-radius: 5px;
    color: #757575;
    line-height: 40px;
    cursor: pointer;
    font-weight: 600;
}

    .external-form .google:hover {
        background: #EBEBEB;
    }

.external-form .zalo {
    background: #006AF5;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 5px;
    border: 1px solid #006AF5;
    color: #fff;
    line-height: 40px;
    cursor: pointer;
    font-weight: 600;
}

    .external-form .zalo:hover {
        background: #005BD1;
    }

.external-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 24px 0;
    font-size: 13px;
    font-weight: 600;
    justify-content: space-around;
}

    .external-form img {
        width: 24px;
        height: 24px;
    }

.login-input a {
    color: #009981;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.login-input .message {
    color: #FD475A;
    font-size: 12px;
    font-weight: 400;
}

.login-input .error {
    border: 1px solid #FD475A;
    background: #FFDADE;
}

.login-input .btn-success:hover {
    background: #006555;
    color: #fff;
    cursor: pointer;
}

.login-input .btn-success:active {
}

.login-input .complete-info {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .login-input .complete-info > div {
        font-size: 13px;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }