From 9c8a77f1341a7129c6ebe9cbd989712a71b4d1a1 Mon Sep 17 00:00:00 2001
From: ngthanhvu <nguyenthanhvudvfb@gmail.com>
Date: Fri, 7 Aug 2026 12:41:20 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20c=E1=BA=ADp=20nh=E1=BA=ADt=20admin=20la?=
 =?UTF-8?q?yout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/css/admin-light.css | 166 ++++++++++++++++++++++++
 app/components/AppIcon.vue     |   2 +-
 app/layouts/admin.vue          | 176 +++++++++++++++++++++----
 app/lib/icons.ts               |   4 +
 app/pages/admin/cai-dat.vue    |  24 ++--
 app/pages/admin/index.vue      |  84 ++++++------
 app/pages/admin/login.vue      |   4 +-
 app/pages/admin/phim/[id].vue  | 132 +++++++++----------
 app/pages/admin/phim/index.vue | 226 ++++++++++++++++++++++-----------
 app/pages/admin/thanh-vien.vue |  23 ++--
 10 files changed, 608 insertions(+), 233 deletions(-)
 create mode 100644 app/assets/css/admin-light.css

diff --git a/app/assets/css/admin-light.css b/app/assets/css/admin-light.css
new file mode 100644
index 0000000..17e4b49
--- /dev/null
+++ b/app/assets/css/admin-light.css
@@ -0,0 +1,166 @@
+/* Admin Light Mode Overrides — only applies inside .admin-light */
+.admin-light .admin-page {
+  background-color: #f8fafc !important;
+  color: #334155 !important;
+}
+
+.admin-light .admin-card {
+  border-color: #e2e8f0 !important;
+  background-color: #ffffff !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.admin-light .admin-card:hover {
+  border-color: #cbd5e1 !important;
+}
+
+.admin-light .admin-card-gradient {
+  border-color: #e2e8f0 !important;
+  background-color: #ffffff !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.admin-light .admin-input {
+  border-color: #e2e8f0 !important;
+  background-color: #f8fafc !important;
+  color: #334155 !important;
+}
+
+.admin-light .admin-input::placeholder {
+  color: #94a3b8 !important;
+}
+
+.admin-light .admin-input:focus {
+  border-color: #095DF1 !important;
+  background-color: #fff !important;
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
+}
+
+.admin-light .admin-btn-primary {
+  background-color: #095DF1 !important;
+  color: #fff !important;
+  box-shadow: 0 4px 6px rgba(14, 165, 233, 0.2) !important;
+}
+
+.admin-light .admin-btn-primary:hover {
+  background-color: #095DF1 !important;
+}
+
+.admin-light .admin-btn-secondary {
+  border-color: #e2e8f0 !important;
+  background-color: #fff !important;
+  color: #475569 !important;
+}
+
+.admin-light .admin-btn-secondary:hover {
+  background-color: #f1f5f9 !important;
+}
+
+.admin-light .admin-btn-danger {
+  background-color: #fef2f2 !important;
+  color: #dc2626 !important;
+}
+
+.admin-light .admin-btn-danger:hover {
+  background-color: #fee2e2 !important;
+}
+
+.admin-light .admin-label {
+  color: #64748b !important;
+}
+
+.admin-light .admin-section-title {
+  color: #0f172a !important;
+}
+
+.admin-light .admin-section-subtitle {
+  color: #64748b !important;
+}
+
+.admin-light .admin-num {
+  color: #0f172a !important;
+}
+
+.admin-light .admin-icon-square {
+  border-color: #e2e8f0 !important;
+  background-color: #f8fafc !important;
+  color: #94a3b8 !important;
+}
+
+.admin-light .admin-input-sm {
+  border-color: #e2e8f0 !important;
+  background-color: #f8fafc !important;
+  color: #334155 !important;
+}
+
+.admin-light .admin-input-sm::placeholder {
+  color: #94a3b8 !important;
+}
+
+.admin-light .admin-input-sm:focus {
+  border-color: #095DF1 !important;
+  background-color: #fff !important;
+}
+
+/* Override badge colors for light mode */
+.admin-light .admin-badge {
+  background-color: rgba(241, 245, 249, 0.8) !important;
+  color: #475569 !important;
+}
+
+.admin-light .admin-badge.bg-yellow-400,
+.admin-light [class*="bg-yellow-400"] {
+  background-color: rgba(14, 165, 233, 0.1) !important;
+  color: #0284c7 !important;
+}
+
+.admin-light .admin-badge.bg-emerald-400 {
+  background-color: rgba(16, 185, 129, 0.1) !important;
+  color: #059669 !important;
+}
+
+.admin-light .admin-badge.bg-slate-400 {
+  background-color: rgba(148, 163, 184, 0.1) !important;
+  color: #64748b !important;
+}
+
+.admin-light .admin-badge.bg-blue-400 {
+  background-color: rgba(59, 130, 246, 0.1) !important;
+  color: #2563eb !important;
+}
+
+.admin-light .admin-badge.bg-purple-400 {
+  background-color: rgba(168, 85, 247, 0.1) !important;
+  color: #9333ea !important;
+}
+
+.admin-light .admin-badge.bg-pink-400 {
+  background-color: rgba(236, 72, 153, 0.1) !important;
+  color: #db2777 !important;
+}
+
+/* Override dark scrollbar */
+.admin-light .admin-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(14, 165, 233, 0.45) !important;
+}
+
+.admin-light .admin-scrollbar::-webkit-scrollbar-track {
+  background: rgba(241, 245, 249, 0.5) !important;
+}
+
+/* Fix Font Awesome SVG icons drooping below text baseline */
+.admin-light .fa-solid,
+.admin-light .fa-regular,
+.admin-light .fa-light,
+.admin-light .fa-thin,
+.admin-light .fa-duotone,
+.admin-light svg[class*="fa"] {
+  vertical-align: middle !important;
+}
+
+/* Modal dark overlay fix inside admin */
+.admin-light .modal-fade-enter-from,
+.admin-light .modal-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.98);
+}
\ No newline at end of file
diff --git a/app/components/AppIcon.vue b/app/components/AppIcon.vue
index 21cd9dd..4f654b8 100644
--- a/app/components/AppIcon.vue
+++ b/app/components/AppIcon.vue
@@ -12,5 +12,5 @@ const icon = computed(() => getIcon(props.name))
 </script>
 
 <template>
-  <FontAwesomeIcon :icon="icon" :class="props.class" />
+  <FontAwesomeIcon :icon="icon" :class="props.class" :style="{ verticalAlign: 'middle' }" />
 </template>
diff --git a/app/layouts/admin.vue b/app/layouts/admin.vue
index 08c634a..9e9a835 100644
--- a/app/layouts/admin.vue
+++ b/app/layouts/admin.vue
@@ -33,18 +33,16 @@ const displayInitial = computed(() => displayName.value.charAt(0).toUpperCase())
 </script>
 
 <template>
-  <div class="min-h-screen bg-[#0A0B0E]">
+  <div class="admin-light min-h-screen bg-[#f8fafc]">
     <aside
-      class="fixed inset-y-0 left-0 z-40 w-64 transform border-r border-white/[0.06] bg-[#0E0F13] transition-transform lg:translate-x-0"
-      :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
-      <div class="flex h-16 items-center justify-between border-b border-white/[0.06] px-5">
+      class="fixed inset-y-0 left-0 z-40 w-64 transform border-r border-slate-200 bg-[#095DF2] transition-transform lg:translate-x-0 border-l-4 border-l-blue-700">
+      <div class="flex h-16 items-center justify-between border-white/20 px-5">
         <NuxtLink to="/admin" class="flex items-center gap-3">
-          <div class="grid size-9 place-items-center rounded-xl bg-gradient-to-br from-yellow-400 to-amber-500 shadow-lg shadow-yellow-400/20">
-            <AppIcon name="film" class="size-4 text-slate-950" />
-          </div>
-          <span class="text-lg font-black text-white">CineK Admin</span>
+          <AppIcon name="film" class="size-5 text-white" />
+          <span class="text-lg font-black text-white tracking-tight">Admin Management</span>
         </NuxtLink>
-        <button type="button" class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/[0.05] hover:text-white lg:hidden"
+        <button type="button"
+          class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 lg:hidden"
           @click="closeSidebar">
           <AppIcon name="x" class="size-5" />
         </button>
@@ -52,24 +50,22 @@ const displayInitial = computed(() => displayName.value.charAt(0).toUpperCase())
 
       <nav class="flex flex-col gap-1 p-3">
         <NuxtLink v-for="item in navItems" :key="item.to" :to="item.to"
-          class="group relative flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-semibold transition"
-          :class="isActive(item.to)
-            ? 'bg-yellow-400/10 text-yellow-400'
-            : 'text-slate-400 hover:bg-white/[0.03] hover:text-white'">
-          <span v-if="isActive(item.to)" class="absolute left-0 top-1/2 h-6 w-1 -translate-y-1/2 rounded-r-full bg-yellow-400" />
+          class="group relative flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-semibold transition" :class="isActive(item.to)
+            ? 'bg-white/15 text-white font-semibold'
+            : 'text-blue-100 hover:bg-white/10 hover:text-white'">
           <AppIcon :name="item.icon" class="size-5 transition group-hover:scale-110" />
           {{ item.label }}
         </NuxtLink>
       </nav>
 
-      <div class="absolute inset-x-0 bottom-0 space-y-1 border-t border-white/[0.06] p-3">
+      <div class="absolute inset-x-0 bottom-0 space-y-1 border-t border-white/20 p-3">
         <NuxtLink to="/"
-          class="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-semibold text-slate-400 transition hover:bg-white/[0.03] hover:text-white">
+          class="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-semibold text-blue-100 transition hover:bg-white/10 hover:text-white">
           <AppIcon name="home" class="size-5" />
           Về trang chủ
         </NuxtLink>
         <button type="button"
-          class="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm font-semibold text-red-400 transition hover:bg-red-500/10"
+          class="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm font-semibold text-red-500 transition hover:bg-white/10 hover:text-red-600"
           @click="handleLogout">
           <AppIcon name="log-out" class="size-5" />
           Đăng xuất
@@ -79,24 +75,26 @@ const displayInitial = computed(() => displayName.value.charAt(0).toUpperCase())
 
     <div class="lg:pl-64">
       <header
-        class="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-white/[0.06] bg-[#0A0B0E]/80 px-4 backdrop-blur-xl lg:px-6">
-        <button type="button" class="grid size-10 place-items-center rounded-xl text-slate-400 transition hover:bg-white/[0.05] hover:text-white lg:hidden"
+        class="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-slate-200 bg-white/80 px-4 backdrop-blur-xl lg:px-6 shadow-sm">
+        <button type="button"
+          class="grid size-10 place-items-center rounded-xl text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 lg:hidden"
           @click="sidebarOpen = true">
           <AppIcon name="menu" class="size-5" />
         </button>
 
         <div class="ml-auto flex items-center gap-4">
