@font-face{
  font-family:"TH Sarabun New";
  src:url("../fonts/THSarabunNew.woff2") format("woff2"),
      url("../fonts/THSarabunNew.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"TH Sarabun New";
  src:url("../fonts/THSarabunNew Italic.woff2") format("woff2"),
      url("../fonts/THSarabunNew Italic.ttf") format("truetype");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"TH Sarabun New";
  src:url("../fonts/THSarabunNew Bold.woff2") format("woff2"),
      url("../fonts/THSarabunNew Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"TH Sarabun New";
  src:url("../fonts/THSarabunNew BoldItalic.woff2") format("woff2"),
      url("../fonts/THSarabunNew BoldItalic.ttf") format("truetype");
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

:root{
  --user-primary:#0f5fa8;
  --user-primary-strong:#0b4f8a;
  --user-ink:#16324f;
  --user-muted:#60758d;
  --user-line:rgba(148,163,184,.2);
}
*{box-sizing:border-box}
body{margin:0;font-family:"TH Sarabun New","Sarabun","Noto Sans Thai",Tahoma,sans-serif;font-size:20px}
input,button{font:inherit;box-sizing:border-box}
.login-page-user .card{width:min(440px,100%);background:rgba(255,255,255,.88);border:1px solid rgba(203,213,225,.7);border-radius:28px;box-shadow:0 26px 60px rgba(31,78,121,.14);padding:96px 32px 34px;backdrop-filter:blur(18px)}
.login-page-user .error{margin-bottom:14px;padding:10px 12px;border-radius:10px;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.login-page-user{
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  background:
    linear-gradient(rgba(255,255,255,.40), rgba(255,255,255,.40)),
    url("../images/form-page-background.png") center -140px / cover fixed,
    #f7fbff;
}

.user-footer{
  margin-top:0;
  padding:42px 0 0;
  background:linear-gradient(180deg, rgba(247,251,255,0), rgba(247,251,255,.78) 55%, rgba(247,251,255,.96));
  color:#fff;
  font-family:"Kanit","Noto Sans Thai UI","Noto Sans Thai","Sarabun",Tahoma,sans-serif;
}

.user-footer-inner{
  width:100%;
  margin:0 auto;
  padding:34px 0 28px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:48px;
  padding-inline:36px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    linear-gradient(100deg, #0d4da1 0%, #17277d 58%, #210a68 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 -10px 28px rgba(11,34,88,.12);
}

.user-footer-brand{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.user-footer-logo{
  width:48px;
  height:48px;
  object-fit:contain;
  flex:0 0 48px;
}

.user-footer-brand strong{
  display:block;
  margin-top:5px;
  font-size:17px;
  line-height:1.25;
}

.user-footer-brand p{
  margin:8px 0 0;
  color:rgba(255,255,255,.78);
  font-size:14px;
  line-height:1.35;
}

.user-footer-contact{
  display:grid;
  gap:10px;
  margin:0;
  font-style:normal;
  font-size:14px;
  font-weight:700;
}

.user-footer-contact a{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.82);
  text-decoration:none;
}

.user-footer-contact span[aria-hidden="true"]{
  color:#b8d8ff;
  width:16px;
  text-align:center;
}
.login-page-user::before{
  content:"";
  position:absolute;
  inset:0;
  background:transparent;
  pointer-events:none;
}
.login-page-user::after{
  content:"";
  position:absolute;
  inset:0;
  background:transparent;
  pointer-events:none;
}
.login-page-user .login-shell{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}
.login-page-user .login-shell::before,
.login-page-user .login-shell::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:30rem;
  height:30rem;
  border-radius:999px;
  filter:blur(30px);
  opacity:.92;
  pointer-events:none;
}
.login-page-user .login-shell::before{
  top:4%;
  left:calc(50% - 28rem);
  background:radial-gradient(circle, rgba(125,211,252,.66) 0%, rgba(125,211,252,.22) 52%, transparent 74%);
}
.login-page-user .login-shell::after{
  right:calc(50% - 29rem);
  bottom:4%;
  background:radial-gradient(circle, rgba(191,219,254,.78) 0%, rgba(191,219,254,.24) 54%, transparent 74%);
}
.login-page-user .login-page-card{position:relative;margin-inline:auto}
.login-page-user .login-brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:18px;text-align:center}
.login-page-user .login-brand-float{position:absolute;top:0;left:50%;margin:0;transform:translate(-50%,-44%)}
.login-page-user .login-brand-logo{display:block;width:120px;height:120px;padding:8px;border-radius:30px;background:rgba(255,255,255,.78);object-fit:contain;box-shadow:0 20px 36px rgba(89,144,194,.18)}
.login-page-user .login-card-head{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;text-align:center}
.login-page-user .login-title{margin:0;color:var(--user-ink);font-size:40px;line-height:1.02;text-wrap:balance}
.login-page-user .login-note{margin:10px 0 0;color:var(--user-muted);font-size:19px;line-height:1.45}
.login-page-user .login-panel{width:100%}
.login-page-user .field-group{margin-bottom:14px}
.login-page-user .field-group label{display:block;font-weight:700;margin-bottom:8px;font-size:22px;color:var(--user-ink)}
.login-page-user .password-field{display:flex;align-items:center;border:1px solid rgba(186,201,217,.92);border-radius:16px;background:rgba(248,251,254,.92);transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease}
.login-page-user .login-card input{width:100%;padding:13px 14px;border:1px solid rgba(186,201,217,.92);border-radius:16px;background:rgba(248,251,254,.92);font-size:22px;transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease}
.login-page-user .login-card input:focus,
.login-page-user .password-field:focus-within{border-color:var(--user-primary);box-shadow:0 0 0 4px rgba(15,95,168,.12);background:#fff;outline:none}
.login-page-user .password-field input{flex:1;min-width:0;padding-right:8px;border:0;background:transparent;box-shadow:none}
.login-page-user .password-field input:focus{border:0;box-shadow:none;background:transparent;outline:none}
.login-page-user .password-toggle{display:inline-grid;place-items:center;align-self:center;width:40px !important;min-width:40px;max-width:40px;height:40px;max-height:40px;margin:0 8px 0 0;padding:0;border:0;background:transparent;color:#45627d;box-shadow:none;flex:0 0 40px;line-height:1;overflow:hidden}
.login-page-user .password-toggle:hover{background:transparent;color:var(--user-primary-strong)}
.login-page-user .password-toggle-icon{width:18px;height:18px;display:block;grid-area:1/1}
.login-page-user .password-toggle.is-hidden .password-toggle-icon-eye-off{display:none}
.login-page-user .password-toggle.is-visible .password-toggle-icon-eye{display:none}
.login-page-user .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.login-page-user .login-submit{width:100%;margin-top:10px;padding:14px 16px;border:0;border-radius:16px;background:linear-gradient(135deg, #2d7fd1, var(--user-primary));color:#fff;font-size:22px;font-weight:800;box-shadow:0 16px 28px rgba(45,127,209,.22);cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
.login-page-user .login-submit:hover{filter:brightness(.98);transform:translateY(-1px);box-shadow:0 20px 34px rgba(45,127,209,.24)}
.login-page-user .email-suffix-field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border:1px solid rgba(186,201,217,.92);border-radius:16px;background:rgba(248,251,254,.92);overflow:hidden}
.login-page-user .email-suffix-field input{border:0;border-radius:0;background:transparent;box-shadow:none}
.login-page-user .email-suffix-field:focus-within{border-color:var(--user-primary);box-shadow:0 0 0 4px rgba(15,95,168,.12);background:#fff}
.login-page-user .email-suffix-addon{padding:0 14px;color:#526174;font-size:20px;font-weight:700;white-space:nowrap}
.login-page-user .user-email-links{margin-top:18px;gap:10px}
.login-page-user .user-email-links a{color:var(--user-primary-strong);font-size:18px;text-decoration:none}
.login-page-user .user-email-links a:hover{text-decoration:underline}
@media (max-width:900px){
  .login-page-user .login-shell{padding:20px}
  .login-page-user .card{padding:84px 22px 28px;border-radius:24px}
  .login-page-user .login-brand-logo{width:104px;height:104px;border-radius:24px}
  .login-page-user .login-title{font-size:34px}
  .login-page-user .login-shell::before,
  .login-page-user .login-shell::after{width:22rem;height:22rem}
  .login-page-user .email-suffix-field{grid-template-columns:1fr}
  .login-page-user .email-suffix-addon{padding:0 14px 14px;font-size:18px}
  .user-footer-inner{flex-direction:column;gap:24px}
}
@media (max-width:700px){
  .login-page-user::after{
    background:
      radial-gradient(circle 300px at -110px 60px, rgba(168, 214, 255, .16) 0 34%, rgba(168, 214, 255, .07) 48%, transparent 68%),
      radial-gradient(circle 195px at -92px 64px, rgba(255,255,255,.99) 0 73%, rgba(218,229,240,.95) 73.2%, transparent 74.2%),
      radial-gradient(circle 280px at calc(100% + 150px) calc(100% - 24px), rgba(168, 214, 255, .14) 0 34%, rgba(168, 214, 255, .06) 48%, transparent 70%),
      radial-gradient(circle 178px at calc(100% + 126px) calc(100% - 18px), rgba(255,255,255,.99) 0 73%, rgba(218,229,240,.95) 73.2%, transparent 74.2%);
  }
}
@media (prefers-reduced-motion: reduce){
  .login-page-user .password-field,
  .login-page-user .login-card input,
  .login-page-user .login-submit{transition:none}
}