@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Montserrat:wght@900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'Cocogoose Vintage';
  src: url('./NVNCocogooseVintage-Regular2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@layer base {
  body {
    @apply bg-neo-bg text-neo-dark font-sans leading-relaxed overflow-x-hidden;
  }
}

@layer components {
  /* Các class Utility cơ bản của phong cách Brutalism */
  .neo-border {
    @apply border-3 border-neo-border md:border-4;
  }
  
  .neo-shadow {
    @apply shadow-brutal-sm md:shadow-brutal transition-all duration-200 ease-[cubic-bezier(0.25,0.8,0.25,1)];
  }
  
  .neo-shadow:hover {
    @apply -translate-x-[2px] -translate-y-[2px] shadow-brutal-hover-sm md:shadow-brutal-hover;
  }
  
  /* Hiệu ứng lún nút chạm đáy, triệt tiêu bóng đổ */
  .neo-shadow:active {
    @apply translate-x-[4px] translate-y-[4px] md:translate-x-[6px] md:translate-y-[6px] shadow-none;
  }
  
  .badge {
    @apply inline-block py-1 px-4 rounded-pill font-bold text-sm tracking-widest uppercase;
  }
  
  .btn {
    @apply bg-neo-red text-white py-3 px-6 rounded-pill font-sans font-bold text-base cursor-pointer uppercase no-underline inline-flex items-center justify-center gap-2 w-full md:w-auto;
  }
  
  .btn-secondary {
    @apply bg-neo-yellow text-neo-dark;
  }

  /* Components Tái định dạng */
  .pattern-dots {
    background-image: radial-gradient(theme('colors.neo-border') 2px, transparent 2px);
    background-size: 24px 24px;
  }

  .ticket-container {
    @apply flex flex-col lg:flex-row bg-neo-bg text-neo-dark rounded-lg max-w-[1000px] mx-auto min-h-[480px] drop-shadow-[0px_20px_0px_theme('colors.neo-mint')] relative;
  }
  
  .ticket-container::before,
  .ticket-container::after {
    content: '';
    @apply absolute bg-neo-dark w-[40px] h-[40px] rounded-full left-1/2 -translate-x-1/2 lg:left-auto lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-0;
  }
  .ticket-container::before {
    @apply -top-[20px] lg:top-auto lg:left-[-20px];
  }
  .ticket-container::after {
    @apply -bottom-[20px] lg:bottom-auto lg:right-[-20px];
  }

  .ticket-side {
    @apply w-full lg:w-[140px] py-10 px-5 flex flex-col justify-between items-center text-center;
  }

  .ticket-text-vertical {
    @apply uppercase font-retro text-2xl tracking-[4px] whitespace-nowrap text-neo-dark mt-auto mb-auto lg:[writing-mode:vertical-rl] lg:rotate-180 lg:[text-orientation:mixed];
  }

  /* Nổi Card và Phóng to hình ảnh bên trong thay vì thao tác script JS */
  .product-card {
    @apply bg-white rounded-2xl p-4 flex flex-col pb-8 z-10 transition-transform duration-300;
  }
  .product-card:hover {
    @apply -translate-y-2 z-20;
  }
  .product-card img {
    @apply w-full h-full object-cover transition-transform duration-300;
  }
  .product-card:hover img {
    @apply scale-105;
  }

  /* Menu Hamburger */
  .mobile-menu-open {
    @apply fixed inset-0 bg-neo-bg z-50 flex flex-col items-center justify-center gap-8;
  }

  /* Định dạng HTML từ QuillJS CMS */
  .quill-bento-content h1, .quill-bento-content h2, .quill-bento-content h3 {
    @apply font-sans font-black uppercase tracking-tighter leading-tight mb-4;
  }
  .quill-bento-content h1 {
    @apply text-4xl md:text-6xl lg:text-[5rem];
  }
  .quill-bento-content p {
    @apply text-lg font-bold mb-2;
  }
  
  .quill-pricing-content ul {
    @apply flex flex-col gap-4 list-none p-0 m-0 w-full;
  }
  .quill-pricing-content p {
    @apply mb-2 font-bold text-lg;
  }
  .quill-pricing-content li {
    @apply flex justify-between items-center border-b-2 border-dashed border-neo-border pb-2 text-lg font-bold w-full;
  }
  .quill-pricing-content li strong {
    @apply font-black text-xl text-neo-red ml-4 bg-white px-2 border-2 border-neo-border shadow-[2px_2px_0_#1E1E1E];
  }
}