@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

body {
  font-size: 1.15rem;
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  background-color: #000a1a;
  color: #ffffff;
}

.hero-gradient {
  background: linear-gradient(180deg, rgba(0, 10, 26, 0.4) 0%, rgba(0, 10, 26, 1) 100%);
}

.text-shadow-sm {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pillar-card:hover .pillar-number {
  color: #ee0033;
  opacity: 0.2;
}

.product-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 227, 253, 0.5);
}

/* Thanh cuộn tùy chỉnh cho slider */
.custom-scrollbar::-webkit-scrollbar {
  height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(238, 0, 51, 0.5); /* Màu đỏ Viettel nhạt */
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(238, 0, 51, 1);
}
/* Ẩn thanh cuộn ẩn hoàn toàn nhưng vẫn giữ khả năng cuộn/kéo */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Đảm bảo khung trượt luôn bật overflow-x: auto 100% và cấm bôi đen chữ tuyệt đối */
#featured-products-grid {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

#featured-products-grid,
#featured-products-grid * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Hiệu ứng xuất hiện mượt mà khi lọc sản phẩm */
@keyframes cardEnter {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-card-enter {
  opacity: 0;
  animation: cardEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}