:root {
    --kwsm-login-blue: #0c63ce;
    --kwsm-login-blue-dark: #073f97;
    --kwsm-login-blue-deep: #052a6f;
    --kwsm-login-orange: #ff6b21;
    --kwsm-login-text: #13213b;
    --kwsm-login-muted: #66738d;
    --kwsm-login-border: #d8e1ee;
    --kwsm-login-field: #f8fbff;
    --kwsm-login-shadow: 0 28px 80px rgba(5, 31, 82, 0.22);
    --kwsm-login-bg-image: linear-gradient(90deg, rgba(3, 30, 88, 0.38), rgba(5, 62, 162, 0.06) 52%, rgba(2, 32, 99, 0.34)), url("login/itcviet-bg.png");
    --kwsm-login-user-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238390a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    --kwsm-login-lock-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238390a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    --kwsm-login-submit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 17 5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
}

body.login,
.kwsm-login-public-body {
    min-height: 100vh;
    margin: 0;
    background-color: var(--kwsm-login-blue-dark);
    background-image: var(--kwsm-login-bg-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: var(--kwsm-login-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.kwsm-login-page {
    display: grid;
    grid-template-columns: minmax(280px, 560px) minmax(380px, 460px);
    gap: clamp(32px, 6vw, 84px);
    width: min(1104px, calc(100vw - 64px));
    min-height: 100vh;
    margin: 0 auto;
    align-items: center;
    align-content: center;
}

.kwsm-login-visual {
    align-self: stretch;
    min-height: 0;
    position: relative;
}

.kwsm-login-welcome {
    position: absolute;
    left: max(calc(clamp(12px, 4vw, 54px) - 250px), calc(-1 * ((100vw - 1104px) / 2) + 62px));
    bottom: 0;
    color: #fff;
    text-shadow: 0 14px 30px rgba(0, 22, 70, 0.38);
}

.kwsm-login-welcome span,
.kwsm-login-welcome strong,
.kwsm-login-welcome p {
    display: block;
}

.kwsm-login-welcome span {
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 500;
    line-height: 1.1;
}

.kwsm-login-welcome strong {
    margin-top: 6px;
    font-size: clamp(54px, 6.4vw, 86px);
    font-weight: 850;
    line-height: 0.96;
}

.kwsm-login-welcome em {
    color: var(--kwsm-login-orange);
    font-style: normal;
}

.kwsm-login-welcome p {
    margin: 14px 0 0;
    font-size: clamp(17px, 1.8vw, 23px);
    font-weight: 500;
}

.kwsm-login-welcome::after {
    content: "";
    display: block;
    width: 96px;
    height: 4px;
    margin-top: 24px;
    border-radius: 999px;
    background: var(--kwsm-login-orange);
}

.kwsm-login-card {
    width: 100%;
    box-sizing: border-box;
    padding: clamp(30px, 4vw, 48px);
    border: 1px solid rgba(216, 225, 238, 0.92);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--kwsm-login-shadow);
    transform: translateY(30px);
}

.kwsm-login-logo {
    display: block;
    width: min(190px, 58%);
    height: auto;
    margin: 0 auto 22px;
}

.kwsm-login-card h1 {
    margin: 0;
    color: #123f8f;
    font-size: clamp(25px, 2.3vw, 32px);
    line-height: 1.18;
    text-align: center;
    letter-spacing: 0;
}

.kwsm-login-subtitle {
    margin: 12px 0 22px;
    color: var(--kwsm-login-muted);
    font-size: 15px;
    line-height: 1.55;
    text-align: center;
}

.kwsm-login-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 18px;
    padding: 5px;
    border: 1px solid #e2e9f3;
    border-radius: 12px;
    background: #f4f7fb;
}

.kwsm-login-tabs a {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #63718a;
    font-size: 13px;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
}

.kwsm-login-tabs a.is-active {
    background: #fff;
    color: var(--kwsm-login-blue-dark);
    box-shadow: 0 7px 20px rgba(12, 99, 206, 0.12);
}

.kwsm-login-card #loginform,
.kwsm-login-card p {
    margin-top: 0;
}

.kwsm-login-card .login-username,
.kwsm-login-card .login-password {
    margin: 0 0 12px;
}

.kwsm-login-card .login-password {
    margin-bottom: 14px;
}

.kwsm-login-card .login-username label,
.kwsm-login-card .login-password label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kwsm-login-card input[type="text"],
.kwsm-login-card input[type="password"] {
    width: 100%;
    min-height: 52px;
    margin-top: 0;
    padding: 0 15px;
    border: 1px solid var(--kwsm-login-border);
    border-radius: 9px;
    box-sizing: border-box;
    background: #fff;
    color: var(--kwsm-login-text);
    font-size: 15px;
    line-height: 52px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kwsm-login-card #user_login,
.kwsm-login-card #user_pass {
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 18px 18px;
    padding-left: 46px;
}

.kwsm-login-card #user_login {
    background-image: var(--kwsm-login-user-icon);
}

