/* VNPT DIGITAL ACCESS — page-scoped glass materials and restrained motion. */
.vnpt-auth-page {
    --vnpt-auth-navy-950: #031226;
    --vnpt-auth-navy-900: #061a35;
    --vnpt-auth-navy-800: #082b57;
    --vnpt-auth-blue: #0066ff;
    --vnpt-auth-blue-bright: #168cff;
    --vnpt-auth-cyan: #28c5ff;
    --vnpt-auth-cyan-soft: #82dfff;
    --vnpt-auth-white: #f7fbff;
    /* Opaque cool whites remain readable over the brightest glass region. */
    --vnpt-auth-secondary: #e4f1fc;
    --vnpt-auth-muted: #d8eaf8;
    --vnpt-auth-placeholder: #cde6f8;
    --vnpt-auth-field-bg: rgba(5, 26, 68, .62);
    --vnpt-auth-field-border: rgba(210, 240, 255, .24);
    --vnpt-auth-focus: #38bdf8;
    --vnpt-auth-motion-base: 8s;
    --vnpt-auth-motion-orbit-a: calc(var(--vnpt-auth-motion-base) * 2);
    --vnpt-auth-motion-orbit-b: calc(var(--vnpt-auth-motion-base) * 3);
    --vnpt-auth-motion-orbit-c: calc(var(--vnpt-auth-motion-base) * 4);
    --vnpt-auth-motion-ambient: calc(var(--vnpt-auth-motion-base) * 3);
    --vnpt-auth-glass-border: rgba(225, 245, 255, .065);
    --vnpt-auth-glass-highlight: rgba(156, 235, 255, .18);
    /* A 16px / 145% trial erased this scene's silhouettes; transmit them softly. */
    --vnpt-auth-glass-blur: 4.5px;
    --vnpt-auth-glass-saturation: 105%;
    --vnpt-auth-space-1: 4px;
    --vnpt-auth-space-2: 8px;
    --vnpt-auth-space-3: 12px;
    --vnpt-auth-space-4: 16px;
    --vnpt-auth-space-6: 24px;
    --vnpt-auth-space-8: 32px;
    --vnpt-auth-radius-card: 28px;
    --vnpt-auth-radius-field: 14px;
    --vnpt-auth-card-width: 480px;
    --vnpt-auth-control-height: 54px;
    --vnpt-auth-short-screen-height: 840px;
    --vnpt-auth-glass-bg: linear-gradient(
        145deg,
        rgba(255, 255, 255, .075) 0%,
        rgba(140, 205, 255, .045) 35%,
        rgba(50, 130, 220, .035) 68%,
        rgba(10, 45, 105, .08) 100%
    );
    --vnpt-auth-shadow: 
        0 24px 64px rgba(0, 20, 60, .14),
        inset 0 1px 0 rgba(240, 252, 255, .42),
        inset -1px 0 0 rgba(94, 214, 255, .08),
        inset 0 -1px 0 rgba(0, 12, 30, .14),
        inset 0 0 16px rgba(0, 12, 30, .045);
    margin: 0;
    min-width: 320px;
    color: var(--vnpt-auth-white);
    background: var(--vnpt-auth-navy-950);
    font-family: var(--font-body, "Inter", Arial, sans-serif);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
.vnpt-auth-page *, .vnpt-auth-page *::before, .vnpt-auth-page *::after { box-sizing: border-box; }
.vnpt-auth-page a { color: inherit; }
.vnpt-auth-page :where(input, button) { font: inherit; }
.vnpt-auth-page button { cursor: pointer; }
.vnpt-auth-page img { display: block; max-width: 100%; }
.vnpt-auth-page a:focus-visible, .vnpt-auth-page button:focus-visible {
    outline: 2px solid var(--vnpt-auth-cyan-soft);
    outline-offset: 4px;
}
.vnpt-auth-icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.vnpt-auth-icon { display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vnpt-auth-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.vnpt-auth-environment {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    overflow-x: clip;
    overflow-y: visible;
    background:
        radial-gradient(ellipse at 82% 15%, rgba(85, 205, 255, .22), transparent 34%),
        radial-gradient(ellipse at 38% 65%, rgba(0, 102, 255, .24), transparent 44%),
        radial-gradient(ellipse at 96% 4%, rgba(112, 92, 255, .08), transparent 30%),
        linear-gradient(120deg, #031226, #062a5d 42%, #0754ae 76%, #087bd6);
}
.vnpt-auth-backdrop { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; animation: vnpt-auth-reveal 600ms backwards; }
.vnpt-auth-scenery { position: absolute; inset: 0; }
.vnpt-auth-scenery img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .72; }
.vnpt-auth-backdrop::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(1, 12, 34, .28), transparent 48%, rgba(4, 28, 65, .1)),
        linear-gradient(180deg, rgba(0, 10, 30, .13), transparent 50%, rgba(1, 16, 39, .18));
}
.vnpt-auth-ambient { position: absolute; width: min(46vw, 640px); height: min(42vw, 560px); border-radius: 50%; opacity: .2; }
.vnpt-auth-ambient--cyan { top: -15%; right: -8%; background: radial-gradient(circle, rgba(70, 199, 255, .6), transparent 68%); animation: vnpt-auth-aurora var(--vnpt-auth-motion-ambient) ease-in-out infinite; }
.vnpt-auth-ambient--blue { bottom: -18%; left: 15%; background: radial-gradient(circle, rgba(0, 88, 255, .6), transparent 67%); animation: vnpt-auth-aurora var(--vnpt-auth-motion-ambient) ease-in-out infinite reverse; }
.vnpt-auth-ambient--violet { top: -20%; left: 45%; background: radial-gradient(circle, rgba(99, 102, 241, .08), transparent 70%); opacity: .12; }
.vnpt-auth-texture { position: absolute; inset: 0; opacity: .035; background-image: linear-gradient(#b4e4ff 1px, transparent 1px), linear-gradient(90deg, #b4e4ff 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 55%, black, transparent 65%); }
.vnpt-auth-horizon { position: absolute; left: 0; right: 0; bottom: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(80, 202, 255, .2), transparent); box-shadow: 0 0 35px 4px rgba(40, 140, 255, .1); }
.vnpt-auth-particle { position: absolute; z-index: 1; width: 3px; height: 3px; border-radius: 50%; background: #b3edff; opacity: .24; box-shadow: 0 0 8px rgba(80, 203, 255, .4); animation: vnpt-auth-particle-drift var(--vnpt-auth-motion-orbit-a) ease-in-out infinite; }
.vnpt-auth-particle--1 { top: 12%; left: 26%; }
.vnpt-auth-particle--2 { top: 36%; left: 19%; animation-delay: -4s; }
.vnpt-auth-particle--3 { top: 58%; left: 52%; animation-delay: -8s; }
.vnpt-auth-particle--4 { top: 19%; left: 58%; animation-delay: -12s; }
.vnpt-auth-particle--5 { top: 72%; left: 11%; animation-delay: -16s; }
.vnpt-auth-particle--6 { top: 81%; left: 73%; }
.vnpt-auth-particle--7 { top: 9%; left: 81%; animation-delay: -3s; }
.vnpt-auth-particle--8 { top: 43%; left: 7%; animation-delay: -7s; }
.vnpt-auth-particle--9 { top: 66%; left: 87%; animation-delay: -10s; }
.vnpt-auth-particle--10 { top: 29%; left: 94%; animation-delay: -13s; }
.vnpt-auth-particle--11 { top: 89%; left: 37%; animation-delay: -15s; }
.vnpt-auth-particle--12 { top: 46%; left: 62%; animation-delay: -18s; }
.vnpt-auth-particle:nth-child(even) { animation: none; }

.vnpt-auth-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
    width: min(100%, 1680px);
    min-height: max(720px, 100svh);
    margin: 0 auto;
    padding: 44px clamp(32px, 4.2vw, 76px);
    gap: clamp(24px, 3vw, 56px);
}
.vnpt-auth-brand-environment { position: relative; z-index: 1; min-width: 0; }
.vnpt-auth-brand { display: inline-flex; width: 177px; border-radius: 4px; animation: vnpt-auth-enter 550ms 100ms backwards; }
.vnpt-auth-brand img { width: 100%; height: auto; }
.vnpt-auth-brand-copy { position: relative; z-index: 5; margin-top: clamp(36px, 5.5vh, 70px); animation: vnpt-auth-enter 600ms 180ms backwards; }
.vnpt-auth-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 13px; color: #b3cee8; font-size: 10px; font-weight: 600; letter-spacing: .27em; }
.vnpt-auth-eyebrow span { width: 38px; height: 1px; background: rgba(184, 222, 255, .5); }
.vnpt-auth-brand-copy h1 { margin: 0; color: var(--vnpt-auth-white); font-family: var(--font-display, "Manrope", Arial, sans-serif); font-size: clamp(40px, 3.7vw, 58px); font-weight: 800; line-height: 1.22; letter-spacing: -.045em; }
.vnpt-auth-brand-copy h1 span { color: #71d9fa; }
.vnpt-auth-subtitle { margin: 12px 0 0; color: #d1e2f5; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; }
.vnpt-auth-features { display: flex; align-items: flex-start; flex-direction: column; gap: 9px; padding: 0; margin: 27px 0 0; list-style: none; }
.vnpt-auth-feature { display: inline-flex; min-height: 37px; align-items: center; gap: 12px; padding: 7px 15px 7px 11px; border: 1px solid rgba(200, 230, 255, .1); border-radius: 999px; color: #e8f4ff; background: radial-gradient(ellipse at 95% 0, rgba(163, 225, 255, .035), transparent 55%), rgba(255, 255, 255, .045); box-shadow: inset -1px 1px 0 rgba(230, 249, 255, .08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; line-height: 1.3; transition: transform 180ms, border-color 180ms; }
.vnpt-auth-feature .vnpt-auth-icon { width: 20px; height: 20px; color: #8adeff; }

.vnpt-auth-stage { position: absolute; right: -4%; bottom: 22px; width: min(78%, 640px); height: min(61vh, 535px); min-height: 395px; pointer-events: none; }
.vnpt-auth-emblem-halo { position: absolute; border-radius: 50%; pointer-events: none; }
.vnpt-auth-emblem-halo--outer { top: 10%; left: 14%; width: 75%; height: 70%; background: radial-gradient(circle, rgba(0, 86, 255, .4), transparent 67%); opacity: .28; }
.vnpt-auth-emblem-halo--inner { top: 22%; left: 27%; width: 48%; height: 46%; background: radial-gradient(circle, rgba(82, 225, 255, .58), transparent 70%); opacity: .2; animation: vnpt-auth-breathe var(--vnpt-auth-motion-base) ease-in-out infinite; }
.vnpt-auth-emblem { position: absolute; z-index: 3; top: 0; left: 19%; width: 65%; animation: vnpt-auth-enter 600ms 240ms backwards; }
.vnpt-auth-emblem-material { position: relative; animation: vnpt-auth-float var(--vnpt-auth-motion-base) ease-in-out infinite; }
.vnpt-auth-emblem-image { width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(2, 14, 52, .24)) drop-shadow(0 0 10px rgba(128, 223, 255, .12)); }
.vnpt-auth-emblem-reflection { position: absolute; inset: 4%; background: linear-gradient(225deg, transparent 44%, rgba(224, 242, 254, .2) 50%, transparent 56%); mask: url("../img/vnpt-login-symbol-blue.webp") center / contain no-repeat; -webkit-mask: url("../img/vnpt-login-symbol-blue.webp") center / contain no-repeat; opacity: 0; animation: vnpt-auth-logo-sweep var(--vnpt-auth-motion-orbit-a) ease-in-out infinite; }
.vnpt-auth-orbit-layer { position: absolute; z-index: 2; inset: 3% 0 19%; animation: vnpt-auth-reveal 550ms 320ms backwards; }
.vnpt-auth-orbit-layer--back { clip-path: inset(0 0 48% 0); opacity: .42; }
.vnpt-auth-orbit-layer--front { z-index: 4; clip-path: inset(52% 0 0 0); opacity: .9; }
.vnpt-auth-orbit { position: absolute; top: 47%; left: 50%; width: 97%; height: 43%; border: 1px solid rgba(156, 231, 255, .8); border-radius: 50%; box-shadow: 0 0 8px rgba(53, 189, 255, .15); transform: translate(-50%, -50%) rotate(-24deg); }
.vnpt-auth-orbit--a { animation: vnpt-auth-orbit-a var(--vnpt-auth-motion-orbit-a) ease-in-out infinite; }
.vnpt-auth-orbit--b { width: 89%; height: 47%; border-color: rgba(109, 199, 255, .55); transform: translate(-50%, -50%) rotate(24deg); animation: vnpt-auth-orbit-b var(--vnpt-auth-motion-orbit-b) ease-in-out infinite; }
.vnpt-auth-orbit--c { width: 83%; height: 70%; border-style: dashed; border-color: rgba(137, 204, 255, .24); transform: translate(-50%, -50%) rotate(-10deg); animation: vnpt-auth-orbit-c var(--vnpt-auth-motion-orbit-c) ease-in-out infinite; }
.vnpt-auth-node { position: absolute; left: 0; top: 0; width: 7px; height: 7px; background: #82dfff; border: 1px solid #e0f2fe; border-radius: 50%; offset-path: ellipse(50% 50% at 50% 50%); offset-anchor: 50% 50%; offset-rotate: 0deg; animation: vnpt-auth-node-orbit var(--vnpt-auth-motion-orbit-a) linear infinite; box-shadow: 0 0 0 3px rgba(79, 203, 255, .1), 0 0 10px 2px rgba(59, 193, 255, .42); }
.vnpt-auth-node--second { width: 5px; height: 5px; offset-distance: 42%; animation: none; }
.vnpt-auth-orbit--b .vnpt-auth-node { offset-distance: 20%; animation-duration: var(--vnpt-auth-motion-orbit-c); animation-direction: reverse; }

.vnpt-auth-platform { position: absolute; z-index: 1; left: 8%; right: 6%; bottom: 10%; height: 18%; animation: vnpt-auth-reveal 550ms 240ms backwards; }
.vnpt-auth-platform-glow { position: absolute; inset: -20% -10%; border-radius: 50%; background: radial-gradient(ellipse, rgba(53, 188, 255, .3), rgba(0, 91, 255, .15) 42%, transparent 69%); }
.vnpt-auth-platform-ring { position: absolute; inset: 0; border-radius: 50%; }
.vnpt-auth-platform-ring--lower { top: 22%; bottom: -22%; border: 1px solid rgba(41, 132, 255, .5); background: linear-gradient(180deg, rgba(0, 51, 149, .16), rgba(0, 28, 83, .66)); box-shadow: 0 9px 20px rgba(0, 19, 59, .3); }
.vnpt-auth-platform-ring--middle { inset: 0 8%; border: 2px solid rgba(22, 140, 255, .72); background: rgba(0, 68, 170, .14); box-shadow: 0 0 15px rgba(0, 123, 255, .4), inset 0 0 15px rgba(0, 123, 255, .2); }
.vnpt-auth-platform-ring--top { inset: -6% 16% 14%; border: 2px solid rgba(178, 241, 255, .7); background: radial-gradient(ellipse at 78% 15%, rgba(224, 242, 254, .15), transparent 45%), radial-gradient(ellipse, rgba(31, 165, 255, .24), rgba(4, 66, 164, .08) 65%); box-shadow: 0 0 10px rgba(73, 205, 255, .42), inset 0 0 15px rgba(73, 205, 255, .26); }
.vnpt-auth-platform-ripple { position: absolute; inset: -5% 12%; border: 1px solid rgba(133, 232, 255, .52); border-radius: 50%; opacity: 0; animation: vnpt-auth-ripple var(--vnpt-auth-motion-orbit-a) ease-out infinite; }
.vnpt-auth-platform-light { position: absolute; left: 42%; bottom: 30%; width: 20%; height: 230%; background: linear-gradient(0deg, rgba(85, 216, 255, .16), transparent); mask-image: linear-gradient(90deg, transparent, black 50%, transparent); }

.vnpt-auth-2fa { position: absolute; z-index: 6; bottom: 0; left: 0; display: flex; width: min(100%, 320px); min-height: 78px; align-items: center; gap: 15px; padding: 14px 18px; border: 1px solid rgba(190, 230, 255, .14); border-radius: 18px; background: linear-gradient(225deg, rgba(140, 205, 255, .1), rgba(40, 95, 185, .07)); box-shadow: 0 10px 28px rgba(0, 18, 55, .14), inset -1px 1px 0 rgba(233, 249, 255, .1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: vnpt-auth-enter 550ms 450ms backwards; }
.vnpt-auth-2fa-icon { display: grid; flex: 0 0 auto; width: 40px; height: 45px; place-items: center; border-radius: 13px; color: #b9ecff; background: rgba(63, 151, 247, .15); box-shadow: inset 0 1px 0 rgba(155, 223, 255, .14); }
.vnpt-auth-2fa-icon .vnpt-auth-icon { width: 25px; height: 25px; }
.vnpt-auth-2fa strong { font-size: 13px; font-weight: 600; }
.vnpt-auth-2fa p { margin: 5px 0 0; color: var(--vnpt-auth-secondary); font-size: 12px; }
.vnpt-auth-2fa-arrow { margin-left: auto; width: 17px; opacity: .7; }

.vnpt-auth-pane { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 0; }
.vnpt-auth-card-ambient { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.vnpt-auth-card-ambient--cyan {
    top: 2%;
    right: -22%;
    width: min(95%, 420px);
    height: 380px;
    background: radial-gradient(ellipse, rgba(34, 184, 255, .075), rgba(34, 184, 255, .012) 48%, transparent 72%);
}
.vnpt-auth-card-ambient--blue {
    top: 26%;
    left: -22%;
    width: min(95%, 420px);
    height: 360px;
    background: radial-gradient(ellipse, rgba(0, 91, 219, .065), rgba(0, 50, 160, .014) 55%, transparent 72%);
}
.vnpt-auth-card-ambient--core {
    top: 15%;
    left: 8%;
    width: min(95%, 440px);
    height: 480px;
    background: radial-gradient(ellipse at 75% 30%, rgba(0, 70, 170, .018), transparent 72%);
}
.vnpt-auth-card {
    position: relative;
    isolation: isolate;
    width: min(100%, var(--vnpt-auth-card-width));
    padding: var(--vnpt-auth-space-8) 34px 26px;
    border: 1px solid var(--vnpt-auth-glass-border);
    border-radius: var(--vnpt-auth-radius-card);
    background: var(--vnpt-auth-glass-bg);
    box-shadow: var(--vnpt-auth-shadow);
    backdrop-filter: blur(var(--vnpt-auth-glass-blur)) saturate(var(--vnpt-auth-glass-saturation));
    -webkit-backdrop-filter: blur(var(--vnpt-auth-glass-blur)) saturate(var(--vnpt-auth-glass-saturation));
    animation: vnpt-auth-card-enter 620ms 380ms backwards;
}
.vnpt-auth-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        /* Local reading-zone absorption; the rest of the crystal stays unfilled. */
        linear-gradient(0deg, rgba(3, 18, 38, .40), rgba(3, 18, 38, .32) 16%, transparent 38%),
        /* Curved reflected environment, not a white fill across the slab. */
        radial-gradient(ellipse 52% 38% at 82% 12%, rgba(255, 255, 255, .13), rgba(130, 220, 255, .045) 26%, transparent 65%),
        radial-gradient(ellipse 20% 46% at 100% 40%, rgba(94, 214, 255, .025), transparent 73%),
        radial-gradient(ellipse 75% 48% at 106% -12%, transparent 50%, rgba(94, 214, 255, .065) 60%, rgba(156, 235, 255, .10) 63%, rgba(94, 214, 255, .025) 67%, transparent 73%),
        linear-gradient(118deg, transparent 54%, rgba(94, 214, 255, .025) 60%, rgba(156, 235, 255, .065) 65%, rgba(0, 79, 175, .04) 70%, transparent 75%),
        radial-gradient(ellipse at 2% 92%, rgba(0, 102, 255, .012), transparent 50%);
    animation: vnpt-auth-reveal 500ms 480ms backwards;
}
.vnpt-auth-card::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background:
        /* Local top/right caustics; the lower and left edges stay quiet. */
        radial-gradient(circle 40px at 82% 0, rgba(255, 255, 255, .85), rgba(156, 235, 255, .32) 28%, transparent 75%),
        radial-gradient(ellipse 55% 44% at 100% 0, rgba(156, 235, 255, .60), transparent 76%),
        radial-gradient(ellipse 10% 52% at 100% 30%, rgba(94, 214, 255, .18), transparent 70%),
        linear-gradient(180deg, rgba(240, 252, 255, .42), rgba(156, 235, 255, .07) 26%, transparent 70%, rgba(0, 12, 30, .10));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}
.vnpt-auth-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 36px; font-size: 11px; }
.vnpt-auth-security {
    display: inline-flex; min-height: 34px; align-items: center; gap: 7px; padding: 6px 13px;
    border: 1px solid rgba(180, 230, 255, 0.24); border-radius: 999px;
    background: radial-gradient(ellipse at 95% 0, rgba(156, 235, 255, .085), transparent 55%), rgba(3, 18, 38, .34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 10px rgba(0, 15, 45, .10);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: #f7fbff; font-weight: 600; white-space: nowrap; letter-spacing: 0.04em;
}
.vnpt-auth-security .vnpt-auth-icon { width: 16px; height: 16px; color: #82dfff; }
.vnpt-auth-status {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
    border: 1px solid rgba(180, 230, 255, .22); border-radius: 999px;
    background: radial-gradient(ellipse at 95% 0, rgba(156, 235, 255, .07), transparent 55%), rgba(3, 18, 38, .34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    white-space: nowrap; color: #f7fbff; font-size: 11px;
}
.vnpt-auth-status > span {
    width: 7px; height: 7px; background: #35d59a; border-radius: 50%;
    box-shadow: 0 0 8px rgba(53, 213, 154, .30);
}
.vnpt-auth-heading { animation: vnpt-auth-enter 550ms 450ms backwards; }
.vnpt-auth-heading h2 { margin: 0; color: #ffffff; font-family: var(--font-display, "Manrope", Arial, sans-serif); font-size: clamp(28px, 2.5vw, 36px); font-weight: 800; letter-spacing: -.04em; line-height: 1.22; text-wrap: balance; }
.vnpt-auth-heading p { margin: 9px 0 0; color: #f2f8ff; font-size: 16px; line-height: 1.6; }
.vnpt-auth-heading p strong { color: #ffffff; overflow-wrap: anywhere; }
.vnpt-auth-heading--otp h2 { font-size: 29px; }
.vnpt-auth-heading--otp p { padding: 10px var(--vnpt-auth-space-3); border: 1px solid rgba(195, 230, 255, .15); border-radius: var(--vnpt-auth-space-3); background: rgba(14, 52, 120, 0.35); }
.vnpt-auth-otp-badge { display: inline-grid; place-items: center; width: 47px; height: 47px; margin-bottom: 17px; border: 1px solid rgba(116, 211, 255, .35); border-radius: 15px; color: #a5e9ff; background: rgba(63, 157, 244, 0.22); }
.vnpt-auth-otp-badge .vnpt-auth-icon { width: 26px; height: 26px; }
.vnpt-auth-form { margin-top: 31px; animation: vnpt-auth-enter 550ms 450ms backwards; }
.vnpt-auth-field { margin-bottom: 23px; }
.vnpt-auth-label { display: block; margin-bottom: 9px; color: #d6eaff; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
.vnpt-auth-input-wrap { position: relative; }
.vnpt-auth-input-icon { position: absolute; z-index: 1; left: 17px; top: 50%; width: 20px; height: 20px; color: #8ec5fc; pointer-events: none; transform: translateY(-50%); }
.vnpt-auth-input {
    display: block; width: 100%; height: var(--vnpt-auth-control-height); padding: 13px 17px 13px 49px;
    border: 1px solid var(--vnpt-auth-field-border); border-radius: var(--vnpt-auth-radius-field);
    outline: none; color: #ffffff; caret-color: var(--vnpt-auth-focus);
    background: radial-gradient(ellipse at 100% 0, rgba(94, 214, 255, .025), transparent 65%), var(--vnpt-auth-field-bg);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 2px 4px rgba(0, 10, 30, .20), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(80, 150, 240, .08);
    font-size: 15px;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.vnpt-auth-input::placeholder { color: var(--vnpt-auth-placeholder); opacity: 1; }
.vnpt-auth-input:hover { border-color: rgba(140, 215, 255, .38); background-color: rgba(10, 42, 100, .68); }
.vnpt-auth-input:focus {
    border-color: rgba(85, 205, 255, .72);
    background-color: rgba(10, 42, 104, .72);
    box-shadow: 0 0 0 3px rgba(40, 180, 255, .12), inset 0 2px 4px rgba(0, 10, 30, .20), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.vnpt-auth-input:focus-visible { outline: none; }
@media (forced-colors: active) {
    /* System contrast modes suppress shadows, so retain a native keyboard indicator. */
    .vnpt-auth-input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}
.vnpt-auth-input:-webkit-autofill, .vnpt-auth-input:-webkit-autofill:focus { -webkit-text-fill-color: #ffffff; caret-color: #a4e8ff; box-shadow: 0 0 0 1000px #08234a inset; }
.vnpt-auth-input[aria-invalid="true"] { border-color: rgba(255, 148, 162, .7); }
.vnpt-auth-input--password { padding-right: 52px; }
.vnpt-auth-input--otp { padding: 12px 16px; text-align: center; letter-spacing: .36em; font-size: 24px; font-variant-numeric: tabular-nums; }
.vnpt-auth-password-toggle { position: absolute; top: 5px; right: 4px; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #8ec5fc; background: transparent; transition: color 180ms, background-color 180ms; }
.vnpt-auth-password-toggle:hover { color: #fff; background: rgba(133, 216, 255, .1); }
.vnpt-auth-forgot { display: block; width: fit-content; min-height: 44px; margin: 2px 0 -6px auto; padding: 12px 8px 0; border-radius: 10px; background: rgba(3, 18, 38, .28); color: #e3f8ff !important; font-size: 13px; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; }
.vnpt-auth-forgot:hover { color: #fff !important; }
.vnpt-auth-submit {
    position: relative; isolation: isolate; display: flex; width: 100%; height: 56px;
    align-items: center; justify-content: center; gap: 10px; overflow: hidden;
    padding: 0 20px; border: 1px solid rgba(140, 215, 255, 0.45); border-radius: 14px;
    color: #fff; background: linear-gradient(180deg, #0c72e8 0%, #005bdb 55%, #004fc4 100%);
    box-shadow: 0 10px 28px rgba(0, 91, 219, .26), 0 0 20px rgba(22, 140, 255, .12), inset 0 1.5px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(0, 30, 90, .24);
    font-size: 18px; font-weight: 700; transition: transform 180ms, box-shadow 180ms, filter 180ms;
}
.vnpt-auth-submit::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 45% 20% at 50% 0, rgba(94, 214, 255, .16), transparent 70%); }
.vnpt-auth-submit::after { content: ""; position: absolute; inset: -30% -70%; background: linear-gradient(105deg, transparent 45%, rgba(255, 255, 255, .06) 50%, transparent 55%); transform: translateX(-50%); opacity: 0; }
.vnpt-auth-submit-arrow { width: 22px; height: 22px; transition: transform 180ms; }
@media (hover: hover) and (pointer: fine) {
    .vnpt-auth-feature:hover { transform: translateX(2px); border-color: rgba(200, 230, 255, .18); }
    .vnpt-auth-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0, 91, 219, .34), 0 0 25px rgba(22, 140, 255, .18), inset 0 1.5px 0 rgba(255, 255, 255, .42); }
    .vnpt-auth-submit:hover:not(:disabled) .vnpt-auth-submit-arrow { transform: translateX(3px); }
    .vnpt-auth-submit:hover:not(:disabled)::after { animation: vnpt-auth-button-sheen 600ms ease-out; }
}
.vnpt-auth-submit:active:not(:disabled) { transform: translateY(0); filter: brightness(.94); }
.vnpt-auth-submit:disabled { cursor: wait; filter: saturate(.8); }
.vnpt-auth-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; }
.vnpt-auth-submit[aria-busy="true"] .vnpt-auth-submit-arrow { display: none; }
.vnpt-auth-submit[aria-busy="true"] .vnpt-auth-spinner { display: inline-block; animation: vnpt-auth-spin 850ms linear infinite; }
.vnpt-auth-back { display: flex; min-height: 44px; justify-content: center; align-items: center; gap: 9px; margin-top: 13px; border-radius: 10px; background: rgba(3, 18, 38, .28); color: #e3f8ff !important; font-size: 13px; text-decoration: none; }
.vnpt-auth-back .vnpt-auth-icon { width: 17px; }
.vnpt-auth-message { display: flex; gap: 10px; margin-top: 18px; padding: 11px 12px; border: 1px solid rgba(253, 164, 181, .25); border-radius: 11px; background: rgba(104, 35, 61, .25); color: #ffd1da; }
.vnpt-auth-message .vnpt-auth-icon { width: 18px; height: 18px; margin-top: 2px; }
.vnpt-auth-message p { margin: 0; font-size: 13px; line-height: 1.55; }
.vnpt-auth-message--success { color: #b3f1d7; border-color: rgba(76, 206, 152, .23); background: rgba(19, 105, 80, .18); }
.vnpt-auth-card--error .vnpt-auth-form { margin-top: 22px; }

.vnpt-auth-support {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center;
    margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(160, 215, 255, .07);
}
.vnpt-auth-support-security, .vnpt-auth-support-link {
    display: flex; min-height: 44px; align-items: center; gap: 10px;
    color: #f2f8ff; font-size: 12px; line-height: 1.45;
}
.vnpt-auth-support .vnpt-auth-icon {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 7px;
    border-radius: 50%; color: #8edcff; background: rgba(10, 42, 105, .14);
    border: 1px solid rgba(160, 215, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    flex: 0 0 auto;
}
.vnpt-auth-support-security span { font-size: 12px; }
.vnpt-auth-support-link {
    padding: 0; border: none; background: transparent; box-shadow: none; text-decoration: none;
    transition: opacity 180ms ease, transform 180ms ease;
}
.vnpt-auth-support-link:hover { opacity: .9; transform: translateY(-1px); }
.vnpt-auth-support-link small { display: block; color: #f2f8ff; font-size: 11px; }
.vnpt-auth-support-link strong { display: block; color: #ffffff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.vnpt-auth-access-note { margin: 16px 0 0; color: #e4f1fc; font-size: 11px; line-height: 1.5; text-align: center; }
.vnpt-auth-copyright { margin: 8px 0 0; color: #e4f1fc; font-size: 12px; line-height: 1.6; text-align: center; }

@keyframes vnpt-auth-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vnpt-auth-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes vnpt-auth-card-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes vnpt-auth-aurora { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .19; } 50% { transform: translate(18px, -12px) scale(1.04); opacity: .24; } }
@keyframes vnpt-auth-particle-drift { 0%, 100% { transform: translate(0, 0); opacity: .18; } 50% { transform: translate(6px, -10px); opacity: .27; } }
@keyframes vnpt-auth-float { 0%, 100% { transform: translateY(0) rotate(-.3deg); } 50% { transform: translateY(-5px) rotate(.3deg); } }
@keyframes vnpt-auth-breathe { 0%, 100% { opacity: .2; transform: scale(.96); } 50% { opacity: .3; transform: scale(1.05); } }
@keyframes vnpt-auth-logo-sweep { 0%, 80%, 91%, 100% { opacity: 0; transform: translateX(-20%); } 82% { opacity: .3; } 90% { opacity: 0; transform: translateX(25%); } }
@keyframes vnpt-auth-orbit-a { 0%, 100% { transform: translate(-50%, -50%) rotate(-24deg); } 50% { transform: translate(-50%, -50%) rotate(-20deg); } }
@keyframes vnpt-auth-orbit-b { 0%, 100% { transform: translate(-50%, -50%) rotate(24deg); } 50% { transform: translate(-50%, -50%) rotate(28deg); } }
@keyframes vnpt-auth-orbit-c { 0%, 100% { transform: translate(-50%, -50%) rotate(-10deg); } 50% { transform: translate(-50%, -50%) rotate(-14deg); } }
@keyframes vnpt-auth-node-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes vnpt-auth-ripple { 0%, 66%, 100% { transform: scale(.9); opacity: 0; } 68% { transform: scale(.9); opacity: .12; } 99% { transform: scale(1.15); opacity: 0; } }
@keyframes vnpt-auth-button-sheen { from { opacity: 0; transform: translateX(-35%); } 30% { opacity: 1; } to { opacity: 0; transform: translateX(35%); } }
@keyframes vnpt-auth-spin { to { transform: rotate(360deg); } }

@media (max-width: 1199px) and (min-width: 768px) {
    .vnpt-auth-layout { grid-template-columns: minmax(0, 40fr) minmax(365px, 60fr); padding: 34px 30px; gap: var(--vnpt-auth-space-6); }
    .vnpt-auth-brand { width: 156px; }
    .vnpt-auth-brand-copy { margin-top: 48px; }
    .vnpt-auth-brand-copy h1 { font-size: 32px; }
    .vnpt-auth-subtitle { max-width: 310px; font-size: 16px; }
    .vnpt-auth-stage { right: 0; bottom: 74px; width: min(98%, 430px); height: 310px; min-height: 0; }
    .vnpt-auth-emblem { width: 56%; left: 22%; }
    .vnpt-auth-orbit--c { display: none; }
    .vnpt-auth-particle:nth-of-type(n+12) { display: none; }
    .vnpt-auth-features { flex-direction: row; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
    .vnpt-auth-feature { min-height: 34px; gap: 7px; padding: 6px 10px; font-size: 11px; }
    .vnpt-auth-feature .vnpt-auth-icon { width: 17px; height: 17px; }
    .vnpt-auth-card { padding: 29px 25px 24px; }
    .vnpt-auth-heading h2 { font-size: 29px; }
    .vnpt-auth-status-row { gap: 8px; margin-bottom: 30px; }
    .vnpt-auth-security { padding-right: 8px; padding-left: 8px; font-size: 9px; }
    .vnpt-auth-status { font-size: 9px; }
    .vnpt-auth-2fa { min-height: 68px; max-width: 300px; padding: 10px 14px; gap: 11px; }
}
@media (max-width: 920px) and (min-width: 768px) {
    .vnpt-auth-brand, .vnpt-auth-brand-copy { animation: none; }
    .vnpt-auth-layout { grid-template-columns: minmax(0, 1fr); width: min(100%, 680px); min-height: 100svh; padding: 32px 40px 44px; gap: 20px; }
    .vnpt-auth-brand-environment { height: 270px; }
    .vnpt-auth-brand-copy { margin-top: 26px; }
    .vnpt-auth-brand-copy h1 { font-size: 30px; }
    .vnpt-auth-subtitle { max-width: 260px; width: fit-content; padding: 8px 10px; border-radius: var(--vnpt-auth-space-2); background: rgba(3, 18, 38, .5); font-size: 14px; }
    .vnpt-auth-eyebrow { font-size: 8px; margin-bottom: 8px; }
    .vnpt-auth-features { display: none; }
    .vnpt-auth-2fa { display: none; }
    .vnpt-auth-stage { right: -10px; bottom: -10px; width: 295px; height: 265px; animation: none; }
    .vnpt-auth-emblem { width: 63%; left: 20%; }
    .vnpt-auth-card { width: min(100%, var(--vnpt-auth-card-width)); padding: var(--vnpt-auth-space-8) 34px 25px; }
    .vnpt-auth-security, .vnpt-auth-status { font-size: 11px; }
    .vnpt-auth-heading h2 { font-size: 34px; }
}
@media (max-width: 767px) {
    /* The same clear crystal surface as desktop, with darker independent fields. */
    .vnpt-auth-page { --vnpt-auth-radius-card: 26px; }
    .vnpt-auth-layout { display: block; min-height: 100svh; padding: 24px 16px 30px; }
    .vnpt-auth-scenery img { opacity: .56; object-position: 56% top; }
    .vnpt-auth-backdrop::after { background: linear-gradient(180deg, transparent, rgba(3, 18, 38, .18) 30%, rgba(3, 18, 38, .7)); }
    .vnpt-auth-brand-environment { height: 222px; }
    .vnpt-auth-brand { position: relative; z-index: 5; display: flex; width: 135px; margin: 0 auto; animation: none; }
    .vnpt-auth-brand-copy { margin: 0; }
    .vnpt-auth-brand-copy h1 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .vnpt-auth-eyebrow, .vnpt-auth-subtitle, .vnpt-auth-features, .vnpt-auth-2fa { display: none; }
    .vnpt-auth-stage { left: 50%; right: auto; bottom: -3px; width: 242px; height: 195px; min-height: 0; transform: translateX(-50%); animation: none; }
    .vnpt-auth-emblem { top: 4%; width: 54%; left: 24%; }
    .vnpt-auth-orbit-layer { inset: 10% 10% 20%; }
    .vnpt-auth-orbit--b, .vnpt-auth-orbit--c { display: none; }
    .vnpt-auth-platform { left: 14%; right: 10%; bottom: 4%; height: 14%; }
    .vnpt-auth-platform-light { height: 180%; opacity: .65; }
    .vnpt-auth-texture { display: none; }
    .vnpt-auth-particle:nth-of-type(n+8) { display: none; }
    .vnpt-auth-ambient { width: 85vw; height: 85vw; }
    .vnpt-auth-ambient--violet { display: none; }
    .vnpt-auth-pane { display: block; }
    .vnpt-auth-card { width: min(100%, var(--vnpt-auth-card-width)); margin: 0 auto; padding: 25px var(--vnpt-auth-space-6) 23px; }
    .vnpt-auth-card-ambient--cyan { top: -12%; right: -25%; width: 95%; }
    .vnpt-auth-card-ambient--blue { top: 34%; bottom: auto; left: -20%; width: 100%; }
    .vnpt-auth-status-row { gap: 8px; margin-bottom: 29px; }
    .vnpt-auth-security { min-height: 31px; gap: 5px; padding: 5px 8px; font-size: 9px; }
    .vnpt-auth-security .vnpt-auth-icon { width: 14px; height: 14px; }
    .vnpt-auth-status { gap: 5px; font-size: 9px; }
    .vnpt-auth-status > span { width: 6px; height: 6px; }
    .vnpt-auth-heading h2 { font-size: clamp(27px, 7.3vw, 32px); }
    .vnpt-auth-heading p { font-size: 14px; }
    .vnpt-auth-heading--otp h2 { font-size: 27px; }
    .vnpt-auth-form { margin-top: 26px; }
    .vnpt-auth-field { margin-bottom: 20px; }
    .vnpt-auth-label { font-size: 12px; }
    .vnpt-auth-submit { height: 55px; font-size: 19px; }
    .vnpt-auth-support { gap: 9px; margin-top: 28px; padding-top: 20px; }
    .vnpt-auth-support-security, .vnpt-auth-support-link { gap: 7px; font-size: 11px; }
    .vnpt-auth-support-link { padding-left: 10px; }
    .vnpt-auth-support .vnpt-auth-icon { width: 28px; height: 28px; padding: 5px; }
    .vnpt-auth-support-link strong { font-size: 12px; }
    .vnpt-auth-support-link small { font-size: 10px; }
    .vnpt-auth-access-note { margin-top: 17px; font-size: 11px; }
    .vnpt-auth-copyright { font-size: 11px; }
}
@media (max-width: 380px) {
    .vnpt-auth-layout { padding-right: 12px; padding-left: 12px; }
    .vnpt-auth-card { padding-right: 20px; padding-left: 20px; }
    .vnpt-auth-security { font-size: 8px; }
    .vnpt-auth-status { font-size: 8px; }
}
@media (max-height: 820px) and (min-width: 1200px) {
    .vnpt-auth-layout { padding-top: 30px; padding-bottom: 30px; }
    .vnpt-auth-brand { width: 157px; }
    .vnpt-auth-brand-copy { margin-top: 33px; }
    .vnpt-auth-brand-copy h1 { font-size: 45px; }
    .vnpt-auth-subtitle { font-size: 17px; }
    .vnpt-auth-features { margin-top: 21px; gap: 7px; }
    .vnpt-auth-stage { width: 73%; right: -2%; bottom: 29px; height: 420px; min-height: 0; }
    .vnpt-auth-2fa { min-height: 72px; width: 310px; }
}
/* Keep the complete form and footer reachable instead of compressing short screens. */
@media (max-height: 799px) and (min-width: 768px) {
    .vnpt-auth-layout { min-height: max(var(--vnpt-auth-short-screen-height), 100svh); padding-top: 44px; padding-bottom: 44px; }
}
@supports not (backdrop-filter: blur(1px)) {
    /* Keep the clear surface rather than substituting a milky fallback. */
    .vnpt-auth-heading p, .vnpt-auth-label, .vnpt-auth-support, .vnpt-auth-access-note, .vnpt-auth-copyright { text-shadow: 0 1px 3px rgba(0, 12, 32, .8); }
}
@media (prefers-reduced-motion: reduce) {
    .vnpt-auth-page *, .vnpt-auth-page *::before, .vnpt-auth-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .vnpt-auth-emblem, .vnpt-auth-orbit-layer { transform: none; }
    .vnpt-auth-emblem-reflection, .vnpt-auth-platform-ripple { opacity: 0; }
}