[data-drupal-messages] {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  width: 350px;
  max-width: 100%;
  pointer-events: none; /* Cho phép click xuyên */
}

[data-drupal-messages] .messages__wrapper {
  pointer-events: auto; /* Nhưng click được trên message */
}

.messages__content {
  animation: slideIn 0.3s ease-out, fadeOut 0.5s ease-in 5s forwards;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 1rem;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}