:root{
  --vnnk-blue:#124fc7;
  --vnnk-deep:#082e76;
  --vnnk-ink:#16366f;
  --vnnk-muted:#7786a4;
  --vnnk-border:#d9e3f4;
  --vnnk-white:#fff;
  --vnnk-shadow:0 28px 80px rgba(9,45,111,.22);
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body.vnnk-login-page{font-family:"TH Sarabun New","TH SarabunPSK","Noto Sans Thai",Tahoma,sans-serif;background:#eaf2fb;color:var(--vnnk-ink);font-size:18px;overflow-x:hidden}
button,input{font-family:inherit}
button{cursor:pointer}
.vnnk-login-stage{position:relative;min-height:100vh;isolation:isolate;overflow:hidden;background:#e9f1fa}
.vnnk-login-bg{position:absolute;inset:0;z-index:-3;background:url('../img/vnnk-login-final.png?v=16.5.2.3') center center/cover no-repeat}
.vnnk-login-tint{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 58%,rgba(232,241,253,.16) 69%,rgba(232,241,253,.28) 100%);pointer-events:none}
.vnnk-mobile-brand,.vnnk-mobile-features{display:none}

.vnnk-live-login{position:absolute;z-index:2;right:3.55vw;top:5.5vh;width:min(31.2vw,520px);min-width:430px;max-height:89vh;display:flex;align-items:flex-start;justify-content:center}
.vnnk-live-card{width:100%;padding:25px 30px 19px;border:1px solid rgba(208,220,239,.95);border-radius:30px;background:rgba(252,254,255,.975);box-shadow:var(--vnnk-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.vnnk-live-head{text-align:center}
.vnnk-live-logo{width:66px;height:66px;margin:0 auto 6px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(18,79,199,.13);overflow:hidden;border:1px solid #e2eaf6}
.vnnk-live-logo img{width:58px;height:58px;object-fit:contain}
.vnnk-live-title{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:clamp(30px,2.35vw,43px);line-height:1;font-weight:800;letter-spacing:-.045em;color:#14439d}
.vnnk-live-head p{margin:7px 0 0;font-size:20px;line-height:1.15;color:#23467e}
.vnnk-live-head p strong{font-weight:800;color:#1850bd}
.vnnk-live-rule{display:flex;align-items:center;justify-content:center;gap:9px;margin:12px auto 7px;width:150px}.vnnk-live-rule span{height:1px;background:#c9d8f4;flex:1}.vnnk-live-rule i{width:8px;height:8px;background:#1d5bd3;transform:rotate(45deg);display:block}
.vnnk-login-alert{margin:10px 0 7px;padding:9px 12px;border:1px solid #f1c8c8;border-radius:12px;background:#fff2f2;color:#9a3030;line-height:1.25}.vnnk-login-alert b,.vnnk-login-alert span{display:block}.vnnk-login-alert span{font-size:14px;margin-top:2px}
.vnnk-login-form{margin-top:8px}.vnnk-field{margin-top:11px}.vnnk-field label{display:block;margin:0 0 5px;font-size:17px;font-weight:800;color:#213e70}.vnnk-input-wrap{position:relative}.vnnk-input-wrap input{width:100%;height:48px;padding:0 62px 0 44px;border:1px solid var(--vnnk-border);border-radius:12px;background:#fff;color:#1f365d;font-size:17px;outline:none;box-shadow:0 3px 9px rgba(16,60,126,.025) inset;transition:border-color .16s,box-shadow .16s,background .16s}.vnnk-input-wrap input::placeholder{color:#a3adc1}.vnnk-input-wrap input:focus{border-color:#4d7de1;background:#fff;box-shadow:0 0 0 4px rgba(33,91,211,.11)}
.vnnk-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:2;width:18px;height:18px;color:#8292ad}.vnnk-input-icon svg{width:100%;height:100%;fill:currentColor;display:block}
.vnnk-password-toggle{position:absolute;right:9px;top:50%;transform:translateY(-50%);border:0;border-radius:9px;padding:5px 9px;background:#f0f4fa;color:#4f6790;font-weight:700;font-size:13px}
.vnnk-login-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 12px}.vnnk-remember{display:flex;align-items:center;gap:7px;color:#385078;font-size:15px;cursor:pointer}.vnnk-remember input{width:16px;height:16px;accent-color:#1958ce}.vnnk-help-link{border:0;background:transparent;padding:0;color:#1756cf;font-weight:800;font-size:15px}
.vnnk-login-submit{width:100%;height:50px;border:0;border-radius:14px;background:linear-gradient(180deg,#2a69ea 0%,#1150c7 100%);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px;font-weight:900;box-shadow:0 11px 25px rgba(20,79,199,.25);transition:transform .15s,box-shadow .15s}.vnnk-login-submit:hover{transform:translateY(-1px);box-shadow:0 15px 30px rgba(20,79,199,.30)}.vnnk-login-submit svg{width:20px;height:20px;fill:currentColor}
.vnnk-login-divider{display:flex;align-items:center;gap:10px;margin:11px 0;color:#6f7f9a;font-weight:800;font-size:15px}.vnnk-login-divider:before,.vnnk-login-divider:after{content:"";height:1px;background:#dce4f2;flex:1}
.vnnk-contact-button{width:100%;height:44px;border:1.5px solid #2c65d9;border-radius:13px;background:#fff;color:#1957cc;display:flex;align-items:center;justify-content:center;gap:8px;font-size:17px;font-weight:900}.vnnk-contact-button svg{width:20px;height:20px;fill:currentColor}
.vnnk-help-box{margin-top:10px;padding:10px 12px;border:1px solid #dfe8f5;border-radius:12px;background:#f6f9fd;color:#4a607f}.vnnk-help-box b{color:#23477f}.vnnk-help-box p{margin:2px 0 0;font-size:14px;line-height:1.25}
.vnnk-live-foot{margin-top:12px;padding-top:9px;border-top:1px solid #e5ebf4;text-align:center;color:#8794aa}.vnnk-live-foot span{display:block;font-size:11px;line-height:1.4}

@media(min-width:1500px) and (min-height:850px){.vnnk-live-login{right:3.45vw;top:5.2vh;width:min(31.2vw,535px)}.vnnk-live-card{padding:27px 31px 20px}.vnnk-input-wrap input{height:50px}.vnnk-login-submit{height:52px}}
@media(max-height:760px) and (min-width:900px){.vnnk-live-login{top:2.3vh;max-height:95vh}.vnnk-live-card{padding:17px 25px 13px}.vnnk-live-logo{width:54px;height:54px}.vnnk-live-logo img{width:47px;height:47px}.vnnk-live-title{font-size:31px}.vnnk-live-head p{font-size:16px}.vnnk-live-rule{margin:7px auto 3px}.vnnk-field{margin-top:7px}.vnnk-field label{font-size:15px}.vnnk-input-wrap input{height:42px}.vnnk-login-options{margin:6px 0 8px}.vnnk-login-submit{height:45px}.vnnk-login-divider{margin:8px 0}.vnnk-contact-button{height:40px}.vnnk-live-foot{margin-top:7px;padding-top:6px}}

@media(max-width:980px){
  body.vnnk-login-page{overflow:auto;background:linear-gradient(160deg,#e9f2fc,#f8fbff)}
  .vnnk-login-stage{min-height:100vh;padding:0 0 28px;overflow:visible}
  .vnnk-login-bg{position:relative;display:block;height:43vw;min-height:300px;max-height:410px;background-size:cover;background-position:24% 49%;border-radius:0 0 26px 26px;box-shadow:0 13px 36px rgba(8,46,118,.16)}
  .vnnk-login-tint{display:none}
  .vnnk-live-login{position:relative;right:auto;top:auto;width:auto;min-width:0;max-height:none;margin:-25px 18px 0}
  .vnnk-live-card{width:min(100%,600px);margin:auto;padding:28px 26px 22px;border-radius:25px;background:rgba(255,255,255,.985)}
  .vnnk-live-logo{width:68px;height:68px}.vnnk-live-logo img{width:58px;height:58px}.vnnk-live-title{font-size:40px}.vnnk-live-head p{font-size:19px}
  .vnnk-input-wrap input{height:54px;font-size:18px}.vnnk-field label{font-size:18px}.vnnk-login-submit{height:54px;font-size:21px}.vnnk-contact-button{height:49px;font-size:18px}
  .vnnk-mobile-brand{display:flex;position:absolute;z-index:3;left:22px;top:20px;align-items:center;gap:10px;padding:8px 11px;border-radius:15px;background:rgba(255,255,255,.86);box-shadow:0 8px 24px rgba(6,35,83,.11);backdrop-filter:blur(10px)}.vnnk-mobile-brand img{width:46px;height:46px;object-fit:contain}.vnnk-mobile-brand strong,.vnnk-mobile-brand span{display:block}.vnnk-mobile-brand strong{font-size:21px;color:#123c83}.vnnk-mobile-brand span{font-size:13px;color:#597095}
  .vnnk-mobile-features{display:grid;width:min(calc(100% - 36px),600px);margin:18px auto 0;grid-template-columns:1fr;gap:8px}.vnnk-mobile-features div{padding:12px 14px;border-radius:14px;background:#fff;border:1px solid #e1e9f5}.vnnk-mobile-features b,.vnnk-mobile-features span{display:block}.vnnk-mobile-features b{color:#163e83;font-size:17px}.vnnk-mobile-features span{color:#72819a;font-size:14px;margin-top:1px}
}
@media(max-width:520px){.vnnk-login-bg{height:58vw;min-height:245px;background-position:22% 50%}.vnnk-mobile-brand{left:12px;top:12px;padding:6px 9px}.vnnk-mobile-brand img{width:39px;height:39px}.vnnk-mobile-brand strong{font-size:18px}.vnnk-mobile-brand span{font-size:11px}.vnnk-live-login{margin:-15px 9px 0}.vnnk-live-card{padding:24px 17px 18px;border-radius:22px}.vnnk-live-logo{width:58px;height:58px}.vnnk-live-logo img{width:50px;height:50px}.vnnk-live-title{font-size:33px}.vnnk-live-head p{font-size:17px}.vnnk-field label{font-size:17px}.vnnk-input-wrap input{height:51px;font-size:17px}.vnnk-login-options{font-size:14px}.vnnk-login-submit{height:52px;font-size:20px}.vnnk-contact-button{height:47px;font-size:17px}.vnnk-mobile-features{width:calc(100% - 18px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}