/* Tailwind imports - sẽ được compile khi build, nhưng với CDN thì không cần */
/* @import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities'; */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Tailwind Color Overrides for Dark Theme */
.bg-dark-bg {
  background-color: #0a0a0f !important;
}

.bg-dark-surface {
  background-color: #121218 !important;
}

.bg-dark-card {
  background-color: #1a1a24 !important;
}

.border-dark-border {
  border-color: #252530 !important;
}

.text-text-primary {
  color: #FFFFFF !important;
}

.text-text-secondary {
  color: #B0B0C0 !important;
}

.text-text-muted {
  color: #6B6B7A !important;
}

.text-accent-green,
.hover\:text-accent-green:hover,
.active\:text-accent-green:active,
.group:hover .group-hover\:text-accent-green,
.group:active .group-active\:text-accent-green {
  color: #FF6B35 !important;
}

.text-accent-orange,
.hover\:text-accent-orange:hover,
.active\:text-accent-orange:active,
.group:hover .group-hover\:text-accent-orange,
.group:active .group-active\:text-accent-orange {
  color: #FF6B35 !important;
}

.bg-accent-green,
.hover\:bg-accent-green:hover {
  background-color: #00FFA3 !important;
}

.bg-accent-green\/20 {
  background-color: rgba(0, 255, 163, 0.2) !important;
}
.bg-accent-orange\/20 {
  background-color: rgb(255 116 0 / 10%) !important;
}
.hover\:bg-accent-green\/10:hover {
  background-color: rgba(0, 255, 163, 0.1) !important;
}

.hover\:border-accent-green:hover,
.focus\:ring-accent-green:focus {
  border-color: #00FFA3 !important;
}

.focus\:ring-accent-green:focus {
  --tw-ring-color: rgba(0, 255, 163, 0.5) !important;
}

