/* V9.45 — nút đăng nhập dựa trên mẫu Uiverse của vinodjangid07. */
.login-action-button {
  width: 100%;
  min-height: 68px;
  margin-top: 6px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 8px solid #c0dfff;
  border-radius: 50px;
  background-color: #006aff;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 106, 255, .24);
  transition: background-color .3s, border-color .3s, box-shadow .3s, transform .3s;
}

.login-action-button__text {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
}

.login-action-button__icon {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  height: 30px;
  padding-top: 3px;
}

.login-action-button__icon svg {
  display: block;
  width: 50px;
  height: 30px;
}

.login-action-button:hover {
  border-color: #b1d8ff;
  background-color: #1b7aff;
  box-shadow: 0 12px 28px rgba(0, 106, 255, .3);
  transform: translateY(-1px);
}

.login-action-button:active {
  border-width: 5px;
  transform: translateY(1px);
}

.login-action-button:focus-visible {
  outline: 3px solid rgba(0, 106, 255, .34);
  outline-offset: 3px;
}

.login-action-button:hover .login-action-button__icon svg {
  animation: login-button-jello-vertical .9s both;
  transform-origin: left;
}

.login-action-button:disabled {
  border-color: #d6e8ff;
  background-color: #79adf7;
  box-shadow: none;
  cursor: wait;
  opacity: .78;
  transform: none;
}

@keyframes login-button-jello-vertical {
  0%, 100% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(.75, 1.25, 1); }
  40% { transform: scale3d(1.25, .75, 1); }
  50% { transform: scale3d(.85, 1.15, 1); }
  65% { transform: scale3d(1.05, .95, 1); }
  75% { transform: scale3d(.95, 1.05, 1); }
}

@media (max-width: 480px) {
  .login-action-button {
    min-height: 62px;
    padding: 8px 18px;
    border-width: 7px;
  }

  .login-action-button__text { font-size: 1.08rem; }
  .login-action-button__icon svg { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-action-button,
  .login-action-button__icon svg { transition: none; }
  .login-action-button:hover .login-action-button__icon svg { animation: none; }
}