.kwsm-login-card #user_pass {
    background-image: var(--kwsm-login-lock-icon);
    padding-right: 48px;
}

.kwsm-login-card input[type="text"]:focus,
.kwsm-login-card input[type="password"]:focus {
    border-color: var(--kwsm-login-blue);
    box-shadow: 0 0 0 4px rgba(12, 99, 206, 0.13);
}

.kwsm-login-card .login-remember {
    margin: 0 0 18px;
}

.kwsm-login-card .login-remember label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #65738d;
    font-size: 14px;
    font-weight: 600;
}

.kwsm-login-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid #cfd8e6;
    border-radius: 4px;
}

.kwsm-login-card .login-submit {
    margin: 0;
}

.kwsm-login-card .button-primary,
.kwsm-login-submit-link {
    display: inline-flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background-color: #075bc4;
    background-image: var(--kwsm-login-submit-icon), linear-gradient(180deg, #116fe0, #075bc4);
    background-repeat: no-repeat, no-repeat;
    background-position: calc(50% - 58px) center, center center;
    background-size: 18px 18px, 100% 100%;
    box-shadow: 0 15px 28px rgba(12, 99, 206, 0.24);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    text-shadow: none;
    transition: box-shadow 0.16s ease, background-color 0.16s ease, background-image 0.16s ease;
}

.kwsm-login-card .button-primary:hover,
.kwsm-login-card .button-primary:focus,
.kwsm-login-submit-link:hover,
.kwsm-login-submit-link:focus {
    background-color: #064fae;
    background-image: var(--kwsm-login-submit-icon), linear-gradient(180deg, #0d64cf, #064fae);
    background-repeat: no-repeat, no-repeat;
    background-position: calc(50% - 58px) center, center center;
    background-size: 18px 18px, 100% 100%;
    color: #fff;
    box-shadow: 0 18px 34px rgba(7, 91, 196, 0.3);
    transform: none;
}

.kwsm-login-social {
    margin-top: 18px;
}

.kwsm-login-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 13px;
    color: #8792a6;
    font-size: 13px;
    text-align: center;
}

.kwsm-login-divider::before,
.kwsm-login-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e4e9f1;
}

.kwsm-login-social-button {
    display: flex;
    width: 100%;
    min-height: 47px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 10px;
    border: 1px solid var(--kwsm-login-border);
    border-radius: 8px;
    background: #fff;
    color: #253653;
    font-size: 14px;
    font-weight: 750;
    opacity: 0.82;
    cursor: not-allowed;
}

.kwsm-login-social-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 900;
}

.kwsm-login-social-google {
    color: inherit;
    background: transparent;
}

.kwsm-login-social-google svg {
    display: block;
    width: 18px;
    height: 18px;
}

.kwsm-login-social-facebook {
    color: #fff;
    background: #1877f2;
    font-family: Arial, sans-serif;
}

.kwsm-login-social p {
    margin: 6px 0 0;
    color: #7b879b;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.kwsm-login-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: center;
    margin-top: 18px;
    color: #7a869a;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.kwsm-login-links a {
    color: var(--kwsm-login-orange);
    font-weight: 750;
    text-decoration: none;
}

.kwsm-login-links a:last-child {
    color: var(--kwsm-login-blue);
}

body.login {
    display: grid;
    grid-template-columns: minmax(280px, 560px) minmax(380px, 460px);
    gap: clamp(32px, 6vw, 84px);
    min-height: 100vh;
    box-sizing: border-box;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 32px clamp(40px, 7vw, 128px);
    overflow-y: auto;
    overflow-x: hidden;
}

body.login .kwsm-wp-login-visual {
    align-self: stretch;
    min-height: 0;
    position: relative;
}