-          <div class="hidden items-center gap-2 text-sm text-slate-400 md:flex">
-            <span class="size-2 rounded-full bg-emerald-500 shadow-[0_0_8px] shadow-emerald-500/50" />
+          <div class="hidden items-center gap-2 text-sm text-slate-500 md:flex">
+            <span class="size-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" />
             Hệ thống hoạt động
           </div>
-          <div class="flex items-center gap-3 rounded-2xl border border-white/[0.06] bg-[#131418] px-3 py-1.5">
-            <div class="grid size-8 place-items-center rounded-full bg-gradient-to-br from-yellow-400/20 to-yellow-400/5 text-sm font-black text-yellow-400 ring-1 ring-yellow-400/20">
+          <div class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-3 py-1.5">
+            <div
+              class="grid size-8 place-items-center rounded-full bg-linear-to-br from-sky-400/20 to-cyan-600/10 text-sm font-black text-sky-700 ring-1 ring-[rgba(14,165,233,0.2)]">
               {{ displayInitial }}
             </div>
             <div class="hidden sm:block">
-              <p class="text-sm font-bold text-white">{{ displayName }}</p>
-              <p class="text-xs capitalize text-slate-400">{{ user?.role || 'admin' }}</p>
+              <p class="text-sm font-bold text-slate-900">{{ displayName }}</p>
+              <p class="text-xs capitalize text-slate-500">{{ user?.role || 'admin' }}</p>
             </div>
           </div>
         </div>
@@ -108,12 +106,136 @@ const displayInitial = computed(() => displayName.value.charAt(0).toUpperCase())
     </div>
 
     <Transition name="sidebar-fade">
-      <div v-if="sidebarOpen" class="fixed inset-0 z-30 bg-black/70 backdrop-blur-sm lg:hidden"
-        @click="closeSidebar" />
+      <div v-if="sidebarOpen" class="fixed inset-0 z-30 bg-black/40 backdrop-blur-sm lg:hidden" @click="closeSidebar" />
     </Transition>
   </div>
 </template>
 
