/* login.css */
body.login-page {
  font-family: 'Sarabun', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-bg { position:fixed;inset:0;pointer-events:none;overflow:hidden; }
.login-bg-shape {
  position:absolute; border-radius:50%;
  background: rgba(26,79,168,.08);
}
.shape1 { width:600px;height:600px;top:-200px;right:-200px;animation:float1 8s ease-in-out infinite; }
.shape2 { width:400px;height:400px;bottom:-100px;left:-100px;animation:float2 10s ease-in-out infinite; }
.shape3 { width:200px;height:200px;top:50%;left:30%;animation:float1 6s ease-in-out infinite reverse; }
@keyframes float1 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-30px);} }
@keyframes float2 { 0%,100%{transform:translateX(0);} 50%{transform:translateX(20px);} }

.login-container { position:relative;z-index:10;width:100%;max-width:440px;padding:20px; }

.login-card {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  overflow: hidden;
}

.login-header {
  background: linear-gradient(135deg, #0d2248, #1a4fa8);
  padding: 36px 32px 28px;
  color: #fff;
}
.login-logo {
  width: 72px; height: 72px; border-radius: 20px;
  background: rgba(26,79,168,.2);
  border: 2px solid rgba(26,79,168,.4);
  display: flex; align-items:center; justify-content:center;
  margin: 0 auto 16px;
  font-size: 36px; color: var(--accent);
}
.login-title { font-family:'Sarabun',sans-serif;font-size:17px;font-weight:800;color:#fff;margin:0 0 4px; }
.login-subtitle { color:rgba(255,255,255,.6);font-size:13px;margin:0; }

.login-body { padding: 32px; }

.form-label { font-weight:600;font-size:14px;color:#0d2248; }
.form-control { border-radius:8px;border:1.5px solid #e5e5e5;padding:10px 14px;font-family:'Sarabun',sans-serif;font-size:15px; }
.form-control:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,79,168,.15);outline:none; }
.input-group-text { background:#f9f9f9;border:1.5px solid #e5e5e5;border-right:none;color:#888; }
.input-group .form-control { border-left:none; }
.input-group .form-control:focus { border-left:1.5px solid var(--accent); }

.btn-login {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border: none; color:#fff; padding:12px; border-radius:10px;
  font-size:16px; font-weight:700; font-family:'Sarabun',sans-serif;
  transition: all .3s; cursor:pointer;
}
.btn-login:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(26,79,168,.4); color:#fff; }

.text-accent { color:var(--accent) !important; }

.login-footer { padding:16px 32px 24px; border-top:1px solid #f0f0f0; }
.login-footer a:hover { color:var(--accent) !important; }

.alert { border-radius:10px; font-size:14px; font-family:'Sarabun',sans-serif; }

/* ===== ปุ่มตาแสดง/ซ่อนรหัสผ่าน อยู่ใน input ===== */
.password-group {
  position: relative;
}
.password-group .form-control {
  padding-right: 44px; /* เผื่อที่ปุ่มตา */
  border-right: 1.5px solid #e5e5e5 !important;
}
.password-group .form-control:focus {
  border-right: 1.5px solid var(--accent) !important;
}
.password-group #togglePassword {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: none;
  border: none;
  padding: 0;
  color: #aaa;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  transition: color .2s;
}
.password-group #togglePassword:hover {
  color: var(--accent);
}