Layout & Spacing — Container, Display, Flexbox, Grid

<!-- Block vs Inline -->
<div class="block bg-blue-200 p-2 mb-2">Block — chiếm full width</div>
<span class="inline bg-green-200 p-2">Inline 1</span>
<span class="inline bg-green-200 p-2">Inline 2</span>

<!-- Inline-flex — container flex nhưng không ngắt dòng -->
<span class="inline-flex items-center gap-2 bg-yellow-200 px-3 py-1 rounded-full">
  <span class="w-2 h-2 bg-green-500 rounded-full"></span>
  Online
</span>

<!-- Contents — bỏ qua wrapper -->
<div class="grid grid-cols-2 gap-4">
  <div class="contents">
    <div class="bg-red-200 p-4">Item 1</div>
    <div class="bg-red-200 p-4">Item 2</div>
  </div>
</div>

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow">
  <!-- Logo -->
  <a href="#" class="text-xl font-bold text-blue-600">Brand</a>

  <!-- Menu links — ẩn trên mobile, hiện từ md trở lên -->
  <div class="hidden md:flex items-center gap-6">
    <a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Home</a>
    <a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Features</a>
    <a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Pricing</a>
    <a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">About</a>
  </div>

  <!-- Button bên phải -->
  <button class="hidden md:block bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
    Get Started
  </button>

  <!-- Hamburger — chỉ hiện trên mobile -->
  <button class="md:hidden text-gray-700">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
  </button>
</nav>

<div class="flex min-h-screen">
  <!-- Overlay — chỉ trên mobile khi sidebar mở -->
  <div class="fixed inset-0 bg-black/50 z-10 lg:hidden" id="overlay"></div>

  <!-- Sidebar — ẩn mobile mặc định, luôn hiện trên lg -->
  <aside class="fixed lg:static inset-y-0 left-0 z-20 w-64 bg-gray-900 text-white
                -translate-x-full lg:translate-x-0 transition-transform duration-300"
         id="sidebar">
    <div class="p-6">
      <h2 class="text-xl font-bold mb-6">Sidebar</h2>
      <nav class="flex flex-col gap-3">
        <a href="#" class="text-gray-300 hover:text-white transition-colors">Dashboard</a>
        <a href="#" class="text-gray-300 hover:text-white transition-colors">Analytics</a>
        <a href="#" class="text-gray-300 hover:text-white transition-colors">Settings</a>
      </nav>
    </div>
  </aside>

  <!-- Main content -->
  <main class="flex-1 p-6 bg-gray-100">
    <button class="lg:hidden mb-4 px-3 py-2 bg-gray-800 text-white rounded"
            onclick="document.getElementById('sidebar').classList.toggle('-translate-x-full')">
      Toggle Sidebar
    </button>
    <h1 class="text-2xl font-bold">Main Content</h1>
  </main>
</div>

<!-- Fixed to top -->
<div class="fixed top-0 inset-x-0 bg-white shadow z-50">Fixed Header</div>

<!-- Absolute centered -->
<div class="relative h-64 bg-gray-200">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-500 text-white p-4 rounded">
    Centered
  </div>
</div>

<!-- Sticky -->
<div class="sticky top-4 bg-yellow-200 p-2 z-10">Sticky — dừng ở top 16px</div>

<div class="z-0 bg-red-200 p-4">z-0</div>
<div class="z-10 bg-blue-200 p-4">z-10</div>
<div class="z-20 bg-green-200 p-4">z-20</div>
<div class="z-30 bg-purple-200 p-4">z-30</div>
<div class="z-40 bg-yellow-200 p-4">z-40</div>
<div class="z-50 bg-pink-200 p-4">z-50</div>
<div class="z-auto bg-gray-200 p-4">z-auto</div>

<div class="min-h-[200vh]">
  <!-- Fixed header -->
  <header class="fixed top-0 inset-x-0 z-50 bg-white/80 backdrop-blur-md shadow-sm">
    <div class="max-w-6xl mx-auto flex items-center justify-between px-6 py-4">
      <span class="text-xl font-bold">My App</span>
      <nav class="flex gap-4">
        <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
      </nav>
    </div>
  </header>

  <!-- Nội dung — đẩy xuống bằng pt-20 để không bị header che -->
  <main class="pt-20 px-6">
    <h1 class="text-3xl font-bold mb-4">Page Content</h1>
    <p class="text-gray-600 mb-4">Scroll xuống để thấy header vẫn cố định trên cùng.</p>
    <!-- Thêm nhiều nội dung để test scroll -->
    <div class="space-y-4">
      <div class="h-48 bg-gray-100 rounded-lg"></div>
      <div class="h-48 bg-gray-100 rounded-lg"></div>
      <div class="h-48 bg-gray-100 rounded-lg"></div>
      <div class="h-48 bg-gray-100 rounded-lg"></div>
    </div>
  </main>
</div>

