feat: implement core Nuxt application with film browsing, search, and detail page functionality using OPhim and NguonC APIs.

app/pages/index.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { BookPlus, ChevronLeft, ChevronRight, Heart, Info, Play } from 'lucide-vue-next'
+
+const { data, pending, error } = await useFetch('/api/movies', {
+  query: {
+    page: 1,
+  },
+})
+
+const movies = computed(() => data.value?.items ?? [])
+const heroIndex = ref(0)
+const heroSlides = computed(() => movies.value.slice(0, 6))
+const hero = computed(() => heroSlides.value[heroIndex.value] ?? movies.value[0])
+const sourceStatus = computed(() => data.value?.sources ?? [])
+
+let heroTimer: ReturnType<typeof setInterval> | undefined
+
+function selectHero(index: number) {
+  heroIndex.value = index
+}
+
+function nextHero() {
+  if (!heroSlides.value.length) return
+  heroIndex.value = (heroIndex.value + 1) % heroSlides.value.length
+}
+
+function previousHero() {
+  if (!heroSlides.value.length) return
+  heroIndex.value = (heroIndex.value - 1 + heroSlides.value.length) % heroSlides.value.length
+}
+
+watch(heroSlides, (slides) => {
+  if (heroIndex.value >= slides.length) {
+    heroIndex.value = 0
+  }
+})
+
+onMounted(() => {
+  heroTimer = setInterval(nextHero, 6500)
+})
+
+onBeforeUnmount(() => {
+  if (heroTimer) clearInterval(heroTimer)
+})
+
+const rows = computed(() => [
+  {
+    title: 'Mới cập nhật',
+    to: '/phim',
+    items: movies.value.slice(0, 12),
+  },
+  {
+    title: 'Phim bộ Hàn Quốc',
+    to: '/phim?type=series',
+    items: movies.value.filter((movie: any) => movie.type !== 'single').slice(0, 12),
+  },
+  {
+    title: 'Phim lẻ & đặc biệt',
+    to: '/phim?type=single',
+    items: movies.value.filter((movie: any) => movie.type === 'single' || movie.episode === 'Full').slice(0, 12),
+  },
+])
+
+useHead({
+  title: 'KR Phim - Phim Hàn Quốc',
+  meta: [
+    {
+      name: 'description',
+      content: 'Xem phim Hàn Quốc Vietsub từ OPhim và NguồnC với giao diện xanh da trời kiểu Netflix.',
+    },
+  ],
+})
+</script>
+
+<template>
+  <main class="min-h-screen overflow-hidden">
+    <AppHeader />
+
+    <section v-if="hero" class="relative h-[680px] min-h-[680px] overflow-hidden pt-28 sm:h-[720px] sm:min-h-[720px] lg:h-[760px] lg:min-h-[760px] lg:pt-16">
+      <TransitionGroup name="hero-fade">
+        <img
+          v-for="(slide, index) in heroSlides"
+          v-show="index === heroIndex"
+          :key="`${slide.source}-${slide.slug}`"
+          :src="slide.poster || slide.thumb"
+          :alt="slide.name"
+          class="absolute inset-0 h-full w-full object-cover"
+        >
+      </TransitionGroup>
+      <div class="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-950/76 to-slate-950/10" />
+      <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-slate-950/30" />
+      <div class="absolute inset-y-0 right-0 hidden w-1/2 bg-gradient-to-l from-sky-950/18 to-transparent lg:block" />
+
+      <div class="relative mx-auto grid h-full max-w-[1560px] content-center px-4 pb-28 pt-16 sm:px-6 lg:px-8 xl:px-10">
+        <div class="max-w-5xl">
+          <p class="mb-3 text-sm font-semibold text-sky-200">
+            Chỉ phim Hàn Quốc
+          </p>
+          <h1 class="max-w-5xl text-3xl font-black leading-tight text-white drop-shadow-2xl sm:text-5xl lg:text-6xl">
+            {{ hero.name }}
+          </h1>
+          <p class="mt-3 max-w-2xl text-lg text-sky-100">
+            {{ hero.originName || 'Kho phim Hàn Vietsub mới cập nhật' }}
+          </p>
+          <div class="mt-5 flex flex-wrap gap-2 text-sm font-bold text-slate-100">
+            <span v-if="hero.rating" class="rounded bg-black/35 px-3 py-2 ring-1 ring-white/10">IMDb {{ hero.rating.toFixed(1) }}</span>
+            <span v-if="hero.quality" class="rounded bg-sky-300 px-3 py-2 text-slate-950">{{ hero.quality }}</span>
+            <span v-if="hero.lang" class="rounded bg-white px-3 py-2 text-slate-950">{{ hero.lang }}</span>
+            <span v-if="hero.year" class="rounded bg-black/35 px-3 py-2 ring-1 ring-white/10">{{ hero.year }}</span>
+            <span v-if="hero.episode" class="rounded bg-black/35 px-3 py-2 ring-1 ring-white/10">{{ hero.episode }}</span>
+          </div>
+          <div v-if="hero.categories?.length" class="mt-4 flex flex-wrap gap-2 text-sm font-semibold text-white">
+            <span
+              v-for="category in hero.categories.slice(0, 4)"
+              :key="category"
+              class="rounded bg-white/12 px-3 py-1.5 backdrop-blur"
+            >
+              {{ category }}
+            </span>
+          </div>
+          <p class="mt-5 max-w-2xl text-sm leading-7 text-slate-100 sm:text-base">
+            {{ hero.originName ? `${hero.originName}. ` : '' }}{{ hero.time || 'Phim Hàn Quốc Vietsub mới cập nhật.' }}
+          </p>
+          <div class="mt-8 flex items-center gap-4">
+            <NuxtLink
+              :to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
+              class="grid size-16 shrink-0 place-items-center rounded-full bg-sky-300 text-slate-950 shadow-2xl shadow-sky-950/50 transition hover:scale-105 hover:bg-white"
+              aria-label="Xem ngay"
+            >
+              <Play class="size-7 fill-current" />
+            </NuxtLink>
+            <button
+              type="button"
+              class="grid size-12 shrink-0 place-items-center rounded-full border border-white/20 bg-black/28 text-white backdrop-blur transition hover:bg-white/16"
+              aria-label="Yêu thích"
+            >
+              <Heart class="size-5" />
+            </button>
+            <button
+              type="button"
+              class="grid size-12 shrink-0 place-items-center rounded-full border border-white/20 bg-black/28 text-white backdrop-blur transition hover:bg-white/16"
+              aria-label="Thêm vào thư viện"
+            >
+              <BookPlus class="size-5" />
+            </button>
+            <NuxtLink
+              :to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
+              class="grid size-12 shrink-0 place-items-center rounded-full border border-white/20 bg-black/28 text-white backdrop-blur transition hover:bg-white/16"
+              aria-label="Thông tin phim"
+            >
+              <Info class="size-5" />
+            </NuxtLink>
+          </div>
+        </div>
+
+        <div class="absolute bottom-12 right-4 flex max-w-[calc(100%-2rem)] items-center gap-3 sm:right-6 lg:right-8">
+          <button
+            type="button"
+            class="hidden size-10 shrink-0 place-items-center rounded-full border border-white/15 bg-black/35 text-white backdrop-blur transition hover:bg-white/15 sm:grid"
+            aria-label="Phim trước"
+            @click="previousHero"
+          >
+            <ChevronLeft class="size-5" />
+          </button>
+
+          <div class="no-scrollbar flex gap-3 overflow-x-auto pb-2">
+            <button
+              v-for="(slide, index) in heroSlides"
+              :key="`${slide.source}-${slide.slug}-thumb`"
+              type="button"
+              class="relative h-14 w-28 shrink-0 overflow-hidden rounded-md border bg-slate-900 shadow-lg shadow-black/30 transition sm:h-16 sm:w-32"
+              :class="index === heroIndex ? 'border-sky-300 ring-2 ring-sky-300/45' : 'border-white/15 opacity-70 hover:opacity-100'"
+              @click="selectHero(index)"
+            >
+              <img :src="slide.thumb || slide.poster" :alt="slide.name" class="h-full w-full object-cover">
+              <span class="absolute inset-x-0 bottom-0 truncate bg-black/55 px-1 py-0.5 text-[10px] font-semibold text-white">
+                {{ slide.name }}
+              </span>
+            </button>
+          </div>
+
+          <button
+            type="button"
+            class="hidden size-10 shrink-0 place-items-center rounded-full border border-white/15 bg-black/35 text-white backdrop-blur transition hover:bg-white/15 sm:grid"
+            aria-label="Phim tiếp theo"
+            @click="nextHero"
+          >
+            <ChevronRight class="size-5" />
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <section v-else class="mx-auto flex min-h-screen max-w-7xl items-center px-4 pt-36 sm:px-6 lg:px-8 lg:pt-24">
+      <div>
+        <h1 class="text-4xl font-black text-white">KR Phim</h1>
+        <p class="mt-3 text-slate-300">Đang tải kho phim Hàn Quốc...</p>
+      </div>
+    </section>
+
+    <div class="relative z-10 mx-auto -mt-10 max-w-[1560px] px-4 pb-16 sm:px-6 lg:px-8 xl:px-10">
+      <div v-if="sourceStatus.length" class="mb-8 flex flex-wrap gap-2 text-xs text-slate-300">
+        <span
+          v-for="source in sourceStatus"
+          :key="source.name"
+          class="rounded-full border border-white/10 bg-white/8 px-3 py-1"
+        >
+          {{ source.name }}: {{ source.ok ? 'sẵn sàng' : 'đang bị chặn' }}
+        </span>
+      </div>
+
+      <p v-if="error" class="rounded-md border border-red-300/30 bg-red-500/12 p-4 text-red-100">
+        Không tải được dữ liệu phim. Vui lòng thử lại sau.
+      </p>
+
+      <div v-if="pending" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
+        <div v-for="item in 12" :key="item" class="aspect-[2/3] animate-pulse rounded-md bg-white/10" />
+      </div>
+
+      <section
+        v-for="(row, index) in rows"
+        v-show="row.items.length"
+        :id="index === 0 ? 'latest' : index === 1 ? 'series' : 'movies'"
+        :key="row.title"
+        class="mb-12"
+      >
+        <div class="mb-4 flex items-end justify-between gap-4">
+          <h2 class="text-2xl font-extrabold text-white">{{ row.title }}</h2>
+          <NuxtLink :to="row.to" class="text-sm font-semibold text-sky-200 hover:text-white">
+            Xem thêm
+          </NuxtLink>
+        </div>
+
+        <div class="no-scrollbar -mx-4 flex snap-x gap-4 overflow-x-auto px-4 pb-5">
+          <HomeMovieCard
+            v-for="movie in row.items"
+            :key="`${movie.source}-${movie.slug}`"
+            :movie="movie"
+          />
+        </div>
+      </section>
+    </div>
+  </main>
+</template>

