feat: add movie management API and database schema

- Implemented movie CRUD operations with endpoints for creating, retrieving, updating, and deleting movies.
- Added pagination and filtering capabilities for movie retrieval.
- Integrated Redis caching for improved performance on movie data retrieval.
- Created database schema for movies with necessary fields and types.
- Added migration files for initial movie table creation and subsequent updates.
- Configured database connection using Drizzle ORM with MySQL.
- Established Redis connection utility for caching.

app/pages/admin/cai-dat.vue

@@ -58,8 +58,7 @@ const allowRegistration = ref(true)
               <p class="text-sm font-semibold text-white">Chế độ bảo trì</p>
               <p class="mt-1 text-xs text-slate-400">Tạm thời tắt website để bảo trì</p>
             </div>
-            <input v-model="maintenanceMode" type="checkbox"
-              class="h-5 w-5 cursor-pointer rounded border-white/20 bg-white/5 text-yellow-400 focus:ring-yellow-400/50">
+            <AdminToggle v-model="maintenanceMode" />
           </label>
 
           <label class="flex cursor-pointer items-center justify-between rounded-lg border border-white/5 bg-white/5 p-4 transition hover:border-white/10">
@@ -67,8 +66,7 @@ const allowRegistration = ref(true)
               <p class="text-sm font-semibold text-white">Cho phép đăng ký</p>
               <p class="mt-1 text-xs text-slate-400">Cho phép người dùng mới đăng ký tài khoản</p>
             </div>
-            <input v-model="allowRegistration" type="checkbox"
-              class="h-5 w-5 cursor-pointer rounded border-white/20 bg-white/5 text-yellow-400 focus:ring-yellow-400/50">
+            <AdminToggle v-model="allowRegistration" />
           </label>
         </div>
       </div>

