@tailwind base;
@tailwind components;
@tailwind utilities;
@import './scrollbar.css';

html {
  @apply text-neutral-900 scroll-smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
  @apply !font-heading !leading-[1.5];
}

h1 {
  @apply font-semibold !text-h1;
}

h2 {
  @apply font-semibold !text-h2;
}

h3 {
  @apply font-semibold !text-h3;
}

@layer {
  * {
    @apply font-main leading-[1.5];
  }
}

@components {
  .app-content {
    @apply prose font-main;
  }
}

/* Sliders */

.slick-dots {
  @apply absolute -translate-x-1/2 bottom-5 left-1/2;
}

.slick-dots .slick-active .custom-dot {
  @apply bg-white/70;
}

.slick-dots li {
  @apply w-[10px] h-[10px];
}

.ytp-gradient-top,
.ytp-chrome-top.ytp-show-cards-title {
  display: none;
}

@media (max-width: 768px) {
  .g-capcha {
    width: 100% !important;
    height: auto !important;
  }
}
.menu-container:not(:hover) #sub-menu {
  display: none;
}
.menu-container:not(:hover) .menu-item {
  /* @apply !font-medium; */
  color: inherit !important;
}

.form-sm span.input-label {
  @apply hidden;
}

.form-sm label,
.form-sm .form-label {
  @apply mb-3;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 60px;
  }
}

.square-slider .slick-slide {
  @apply !aspect-square !overflow-clip;
}

@keyframes scale-up-down {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}

.animate-infinit {
  animation: scale-up-down 2s infinite;
}

.icon-shake {
  animation: shake 2s ease-in-out infinite;
}

@media only screen and (max-width: 640px) {
  .icon-shake {
    display: none;
  }
}

.cloud {
  position: absolute;
  animation: moveCloud 10s linear infinite; /* Tạo animation */
}

@keyframes moveCloud {
  100% {
    left: 100%;
  }
}

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

.fade-in {
  opacity: 0;
  animation-fill-mode: forwards;
}

.animate-slide-up {
  animation: slide-up 0.6s ease-out forwards;
}

.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-300 {
  animation-delay: 0.3s;
}
.delay-400 {
  animation-delay: 0.4s;
}
.delay-500 {
  animation-delay: 0.5s;
}
.delay-600 {
  animation-delay: 0.6s;
}
.delay-700 {
  animation-delay: 0.7s;
}