:root {
    --vltk-gold: #d8b36a;
    --vltk-gold-light: #f4dda2;
    --vltk-gold-dark: #75531f;
    --vltk-red: #a52117;
    --vltk-red-dark: #651008;
    --vltk-ink: #090b0d;
}

html,
body.vltk-auth-page {
    min-height: 100%;
}

body.vltk-auth-page {
    margin: 0;
    color: #e9e1d1;
    background:
        linear-gradient(115deg, rgba(5, 8, 10, .34), rgba(5, 8, 10, .05)),
        url('../images/bg-header.jpg') center center / cover fixed no-repeat;
}

body.vltk-auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 42%, transparent 0, rgba(0, 0, 0, .12) 54%, rgba(0, 0, 0, .46) 100%),
        linear-gradient(to bottom, rgba(10, 12, 14, .08), rgba(10, 12, 14, .2));
}

.vltk-auth-nav {
    width: calc(100% - 28px);
    max-width: 650px;
    min-height: 0;
    margin: 0 auto 14px;
    padding: 0;
    background: transparent !important;
    border: 0;
    box-shadow: none;
}

.vltk-auth-login-page .vltk-auth-nav {
    max-width: 540px;
}

.vltk-auth-nav .container {
    width: 100%;
    max-width: none;
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
    border-bottom: 0 !important;
}

.vltk-auth-nav .navbar-brand-sm {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
}

.vltk-auth-nav .navbar-brand-sm img {
    display: block;
    width: 118px;
    height: auto;
    max-height: 62px;
    object-fit: contain;
    background: transparent !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7));
}

.vltk-auth-nav .navbar-brand-sm h2 {
    display: none;
}

.vltk-auth-nav .navbar-collapse {
    justify-content: center;
    flex-grow: 0;
    width: auto;
}

.vltk-auth-nav .navbar-nav {
    align-items: center;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 3px 10px;
    background: rgba(7, 9, 10, .76);
    border: 1px solid rgba(216, 179, 106, .34);
    border-radius: 4px;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .28);
    backdrop-filter: blur(8px);
}

.vltk-auth-nav .navbar-nav .nav-item + .nav-item {
    border-left: 1px solid rgba(216, 179, 106, .2);
}

.vltk-auth-nav .navbar-nav .nav-link {
    position: relative;
    margin: 0;
    padding: 9px 16px !important;
    color: #f0e3c6 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    text-shadow: 0 2px 4px #000;
    transition: color .2s ease, background .2s ease;
}

.vltk-auth-nav .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    right: 50%;
    bottom: 3px;
    left: 50%;
    height: 1px;
    background: var(--vltk-gold);
    transition: right .2s ease, left .2s ease;
}

.vltk-auth-nav .navbar-nav .nav-link:hover,
.vltk-auth-nav .navbar-nav .nav-link.active {
    color: var(--vltk-gold-light) !important;
    background: rgba(216, 179, 106, .07) !important;
}

.vltk-auth-nav .navbar-nav .nav-link:hover::after,
.vltk-auth-nav .navbar-nav .nav-link.active::after {
    right: 0;
    left: 0;
}

.vltk-auth-nav .navbar-toggler {
    border-color: rgba(216, 179, 106, .75);
    background: rgba(8, 10, 12, .82);
}

.vltk-auth-main {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    margin: 0 !important;
    padding: 30px 14px 42px !important;
}

.vltk-auth-card-compact {
    max-width: 540px;
    margin-right: auto;
    margin-left: auto;
}

.vltk-auth-main .auth-layout {
    width: 100%;
}

.vltk-auth-main .auth-layout .row {
    margin: 0;
}

.vltk-auth-main .auth-layout .col-md-8 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 650px;
    padding: 0;
}

.vltk-auth-card {
    position: relative;
    overflow: visible !important;
    padding: 30px 34px 28px !important;
    color: #e8e0d2;
    background:
        linear-gradient(145deg, rgba(28, 28, 27, .97), rgba(8, 10, 11, .94)) !important;
    border: 1px solid rgba(216, 179, 106, .72) !important;
    border-radius: 3px !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .56),
        inset 0 0 45px rgba(216, 179, 106, .045),
        0 0 0 5px rgba(10, 10, 9, .5);
    backdrop-filter: blur(8px);
}