app/pages/phim/[slug].vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+const route = useRoute()
+const selectedServer = ref(0)
+const selectedEpisode = ref(0)
+
+const { data: movie, pending, error } = await useFetch(`/api/movies/${route.params.slug}`, {
+  query: {
+    source: route.query.source,
+  },
+})
+
+const servers = computed(() => movie.value?.servers ?? [])
+const activeServer = computed(() => servers.value[selectedServer.value])
+const activeEpisode = computed(() => activeServer.value?.episodes?.[selectedEpisode.value])
+const playerUrl = computed(() => activeEpisode.value?.linkEmbed || activeEpisode.value?.linkM3u8 || '')
+const episodeCount = computed(() => servers.value.reduce((total: number, server: any) => total + (server.episodes?.length || 0), 0))
+
+watch(selectedServer, () => {
+  selectedEpisode.value = 0
+})
+
+useHead(() => ({
+  title: movie.value ? `${movie.value.name} - KR Phim` : 'Đang tải phim - KR Phim',
+  meta: [
+    {
+      name: 'description',
+      content: movie.value?.content || 'Xem phim Hàn Quốc Vietsub.',
+    },
+  ],
+}))
+</script>
+
+<template>
+  <main class="min-h-screen bg-slate-950 text-white">
+    <AppHeader />
+
+    <div v-if="pending" class="mx-auto grid min-h-screen max-w-7xl gap-8 px-4 pt-36 sm:px-6 lg:grid-cols-[minmax(0,1fr)_22rem] lg:px-8 lg:pt-28">
+      <div class="aspect-video animate-pulse rounded-md bg-white/10" />
+      <div class="h-96 animate-pulse rounded-md bg-white/10" />
+    </div>
+
+    <div v-else-if="error || !movie" class="mx-auto flex min-h-screen max-w-4xl items-center px-4 pt-36 lg:pt-24">
+      <div>
+        <h1 class="text-3xl font-black">Không mở được phim</h1>
+        <p class="mt-3 text-slate-300">Nguồn phim có thể đang chặn request hoặc phim chưa có tập xem.</p>
+      </div>
+    </div>
+
+    <template v-else>
+      <section class="relative pt-32 lg:pt-16">
+        <img :src="movie.poster || movie.thumb" :alt="movie.name" class="absolute inset-0 h-full w-full object-cover opacity-25">
+        <div class="absolute inset-0 bg-gradient-to-b from-slate-950/70 via-slate-950 to-slate-950" />
+
+        <div class="relative mx-auto grid max-w-7xl gap-8 px-4 py-12 sm:px-6 lg:grid-cols-[minmax(0,1fr)_22rem] lg:px-8">
+          <div>
+            <div class="overflow-hidden rounded-md bg-black shadow-2xl shadow-sky-950/40 ring-1 ring-white/10">
+              <div class="aspect-video">
+                <iframe
+                  v-if="playerUrl"
+                  :src="playerUrl"
+                  :title="`${movie.name} - ${activeEpisode?.name || 'Tập phim'}`"
+                  class="h-full w-full"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowfullscreen
+                />
+                <div v-else class="flex h-full items-center justify-center bg-slate-900 px-6 text-center text-slate-300">
+                  Phim này chưa có link xem khả dụng từ API.
+                </div>
+              </div>
+            </div>
+
+            <div class="mt-8">
+              <p class="mb-3 text-sm font-semibold uppercase tracking-wide text-sky-300">{{ movie.source }} · {{ movie.lang || 'Vietsub' }}</p>
+              <h1 class="text-3xl font-black leading-tight sm:text-5xl">{{ movie.name }}</h1>
+              <p v-if="movie.originName" class="mt-2 text-lg text-slate-300">{{ movie.originName }}</p>
+
+              <div class="mt-5 flex flex-wrap gap-2 text-sm text-slate-100">
+                <span v-if="movie.year" class="rounded-full bg-white/10 px-3 py-1">{{ movie.year }}</span>
+                <span v-if="movie.quality" class="rounded-full bg-white/10 px-3 py-1">{{ movie.quality }}</span>
+                <span v-if="movie.episode" class="rounded-full bg-sky-400/20 px-3 py-1 text-sky-100">{{ movie.episode }}</span>
+                <span v-if="movie.time" class="rounded-full bg-white/10 px-3 py-1">{{ movie.time }}</span>
+              </div>
+
+              <p v-if="movie.content" class="mt-6 max-w-4xl text-base leading-8 text-slate-200">
+                {{ movie.content }}
+              </p>
+
+              <div class="mt-6 grid gap-3 text-sm text-slate-300 sm:grid-cols-2">
+                <p v-if="movie.categories?.length"><span class="font-bold text-white">Thể loại:</span> {{ movie.categories.join(', ') }}</p>
+                <p v-if="movie.countries?.length"><span class="font-bold text-white">Quốc gia:</span> {{ movie.countries.join(', ') }}</p>
+                <p v-if="movie.actors?.length"><span class="font-bold text-white">Diễn viên:</span> {{ movie.actors.slice(0, 8).join(', ') }}</p>
+                <p v-if="movie.directors?.length"><span class="font-bold text-white">Đạo diễn:</span> {{ movie.directors.join(', ') }}</p>
+              </div>
+            </div>
+          </div>
+
+          <aside class="lg:sticky lg:top-24 lg:self-start">
+            <div class="rounded-md border border-white/10 bg-white/8 p-4 shadow-2xl shadow-black/20 backdrop-blur-xl">
+              <div class="flex items-center justify-between gap-3">
+                <h2 class="text-xl font-extrabold">Danh sách tập</h2>
+                <span class="text-sm text-slate-300">{{ episodeCount }} tập</span>
+              </div>
+
+              <div v-if="servers.length > 1" class="mt-4 flex gap-2 overflow-x-auto pb-2">
+                <button
+                  v-for="(server, index) in servers"
+                  :key="server.name"
+                  type="button"
+                  class="shrink-0 rounded-md px-3 py-2 text-sm font-semibold"
+                  :class="selectedServer === index ? 'bg-sky-300 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
+                  @click="selectedServer = index"
+                >
+                  {{ server.name }}
+                </button>
+              </div>
+
+              <div v-if="activeServer?.episodes?.length" class="mt-4 grid max-h-[32rem] grid-cols-3 gap-2 overflow-y-auto pr-1 sm:grid-cols-4 lg:grid-cols-3">
+                <button
+                  v-for="(episode, index) in activeServer.episodes"
+                  :key="`${episode.name}-${index}`"
+                  type="button"
+                  class="min-h-11 rounded-md px-3 py-2 text-sm font-bold transition"
+                  :class="selectedEpisode === index ? 'bg-sky-300 text-slate-950' : 'bg-slate-900/80 text-slate-100 hover:bg-sky-400/20'"
+                  @click="selectedEpisode = index"
+                >
+                  {{ episode.name }}
+                </button>
+              </div>
+
+              <p v-else class="mt-4 rounded-md border border-white/10 bg-slate-900/70 p-4 text-sm text-slate-300">
+                Chưa có tập xem từ nguồn này.
+              </p>
+            </div>
+          </aside>
+        </div>
+      </section>
+    </template>
+  </main>
+</template>