<div class="max-w-6xl mx-auto px-6 py-8">
  <div class="flex flex-col lg:flex-row gap-8">
    <!-- Main content -->
    <article class="flex-1 min-w-0">
      <h1 class="text-3xl font-bold mb-4">Bài viết dài</h1>
      <div class="prose max-w-none">
        <p class="mb-4">Nội dung bài viết rất dài...</p>
        <!-- Giả lập nội dung dài -->
        <div class="space-y-4">
          <div class="h-32 bg-gray-100 rounded"></div>
          <div class="h-32 bg-gray-100 rounded"></div>
          <div class="h-32 bg-gray-100 rounded"></div>
          <div class="h-32 bg-gray-100 rounded"></div>
          <div class="h-32 bg-gray-100 rounded"></div>
          <div class="h-32 bg-gray-100 rounded"></div>
        </div>
      </div>
    </article>

    <!-- Sticky sidebar -->
    <aside class="w-full lg:w-80">
      <div class="sticky top-24 space-y-6">
        <div class="bg-gray-50 rounded-lg p-6">
          <h3 class="font-bold mb-2">Mục lục</h3>
          <ul class="space-y-2 text-sm text-gray-600">
            <li>Section 1</li>
            <li>Section 2</li>
            <li>Section 3</li>
          </ul>
        </div>
        <div class="bg-blue-50 rounded-lg p-6">
          <h3 class="font-bold mb-2">Bài viết liên quan</h3>
          <ul class="space-y-2 text-sm text-blue-600">
            <li>Bài viết A</li>
            <li>Bài viết B</li>
          </ul>
        </div>
      </div>
    </aside>
  </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
  <!-- Card 1 — badge "New" -->
  <div class="relative bg-white rounded-xl shadow-md overflow-hidden group">
    <span class="absolute top-3 right-3 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full z-10">
      New
    </span>
    <div class="h-48 bg-gradient-to-br from-blue-400 to-purple-500"></div>
    <div class="p-4">
      <h3 class="font-bold">Sản phẩm A</h3>
      <p class="text-gray-600 text-sm">Mô tả ngắn gọn</p>
    </div>
  </div>

  <!-- Card 2 — badge "Sale" -->
  <div class="relative bg-white rounded-xl shadow-md overflow-hidden">
    <span class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full z-10">
      -30%
    </span>
    <div class="h-48 bg-gradient-to-br from-pink-400 to-orange-400"></div>
    <div class="p-4">
      <h3 class="font-bold">Sản phẩm B</h3>
      <p class="text-gray-600 text-sm">Đang giảm giá</p>
    </div>
  </div>

  <!-- Card 3 — double badge -->
  <div class="relative bg-white rounded-xl shadow-md overflow-hidden">
    <div class="absolute top-3 right-3 flex flex-col gap-1 z-10">
      <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">Sale</span>
      <span class="bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full">Hot</span>
    </div>
    <div class="h-48 bg-gradient-to-br from-teal-400 to-cyan-500"></div>
    <div class="p-4">
      <h3 class="font-bold">Sản phẩm C</h3>
      <p class="text-gray-600 text-sm">Bán chạy nhất</p>
    </div>
  </div>
</div>

