@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

*{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100vh;
  background:#eeeeee;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  font-family:'Noto Sans Thai',sans-serif;
}

.phone{
  width:390px;
  height:844px;
  background-image:url("assets/images/login-hero.jpg");
  background-size:390px 844px;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}

/* Header hero */
.top-title{
  position:absolute;
  top:1px;
  left:0;
  width:100%;
  text-align:center;
}

.top-title h1{
  margin:5px 0 0;
  color:white;
  font-size:52px;
  font-weight:800;
  letter-spacing:5px;
}

.top-title h2{
  margin:-15px 0 0;
  color:white;
  font-size:18px;
  font-weight:700;
  letter-spacing:4px;
}

.top-title h3{
  margin:12px 0 0;
  color:white;
  font-size:17px;
  font-weight:500;
  letter-spacing:1px;
}

.yellow-line{
  width:150px;
  height:2px;
  background:#F5B400;
  border-radius:99px;
  margin:10px auto 12px;
}

.top-title p{
  margin:10px 0 0;
  font-size:12px;
  line-height:1.5;
  color:#1b2d43;
  font-weight:500;
}

/* Login card */
.login-card{
  position:absolute;
  left:19px;
  bottom:55px;
  width:352px;
  background:#ffffff;
  border-radius:30px;
  padding:28px 28px 24px;
  box-shadow:0 10px 28px rgba(0,40,90,0.12);
}

.login-card h1{
  margin:0;
  text-align:center;
  font-size:31px;
  font-weight:800;
  color:#111;
}

.subtitle{
  text-align:center;
  margin:5px 0 24px;
  color:#666;
  font-size:15px;
  font-weight:700;
  letter-spacing:1px;
  line-height:1.2;
}

label{
  display:block;
  font-size:15px;
  font-weight:800;
  margin:16px 0 7px;
  color:#111;
}

.input-box{
  height:42px;
  border:1px solid #d9d9d9;
  border-radius:8px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 13px;
  margin-bottom:20px;
}

.input-box i{
  width:18px;
  text-align:center;
  font-size:16px;
  color:#333;
}

.input-box input{
  flex:1;
  border:none;
  outline:none;
  font-size:14px;
  font-family:inherit;
  color:#111;
  background:transparent;
}

.input-box input::placeholder{
  color:#c5c5c5;
}

.primary-btn{
  width:100%;
  height:44px;
  margin-top:23px;
  border:none;
  border-radius:7px;
  background:#0046a8;
  color:white;
  font-size:18px;
  font-weight:800;
  font-family:inherit;
  cursor:pointer;
}

.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:12px 0;
}

.divider span{
  flex:1;
  height:1px;
  background:#d7d7d7;
}

.divider p{
  margin:0;
  color:#333;
  font-size:15px;
}

.outline-btn{
  width:100%;
  height:43px;
  border:1.5px solid #0046a8;
  border-radius:7px;
  background:white;
  color:#003b84;
  font-size:17px;
  font-weight:800;
  font-family:inherit;
  cursor:pointer;
}

.outline-btn i{
  margin-right:8px;
}

.forgot{
  margin:16px 0 0;
  text-align:center;
  font-size:13px;
  color:#333;
  line-height:1.6;
}

.forgot a{
  color:#000;
  font-weight:700;
  text-decoration:underline;
  margin-left:8px;
}

.version-text{
  position:absolute;
  bottom:15px;
  left:0;
  width:100%;
  text-align:center;
  font-size:9px;
  color:#0050a8;
  line-height:1.4;
}

/* GLOBAL CLICKABLE */
button,
a{
  cursor:pointer;
}
.login-error{
  color:#e53935;
  font-size:13px;
  font-weight:600;
  text-align:center;
  margin-top:10px;
  min-height:18px;
}