.from-accent-green {
  --tw-gradient-from: #FF6B35 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 107, 53, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Button Gradient Override - Orange Gradient */
.bg-gradient-to-r.from-accent-green.to-accent-blue,
.bg-gradient-to-r.from-accent-green.to-accent-blue {
  background: linear-gradient(to right, #FF6B35, #FFA500) !important;
}

.bg-gradient-to-br.from-accent-green.to-accent-blue,
.bg-gradient-to-br.from-accent-green.to-accent-blue {
  background: linear-gradient(to bottom right, #FF6B35, #FFA500) !important;
}

/* Override for Tailwind gradient classes */
[class*="from-accent-green"][class*="to-accent-blue"] {
  background: linear-gradient(to left, #FF6B35, #FFA500) !important;
}

[class*="bg-gradient-to-r"][class*="from-accent-green"][class*="to-accent-blue"] {
  background: linear-gradient(to left, #FF6B35, #FFA500) !important;
}

[class*="bg-gradient-to-br"][class*="from-accent-green"][class*="to-accent-blue"] {
  background: linear-gradient(to bottom left, #FF6B35, #FFA500) !important;
}

/* Orange Gradient Classes */
.bg-gradient-to-r.from-accent-orange.to-accent-gold,
[class*="from-accent-orange"][class*="to-accent-gold"] {
  background: linear-gradient(to left, #FF6B35, #FFA500) !important;
}

.bg-gradient-to-br.from-accent-orange.to-accent-gold {
  background: linear-gradient(to bottom left, #FF6B35, #FFA500) !important;
}

/* Shadow Override for Orange */
.hover\:shadow-accent-orange\/50:hover {
  box-shadow: 0 20px 25px -5px rgba(255, 107, 53, 0.5), 0 8px 10px -6px rgba(255, 107, 53, 0.5) !important;
}

.hover\:shadow-accent-green\/50:hover {
  box-shadow: 0 20px 25px -5px rgba(255, 107, 53, 0.5), 0 8px 10px -6px rgba(255, 107, 53, 0.5) !important;
}

/* Text and Border Override for Orange */
.hover\:text-accent-orange:hover,
.hover\:border-accent-orange:hover {
  color: #FF6B35 !important;
  border-color: #FF6B35 !important;
}

.text-dark-bg {
  color: #0a0a0f !important;
}

.bg-dark-surface\/95 {
  background-color: rgba(18, 18, 24, 0.95) !important;
}

.from-dark-card\/90 {
  --tw-gradient-from: rgba(26, 26, 36, 0.9) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(26, 26, 36, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-dark-card\/50 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(26, 26, 36, 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.from-dark-surface\/95 {
  --tw-gradient-from: rgba(18, 18, 24, 0.95) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(18, 18, 24, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-dark-surface\/70 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(18, 18, 24, 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.hover\:bg-dark-surface:hover,
.active\:bg-dark-card:active {
  background-color: #121218 !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0a0a0f;
}

::-webkit-scrollbar-thumb {
  background: #252530;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00FFA3;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Mobile optimizations */
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Base Styles */
body {
  font-family: 'Inter', 'Roboto', 'Montserrat', system-ui, sans-serif;
}

/* Logo Styles */
header img {
  max-height: 52px;
  height: auto;
  width: auto;
  object-fit: contain;
}

/* Hero Slider Image Styles */
.hero-slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-slide img,
.hero-slide [style*="background-image"] {
  transition: transform 0.5s ease-in-out;
}

/* Gallery Image Styles */
.gallery-item img {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Game Card Image Styles */
.game-card img {
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}

.game-card:hover img {
  transform: scale(1.05);
}



/* Image Loading States */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  display: block;
}

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
  opacity: 1;
}

/* Fallback for broken images */
img[src=""],
img:not([src]) {
  background: linear-gradient(135deg, #1a1a24 0%, #252530 100%);
}

/* Custom Utilities */
.text-gradient {
  background: linear-gradient(135deg, #FF6B35 0%, #FFA500 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-cyber {
  background: linear-gradient(135deg, #0a0a0f 0%, #121218 50%, #1a1a24 100%);
}

.border-gradient {
  border-image: linear-gradient(135deg, #00FFA3, #00D9FF) 1;
}

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

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 255, 163, 0.2);
}

.glow-effect {
  position: relative;
}

.glow-effect::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #00FFA3, #00D9FF);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
}

.glow-effect:hover::before {
  opacity: 1;
}

.category-tab.active {
  border-color: #00FFA3;
  color: #00FFA3;
  background: rgba(0, 255, 163, 0.1);
}

.hero-slide {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

.accordion.open .accordion-header svg {
  transform: rotate(180deg);
}

.countdown-number {
  font-size: 1.5rem;
  font-weight: bold;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Mobile optimizations */
@media (max-width: 640px) {
   button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better text readability */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Prevent text size adjust on iOS */
  html {
    -webkit-text-size-adjust: 100%;
  }
}

/* Loading Animation */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.loading-shimmer {
  animation: shimmer 2s infinite;
  background: linear-gradient(
    to right,
    #1a1a24 0%,
    #252530 50%,
    #1a1a24 100%
  );
  background-size: 1000px 100%;
}

/* WordPress specific styles */
.wp-block-image {
  margin: 1rem 0;
}

.wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Additional utility classes */
.aspect-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.aspect-video img,
.aspect-video > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Backdrop blur support */
.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Active state for mobile */
.active\:scale-95:active {
  transform: scale(0.95);
}

/* Group hover states */
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

.group:hover .group-hover\:rotate-180 {
  transform: rotate(180deg);
}

.group:hover .group-hover\:text-accent-green {
  color: #FF6B35;
}

.group:hover .group-hover\:text-accent-orange {
  color: #FF6B35;
}

/* Focus states */
.focus\:outline-none:focus {
  outline: none;
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px rgba(0, 255, 163, 0.5);
}

.focus\:ring-accent-green:focus {
  box-shadow: 0 0 0 2px rgba(0, 255, 163, 0.5);
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

/* Transition utilities */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Opacity utilities */
.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

/* Visibility utilities */
.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

/* Z-index utilities */
.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-50 {
  z-index: 50;
}

/* Additional responsive utilities */
@media (min-width: 640px) {
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  
  .lg\:sticky {
    position: sticky;
  }
  
  .lg\:top-24 {
    top: 6rem;
  }
  
  .lg\:block {
    display: block;
  }
  
  .lg\:hidden {
    display: none;
  }
}

/* Product Page Specific Styles */
/* Additional styles for product page can be added here if needed */

/* Prose Styles for Content */
.prose {
  max-width: 65ch;
  color: #B0B0C0;
}

.prose-invert {
  color: #B0B0C0;
}

.prose h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #FF6B35;
}

.prose h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #FF6B35;
}

.prose p {
  margin-bottom: 1rem;
  line-height: 1.75;
}

.prose ul,
.prose ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose strong {
  font-weight: 600;
  color: #FFFFFF;
}

.prose a {
  color: #FFA500;
  text-decoration: underline;
  transition: color 0.15s;
}

.prose a:hover {
  color: #FF6B35;
}

/* Sticky CTA Button */
#sticky-cta {
  transition: transform 0.3s ease-in-out;
}

#sticky-cta.translate-y-full {
  transform: translateY(100%);
}

#sticky-cta:not(.translate-y-full) {
  transform: translateY(0);
}

/* Comment Section Styles */
.comment-form,
#comment-form {
  margin-bottom: 2rem;
}

.comment-form label,
#comment-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #B0B0C0;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea,
#comment-form input[type="text"],
#comment-form input[type="email"],
#comment-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: #121218;
  border: 1px solid #252530;
  border-radius: 0.5rem;
  color: #FFFFFF;
  font-size: 0.875rem;
  transition: all 0.15s;
  min-height: 44px;
}

.comment-form input:focus,
.comment-form textarea:focus,
#comment-form input:focus,
#comment-form textarea:focus {
  outline: none;
  border-color: #00FFA3;
  box-shadow: 0 0 0 2px rgba(0, 255, 163, 0.5);
}

.comment-form textarea,
#comment-form textarea {
  resize: vertical;
  min-height: 100px;
}

/* Comments List */
#comments-list,
.comments-list {
  margin-top: 2rem;
}

.comment-item,
.comment {
  background-color: #121218;
  border: 1px solid #252530;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.comment-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #00FFA3, #00D9FF);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  color: #0a0a0f;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.comment-author {
  font-weight: 600;
  color: #FFFFFF;
  font-size: 0.875rem;
}

.comment-date {
  font-size: 0.75rem;
  color: #6B6B7A;
}

.comment-content {
  color: #B0B0C0;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.comment-reply-link {
  font-size: 0.75rem;
  color: #00FFA3;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s;
}

.comment-reply-link:hover {
  color: #00D9FF;
}

/* Reply Form Styles */
.reply-form,
[id^="reply-form"] {
  margin-top: 0.75rem;
  margin-left: 3rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(0, 255, 163, 0.3);
}

.reply-form.hidden,
[id^="reply-form"].hidden {
  display: none;
}

.reply-form textarea,
[id^="reply-form"] textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  background-color: #1a1a24;
  border: 1px solid #252530;
  border-radius: 0.5rem;
  color: #FFFFFF;
  font-size: 0.875rem;
  resize: vertical;
  min-height: 80px;
  transition: all 0.15s;
}

.reply-form textarea:focus,
[id^="reply-form"] textarea:focus {
  outline: none;
  border-color: #00FFA3;
  box-shadow: 0 0 0 2px rgba(0, 255, 163, 0.5);
}

.reply-form .button-group,
[id^="reply-form"] .button-group {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Admin Reply Styles */
.admin-reply,
.comment-reply {
  margin-top: 0.75rem;
  margin-left: 3rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(0, 255, 163, 0.5);
}

.admin-reply .comment-item,
.comment-reply .comment-item {
  background-color: #1a1a24;
  border-color: rgba(0, 255, 163, 0.3);
}

.admin-badge {
  padding: 0.125rem 0.5rem;
  background-color: rgba(0, 255, 163, 0.2);
  color: #00FFA3;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
}

/* Gallery Thumbnail Styles */
.gallery-thumbnail {
  cursor: pointer;
  transition: border-color 0.15s;
}

.gallery-thumbnail:hover {
  border-color: #00FFA3;
}

/* Related Games Sidebar */
.related-game-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: color 0.15s;
}

.related-game-item:hover {
  color: #00FFA3;
}

.related-game-thumb {
  width: 4rem;
  height: 4rem;
  background-color: #121218;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
}

.related-game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Transform Utilities */
.translate-y-full {
  transform: translateY(100%);
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

/* Shadow Utilities */
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Space Utilities */
.space-y-2 > * + * {
  margin-top: 0.5rem;
}

.space-y-3 > * + * {
  margin-top: 0.75rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.space-y-6 > * + * {
  margin-top: 1.5rem;
}

.space-x-2 > * + * {
  margin-left: 0.5rem;
}

.space-x-3 > * + * {
  margin-left: 0.75rem;
}

/* Flex Utilities */
.flex-shrink-0 {
  flex-shrink: 0;
}

/* Border Utilities */
.border-l-2 {
  border-left-width: 2px;
}

/* Text Size Utilities */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

/* Font Weight Utilities */
.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* Leading Utilities */
.leading-relaxed {
  line-height: 1.625;
}

/* List Styles */
.list-disc {
  list-style-type: disc;
}

.list-decimal {
  list-style-type: decimal;
}

.list-inside {
  list-style-position: inside;
}

/* Gap Utilities */
.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

/* Padding Utilities */
.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-4 {
  padding-left: 1rem;
}

/* Margin Utilities */
.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-12 {
  margin-left: 3rem;
}

.ml-14 {
  margin-left: 3.5rem;
}

/* Rounded Utilities */
.rounded {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

/* Background Utilities */
.bg-dark-surface {
  background-color: #121218;
}

.bg-dark-card {
  background-color: #1a1a24;
}

/* Border Utilities */
.border {
  border-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-dark-border {
  border-color: #252530;
}

/* Responsive Text Sizes */
@media (min-width: 768px) {
  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  
  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  
  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  
  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  
  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  
  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  .md\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  
  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .md\:p-4 {
    padding: 1rem;
  }
  
  .md\:p-6 {
    padding: 1.5rem;
  }
  
  .md\:mb-3 {
    margin-bottom: 0.75rem;
  }
  
  .md\:mb-4 {
    margin-bottom: 1rem;
  }
  
  .md\:mb-6 {
    margin-bottom: 1.5rem;
  }
  
  .md\:gap-3 {
    gap: 0.75rem;
  }
  
  .md\:gap-4 {
    gap: 1rem;
  }
  
  .md\:gap-8 {
    gap: 2rem;
  }
  
  .md\:rounded-2xl {
    border-radius: 1rem;
  }
  
  .md\:ml-14 {
    margin-left: 3.5rem;
  }
}

/* Navigation Menu Styles */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  position: relative;
}

/* Sub Menu Hover - Ensure it works with group class */
li.group:hover > div,
li.group.relative:hover > div {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Sub Menu Container */
nav li > div {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  width: 14rem;
  background-color: #1a1a24;
  border: 1px solid #252530;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 50;
}

/* Sub Menu Items */
nav li > div > nav {
  padding: 0.5rem 0;
}

nav li > div > nav > a {
  display: block;
  padding: 0.625rem 1rem;
  color: #B0B0C0;
  text-decoration: none;
  transition: all 0.2s;
  font-size: 0.875rem;
}

nav li > div > nav > a:hover {
  color: #FF6B35;
  background-color: #121218;
}

/* Feature Tags - Single line with ellipsis */
.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.overflow-hidden {
  overflow: hidden;
}

/* Pagination Styles */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #B0B0C0;
  background-color: #1a1a24;
  border: 1px solid #252530;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.page-numbers:hover {
  color: #FF6B35;
  background-color: #121218;
  border-color: #FF6B35;
  transform: translateY(-2px);
}

.page-numbers.current {
  color: #FFFFFF;
  background: linear-gradient(135deg, #FF6B35 0%, #FFA500 100%);
  border-color: transparent;
  cursor: default;
}

.page-numbers.current:hover {
  transform: none;
  background: linear-gradient(135deg, #FF6B35 0%, #FFA500 100%);
}

.page-numbers.dots {
  background-color: transparent;
  border: none;
  color: #6B6B7A;
  cursor: default;
  min-width: auto;
  padding: 0 0.5rem;
}

.page-numbers.dots:hover {
  background-color: transparent;
  border: none;
  color: #6B6B7A;
  transform: none;
}

.page-numbers.next,
.page-numbers.prev {
  padding: 0 1rem;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, #FF6B35 0%, #FFA500 100%);
  border: none;
}

.page-numbers.next:hover,
.page-numbers.prev:hover {
  background: linear-gradient(135deg, #FFA500 0%, #FF6B35 100%);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
  transform: translateY(-2px);
}

.page-numbers.next i,
.page-numbers.prev i {
  margin-left: 0.25rem;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .nav-links {
    gap: 0.375rem;
  }
  
  .page-numbers {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
  }
  
  .page-numbers.next,
  .page-numbers.prev {
    padding: 0 0.75rem;
    font-size: 0.8125rem;
  }
}

.overflow-hidden img, .overflow-hidden figure {
	max-width: 100%;
}