app/pages/admin/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BarChart3, Film, TrendingUp, Users } from 'lucide-vue-next'
+import { BarChart3, Film, RefreshCw, TrendingUp, X } from 'lucide-vue-next'
 
 definePageMeta({
   layout: 'admin',
@@ -9,159 +9,156 @@ useHead({
   title: 'Dashboard - CineK Admin',
 })
 
-const stats = [
-  {
-    label: 'Tổng phim',
-    value: '1,234',
-    change: '+12%',
-    icon: Film,
-    color: 'yellow',
-  },
-  {
-    label: 'Thành viên',
-    value: '5,678',
-    change: '+8%',
-    icon: Users,
-    color: 'blue',
-  },
-  {
-    label: 'Lượt xem hôm nay',
-    value: '45,678',
-    change: '+23%',
-    icon: TrendingUp,
-    color: 'green',
-  },
-  {
-    label: 'Doanh thu tháng',
-    value: '12.5M',
-    change: '+15%',
-    icon: BarChart3,
-    color: 'purple',
-  },
-]
+const { data: stats, refresh } = await useFetch('/api/admin/stats')
+const syncing = ref(false)
+const syncOpen = ref(false)
+const syncSources = ref({ ophim: true, nguonc: true, kkphim: true })
 
-const recentMovies = [
-  { name: 'Phim Hàn Quốc 1', views: 1234, status: 'active' },
-  { name: 'Phim Hàn Quốc 2', views: 890, status: 'active' },
-  { name: 'Phim Hàn Quốc 3', views: 2345, status: 'active' },
-  { name: 'Phim Hàn Quốc 4', views: 567, status: 'draft' },
-  { name: 'Phim Hàn Quốc 5', views: 1890, status: 'active' },
-]
+async function handleSync() {
+  const sources = Object.entries(syncSources.value)
+    .filter(([, enabled]) => enabled)
+    .map(([name]) => name)
+
+  if (!sources.length) return
+
+  syncing.value = true
+  try {
+    await $fetch('/api/admin/sync', {
+      method: 'POST',
+      body: { sources },
+    })
+    syncOpen.value = false
+    await refresh()
+  } catch (err) {
+    console.error('Sync failed:', err)
+  } finally {
+    syncing.value = false
+  }
+}
 </script>
 
 <template>
   <div>
-    <div class="mb-6">
-      <h1 class="text-2xl font-black text-white">Dashboard</h1>
-      <p class="mt-1 text-sm text-slate-400">Tổng quan hệ thống CineK</p>
+    <div class="mb-6 flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-black text-white">Dashboard</h1>
+        <p class="mt-1 text-sm text-slate-400">Tổng quan hệ thống CineK</p>
+      </div>
+      <button type="button"
+        class="inline-flex h-10 items-center gap-2 rounded-lg bg-yellow-400 px-4 text-sm font-black text-slate-950 transition hover:bg-yellow-300"
+        @click="syncOpen = true">
+        <RefreshCw class="size-4" />
+        Đồng bộ phim
+      </button>
     </div>
 
-    <div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-      <div v-for="stat in stats" :key="stat.label"
-        class="rounded-xl border border-white/10 bg-slate-900/50 p-5 transition hover:border-white/20">
+    <div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5 transition hover:border-white/20">
         <div class="flex items-start justify-between">
           <div>
-            <p class="text-sm font-semibold text-slate-400">{{ stat.label }}</p>
-            <p class="mt-2 text-3xl font-black text-white">{{ stat.value }}</p>
-            <p class="mt-2 text-sm font-semibold text-green-400">{{ stat.change }} tháng này</p>
+            <p class="text-sm font-semibold text-slate-400">Tổng phim</p>
+            <p class="mt-2 text-3xl font-black text-white">{{ stats?.total?.toLocaleString() || 0 }}</p>
           </div>
-          <div class="grid size-11 place-items-center rounded-xl"
-            :class="{
-              'bg-yellow-400/10 text-yellow-400': stat.color === 'yellow',
-              'bg-blue-400/10 text-blue-400': stat.color === 'blue',
-              'bg-green-400/10 text-green-400': stat.color === 'green',
-              'bg-purple-400/10 text-purple-400': stat.color === 'purple',
-            }">
-            <component :is="stat.icon" class="size-5" />
+          <div class="grid size-11 place-items-center rounded-xl bg-yellow-400/10 text-yellow-400">
+            <Film class="size-5" />
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5 transition hover:border-white/20">
+        <div class="flex items-start justify-between">
+          <div>
+            <p class="text-sm font-semibold text-slate-400">Phim đang hiển thị</p>
+            <p class="mt-2 text-3xl font-black text-green-400">{{ stats?.active?.toLocaleString() || 0 }}</p>
+          </div>
+          <div class="grid size-11 place-items-center rounded-xl bg-green-400/10 text-green-400">
+            <TrendingUp class="size-5" />
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5 transition hover:border-white/20">
+        <div class="flex items-start justify-between">
+          <div>
+            <p class="text-sm font-semibold text-slate-400">Phim chưa hiển thị</p>
+            <p class="mt-2 text-3xl font-black text-slate-400">{{ stats?.inactive?.toLocaleString() || 0 }}</p>
+          </div>
+          <div class="grid size-11 place-items-center rounded-xl bg-slate-400/10 text-slate-400">
+            <BarChart3 class="size-5" />
           </div>
         </div>
       </div>
     </div>
 
-    <div class="grid gap-6 lg:grid-cols-2">
-      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
-        <div class="mb-4 flex items-center justify-between">
-          <h2 class="text-lg font-black text-white">Phim gần đây</h2>
-          <NuxtLink to="/admin/phim" class="text-sm font-semibold text-yellow-400 hover:text-yellow-300">
-            Xem tất cả
-          </NuxtLink>
-        </div>
+    <Teleport to="body">
+      <Transition name="modal-fade">
+        <div v-if="syncOpen" class="fixed inset-0 z-70 grid place-items-center px-3">
+          <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" @click="syncOpen = false" />
+          <div class="relative w-full max-w-md rounded-xl border border-white/10 bg-slate-900 p-6 shadow-2xl">
+            <button type="button"
+              class="absolute right-3 top-3 grid size-8 place-items-center rounded-full text-white transition hover:bg-white/10"
+              @click="syncOpen = false">
+              <X class="size-5" />
+            </button>
 
-        <div class="space-y-3">
-          <div v-for="movie in recentMovies" :key="movie.name"
-            class="flex items-center justify-between rounded-lg border border-white/5 bg-white/5 p-3 transition hover:border-white/10">
-            <div class="flex items-center gap-3">
-              <div class="grid size-10 place-items-center rounded-lg bg-yellow-400/10">
-                <Film class="size-4 text-yellow-400" />
-              </div>
-              <div>
-                <p class="text-sm font-semibold text-white">{{ movie.name }}</p>
-                <p class="text-xs text-slate-400">{{ movie.views.toLocaleString() }} lượt xem</p>
-              </div>
-            </div>
-            <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
-              :class="movie.status === 'active' ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
-              {{ movie.status === 'active' ? 'Hoạt động' : 'Nháp' }}
-            </span>
-          </div>
-        </div>
-      </div>
+            <h2 class="text-xl font-black text-white">Đồng bộ phim</h2>
+            <p class="mt-1 text-sm text-slate-400">Chọn nguồn để đồng bộ phim vào hệ thống</p>
 
-      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
-        <div class="mb-4 flex items-center justify-between">
-          <h2 class="text-lg font-black text-white">Hoạt động gần đây</h2>
-        </div>
+            <div class="mt-5 space-y-3">
+              <label class="flex cursor-pointer items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4 transition hover:border-white/20">
+                <div>
+                  <p class="text-sm font-semibold text-white">OPhim</p>
+                  <p class="text-xs text-slate-400">ophim1.com</p>
+                </div>
+                <AdminToggle v-model="syncSources.ophim" />
+              </label>
 
-        <div class="space-y-4">
-          <div class="flex gap-3">
-            <div class="grid size-8 shrink-0 place-items-center rounded-full bg-green-400/10">
-              <Film class="size-3.5 text-green-400" />
-            </div>
-            <div class="min-w-0 flex-1">
-              <p class="text-sm text-white">
-                <span class="font-semibold">Phim mới</span> đã được thêm
-              </p>
-              <p class="mt-1 text-xs text-slate-400">2 phút trước</p>
-            </div>
-          </div>
+              <label class="flex cursor-pointer items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4 transition hover:border-white/20">
+                <div>
+                  <p class="text-sm font-semibold text-white">NguonC</p>
+                  <p class="text-xs text-slate-400">phim.nguonc.com</p>
+                </div>
+                <AdminToggle v-model="syncSources.nguonc" />
+              </label>
 
-          <div class="flex gap-3">
-            <div class="grid size-8 shrink-0 place-items-center rounded-full bg-blue-400/10">
-              <Users class="size-3.5 text-blue-400" />
+              <label class="flex cursor-pointer items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4 transition hover:border-white/20">
+                <div>
+                  <p class="text-sm font-semibold text-white">KKPhim</p>
+                  <p class="text-xs text-slate-400">phimapi.com</p>
+                </div>
+                <AdminToggle v-model="syncSources.kkphim" />
+              </label>
             </div>
-            <div class="min-w-0 flex-1">
-              <p class="text-sm text-white">
-                <span class="font-semibold">15 thành viên</span> mới đăng ký
-              </p>
-              <p class="mt-1 text-xs text-slate-400">1 giờ trước</p>
-            </div>
-          </div>
 
-          <div class="flex gap-3">
-            <div class="grid size-8 shrink-0 place-items-center rounded-full bg-yellow-400/10">
-              <TrendingUp class="size-3.5 text-yellow-400" />
-            </div>
-            <div class="min-w-0 flex-1">
-              <p class="text-sm text-white">
-                Lượt xem tăng <span class="font-semibold">23%</span> so với hôm qua
-              </p>
-              <p class="mt-1 text-xs text-slate-400">3 giờ trước</p>
-            </div>
-          </div>
-
-          <div class="flex gap-3">
-            <div class="grid size-8 shrink-0 place-items-center rounded-full bg-purple-400/10">
-              <BarChart3 class="size-3.5 text-purple-400" />
-            </div>
-            <div class="min-w-0 flex-1">
-              <p class="text-sm text-white">
-                Doanh thu tháng đạt <span class="font-semibold">12.5M</span>
-              </p>
-              <p class="mt-1 text-xs text-slate-400">5 giờ trước</p>
+            <div class="mt-6 flex justify-end gap-3">
+              <button type="button"
+                class="h-10 rounded-lg border border-white/10 px-4 text-sm font-semibold text-white transition hover:bg-white/10"
+                @click="syncOpen = false">
+                Huỷ
+              </button>
+              <button type="button"
+                class="inline-flex h-10 items-center gap-2 rounded-lg bg-yellow-400 px-5 text-sm font-black text-slate-950 transition hover:bg-yellow-300 disabled:opacity-50"
+                :disabled="syncing || !Object.values(syncSources).some(Boolean)"
+                @click="handleSync">
+                <RefreshCw class="size-4" :class="syncing ? 'animate-spin' : ''" />
+                {{ syncing ? 'Đang đồng bộ...' : 'Đồng bộ' }}
+              </button>
             </div>
           </div>
         </div>
-      </div>
-    </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>
+
+<style scoped>
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+</style>

app/pages/admin/phim.vue

@@ -1,126 +0,0 @@
-<script setup lang="ts">
-import { Edit, Eye, Film, MoreVertical, Plus, Search, Trash2 } from 'lucide-vue-next'
-
-definePageMeta({
-  layout: 'admin',
-})
-
-useHead({
-  title: 'Quản lý phim - CineK Admin',
-})
-
-const searchQuery = ref('')
-
-const movies = [
-  { id: 1, name: 'Phim Hàn Quốc 1', originName: 'Korean Drama 1', views: 1234, status: 'active', updatedAt: '2024-01-15' },
-  { id: 2, name: 'Phim Hàn Quốc 2', originName: 'Korean Drama 2', views: 890, status: 'active', updatedAt: '2024-01-14' },
-  { id: 3, name: 'Phim Hàn Quốc 3', originName: 'Korean Movie 1', views: 2345, status: 'active', updatedAt: '2024-01-13' },
-  { id: 4, name: 'Phim Hàn Quốc 4', originName: 'Korean Drama 3', views: 567, status: 'draft', updatedAt: '2024-01-12' },
-  { id: 5, name: 'Phim Hàn Quốc 5', originName: 'Korean Movie 2', views: 1890, status: 'active', updatedAt: '2024-01-11' },
-]
-</script>
-
-<template>
-  <div>
-    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-      <div>
-        <h1 class="text-2xl font-black text-white">Quản lý phim</h1>
-        <p class="mt-1 text-sm text-slate-400">Quản lý tất cả phim trên CineK</p>
-      </div>
-      <button type="button"
-        class="inline-flex h-10 items-center gap-2 rounded-lg bg-yellow-400 px-4 text-sm font-black text-slate-950 transition hover:bg-yellow-300">
-        <Plus class="size-4" />
-        Thêm phim mới
-      </button>
-    </div>
-
-    <div class="rounded-xl border border-white/10 bg-slate-900/50">
-      <div class="flex items-center gap-3 border-b border-white/10 p-4">
-        <div class="relative flex-1">
-          <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
-          <input v-model="searchQuery" type="search" placeholder="Tìm kiếm phim..."
-            class="h-10 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 text-sm text-white placeholder:text-slate-400 outline-none focus:border-yellow-400/50">
-        </div>
-      </div>
-
-      <div class="overflow-x-auto">
-        <table class="w-full">
-          <thead>
-            <tr class="border-b border-white/10 text-left text-xs font-semibold uppercase text-slate-400">
-              <th class="px-4 py-3">Phim</th>
-              <th class="px-4 py-3">Lượt xem</th>
-              <th class="px-4 py-3">Trạng thái</th>
-              <th class="px-4 py-3">Cập nhật</th>
-              <th class="px-4 py-3 text-right">Thao tác</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-white/5">
-            <tr v-for="movie in movies" :key="movie.id" class="transition hover:bg-white/5">
-              <td class="px-4 py-3">
-                <div class="flex items-center gap-3">
-                  <div class="grid size-10 shrink-0 place-items-center rounded-lg bg-yellow-400/10">
-                    <Film class="size-4 text-yellow-400" />
-                  </div>
-                  <div class="min-w-0">
-                    <p class="truncate text-sm font-semibold text-white">{{ movie.name }}</p>
-                    <p class="truncate text-xs text-slate-400">{{ movie.originName }}</p>
-                  </div>
-                </div>
-              </td>
-              <td class="px-4 py-3 text-sm text-slate-300">{{ movie.views.toLocaleString() }}</td>
-              <td class="px-4 py-3">
-                <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
-                  :class="movie.status === 'active' ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
-                  {{ movie.status === 'active' ? 'Hoạt động' : 'Nháp' }}
-                </span>
-              </td>
-              <td class="px-4 py-3 text-sm text-slate-400">{{ movie.updatedAt }}</td>
-              <td class="px-4 py-3">
-                <div class="flex items-center justify-end gap-1">
-                  <button type="button"
-                    class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white">
-                    <Eye class="size-4" />
-                  </button>
-                  <button type="button"
-                    class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white">
-                    <Edit class="size-4" />
-                  </button>
-                  <button type="button"
-                    class="grid size-8 place-items-center rounded-lg text-red-400 transition hover:bg-red-400/10">
-                    <Trash2 class="size-4" />
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="flex items-center justify-between border-t border-white/10 p-4">
-        <p class="text-sm text-slate-400">Hiển thị 1-5 / 1,234 phim</p>
-        <div class="flex items-center gap-2">
-          <button type="button"
-            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
-            ‹
-          </button>
-          <button type="button"
-            class="grid size-8 place-items-center rounded-lg bg-yellow-400/10 text-sm font-semibold text-yellow-400">
-            1
-          </button>
-          <button type="button"
-            class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
-            2
-          </button>
-          <button type="button"
-            class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
-            3
-          </button>
-          <button type="button"
-            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
-            ›
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

app/pages/admin/phim/[id].vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import { ArrowLeft, Check, Film, Image, Plus, Save, Trash2, Type } from 'lucide-vue-next'
+
+definePageMeta({
+  layout: 'admin',
+})
+
+const route = useRoute()
+const movieId = Number(route.params.id)
+
+const { data: movie, refresh } = await useFetch(`/api/admin/movies/${movieId}`)
+
+useHead({
+  title: computed(() => movie.value ? `Chỉnh sửa: ${movie.value.name} - CineK Admin` : 'Chỉnh sửa phim - CineK Admin'),
+})
+
+const customPoster = ref('')
+const customThumb = ref('')
+const customContent = ref('')
+const customEpisodes = ref<{ name: string, linkEmbed: string, linkM3u8: string }[]>([])
+const saving = ref(false)
+const saved = ref(false)
+
+watch(movie, (m) => {
+  if (m) {
+    customPoster.value = m.customPoster || ''
+    customThumb.value = m.customThumb || ''
+    customContent.value = m.customContent || ''
+    customEpisodes.value = m.customEpisodes?.length
+      ? m.customEpisodes.map((ep: any) => ({ name: ep.name || '', linkEmbed: ep.linkEmbed || '', linkM3u8: ep.linkM3u8 || '' }))
+      : []
+  }
+}, { immediate: true })
+
+function addEpisode() {
+  customEpisodes.value.push({ name: '', linkEmbed: '', linkM3u8: '' })
+}
+
+function removeEpisode(index: number) {
+  customEpisodes.value.splice(index, 1)
+}
+
+async function handleSave() {
+  saving.value = true
+  saved.value = false
+  try {
+    await $fetch(`/api/admin/movies/${movieId}`, {
+      method: 'PUT',
+      body: {
+        customPoster: customPoster.value,
+        customThumb: customThumb.value,
+        customContent: customContent.value,
+        customEpisodes: customEpisodes.value,
+      },
+    })
+    saved.value = true
+    await refresh()
+    setTimeout(() => { saved.value = false }, 2500)
+  } catch (err) {
+    console.error('Save failed:', err)
+  } finally {
+    saving.value = false
+  }
+}
+
+function clearField(field: 'customPoster' | 'customThumb' | 'customContent') {
+  if (field === 'customPoster') customPoster.value = ''
+  if (field === 'customThumb') customThumb.value = ''
+  if (field === 'customContent') customContent.value = ''
+}
+</script>
+
+<template>
+  <div>
+    <NuxtLink to="/admin/phim"
+      class="mb-6 inline-flex items-center gap-2 text-sm font-semibold text-slate-400 transition hover:text-white">
+      <ArrowLeft class="size-4" />
+      Quay lại danh sách phim
+    </NuxtLink>
+
+    <div v-if="!movie" class="rounded-xl border border-white/10 bg-slate-900/50 p-12 text-center">
+      <p class="text-slate-400">Đang tải...</p>
+    </div>
+
+    <div v-else>
+      <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div class="min-w-0">
+          <h1 class="truncate text-2xl font-black text-white">{{ movie.name }}</h1>
+          <p class="mt-1 text-sm text-slate-400">
+            {{ movie.originName }} · {{ movie.source?.toUpperCase() }} · {{ movie.year || 'N/A' }}
+          </p>
+        </div>
+        <button type="button"
+          class="inline-flex h-10 shrink-0 items-center gap-2 rounded-lg bg-yellow-400 px-5 text-sm font-black text-slate-950 transition hover:bg-yellow-300 disabled:opacity-50"
+          :disabled="saving" @click="handleSave">
+          <Save class="size-4" />
+          {{ saving ? 'Đang lưu...' : 'Lưu thay đổi' }}
+        </button>
+      </div>
+
+      <Transition name="fade">
+        <div v-if="saved"
+          class="mb-4 flex items-center gap-2 rounded-lg border border-green-400/20 bg-green-400/10 px-4 py-3 text-sm font-semibold text-green-400">
+          <Check class="size-4" />
+          Đã lưu thành công
+        </div>
+      </Transition>
+
+      <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]">
+        <div class="space-y-6">
+          <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+            <div class="mb-4 flex items-center gap-3">
+              <div class="grid size-9 place-items-center rounded-lg bg-blue-400/10">
+                <Type class="size-4 text-blue-400" />
+              </div>
+              <div>
+                <h2 class="text-base font-black text-white">Mô tả phim</h2>
+                <p class="text-xs text-slate-400">Để trống để dùng mô tả từ API nguồn</p>
+              </div>
+            </div>
+            <textarea v-model="customContent" rows="8" placeholder="Nhập mô tả phim..."
+              class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-sm leading-6 text-white outline-none placeholder:text-slate-500 focus:border-yellow-400/50" />
+            <button v-if="customContent" type="button"
+              class="mt-2 text-xs font-semibold text-red-400 transition hover:text-red-300"
+              @click="clearField('customContent')">
+              Xoá mô tả tuỳ chỉnh
+            </button>
+          </div>
+
+          <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+            <div class="mb-4 flex items-center gap-3">
+              <div class="grid size-9 place-items-center rounded-lg bg-amber-400/10">
+                <Film class="size-4 text-amber-400" />
+              </div>
+              <div class="flex-1">
+                <h2 class="text-base font-black text-white">Tập phim tuỳ chỉnh</h2>
+                <p class="text-xs text-slate-400">Thêm tập phim thủ công khi API thiếu tập hoặc link bị die. Để trống tất cả để dùng từ API.</p>
+              </div>
+              <button type="button"
+                class="inline-flex h-8 items-center gap-1.5 rounded-lg bg-white/10 px-3 text-xs font-semibold text-white transition hover:bg-white/20"
+                @click="addEpisode">
+                <Plus class="size-3.5" />
+                Thêm tập
+              </button>
+            </div>
+
+            <div v-if="customEpisodes.length" class="space-y-3">
+              <div v-for="(ep, index) in customEpisodes" :key="index"
+                class="rounded-lg border border-white/10 bg-white/5 p-4">
+                <div class="mb-3 flex items-center justify-between">
+                  <span class="text-xs font-black uppercase text-slate-400">Tập {{ index + 1 }}</span>
+                  <button type="button"
+                    class="grid size-7 place-items-center rounded-lg text-red-400 transition hover:bg-red-400/10"
+                    @click="removeEpisode(index)">
+                    <Trash2 class="size-3.5" />
+                  </button>
+                </div>
+                <div class="space-y-2">
+                  <input v-model="ep.name" type="text" placeholder="Tên tập (vd: Tập 1, Full, Preview...)"
+                    class="h-9 w-full rounded-md border border-white/10 bg-white/5 px-3 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+                  <input v-model="ep.linkEmbed" type="url" placeholder="Link embed (iframe)"
+                    class="h-9 w-full rounded-md border border-white/10 bg-white/5 px-3 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+                  <input v-model="ep.linkM3u8" type="url" placeholder="Link HLS (.m3u8)"
+                    class="h-9 w-full rounded-md border border-white/10 bg-white/5 px-3 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+                </div>
+              </div>
+            </div>
+            <div v-else class="rounded-lg border border-dashed border-white/10 p-6 text-center">
+              <p class="text-sm text-slate-500">Chưa có tập tuỳ chỉnh. Bấm "Thêm tập" để bắt đầu.</p>
+            </div>
+          </div>
+
+          <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+            <div class="mb-4 flex items-center gap-3">
+              <div class="grid size-9 place-items-center rounded-lg bg-purple-400/10">
+                <Image class="size-4 text-purple-400" />
+              </div>
+              <div>
+                <h2 class="text-base font-black text-white">Ảnh poster</h2>
+                <p class="text-xs text-slate-400">URL ảnh poster (để trống dùng từ API)</p>
+              </div>
+            </div>
+            <input v-model="customPoster" type="url" placeholder="https://..."
+              class="h-10 w-full rounded-lg border border-white/10 bg-white/5 px-4 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+            <div v-if="customPoster || movie.poster" class="mt-3">
+              <img :src="customPoster || movie.poster" :alt="movie.name"
+                class="h-48 w-auto rounded-lg object-cover ring-1 ring-white/10">
+            </div>
+            <button v-if="customPoster" type="button"
+              class="mt-2 text-xs font-semibold text-red-400 transition hover:text-red-300"
+              @click="clearField('customPoster')">
+              Xoá poster tuỳ chỉnh
+            </button>
+          </div>
+
+          <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+            <div class="mb-4 flex items-center gap-3">
+              <div class="grid size-9 place-items-center rounded-lg bg-pink-400/10">
+                <Image class="size-4 text-pink-400" />
+              </div>
+              <div>
+                <h2 class="text-base font-black text-white">Ảnh thumbnail</h2>
+                <p class="text-xs text-slate-400">URL ảnh thumbnail (để trống dùng từ API)</p>
+              </div>
+            </div>
+            <input v-model="customThumb" type="url" placeholder="https://..."
+              class="h-10 w-full rounded-lg border border-white/10 bg-white/5 px-4 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+            <div v-if="customThumb || movie.thumb" class="mt-3">
+              <img :src="customThumb || movie.thumb" :alt="movie.name"
+                class="h-32 w-auto rounded-lg object-cover ring-1 ring-white/10">
+            </div>
+            <button v-if="customThumb" type="button"
+              class="mt-2 text-xs font-semibold text-red-400 transition hover:text-red-300"
+              @click="clearField('customThumb')">
+              Xoá thumbnail tuỳ chỉnh
+            </button>
+          </div>
+        </div>
+
+        <aside class="space-y-4">
+          <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+            <h3 class="mb-3 text-sm font-black uppercase text-slate-400">Thông tin gốc</h3>
+            <dl class="space-y-2 text-sm">
+              <div class="flex justify-between">
+                <dt class="text-slate-500">Nguồn</dt>
+                <dd class="font-semibold text-white">{{ movie.source?.toUpperCase() }}</dd>
+              </div>
+              <div class="flex justify-between">
+                <dt class="text-slate-500">Slug</dt>
+                <dd class="truncate text-white">{{ movie.slug }}</dd>
+              </div>
+              <div class="flex justify-between">
+                <dt class="text-slate-500">Năm</dt>
+                <dd class="text-white">{{ movie.year || '—' }}</dd>
+              </div>
+              <div class="flex justify-between">
+                <dt class="text-slate-500">Tập</dt>
+                <dd class="text-white">{{ movie.episode || '—' }}</dd>
+              </div>
+              <div class="flex justify-between">
+                <dt class="text-slate-500">Chất lượng</dt>
+                <dd class="text-white">{{ movie.quality || '—' }}</dd>
+              </div>
+              <div class="flex justify-between">
+                <dt class="text-slate-500">Trạng thái</dt>
+                <dd :class="movie.active ? 'text-green-400' : 'text-slate-400'">
+                  {{ movie.active ? 'Đang hiển thị' : 'Ẩn' }}
+                </dd>
+              </div>
+              <div class="flex justify-between">
+                <dt class="text-slate-500">Đồng bộ</dt>
+                <dd class="text-white">{{ new Date(movie.syncedAt).toLocaleDateString('vi-VN') }}</dd>
+              </div>
+            </dl>
+          </div>
+
+          <div v-if="movie.categories?.length" class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+            <h3 class="mb-3 text-sm font-black uppercase text-slate-400">Thể loại</h3>
+            <div class="flex flex-wrap gap-1.5">
+              <span v-for="cat in movie.categories" :key="cat"
+                class="rounded-full bg-white/8 px-2.5 py-1 text-xs font-semibold text-slate-300">
+                {{ cat }}
+              </span>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

