/* V1.4.15l - Tối ưu riêng cho màn hình đăng nhập trên điện thoại. */
.login-body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
}

.login-system-title {
  margin: 0 0 18px;
  text-wrap: balance;
}

.login-system-title > span {
  display: block;
}

.login-system-title .login-agency-name {
  margin-top: 3px;
  font-size: .92em;
}

.login-logo-image {
  display: block;
  width: min(150px, 36vw);
  height: auto;
  max-height: 150px;
  object-fit: contain;
}

@media (max-width: 800px) {
  .login-body {
    place-items: center;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .login-box,
  .login-box.login-box-test {
    width: 100%;
    max-width: 440px;
    margin: auto;
    padding: 24px 20px;
    gap: 18px;
    border-radius: 18px;
  }

  .login-brand {
    min-width: 0;
  }

  .login-brand h1,
  .login-system-title {
    margin: 0 0 12px;
    font-size: clamp(14px, 4vw, 17px);
    line-height: 1.36;
    letter-spacing: .01em;
    overflow-wrap: normal;
    word-break: normal;
  }

  .login-logo-image {
    width: 92px;
    max-height: 92px;
  }

  .login-form {
    min-width: 0;
  }

  .login-form .field + .field,
  .login-form .field.mt {
    margin-top: 14px;
  }

  .login-form input,
  .login-form select,
  .login-form textarea {
    min-height: 46px;
    font-size: 16px; /* Ngăn iPhone tự phóng to khi chạm ô nhập. */
  }

  .login-form .btn {
    min-height: 46px;
    margin-top: 16px;
  }

  .test-login-panel h2 {
    margin-top: 0;
    font-size: 20px;
  }

  .test-login-panel p {
    margin-top: 6px;
    line-height: 1.45;
  }

  .password-login-details summary {
    padding: 10px 0;
    cursor: pointer;
  }
}

@media (max-width: 380px) {
  .login-body {
    padding: 8px;
  }

  .login-box,
  .login-box.login-box-test {
    padding: 20px 16px;
    gap: 14px;
    border-radius: 14px;
  }

  .login-brand h1,
  .login-system-title {
    font-size: 13.5px;
    line-height: 1.34;
  }

  .login-logo-image {
    width: 80px;
    max-height: 80px;
  }
}

@media (max-width: 800px) and (max-height: 680px) {
  .login-body {
    place-items: start center;
  }

  .login-box,
  .login-box.login-box-test {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .login-logo-image {
    width: 72px;
    max-height: 72px;
  }
}