body.login .kwsm-wp-login-welcome {
    position: absolute;
    left: max(calc(clamp(0px, 3vw, 48px) - 250px), calc(-1 * ((100vw - 1104px) / 2) + 62px));
    bottom: 0;
    color: #fff;
    text-shadow: 0 14px 30px rgba(0, 22, 70, 0.38);
}

body.login .kwsm-wp-login-welcome span,
body.login .kwsm-wp-login-welcome strong,
body.login .kwsm-wp-login-welcome p {
    display: block;
}

body.login .kwsm-wp-login-welcome span {
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 500;
    line-height: 1.1;
}

body.login .kwsm-wp-login-welcome strong {
    margin-top: 6px;
    font-size: clamp(54px, 6.4vw, 86px);
    font-weight: 850;
    line-height: 0.96;
}

body.login .kwsm-wp-login-welcome em {
    color: var(--kwsm-login-orange);
    font-style: normal;
}

body.login .kwsm-wp-login-welcome p {
    margin: 14px 0 0;
    font-size: clamp(17px, 1.8vw, 23px);
    font-weight: 500;
}

body.login .kwsm-wp-login-welcome::after {
    content: "";
    display: block;
    width: 96px;
    height: 4px;
    margin-top: 24px;
    border-radius: 999px;
    background: var(--kwsm-login-orange);
}

body.login #login {
    box-sizing: border-box;
    width: min(460px, calc(100vw - 64px));
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(216, 225, 238, 0.92);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--kwsm-login-shadow);
    overflow: hidden;
    transform: translateX(80px) translateY(30px);
}

body.login #login *,
body.login #login *::before,
body.login #login *::after {
    box-sizing: border-box;
}

body.login .kwsm-login-card-shell {
    display: block;
}

body.login .kwsm-login-card-top {
    padding: 22px 30px 10px;
    border-bottom: 1px solid #e6edf6;
    text-align: center;
}

body.login .kwsm-login-card-body {
    padding: 18px 30px 12px;
}

body.login .kwsm-login-card-footer {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 0 30px 20px;
}

body.login #login h1,
body.login #login .wp-login-logo {
    margin: 0;
}

body.login #login h1 a {
    display: block;
    width: 158px;
    height: 78px;
    margin: 0 auto 10px;
    padding: 0;
    background-image: url("login/itcviet-logo.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    color: transparent;
    text-indent: -9999px;
    outline: none;
}

body.login #login > form,
body.login #loginform,
body.login .kwsm-login-intro,
body.login #login_error,
body.login .message,
body.login .success {
    box-sizing: border-box;
}

body.login #login > form,
body.login #loginform {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.login #loginform > p:not(.submit):not(.forgetmenot) {
    margin: 0 0 12px;
}

body.login .kwsm-login-intro {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

body.login .kwsm-login-intro img {
    display: none;
}

body.login .kwsm-login-intro h2 {
    margin: 0;
    color: #123f8f;
    font-size: 25px;
    line-height: 1.2;
}

body.login .kwsm-login-intro p {
    margin: 7px 0 0;
    color: var(--kwsm-login-muted);
    font-size: 14px;
    line-height: 1.55;
}

body.login #loginform label[for="user_login"],
body.login #loginform .user-pass-wrap > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.login #loginform label {
    color: var(--kwsm-login-text);
    font-size: 14px;
    font-weight: 700;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    border: 1px solid var(--kwsm-login-border);
    border-radius: 9px;
    background: #fff;
    box-shadow: none;
    color: var(--kwsm-login-text);
    font-size: 15px;
}

body.login #user_login,
body.login #user_pass {
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 18px 18px;
    padding-left: 44px;
}

body.login #user_login {
    background-image: var(--kwsm-login-user-icon);
}

body.login #user_pass {
    background-image: var(--kwsm-login-lock-icon);
}

body.login input::placeholder {
    color: #8b97aa;
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
    border-color: var(--kwsm-login-blue);
    box-shadow: 0 0 0 4px rgba(12, 99, 206, 0.13);
}

body.login .user-pass-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 0 14px;
}

body.login .wp-pwd {
    width: 100%;
    max-width: 100%;
    position: relative;
}

body.login .wp-pwd input[type="password"] {
    padding-right: 48px;
}

body.login .button.wp-hide-pw {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--kwsm-login-blue);
}