<!-- Container query: card thay đổi layout dựa trên width của chính nó -->
<div class="@container border rounded-lg p-4">
  <div class="flex flex-col @md:flex-row gap-4">
    <div class="w-full @md:w-1/3 aspect-square bg-gray-200 rounded"></div>
    <div class="flex-1">
      <h3 class="text-lg @md:text-xl font-bold">Card Title</h3>
      <p class="text-gray-600 @md:mt-2">Card description here.</p>
    </div>
  </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
  <!-- Column trái: width nhỏ → card dạng dọc -->
  <div>
    <div class="@container">
      <div class="bg-white border rounded-xl overflow-hidden
                  flex flex-col @md:flex-row
                  @lg:shadow-lg @lg:hover:shadow-xl @lg:transition-shadow">
        <!-- Image -->
        <div class="w-full @md:w-2/5 @lg:w-1/3 aspect-video @md:aspect-square bg-gradient-to-br from-violet-400 to-indigo-500 relative">
          <!-- Badge chỉ hiện từ @lg -->
          <span class="hidden @lg:block absolute top-3 left-3 bg-white/90 text-xs font-bold px-2 py-1 rounded-full backdrop-blur-sm">
            Featured
          </span>
        </div>

        <!-- Content -->
        <div class="p-4 @md:p-5 @lg:p-6 flex-1 flex flex-col justify-between">
          <div>
            <!-- Tags chỉ hiện từ @lg -->
            <div class="hidden @lg:flex gap-2 mb-2">
              <span class="text-xs bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded-full">Design</span>
              <span class="text-xs bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded-full">UI/UX</span>
            </div>
            <h3 class="font-bold text-gray-900 @lg:text-lg">Product Design Principles</h3>
            <p class="text-sm text-gray-600 mt-1 @lg:mt-2 line-clamp-2 @lg:line-clamp-3">
              Learn how to design better products with proven principles and methodologies
              that top companies use every day.
            </p>
          </div>
          <!-- CTA button chỉ hiện từ @lg -->
          <button class="hidden @lg:inline-flex mt-3 text-sm font-medium text-indigo-600 hover:text-indigo-700">
            Read more →
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Column phải: width lớn hơn → card dạng ngang với full feature -->
  <div>
    <div class="@container">
      <div class="bg-white border rounded-xl overflow-hidden
                  flex flex-col @md:flex-row
                  @lg:shadow-lg @lg:hover:shadow-xl @lg:transition-shadow">
        <!-- Image -->
        <div class="w-full @md:w-2/5 @lg:w-1/3 aspect-video @md:aspect-square bg-gradient-to-br from-amber-400 to-orange-500 relative">
          <span class="hidden @lg:block absolute top-3 left-3 bg-white/90 text-xs font-bold px-2 py-1 rounded-full backdrop-blur-sm">
            Popular
          </span>
        </div>
        <!-- Content -->
        <div class="p-4 @md:p-5 @lg:p-6 flex-1 flex flex-col justify-between">
          <div>
            <div class="hidden @lg:flex gap-2 mb-2">
              <span class="text-xs bg-orange-50 text-orange-600 px-2 py-0.5 rounded-full">Development</span>
              <span class="text-xs bg-orange-50 text-orange-600 px-2 py-0.5 rounded-full">Frontend</span>
            </div>
            <h3 class="font-bold text-gray-900 @lg:text-lg">Modern CSS Techniques</h3>
            <p class="text-sm text-gray-600 mt-1 @lg:mt-2 line-clamp-2 @lg:line-clamp-3">
              Explore modern CSS features including container queries, cascade layers,
              and the latest layout techniques for responsive design.
            </p>
          </div>
          <button class="hidden @lg:inline-flex mt-3 text-sm font-medium text-orange-600 hover:text-orange-700">
            Read more →
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Định nghĩa container với custom size -->
<div class="@container-size-md">
  <!-- Children query dựa trên size này -->
  <div class="@md:grid-cols-2">...</div>
</div>

<div class="min-h-screen flex items-center justify-center bg-gray-100 p-6">
  <div class="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full text-center">
    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
      <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M5 13l4 4L19 7"/>
      </svg>
    </div>
    <h2 class="text-2xl font-bold text-gray-900 mb-2">Thành công!</h2>
    <p class="text-gray-600 mb-6">Tài khoản của bạn đã được tạo. Vui lòng kiểm tra email để xác nhận.</p>
    <button class="w-full bg-blue-600 text-white py-2.5 rounded-lg hover:bg-blue-700 transition-colors font-medium">
      Đi đến Dashboard
    </button>
  </div>
</div>

<div class="min-h-screen flex flex-col">
  <!-- Header -->
  <header class="bg-gray-900 text-white px-6 py-4 flex items-center justify-between">
    <h1 class="text-xl font-bold">Holy Grail</h1>
    <nav class="flex gap-4 text-sm">
      <a href="#" class="hover:text-gray-300">Home</a>
      <a href="#" class="hover:text-gray-300">About</a>
    </nav>
  </header>

  <!-- Body: 3 cột -->
  <div class="flex flex-1">
    <!-- Left nav -->
    <nav class="w-64 bg-gray-100 p-6 flex-shrink-0">
      <h3 class="font-bold mb-4">Navigation</h3>
      <ul class="space-y-2">
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
      </ul>
    </nav>

    <!-- Main content — flex-1 chiếm hết chỗ còn lại -->
    <main class="flex-1 p-6 min-w-0">
      <h2 class="text-2xl font-bold mb-4">Main Content</h2>
      <p class="text-gray-600">Nội dung chính ở đây. Cột này co giãn theo không gian còn lại.</p>
    </main>

    <!-- Right aside -->
    <aside class="w-72 bg-gray-50 p-6 flex-shrink-0">
      <h3 class="font-bold mb-4">Sidebar</h3>
      <p class="text-sm text-gray-600">Thông tin phụ.</p>
    </aside>
  </div>

  <!-- Footer -->
  <footer class="bg-gray-900 text-gray-400 px-6 py-4 text-center text-sm">
    &copy; 2026 Holy Grail Layout. Built with Tailwind CSS v4.
  </footer>
</div>