.vltk-auth-card::before,
.vltk-auth-card::after {
    content: '';
    position: absolute;
    width: 43px;
    height: 43px;
    pointer-events: none;
}

.vltk-auth-card::before {
    top: -8px;
    left: -8px;
    border-top: 3px double var(--vltk-gold);
    border-left: 3px double var(--vltk-gold);
}

.vltk-auth-card::after {
    right: -8px;
    bottom: -8px;
    border-right: 3px double var(--vltk-gold);
    border-bottom: 3px double var(--vltk-gold);
}

.vltk-auth-card .card-title {
    margin: 0;
    color: var(--vltk-gold-light) !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 27px !important;
    font-weight: 700;
    letter-spacing: .09em;
    text-shadow: 0 2px 9px rgba(216, 179, 106, .38);
}

.vltk-title-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 76%;
    margin: 14px auto 24px;
}

.vltk-title-divider::before,
.vltk-title-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 179, 106, .8));
}

.vltk-title-divider::after {
    background: linear-gradient(90deg, rgba(216, 179, 106, .8), transparent);
}

.vltk-title-divider span {
    width: 9px;
    height: 9px;
    border: 1px solid var(--vltk-gold);
    background: #16130d;
    transform: rotate(45deg);
    box-shadow: 0 0 8px rgba(216, 179, 106, .7);
}

.vltk-form-group {
    margin-bottom: 15px;
}

.vltk-form-group > label {
    margin-bottom: 7px;
    color: #d9cfbc;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .025em;
}

.vltk-input-wrap {
    position: relative;
}

.vltk-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    color: #8f8b82;
    font-size: 15px;
    transform: translateY(-50%);
    transition: color .2s ease;
}

.vltk-input-wrap .form-control {
    height: 46px;
    padding: 10px 46px 10px 43px;
    color: #f7f0e4;
    background: rgba(2, 3, 4, .72);
    border: 1px solid rgba(193, 171, 123, .45);
    border-radius: 4px;
    caret-color: var(--vltk-gold-light);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.vltk-input-wrap .form-control::placeholder {
    color: #777873;
}

.vltk-input-wrap .form-control:focus {
    color: #fff;
    background: rgba(0, 0, 0, .86);
    border-color: var(--vltk-gold);
    box-shadow: 0 0 0 2px rgba(216, 179, 106, .14), 0 0 16px rgba(216, 179, 106, .1);
}

.vltk-input-wrap:focus-within > i {
    color: var(--vltk-gold-light);
}

.vltk-form-group .form-text {
    margin-top: 6px;
    color: #918e86 !important;
    font-size: 11px;
}

.vltk-password-toggle {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 39px;
    height: 38px;
    padding: 0;
    color: #99968e;
    background: transparent;
    border: 0;
    transform: translateY(-50%);
    cursor: pointer;
}

.vltk-password-toggle:hover,
.vltk-password-toggle:focus {
    color: var(--vltk-gold-light);
    outline: none;
}

.vltk-captcha-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 158px 42px;
    gap: 9px;
    align-items: stretch;
}

.vltk-captcha-row .vltk-input-wrap .form-control {
    width: 100% !important;
}

.vltk-captcha-image {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 46px;
    padding: 2px;
    background: #ece8dd;
    border: 1px solid var(--vltk-gold-dark);
    border-radius: 4px;
}

.vltk-captcha-image img {
    display: block;
    width: 100%;
    max-height: 42px;
    object-fit: contain;
}

.vltk-captcha-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vltk-gold-light);
    background: rgba(80, 58, 24, .6);
    border: 1px solid var(--vltk-gold-dark);
    border-radius: 4px;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
}

.vltk-captcha-refresh:hover {
    color: #fff5d5;
    background: rgba(126, 85, 24, .74);
    transform: rotate(25deg);
}