body.login .forgetmenot {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
}

body.login #loginform p.forgetmenot {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

body.login .kwsm-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 16px;
}

body.login .kwsm-login-options .wp-login-lost-password {
    order: 2;
    margin-left: auto;
    color: var(--kwsm-login-blue);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

body.login .kwsm-login-options .forgetmenot label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #536179;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

body.login .kwsm-login-options .forgetmenot {
    order: 1;
}

body.login p.submit {
    margin: 0;
    padding: 0;
}

body.login .button-primary {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background-color: #075bc4;
    background-image: var(--kwsm-login-submit-icon), linear-gradient(180deg, #116fe0, #075bc4);
    background-repeat: no-repeat, no-repeat;
    background-position: calc(50% - 58px) center, center center;
    background-size: 18px 18px, 100% 100%;
    box-shadow: 0 15px 28px rgba(12, 99, 206, 0.24);
    font-weight: 800;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
    background-color: #064fae;
    background-image: var(--kwsm-login-submit-icon), linear-gradient(180deg, #0d64cf, #064fae);
    background-repeat: no-repeat, no-repeat;
    background-position: calc(50% - 58px) center, center center;
    background-size: 18px 18px, 100% 100%;
    color: #fff;
    text-shadow: none;
    transform: none;
}

body.login #nav,
body.login #backtoblog,
body.login .privacy-policy-page-link {
    width: auto;
    margin: 0;
    padding: 0;
    text-align: center;
}

body.login a,
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
    color: var(--kwsm-login-blue);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-shadow: none;
}

body.login #backtoblog a,
body.login .privacy-policy-page-link a {
    color: #536179;
}

body.login .kwsm-login-social-footer {
    width: 100%;
    margin: 0;
}

body.login > .kwsm-login-social-footer,
body.login > .language-switcher {
    display: none;
}

body.login .kwsm-login-social-footer .kwsm-login-social {
    margin: 0;
    padding: 0 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.login .kwsm-login-divider {
    margin-bottom: 9px;
}

body.login .kwsm-login-social-button {
    min-height: 42px;
    margin-bottom: 8px;
}

body.login .kwsm-login-social p {
    margin-top: 2px;
}

body.login #login_error,
body.login .message,
body.login .success {
    width: 100%;
    margin: 0 0 16px;
    border-left-color: var(--kwsm-login-orange);
    border-radius: 10px;
    box-shadow: none;
}

body.login .language-switcher {
    width: 100%;
    margin: 0;
    padding: 4px 0 0;
}

body.login .language-switcher form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.login .language-switcher label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #536179;
}

body.login .language-switcher select {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--kwsm-login-border);
    border-radius: 8px;
    background-color: #fff;
    color: var(--kwsm-login-text);
    font-size: 13px;
}

body.login .language-switcher .button {
    min-height: 36px;
    border-color: var(--kwsm-login-border);
    border-radius: 8px;
    background: #f7f9fc;
    color: var(--kwsm-login-blue);
    font-size: 13px;
    font-weight: 750;
}

@media (max-width: 1020px) {
    .kwsm-login-page {
        grid-template-columns: 1fr;
        width: min(520px, calc(100vw - 36px));
        padding: 32px 0;
    }

    .kwsm-login-visual {
        min-height: auto;
    }

    .kwsm-login-welcome {
        position: static;
        padding: 18px 4px 0;
        text-align: center;
    }

    .kwsm-login-welcome::after {
        margin-left: auto;
        margin-right: auto;
    }

    body.login {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 24px;
    }

    body.login .kwsm-wp-login-visual {
        display: none;
    }

    body.login #login {
        transform: translateY(30px);
    }
}

