src/pages/tphim.astro

---
import Layout from '../layouts/Layout.astro';
import HeroBanner from '../components/HeroBanner.jsx';
import MovieSlider from '../components/MovieSlider.jsx';
import DeferredHero from '../components/DeferredHero.astro';
import DeferredTopTen from '../components/DeferredTopTen.astro';
import HomeSectionsLoader from '../components/HomeSectionsLoader.jsx';
import { getNewestMovies } from '../lib/api.js';
import { TOPICS } from '../lib/topics.js';

// We fetch newest movies for Hero/Slider to have some initial content.
---

<Layout
  title="DPTXA - Động Phim TXA | Xem phim online miễn phí chất lượng cao Full HD Vietsub"
  description="DPTXA - Nền tảng xem phim trực tuyến miễn phí với kho phim khổng lồ, cập nhật liên tục mỗi ngày. Phim bộ, phim lẻ, hoạt hình Full HD Vietsub."
  slug="/tphim"
>
  <div class="pb-24">
    <DeferredHero server:defer>
      <div slot="fallback" class="h-[650px] w-full animate-pulse bg-white/5 rounded-b-[40px]" />
    </DeferredHero>

    <div class="mx-auto max-w-7xl px-4 mt-12 mb-16">
       <h2 class="text-2xl font-black text-white mb-8 tracking-tight">Bạn đang quan tâm gì?</h2>
       <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
          {[
            { name: 'Viễn Tưởng', color: 'from-red-600/80 to-red-900/90', slug: 'vien-tuong' },
            { name: 'Thái Lan', color: 'from-blue-600/80 to-blue-900/90', slug: 'thai-lan' },
            { name: 'Chiếu Rạp', color: 'from-purple-600/80 to-purple-900/90', slug: 'phim-chieu-rap' },
            { name: 'Kinh Dị', color: 'from-orange-600/80 to-orange-900/90', slug: 'kinh-di' },
            { name: 'Cổ Trang', color: 'from-rose-600/80 to-rose-900/90', slug: 'co-trang' },
            { name: 'Hành Động', color: 'from-emerald-600/80 to-emerald-900/90', slug: 'hanh-dong' }
          ].map(cat => (
            <a href={`/the-loai/${cat.slug}`} class={`group relative h-32 overflow-hidden rounded-2xl bg-gradient-to-br ${cat.color} p-5 transition-all hover:scale-105 active:scale-95 shadow-lg`}>
               <div class="relative z-10">
                  <h3 class="text-lg font-black text-white mb-1">{cat.name}</h3>
                  <span class="text-[10px] font-bold text-white/60 group-hover:text-white transition-colors">Khám phá <i class="fas fa-chevron-right ml-1"></i></span>
               </div>
               <div class="absolute -right-4 -bottom-4 text-white/10 text-6xl font-black rotate-12 group-hover:rotate-0 transition-transform duration-500">
                  <i class="fas fa-film"></i>
               </div>
            </a>
          ))}
       </div>
    </div>

    <!-- Premium Topic Collections Section -->
    <div class="mx-auto max-w-7xl px-4 my-16">
       <div class="flex items-center justify-between mb-8">
          <div>
             <h2 class="text-2xl font-black text-white tracking-tight">Chủ đề nổi bật</h2>
             <p class="text-xs font-semibold text-gray-500 mt-1">Các tuyển tập phim đặc sắc được cập nhật tự động liên tục</p>
          </div>
          <a href="/chu-de" class="text-xs font-black uppercase tracking-widest text-primary hover:text-white transition-colors flex items-center gap-1.5">
             Xem tất cả <i class="fas fa-arrow-right"></i>
          </a>
       </div>
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {TOPICS.slice(0, 4).map(topic => (
            <a 
              href={`/chu-de/${topic.slug}`} 
              class="group relative flex flex-col justify-between overflow-hidden rounded-3xl border border-white/5 bg-gradient-to-b from-white/[0.03] to-transparent p-6 transition-all duration-300 hover:-translate-y-1.5 hover:border-white/10 hover:shadow-xl"
            >
               <!-- Ambient Hover Glow -->
               <div class={`absolute -right-16 -top-16 h-32 w-32 rounded-full bg-gradient-to-br ${topic.color} opacity-0 blur-[50px] transition-opacity duration-500 group-hover:opacity-20`}></div>
               
               <div>
                  <div class="flex items-center justify-between mb-4">
                     <span class={`text-[8px] font-black uppercase tracking-wider px-2 py-0.5 rounded bg-gradient-to-r ${topic.color} text-white`}>
                        {topic.badge}
                     </span>
                      {topic.slug === 'the-gioi-netflix' ? (
                        <svg class="h-4 w-auto fill-[#e50914] group-hover:fill-white transition-colors" viewBox=".238 .034 919.406 248.488"><path d="m870.46 118.314 49.184 130.208c-14.495-2.07-28.982-4.663-43.733-6.999l-27.707-71.945-28.468 66.006c-13.973-2.336-27.698-3.114-41.672-4.928l49.955-113.89-45.309-116.732h41.937l25.362 65.22 27.185-65.22h42.442zm-120.864-118.28h-38.052v225.71c12.425.779 25.362 1.292 38.052 2.841zm-70.927 223.118c-34.68-2.328-69.37-4.39-104.829-5.177v-217.94h38.823v181.188c22.264.514 44.52 2.32 66.006 3.355zm-146.252-134.847v38.822h-53.06v88.263h-38.3v-215.356h108.713v38.822h-70.405v49.45h53.06zm-156.597-49.449v178.605c-12.946 0-26.14 0-38.83.514v-179.119h-40.122v-38.822h119.322v38.822zm-120.88 90.334c-17.08 0-37.274 0-51.769.787v57.715c22.778-1.557 45.556-3.363 68.59-4.141v37.273l-107.412 8.548v-229.338h107.405v38.822h-68.584v52.29c15.017 0 38.052-.778 51.768-.778v38.83zm-215.109-21.743v135.633c-13.965 1.557-26.398 3.371-39.593 5.442v-248.488h37.017l50.469 141.076v-141.076h38.83v232.436c-13.717 2.336-27.698 3.114-42.45 5.177z"/></svg>
                      ) : (
                        <i class={`${topic.icon} text-gray-500 group-hover:text-white transition-colors text-base`}></i>
                      )}
                  </div>
                  <h3 class="text-base font-black text-white group-hover:text-primary transition-colors">{topic.name}</h3>
                  <p class="text-[10px] font-medium text-gray-400 mt-2 line-clamp-2 leading-relaxed">{topic.description}</p>
               </div>
               
               <div class="mt-6 flex items-center justify-between text-[9px] font-black uppercase tracking-widest text-gray-500 group-hover:text-white transition-colors">
                  <span>Khám phá</span>
                  <i class="fas fa-chevron-right text-[8px] transition-transform group-hover:translate-x-0.5"></i>
               </div>
            </a>
          ))}
       </div>
    </div>

    <!-- Kho tàng Anime Mới Nhất Section WILL BE ADDED HERE -->
    <div id="newest-anime-section"></div>

    <div class="mt-12 space-y-4">
      <DeferredTopTen server:defer>
        <div slot="fallback" class="mx-auto max-w-7xl px-4 py-16">
          <div class="h-10 w-64 animate-pulse rounded-lg bg-white/5 mb-12" />
          <div class="flex gap-8 overflow-hidden">
            {[...Array(5)].map((_, i) => (
              <div key={i} class="h-[400px] w-[260px] flex-shrink-0 animate-pulse rounded-[32px] bg-white/5" />
            ))}
          </div>
        </div>
      </DeferredTopTen>

      {/* Dynamic, Infinite / Scroll Triggered Sections Loader */}
      <HomeSectionsLoader client:load />
    </div>
  </div>
</Layout>