@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Public+Sans:wght@700;900&display=swap");

.app .course-select-action-wrap .form-select {
  width: 200px;
  margin: 0 16px;
}
.app .pagination-nav {
  display: flex;
  justify-content: flex-end;
}
.app .pagination-nav .form-select {
  width: fit-content;
  height: fit-content;
  margin-right: 15px;
}
.app .hero-section {
  animation: fadeIn 1s ease-in-out;
}
.app .courses-section {
  animation: slideUp 1s ease-in-out 0.5s both;
}
.app .card:hover {
  transform: scale(1.05);
}
.app .cta-section {
  animation: fadeIn 1s ease-in-out 1s both;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.app .course-item {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.app .course-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.app .neo-wrapper {
  background-color: #f0f0f0; /* Màu nền xám nhạt trung tính */
  font-family: "Public Sans", sans-serif;
  min-height: 100vh;
}
.app .fw-black {
  font-weight: 900;
  font-family: "Archivo Black", sans-serif;
}
.app {
  /* Đổ bóng cứng đặc trưng */
}
.app .shadow-hard {
  box-shadow: 8px 8px 0px 0px #000;
}
.app .shadow-hard-lg {
  box-shadow: 12px 12px 0px 0px #000;
}
.app {
  /* Hiệu ứng text shadow */
}
.app .shadow-text {
  color: #000;
  text-shadow: 4px 4px 0px #ff0055;
  -webkit-text-stroke: 2px #000;
}
.app {
  /* Nút bấm Neo-Brutalism */
}
.app .neo-btn-primary {
  background-color: #33ffaa;
  color: #000;
  border: 4px solid #000;
  font-size: 1.5rem;
  font-weight: 900;
  box-shadow: 6px 6px 0px 0px #000;
  transition: all 0.1s;
}
.app .neo-btn-primary:active {
  box-shadow: 0px 0px 0px 0px #000;
  transform: translate(6px, 6px);
}
.app .neo-btn-secondary {
  background-color: #ffaa00;
  color: #000;
  border: 4px solid #000;
  font-weight: 900;
  box-shadow: 4px 4px 0px 0px #000;
  transition: all 0.1s;
}
.app .neo-btn-secondary:active {
  box-shadow: 0px 0px 0px 0px #000;
  transform: translate(4px, 4px);
}
.app marquee {
  font-size: 0.9rem;
  letter-spacing: 1px;
}