@media (max-width: 560px) {
    .kwsm-login-page {
        width: min(100% - 24px, 440px);
        padding: 18px 0;
    }

    .kwsm-login-visual {
        display: none;
    }

    .kwsm-login-card {
        padding: 26px 20px;
        border-radius: 18px;
    }

    .kwsm-login-logo {
        width: 160px;
        margin-bottom: 18px;
    }

    .kwsm-login-tabs {
        grid-template-columns: 1fr;
    }

    .kwsm-login-links {
        flex-direction: column;
        gap: 5px;
    }

    body.login {
        padding: 16px;
    }

    body.login #login {
        width: min(100%, calc(100vw - 32px), 360px);
        min-width: 0;
    }

    body.login .kwsm-login-card-top,
    body.login .kwsm-login-card-body,
    body.login .kwsm-login-card-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.login #login h1 a {
        width: 160px;
        height: 82px;
    }

    body.login .kwsm-login-card-top {
        padding-top: 24px;
    }

    body.login .kwsm-login-intro h2 {
        font-size: 24px;
    }

    body.login .kwsm-login-intro p {
        font-size: 13px;
        line-height: 1.45;
    }

    body.login .kwsm-login-card-footer {
        padding-bottom: 24px;
    }

    body.login #loginform,
    body.login #loginform p,
    body.login .user-pass-wrap,
    body.login .wp-pwd,
    body.login .kwsm-login-social-button,
    body.login .language-switcher,
    body.login .language-switcher form {
        width: 100%;
        max-width: 100%;
    }

    body.login .kwsm-login-options {
        flex-wrap: nowrap;
        row-gap: 8px;
    }

    body.login .kwsm-login-options .forgetmenot {
        width: auto;
        max-width: none;
        margin-left: 0;
    }

    body.login #loginform p.forgetmenot {
        width: auto;
        max-width: none;
    }

    body.login .kwsm-login-options .wp-login-lost-password {
        margin-left: auto;
    }

    body.login .language-switcher form {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.login .language-switcher .button {
        grid-column: 2;
        width: 100%;
    }
}

/* Login logo repair: use the versioned theme image rendered by PHP. */
body.login #login .wp-login-logo {
    display: none !important;
}

body.login .kwsm-login-intro img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 92px;
    margin: 0 auto 14px;
    object-fit: contain;
}

body.login.kwsm-login-theme-khoweb .kwsm-login-intro img {
    width: min(240px, 82%);
    max-height: 72px;
}

body.login.kwsm-login-theme-itcviet .kwsm-login-intro img {
    width: min(150px, 58%);
    max-height: 92px;
}

@media (max-width: 560px) {
    body.login.kwsm-login-theme-khoweb .kwsm-login-intro img {
        width: min(210px, 78%);
    }

    body.login.kwsm-login-theme-itcviet .kwsm-login-intro img {
        width: min(132px, 54%);
        max-height: 82px;
    }
}

body.kwsm-login-theme-khoweb,
.kwsm-login-public-body.kwsm-login-theme-khoweb {
    --kwsm-login-blue: #078a36;
    --kwsm-login-blue-dark: #013918;
    --kwsm-login-blue-deep: #001f0d;
    --kwsm-login-orange: #65e12e;
    --kwsm-login-text: #101812;
    --kwsm-login-muted: #4b5d50;
    --kwsm-login-border: #dce8de;
    --kwsm-login-field: #fbfffc;
    --kwsm-login-shadow: 0 32px 90px rgba(0, 42, 12, 0.38);
    --kwsm-login-bg-image: linear-gradient(90deg, rgba(0, 21, 7, 0.36), rgba(0, 48, 16, 0.04) 54%, rgba(0, 28, 10, 0.34)), url("login/khoweb-bg.png");
}

.kwsm-login-khoweb.kwsm-login-page {
    grid-template-columns: minmax(420px, 1fr) minmax(390px, 460px);
    width: min(1320px, calc(100vw - 64px));
    gap: clamp(34px, 7vw, 110px);
}

.kwsm-login-khoweb .kwsm-login-card,
body.login.kwsm-login-theme-khoweb #login {
    border-color: rgba(232, 245, 234, 0.94);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 34px 96px rgba(0, 43, 12, 0.4);
    backdrop-filter: blur(8px);
}

.kwsm-login-khoweb .kwsm-login-card {
    padding: clamp(32px, 4vw, 46px);
    transform: translateY(18px);
}

.kwsm-login-khoweb .kwsm-login-logo {
    width: min(230px, 66%);
    margin-bottom: 18px;
    filter: drop-shadow(0 14px 24px rgba(7, 138, 54, 0.25));
}

.kwsm-login-khoweb .kwsm-login-card h1,
body.login.kwsm-login-theme-khoweb .kwsm-login-intro h2 {
    color: #121712;
    font-weight: 850;
}

.kwsm-login-khoweb .kwsm-login-subtitle,
body.login.kwsm-login-theme-khoweb .kwsm-login-intro p {
    color: #425348;
}