<div class="flex flex-wrap gap-6 p-6">
  <!-- Card 1 -->
  <div class="flex-1 min-w-[280px] max-w-sm bg-white rounded-xl shadow-md overflow-hidden">
    <div class="h-40 bg-gradient-to-br from-emerald-400 to-teal-500"></div>
    <div class="p-4">
      <h3 class="font-bold">Card 1</h3>
      <p class="text-gray-600 text-sm">Flex item với min-width 280px.</p>
    </div>
  </div>

  <!-- Card 2 -->
  <div class="flex-1 min-w-[280px] max-w-sm bg-white rounded-xl shadow-md overflow-hidden">
    <div class="h-40 bg-gradient-to-br from-rose-400 to-pink-500"></div>
    <div class="p-4">
      <h3 class="font-bold">Card 2</h3>
      <p class="text-gray-600 text-sm">Tự wrap khi không đủ chỗ.</p>
    </div>
  </div>

  <!-- Card 3 -->
  <div class="flex-1 min-w-[280px] max-w-sm bg-white rounded-xl shadow-md overflow-hidden">
    <div class="h-40 bg-gradient-to-br from-cyan-400 to-blue-500"></div>
    <div class="p-4">
      <h3 class="font-bold">Card 3</h3>
      <p class="text-gray-600 text-sm">Không cần media query.</p>
    </div>
  </div>

  <!-- Card 4 -->
  <div class="flex-1 min-w-[280px] max-w-sm bg-white rounded-xl shadow-md overflow-hidden">
    <div class="h-40 bg-gradient-to-br from-violet-400 to-purple-500"></div>
    <div class="p-4">
      <h3 class="font-bold">Card 4</h3>
      <p class="text-gray-600 text-sm">Tự động responsive.</p>
    </div>
  </div>

  <!-- Card 5 -->
  <div class="flex-1 min-w-[280px] max-w-sm bg-white rounded-xl shadow-md overflow-hidden">
    <div class="h-40 bg-gradient-to-br from-amber-400 to-orange-500"></div>
    <div class="p-4">
      <h3 class="font-bold">Card 5</h3>
      <p class="text-gray-600 text-sm">Flex-wrap + min-width = grid không cần breakpoint.</p>
    </div>
  </div>
</div>

<nav class="flex items-center justify-between px-8 py-4 bg-white border-b">
  <!-- Logo area — bên trái -->
  <div class="flex items-center gap-3">
    <div class="w-8 h-8 bg-blue-600 rounded-lg"></div>
    <span class="font-bold text-lg">Company</span>
  </div>

  <!-- Links — bên phải, grouped -->
  <div class="flex items-center gap-6">
    <a href="#" class="text-gray-600 hover:text-gray-900 text-sm font-medium">Products</a>
    <a href="#" class="text-gray-600 hover:text-gray-900 text-sm font-medium">Pricing</a>
    <a href="#" class="text-gray-600 hover:text-gray-900 text-sm font-medium">Docs</a>
    <button class="bg-gray-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-800">
      Sign In
    </button>
  </div>
</nav>

<!-- Grid 3 cột đều -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-200 p-4">1</div>
  <div class="bg-blue-200 p-4">2</div>
  <div class="bg-blue-200 p-4">3</div>
</div>

<!-- Span columns -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 bg-green-200 p-4">Span 2</div>
  <div class="bg-green-200 p-4">1</div>
  <div class="bg-green-200 p-4">1</div>
</div>

<!-- Grid flow dense — fill holes -->
<div class="grid grid-cols-3 grid-flow-dense gap-4">
  <div class="col-span-2 bg-purple-200 p-4">Span 2</div>
  <div class="bg-purple-200 p-4">3</div>
  <div class="bg-purple-200 p-4">4</div>
  <div class="bg-purple-200 p-4">5</div>
</div>

<!-- Subgrid (dùng với cha grid) -->
<div class="grid grid-cols-3 gap-4">
  <div class="grid grid-cols-subgrid col-span-3 gap-4">
    <div class="bg-yellow-200 p-4">Sub 1</div>
    <div class="bg-yellow-200 p-4">Sub 2</div>
    <div class="bg-yellow-200 p-4">Sub 3</div>
  </div>
</div>

<div class="p-6 space-y-6">
  <h2 class="text-xl font-bold mb-4">12-Column Grid System</h2>

  <!-- Row 1: 3 cột đều nhau (4+4+4) -->
  <div class="grid grid-cols-12 gap-4">
    <div class="col-span-4 bg-blue-100 rounded-lg p-4 text-center font-medium text-blue-700">
      4 cols
    </div>
    <div class="col-span-4 bg-blue-100 rounded-lg p-4 text-center font-medium text-blue-700">
      4 cols
    </div>
    <div class="col-span-4 bg-blue-100 rounded-lg p-4 text-center font-medium text-blue-700">
      4 cols
    </div>
  </div>

  <!-- Row 2: 8+4 -->
  <div class="grid grid-cols-12 gap-4">
    <div class="col-span-8 bg-green-100 rounded-lg p-4 text-center font-medium text-green-700">
      8 cols — main content
    </div>
    <div class="col-span-4 bg-green-50 rounded-lg p-4 text-center font-medium text-green-600">
      4 cols — sidebar
    </div>
  </div>

  <!-- Row 3: 3+6+3 -->
  <div class="grid grid-cols-12 gap-4">
    <div class="col-span-3 bg-purple-100 rounded-lg p-4 text-center font-medium text-purple-700">
      3 cols
    </div>
    <div class="col-span-6 bg-purple-100 rounded-lg p-4 text-center font-medium text-purple-700">
      6 cols
    </div>
    <div class="col-span-3 bg-purple-100 rounded-lg p-4 text-center font-medium text-purple-700">
      3 cols
    </div>
  </div>

  <!-- Row 4: 2+2+2+2+2+2 -->
  <div class="grid grid-cols-12 gap-4">
    <div class="col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm">2</div>
    <div class="col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm">2</div>
    <div class="col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm">2</div>
    <div class="col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm">2</div>
    <div class="col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm">2</div>
    <div class="col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm">2</div>
  </div>