.vltk-submit {
    position: relative;
    height: 48px;
    margin-top: 8px;
    color: #fff2d1 !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #bc3327, var(--vltk-red) 52%, var(--vltk-red-dark)) !important;
    border: 1px solid var(--vltk-gold) !important;
    border-radius: 3px;
    box-shadow: inset 0 0 0 2px rgba(78, 10, 5, .65), 0 6px 18px rgba(0, 0, 0, .32);
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.vltk-submit:hover,
.vltk-submit:focus {
    filter: brightness(1.13);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 2px rgba(78, 10, 5, .65), 0 8px 24px rgba(128, 24, 13, .34);
}

.vltk-submit:disabled {
    cursor: wait;
    filter: grayscale(.35);
    opacity: .68;
}

.vltk-terms-note {
    margin: 15px 0 0;
    color: #96938b;
    font-size: 12px;
    line-height: 1.6;
}

.vltk-auth-card a {
    color: #cf493d;
}

.vltk-auth-card a:hover {
    color: #ff6e5f;
}

.vltk-login-link {
    margin-top: 17px;
    padding-top: 16px;
    color: #aaa69c;
    border-top: 1px solid rgba(216, 179, 106, .18);
}

.vltk-login-link strong {
    color: #df4b3e !important;
}

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

.vltk-login-options .custom-control {
    min-height: auto;
}

.vltk-login-options .custom-control-label {
    margin: 0;
    color: #b9b2a5;
    font-size: 12px;
    font-weight: 400;
}

.vltk-login-options .custom-control-label::before {
    background: rgba(0, 0, 0, .6);
    border-color: rgba(216, 179, 106, .5);
}

.vltk-login-options .custom-control-input:checked ~ .custom-control-label::before {
    background: var(--vltk-red);
    border-color: var(--vltk-gold-dark);
}

.vltk-forgot-link {
    color: #d64b40 !important;
    font-size: 12px;
    font-weight: 700;
}

body.vltk-auth-page .dieukhoan_popup {
    width: min(920px, calc(100vw - 30px));
    max-height: 88vh;
    padding: 28px 28px 68px;
    color: #28241e;
    background: #f2eee5;
    border: 2px solid #8b692f;
    border-radius: 4px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .72);
}

body.vltk-auth-page .dieukhoan_popup-content {
    max-height: 62vh;
    background: #fffdf8;
}

body.vltk-auth-page .dieukhoan_popup-close {
    color: #7d160e;
    border-color: #7d160e;
}

body.vltk-auth-page .dieukhoan_popup-button {
    min-width: 250px;
    background: linear-gradient(180deg, #ad2a1f, #74140d);
    border: 1px solid #b28b45;
}

@media (max-width: 767.98px) {
    .vltk-auth-nav {
        width: 100%;
        min-height: 0;
        margin-bottom: 10px;
        padding: 0;
    }

    .vltk-auth-nav .navbar-brand-sm img {
        width: 92px;
        max-height: 52px;
    }

    .vltk-auth-nav .navbar-nav {
        align-items: stretch;
        width: 100%;
        margin-top: 6px;
        padding: 5px;
    }

    .vltk-auth-nav .navbar-collapse {
        width: 100%;
    }

    .vltk-auth-nav .navbar-toggler {
        margin: 0 auto;
    }

    .vltk-auth-nav .navbar-nav .nav-link {
        margin-left: 0;
        padding: 10px 12px !important;
        text-align: center;
    }

    .vltk-auth-nav .navbar-nav .nav-item + .nav-item {
        border-top: 1px solid rgba(216, 179, 106, .16);
        border-left: 0;
    }

    .vltk-auth-main {
        align-items: flex-start;
        justify-content: flex-start;
        min-height: 100vh;
        padding: 22px 11px 34px !important;
    }

    .vltk-auth-card {
        padding: 25px 18px 22px !important;
    }

    .vltk-auth-card .card-title {
        font-size: 22px !important;
    }

    .vltk-title-divider {
        width: 88%;
        margin-bottom: 20px;
    }

    .vltk-captcha-row {
        grid-template-columns: minmax(0, 1fr) 126px 40px;
        gap: 6px;
    }

    body.vltk-auth-page .dieukhoan_popup {
        padding: 24px 14px 68px;
    }
}

@media (max-width: 430px) {
    .vltk-login-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .vltk-captcha-row {
        grid-template-columns: minmax(0, 1fr) 40px;
    }

    .vltk-captcha-image {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}