.kwsm-login-khoweb .kwsm-login-tabs {
    border-color: #dce8de;
    background: rgba(241, 248, 242, 0.94);
}

.kwsm-login-khoweb .kwsm-login-tabs a {
    color: #536457;
}

.kwsm-login-khoweb .kwsm-login-tabs a.is-active {
    color: #056326;
    box-shadow: 0 9px 22px rgba(7, 138, 54, 0.16);
}

.kwsm-login-khoweb input[type="text"]:focus,
.kwsm-login-khoweb input[type="password"]:focus,
body.login.kwsm-login-theme-khoweb form .input:focus,
body.login.kwsm-login-theme-khoweb input[type="text"]:focus,
body.login.kwsm-login-theme-khoweb input[type="password"]:focus {
    border-color: #078a36;
    box-shadow: 0 0 0 4px rgba(7, 138, 54, 0.15);
}

.kwsm-login-khoweb .button-primary,
.kwsm-login-khoweb .kwsm-login-submit-link,
body.login.kwsm-login-theme-khoweb .button-primary {
    background-color: #08762f;
    background-image: var(--kwsm-login-submit-icon), linear-gradient(180deg, #28a323, #07712c);
    box-shadow: 0 16px 30px rgba(7, 138, 54, 0.28);
}

.kwsm-login-khoweb .button-primary:hover,
.kwsm-login-khoweb .button-primary:focus,
.kwsm-login-khoweb .kwsm-login-submit-link:hover,
.kwsm-login-khoweb .kwsm-login-submit-link:focus,
body.login.kwsm-login-theme-khoweb .button-primary:hover,
body.login.kwsm-login-theme-khoweb .button-primary:focus {
    background-color: #056829;
    background-image: var(--kwsm-login-submit-icon), linear-gradient(180deg, #1f941e, #056829);
    box-shadow: 0 18px 36px rgba(7, 138, 54, 0.34);
}

.kwsm-login-khoweb .kwsm-login-links a,
body.login.kwsm-login-theme-khoweb a,
body.login.kwsm-login-theme-khoweb #nav a,
body.login.kwsm-login-theme-khoweb #backtoblog a,
body.login.kwsm-login-theme-khoweb .privacy-policy-page-link a,
body.login.kwsm-login-theme-khoweb .kwsm-login-options .wp-login-lost-password {
    color: #06762e;
}

.kwsm-login-khoweb .kwsm-login-social-button,
body.login.kwsm-login-theme-khoweb .kwsm-login-social-button {
    border-color: #dbe7dd;
    background: rgba(255, 255, 255, 0.92);
}

.kwsm-login-khoweb .kwsm-login-welcome,
body.login.kwsm-login-theme-khoweb .kwsm-wp-login-welcome {
    left: clamp(24px, 4vw, 56px);
    bottom: clamp(28px, 7vh, 72px);
    text-shadow: 0 18px 38px rgba(0, 0, 0, 0.48);
}

.kwsm-login-khoweb .kwsm-login-welcome span,
body.login.kwsm-login-theme-khoweb .kwsm-wp-login-welcome span {
    font-weight: 750;
}

.kwsm-login-khoweb .kwsm-login-welcome strong,
body.login.kwsm-login-theme-khoweb .kwsm-wp-login-welcome strong {
    color: #74ef31;
    font-weight: 900;
}

.kwsm-login-khoweb .kwsm-login-welcome p,
body.login.kwsm-login-theme-khoweb .kwsm-wp-login-welcome p {
    color: #fff;
    font-weight: 800;
}

.kwsm-login-khoweb .kwsm-login-welcome::after,
body.login.kwsm-login-theme-khoweb .kwsm-wp-login-welcome::after {
    background: #5fea2d;
    box-shadow: 0 0 22px rgba(95, 234, 45, 0.42);
}

body.login.kwsm-login-theme-khoweb {
    grid-template-columns: minmax(420px, 1fr) minmax(390px, 460px);
    gap: clamp(34px, 7vw, 110px);
}

body.login.kwsm-login-theme-khoweb #login {
    transform: translateX(44px) translateY(20px);
}

body.login.kwsm-login-theme-khoweb #login h1 a {
    width: 98px;
    height: 78px;
    margin-bottom: 12px;
    background-image: url("brand/icon-khoweb.png");
    filter: drop-shadow(0 14px 22px rgba(7, 138, 54, 0.24));
}

