:root{font-family:Arial,Helvetica,sans-serif;color:#202122;background:#f0efeb;font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:76px 32px}.card{width:min(100%,960px);min-height:680px;padding:11px;display:grid;grid-template-columns:43% 57%;background:#fdfdfd;border-radius:25px}.artwork{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;border-radius:21px;background:#f0efeb}.brand{position:absolute;left:20px;top:19px;color:#151515;z-index:1}.artwork img{display:block;width:125%;max-width:none;height:auto;mix-blend-mode:multiply}.artwork-caption{position:absolute;bottom:25px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1.8px;color:#77756f}.form-panel{display:flex;align-items:center;justify-content:center;padding:52px 42px}.login-page{width:100%;max-width:280px}header{text-align:center}h1{margin:0;font-size:30px;line-height:1.2;font-weight:700;letter-spacing:-1px}header p{color:#858585;font-size:10px;margin:11px 0 0;line-height:1.5}form{margin-top:52px}.field+.field{margin-top:29px}.field>label{display:block;font-size:10px;color:#808080;margin-bottom:2px}.input-line{display:flex;align-items:center;border-bottom:1px solid #a5a5a5;transition:border-color .2s;min-height:32px}.input-line:focus-within{border-bottom-color:#202122;box-shadow:0 1px 0 #202122}input,button{font:inherit}input[type=email],input[type=password],input[type=text]{min-width:0;width:100%;border:0;outline:0;background:transparent;padding:5px 0 10px;font-size:12px;color:#202122;border-radius:0}input::placeholder{color:#737373;opacity:1}input[type=email]::placeholder{color:#343434}.reveal{border:0;background:transparent;display:grid;place-items:center;width:34px;height:34px;margin-top:-5px;margin-right:-5px;padding:7px;color:#737373;cursor:pointer}.reveal svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}.reveal[aria-pressed=true]{color:#151515}.options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:13px 0 25px;font-size:10px}.remember{display:flex;align-items:center;gap:6px;color:#737373;cursor:pointer}.remember input{width:12px;height:12px;margin:0;accent-color:#202122}.forgot{padding:3px 0;border:0;background:none;color:#868686;font-size:10px;cursor:pointer}.forgot:hover{color:#202122;text-decoration:underline}.submit,.provider{width:100%;min-height:44px;border:0;border-radius:30px;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s,transform .2s}.submit{color:#fff;background:#202122}.submit:hover{background:#38393a}.provider{background:#f1f1f1;color:#202122;margin-top:14px}.provider:hover{background:#e9e9e9}.submit:active,.provider:active{transform:scale(.99)}button:focus-visible,a:focus-visible,input[type=checkbox]:focus-visible{outline:2px solid #555;outline-offset:4px}.status{font-size:11px;line-height:1.6;color:#737373;margin:18px 0 0}.status:empty{display:none}footer{position:fixed;bottom:28px;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;gap:20px}.pill{border:1px solid #292929;border-radius:20px;padding:4px 10px;font-size:9px;letter-spacing:.8px;white-space:nowrap}.palette{display:flex;gap:15px;position:absolute;left:50%;transform:translateX(-50%)}.palette i{width:12px;height:12px;border-radius:50%;background:#d90750}.palette i:nth-child(2){background:#1265ef}.palette i:nth-child(3){background:#168b77}.palette i:nth-child(4){background:#b579df}@media(min-width:1500px){.card{width:1040px;min-height:720px}}@media(max-width:760px){body{padding:35px 20px 85px}.card{min-height:560px;grid-template-columns:42% 58%}.form-panel{padding:38px 24px}.artwork img{width:155%}.artwork-caption{font-size:7px;letter-spacing:1px}h1{font-size:26px}.pill{font-size:8px}footer{left:20px;right:20px;bottom:20px}.palette{gap:9px}.palette i{width:9px;height:9px}}@media(max-width:560px){body{align-items:flex-start;padding:24px 16px 30px;display:block}.card{max-width:400px;margin:auto;grid-template-columns:1fr;border-radius:22px;padding:8px;min-height:0}.artwork{height:260px;border-radius:16px}.artwork img{width:300px}.brand{left:14px;top:14px}.brand svg{width:27px}.artwork-caption{display:none}.form-panel{padding:35px 27px 38px}.login-page{max-width:300px}h1{font-size:30px}form{margin-top:38px}input[type=email],input[type=password],input[type=text]{font-size:16px}.status{font-size:10px}footer{position:relative;left:auto;right:auto;bottom:auto;margin:28px auto 0;max-width:400px;flex-wrap:wrap;justify-content:center;gap:13px}.palette{position:static;transform:none;order:3;width:100%;justify-content:center;margin-top:7px}}
/* Refined account panel */
:root{color:#182339}body{background:radial-gradient(ellipse at 80% 20%,#f7f8fa 0,transparent 52%),#f0efeb}.card{width:min(100%,1020px);min-height:720px;border:1px solid #ffffffd9;box-shadow:0 24px 80px -38px #24334b30;background:#fff;grid-template-columns:44% 56%;border-radius:28px}.artwork{border-radius:20px}.artwork .brand img{width:30px;height:36px;mix-blend-mode:normal}.form-panel{padding:44px 54px}.login-page{max-width:310px}header{text-align:left}.form-logo{display:inline-flex;align-items:center;justify-content:center;margin-bottom:22px}.form-logo img{display:block;width:50px;height:60px}header .eyebrow{font-size:9px;letter-spacing:2.1px;font-weight:600;color:#8090a5;margin:0 0 12px}h1{font-size:34px;letter-spacing:-1.4px;line-height:1.15;font-weight:600;color:#19263b}h1 span{color:#1b8bd6}header .intro{font-size:12px;color:#8791a0;margin:12px 0 0;line-height:1.7}form{margin-top:32px}.field+.field{margin-top:20px}.field>label{font-size:11px;font-weight:600;color:#465268;margin-bottom:9px}.input-line{min-height:48px;border:1px solid #e3e7ed;background:#fafbfd;border-radius:11px;padding:0 14px;transition:background .2s,border-color .2s,box-shadow .2s}.input-line:focus-within{background:#fff;border-color:#5598e1;box-shadow:0 0 0 3px #2287e00b}input[type=email],input[type=password],input[type=text]{padding:14px 0;font-size:12px;color:#24354c}input::placeholder,input[type=email]::placeholder{color:#a1a9b5}.reveal{margin-top:0;color:#8b96a5}.options{margin:17px 0 25px;font-size:10px}.remember{color:#7e8898;gap:7px}.remember input{width:13px;height:13px;accent-color:#1a6cc2}.forgot{color:#507399;font-size:10px}.submit,.provider{min-height:47px;border-radius:11px;font-size:12px}.submit{background:linear-gradient(115deg,#1b304a,#223f60);box-shadow:0 7px 14px -7px #233d6470;gap:12px}.submit:hover{background:linear-gradient(115deg,#244360,#2b547c)}.submit svg{position:absolute;right:17px}.submit{position:relative}.divider{display:flex;align-items:center;gap:13px;margin:21px 0;color:#a0a8b4;font-size:9px;letter-spacing:.25px}.divider::before,.divider::after{content:"";height:1px;background:#edf0f4;flex:1}.provider{background:#fff;border:1px solid #e3e7ed;margin-top:0;color:#42506a;font-weight:500}.provider:hover{background:#f7f9fc;border-color:#ced7e4}.status{color:#708097}.pill{color:#777f89;border-color:#bfc2c6;font-size:8px}.palette i{width:9px;height:9px}.palette{gap:12px}.artwork-caption{color:#8b8a87;font-size:8px;letter-spacing:1.6px}@media(min-width:1500px){.card{width:1080px;min-height:750px}}@media(max-width:760px){.card{grid-template-columns:40% 60%;min-height:680px}.form-panel{padding:35px 26px}h1{font-size:30px}.artwork .brand img{width:27px;height:32px}}@media(max-width:560px){body{background:#f0efeb}.card{grid-template-columns:1fr;min-height:0;border-radius:24px}.artwork{height:210px}.artwork>img{width:255px}.form-panel{padding:30px 26px 36px}.form-logo{margin-bottom:18px}.form-logo img{width:40px;height:48px}h1{font-size:32px}header .intro{font-size:11px}form{margin-top:28px}input[type=email],input[type=password],input[type=text]{font-size:16px}.login-page{max-width:310px}.options{font-size:10px}.forgot{font-size:10px}}
/* Let the illustration extend naturally into the page background. */
@media(min-width:561px){
  .card{position:relative;isolation:isolate;overflow:visible;background:transparent;border:0;box-shadow:none;padding:0;grid-template-columns:44% 56%}
  .artwork{overflow:visible;background:transparent;border-radius:0;z-index:0}
  .artwork>img{position:relative;width:145%;max-width:none;flex-shrink:0;mix-blend-mode:multiply;transform:translateX(-4%);pointer-events:none}
  .artwork .brand{top:25px;left:10px}
  .artwork-caption{bottom:28px}
  .form-panel{position:relative;z-index:1;background:rgba(255,255,255,.97);border:1px solid #fff;border-radius:28px;box-shadow:0 26px 80px -36px #25395235;margin:15px 0 15px 12px}
}
@media(min-width:561px) and (max-width:760px){
  .card{grid-template-columns:40% 60%}
  .artwork>img{width:150%;transform:translateX(-1%)}
  .form-panel{margin-left:0;border-radius:23px}
}
@media(max-width:560px){
  .card{background:transparent;border:0;box-shadow:none;padding:0;overflow:visible}
  .artwork{height:270px;background:transparent;overflow:visible;border-radius:0}
  .artwork>img{width:min(112%,380px);max-width:none;mix-blend-mode:multiply;pointer-events:none}
  .artwork .brand{left:10px;top:6px}
  .form-panel{position:relative;background:#fff;border:1px solid #ffffffd9;border-radius:24px;box-shadow:0 18px 50px -30px #25395235}
}

/* Center the logo above the form. */
.form-logo{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
/* Transparent artwork crosses the edge of the white panel. */
@media(min-width:561px){
  .artwork{z-index:2;pointer-events:none}
  .artwork>img{width:128%;transform:translateX(0);mix-blend-mode:normal}
  .form-panel{z-index:1;padding-left:76px;padding-right:38px}
}
@media(min-width:561px) and (max-width:760px){
  .artwork>img{width:124%}
  .form-panel{padding-left:42px;padding-right:22px}
}
@media(max-width:560px){
  .artwork{z-index:2;pointer-events:none;margin-bottom:-20px}
  .artwork>img{mix-blend-mode:normal;width:min(100%,320px)}
  .form-panel{padding-top:44px}
}

/* Vietnamese form labels and reference input styling. */
.field>label.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h1{font-size:29px;letter-spacing:-.8px;line-height:1.3}
.input-line{min-height:54px;background:#fff;border-color:#ccd2da;border-radius:15px}
.field+.field{margin-top:12px}
input::placeholder{color:#657185}
.submit{background:#92bdf2;border-radius:28px;box-shadow:none;font-size:13px}
.submit:hover{background:#6fa7ed}
@media(max-width:560px){h1{font-size:27px}#email{font-size:13px}}

/* Primary button color from the reference. */
.submit{background:#1265ef;color:#fff}
.submit:hover{background:#0053d9}

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/be-vietnam-pro-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/be-vietnam-pro-500.ttf) format('truetype');
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/be-vietnam-pro-600.ttf) format('truetype');
}

:root{font-family:'Be Vietnam Pro',Arial,sans-serif}
input,button{font-family:inherit}
input[type=email],input[type=password],input[type=text]{font-size:12px;font-weight:400;line-height:1.6;letter-spacing:0}
.options,.forgot{font-size:11px;line-height:1.6}
.remember{color:#68768a}
.submit{font-size:13px;font-weight:600;letter-spacing:0}
.provider{font-size:12px;font-weight:500}
.divider{font-size:10px;letter-spacing:0}
.status{font-size:11px;line-height:1.8}
@media(max-width:560px){input[type=email],input[type=password],input[type=text],#email{font-size:16px}#email::placeholder{font-size:11px}.options,.forgot{font-size:10px}}

/* Match both placeholders on mobile, including when password is revealed. */
@media(max-width:560px){
  #email::placeholder,#password::placeholder{font-size:11px;font-weight:400;line-height:1.6;color:#657185}
}
/* Luxury Dark SaaS login palette. */
:root { background:#0B0F14; color:#F5F7FA; color-scheme:dark; }
body { background:#0B0F14; }
.card { background:transparent; border-color:#26303C; box-shadow:none; }
.form-panel { background:#111720; border:1px solid #26303C; border-radius:14px; box-shadow:0 12px 36px #00000025; }
.artwork { background:transparent; }
.artwork-caption,header p,.remember,.status { color:#A7B0BC; }
h1,.field>label { color:#F5F7FA; }
.input-line { background:#0B0F14; border-color:#26303C; border-radius:10px; }
.input-line:focus-within { background:#0B0F14; border-color:#C8A96B; box-shadow:0 0 0 3px #C8A96B16; }
input[type=email],input[type=text],input[type=password] { color:#F5F7FA; background:transparent; }
input::placeholder,#email::placeholder,#password::placeholder { color:#A7B0BC; }
.submit { background:#C8A96B; color:#0B0F14; border-radius:10px; box-shadow:none; }
.submit:hover { background:#E0C27A; }
.provider { background:#17202B; color:#F5F7FA; border-color:#26303C; border-radius:10px; }
.provider:hover { background:#26303C; border-color:#667180; }
.forgot,.reveal,.reveal[aria-pressed=true] { color:#C8A96B; }
.remember input { accent-color:#C8A96B; }
.divider { color:#A7B0BC; }
.divider::before,.divider::after { background:#26303C; }
button:focus-visible,a:focus-visible,input[type=checkbox]:focus-visible { outline-color:#C8A96B; }
/* Keep mobile authentication visible even when scripts or artwork cannot load. */
@media (max-width:700px) {
  body { display:block; padding:24px 16px; min-height:100svh; }
  .card { display:block; width:100%; max-width:420px; min-height:0; margin:0 auto; padding:0; }
  .card .artwork { display:none; }
  .card .form-panel { margin:0; padding:30px 24px; }
  .card .login-page { max-width:none; }
  .card input[type=text],.card input[type=password] { font-size:16px; }
  .card .options,.card .forgot { font-size:12px; }
  .card .submit,.card .provider { min-height:48px; }
}
.card .status:not(:empty) { padding:12px; margin:0 0 16px; background:#421C22; color:#F87171; border-radius:8px; font-size:13px; line-height:1.6; }
/* Stable touch target: the input must not shrink the password visibility button. */
.card .reveal {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  margin: 0 -8px 0 4px;
  padding: 14px;
  position: relative;
  z-index: 1;
  touch-action: manipulation;
  border-radius: 8px;
}
.card .reveal svg { pointer-events: none; }
.card .reveal[aria-pressed=true] { background: #C8A96B18; }
.login-script-note { margin: 14px 0; color:#A7B0BC; font-size:13px; line-height:1.7; }

/* Login brand: a deliberate round emblem and a readable wordmark. */
.card .form-panel .login-brand { display:flex; align-items:center; justify-content:center; gap:16px; width:fit-content; max-width:100%; margin:0 auto 24px; text-decoration:none; }
.card .login-brand-mark { display:flex; align-items:center; justify-content:center; flex:0 0 64px; width:64px; height:64px; overflow:hidden; border-radius:50%; background:#fff; border:1px solid #DCE7F0; box-shadow:0 4px 16px #00000020; }
.card .login-brand-mark img { display:block; width:44px; height:53px; object-fit:contain; }
.card .login-brand-copy { display:flex; flex-direction:column; gap:7px; text-align:left; }
.card .login-brand-name { color:#F3F6FA; font-size:20px; font-weight:750; line-height:1.2; letter-spacing:.025em; white-space:nowrap; }
.card .login-brand-name > span { color:#C8A96B; font-weight:500; }
.card .login-brand-caption { color:#A7B4C5; font-size:9px; font-weight:500; line-height:1.5; letter-spacing:.16em; }
.card .login-brand:focus-visible { outline:2px solid #C8A96B; outline-offset:8px; border-radius:12px; }
@media(max-width:700px) {
 .card .form-panel .login-brand { gap:12px; margin-bottom:20px; }
 .card .login-brand-mark { flex-basis:56px; width:56px; height:56px; }
 .card .login-brand-mark img { width:38px; height:46px; }
 .card .login-brand-name { font-size:18px; }
 .card .login-brand-caption { font-size:8px; letter-spacing:.12em; }
}