</div>

<div class="p-6">
  <h2 class="text-xl font-bold mb-4">Responsive Image Gallery</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Item 1 -->
    <div class="group relative aspect-square rounded-xl overflow-hidden bg-gray-200">
      <div class="absolute inset-0 bg-gradient-to-br from-indigo-400 to-blue-500
                  flex items-center justify-center text-white text-4xl font-bold">
        1
      </div>
      <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100
                  transition-opacity flex items-center justify-center">
        <span class="text-white font-medium">View Image</span>
      </div>
    </div>
    <!-- Item 2 -->
    <div class="group relative aspect-square rounded-xl overflow-hidden bg-gray-200">
      <div class="absolute inset-0 bg-gradient-to-br from-rose-400 to-pink-500
                  flex items-center justify-center text-white text-4xl font-bold">
        2
      </div>
      <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100
                  transition-opacity flex items-center justify-center">
        <span class="text-white font-medium">View Image</span>
      </div>
    </div>
    <!-- Item 3 -->
    <div class="group relative aspect-square rounded-xl overflow-hidden bg-gray-200">
      <div class="absolute inset-0 bg-gradient-to-br from-emerald-400 to-teal-500
                  flex items-center justify-center text-white text-4xl font-bold">
        3
      </div>
      <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100
                  transition-opacity flex items-center justify-center">
        <span class="text-white font-medium">View Image</span>
      </div>
    </div>
    <!-- Item 4 -->
    <div class="group relative aspect-square rounded-xl overflow-hidden bg-gray-200">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-400 to-orange-500
                  flex items-center justify-center text-white text-4xl font-bold">
        4
      </div>
      <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100
                  transition-opacity flex items-center justify-center">
        <span class="text-white font-medium">View Image</span>
      </div>
    </div>
    <!-- Item 5 -->
    <div class="group relative aspect-square rounded-xl overflow-hidden bg-gray-200">
      <div class="absolute inset-0 bg-gradient-to-br from-violet-400 to-purple-500
                  flex items-center justify-center text-white text-4xl font-bold">
        5
      </div>
      <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100
                  transition-opacity flex items-center justify-center">
        <span class="text-white font-medium">View Image</span>
      </div>
    </div>
    <!-- Item 6 -->
    <div class="group relative aspect-square rounded-xl overflow-hidden bg-gray-200">
      <div class="absolute inset-0 bg-gradient-to-br from-cyan-400 to-sky-500
                  flex items-center justify-center text-white text-4xl font-bold">
        6
      </div>
      <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100
                  transition-opacity flex items-center justify-center">
        <span class="text-white font-medium">View Image</span>
      </div>
    </div>
  </div>
</div>