body.login.kwsm-login-theme-khoweb .kwsm-login-card-top {
    border-bottom-color: #e6f1e8;
}

body.login.kwsm-login-theme-khoweb .button.wp-hide-pw,
body.login.kwsm-login-theme-khoweb .language-switcher .button {
    color: #06762e;
}

body.login.kwsm-login-theme-khoweb .language-switcher .button {
    border-color: #dbe7dd;
    background: #f4fbf5;
}

@media (max-width: 1020px) {
    .kwsm-login-khoweb.kwsm-login-page,
    body.login.kwsm-login-theme-khoweb {
        grid-template-columns: 1fr;
        width: min(520px, calc(100vw - 36px));
        gap: 24px;
    }

    body.login.kwsm-login-theme-khoweb #login {
        transform: translateY(24px);
    }
}

@media (max-width: 560px) {
    .kwsm-login-khoweb.kwsm-login-page {
        width: min(100% - 24px, 440px);
    }

    .kwsm-login-khoweb .kwsm-login-logo {
        width: min(190px, 72%);
    }

    body.login.kwsm-login-theme-khoweb #login h1 a {
        width: 82px;
        height: 66px;
    }
}

/* Two-factor verification */
body.login.kwsm-login-two-factor {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    justify-items: center;
    padding: clamp(22px, 4vw, 56px);
    background-color: #06150c;
    background-image: linear-gradient(135deg, rgba(2, 17, 8, 0.96), rgba(3, 64, 26, 0.9)), url("login/khoweb-bg.png");
    background-position: center center;
    background-size: cover;
}

body.login.kwsm-login-two-factor .kwsm-wp-login-visual,
body.login.kwsm-login-two-factor .kwsm-login-social-footer {
    display: none;
}

body.login.kwsm-login-two-factor #login {
    width: min(420px, calc(100vw - 32px));
    border: 1px solid rgba(221, 242, 223, 0.96);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 30px 80px rgba(0, 31, 13, 0.42);
    transform: none;
}

body.login.kwsm-login-two-factor .kwsm-login-card-top {
    padding: 30px 32px 18px;
    border-bottom-color: #e6f1e8;
    background: linear-gradient(180deg, #ffffff, #f7fff8);
}

body.login.kwsm-login-two-factor .kwsm-login-card-body {
    padding: 22px 32px 14px;
}

body.login.kwsm-login-two-factor .kwsm-login-card-footer {
    padding: 0 32px 26px;
}

body.login.kwsm-login-two-factor #login h1 a {
    width: 104px;
    height: 104px;
    margin: 0 auto 14px;
    background-image: url("brand/icon-khoweb.png");
    background-size: contain;
    filter: drop-shadow(0 16px 24px rgba(7, 138, 54, 0.24));
}

body.login.kwsm-login-two-factor .kwsm-login-intro h2 {
    color: #101812;
    font-size: 24px;
    font-weight: 850;
    line-height: 1.2;
}

body.login.kwsm-login-two-factor .kwsm-login-intro p {
    max-width: 300px;
    margin: 8px auto 0;
    color: #4b5d50;
    font-size: 14px;
    line-height: 1.55;
}

body.login.kwsm-login-two-factor #loginform .two-factor-prompt {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #dcefe2;
    border-radius: 12px;
    background: #f6fbf7;
    color: #425348;
    font-size: 14px;
    line-height: 1.5;
}

body.login.kwsm-login-two-factor #loginform label[for="authcode"] {
    display: block;
    margin: 0 0 9px;
    color: #1a2d1f;
    font-size: 13px;
    font-weight: 800;
}

body.login.kwsm-login-two-factor #loginform .input.authcode,
body.login.kwsm-login-two-factor #authcode {
    min-height: 58px;
    padding: 0 18px;
    border-color: #bfe7c7;
    border-radius: 14px;
    background: #fbfffc;
    color: #101812;
    font-size: 26px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.28em;
    line-height: 58px;
    text-align: center;
}

body.login.kwsm-login-two-factor #loginform .input.authcode:focus,
body.login.kwsm-login-two-factor #authcode:focus {
    border-color: #078a36;
    box-shadow: 0 0 0 4px rgba(7, 138, 54, 0.15);
}

body.login.kwsm-login-two-factor #authcode::placeholder {
    color: #2d5b39;
    opacity: 0.38;
}