+
+<style>
+/* Non-scoped: MUST override Tailwind global styles from main.css */
+.admin-light .admin-page {
+  background-color: #f8fafc !important;
+  color: #334155 !important;
+}
+
+.admin-light .admin-card,
+.admin-light .admin-card-gradient {
+  background-color: #ffffff !important;
+  border-color: #e2e8f0 !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
+  color: #1e293b !important;
+}
+
+.admin-light .admin-input {
+  background-color: #f8fafc !important;
+  border-color: #e2e8f0 !important;
+  color: #334155 !important;
+}
+
+.admin-light .admin-input::placeholder {
+  color: #94a3b8 !important;
+}
+
+.admin-light .admin-section-title {
+  color: #0f172a !important;
+}
+
+.admin-light .admin-num {
+  color: #0f172a !important;
+}
+
+.admin-light .admin-label {
+  color: #64748b !important;
+}
+
+.admin-light .admin-btn-primary {
+  background-color: #095DF1 !important;
+  color: #fff !important;
+}
+
+.admin-light .admin-btn-secondary {
+  background-color: #fff !important;
+  border-color: #e2e8f0 !important;
+  color: #475569 !important;
+}
+
+.admin-light .admin-btn-danger {
+  background-color: #fef2f2 !important;
+  color: #dc2626 !important;
+}
+
+.admin-light .admin-badge[class*="bg-yellow-400"] {
+  background-color: rgba(14, 165, 233, 0.1) !important;
+  color: #0284c7 !important;
+}
+
+.admin-light .admin-badge[class*="bg-emerald-400"] {
+  background-color: rgba(16, 185, 129, 0.1) !important;
+  color: #059669 !important;
+}
+
+.admin-light .admin-badge[class*="bg-slate-400"] {
+  background-color: rgba(148, 163, 184, 0.1) !important;
+  color: #64748b !important;
+}
+
+.admin-light .admin-badge[class*="bg-blue-400"] {
+  background-color: rgba(59, 130, 246, 0.1) !important;
+  color: #2563eb !important;
+}
+
+.admin-light .admin-badge[class*="bg-purple-400"] {
+  background-color: rgba(168, 85, 247, 0.1) !important;
+  color: #9333ea !important;
+}
+
+/* --- Contrast Fixes: Darken Faint Gray Text --- */
+.admin-light h1,
+.admin-light h2,
+.admin-light h3,
+.admin-light .admin-section-title,
+.admin-light .admin-num,
+.admin-light strong {
+  color: #0f172a !important;
+  /* Slate 900 - Darkest */
+}
+
+.admin-light .admin-label,
+.admin-light .admin-section-subtitle,
+.admin-light p {
+  color: #334155 !important;
+  /* Slate 700 - Medium Dark */
+}
+
+/* Override ALL gray text classes to make them darker */
+.admin-light [class*="text-slate-400"],
+.admin-light [class*="text-zinc-400"],
+.admin-light [class*="text-slate-500"],
+.admin-light [class*="text-zinc-500"] {
+  color: #475569 !important;
+  /* Force to Slate 600 */
+}
+
+.admin-light .text-red-400,
+.admin-light .text-red-300 {
+  color: #dc2626 !important;
+  /* Red-600 */
+}
+
+.admin-light .text-emerald-400 {
+  color: #059669 !important;
+  /* Emerald-600 */
+}
+
+/* Input placeholder */
+.admin-light input::placeholder,
+.admin-light textarea::placeholder {
+  color: #94a3b8 !important;
+  /* Slate 400 - Visible but muted */
+}
+</style>
+
 <style scoped>
 .sidebar-fade-enter-active,
 .sidebar-fade-leave-active {
diff --git a/app/lib/icons.ts b/app/lib/icons.ts
index ec28c8b..7cccd41 100644
--- a/app/lib/icons.ts
+++ b/app/lib/icons.ts
@@ -87,6 +87,7 @@ import {
   faCommentSlash,
   faRotate,
   faPenToSquare,
+  faEllipsisVertical,
 } from '@fortawesome/free-solid-svg-icons'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -180,6 +181,7 @@ library.add(
   faCommentSlash,
   faRotate,
   faPenToSquare,
+  faEllipsisVertical,
 )
 
 export type IconName =
@@ -204,6 +206,7 @@ export type IconName =
   | 'corner-down-left'
   | 'crown'
   | 'edit'
+  | 'ellipsis-vertical'
   | 'eye'
   | 'eye-off'
   | 'fast-forward'
@@ -287,6 +290,7 @@ const iconMap: Record<IconName, [string, string]> = {
   'corner-down-left': ['fas', 'arrow-turn-down'],
   'crown': ['fas', 'crown'],
   'edit': ['fas', 'pen-to-square'],
+  'ellipsis-vertical': ['fas', 'ellipsis-vertical'],
   'eye': ['fas', 'eye'],
   'eye-off': ['fas', 'eye-slash'],
   'fast-forward': ['fas', 'forward-fast'],
diff --git a/app/pages/admin/cai-dat.vue b/app/pages/admin/cai-dat.vue
index 766fabc..2de7090 100644
--- a/app/pages/admin/cai-dat.vue
+++ b/app/pages/admin/cai-dat.vue
@@ -24,44 +24,44 @@ const allowRegistration = ref(true)
       <div class="space-y-6 lg:col-span-2">
         <div class="admin-card p-5">
           <div class="mb-5 flex items-center gap-3">
-            <div class="grid size-11 place-items-center rounded-xl bg-yellow-400/10">
-              <AppIcon name="settings" class="size-5 text-yellow-400" />
+            <div class="grid size-11 place-items-center rounded-xl bg-sky-50">
+              <AppIcon name="settings" class="size-5 text-sky-600" />
             </div>
             <div>
-              <h2 class="text-lg font-black text-white">Cài đặt chung</h2>
+              <h2 class="text-lg font-black text-slate-900">Cài đặt chung</h2>
               <p class="text-sm text-slate-400">Thông tin cơ bản về website</p>
             </div>
           </div>
 
           <div class="space-y-4">
             <div>
-              <label class="mb-2 block text-sm font-semibold text-white">Tên website</label>
+              <label class="mb-2 block text-sm font-semibold text-slate-900">Tên website</label>
               <input v-model="siteName" type="text" class="admin-input">
             </div>
 
             <div>
-              <label class="mb-2 block text-sm font-semibold text-white">Mô tả website</label>
+              <label class="mb-2 block text-sm font-semibold text-slate-900">Mô tả website</label>
               <textarea v-model="siteDescription" rows="3"
-                class="w-full rounded-xl border border-white/8 bg-white/3 px-4 py-2.5 text-sm text-white outline-none transition placeholder:text-slate-500 focus:border-yellow-400/50 focus:bg-white/5 focus:ring-2 focus:ring-yellow-400/20"></textarea>
+                class="w-full rounded-xl border border-slate-200 bg-slate-100 px-4 py-2.5 text-sm text-slate-900 outline-none transition placeholder:text-slate-500 focus:border-sky-500 focus:bg-slate-100/60 focus:ring-2 focus:ring-sky-500/20"></textarea>
             </div>
           </div>
         </div>
 
         <div class="admin-card p-5">
-          <h2 class="mb-5 text-lg font-black text-white">Tùy chọn hệ thống</h2>
+          <h2 class="mb-5 text-lg font-black text-slate-900">Tùy chọn hệ thống</h2>
 
           <div class="space-y-3">
-            <label class="flex cursor-pointer items-center justify-between rounded-xl border border-white/6 bg-white/3 p-4 transition hover:border-white/10 hover:bg-white/5">
+            <label class="flex cursor-pointer items-center justify-between rounded-xl border border-white/6 bg-slate-100 p-4 transition hover:border-white/10 hover:bg-slate-100/60">
               <div>
-                <p class="text-sm font-bold text-white">Chế độ bảo trì</p>
+                <p class="text-sm font-bold text-slate-900">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>
               <AdminToggle v-model="maintenanceMode" />
             </label>
 
-            <label class="flex cursor-pointer items-center justify-between rounded-xl border border-white/6 bg-white/3 p-4 transition hover:border-white/10 hover:bg-white/5">
+            <label class="flex cursor-pointer items-center justify-between rounded-xl border border-white/6 bg-slate-100 p-4 transition hover:border-white/10 hover:bg-slate-100/60">
               <div>
-                <p class="text-sm font-bold text-white">Cho phép đăng ký</p>
+                <p class="text-sm font-bold text-slate-900">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>
               <AdminToggle v-model="allowRegistration" />
@@ -79,7 +79,7 @@ const allowRegistration = ref(true)
 
       <div class="space-y-6">
         <div class="admin-card-gradient p-5">
-          <h3 class="mb-2 text-lg font-black text-white">Cần giúp đỡ?</h3>
+          <h3 class="mb-2 text-lg font-black text-slate-900">Cần giúp đỡ?</h3>
           <p class="text-sm leading-relaxed text-slate-400">
             Các cài đặt này ảnh hưởng đến toàn bộ hệ thống. Hãy cẩn thận khi thay đổi chế độ bảo trì.
           </p>
diff --git a/app/pages/admin/index.vue b/app/pages/admin/index.vue
index 181e5cd..56fc637 100644
--- a/app/pages/admin/index.vue
+++ b/app/pages/admin/index.vue
@@ -30,7 +30,7 @@ const sourceSegments = computed(() => {
   const kkphim = stats.value?.kkphim || 0
   if (!total) return []
   return [
-    { key: 'ophim', label: 'OPhim', value: ophim, pct: (ophim / total) * 100, color: '#facc15' },
+    { key: 'ophim', label: 'OPhim', value: ophim, pct: (ophim / total) * 100, color: '#fbbf24' },
     { key: 'nguonc', label: 'NguonC', value: nguonc, pct: (nguonc / total) * 100, color: '#34d399' },
     { key: 'kkphim', label: 'KKPhim', value: kkphim, pct: (kkphim / total) * 100, color: '#60a5fa' },
   ].filter(s => s.value > 0)
@@ -58,14 +58,14 @@ function barWidth(views: number) {
       <!-- Hero: Total movies (col-span-2, row-span-2) -->
       <div class="admin-card-gradient relative overflow-hidden p-6 sm:col-span-2 lg:row-span-2">
         <!-- subtle accent glow -->
-        <div class="pointer-events-none absolute -right-16 -top-16 size-48 rounded-full bg-yellow-400/10 blur-3xl" />
+        <div class="pointer-events-none absolute -right-16 -top-16 size-48 rounded-full bg-sky-50 blur-3xl" />
         <div class="relative flex h-full flex-col">
           <div class="flex items-start justify-between">
             <div>
               <p class="admin-label">Tổng số phim</p>
               <p class="admin-num mt-3 text-5xl leading-none sm:text-6xl">{{ stats?.total?.toLocaleString() || 0 }}</p>
             </div>
-            <div class="grid size-10 place-items-center rounded-xl border border-white/8 bg-white/3 text-yellow-400">
+            <div class="grid size-10 place-items-center rounded-xl border border-white/8 bg-slate-100 text-sky-600">
               <AppIcon name="film" class="size-5" />
             </div>
           </div>
@@ -73,19 +73,19 @@ function barWidth(views: number) {
           <div class="mt-8">
             <div class="mb-2 flex items-center justify-between">
               <p class="admin-label">Phân bổ theo nguồn</p>
-              <span class="text-xs text-zinc-500">{{ sourceSegments.length }} nguồn</span>
+              <span class="text-xs text-slate-500">{{ sourceSegments.length }} nguồn</span>
             </div>
-            <div v-if="sourceSegments.length" class="flex h-3 w-full overflow-hidden rounded-full bg-white/4">
+            <div v-if="sourceSegments.length" class="flex h-3 w-full overflow-hidden rounded-full bg-slate-100">
               <div v-for="seg in sourceSegments" :key="seg.key" class="h-full transition-all duration-700"
                 :style="{ width: seg.pct + '%', backgroundColor: seg.color }"
                 :title="`${seg.label}: ${seg.value} (${Math.round(seg.pct)}%)`" />
             </div>
-            <div v-else class="h-3 w-full rounded-full bg-white/4" />
+            <div v-else class="h-3 w-full rounded-full bg-slate-100" />
             <div class="mt-3 flex flex-wrap gap-x-5 gap-y-1.5">
               <div v-for="seg in sourceSegments" :key="seg.key" class="flex items-center gap-2">
                 <span class="size-2 rounded-full" :style="{ backgroundColor: seg.color }" />
-                <span class="text-xs text-zinc-400">{{ seg.label }}</span>
-                <span class="text-xs font-semibold text-zinc-200">{{ seg.value.toLocaleString() }}</span>
+                <span class="text-xs text-slate-400">{{ seg.label }}</span>
+                <span class="text-xs font-semibold text-slate-700">{{ seg.value.toLocaleString() }}</span>
               </div>
             </div>
           </div>
@@ -102,8 +102,8 @@ function barWidth(views: number) {
             <div>
               <p class="admin-label">Chưa hiển thị</p>
               <p class="mt-1.5 flex items-baseline gap-2">
-                <span class="admin-num text-xl text-zinc-300">{{ stats?.inactive?.toLocaleString() || 0 }}</span>
-                <span class="text-xs font-medium text-zinc-500">{{ percentOf(stats?.inactive || 0, stats?.total || 0)
+                <span class="admin-num text-xl text-slate-600">{{ stats?.inactive?.toLocaleString() || 0 }}</span>
+                <span class="text-xs font-medium text-slate-500">{{ percentOf(stats?.inactive || 0, stats?.total || 0)
                 }}%</span>
               </p>
             </div>
@@ -119,7 +119,7 @@ function barWidth(views: number) {
           </div>
         </div>
         <p class="admin-num mt-4 text-3xl">{{ stats?.active?.toLocaleString() || 0 }}</p>
-        <p class="mt-1 text-xs text-zinc-500">{{ percentOf(stats?.active || 0, stats?.total || 0) }}% tổng phim</p>
+        <p class="mt-1 text-xs text-slate-500">{{ percentOf(stats?.active || 0, stats?.total || 0) }}% tổng phim</p>
       </div>
       <!-- KPI: Phim bộ -->
       <div class="admin-card p-5">
@@ -130,7 +130,7 @@ function barWidth(views: number) {
           </div>
         </div>
         <p class="admin-num mt-4 text-3xl">{{ stats?.series?.toLocaleString() || 0 }}</p>
-        <p class="mt-1 text-xs text-zinc-500">{{ percentOf(stats?.series || 0, stats?.total || 0) }}% tổng phim</p>
+        <p class="mt-1 text-xs text-slate-500">{{ percentOf(stats?.series || 0, stats?.total || 0) }}% tổng phim</p>
       </div>
       <!-- KPI: Phim lẻ -->
       <div class="admin-card p-5">
@@ -141,18 +141,18 @@ function barWidth(views: number) {
           </div>
         </div>
         <p class="admin-num mt-4 text-3xl">{{ stats?.single?.toLocaleString() || 0 }}</p>
-        <p class="mt-1 text-xs text-zinc-500">{{ percentOf(stats?.single || 0, stats?.total || 0) }}% tổng phim</p>
+        <p class="mt-1 text-xs text-slate-500">{{ percentOf(stats?.single || 0, stats?.total || 0) }}% tổng phim</p>
       </div>
       <!-- KPI: Tổng lượt xem -->
       <div class="admin-card p-5">
         <div class="flex items-start justify-between">
           <p class="admin-label">Tổng lượt xem</p>
-          <div class="grid size-8 place-items-center rounded-lg bg-yellow-400/10 text-yellow-400">
+          <div class="grid size-8 place-items-center rounded-lg bg-sky-50 text-sky-600">
             <AppIcon name="bar-chart" class="size-4" />
           </div>
         </div>
         <p class="admin-num mt-4 text-3xl">{{ stats?.totalViews?.toLocaleString() || 0 }}</p>
-        <p class="mt-1 text-xs text-zinc-500">trên {{ stats?.total?.toLocaleString() || 0 }} phim</p>
+        <p class="mt-1 text-xs text-slate-500">trên {{ stats?.total?.toLocaleString() || 0 }} phim</p>
       </div>
     </div>
     <!-- Bento: Charts row -->
@@ -161,13 +161,13 @@ function barWidth(views: number) {
       <div class="admin-card p-5">
         <div class="flex items-center justify-between">
           <p class="admin-label">Phân bổ nguồn</p>
-          <span class="admin-badge bg-white/5 text-zinc-400">Nguồn</span>
+          <span class="admin-badge bg-slate-200/50 text-slate-400">Nguồn</span>
         </div>
         <div class="mt-4 flex items-center justify-center">
           <div class="relative">
             <svg viewBox="0 0 100 100" class="size-40">
               <template v-if="stats?.ophim">
-                <path :d="donutSegment(stats.ophim, stats.total, 0)" fill="#facc15" />
+                <path :d="donutSegment(stats.ophim, stats.total, 0)" fill="#f59e0b" />
               </template>
               <template v-if="stats?.nguonc">
                 <path :d="donutSegment(stats.nguonc, stats.total, (stats.ophim || 0) / (stats.total || 1) * 360)"
@@ -178,27 +178,27 @@ function barWidth(views: number) {
                   :d="donutSegment(stats.kkphim, stats.total, ((stats.ophim || 0) + (stats.nguonc || 0)) / (stats.total || 1) * 360)"
                   fill="#60a5fa" />
               </template>
-              <circle cx="50" cy="50" r="22" fill="#131418" />
+              <circle cx="50" cy="50" r="22" fill="#ffffff" />
             </svg>
             <div class="absolute inset-0 grid place-items-center">
               <div class="text-center">
                 <p class="admin-num text-xl">{{ stats?.total?.toLocaleString() || 0 }}</p>
-                <p class="text-[10px] uppercase tracking-widest text-zinc-500">phim</p>
+                <p class="text-[10px] uppercase tracking-widest text-slate-500">phim</p>
               </div>
             </div>
           </div>
         </div>
         <div class="mt-4 space-y-1.5">
           <div v-for="s in [
-            { key: 'ophim', label: 'OPhim', color: 'bg-yellow-400' },
+            { key: 'ophim', label: 'OPhim', color: 'bg-sky-500' },
             { key: 'nguonc', label: 'NguonC', color: 'bg-emerald-400' },
             { key: 'kkphim', label: 'KKPhim', color: 'bg-blue-400' },
           ]" :key="s.key" class="flex items-center justify-between text-sm">
             <div class="flex items-center gap-2">
               <span class="size-2 rounded-full" :class="s.color" />
-              <span class="text-zinc-400">{{ s.label }}</span>
+              <span class="text-slate-500">{{ s.label }}</span>
             </div>
-            <span class="font-semibold text-zinc-200">{{ stats?.[s.key] || 0 }}</span>
+            <span class="font-semibold text-slate-700">{{ stats?.[s.key] || 0 }}</span>
           </div>
         </div>
       </div>
@@ -206,7 +206,7 @@ function barWidth(views: number) {
       <div class="admin-card p-5">
         <div class="flex items-center justify-between">
           <p class="admin-label">Bộ vs Lẻ</p>
-          <span class="admin-badge bg-white/5 text-zinc-400">Loại</span>
+          <span class="admin-badge bg-slate-200/50 text-slate-400">Loại</span>
         </div>
         <div class="mt-4 flex items-center justify-center">
           <div class="relative">
@@ -218,12 +218,12 @@ function barWidth(views: number) {
                 <path :d="donutSegment(stats.single, stats.total, (stats.series || 0) / (stats.total || 1) * 360)"
                   fill="#a855f7" />
               </template>
-              <circle cx="50" cy="50" r="22" fill="#131418" />
+              <circle cx="50" cy="50" r="22" fill="#ffffff" />
             </svg>
             <div class="absolute inset-0 grid place-items-center">
               <div class="text-center">
                 <p class="admin-num text-xl">{{ stats?.total?.toLocaleString() || 0 }}</p>
-                <p class="text-[10px] uppercase tracking-widest text-zinc-500">phim</p>
+                <p class="text-[10px] uppercase tracking-widest text-slate-500">phim</p>
               </div>
             </div>
           </div>
@@ -232,16 +232,16 @@ function barWidth(views: number) {
           <div class="flex items-center justify-between text-sm">
             <div class="flex items-center gap-2">
               <span class="size-2 rounded-full bg-blue-500" />
-              <span class="text-zinc-400">Phim bộ</span>
+              <span class="text-slate-500">Phim bộ</span>
             </div>
-            <span class="font-semibold text-zinc-200">{{ stats?.series || 0 }}</span>
+            <span class="font-semibold text-slate-700">{{ stats?.series || 0 }}</span>
           </div>
           <div class="flex items-center justify-between text-sm">
             <div class="flex items-center gap-2">
               <span class="size-2 rounded-full bg-purple-500" />
-              <span class="text-zinc-400">Phim lẻ</span>
+              <span class="text-slate-500">Phim lẻ</span>
             </div>
-            <span class="font-semibold text-zinc-200">{{ stats?.single || 0 }}</span>
+            <span class="font-semibold text-slate-700">{{ stats?.single || 0 }}</span>
           </div>
         </div>
       </div>
@@ -249,28 +249,28 @@ function barWidth(views: number) {
       <div class="admin-card p-5 sm:col-span-2 lg:col-span-2">
         <div class="flex items-center justify-between">
           <p class="admin-label">Top phim xem nhiều</p>
-          <span class="admin-badge bg-yellow-400/10 text-yellow-400">Top 5</span>
+          <span class="admin-badge bg-sky-50 text-sky-600">Top 5</span>
         </div>
         <div class="mt-4 space-y-3.5">
           <div v-for="(movie, i) in stats?.topMovies || []" :key="movie.slug">
             <div class="mb-1.5 flex items-center justify-between gap-3">
               <div class="flex min-w-0 items-center gap-2.5">
                 <span class="flex size-5 shrink-0 items-center justify-center rounded-md text-[10px] font-bold"
-                  :class="i === 0 ? 'bg-yellow-400 text-zinc-950' : 'bg-white/6 text-zinc-400'">
+                  :class="i === 0 ? 'bg-sky-500 text-slate-900' : 'bg-slate-100/60 text-slate-400'">
                   {{ i + 1 }}
                 </span>
-                <span class="truncate text-sm text-zinc-100">{{ movie.name }}</span>
+                <span class="truncate text-sm text-slate-800">{{ movie.name }}</span>
               </div>
-              <span class="shrink-0 text-xs font-semibold text-zinc-400 tabular-nums">{{ movie.views?.toLocaleString()
+              <span class="shrink-0 text-xs font-semibold text-slate-400 tabular-nums">{{ movie.views?.toLocaleString()
               }}</span>
             </div>
-            <div class="h-1.5 overflow-hidden rounded-full bg-white/4">
+            <div class="h-1.5 overflow-hidden rounded-full bg-slate-100">
               <div class="h-full rounded-full transition-all duration-700"
-                :class="i === 0 ? 'bg-yellow-400' : 'bg-zinc-500'"
+                :class="i === 0 ? 'bg-sky-500' : 'bg-zinc-500'"
                 :style="{ width: barWidth(movie.views || 0) + '%' }" />
             </div>
           </div>
-          <p v-if="!stats?.topMovies?.length" class="py-6 text-center text-sm text-zinc-500">Chưa có dữ liệu</p>
+          <p v-if="!stats?.topMovies?.length" class="py-6 text-center text-sm text-slate-500">Chưa có dữ liệu</p>
         </div>
       </div>
     </div>
@@ -278,27 +278,27 @@ function barWidth(views: number) {
     <div class="admin-card p-6">
       <div class="mb-5 flex items-center justify-between">
         <p class="admin-label">Trạng thái hiển thị</p>
-        <span class="admin-badge bg-white/5 text-zinc-400">{{ stats?.total?.toLocaleString() || 0 }} phim</span>
+        <span class="admin-badge bg-slate-200/50 text-slate-400">{{ stats?.total?.toLocaleString() || 0 }} phim</span>
       </div>
       <div class="grid gap-6 md:grid-cols-2">
         <div>
           <div class="mb-2 flex items-center justify-between text-sm">
-            <span class="text-zinc-400">Đang hiển thị</span>
+            <span class="text-slate-500">Đang hiển thị</span>
             <span class="font-semibold text-emerald-400 tabular-nums">{{ stats?.active?.toLocaleString() || 0 }} · {{
               percentOf(stats?.active || 0, stats?.total || 0) }}%</span>
           </div>
-          <div class="h-2.5 overflow-hidden rounded-full bg-white/4">
+          <div class="h-2.5 overflow-hidden rounded-full bg-slate-100">
             <div class="h-full rounded-full bg-linear-to-r from-emerald-500 to-emerald-400 transition-all duration-700"
               :style="{ width: percentOf(stats?.active || 0, stats?.total || 0) + '%' }" />
           </div>
         </div>
         <div>
           <div class="mb-2 flex items-center justify-between text-sm">
-            <span class="text-zinc-400">Chưa hiển thị</span>
-            <span class="font-semibold text-zinc-400 tabular-nums">{{ stats?.inactive?.toLocaleString() || 0 }} · {{
+            <span class="text-slate-500">Chưa hiển thị</span>
+            <span class="font-semibold text-slate-400 tabular-nums">{{ stats?.inactive?.toLocaleString() || 0 }} · {{
               percentOf(stats?.inactive || 0, stats?.total || 0) }}%</span>
           </div>
-          <div class="h-2.5 overflow-hidden rounded-full bg-white/4">
+          <div class="h-2.5 overflow-hidden rounded-full bg-slate-100">
             <div class="h-full rounded-full bg-zinc-600 transition-all duration-700"
               :style="{ width: percentOf(stats?.inactive || 0, stats?.total || 0) + '%' }" />
           </div>
diff --git a/app/pages/admin/login.vue b/app/pages/admin/login.vue
index 314a9ff..54ea09b 100644
--- a/app/pages/admin/login.vue
+++ b/app/pages/admin/login.vue
@@ -50,12 +50,12 @@ async function handleLogin() {
       class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(250,204,21,0.08),transparent_40%),radial-gradient(circle_at_bottom_left,rgba(59,130,246,0.05),transparent_40%)]" />
 
     <div class="relative w-full max-w-md">
-      <div class="rounded-3xl border border-white/6 bg-[#131418]/80 p-1 shadow-2xl backdrop-blur-sm">
+      <div class="rounded-3xl border border-slate-200 bg-white/90 p-1 shadow-2xl backdrop-blur-sm">
         <div class="rounded-[22px] bg-linear-to-b from-white/8 to-transparent p-6">
           <div class="mb-8 text-center">
             <div class="mb-4 inline-flex items-center gap-3">
               <div
-                class="grid size-12 place-items-center rounded-2xl bg-linear-to-br from-yellow-400 to-amber-500 shadow-lg shadow-yellow-400/20">
+                class="grid size-12 place-items-center rounded-2xl bg-linear-to-br from-sky-400 to-cyan-600 shadow-lg shadow-sky-500/20">
                 <span class="text-xl font-black text-slate-950">C</span>
               </div>
               <div class="text-left">
diff --git a/app/pages/admin/phim/[id].vue b/app/pages/admin/phim/[id].vue
index 067a236..af9b98e 100644
--- a/app/pages/admin/phim/[id].vue
+++ b/app/pages/admin/phim/[id].vue
@@ -277,13 +277,13 @@ function useApiActors() {
 <template>
   <div class="space-y-5">
     <NuxtLink to="/admin/phim"
-      class="inline-flex items-center gap-2 text-sm font-medium text-zinc-400 transition hover:text-white">
+      class="inline-flex items-center gap-2 text-sm font-medium text-slate-400 transition hover:text-white">
       <AppIcon name="arrow-left" class="size-4" />
       Quay lại danh sách phim
     </NuxtLink>
 
     <div v-if="!movie" class="admin-card p-12 text-center">
-      <p class="text-sm text-zinc-500">Đang tải...</p>
+      <p class="text-sm text-slate-500">Đang tải...</p>
     </div>
 
     <div v-else class="space-y-5">
@@ -295,7 +295,7 @@ function useApiActors() {
               class="aspect-video w-full overflow-hidden rounded-xl border border-white/6 bg-white/2 sm:w-44">
               <img v-if="customPoster || movie.poster" :src="customPoster || movie.poster || undefined" :alt="movie.name"
                 class="h-full w-full object-cover">
-              <div v-else class="grid h-full place-items-center text-zinc-600">
+              <div v-else class="grid h-full place-items-center text-slate-600">
                 <AppIcon name="image" class="size-6" />
               </div>
             </div>
@@ -307,11 +307,11 @@ function useApiActors() {
             </p>
             <div class="mt-3 flex flex-wrap items-center gap-2">
               <span class="admin-badge"
-                :class="movie.active ? 'bg-emerald-400/10 text-emerald-400' : 'bg-zinc-400/10 text-zinc-400'">
+                :class="movie.active ? 'bg-emerald-400/10 text-emerald-400' : 'bg-zinc-400/10 text-slate-400'">
                 {{ movie.active ? 'Đang hiển thị' : 'Ẩn' }}
               </span>
-              <span v-if="movie.quality" class="admin-badge bg-white/6 text-zinc-400">{{ movie.quality }}</span>
-              <span class="admin-badge bg-white/6 text-zinc-400">{{ movie.episodeTotal || '—' }} tập</span>
+              <span v-if="movie.quality" class="admin-badge bg-slate-200/50 text-slate-400">{{ movie.quality }}</span>
+              <span class="admin-badge bg-slate-200/50 text-slate-400">{{ movie.episodeTotal || '—' }} tập</span>
             </div>
           </div>
         </div>
@@ -335,15 +335,15 @@ function useApiActors() {
               <button v-for="s in sections" :key="s.key" type="button"
                 class="relative flex shrink-0 items-center gap-2 rounded-t-lg px-4 py-3 text-sm font-semibold transition"
                 :class="activeSection === s.key
-                  ? 'bg-white/6 text-yellow-400 after:absolute after:inset-x-3 after:bottom-0 after:h-0.5 after:rounded-full after:bg-yellow-400'
-                  : 'text-zinc-400 hover:bg-white/3 hover:text-white'" @click="activeSection = s.key">
+                  ? 'bg-slate-100/60 text-sky-600 after:absolute after:inset-x-3 after:bottom-0 after:h-0.5 after:rounded-full after:bg-sky-500'
+                  : 'text-slate-500 hover:bg-slate-100 hover:text-white'" @click="activeSection = s.key">
                 <AppIcon :name="s.icon" class="size-4" />
                 <span>{{ s.label }}</span>
                 <span v-if="s.key === 'actors' && customActors.length"
-                  class="rounded-full bg-white/8 px-2 py-0.5 text-[10px] text-zinc-300">{{ customActors.length
+                  class="rounded-full bg-slate-200/50 px-2 py-0.5 text-[10px] text-slate-600">{{ customActors.length
                   }}</span>
                 <span v-else-if="s.key === 'episodes' && customServers.length"
-                  class="rounded-full bg-white/8 px-2 py-0.5 text-[10px] text-zinc-300">{{customServers.reduce((a,
+                  class="rounded-full bg-slate-200/50 px-2 py-0.5 text-[10px] text-slate-600">{{customServers.reduce((a,
                     b) => a + b.episodes.length, 0)}}</span>
               </button>
             </nav>
@@ -356,41 +356,41 @@ function useApiActors() {
                     <AppIcon name="info" class="size-4" />
                   </div>
                   <div>
-                    <h2 class="text-sm font-bold text-white">Thông tin chi tiết</h2>
-                    <p class="text-xs text-zinc-500">Dữ liệu hiện tại của phim</p>
+                    <h2 class="text-sm font-bold text-slate-900">Thông tin chi tiết</h2>
+                    <p class="text-xs text-slate-500">Dữ liệu hiện tại của phim</p>
                   </div>
                 </div>
                 <dl class="grid gap-4 sm:grid-cols-2">
                   <div class="rounded-xl border border-white/6 bg-white/2 p-4">
                     <dt class="admin-label mb-1">Nguồn</dt>
-                    <dd class="font-semibold text-white">{{ movie.source?.toUpperCase() }}</dd>
+                    <dd class="font-semibold text-slate-900">{{ movie.source?.toUpperCase() }}</dd>
                   </div>
                   <div class="rounded-xl border border-white/6 bg-white/2 p-4">
                     <dt class="admin-label mb-1">Slug</dt>
-                    <dd class="truncate text-zinc-200" :title="movie.slug">{{ movie.slug }}</dd>
+                    <dd class="truncate text-slate-700" :title="movie.slug">{{ movie.slug }}</dd>
                   </div>
                   <div class="rounded-xl border border-white/6 bg-white/2 p-4">
                     <dt class="admin-label mb-1">Năm phát hành</dt>
-                    <dd class="text-zinc-200">{{ movie.year || '—' }}</dd>
+                    <dd class="text-slate-700">{{ movie.year || '—' }}</dd>
                   </div>
                   <div class="rounded-xl border border-white/6 bg-white/2 p-4">
                     <dt class="admin-label mb-1">Số tập</dt>
-                    <dd class="text-zinc-200">{{ movie.episodeTotal || '—' }}</dd>
+                    <dd class="text-slate-700">{{ movie.episodeTotal || '—' }}</dd>
                   </div>
                   <div class="rounded-xl border border-white/6 bg-white/2 p-4">
                     <dt class="admin-label mb-1">Chất lượng</dt>
-                    <dd class="text-zinc-200">{{ movie.quality || '—' }}</dd>
+                    <dd class="text-slate-700">{{ movie.quality || '—' }}</dd>
                   </div>
                   <div class="rounded-xl border border-white/6 bg-white/2 p-4">
                     <dt class="admin-label mb-1">Trạng thái</dt>
-                    <dd class="font-semibold" :class="movie.active ? 'text-emerald-400' : 'text-zinc-400'">{{
+                    <dd class="font-semibold" :class="movie.active ? 'text-emerald-400' : 'text-slate-500'">{{
                       movie.active ? 'Đang hiển thị' : 'Ẩn' }}</dd>
                   </div>
                 </dl>
                 <div v-if="movie.categories?.length" class="mt-5 border-t border-white/6 pt-4">
                   <h4 class="admin-label mb-2">Thể loại</h4>
                   <div class="flex flex-wrap gap-2"><span v-for="cat in movie.categories" :key="cat"
-                      class="rounded-full bg-white/6 px-3 py-1 text-xs font-medium text-zinc-300">{{ cat }}</span>
+                      class="rounded-full bg-slate-200/50 px-3 py-1 text-xs font-medium text-slate-600">{{ cat }}</span>
                   </div>
                 </div>
               </div>
@@ -403,20 +403,20 @@ function useApiActors() {
                       <AppIcon name="type" class="size-4" />
                     </div>
                     <div>
-                      <h2 class="text-sm font-bold text-white">Mô tả phim</h2>
-                      <p class="text-xs text-zinc-500">{{ customContent ? 'Nội dung tuỳ chỉnh' : 'Nội dung từ API' }}
+                      <h2 class="text-sm font-bold text-slate-900">Mô tả phim</h2>
+                      <p class="text-xs text-slate-500">{{ customContent ? 'Nội dung tuỳ chỉnh' : 'Nội dung từ API' }}
                       </p>
                     </div>
                   </div>
                   <button v-if="apiContent && !customContent" type="button"
-                    class="admin-btn-sm bg-yellow-400/10 text-yellow-400 hover:bg-yellow-400/20"
+                    class="admin-btn-sm bg-sky-50 text-sky-600 hover:bg-sky-500/20"
                     @click="useApiContent">Dùng mô tả API</button>
                   <button v-else-if="customContent" type="button" class="admin-btn-sm text-red-400 hover:bg-red-400/10"
                     @click="clearField('customContent')">Về mặc định</button>
                 </div>
                 <textarea v-model="customContent" :rows="contentRows" :placeholder="apiContent || 'Nhập mô tả phim...'"
                   style="field-sizing: content; min-height: 320px;"
-                  class="w-full rounded-xl border border-white/8 bg-white/3 p-4 text-sm leading-7 text-white outline-none transition placeholder:text-zinc-500 focus:border-yellow-400/40 focus:bg-white/5" />
+                  class="w-full rounded-xl border border-slate-200 bg-slate-100 p-4 text-sm leading-7 text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-sky-500 focus:bg-slate-100/60" />
               </div>
 
               <!-- Section: Diễn viên -->
@@ -427,23 +427,23 @@ function useApiActors() {
                       <AppIcon name="users" class="size-4" />
                     </div>
                     <div>
-                      <h2 class="text-sm font-bold text-white">Diễn viên</h2>
-                      <p class="text-xs text-zinc-500">{{ customActors.length }} diễn viên</p>
+                      <h2 class="text-sm font-bold text-slate-900">Diễn viên</h2>
+                      <p class="text-xs text-slate-500">{{ customActors.length }} diễn viên</p>
                     </div>
                   </div>
                   <div class="flex gap-2"><button v-if="apiActors.length" type="button"
-                      class="admin-btn-sm bg-yellow-400/10 text-yellow-400 hover:bg-yellow-400/20"
+                      class="admin-btn-sm bg-sky-50 text-sky-600 hover:bg-sky-500/20"
                       @click="useApiActors">Import ({{ apiActors.length }})</button><button type="button"
-                      class="admin-btn-sm bg-white/6 text-zinc-100 hover:bg-white/10" @click="addActor">
+                      class="admin-btn-sm bg-slate-200/50 text-slate-800 hover:bg-white/10" @click="addActor">
                       <AppIcon name="plus" class="size-3" />Thêm
                     </button></div>
                 </div>
                 <div v-if="customActors.length" class="space-y-2">
                   <div v-for="(actor, index) in customActors" :key="index"
                     class="grid gap-2 rounded-xl border border-white/6 bg-white/2 p-3 md:grid-cols-[44px_1fr_1fr_140px_1fr_36px] md:items-center">
-                    <div class="grid size-10 place-items-center overflow-hidden rounded-full bg-white/6"><img
+                    <div class="grid size-10 place-items-center overflow-hidden rounded-full bg-slate-200/50"><img
                         v-if="actor.avatar" :src="actor.avatar" :alt="actor.name" class="size-full object-cover"><span
-                        v-else class="text-sm font-bold text-zinc-400">{{ (actor.name?.[0] || '?').toUpperCase() }}</span>
+                        v-else class="text-sm font-bold text-slate-400">{{ (actor.name?.[0] || '?').toUpperCase() }}</span>
                     </div>
                     <input v-model="actor.name" type="text" placeholder="Tên" class="admin-input-sm"><input
                       v-model="actor.originalName" type="text" placeholder="Tên gốc" class="admin-input-sm"><input
@@ -456,7 +456,7 @@ function useApiActors() {
                   </div>
                 </div>
                 <div v-else
-                  class="rounded-xl border border-dashed border-white/10 p-10 text-center text-sm text-zinc-500">Chưa
+                  class="rounded-xl border border-dashed border-white/10 p-10 text-center text-sm text-slate-500">Chưa
                   có diễn viên.</div>
               </div>
 
@@ -483,9 +483,9 @@ function useApiActors() {
                 <div class="space-y-3 2xl:col-span-7">
                   <div class="flex items-center justify-between gap-3">
                     <div>
-                      <h3 class="text-sm font-bold text-white">Server & tập phim</h3>
-                      <p class="text-xs text-zinc-500">Danh sách hiển thị trên website</p>
-                    </div><button type="button" class="admin-btn-sm bg-white/6 text-zinc-100 hover:bg-white/10"
+                      <h3 class="text-sm font-bold text-slate-900">Server & tập phim</h3>
+                      <p class="text-xs text-slate-500">Danh sách hiển thị trên website</p>
+                    </div><button type="button" class="admin-btn-sm bg-slate-200/50 text-slate-800 hover:bg-white/10"
                       @click="addServer">
                       <AppIcon name="plus" class="size-3" />Thêm server
                     </button>
@@ -494,10 +494,10 @@ function useApiActors() {
                     class="rounded-xl border border-white/6 bg-white/2">
                     <div class="flex items-center gap-2 p-3"><button type="button"
                         class="flex min-w-0 flex-1 items-center gap-2 text-left" @click="toggleServer(serverIndex)">
-                        <AppIcon name="chevron-down" class="size-4 text-zinc-400 transition"
+                        <AppIcon name="chevron-down" class="size-4 text-slate-400 transition"
                           :class="collapsedServers[serverIndex] ? '-rotate-90' : ''" /><span
-                          class="truncate text-sm font-bold text-white">{{ server.name || `Server ${serverIndex + 1}`
-                          }}</span><span class="rounded-full bg-white/8 px-2 py-0.5 text-[10px] text-zinc-300">{{
+                          class="truncate text-sm font-bold text-slate-900">{{ server.name || `Server ${serverIndex + 1}`
+                          }}</span><span class="rounded-full bg-slate-200/50 px-2 py-0.5 text-[10px] text-slate-600">{{
                             server.episodes.length }} tập</span>
                       </button><button type="button"
                         class="grid size-8 place-items-center rounded-lg text-red-400 hover:bg-red-400/10"
@@ -512,11 +512,11 @@ function useApiActors() {
                         <div class="flex gap-2"><input v-model="ep.name" type="text" placeholder="Tên tập"
                             class="admin-input-sm w-24"><select class="admin-input-sm min-w-0 flex-1"
                             @change="handleSourceLinkChange(serverIndex, episodeIndex, $event)">
-                            <option value="" class="bg-[#131418]">Chọn link từ API</option>
+                            <option value="" class="bg-white">Chọn link từ API</option>
                             <option v-for="item in availableEpisodes" :key="item.key" :value="item.key"
-                              class="bg-[#131418]">{{ item.label }}</option>
+                              class="bg-white">{{ item.label }}</option>
                           </select><button type="button"
-                            class="grid size-8 place-items-center rounded-lg text-zinc-400 hover:bg-white/6"
+                            class="grid size-8 place-items-center rounded-lg text-slate-400 hover:bg-slate-100/60"
                             @click="toggleLinks(`${serverIndex}-${episodeIndex}`)">
                             <AppIcon name="pencil" class="size-3" />
                           </button><button type="button"
@@ -529,42 +529,42 @@ function useApiActors() {
                             placeholder="Link embed" class="admin-input-sm"><input v-model="ep.linkM3u8" type="url"
                             placeholder="Link m3u8" class="admin-input-sm"></div>
                       </div><button type="button"
-                        class="admin-btn-sm border border-dashed border-white/15 text-zinc-300"
+                        class="admin-btn-sm border border-dashed border-white/15 text-slate-600"
                         @click="addServerEpisode(serverIndex)">
                         <AppIcon name="plus" class="size-3" />Thêm tập
                       </button>
                     </div>
                   </div>
                   <div v-if="!customServers.length"
-                    class="rounded-xl border border-dashed border-white/10 p-8 text-center text-sm text-zinc-500">
+                    class="rounded-xl border border-dashed border-white/10 p-8 text-center text-sm text-slate-500">
                     Chưa có server.</div>
                 </div>
                 <div class="2xl:col-span-5">
                   <div class="rounded-xl border border-white/6 bg-white/2 p-4 2xl:sticky 2xl:top-5">
                     <div class="mb-3">
-                      <h3 class="text-sm font-bold text-white">Nguồn API</h3>
-                      <p class="text-xs text-zinc-500">Thêm nhanh tập vào server</p>
+                      <h3 class="text-sm font-bold text-slate-900">Nguồn API</h3>
+                      <p class="text-xs text-slate-500">Thêm nhanh tập vào server</p>
                     </div>
                     <select v-model="selectedTargetServer" class="admin-input-sm mb-3 w-full">
-                      <option v-for="(server, index) in customServers" :key="index" :value="index" class="bg-[#131418]">
+                      <option v-for="(server, index) in customServers" :key="index" :value="index" class="bg-white">
                         {{ server.name || `Server ${index + 1}` }}</option>
                     </select>
                     <div class="space-y-2">
                       <div v-for="(source, sourceIndex) in sourceData?.sources || []" :key="source.source"
                         class="rounded-lg border border-white/6"><button type="button"
                           class="flex w-full items-center justify-between p-3 text-left"
-                          @click="toggleSource(source.source)"><span class="text-xs font-bold uppercase text-white">{{
+                          @click="toggleSource(source.source)"><span class="text-xs font-bold uppercase text-slate-900">{{
                             source.source }} · {{ source.name }}</span>
-                          <AppIcon name="chevron-down" class="size-4 text-zinc-400" />
+                          <AppIcon name="chevron-down" class="size-4 text-slate-400" />
                         </button>
                         <div v-if="expandedSources[source.source]" class="space-y-3 border-t border-white/6 p-3">
                           <div v-for="(server, serverIndex) in source.servers" :key="serverIndex">
                             <div class="mb-2 flex items-center justify-between"><span class="admin-label">{{ server.name
-                                }}</span><button type="button" class="text-xs font-semibold text-yellow-400"
+                                }}</span><button type="button" class="text-xs font-semibold text-sky-600"
                                 @click="quickAddAllEpisodes(sourceIndex, serverIndex)">Thêm tất cả</button></div>
                             <div class="flex flex-wrap gap-2"><button v-for="(ep, epIndex) in server.episodes"
                                 :key="epIndex" type="button"
-                                class="rounded-lg bg-white/5 px-2.5 py-1.5 text-xs text-zinc-200 hover:bg-yellow-400/10 hover:text-yellow-400"
+                                class="rounded-lg bg-slate-200/50 px-2.5 py-1.5 text-xs text-slate-700 hover:bg-sky-500/10 hover:text-sky-600"
                                 @click="quickAddEpisode(sourceIndex, serverIndex, epIndex)">{{ ep.name || `Tập ${epIndex
                                   + 1}` }}</button></div>
                           </div>
@@ -583,21 +583,21 @@ function useApiActors() {
           <div class="admin-card overflow-hidden">
             <div class="flex items-center justify-between border-b border-white/6 px-4 py-3">
               <div>
-                <h3 class="text-sm font-bold text-white">Đăng phim</h3>
-                <p class="text-xs text-zinc-500">Lưu và cập nhật nội dung</p>
+                <h3 class="text-sm font-bold text-slate-900">Đăng phim</h3>
+                <p class="text-xs text-slate-500">Lưu và cập nhật nội dung</p>
               </div><span class="admin-badge"
-                :class="movie.active ? 'bg-emerald-400/10 text-emerald-400' : 'bg-zinc-400/10 text-zinc-400'">{{
+                :class="movie.active ? 'bg-emerald-400/10 text-emerald-400' : 'bg-zinc-400/10 text-slate-400'">{{
                   movie.active ? 'Hiển thị' : 'Đang ẩn' }}</span>
             </div>
             <div class="space-y-3 p-4 text-sm">
-              <div class="flex justify-between gap-3"><span class="text-zinc-500">Nguồn</span><strong
+              <div class="flex justify-between gap-3"><span class="text-slate-9000">Nguồn</span><strong
                   class="text-white">{{ movie.source?.toUpperCase() }}</strong></div>
-              <div class="flex justify-between gap-3"><span class="text-zinc-500">Năm</span><span
-                  class="text-zinc-200">{{ movie.year || '—' }}</span></div>
-              <div class="flex justify-between gap-3"><span class="text-zinc-500">Tổng tập</span><span
-                  class="text-zinc-200">{{ movie.episodeTotal || '—' }}</span></div>
-              <div class="flex justify-between gap-3"><span class="text-zinc-500">Đồng bộ</span><span
-                  class="truncate text-right text-zinc-200">{{ new Date(movie.syncedAt).toLocaleString('vi-VN')
+              <div class="flex justify-between gap-3"><span class="text-slate-9000">Năm</span><span
+                  class="text-slate-700">{{ movie.year || '—' }}</span></div>
+              <div class="flex justify-between gap-3"><span class="text-slate-9000">Tổng tập</span><span
+                  class="text-slate-700">{{ movie.episodeTotal || '—' }}</span></div>
+              <div class="flex justify-between gap-3"><span class="text-slate-9000">Đồng bộ</span><span
+                  class="truncate text-right text-slate-700">{{ new Date(movie.syncedAt).toLocaleString('vi-VN')
                   }}</span></div>
             </div>
             <div class="border-t border-white/6 p-4"><button type="button"
@@ -612,14 +612,14 @@ function useApiActors() {
 
           <div class="admin-card overflow-hidden">
             <div class="border-b border-white/6 px-4 py-3">
-              <h3 class="text-sm font-bold text-white">Ảnh đại diện ngang</h3>
-              <p class="text-xs text-zinc-500">Poster 16:9</p>
+              <h3 class="text-sm font-bold text-slate-900">Ảnh đại diện ngang</h3>
+              <p class="text-xs text-slate-500">Poster 16:9</p>
             </div>
             <div class="p-4">
-              <div class="aspect-video overflow-hidden rounded-xl border border-white/8 bg-white/2"><img
+              <div class="aspect-video overflow-hidden rounded-xl border border-slate-200 bg-white/2"><img
                   v-if="customPoster || movie.poster" :src="customPoster || movie.poster || undefined" :alt="movie.name"
                   class="size-full object-cover">
-                <div v-else class="grid size-full place-items-center text-zinc-600">
+                <div v-else class="grid size-full place-items-center text-slate-600">
                   <AppIcon name="image" class="size-7" />
                 </div>
               </div><input v-model="customPoster" type="url" placeholder="URL ảnh ngang..."
@@ -629,15 +629,15 @@ function useApiActors() {
 
           <div class="admin-card overflow-hidden">
             <div class="border-b border-white/6 px-4 py-3">
-              <h3 class="text-sm font-bold text-white">Ảnh đại diện dọc</h3>
-              <p class="text-xs text-zinc-500">Thumbnail 2:3</p>
+              <h3 class="text-sm font-bold text-slate-900">Ảnh đại diện dọc</h3>
+              <p class="text-xs text-slate-500">Thumbnail 2:3</p>
             </div>
             <div class="p-4">
               <div
-                class="mx-auto aspect-2/3 w-full max-w-55 overflow-hidden rounded-xl border border-white/8 bg-white/2">
+                class="mx-auto aspect-2/3 w-full max-w-55 overflow-hidden rounded-xl border border-slate-200 bg-white/2">
                 <img v-if="customThumb || movie.thumb || movie.poster" :src="customThumb || movie.thumb || movie.poster || undefined"
                   :alt="movie.name" class="size-full object-cover">
-                <div v-else class="grid size-full place-items-center text-zinc-600">
+                <div v-else class="grid size-full place-items-center text-slate-600">
                   <AppIcon name="image" class="size-7" />
                 </div>
               </div><input v-model="customThumb" type="url" placeholder="URL ảnh dọc..."
diff --git a/app/pages/admin/phim/index.vue b/app/pages/admin/phim/index.vue
index ce9bcbb..a87a8a4 100644
--- a/app/pages/admin/phim/index.vue
+++ b/app/pages/admin/phim/index.vue
@@ -22,6 +22,10 @@ const deleteConfirmOpen = ref(false)
 const syncSources = ref({ ophim: true, nguonc: true, kkphim: true })
 const syncResult = ref<{ total: number, created: number, updated: number, sourceStats: Record<string, { fetched: number, error?: string }> } | null>(null)
 
+// 3-dot menu state
+const menuOpen = ref<number | null>(null)
+const selectedMovie = ref<any>(null)
+
 const { bust } = useCacheBust()
 
 let searchTimeout: ReturnType<typeof setTimeout> | undefined
@@ -198,8 +202,8 @@ function formatRelativeTime(dateValue?: string | number | Date | null) {
   return 'Vừa xong'
 }
 
-function sortIcon(column: string): string {
-  if (sortBy.value !== column) return 'chevron-down'
+function sortIcon(column: string): import('~/lib/icons').IconName {
+  if (sortBy.value !== column) return 'chevron-down' as const
   return sortOrder.value === 'asc' ? 'chevron-up' : 'chevron-down'
 }
 
@@ -218,7 +222,7 @@ const syncSourceOptions = [
         <p class="admin-section-subtitle mt-1">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="admin-btn-danger" @click="deleteConfirmOpen = true">
+        <button type="button" class="admin-btn-danger border" @click="deleteConfirmOpen = true">
           <AppIcon name="trash" class="size-4" />
           Xoá tất cả
         </button>
@@ -230,23 +234,32 @@ const syncSourceOptions = [
     </div>
 
     <div class="admin-card overflow-hidden">
-      <div class="flex flex-col gap-3 border-b border-white/[0.06] p-4 sm:flex-row sm:items-center">
-        <div class="relative flex-1">
-          <AppIcon name="search" class="absolute left-3.5 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="admin-input pl-10">
+      <div class="grid grid-cols-1 gap-3 border-b border-white/6 p-4
+         md:grid-cols-2
+         xl:grid-cols-[minmax(280px,1fr)_180px_160px_150px]
+         xl:items-center">
+        <div class="relative min-w-0 w-full">
+          <AppIcon name="search"
+            class="pointer-events-none absolute left-3.5 top-1/2 z-10 size-4 -translate-y-1/2 text-slate-400" />
+
+          <input v-model="searchInput" type="text" placeholder="Tìm kiếm phim..."
+            class="admin-input h-10 w-full pl-10! pr-3">
         </div>
-        <select v-model="statusFilter" class="admin-input w-full sm:w-auto">
+
+        <select v-model="statusFilter" class="admin-input h-10 w-full min-w-0 px-3">
           <option value="" class="bg-[#131418]">Tất cả trạng thái</option>
           <option value="active" class="bg-[#131418]">Đang hiển thị</option>
           <option value="inactive" class="bg-[#131418]">Chưa hiển thị</option>
         </select>
-        <select v-model="sourceFilter" class="admin-input w-full sm:w-auto">
+
+        <select v-model="sourceFilter" class="admin-input h-10 w-full min-w-0 px-3">
           <option value="" class="bg-[#131418]">Tất cả nguồn</option>
           <option value="ophim" class="bg-[#131418]">OPhim</option>
           <option value="nguonc" class="bg-[#131418]">NguonC</option>
           <option value="kkphim" class="bg-[#131418]">KKPhim</option>
         </select>
-        <select v-model="typeFilter" class="admin-input w-full sm:w-auto">
+
+        <select v-model="typeFilter" class="admin-input h-10 w-full min-w-0 px-3">
           <option value="" class="bg-[#131418]">Tất cả loại</option>
           <option value="series" class="bg-[#131418]">Phim bộ</option>
           <option value="single" class="bg-[#131418]">Phim lẻ</option>
@@ -254,124 +267,190 @@ const syncSourceOptions = [
       </div>
 
       <div class="overflow-x-auto admin-scrollbar">
-        <table class="w-full">
+        <table class="w-full" style="border-collapse: collapse; border-spacing: 0;">
           <thead>
-            <tr class="border-b border-white/[0.06] text-left text-xs font-bold uppercase tracking-wide text-slate-400">
-              <th class="w-14 px-5 py-3">STT</th>
-              <th class="cursor-pointer select-none px-5 py-3 transition hover:text-white" @click="toggleSort('name')">
-                <div class="flex items-center gap-1">
+            <tr class="text-xs font-bold uppercase tracking-wide text-slate-400">
+              <th style="border-bottom: 3px solid #eeee;" class="px-4 py-3 text-center">STT</th>
+              <th style="border-bottom: 3px solid #eeee;"
+                class="cursor-pointer select-none px-4 py-3 text-center transition hover:text-[#333]"
+                @click="toggleSort('name')">
+                <div class="flex items-center justify-center gap-1">
                   Phim
-                  <AppIcon :name="sortIcon('name')" class="size-3" :class="sortBy === 'name' ? 'text-yellow-400' : 'opacity-50'" />
+                  <AppIcon :name="sortIcon('name')" class="size-3"
+                    :class="sortBy === 'name' ? 'text-yellow-400' : 'opacity-50'" />
                 </div>
               </th>
-              <th class="px-5 py-3">Nguồn</th>
-              <th class="px-5 py-3">Tập</th>
-              <th class="cursor-pointer select-none px-5 py-3 transition hover:text-white" @click="toggleSort('views')">
-                <div class="flex items-center gap-1">
+              <th style="border-bottom: 3px solid #eeee;" class="px-4 py-3 text-center">Nguồn</th>
+              <th style="border-bottom: 3px solid #eeee;" class="px-4 py-3 text-center">Tập</th>
+              <th style="border-bottom: 3px solid #eeee;"
+                class="cursor-pointer select-none px-4 py-3 text-center transition hover:text-white"
+                @click="toggleSort('views')">
+                <div class="flex items-center justify-center gap-1">
                   Lượt xem
-                  <AppIcon :name="sortIcon('views')" class="size-3" :class="sortBy === 'views' ? 'text-yellow-400' : 'opacity-50'" />
+                  <AppIcon :name="sortIcon('views')" class="size-3"
+                    :class="sortBy === 'views' ? 'text-yellow-400' : 'opacity-50'" />
                 </div>
               </th>
-              <th class="cursor-pointer select-none px-5 py-3 transition hover:text-white" @click="toggleSort('apiUpdatedAt')">
-                <div class="flex items-center gap-1">
+              <th style="border-bottom: 3px solid #eeee;"
+                class="cursor-pointer select-none px-4 py-3 text-center transition hover:text-white"
+                @click="toggleSort('apiUpdatedAt')">
+                <div class="flex items-center justify-center gap-1">
                   Cập nhật API
-                  <AppIcon :name="sortIcon('apiUpdatedAt')" class="size-3" :class="sortBy === 'apiUpdatedAt' ? 'text-yellow-400' : 'opacity-50'" />
+                  <AppIcon :name="sortIcon('apiUpdatedAt')" class="size-3"
+                    :class="sortBy === 'apiUpdatedAt' ? 'text-yellow-400' : 'opacity-50'" />
                 </div>
               </th>
-              <th class="cursor-pointer select-none px-5 py-3 transition hover:text-white" @click="toggleSort('active')">
-                <div class="flex items-center gap-1">
+              <th style="border-bottom: 3px solid #eeee;"
+                class="cursor-pointer select-none px-4 py-3 text-center transition hover:text-white"
+                @click="toggleSort('active')">
+                <div class="flex items-center justify-center gap-1">
                   Trạng thái
-                  <AppIcon :name="sortIcon('active')" class="size-3" :class="sortBy === 'active' ? 'text-yellow-400' : 'opacity-50'" />
+                  <AppIcon :name="sortIcon('active')" class="size-3"
+                    :class="sortBy === 'active' ? 'text-yellow-400' : 'opacity-50'" />
                 </div>
               </th>
-              <th class="px-5 py-3">Tuỳ chỉnh</th>
-              <th class="px-5 py-3 text-right">Thao tác</th>
+              <th style="border-bottom: 3px solid #eeee;" class="px-4 py-3 text-center">Tuỳ chỉnh</th>
+              <th style="border-bottom: 3px solid #eeee;" class="px-4 py-3 text-center">Hiển thị</th>
+              <th style="border-bottom: 3px solid #eeee;" class="px-4 py-3 text-center">Hành động</th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-white/[0.04]">
-            <tr v-for="movie in movies" :key="movie.id" class="transition hover:bg-white/[0.02]">
-              <td class="px-5 py-3.5 text-sm font-semibold text-slate-500">
+          <tbody class="divide-y divide-[#eeee]">
+            <tr v-for="movie in movies" :key="movie.id" class="transition hover:bg-white/2">
+              <td class="px-4 py-3.5 text-center text-sm font-semibold text-slate-500">
                 {{ (currentPage - 1) * 20 + movies.indexOf(movie) + 1 }}
               </td>
-              <td class="px-5 py-3.5">
+              <td class="px-4 py-3.5">
                 <div class="min-w-0">
                   <p class="truncate text-sm font-bold text-white">{{ movie.name }}</p>
                   <p class="truncate text-xs text-slate-400">{{ movie.originName || movie.slug }}</p>
                 </div>
               </td>
-              <td class="px-5 py-3.5">
-                <span class="admin-badge bg-blue-400/10 text-blue-400">{{ (movie.sources || []).length }} nguồn</span>
+              <td class="px-4 py-3.5 text-center">
+                <span class="admin-badge bg-blue-400/10 text-blue-400">
+                  {{ (movie.sources || []).length }} nguồn
+                </span>
               </td>
-              <td class="px-5 py-3.5 text-sm">
-                <span class="font-bold text-yellow-300"
-                  :title="(movie.sources || []).map((s: any) => `${s.source.toUpperCase()}: ${s.episode || s.episodeTotal || '?'}`).join('\n')">
+              <td class="px-4 py-3.5 text-center text-sm">
+                <span class="font-bold text-yellow-500" :title="(movie.sources || []).map(
+                  (s: any) =>
+                    `${s.source.toUpperCase()}: ${s.episode || s.episodeTotal || '?'}`
+                ).join('\n')">
                   {{ formatEpisode(movie) }}
                 </span>
               </td>
-              <td class="px-5 py-3.5 text-sm text-slate-300">{{ (movie.views || 0).toLocaleString() }}</td>
-              <td class="px-5 py-3.5 text-sm text-slate-300">
+              <td class="px-4 py-3.5 text-center text-sm text-slate-500">
+                {{ (movie.views || 0).toLocaleString() }}
+              </td>
+              <td class="px-4 py-3.5 text-center text-sm text-slate-500">
                 <span :title="formatDate(movie.apiUpdatedAt || movie.syncedAt)">
                   {{ formatRelativeTime(movie.apiUpdatedAt || movie.syncedAt) }}
                 </span>
               </td>
-              <td class="px-5 py-3.5">
-                <span class="admin-badge" :class="movie.active ? 'bg-emerald-400/10 text-emerald-400' : 'bg-slate-400/10 text-slate-400'">
+              <td class="px-4 py-3.5 text-center">
+                <span class="admin-badge" :class="movie.active
+                  ? 'bg-emerald-400/10 text-emerald-400'
+                  : 'bg-slate-400/10 text-slate-400'
+                  ">
                   {{ movie.active ? 'Hiển thị' : 'Ẩn' }}
                 </span>
               </td>
-              <td class="px-5 py-3.5">
-                <div class="flex flex-wrap items-center gap-1">
-                  <span v-if="movie.customContent" class="admin-badge bg-blue-400/10 text-blue-400">Mô tả</span>
-                  <span v-if="movie.customPoster" class="admin-badge bg-purple-400/10 text-purple-400">Poster</span>
-                  <span v-if="movie.customThumb" class="admin-badge bg-pink-400/10 text-pink-400">Thumb</span>
+              <td class="px-4 py-3.5">
+                <div class="flex flex-wrap items-center justify-center gap-1">
+                  <span v-if="movie.customContent" class="admin-badge bg-blue-400/10 text-blue-400">
+                    Mô tả
+                  </span>
+                  <span v-if="movie.customPoster" class="admin-badge bg-purple-400/10 text-purple-400">
+                    Poster
+                  </span>
+                  <span v-if="movie.customThumb" class="admin-badge bg-pink-400/10 text-pink-400">
+                    Thumb
+                  </span>
                   <span v-if="movie.customServers?.length" class="admin-badge bg-emerald-400/10 text-emerald-400">
-                    {{ movie.customServers.length }} server · {{ movie.customServers.reduce((t: number, s: any) => t + (s.episodes?.length || 0), 0) }} tập
+                    {{ movie.customServers.length }} server ·
+                    {{
+                      movie.customServers.reduce(
+                        (t: number, s: any) => t + (s.episodes?.length || 0),
+                        0
+                      )
+                    }} tập
+                  </span>
+                  <span v-if="
+                    !movie.customContent &&
+                    !movie.customPoster &&
+                    !movie.customThumb &&
+                    !movie.customServers?.length
+                  " class="text-xs text-slate-500">
+                    Mặc định
                   </span>
-                  <span v-if="!movie.customContent && !movie.customPoster && !movie.customThumb && !movie.customServers?.length" class="text-xs text-slate-500">Mặc định</span>
                 </div>
               </td>
-              <td class="px-5 py-3.5">
-                <div class="flex items-center justify-end gap-2">
-                  <NuxtLink :to="`/admin/phim/${movie.id}`"
-                    class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/[0.05] hover:text-white"
-                    title="Chỉnh sửa">
-                    <AppIcon name="pencil" class="size-4" />
-                  </NuxtLink>
+              <td class="px-4 py-3.5">
+                <div class="flex items-center justify-center">
                   <AdminToggle :model-value="movie.active"
                     @update:model-value="(val: boolean) => { movie.active = val; toggleActive(movie) }" />
                 </div>
               </td>
+              <td class="px-4 py-3.5 text-center">
+                <div class="relative inline-flex">
+                  <button type="button" class="grid size-9 place-items-center rounded-lg
+                     text-zinc-500 transition
+                     hover:bg-white/5 hover:text-zinc-300" title="Thao tác"
+                    @click="menuOpen = menuOpen === movie.id ? null : movie.id">
+                    <AppIcon name="ellipsis-vertical" class="size-5 stroke-[2.5]" />
+                  </button>
+                  <Transition name="dropdown-fade">
+                    <div v-if="menuOpen === movie.id" class="absolute right-0 top-full z-50 mt-1 min-w-40
+               rounded-lg border border-white/8
+               bg-[#131418] py-1 shadow-xl">
+                      <NuxtLink :to="`/admin/phim/${movie.id}`" class="flex w-full items-center gap-2 px-3 py-2
+                  text-sm text-slate-300 transition
+                  hover:bg-white/5 hover:text-white" @click="menuOpen = null">
+                        <AppIcon name="pencil" class="size-4" />
+                        Chỉnh sửa
+                      </NuxtLink>
+                      <button type="button" class="flex w-full items-center gap-2 px-3 py-2
+                  text-sm text-red-400 transition hover:bg-white/5" @click="
+                    menuOpen = null;
+                  selectedMovie = movie;
+                  deleteConfirmOpen = true
+                    ">
+                        <AppIcon name="trash" class="size-4" />
+                        Xoá phim
+                      </button>
+                    </div>
+                  </Transition>
+                </div>
+              </td>
             </tr>
             <tr v-if="!movies.length">
-              <td colspan="9" class="px-5 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 colspan="10" class="px-5 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/[0.06] p-4">
+      <div v-if="totalPages > 1" class="flex items-center justify-between border-t border-white/6 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-9 place-items-center rounded-lg border border-white/[0.08] text-slate-400 transition hover:bg-white/[0.05] hover:text-white disabled:opacity-30"
+            class="grid size-9 place-items-center rounded-lg border border-white/8 text-slate-400 transition hover:bg-white/5 hover:text-white disabled:opacity-30"
             :disabled="currentPage <= 1" @click="currentPage--">
             <AppIcon name="chevron-left" class="size-4" />
           </button>
           <template v-for="(page, index) in visiblePages" :key="index">
             <span v-if="page === 'ellipsis'" class="grid size-9 place-items-center text-sm text-slate-500">...</span>
             <button v-else type="button"
-              class="grid size-9 place-items-center rounded-lg border text-sm font-semibold transition"
-              :class="page === currentPage
+              class="grid size-9 place-items-center rounded-lg border text-sm font-semibold transition" :class="page === currentPage
                 ? 'border-yellow-400 bg-yellow-400 text-slate-950'
-                : 'border-white/[0.08] text-slate-400 hover:bg-white/[0.05] hover:text-white'"
-              @click="currentPage = page">
+                : 'border-white/8 text-slate-400 hover:bg-white/5 hover:text-white'" @click="currentPage = page">
               {{ page }}
             </button>
           </template>
           <button type="button"
-            class="grid size-9 place-items-center rounded-lg border border-white/[0.08] text-slate-400 transition hover:bg-white/[0.05] hover:text-white disabled:opacity-30"
+            class="grid size-9 place-items-center rounded-lg border border-white/8 text-slate-400 transition hover:bg-white/5 hover:text-white disabled:opacity-30"
             :disabled="currentPage >= totalPages" @click="currentPage++">
             <AppIcon name="chevron-right" class="size-4" />
           </button>
@@ -383,9 +462,9 @@ const syncSourceOptions = [
       <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-2xl border border-white/[0.08] bg-[#131418] p-6 shadow-2xl">
+          <div class="relative w-full max-w-md rounded-2xl border border-white/8 bg-[#131418] p-6 shadow-2xl">
             <button type="button"
-              class="absolute right-3 top-3 grid size-8 place-items-center rounded-full text-slate-400 transition hover:bg-white/[0.05] hover:text-white"
+              class="absolute right-3 top-3 grid size-8 place-items-center rounded-full text-slate-400 transition hover:bg-white/5 hover:text-white"
               @click="syncOpen = false">
               <AppIcon name="x" class="size-5" />
             </button>
@@ -397,7 +476,7 @@ const syncSourceOptions = [
 
             <div class="space-y-3">
               <label v-for="source in syncSourceOptions" :key="source.key"
-                class="flex cursor-pointer items-center justify-between rounded-xl border border-white/[0.06] bg-white/[0.03] p-4 transition hover:border-white/[0.1] hover:bg-white/[0.05]">
+                class="flex cursor-pointer items-center justify-between rounded-xl border border-white/6 bg-white/3 p-4 transition hover:border-white/10 hover:bg-white/5">
                 <div>
                   <p class="text-sm font-bold text-white">{{ source.label }}</p>
                   <p class="text-xs text-slate-400">{{ source.domain }}</p>
@@ -406,7 +485,7 @@ const syncSourceOptions = [
               </label>
             </div>
 
-            <div v-if="syncResult" class="mt-4 rounded-xl border border-white/[0.06] bg-white/[0.03] p-4">
+            <div v-if="syncResult" class="mt-4 rounded-xl border border-white/6 bg-white/3 p-4">
               <p class="text-sm font-bold text-white">Kết quả đồng bộ</p>
               <div class="mt-2 space-y-1 text-xs text-slate-400">
                 <p>Tổng phim lấy được: <span class="font-bold text-white">{{ syncResult.total }}</span></p>
@@ -439,18 +518,19 @@ const syncSourceOptions = [
       <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-2xl border border-white/[0.08] bg-[#131418] p-6 shadow-2xl">
+          <div class="relative w-full max-w-sm rounded-2xl border border-white/8 bg-[#131418] p-6 shadow-2xl">
             <div class="mb-4 grid size-12 place-items-center rounded-full bg-red-500/10">
               <AppIcon name="trash" class="size-6 text-red-400" />
             </div>
             <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.
+              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="admin-btn-secondary" @click="deleteConfirmOpen = false">Huỷ</button>
-              <button type="button"
-                class="admin-btn bg-red-500 text-white hover:bg-red-400 disabled:opacity-50"
+              <button type="button" class="admin-btn bg-red-500 text-white hover:bg-red-400 disabled:opacity-50"
                 :disabled="deleting" @click="handleDeleteAll">
                 <AppIcon name="trash" class="size-4" />
                 {{ deleting ? 'Đang xoá...' : 'Xoá tất cả' }}
diff --git a/app/pages/admin/thanh-vien.vue b/app/pages/admin/thanh-vien.vue
index a9ef2d0..21e03a7 100644
--- a/app/pages/admin/thanh-vien.vue
+++ b/app/pages/admin/thanh-vien.vue
@@ -65,10 +65,12 @@ const members = computed(() => data.value?.items || [])
 
     <div class="admin-card overflow-hidden">
       <div class="flex items-center gap-3 border-b border-white/6 p-4">
-        <div class="relative flex-1">
-          <AppIcon name="search" class="absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
-          <input v-model="searchInput" type="search" placeholder="Tìm kiếm thành viên..."
-            class="admin-input pl-10">
+        <div class="relative flex-1 min-w-0">
+          <AppIcon name="search"
+            class="pointer-events-none absolute left-3.5 top-1/2 z-10 size-4 -translate-y-1/2 text-slate-400" />
+
+          <input v-model="searchInput" type="text" placeholder="Tìm kiếm thành viên..."
+            class="admin-input h-10 w-full pl-10! pr-3">
         </div>
       </div>
 
@@ -89,22 +91,23 @@ const members = computed(() => data.value?.items || [])
               <td class="px-5 py-3.5 text-sm font-semibold text-slate-500">{{ members.indexOf(member) + 1 }}</td>
               <td class="px-5 py-3.5">
                 <div class="flex items-center gap-3">
-                  <div class="grid size-9 place-items-center rounded-full bg-linear-to-br from-slate-700 to-slate-800 text-sm font-bold text-slate-300">
+                  <div
+                    class="grid size-9 place-items-center rounded-full bg-linear-to-br from-slate-700 to-slate-800 text-sm font-bold text-slate-300">
                     {{ (member.name || member.email || '?').charAt(0).toUpperCase() }}
                   </div>
                   <div class="min-w-0">
-                    <p class="truncate text-sm font-bold text-white">{{ member.name || 'Chưa có tên' }}</p>
+                    <p class="truncate text-sm font-bold text-slate-900">{{ member.name || 'Chưa có tên' }}</p>
                     <p class="truncate text-xs text-slate-400">{{ member.email }}</p>
                   </div>
                 </div>
               </td>
               <td class="px-5 py-3.5">
                 <select :value="member.role"
-                  class="h-8 rounded-full border border-white/8 bg-white/3 px-3 text-xs font-bold text-white outline-none transition hover:bg-white/5 focus:border-yellow-400/50"
+                  class="h-8 rounded-full border border-slate-200 bg-slate-100 px-3 text-xs font-bold text-slate-900 outline-none transition hover:bg-slate-100/60 focus:border-sky-500"
                   @change="changeRole(member, ($event.target as HTMLSelectElement).value)">
-                  <option value="user" class="bg-[#131418]">User</option>
-                  <option value="moderator" class="bg-[#131418]">Moderator</option>
-                  <option value="admin" class="bg-[#131418]">Admin</option>
+                  <option value="user" class="bg-white">User</option>
+                  <option value="moderator" class="bg-white">Moderator</option>
+                  <option value="admin" class="bg-white">Admin</option>
                 </select>
               </td>
               <td class="px-5 py-3.5">