body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 32%),
    linear-gradient(135deg, #0d6efd 0%, #20c997 45%, #198754 100%);
}

 .login-page {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 32px 16px;
 }

 .login-card {
   width: 100%;
   max-width: 460px;
   border: 0;
   border-radius: 22px;
   box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
   overflow: hidden;
 }

 .login-logo {
   width: 118px;
   height: auto;
 }

 .login-title {
   font-weight: 800;
   color: #1f2937;
 }

 .form-control,
 .input-group-text {
   border-radius: 14px;
 }

 .input-group .form-control {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

 .input-group-text {
   background: #f8fafc;
   color: #0d6efd;
   min-width: 48px;
   justify-content: center;
 }

 .password-wrapper {
   position: relative;
 }

 .toggle-password {
   position: absolute;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   color: #6c757d;
   z-index: 10;
 }

 .password-wrapper .form-control {
   padding-right: 46px;
 }

 .btn-login {
   border-radius: 14px;
   padding: 12px 16px;
 }

 .thaiid-btn {
   border-radius: 14px;
   padding: 11px 16px;
   border: 1px solid #e5e7eb;
   background: #fff;
 }

 .thaiid-btn:hover {
   background: #f8fafc;
 }

 .separator {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #94a3b8;
   font-size: 14px;
 }

 .separator::before,
 .separator::after {
   content: "";
   flex: 1;
   height: 1px;
   background: #e5e7eb;
 }

 .login-footer {
   max-width: 760px;
   color: rgba(255, 255, 255, .88);
   font-size: 14px;
 }

 .login-footer a {
   color: #fff;
   text-decoration: none;
 }

 .login-footer a:hover {
   text-decoration: underline;
 }