body.login.kwsm-login-two-factor .kwsm-login-two-factor-form p.submit {
    margin-top: 18px;
}

body.login.kwsm-login-two-factor .button-primary {
    min-height: 50px;
    border-radius: 12px;
    background-color: #08762f;
    background-image: linear-gradient(180deg, #27a329, #07712c);
    background-position: center center;
    background-size: 100% 100%;
    box-shadow: 0 16px 30px rgba(7, 138, 54, 0.28);
    font-size: 15px;
}

body.login.kwsm-login-two-factor .button-primary:hover,
body.login.kwsm-login-two-factor .button-primary:focus {
    background-color: #056829;
    background-image: linear-gradient(180deg, #1f941e, #056829);
    box-shadow: 0 18px 36px rgba(7, 138, 54, 0.34);
}

body.login.kwsm-login-two-factor .backup-methods-wrap {
    margin: 2px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #e6f1e8;
    color: #4b5d50;
    text-align: center;
}

body.login.kwsm-login-two-factor .backup-methods-wrap p {
    margin: 0 0 8px;
    color: #4b5d50;
    font-size: 12px;
    font-weight: 800;
}

body.login.kwsm-login-two-factor .backup-methods-wrap ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.login.kwsm-login-two-factor .backup-methods-wrap li + li {
    margin-top: 6px;
}

body.login.kwsm-login-two-factor #login_error {
    border-left-color: #078a36;
}

/* ITC Việt keeps its own blue identity throughout the 2FA challenge. */
body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor {
    background-color: #052a6f;
    background-image: linear-gradient(135deg, rgba(3, 28, 88, 0.88), rgba(6, 91, 194, 0.62)), url("login/itcviet-bg.png");
    background-position: center center;
    background-size: cover;
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor #login {
    border-color: rgba(214, 229, 250, 0.96);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 30px 86px rgba(2, 30, 91, 0.48);
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor .kwsm-login-card-top {
    border-bottom-color: #dce7f6;
    background: linear-gradient(180deg, #ffffff, #f5f9ff);
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor .kwsm-login-intro h2 {
    color: #073f97;
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor .kwsm-login-intro p,
body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor .backup-methods-wrap,
body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor .backup-methods-wrap p {
    color: #5e6f8c;
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor #loginform .two-factor-prompt {
    border-color: #d5e4f8;
    background: #f4f8ff;
    color: #405678;
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor #loginform label[for="authcode"] {
    color: #173a70;
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor #loginform .input.authcode,
body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor #authcode {
    border-color: #b9d3f4;
    background: #f9fbff;
    color: #0a397d;
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor #loginform .input.authcode:focus,
body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor #authcode:focus {
    border-color: #0c63ce;
    box-shadow: 0 0 0 4px rgba(12, 99, 206, 0.16);
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor #authcode::placeholder {
    color: #315f9d;
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor .button-primary {
    background-color: #0c63ce;
    background-image: linear-gradient(180deg, #1977e5, #0754b8);
    box-shadow: 0 16px 32px rgba(12, 99, 206, 0.3);
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor .button-primary:hover,
body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor .button-primary:focus {
    background-color: #074fae;
    background-image: linear-gradient(180deg, #126bd2, #0649a2);
    box-shadow: 0 18px 38px rgba(12, 99, 206, 0.38);
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor .backup-methods-wrap {
    border-top-color: #dce7f6;
}

body.login.kwsm-login-theme-itcviet.kwsm-login-two-factor #login_error {
    border-left-color: #0c63ce;
}

@media (max-width: 560px) {
    body.login.kwsm-login-two-factor {
        padding: 16px;
    }

    body.login.kwsm-login-two-factor #login {
        width: min(100%, calc(100vw - 32px));
        border-radius: 18px;
    }

    body.login.kwsm-login-two-factor .kwsm-login-card-top,
    body.login.kwsm-login-two-factor .kwsm-login-card-body,
    body.login.kwsm-login-two-factor .kwsm-login-card-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.login.kwsm-login-two-factor #login h1 a {
        width: 86px;
        height: 86px;
    }

    body.login.kwsm-login-two-factor #loginform .input.authcode,
    body.login.kwsm-login-two-factor #authcode {
        min-height: 54px;
        font-size: 22px;
        letter-spacing: 0.18em;
        line-height: 54px;
    }
}