@keyframes float-y {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float-y {
  animation: float-y 4s ease-in-out infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}

.htmx-settling nav button {
  transition: all 0.2s;
}
/* Style khi một nút menu được active */
nav button.active-tab {
  background-color: #059669; /* bg-emerald-600 */
  color: white;
  box-shadow: 0 20px 25px -5px rgb(16 185 129 / 0.1);
}

.ts-wrapper {
  width: 100%;
}

.ts-control {
  border-radius: 1rem !important;
  border: 1px solid rgb(241 245 249) !important;
  background: rgb(248 250 252) !important;

  min-height: 56px !important;

  padding: 12px 24px !important;

  font-size: 0.875rem;
  font-weight: 700;

  color: rgb(15 23 42);

  box-shadow: none !important;
}

.ts-control:focus-within {
  border-color: rgb(16 185 129) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
}

.ts-dropdown {
  border-radius: 1rem;
  border: 1px solid rgb(241 245 249);
  overflow: hidden;
}

.ts-dropdown .option {
  padding: 12px 16px;
}