<div class="min-h-screen flex">
  <!-- Sidebar — cố định bên trái -->
  <aside class="w-64 bg-gray-900 text-white flex-shrink-0 hidden lg:block">
    <div class="p-6">
      <h2 class="text-lg font-bold mb-8">Admin Panel</h2>
      <nav class="space-y-2">
        <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800 text-white">
          <span class="w-5 h-5 bg-blue-400 rounded"></span> Dashboard
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors">
          <span class="w-5 h-5 bg-gray-600 rounded"></span> Users
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors">
          <span class="w-5 h-5 bg-gray-600 rounded"></span> Products
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors">
          <span class="w-5 h-5 bg-gray-600 rounded"></span> Settings
        </a>
      </nav>
    </div>
  </aside>

  <!-- Main area -->
  <div class="flex-1 min-w-0 bg-gray-50">
    <!-- Header -->
    <header class="bg-white border-b px-6 py-4 flex items-center justify-between">
      <h1 class="text-xl font-bold text-gray-900">Dashboard</h1>
      <div class="flex items-center gap-4">
        <span class="text-sm text-gray-600">Admin User</span>
        <div class="w-8 h-8 bg-gray-300 rounded-full"></div>
      </div>
    </header>

    <!-- Content grid -->
    <main class="p-6">
      <!-- Stats cards -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-xl p-5 shadow-sm">
          <p class="text-sm text-gray-500 mb-1">Total Users</p>
          <p class="text-2xl font-bold text-gray-900">12,543</p>
          <p class="text-xs text-green-600 mt-1">+12.5% from last month</p>
        </div>
        <div class="bg-white rounded-xl p-5 shadow-sm">
          <p class="text-sm text-gray-500 mb-1">Revenue</p>
          <p class="text-2xl font-bold text-gray-900">$45,200</p>
          <p class="text-xs text-green-600 mt-1">+8.2% from last month</p>
        </div>
        <div class="bg-white rounded-xl p-5 shadow-sm">
          <p class="text-sm text-gray-500 mb-1">Active Now</p>
          <p class="text-2xl font-bold text-gray-900">342</p>
          <p class="text-xs text-red-600 mt-1">-3.1% from last hour</p>
        </div>
        <div class="bg-white rounded-xl p-5 shadow-sm">
          <p class="text-sm text-gray-500 mb-1">Conversion</p>
          <p class="text-2xl font-bold text-gray-900">3.24%</p>
          <p class="text-xs text-green-600 mt-1">+0.4% from last week</p>
        </div>
      </div>

      <!-- Charts & tables area -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <!-- Main chart — span 2 -->
        <div class="lg:col-span-2 bg-white rounded-xl p-5 shadow-sm">
          <h3 class="font-bold text-gray-900 mb-4">Revenue Overview</h3>
          <div class="h-64 bg-gray-100 rounded flex items-center justify-center text-gray-400">
            Chart Area (span 2 columns)
          </div>
        </div>
        <!-- Side widget -->
        <div class="bg-white rounded-xl p-5 shadow-sm">
          <h3 class="font-bold text-gray-900 mb-4">Recent Activity</h3>
          <div class="space-y-3">
            <div class="flex gap-3 text-sm">
              <div class="w-2 h-2 bg-blue-500 rounded-full mt-1.5 flex-shrink-0"></div>
              <p class="text-gray-600">New user registered</p>
            </div>
            <div class="flex gap-3 text-sm">
              <div class="w-2 h-2 bg-green-500 rounded-full mt-1.5 flex-shrink-0"></div>
              <p class="text-gray-600">Order #1234 completed</p>
            </div>
            <div class="flex gap-3 text-sm">
              <div class="w-2 h-2 bg-orange-500 rounded-full mt-1.5 flex-shrink-0"></div>
              <p class="text-gray-600">Payment pending</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

<!-- Logical properties: tự động đúng cho mọi ngôn ngữ -->
<div dir="ltr" class="bg-gray-100 p-4 rounded mb-4">
  <p class="mis-4 text-gray-700">LTR: mis (margin-inline-start) = margin left</p>
</div>
<div dir="rtl" class="bg-gray-100 p-4 rounded">
  <p class="mis-4 text-gray-700">RTL: mis (margin-inline-start) = margin right</p>
</div>

<!-- Dùng space-y cho vertical rhythm -->
<div class="space-y-4">
  <p class="bg-blue-100 p-3 rounded">Paragraph 1</p>
  <p class="bg-blue-100 p-3 rounded">Paragraph 2</p>
  <p class="bg-blue-100 p-3 rounded">Paragraph 3</p>
</div>

<!-- Dùng gap thay thế (khuyến nghị dùng flex/grid) -->
<div class="flex gap-4">
  <button class="bg-gray-200 px-4 py-2 rounded">Button 1</button>
  <button class="bg-gray-200 px-4 py-2 rounded">Button 2</button>
</div>

<!-- Auto margin: đẩy element về phía đối diện -->
<div class="flex bg-gray-200 p-2 rounded">
  <span>Left</span>
  <span class="ml-auto bg-blue-200 px-2 rounded">Right (ml-auto)</span>
</div>

<!-- Negative margin: kéo element ra ngoài container -->
<div class="bg-gray-100 p-8">
  <div class="bg-blue-500 text-white p-4 -mx-4 rounded">
    Full-width inside padded container (-mx-4)
  </div>
</div>