app/pages/admin/phim/index.vue

@@ -0,0 +1,314 @@
+<script setup lang="ts">
+import { Pencil, RefreshCw, Search, Trash2, X } from 'lucide-vue-next'
+
+definePageMeta({
+  layout: 'admin',
+})
+
+useHead({
+  title: 'Quản lý phim - CineK Admin',
+})
+
+const searchInput = ref('')
+const debouncedKeyword = ref('')
+const statusFilter = ref('')
+const currentPage = ref(1)
+const syncing = ref(false)
+const syncOpen = ref(false)
+const deleting = ref(false)
+const deleteConfirmOpen = ref(false)
+const syncSources = ref({ ophim: true, nguonc: true, kkphim: true })
+
+let searchTimeout: ReturnType<typeof setTimeout> | undefined
+
+watch(searchInput, (val) => {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    debouncedKeyword.value = val
+    currentPage.value = 1
+  }, 400)
+})
+
+const { data, refresh } = await useFetch('/api/admin/movies', {
+  query: computed(() => ({
+    page: currentPage.value,
+    keyword: debouncedKeyword.value,
+    status: statusFilter.value,
+    limit: 20,
+  })),
+})
+
+watch(statusFilter, () => {
+  currentPage.value = 1
+})
+
+async function toggleActive(movie: any) {
+  await $fetch(`/api/admin/movies/${movie.id}`, {
+    method: 'PATCH',
+    body: { active: movie.active },
+  })
+  await refresh()
+}
+
+async function handleSync() {
+  const sources = Object.entries(syncSources.value)
+    .filter(([, enabled]) => enabled)
+    .map(([name]) => name)
+
+  if (!sources.length) return
+
+  syncing.value = true
+  try {
+    await $fetch('/api/admin/sync', {
+      method: 'POST',
+      body: { sources },
+    })
+    syncOpen.value = false
+    await refresh()
+  } catch (err) {
+    console.error('Sync failed:', err)
+  } finally {
+    syncing.value = false
+  }
+}
+
+async function handleDeleteAll() {
+  deleting.value = true
+  try {
+    await $fetch('/api/admin/movies', { method: 'DELETE' })
+    deleteConfirmOpen.value = false
+    await refresh()
+  } catch (err) {
+    console.error('Delete failed:', err)
+  } finally {
+    deleting.value = false
+  }
+}
+
+const movies = computed(() => data.value?.items || [])
+const totalPages = computed(() => data.value?.totalPages || 1)
+</script>
+
+<template>
+  <div>
+    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h1 class="text-2xl font-black text-white">Quản lý phim</h1>
+        <p class="mt-1 text-sm text-slate-400">Quản lý phim hiển thị trên CineK ({{ data?.total || 0 }} phim)</p>
+      </div>
+      <div class="flex items-center gap-2">
+        <button type="button"
+          class="inline-flex h-10 items-center gap-2 rounded-lg border border-red-400/20 bg-red-400/10 px-4 text-sm font-black text-red-400 transition hover:bg-red-400/20"
+          @click="deleteConfirmOpen = true">
+          <Trash2 class="size-4" />
+          Xoá tất cả
+        </button>
+        <button type="button"
+          class="inline-flex h-10 items-center gap-2 rounded-lg bg-yellow-400 px-4 text-sm font-black text-slate-950 transition hover:bg-yellow-300 disabled:opacity-50"
+          @click="syncOpen = true">
+          <RefreshCw class="size-4" />
+          Đồng bộ từ API
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-white/10 bg-slate-900/50">
+      <div class="flex flex-col gap-3 border-b border-white/10 p-4 sm:flex-row sm:items-center">
+        <div class="relative flex-1">
+          <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+          <input v-model="searchInput" type="search" placeholder="Tìm kiếm phim..."
+            class="h-10 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 text-sm text-white placeholder:text-slate-400 outline-none focus:border-yellow-400/50">
+        </div>
+        <select v-model="statusFilter"
+          class="h-10 rounded-lg border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-yellow-400/50">
+          <option value="" class="bg-slate-900">Tất cả</option>
+          <option value="active" class="bg-slate-900">Đang hiển thị</option>
+          <option value="inactive" class="bg-slate-900">Chưa hiển thị</option>
+        </select>
+      </div>
+
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b border-white/10 text-center text-xs font-semibold uppercase text-slate-400">
+              <th class="w-12 px-4 py-3 text-center">STT</th>
+              <th class="px-4 py-3 text-center">Phim</th>
+              <th class="px-4 py-3 text-center">Nguồn</th>
+              <th class="px-4 py-3 text-center">Trạng thái</th>
+              <th class="px-4 py-3 text-center">Chỉnh sửa</th>
+              <th class="px-4 py-3 text-center">Thao tác</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-white/5">
+            <tr v-for="movie in movies" :key="movie.id" class="transition hover:bg-white/5">
+              <td class="px-4 py-3 text-center text-sm text-slate-400">
+                {{ (currentPage - 1) * 20 + movies.indexOf(movie) + 1 }}
+              </td>
+              <td class="px-4 py-3 text-center">
+                <div class="min-w-0">
+                  <p class="truncate text-sm font-semibold text-white">{{ movie.name }}</p>
+                  <p class="truncate text-xs text-slate-400">{{ movie.originName || movie.slug }}</p>
+                </div>
+              </td>
+              <td class="px-4 py-3 text-center">
+                <span class="rounded-full bg-white/10 px-2.5 py-1 text-xs font-semibold text-white">
+                  {{ movie.source?.toUpperCase() }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-center">
+                <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
+                  :class="movie.active ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
+                  {{ movie.active ? 'Đang hiển thị' : 'Ẩn' }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-center">
+                <div class="flex flex-wrap items-center justify-center gap-1">
+                  <span v-if="movie.customContent"
+                    class="rounded bg-blue-400/10 px-2 py-0.5 text-[10px] font-semibold text-blue-400">Mô tả</span>
+                  <span v-if="movie.customPoster"
+                    class="rounded bg-purple-400/10 px-2 py-0.5 text-[10px] font-semibold text-purple-400">Poster</span>
+                  <span v-if="movie.customThumb"
+                    class="rounded bg-pink-400/10 px-2 py-0.5 text-[10px] font-semibold text-pink-400">Thumb</span>
+                  <span v-if="movie.customEpisodes?.length"
+                    class="rounded bg-amber-400/10 px-2 py-0.5 text-[10px] font-semibold text-amber-400">{{ movie.customEpisodes.length }} tập</span>
+                  <span v-if="!movie.customContent && !movie.customPoster && !movie.customThumb && !movie.customEpisodes?.length"
+                    class="text-xs text-slate-500">Mặc định</span>
+                </div>
+              </td>
+              <td class="px-4 py-3 text-center">
+                <div class="flex items-center justify-center gap-2">
+                  <NuxtLink :to="`/admin/phim/${movie.id}`"
+                    class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white"
+                    title="Chỉnh sửa">
+                    <Pencil class="size-4" />
+                  </NuxtLink>
+                  <AdminToggle :model-value="movie.active"
+                    @update:model-value="(val: boolean) => { movie.active = val; toggleActive(movie) }" />
+                </div>
+              </td>
+            </tr>
+            <tr v-if="!movies.length">
+              <td colspan="6" class="px-4 py-12 text-center text-sm text-slate-400">
+                {{ debouncedKeyword ? 'Không tìm thấy phim nào.' : 'Chưa có phim nào. Bấm "Đồng bộ từ API" để lấy phim.' }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div v-if="totalPages > 1" class="flex items-center justify-between border-t border-white/10 p-4">
+        <p class="text-sm text-slate-400">Trang {{ currentPage }} / {{ totalPages }}</p>
+        <div class="flex items-center gap-2">
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white disabled:opacity-30"
+            :disabled="currentPage <= 1" @click="currentPage--">
+            ‹
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white disabled:opacity-30"
+            :disabled="currentPage >= totalPages" @click="currentPage++">
+            ›
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <Transition name="modal-fade">
+        <div v-if="syncOpen" class="fixed inset-0 z-70 grid place-items-center px-3">
+          <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" @click="syncOpen = false" />
+          <div class="relative w-full max-w-md rounded-xl border border-white/10 bg-slate-900 p-6 shadow-2xl">
+            <button type="button"
+              class="absolute right-3 top-3 grid size-8 place-items-center rounded-full text-white transition hover:bg-white/10"
+              @click="syncOpen = false">
+              <X class="size-5" />
+            </button>
+
+            <h2 class="text-xl font-black text-white">Đồng bộ phim</h2>
+            <p class="mt-1 text-sm text-slate-400">Chọn nguồn để đồng bộ phim vào hệ thống</p>
+
+            <div class="mt-5 space-y-3">
+              <label
+                class="flex cursor-pointer items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4 transition hover:border-white/20">
+                <div>
+                  <p class="text-sm font-semibold text-white">OPhim</p>
+                  <p class="text-xs text-slate-400">ophim1.com</p>
+                </div>
+                <AdminToggle v-model="syncSources.ophim" />
+              </label>
+
+              <label
+                class="flex cursor-pointer items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4 transition hover:border-white/20">
+                <div>
+                  <p class="text-sm font-semibold text-white">NguonC</p>
+                  <p class="text-xs text-slate-400">phim.nguonc.com</p>
+                </div>
+                <AdminToggle v-model="syncSources.nguonc" />
+              </label>
+
+              <label
+                class="flex cursor-pointer items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4 transition hover:border-white/20">
+                <div>
+                  <p class="text-sm font-semibold text-white">KKPhim</p>
+                  <p class="text-xs text-slate-400">phimapi.com</p>
+                </div>
+                <AdminToggle v-model="syncSources.kkphim" />
+              </label>
+            </div>
+
+            <div class="mt-6 flex justify-end gap-3">
+              <button type="button"
+                class="h-10 rounded-lg border border-white/10 px-4 text-sm font-semibold text-white transition hover:bg-white/10"
+                @click="syncOpen = false">
+                Huỷ
+              </button>
+              <button type="button"
+                class="inline-flex h-10 items-center gap-2 rounded-lg bg-yellow-400 px-5 text-sm font-black text-slate-950 transition hover:bg-yellow-300 disabled:opacity-50"
+                :disabled="syncing || !Object.values(syncSources).some(Boolean)" @click="handleSync">
+                <RefreshCw class="size-4" :class="syncing ? 'animate-spin' : ''" />
+                {{ syncing ? 'Đang đồng bộ...' : 'Đồng bộ' }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+
+      <Transition name="modal-fade">
+        <div v-if="deleteConfirmOpen" class="fixed inset-0 z-70 grid place-items-center px-3">
+          <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" @click="deleteConfirmOpen = false" />
+          <div class="relative w-full max-w-sm rounded-xl border border-white/10 bg-slate-900 p-6 shadow-2xl">
+            <h2 class="text-xl font-black text-white">Xoá tất cả phim?</h2>
+            <p class="mt-2 text-sm leading-6 text-slate-400">
+              Hành động này sẽ xoá toàn bộ {{ data?.total || 0 }} phim trong hệ thống, bao gồm cả các tuỳ chỉnh. Không thể hoàn tác.
+            </p>
+            <div class="mt-6 flex justify-end gap-3">
+              <button type="button"
+                class="h-10 rounded-lg border border-white/10 px-4 text-sm font-semibold text-white transition hover:bg-white/10"
+                @click="deleteConfirmOpen = false">
+                Huỷ
+              </button>
+              <button type="button"
+                class="inline-flex h-10 items-center gap-2 rounded-lg bg-red-500 px-5 text-sm font-black text-white transition hover:bg-red-400 disabled:opacity-50"
+                :disabled="deleting" @click="handleDeleteAll">
+                <Trash2 class="size-4" />
+                {{ deleting ? 'Đang xoá...' : 'Xoá tất cả' }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+</style>

app/pages/admin/thanh-vien.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Edit, Mail, Search, Trash2, UserRound } from 'lucide-vue-next'
+import { Edit, Search, Trash2 } from 'lucide-vue-next'
 
 definePageMeta({
   layout: 'admin',
@@ -9,15 +9,33 @@ useHead({
   title: 'Quản lý thành viên - CineK Admin',
 })
 
-const searchQuery = ref('')
+const searchInput = ref('')
+const debouncedKeyword = ref('')
 
-const users = [
+let searchTimeout: ReturnType<typeof setTimeout> | undefined
+
+watch(searchInput, (val) => {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    debouncedKeyword.value = val.trim().toLowerCase()
+  }, 300)
+})
+
+const allUsers = [
   { id: 1, name: 'Nguyễn Văn A', email: 'nguyenvana@example.com', role: 'admin', joined: '2024-01-01', status: 'active' },
   { id: 2, name: 'Trần Thị B', email: 'tranthib@example.com', role: 'user', joined: '2024-01-05', status: 'active' },
   { id: 3, name: 'Lê Văn C', email: 'levanc@example.com', role: 'user', joined: '2024-01-10', status: 'active' },
   { id: 4, name: 'Phạm Thị D', email: 'phamthid@example.com', role: 'user', joined: '2024-01-12', status: 'inactive' },
   { id: 5, name: 'Hoàng Văn E', email: 'hoangvane@example.com', role: 'moderator', joined: '2024-01-15', status: 'active' },
 ]
+
+const filteredUsers = computed(() => {
+  if (!debouncedKeyword.value) return allUsers
+  const kw = debouncedKeyword.value
+  return allUsers.filter((u) =>
+    u.name.toLowerCase().includes(kw) || u.email.toLowerCase().includes(kw),
+  )
+})
 </script>
 
 <template>
@@ -31,7 +49,7 @@ const users = [
       <div class="flex items-center gap-3 border-b border-white/10 p-4">
         <div class="relative flex-1">
           <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
-          <input v-model="searchQuery" type="search" placeholder="Tìm kiếm thành viên..."
+          <input v-model="searchInput" type="search" placeholder="Tìm kiếm thành viên..."
             class="h-10 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 text-sm text-white placeholder:text-slate-400 outline-none focus:border-yellow-400/50">
         </div>
       </div>
@@ -39,31 +57,25 @@ const users = [
       <div class="overflow-x-auto">
         <table class="w-full">
           <thead>
-            <tr class="border-b border-white/10 text-left text-xs font-semibold uppercase text-slate-400">
-              <th class="px-4 py-3">Thành viên</th>
-              <th class="px-4 py-3">Vai trò</th>
-              <th class="px-4 py-3">Trạng thái</th>
-              <th class="px-4 py-3">Tham gia</th>
-              <th class="px-4 py-3 text-right">Thao tác</th>
+            <tr class="border-b border-white/10 text-center text-xs font-semibold uppercase text-slate-400">
+              <th class="w-12 px-4 py-3 text-center">STT</th>
+              <th class="px-4 py-3 text-center">Thành viên</th>
+              <th class="px-4 py-3 text-center">Vai trò</th>
+              <th class="px-4 py-3 text-center">Trạng thái</th>
+              <th class="px-4 py-3 text-center">Tham gia</th>
+              <th class="px-4 py-3 text-center">Thao tác</th>
             </tr>
           </thead>
           <tbody class="divide-y divide-white/5">
-            <tr v-for="user in users" :key="user.id" class="transition hover:bg-white/5">
-              <td class="px-4 py-3">
-                <div class="flex items-center gap-3">
-                  <div class="grid size-10 shrink-0 place-items-center rounded-full bg-yellow-400/10">
-                    <UserRound class="size-4 text-yellow-400" />
-                  </div>
-                  <div class="min-w-0">
-                    <p class="truncate text-sm font-semibold text-white">{{ user.name }}</p>
-                    <p class="flex items-center gap-1.5 truncate text-xs text-slate-400">
-                      <Mail class="size-3" />
-                      {{ user.email }}
-                    </p>
-                  </div>
+            <tr v-for="user in filteredUsers" :key="user.id" class="transition hover:bg-white/5">
+              <td class="px-4 py-3 text-center text-sm text-slate-400">{{ filteredUsers.indexOf(user) + 1 }}</td>
+              <td class="px-4 py-3 text-center">
+                <div class="min-w-0">
+                  <p class="truncate text-sm font-semibold text-white">{{ user.name }}</p>
+                  <p class="truncate text-xs text-slate-400">{{ user.email }}</p>
                 </div>
               </td>
-              <td class="px-4 py-3">
+              <td class="px-4 py-3 text-center">
                 <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
                   :class="{
                     'bg-red-400/10 text-red-400': user.role === 'admin',
@@ -73,15 +85,15 @@ const users = [
                   {{ user.role === 'admin' ? 'Admin' : user.role === 'moderator' ? 'Moderator' : 'User' }}
                 </span>
               </td>
-              <td class="px-4 py-3">
+              <td class="px-4 py-3 text-center">
                 <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
                   :class="user.status === 'active' ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
                   {{ user.status === 'active' ? 'Hoạt động' : 'Khóa' }}
                 </span>
               </td>
-              <td class="px-4 py-3 text-sm text-slate-400">{{ user.joined }}</td>
-              <td class="px-4 py-3">
-                <div class="flex items-center justify-end gap-1">
+              <td class="px-4 py-3 text-center text-sm text-slate-400">{{ user.joined }}</td>
+              <td class="px-4 py-3 text-center">
+                <div class="flex items-center justify-center gap-1">
                   <button type="button"
                     class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white">
                     <Edit class="size-4" />
@@ -93,34 +105,17 @@ const users = [
                 </div>
               </td>
             </tr>
+            <tr v-if="!filteredUsers.length">
+              <td colspan="6" class="px-4 py-12 text-center text-sm text-slate-400">
+                {{ debouncedKeyword ? 'Không tìm thấy thành viên nào.' : 'Chưa có thành viên nào.' }}
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>
 
       <div class="flex items-center justify-between border-t border-white/10 p-4">
-        <p class="text-sm text-slate-400">Hiển thị 1-5 / 5,678 thành viên</p>
-        <div class="flex items-center gap-2">
-          <button type="button"
-            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
-            ‹
-          </button>
-          <button type="button"
-            class="grid size-8 place-items-center rounded-lg bg-yellow-400/10 text-sm font-semibold text-yellow-400">
-            1
-          </button>
-          <button type="button"
-            class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
-            2
-          </button>
-          <button type="button"
-            class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
-            3
-          </button>
-          <button type="button"
-            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
-            ›
-          </button>
-        </div>
+        <p class="text-sm text-slate-400">Hiển thị {{ filteredUsers.length }} / {{ allUsers.length }} thành viên</p>
       </div>
     </div>
   </div>