app/pages/phim/index.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { ChevronLeft, ChevronRight, Search } from 'lucide-vue-next'
+
+const route = useRoute()
+const router = useRouter()
+
+const page = ref(Math.max(Number(route.query.page || 1), 1))
+const keyword = ref(typeof route.query.q === 'string' ? route.query.q : '')
+const debouncedKeyword = ref(keyword.value.trim())
+const type = ref(typeof route.query.type === 'string' ? route.query.type : 'all')
+
+let searchTimer: ReturnType<typeof setTimeout> | undefined
+
+watch(keyword, (value) => {
+  if (searchTimer) clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    debouncedKeyword.value = value.trim()
+    page.value = 1
+  }, 420)
+})
+
+watch(type, () => {
+  page.value = 1
+})
+
+watch([page, debouncedKeyword, type], () => {
+  router.replace({
+    query: {
+      page: page.value > 1 ? page.value : undefined,
+      q: debouncedKeyword.value || undefined,
+      type: type.value !== 'all' ? type.value : undefined,
+    },
+  })
+})
+
+const { data, pending, error } = await useFetch('/api/movies', {
+  query: computed(() => ({
+    page: page.value,
+    keyword: debouncedKeyword.value || undefined,
+  })),
+})
+
+const movies = computed(() => data.value?.items ?? [])
+const filteredMovies = computed(() => {
+  if (type.value === 'series') {
+    return movies.value.filter((movie: any) => movie.type !== 'single')
+  }
+
+  if (type.value === 'single') {
+    return movies.value.filter((movie: any) => movie.type === 'single' || movie.episode === 'Full')
+  }
+
+  return movies.value
+})
+const totalPages = computed(() => Number(data.value?.pagination?.totalPages || data.value?.pagination?.total_pages || 0))
+const sourceStatus = computed(() => data.value?.sources ?? [])
+
+function nextPage() {
+  page.value += 1
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+function previousPage() {
+  page.value = Math.max(1, page.value - 1)
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+onBeforeUnmount(() => {
+  if (searchTimer) clearTimeout(searchTimer)
+})
+
+useHead({
+  title: 'Duyệt phim Hàn Quốc - KR Phim',
+  meta: [
+    {
+      name: 'description',
+      content: 'Tìm kiếm và lọc phim Hàn Quốc Vietsub trên KR Phim.',
+    },
+  ],
+})
+</script>
+
+<template>
+  <main class="min-h-screen bg-slate-950">
+    <AppHeader />
+
+    <section class="mx-auto max-w-[1560px] px-4 pb-16 pt-36 sm:px-6 lg:px-8 lg:pt-28 xl:px-10">
+      <div class="mb-8 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <p class="text-sm font-semibold text-sky-200">Kho phim Hàn Quốc</p>
+          <h1 class="mt-2 text-3xl font-black text-white sm:text-5xl">
+            Duyệt phim
+          </h1>
+        </div>
+
+        <div class="flex w-full flex-col gap-3 sm:flex-row lg:max-w-3xl">
+          <div class="flex min-w-0 flex-1 items-center rounded-full border border-white/10 bg-white/8 px-4 py-3 shadow-2xl shadow-sky-950/20">
+            <Search class="mr-3 size-4 shrink-0 text-sky-200" />
+            <input
+              v-model="keyword"
+              type="search"
+              placeholder="Tìm phim Hàn Quốc..."
+              class="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400"
+            >
+          </div>
+
+          <div class="grid grid-cols-3 rounded-full border border-white/10 bg-white/8 p-1 text-sm font-bold text-slate-200">
+            <button
+              type="button"
+              class="rounded-full px-4 py-2 transition"
+              :class="type === 'all' ? 'bg-sky-300 text-slate-950' : 'hover:text-white'"
+              @click="type = 'all'"
+            >
+              Tất cả
+            </button>
+            <button
+              type="button"
+              class="rounded-full px-4 py-2 transition"
+              :class="type === 'series' ? 'bg-sky-300 text-slate-950' : 'hover:text-white'"
+              @click="type = 'series'"
+            >
+              Phim bộ
+            </button>
+            <button
+              type="button"
+              class="rounded-full px-4 py-2 transition"
+              :class="type === 'single' ? 'bg-sky-300 text-slate-950' : 'hover:text-white'"
+              @click="type = 'single'"
+            >
+              Phim lẻ
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="sourceStatus.length" class="mb-8 flex flex-wrap gap-2 text-xs text-slate-300">
+        <span
+          v-for="source in sourceStatus"
+          :key="source.name"
+          class="rounded-full border border-white/10 bg-white/8 px-3 py-1"
+        >
+          {{ source.name }}: {{ source.ok ? 'sẵn sàng' : 'đang bị chặn' }}
+        </span>
+      </div>
+
+      <p v-if="error" class="rounded-md border border-red-300/30 bg-red-500/12 p-4 text-red-100">
+        Không tải được dữ liệu phim. Vui lòng thử lại sau.
+      </p>
+
+      <div v-if="pending" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6">
+        <div v-for="item in 18" :key="item" class="aspect-[2/3] animate-pulse rounded-md bg-white/10" />
+      </div>
+
+      <div v-else class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6">
+        <NuxtLink
+          v-for="movie in filteredMovies"
+          :key="`${movie.source}-${movie.slug}`"
+          :to="{ path: `/phim/${movie.slug}`, query: { source: movie.source } }"
+          class="group"
+        >
+          <div class="relative aspect-[2/3] overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-sky-300/60">
+            <img :src="movie.thumb || movie.poster" :alt="movie.name" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
+            <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950 via-slate-950/70 to-transparent p-3">
+              <p class="line-clamp-2 text-sm font-bold leading-snug text-white">{{ movie.name }}</p>
+              <p class="mt-1 truncate text-xs text-sky-100">{{ movie.episode || movie.year || movie.quality }}</p>
+            </div>
+            <span class="absolute left-2 top-2 rounded bg-sky-400 px-2 py-1 text-xs font-black text-slate-950">
+              {{ movie.source }}
+            </span>
+          </div>
+        </NuxtLink>
+      </div>
+
+      <div v-if="!pending && !filteredMovies.length" class="rounded-md border border-white/10 bg-white/8 p-8 text-center text-slate-300">
+        Không có phim phù hợp.
+      </div>
+
+      <div v-if="movies.length" class="flex items-center justify-center gap-3 pt-10">
+        <button
+          type="button"
+          :disabled="page === 1"
+          class="grid size-11 place-items-center rounded-full border border-white/15 bg-white/8 text-white disabled:cursor-not-allowed disabled:opacity-40"
+          aria-label="Trang trước"
+          @click="previousPage"
+        >
+          <ChevronLeft class="size-5" />
+        </button>
+        <span class="text-sm text-slate-300">Trang {{ page }}<template v-if="totalPages"> / {{ totalPages }}</template></span>
+        <button
+          type="button"
+          class="grid size-11 place-items-center rounded-full bg-sky-300 text-slate-950 hover:bg-white"
+          aria-label="Trang sau"
+          @click="nextPage"
+        >
+          <ChevronRight class="size-5" />
+        </button>
+      </div>
+    </section>
+  </main>
+</template>