<article class="max-w-2xl mx-auto px-6 py-12 space-y-8">
  <!-- Title section -->
  <header class="space-y-3">
    <div class="flex gap-2">
      <span class="text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded-full">Technology</span>
      <span class="text-xs bg-purple-50 text-purple-600 px-2 py-1 rounded-full">CSS</span>
    </div>
    <h1 class="text-3xl font-bold text-gray-900 leading-tight">
      Building Consistent Spacing Systems with Tailwind CSS
    </h1>
    <div class="flex items-center gap-3 text-sm text-gray-500">
      <div class="w-8 h-8 bg-gray-300 rounded-full"></div>
      <span>John Doe</span>
      <span>·</span>
      <span>July 8, 2026</span>
    </div>
  </header>

  <!-- Intro paragraph -->
  <p class="text-lg text-gray-700 leading-relaxed">
    A well-designed spacing system is the invisible foundation of every great UI.
    In this article, we'll explore how Tailwind CSS v4 helps you maintain consistent
    vertical rhythm across your entire layout.
  </p>

  <!-- Image placeholder -->
  <figure class="space-y-2">
    <div class="aspect-video bg-gradient-to-br from-slate-400 to-slate-600 rounded-xl flex items-center justify-center text-white text-lg">
      Featured Image
    </div>
    <figcaption class="text-sm text-gray-500 text-center italic">
      Figure 1: Consistent spacing makes content more readable.
    </figcaption>
  </figure>

  <!-- Section heading + paragraph -->
  <section class="space-y-4">
    <h2 class="text-2xl font-bold text-gray-900">Why Spacing Matters</h2>
    <p class="text-gray-700 leading-relaxed">
      Vertical rhythm creates a predictable reading experience. When headings,
      paragraphs, and images all follow the same spacing scale, users can scan
      content faster and focus on what matters.
    </p>
    <p class="text-gray-700 leading-relaxed">
      Tailwind's spacing scale (based on 4px increments) ensures every element
      aligns to the same baseline grid, eliminating uneven gaps.
    </p>
  </section>

  <!-- Blockquote -->
  <blockquote class="border-l-4 border-blue-500 pl-4 py-2 bg-blue-50 rounded-r-lg">
    <p class="text-gray-700 italic">
      "Design is not just what it looks like and feels like. Design is how it works."
    </p>
    <footer class="text-sm text-gray-500 mt-2">— Steve Jobs</footer>
  </blockquote>

  <!-- Bullet list -->
  <section class="space-y-3">
    <h3 class="text-xl font-bold text-gray-900">Key Principles</h3>
    <ul class="space-y-2 list-disc list-inside text-gray-700">
      <li>Use multiples of 4px (Tailwind's default scale)</li>
      <li>Maintain consistent spacing between same-level elements</li>
      <li>Increase spacing before new sections</li>
      <li>Keep line-height proportional to font-size</li>
    </ul>
  </section>

  <!-- Conclusion -->
  <hr class="border-gray-200">
  <p class="text-gray-700 leading-relaxed">
    A consistent spacing system is one of the easiest ways to make your designs
    look polished and professional. Tailwind CSS v4 makes it effortless.
  </p>
</article>

<div class="max-w-sm mx-auto bg-white rounded-2xl shadow-lg overflow-hidden">
  <!-- Image -->
  <div class="aspect-video bg-gradient-to-br from-blue-400 to-indigo-600 relative">
    <span class="absolute top-3 left-3 bg-white/90 text-xs font-bold px-2 py-1 rounded-full backdrop-blur-sm">
      New Arrival
    </span>
  </div>

  <!-- Content — padding + flex column with gap -->
  <div class="p-5 flex flex-col gap-4">
    <!-- Title + category -->
    <div>
      <p class="text-xs font-medium text-indigo-600 uppercase tracking-wide mb-1">Electronics</p>
      <h3 class="text-lg font-bold text-gray-900">Wireless Headphones Pro</h3>
    </div>

    <!-- Description -->
    <p class="text-sm text-gray-600 leading-relaxed">
      Premium noise-canceling wireless headphones with 30-hour battery life
      and spatial audio support.
    </p>

    <!-- Features (dùng gap thay vì space-y) -->
    <div class="flex gap-3">
      <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full">ANC</span>
      <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full">30h Battery</span>
      <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full">Bluetooth 5.3</span>
    </div>

    <!-- Price + CTA -->
    <div class="flex items-center justify-between pt-2 border-t border-gray-100">
      <div>
        <span class="text-2xl font-bold text-gray-900">$299</span>
        <span class="text-sm text-gray-400 line-through ml-2">$399</span>
      </div>
      <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium
                     hover:bg-indigo-700 transition-colors">
        Add to Cart
      </button>
    </div>
  </div>
</div>

<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 relative overflow-hidden">
  <!-- Decorative background elements -->
  <div class="absolute top-20 left-20 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl"></div>
  <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>

  <!-- Content -->
  <div class="relative z-10 max-w-3xl mx-auto px-6 text-center">
    <span class="inline-block text-sm font-medium text-purple-300 bg-white/10 px-3 py-1 rounded-full mb-6 backdrop-blur-sm">
      Tailwind CSS v4 — Now with Oxide Engine
    </span>
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">
      Build Faster with
      <span class="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
        Utility-First CSS
      </span>
    </h1>
    <p class="text-lg text-gray-300 max-w-xl mx-auto mb-8 leading-relaxed">
      Tailwind CSS v4 is rebuilt from the ground up with the Oxide Engine in Rust,
      delivering 5x faster builds and an all-new CSS-first configuration.
    </p>
    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
      <button class="w-full sm:w-auto bg-white text-slate-900 px-8 py-3 rounded-xl font-semibold hover:bg-gray-100 transition-colors">
        Get Started Free
      </button>
      <button class="w-full sm:w-auto bg-white/10 text-white px-8 py-3 rounded-xl font-semibold hover:bg-white/20 transition-colors backdrop-blur-sm">
        View Docs
      </button>
    </div>
  </div>

  <!-- Scroll indicator -->
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
    <div class="w-6 h-10 border-2 border-white/30 rounded-full flex items-start justify-center p-1.5">
      <div class="w-1.5 h-1.5 bg-white/60 rounded-full"></div>
    </div>
  </div>
</section>

<div class="max-w-2xl mx-auto p-6 space-y-8">
  <h2 class="text-xl font-bold">Responsive Image Patterns</h2>

  <!-- Pattern 1: Fixed aspect ratio với object-fit -->
  <div>
    <h3 class="font-medium mb-2">Fixed Aspect Ratio (16:9)</h3>
    <div class="aspect-video bg-gray-200 rounded-xl overflow-hidden">
      <div class="w-full h-full bg-gradient-to-br from-blue-400 to-purple-500
                  flex items-center justify-center text-white text-2xl font-bold">
        16:9 Image
      </div>
    </div>
  </div>

  <!-- Pattern 2: Square (1:1) -->
  <div>
    <h3 class="font-medium mb-2">Square (1:1)</h3>
    <div class="grid grid-cols-3 gap-4">
      <div class="aspect-square bg-gray-200 rounded-lg overflow-hidden">
        <div class="w-full h-full bg-gradient-to-br from-emerald-400 to-teal-500
                    flex items-center justify-center text-white font-bold">1:1</div>
      </div>
      <div class="aspect-square bg-gray-200 rounded-lg overflow-hidden">
        <div class="w-full h-full bg-gradient-to-br from-rose-400 to-pink-500
                    flex items-center justify-center text-white font-bold">1:1</div>
      </div>
      <div class="aspect-square bg-gray-200 rounded-lg overflow-hidden">
        <div class="w-full h-full bg-gradient-to-br from-amber-400 to-orange-500
                    flex items-center justify-center text-white font-bold">1:1</div>
      </div>
    </div>
  </div>

  <!-- Pattern 3: 4:3 aspect ratio -->
  <div>
    <h3 class="font-medium mb-2">4:3 Aspect Ratio</h3>
    <div class="aspect-[4/3] max-w-md bg-gray-200 rounded-xl overflow-hidden">
      <div class="w-full h-full bg-gradient-to-br from-indigo-400 to-cyan-500
                  flex items-center justify-center text-white font-bold text-lg">
        4:3
      </div>
    </div>
  </div>

  <!-- Pattern 4: Full width, auto height, max-width constraint -->
  <div>
    <h3 class="font-medium mb-2">Full Width with Max Constraint</h3>
    <div class="w-full max-w-lg bg-gray-200 rounded-xl overflow-hidden">
      <div class="aspect-video bg-gradient-to-br from-violet-400 to-fuchsia-500
                  flex items-center justify-center text-white font-bold">
        w-full + max-w-lg
      </div>
    </div>
  </div>
</div>

<div class="flex min-h-screen bg-gray-100">
  <!-- Scrollable sidebar -->
  <aside class="w-64 bg-white border-r flex flex-col">
    <!-- Header sidebar — fixed -->
    <div class="p-4 border-b">
      <h2 class="font-bold text-gray-900">Channels</h2>
    </div>

    <!-- Scrollable content -->
    <nav class="flex-1 overflow-y-auto p-4 space-y-1">
      <!-- 20 channel items — scroll sẽ xuất hiện -->
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg bg-indigo-50 text-indigo-700 font-medium text-sm">
        <span class="text-lg">#</span> general
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> random
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> announcements
      </a>
      <!-- Thêm nhiều items để tạo scroll -->
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> design
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> frontend
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> backend
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> devops
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> help
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> jobs
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> projects
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> resources
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> events
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> feedback
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> mentoring
      </a>
      <a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
        <span class="text-lg">#</span> open-source
      </a>
    </nav>

    <!-- Footer sidebar — fixed -->
    <div class="p-4 border-t">
      <div class="flex items-center gap-2">
        <div class="w-8 h-8 bg-indigo-500 rounded-full"></div>
        <span class="text-sm font-medium">User Name</span>
      </div>
    </div>
  </aside>

  <!-- Main content -->
  <main class="flex-1 p-6">
    <h1 class="text-2xl font-bold">Main Content Area</h1>
  </main>
</div>

<!-- Scrollbar mỏng với màu tùy chỉnh -->
<div class="h-48 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100 p-4 bg-white rounded-lg">
  <p class="text-gray-700">Nội dung cuộn với scrollbar được style...</p>
  <!-- nhiều content -->
</div>

<!-- Ẩn scrollbar nhưng vẫn scroll -->
<div class="h-48 overflow-y-auto scrollbar-none p-4 bg-white rounded-lg">
  <p class="text-gray-700">Scrollbar bị ẩn nhưng vẫn scroll được bằng touch/swipe/wheel...</p>
</div>

<!-- scrollbar-gutter: tránh layout shift -->
<div class="h-48 overflow-y-auto scrollbar-gutter-stable p-4 bg-white rounded-lg">
  <p>Dành chỗ cho scrollbar ngay cả khi chưa đủ nội dung để scroll → không bị giật layout.</p>
</div>