:root{
  --mf-blue:#003da5;
  --mf-navy:#061f49;
  --mf-yellow:#ffc400;
  --mf-white:#ffffff;
  --mf-soft:#f4f7fb;
  --mf-line:#dfe7f2;
  --mf-text:#0a2857;
  --mf-muted:#66758c;
  --mf-danger:#b42318;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  min-height:100%;
  font-family:"Prompt","Kanit","Noto Sans Thai",Arial,sans-serif;
  background:var(--mf-soft);
  color:var(--mf-text);
}
body.mf-login-page{
  min-height:100vh;
  overflow:hidden;
}
a{color:inherit}
button,input{font:inherit}

/* Desktop: fit the complete login inside one browser screen. */
.mf-login-shell{
  width:min(1360px,calc(100vw - 36px));
  height:min(820px,calc(100vh - 28px));
  min-height:620px;
  margin:14px auto;
  display:grid;
  grid-template-columns:minmax(0,1.33fr) minmax(390px,.87fr);
  overflow:hidden;
  background:var(--mf-white);
  border:1px solid rgba(6,31,73,.08);
  border-radius:24px;
  box-shadow:0 22px 65px rgba(4,30,72,.13);
}

.mf-login-visual{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:var(--mf-navy);
}
.mf-login-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(2,22,57,.05),transparent 46%);
  pointer-events:none;
}
.mf-login-visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}

.mf-login-panel{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px clamp(22px,3vw,42px);
  overflow:auto;
  background:
    radial-gradient(circle at 100% 0,rgba(255,196,0,.10),transparent 26%),
    linear-gradient(180deg,#fff 0%,#f7f9fd 100%);
  border-left:1px solid rgba(6,31,73,.06);
}

.mf-login-card{
  width:min(100%,470px);
  margin:auto;
}

.mf-login-home{
  display:inline-flex;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  color:var(--mf-muted);
  margin-bottom:12px;
}
.mf-login-home:hover{color:var(--mf-blue)}

.mf-login-heading{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:14px;
}
.mf-login-mark{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border:3px solid var(--mf-yellow);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:900;
  font-style:italic;
  color:var(--mf-navy);
  background:#fff;
}
.mf-login-heading span{
  display:block;
  font-size:20px;
  font-weight:900;
  letter-spacing:.01em;
  color:var(--mf-navy);
}
.mf-login-heading small{
  display:block;
  margin-top:1px;
  font-size:9px;
  letter-spacing:.15em;
  color:var(--mf-muted);
}

.mf-login-copy{margin-bottom:14px}
.mf-login-eyebrow{
  margin:0 0 4px;
  color:var(--mf-blue)!important;
  font-size:12px!important;
  font-weight:800;
  letter-spacing:.06em;
}
.mf-login-copy h1{
  margin:0 0 6px;
  font-size:clamp(25px,2.5vw,34px);
  line-height:1.18;
  color:var(--mf-navy);
}
.mf-login-copy p{
  margin:0;
  color:var(--mf-muted);
  font-size:13px;
  line-height:1.55;
}

.mf-login-alert{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:11px;
  background:#fff2f0;
  border:1px solid #fecdca;
  color:var(--mf-danger);
  font-weight:700;
  font-size:13px;
}

.mf-login-form{display:grid;gap:7px}
.mf-login-form label{
  font-size:13px;
  font-weight:800;
  color:var(--mf-navy);
  margin-top:2px;
}
.mf-login-form input{
  width:100%;
  height:48px;
  border:1px solid #cbd7e8;
  border-radius:12px;
  padding:0 14px;
  background:#fff;
  color:var(--mf-navy);
  outline:none;
  transition:.18s ease;
}
.mf-login-form input:focus{
  border-color:var(--mf-blue);
  box-shadow:0 0 0 4px rgba(0,61,165,.1);
}
.mf-password-wrap{position:relative}
.mf-password-wrap input{padding-right:72px}
.mf-password-toggle{
  position:absolute;
  right:7px;
  top:7px;
  height:34px;
  border:0;
  border-radius:8px;
  padding:0 11px;
  background:#eef3fa;
  color:var(--mf-blue);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.mf-login-submit{
  height:50px;
  margin-top:8px;
  border:0;
  border-radius:13px;
  background:var(--mf-yellow);
  color:var(--mf-navy);
  font-weight:900;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(255,196,0,.25);
  transition:.18s ease;
}
.mf-login-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 13px 26px rgba(255,196,0,.32);
}

.mf-login-entry-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:14px;
}
.mf-login-entry-links a{
  min-width:0;
  text-decoration:none;
  border:1px solid var(--mf-line);
  border-radius:12px;
  padding:10px 11px;
  background:#fbfcfe;
  transition:.18s ease;
}
.mf-login-entry-links a:hover{
  border-color:var(--mf-blue);
  background:#f3f7ff;
  transform:translateY(-1px);
}
.mf-login-entry-links strong,
.mf-login-entry-links span{display:block}
.mf-login-entry-links strong{
  font-size:13px;
  line-height:1.25;
  color:var(--mf-navy);
}
.mf-login-entry-links span{
  margin-top:3px;
  font-size:10px;
  line-height:1.3;
  color:var(--mf-muted);
}
.mf-login-security{
  margin:13px 0 0;
  text-align:center;
  font-size:10px;
  color:var(--mf-muted);
  line-height:1.45;
}

/* Short desktop screens: compact a little more, still no page scroll. */
@media (min-width:821px) and (max-height:720px){
  .mf-login-shell{
    height:calc(100vh - 16px);
    min-height:0;
    margin:8px auto;
    border-radius:18px;
  }
  .mf-login-panel{padding:12px 24px}
  .mf-login-home{margin-bottom:8px}
  .mf-login-heading{margin-bottom:9px}
  .mf-login-mark{width:40px;height:40px;flex-basis:40px;font-size:16px}
  .mf-login-heading span{font-size:18px}
  .mf-login-copy{margin-bottom:10px}
  .mf-login-copy h1{font-size:25px}
  .mf-login-copy p{font-size:12px;line-height:1.45}
  .mf-login-form{gap:5px}
  .mf-login-form input{height:43px}
  .mf-password-toggle{top:5px;height:33px}
  .mf-login-submit{height:45px;margin-top:5px}
  .mf-login-entry-links{margin-top:10px}
  .mf-login-security{margin-top:9px}
}

/* Tablet/mobile may scroll naturally; desktop remains locked to one screen. */
@media (max-width:820px){
  body.mf-login-page{overflow:auto}
  .mf-login-shell{
    width:100%;
    height:auto;
    min-height:100vh;
    margin:0;
    display:block;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .mf-login-visual{
    height:clamp(235px,42vw,390px);
  }
  .mf-login-visual img{
    object-position:center center;
  }
  .mf-login-panel{
    overflow:visible;
    padding:22px;
    margin-top:-24px;
    position:relative;
    z-index:2;
    background:transparent;
    border-left:0;
  }
  .mf-login-card{
    max-width:560px;
    padding:24px;
    border:1px solid var(--mf-line);
    border-radius:22px;
    background:#fff;
    box-shadow:0 20px 50px rgba(4,30,72,.12);
  }
}

@media (max-width:520px){
  .mf-login-visual{height:230px}
  .mf-login-panel{padding:12px;margin-top:-18px}
  .mf-login-card{padding:20px 16px;border-radius:19px}
  .mf-login-entry-links{grid-template-columns:1fr}
  .mf-login-copy h1{font-size:27px}
}