From c79955f2a391498df60d89d8f71e5966212fca8f Mon Sep 17 00:00:00 2001
From: ngthanhvu <nguyenthanhvudvfb@gmail.com>
Date: Thu, 23 Jul 2026 04:14:19 -0400
Subject: [PATCH] Refactor code structure for improved readability and
 maintainability

---
 app/pages/phim/[slug].vue |  527 +++++++------
 app/pages/xem/[slug].vue  | 1555 ++++++++++---------------------------
 2 files changed, 723 insertions(+), 1359 deletions(-)

diff --git a/app/pages/phim/[slug].vue b/app/pages/phim/[slug].vue
index 406fb57..0fc5de6 100644
--- a/app/pages/phim/[slug].vue
+++ b/app/pages/phim/[slug].vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChevronDown, Heart, Play, Plus, Share2, Star } from 'lucide-vue-next'
+import { ChevronDown, Heart, MessageCircle, Play, Plus, Server, Share2, Star, Video } from 'lucide-vue-next'
 
 const route = useRoute()
 const requestedSource = computed(() => String(route.query.source || 'nguonc'))
@@ -51,10 +51,12 @@ const firstWatchLink = computed(() => ({
     ep: 1,
   },
 }))
-const episodeCount = computed(() => servers.value.reduce((total: number, server: any) => total + (server.episodes?.length || 0), 0))
+const episodeCount = computed(() => {
+  const total = servers.value.reduce((t: number, s: any) => t + (s.episodes?.length || 0), 0)
+  return total || undefined
+})
 const libraryItem = computed(() => {
   if (!movie.value) return null
-
   return {
     source: activeSource.value,
     slug: activeSourceSlug.value,
@@ -78,15 +80,16 @@ function episodeLink(index: number) {
   }
 }
 
-function sourceLink(source: string) {
-  const ref = sourceOptions.value.find((item: any) => item.value === source)
-  return {
-    path: `/phim/${ref?.slug || route.params.slug}`,
-    query: {
-      source,
-      srcs: requestedSources.value || undefined,
-    },
+function getEpisodeDisplay() {
+  const ep = movie.value?.episode
+  const total = movie.value?.episodeTotal
+  if (!ep) return undefined
+  const totalNum = total ? total.replace(/[^0-9]/g, '') : ''
+  const epNum = ep.replace(/[^0-9]/g, '')
+  if (epNum && totalNum && epNum !== totalNum) {
+    return `Tập ${epNum}/${totalNum}`
   }
+  return ep
 }
 
 function serverLabel(server: any, index: number) {
@@ -117,7 +120,6 @@ async function refreshFavoriteState() {
 
 async function toggleFavorite() {
   if (!libraryItem.value || actionBusy.value) return
-
   actionBusy.value = true
   if (isFavoriteMovie.value) {
     await removeFavorite(libraryItem.value)
@@ -133,7 +135,6 @@ async function toggleFavorite() {
 
 async function addToWatchLater() {
   if (!libraryItem.value || actionBusy.value) return
-
   actionBusy.value = true
   await saveWatchLater(libraryItem.value)
   actionBusy.value = false
@@ -142,20 +143,13 @@ async function addToWatchLater() {
 
 async function shareMovie() {
   if (!import.meta.client || !movie.value) return
-
   const shareUrl = window.location.href
   const shareTitle = `${movie.value.name} - CineK`
-
   try {
     if (navigator.share) {
-      await navigator.share({
-        title: shareTitle,
-        text: movie.value.originName || movie.value.name,
-        url: shareUrl,
-      })
+      await navigator.share({ title: shareTitle, text: movie.value.originName || movie.value.name, url: shareUrl })
       return
     }
-
     await navigator.clipboard.writeText(shareUrl)
     flashActionMessage('Đã copy link phim.')
   } catch {
@@ -171,276 +165,351 @@ onMounted(async () => {
   }).catch(() => {})
 })
 
-watch(requestedSource, () => {
-  selectedServer.value = 0
-})
-
-watch(requestedSources, () => {
-  selectedServer.value = 0
-})
-
-watch(libraryItem, () => {
-  refreshFavoriteState()
-})
+watch(requestedSource, () => { selectedServer.value = 0 })
+watch(requestedSources, () => { selectedServer.value = 0 })
+watch(libraryItem, () => { refreshFavoriteState() })
 
 useHead(() => ({
   title: movie.value ? `${movie.value.name} - Xem phim online - CineK` : 'Đang tải phim - CineK',
   meta: [
-    {
-      name: 'description',
-      content: movie.value
-        ? `Xem thông tin phim ${movie.value.name}${movie.value.originName ? ` (${movie.value.originName})` : ''}, danh sách tập, diễn viên và các server xem phim tại CineK.`
-        : 'Xem phim Hàn Quốc online tại CineK với Vietsub, thuyết minh và lồng tiếng.',
-    },
-    {
-      property: 'og:title',
-      content: movie.value ? `${movie.value.name} - CineK` : 'CineK - Xem phim Hàn Quốc online',
-    },
-    {
-      property: 'og:description',
-      content: movie.value?.content || 'Xem thông tin phim, trailer, diễn viên và danh sách tập mới trên CineK.',
-    },
-    {
-      property: 'og:image',
-      content: movie.value?.poster || movie.value?.thumb || '/icon.png',
-    },
+    { name: 'description', content: movie.value ? `Xem ${movie.value.name} online` : 'Xem phim Hàn Quốc online' },
+    { property: 'og:title', content: movie.value ? `${movie.value.name} - CineK` : 'CineK' },
+    { property: 'og:description', content: movie.value?.content || '' },
+    { property: 'og:image', content: movie.value?.poster || movie.value?.thumb || '/icon.png' },
   ],
 }))
 </script>
 
 <template>
-  <main class="min-h-screen bg-[#08090d] text-white">
+  <main class="min-h-screen bg-[#0f111a] text-white">
     <AppHeader />
 
-    <div v-if="pending"
-      class="mx-auto grid min-h-screen max-w-390 gap-6 px-4 pt-36 sm:px-6 lg:grid-cols-[22rem_minmax(0,1fr)] lg:px-8 lg:pt-40 xl:px-10">
-      <div class="h-114 animate-pulse rounded-md bg-white/10" />
-      <div class="h-80 animate-pulse rounded-md bg-white/10" />
-    </div>
-
-    <div v-else-if="error || !movie" class="mx-auto flex min-h-screen max-w-4xl items-center px-4 pt-36 lg:pt-24">
-      <div>
-        <h1 class="text-3xl font-black">Không mở được phim</h1>
-        <p class="mt-3 text-slate-300">Phim có thể đang được cập nhật hoặc hiện chưa có tập xem.</p>
+    <!-- Loading -->
+    <div v-if="pending" class="mx-auto max-w-[1400px] px-4 pt-36 sm:px-6 lg:px-8 xl:px-10">
+      <div class="grid gap-6 lg:grid-cols-[22rem_minmax(0,1fr)]">
+        <div class="h-[28rem] animate-pulse rounded-xl bg-white/10" />
+        <div class="space-y-4">
+          <div class="h-10 w-3/4 animate-pulse rounded bg-white/10" />
+          <div class="h-6 w-1/2 animate-pulse rounded bg-white/10" />
+          <div class="h-40 animate-pulse rounded bg-white/10" />
+        </div>
       </div>
     </div>
 
+    <!-- Error -->
+    <div v-else-if="error || !movie" class="mx-auto flex min-h-screen max-w-4xl items-center px-4 pt-36">
+      <div>
+        <h1 class="text-3xl font-black">Không mở được phim</h1>
+        <p class="mt-3 text-slate-300">Phim có thể đang được cập nhật hoặc chưa có tập xem.</p>
+      </div>
+    </div>
+
+    <!-- Movie Detail -->
     <template v-else>
-      <section class="relative overflow-hidden pt-20 lg:pt-16">
-        <div class="absolute inset-x-0 top-0 h-96 overflow-hidden sm:h-112">
-          <img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover opacity-45">
-          <div class="absolute inset-0 bg-linear-to-b from-slate-950/25 via-[#08090d]/75 to-[#08090d]" />
-          <div class="absolute inset-0 bg-linear-to-r from-[#08090d] via-transparent to-[#08090d]" />
-        </div>
+      <!-- Hero Backdrop -->
+      <section class="relative h-[210px] md:h-[600px] lg:h-[70vh] xl:max-h-[800px] overflow-hidden bg-[#0f111a]">
+        <img :src="movie.poster || movie.thumb" :alt="movie.name"
+          class="absolute inset-0 h-full w-full object-cover object-center scale-105 opacity-70 md:opacity-80">
+        <div class="absolute inset-0 hidden md:block"
+          style="mask-image:radial-gradient(ellipse at center, transparent 50%, black 100%)" />
+        <img :src="movie.poster || movie.thumb" :alt="movie.name"
+          class="absolute inset-0 h-full w-full object-cover object-center blur-sm md:blur-md scale-110 opacity-90 md:hidden">
+        <div class="absolute inset-0 pointer-events-none opacity-20 md:opacity-30"
+          style="background-image:radial-gradient(rgba(250,204,21,0.3) 0.5px, transparent 1px);background-size:2px 2px" />
+        <div class="absolute bottom-0 inset-x-0 h-[80%] pointer-events-none md:hidden"
+          style="background:linear-gradient(to top, #0f111a, transparent)" />
+        <div class="absolute inset-0 pointer-events-none hidden md:block"
+          style="background:linear-gradient(to top, #0f111a 0%, transparent 40%)" />
+      </section>
 
-        <div class="relative mx-auto max-w-390 px-3 pb-8 pt-40 sm:px-6 sm:pb-12 sm:pt-52 lg:px-8 lg:pt-56 xl:px-10">
-          <div class="lg:grid lg:grid-cols-[22rem_minmax(0,1fr)] lg:gap-6">
-            <aside class="mb-3 flex flex-col items-center text-center lg:mb-6 lg:items-start lg:text-left">
+      <!-- Content overlaps hero -->
+      <div class="max-w-[1400px] mx-auto px-4 -mt-24 md:-mt-48 lg:-mt-64 relative z-10 mb-20">
+        <div class="flex flex-col md:flex-row gap-6 md:gap-10 items-start">
+          <!-- Poster Column -->
+          <div class="shrink-0 w-40 md:w-56 lg:w-64 max-w-[280px] mx-auto md:mx-0 flex flex-col gap-8">
+            <div class="relative rounded-xl overflow-hidden shadow-2xl shadow-[#0f111a]/50 ring-1 ring-white/10 bg-[#16161e] w-full aspect-[2/3]">
               <img :src="movie.poster || movie.thumb" :alt="movie.name"
-                class="mx-auto aspect-2/3 w-29 rounded-md object-cover shadow-xl shadow-black/40 sm:w-52 lg:w-full">
+                class="w-full h-full object-cover relative z-10">
+            </div>
 
-              <h1 class="mt-4 text-[1.35rem] font-black leading-tight sm:text-2xl lg:mt-5">{{ movie.name }}</h1>
-              <p v-if="movie.originName" class="mt-1 text-sm font-bold text-slate-100 sm:text-yellow-200">{{
-                movie.originName }}</p>
+            <!-- Synopsis (desktop) -->
+            <div class="hidden md:block">
+              <h3 class="text-[16px] font-semibold text-white mb-3">Nội dung phim</h3>
+              <p class="text-sm text-slate-300 leading-relaxed" :class="contentExpanded ? '' : 'line-clamp-4'">
+                {{ movie.content || 'Đang cập nhật nội dung phim.' }}
+              </p>
+              <button v-if="movie.content" type="button"
+                class="mt-2 text-xs font-semibold text-yellow-300 transition hover:text-yellow-200"
+                @click="contentExpanded = !contentExpanded">
+                {{ contentExpanded ? 'Thu gọn' : 'Xem thêm' }}
+              </button>
+            </div>
+          </div>
 
-              <div class="mt-3 hidden flex-wrap justify-center gap-2 text-xs font-black sm:flex lg:justify-start">
-                <span v-if="movie.quality" class="rounded bg-white/12 px-2 py-1">{{ movie.quality }}</span>
-                <span v-if="movie.episode" class="rounded bg-white/12 px-2 py-1">{{ movie.episode }}</span>
-                <span v-if="movie.time" class="rounded bg-white/12 px-2 py-1">{{ movie.time }}</span>
-                <span v-if="movie.rating" class="inline-flex items-center gap-1 rounded bg-white/12 px-2 py-1">
-                  <Star class="size-3 fill-yellow-300 text-yellow-300" />
-                  {{ movie.rating.toFixed(1) }}
-                </span>
+          <!-- Info Column -->
+          <div class="flex-1 md:pt-12 min-w-0">
+            <!-- Title -->
+            <h1 class="text-[22px] md:text-3xl font-bold text-white mb-1 text-center md:text-left leading-tight">
+              {{ movie.name }}
+            </h1>
+            <p v-if="movie.originName" class="text-[13px] md:text-sm text-slate-400 mb-4 text-center md:text-left">
+              {{ movie.originName }}
+            </p>
+
+            <!-- Badges -->
+            <div class="hidden md:flex flex-wrap items-center gap-2 text-white/90 mb-4 text-[10px] md:text-xs">
+              <span v-if="movie.quality"
+                class="inline-flex items-center justify-center rounded-[4px] font-black leading-none tracking-normal h-[22px] px-2 text-[11px]"
+                style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%);color:#141414">
+                {{ movie.quality }}
+              </span>
+              <span v-if="movie.lang" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
+                {{ movie.lang }}
+              </span>
+              <span v-if="getEpisodeDisplay()" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
+                {{ getEpisodeDisplay() }}
+              </span>
+              <span v-if="movie.rating"
+                class="inline-flex items-center rounded overflow-hidden border border-solid border-[rgba(1,180,228,0.5)]">
+                <span class="bg-[#01B4E4] text-white px-1.5 py-0.5 font-bold">TMDb</span>
+                <span class="bg-[rgba(1,180,228,0.1)] text-white px-1.5 py-0.5">{{ movie.rating.toFixed(1) }}</span>
+              </span>
+            </div>
+
+            <!-- Action Buttons -->
+            <div class="flex flex-col md:flex-row md:items-center gap-4 mb-6">
+              <NuxtLink :to="firstWatchLink"
+                class="inline-flex justify-center items-center gap-2 md:gap-2.5 px-6 md:px-8 py-3.5 md:py-3 text-[#0f1115] text-[15px] md:text-base font-bold rounded-full transition-all hover:scale-105 shadow-lg shadow-[#F5C518]/20 hover:shadow-[#F5C518]/40"
+                style="background:linear-gradient(135deg, #F5C518 0%, #FFD700 50%, #FFC107 100%)">
+                <Play class="w-5 h-5 md:w-6 md:h-6 shrink-0 fill-current" />
+                Xem ngay
+              </NuxtLink>
+
+              <div class="hidden md:flex items-center">
+                <div class="w-px h-8 bg-white/10 mx-1" />
+                <button type="button"
+                  class="flex flex-col items-center justify-center gap-1 transition-all hover:-translate-y-0.5 active:scale-95 px-3"
+                  :class="isFavoriteMovie ? 'text-yellow-300' : 'text-white/90'"
+                  :disabled="actionBusy" @click="toggleFavorite">
+                  <Heart class="size-5" :class="isFavoriteMovie ? 'fill-current' : ''" />
+                  <span class="text-[11px]">{{ isFavoriteMovie ? 'Đã thích' : 'Yêu thích' }}</span>
+                </button>
+                <div class="w-px h-8 bg-white/10 mx-1" />
+                <button type="button"
+                  class="flex flex-col items-center justify-center gap-1 transition-all hover:-translate-y-0.5 active:scale-95 px-3 text-white/90"
+                  :disabled="actionBusy" @click="addToWatchLater">
+                  <Plus class="size-5" />
+                  <span class="text-[11px]">Thêm vào</span>
+                </button>
+                <div class="w-px h-8 bg-white/10 mx-1" />
+                <button type="button"
+                  class="flex flex-col items-center justify-center gap-1 transition-all hover:-translate-y-0.5 active:scale-95 px-3 text-white/90"
+                  @click="shareMovie">
+                  <Share2 class="size-5" />
+                  <span class="text-[11px]">Chia sẻ</span>
+                </button>
               </div>
+            </div>
 
-              <div v-if="movie.categories?.length" class="mt-3 hidden sm:block lg:mt-4">
-                <span class="rounded bg-white/12 px-3 py-1 text-xs font-bold">{{ movie.categories[0] }}</span>
-              </div>
-
-              <div class="mt-4 hidden space-y-3 text-sm leading-6 text-slate-300 sm:block lg:mt-5">
-                <div v-if="movie.content">
-                  <span class="block font-black text-white">Giới thiệu:</span>
-                  <p class="mt-1" :class="contentExpanded ? '' : 'line-clamp-3'">{{ movie.content }}</p>
-                  <button type="button"
-                    class="mt-1 inline-flex items-center gap-1 text-xs font-semibold text-yellow-300 transition hover:text-yellow-200"
-                    @click="contentExpanded = !contentExpanded">
-                    {{ contentExpanded ? 'Thu gọn' : 'Xem thêm' }}
-                    <ChevronDown class="size-3 transition" :class="contentExpanded ? 'rotate-180' : ''" />
-                  </button>
-                </div>
-                <p><span class="font-black text-white">Số tập:</span> {{
-                  episodeCount || movie.episode || 'Đang cập nhật'
-                }}</p>
-                <p v-if="movie.countries?.length"><span class="font-black text-white">Quốc gia:</span> {{
-                  movie.countries.join(', ') }}</p>
-                <p v-if="actorSummary"><span class="font-black text-white">Diễn viên:</span> {{
-                  actorSummary }}</p>
-              </div>
-            </aside>
-
-            <section
-              class="mt-0 rounded-none border-y border-white/10 bg-transparent px-0 pb-0 pt-3 shadow-none sm:mt-0 sm:rounded-md sm:border sm:bg-[#15161b]/95 sm:p-5 sm:shadow-2xl sm:shadow-black/40 lg:p-5">
+            <!-- Mobile action buttons -->
+            <div class="flex md:hidden gap-5 justify-center pt-2 mb-4">
               <button type="button"
-                class="mx-auto flex items-center gap-1 pb-3 text-sm font-bold text-yellow-200 sm:hidden"
-                :aria-expanded="movieInfoOpen" @click="movieInfoOpen = !movieInfoOpen">
+                class="flex flex-col items-center justify-center gap-1 transition-all active:scale-95"
+                :class="isFavoriteMovie ? 'text-yellow-300' : 'text-white/90'"
+                :disabled="actionBusy" @click="toggleFavorite">
+                <Heart class="size-6" :class="isFavoriteMovie ? 'fill-current' : ''" />
+                <span class="text-[11px]">Yêu thích</span>
+              </button>
+              <button type="button"
+                class="flex flex-col items-center justify-center gap-1 transition-all active:scale-95 text-white/90"
+                :disabled="actionBusy" @click="addToWatchLater">
+                <Plus class="size-6" />
+                <span class="text-[11px]">Thêm vào</span>
+              </button>
+              <button type="button"
+                class="flex flex-col items-center justify-center gap-1 transition-all active:scale-95 text-white/90"
+                @click="shareMovie">
+                <Share2 class="size-6" />
+                <span class="text-[11px]">Chia sẻ</span>
+              </button>
+            </div>
+
+            <p v-if="actionMessage" class="mb-4 text-center text-xs font-bold text-yellow-200">
+              {{ actionMessage }}
+            </p>
+
+            <!-- Info Table (Desktop) -->
+            <div class="hidden md:grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm mb-5">
+              <div class="flex items-start gap-2">
+                <span class="text-slate-500 shrink-0 w-20">Trạng thái:</span>
+                <span class="text-slate-200">{{ getEpisodeDisplay() || movie.episode || 'Đang cập nhật' }}</span>
+              </div>
+              <div class="flex items-start gap-2">
+                <span class="text-slate-500 shrink-0 w-20">Loại:</span>
+                <span class="text-slate-200">{{ movie.type === 'single' ? 'Phim lẻ' : movie.type === 'series' ? 'Phim bộ' : movie.type || 'Đang cập nhật' }}</span>
+              </div>
+              <div class="flex items-start gap-2">
+                <span class="text-slate-500 shrink-0 w-20">Năm:</span>
+                <span class="text-slate-200">{{ movie.year || 'Đang cập nhật' }}</span>
+              </div>
+              <div class="flex items-start gap-2">
+                <span class="text-slate-500 shrink-0 w-20">Thể loại:</span>
+                <span class="text-slate-200">{{ movie.categories?.join(', ') || 'Đang cập nhật' }}</span>
+              </div>
+              <div class="flex items-start gap-2">
+                <span class="text-slate-500 shrink-0 w-20">Quốc gia:</span>
+                <span class="text-slate-200">{{ movie.countries?.join(', ') || 'Đang cập nhật' }}</span>
+              </div>
+              <div v-if="actors.length" class="flex items-start gap-2">
+                <span class="text-slate-500 shrink-0 w-20">Diễn viên:</span>
+                <span class="text-slate-200">{{ actorSummary }}</span>
+              </div>
+            </div>
+
+            <!-- Mobile collapsible info -->
+            <div class="md:hidden mb-4">
+              <button type="button"
+                class="w-full flex items-center justify-between text-sm font-semibold text-yellow-200 py-2"
+                @click="movieInfoOpen = !movieInfoOpen">
                 <span>Thông tin phim</span>
                 <ChevronDown class="size-4 transition" :class="movieInfoOpen ? 'rotate-180' : ''" />
               </button>
+              <div v-if="movieInfoOpen" class="space-y-2 text-sm text-slate-300">
+                <div class="flex flex-wrap gap-2 text-[10px] mb-3">
+                  <span v-if="movie.quality"
+                    class="inline-flex items-center justify-center rounded-[4px] font-black h-[22px] px-2 text-[11px]"
+                    style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%);color:#141414">
+                    {{ movie.quality }}
+                  </span>
+                  <span v-if="movie.lang" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
+                    {{ movie.lang }}
+                  </span>
+                  <span v-if="getEpisodeDisplay()" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
+                    {{ getEpisodeDisplay() }}
+                  </span>
+                  <span v-if="movie.rating"
+                    class="inline-flex items-center rounded overflow-hidden border border-solid border-[rgba(1,180,228,0.5)]">
+                    <span class="bg-[#01B4E4] text-white px-1.5 py-0.5 font-bold">TMDb</span>
+                    <span class="bg-[rgba(1,180,228,0.1)] text-white px-1.5 py-0.5">{{ movie.rating.toFixed(1) }}</span>
+                  </span>
+                </div>
 
-              <div v-if="movieInfoOpen"
-                class="mb-4 space-y-3 border-b border-white/10 pb-4 text-sm leading-6 text-slate-300 sm:hidden">
-                <div v-if="movie.content">
-                  <span class="block font-black text-white">Giới thiệu:</span>
-                  <p class="mt-1" :class="contentExpanded ? '' : 'line-clamp-3'">{{ movie.content }}</p>
-                  <button type="button"
-                    class="mt-1 inline-flex items-center gap-1 text-xs font-semibold text-yellow-300 transition hover:text-yellow-200"
+                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Trạng thái:</span><span>{{ getEpisodeDisplay() || movie.episode || 'Đang cập nhật' }}</span></div>
+                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Loại:</span><span>{{ movie.type === 'single' ? 'Phim lẻ' : movie.type === 'series' ? 'Phim bộ' : movie.type || 'Đang cập nhật' }}</span></div>
+                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Năm:</span><span>{{ movie.year || 'Đang cập nhật' }}</span></div>
+                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Thể loại:</span><span>{{ movie.categories?.join(', ') || 'Đang cập nhật' }}</span></div>
+                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Quốc gia:</span><span>{{ movie.countries?.join(', ') || 'Đang cập nhật' }}</span></div>
+
+                <div v-if="movie.content" class="pt-3 border-t border-white/10">
+                  <h3 class="text-[14px] font-semibold text-white mb-2">Nội dung phim</h3>
+                  <p class="text-sm text-slate-300 leading-relaxed" :class="contentExpanded ? '' : 'line-clamp-3'">
+                    {{ movie.content }}
+                  </p>
+                  <button type="button" class="mt-1 text-xs font-semibold text-yellow-300"
                     @click="contentExpanded = !contentExpanded">
                     {{ contentExpanded ? 'Thu gọn' : 'Xem thêm' }}
-                    <ChevronDown class="size-3 transition" :class="contentExpanded ? 'rotate-180' : ''" />
                   </button>
                 </div>
-                <p><span class="font-black text-white">Số tập:</span> {{
-                  episodeCount || movie.episode || 'Đang cập nhật'
-                }}</p>
-                <p v-if="movie.countries?.length"><span class="font-black text-white">Quốc gia:</span> {{
-                  movie.countries.join(', ') }}</p>
-                <p v-if="actorSummary"><span class="font-black text-white">Diễn viên:</span> {{
-                  actorSummary }}</p>
+              </div>
+            </div>
+
+            <!-- Tabs: Episodes / Actors (inside info column) -->
+            <div class="mt-6 border-t border-white/10 pt-6">
+              <div class="flex items-center gap-6 border-b border-white/10 mb-6 overflow-x-auto">
+                <button type="button"
+                  class="pb-3 text-[13px] md:text-[15px] font-semibold transition-colors relative whitespace-nowrap"
+                  :class="activeTab === 'episodes' ? 'text-[#F5C518]' : 'text-slate-400 hover:text-white'"
+                  @click="activeTab = 'episodes'">
+                  Tập phim
+                  <span v-if="activeTab === 'episodes'" class="absolute bottom-0 left-0 w-full h-[2px] bg-[#F5C518] rounded-t-md" />
+                </button>
+                <button type="button"
+                  class="pb-3 text-[13px] md:text-[15px] font-semibold transition-colors relative whitespace-nowrap"
+                  :class="activeTab === 'actors' ? 'text-[#F5C518]' : 'text-slate-400 hover:text-white'"
+                  @click="activeTab = 'actors'">
+                  Diễn viên
+                  <span v-if="activeTab === 'actors'" class="absolute bottom-0 left-0 w-full h-[2px] bg-[#F5C518] rounded-t-md" />
+                </button>
               </div>
 
-              <div class="hidden">
-                <p class="text-sm font-black text-white">Nguồn xem</p>
-                <div class="flex gap-2 overflow-x-auto pb-1 sm:pb-0">
-                  <NuxtLink v-for="source in sourceOptions" :key="source.value" :to="sourceLink(source.value)"
-                    class="shrink-0 rounded-md px-4 py-2 text-sm font-black transition"
-                    :class="activeSource === source.value ? 'bg-yellow-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
-                    {{ source.label }}
-                  </NuxtLink>
-                </div>
-              </div>
-
-              <div
-                class="flex flex-col gap-4 border-b border-white/10 py-4 sm:flex-row sm:items-center sm:justify-between sm:py-5">
-                <div class="flex flex-wrap justify-center gap-3 sm:justify-start">
-                  <NuxtLink :to="firstWatchLink"
-                    class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-full bg-linear-to-r from-yellow-400 to-yellow-300 px-7 text-sm font-black text-slate-950 transition hover:from-yellow-300 hover:to-white sm:w-auto">
-                    <Play class="size-4 fill-current" />
-                    Xem Ngay
-                  </NuxtLink>
-                </div>
-
-                <div class="flex flex-col gap-3 sm:items-end">
-                  <div class="hidden">
-                    <span class="text-xs font-black text-slate-300">Nguồn xem</span>
-                    <NuxtLink v-for="source in sourceOptions" :key="source.value" :to="sourceLink(source.value)"
-                      class="shrink-0 rounded-md px-4 py-2 text-sm font-black transition"
-                      :class="activeSource === source.value ? 'bg-yellow-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
-                      {{ source.label }}
-                    </NuxtLink>
+              <!-- Episodes Tab -->
+              <div v-if="activeTab === 'episodes'">
+                <!-- Server Selector -->
+                <div v-if="servers.length > 1" class="flex flex-wrap items-center gap-x-3 gap-y-2 mb-4">
+                  <div class="flex items-center gap-1.5 text-[13px] font-semibold text-white/50 mr-1">
+                    <Server class="size-4" />
+                    Máy chủ:
                   </div>
-
-                  <div class="flex items-center justify-between gap-3 px-8 sm:justify-center sm:px-0">
-                  <button type="button"
-                    class="flex cursor-pointer flex-col items-center gap-1 text-xs font-bold transition hover:text-yellow-200 disabled:cursor-not-allowed disabled:opacity-70"
-                    :class="isFavoriteMovie ? 'text-yellow-300' : 'text-white'" aria-label="Yêu thích"
-                    :disabled="actionBusy" @click="toggleFavorite">
-                    <Heart class="size-5" :class="isFavoriteMovie ? 'fill-current' : ''" />
-                    <span>{{ isFavoriteMovie ? 'Đã thích' : 'Yêu thích' }}</span>
-                  </button>
-                  <button type="button"
-                    class="flex cursor-pointer flex-col items-center gap-1 text-xs font-bold text-white transition hover:text-yellow-200 disabled:cursor-not-allowed disabled:opacity-70"
-                    aria-label="Thêm vào" :disabled="actionBusy" @click="addToWatchLater">
-                    <Plus class="size-5" />
-                    <span>Thêm vào</span>
-                  </button>
-                  <button type="button"
-                    class="flex cursor-pointer flex-col items-center gap-1 text-xs font-bold text-white transition hover:text-yellow-200"
-                    aria-label="Chia sẻ" @click="shareMovie">
-                    <Share2 class="size-5" />
-                    <span>Chia sẻ</span>
-                  </button>
-                  <div v-if="movie.rating"
-                    class="inline-flex items-center gap-1.5 rounded-full bg-yellow-400 px-3 py-1.5 text-sm font-black text-slate-950">
-                    <Star class="size-3.5 fill-current" />
-                    {{ movie.rating.toFixed(1) }}
-                  </div>
-                </div>
-                <p v-if="actionMessage"
-                  class="mt-2 text-center text-xs font-bold text-yellow-200 sm:text-right">
-                  {{ actionMessage }}
-                </p>
-              </div>
-              </div>
-
-              <div
-                class="mt-3 flex justify-between gap-6 border-b border-white/10 px-6 text-sm font-black sm:mt-0 sm:justify-center sm:px-0 sm:pt-5">
-                <button type="button" class="px-5 pb-3 sm:px-0"
-                  :class="activeTab === 'episodes' ? 'border-b-2 border-yellow-300 text-yellow-200' : 'text-slate-300'"
-                  @click="activeTab = 'episodes'">Tập phim</button>
-                <button type="button" class="px-5 pb-3 sm:px-0"
-                  :class="activeTab === 'actors' ? 'border-b-2 border-yellow-300 text-yellow-200' : 'text-slate-300'"
-                  @click="activeTab = 'actors'">Diễn viên</button>
-              </div>
-
-              <div v-if="activeTab === 'episodes'" class="px-0 pt-6 sm:px-0 sm:pt-5">
-                <h2 class="text-[1.08rem] font-black sm:text-xl">Danh sách tập</h2>
-
-                <div v-if="servers.length > 1" class="mt-3 flex gap-2 overflow-x-auto pb-2">
                   <button v-for="(server, index) in servers" :key="server.name" type="button"
-                    class="shrink-0 rounded px-4 py-2 text-sm font-black"
-                    :class="selectedServer === index ? 'bg-yellow-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
+                    class="group flex items-center gap-1.5 text-[13px] transition-colors rounded-md px-3.5 py-2 border font-medium"
+                    :class="selectedServer === index
+                      ? 'border-white/30 text-white bg-white/5'
+                      : 'border-transparent text-white/60 hover:text-white'"
                     @click="selectedServer = index">
-                    {{ serverLabel(server, index) }}
+                    <span>{{ serverLabel(server, index) }}</span>
+                    <span class="w-[20px] h-[20px] rounded-full font-bold text-[10px]"
+                      :class="selectedServer === index ? 'bg-white text-black' : 'bg-white/20 text-white'">
+                      {{ server.episodes?.length || 0 }}
+                    </span>
                   </button>
                 </div>
 
+                <!-- Episode Grid -->
                 <div v-if="activeServer?.episodes?.length"
-                  class="mt-3 grid grid-cols-3 gap-2 rounded-md border border-white/10 p-3 sm:grid-cols-3 lg:grid-cols-6">
+                  class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-x-2.5 gap-y-2.5">
                   <NuxtLink v-for="(episode, index) in activeServer.episodes" :key="`${episode.name}-${index}`"
                     :to="episodeLink(index)"
-                    class="rounded-md bg-white/10 px-4 py-3 text-center text-sm font-black text-white transition first:bg-yellow-400 first:text-slate-950 hover:bg-yellow-400 hover:text-slate-950">
+                    class="group flex items-center justify-center gap-1.5 rounded-lg transition-all py-2.5 px-2 text-[13px] bg-[#191b24] text-white/90 hover:text-[#FFD166] hover:bg-[#1f2130] shadow-sm">
+                    <Play class="size-3 fill-current opacity-0 group-hover:opacity-100 transition-opacity" />
                     {{ formatEpisodeName(episode.name, index) }}
                   </NuxtLink>
                 </div>
 
-                <p v-else class="mt-4 rounded-md border border-white/10 bg-slate-900/70 p-4 text-sm text-slate-300">
+                <p v-else class="mt-2 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
                   Chưa có tập xem từ server này.
                 </p>
               </div>
 
-              <div v-else class="px-0 pt-6 sm:px-0 sm:pt-5">
-                <h2 class="text-[1.08rem] font-black sm:text-xl">Diễn viên</h2>
-
-                <div v-if="actors.length" class="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+              <!-- Actors Tab -->
+              <div v-if="activeTab === 'actors'">
+                <div v-if="actors.length" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                   <div v-for="actor in actors" :key="actor.name"
-                    class="flex min-w-0 items-center gap-3 rounded-md border border-white/10 bg-white/5 p-3">
+                    class="flex min-w-0 items-center gap-3 rounded-xl border border-white/10 bg-[#191b24] p-3 transition hover:border-white/20">
                     <img v-if="actor.avatar" :src="actor.avatar" :alt="actor.name"
-                      class="size-14 shrink-0 rounded-md object-cover">
+                      class="size-14 shrink-0 rounded-lg object-cover">
                     <div v-else
-                      class="grid size-14 shrink-0 place-items-center rounded-md bg-yellow-400/18 text-lg font-black text-yellow-100 ring-1 ring-yellow-300/20">
+                      class="grid size-14 shrink-0 place-items-center rounded-lg bg-yellow-400/18 text-lg font-black text-yellow-100">
                       {{ actorInitial(actor.name) }}
                     </div>
-
                     <div class="min-w-0">
-                      <p class="truncate text-sm font-black text-white">{{ actor.name }}</p>
-                      <p class="mt-1 truncate text-xs font-semibold text-yellow-200">
-                        {{ actor.originalName || 'Tên quốc tế đang cập nhật' }}
-                      </p>
-                      <p class="mt-1 truncate text-xs font-semibold text-slate-400">
-                        {{ actor.role || 'Vai diễn đang cập nhật' }}
-                      </p>
+                      <p class="truncate text-sm font-semibold text-white">{{ actor.name }}</p>
+                      <p v-if="actor.originalName" class="mt-0.5 truncate text-xs text-yellow-200/70">{{ actor.originalName }}</p>
+                      <p v-if="actor.role" class="mt-0.5 truncate text-xs text-slate-400">{{ actor.role }}</p>
                     </div>
                   </div>
                 </div>
-
-                <p v-else class="mt-4 rounded-md border border-white/10 bg-slate-900/70 p-4 text-sm text-slate-300">
-                  Mục này chưa có dữ liệu diễn viên.
+                <p v-else class="mt-4 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
+                  Chưa có thông tin diễn viên.
                 </p>
               </div>
-            </section>
+            </div>
           </div>
         </div>
-      </section>
+
+        <!-- Comment Section -->
+        <div class="mt-10 border-t border-white/10 pt-8">
+          <div class="flex items-center gap-3 mb-6">
+            <MessageCircle class="size-5 text-yellow-300" />
+            <h2 class="text-xl font-bold text-white">Bình luận</h2>
+          </div>
+          <div class="flex flex-col items-center justify-center py-10 text-center border border-white/10 rounded-xl bg-[#191b24]">
+            <MessageCircle class="size-10 text-slate-500 mb-3" />
+            <p class="text-sm text-slate-400">Tính năng bình luận đang được phát triển.</p>
+          </div>
+        </div>
+      </div>
     </template>
+
+    <AppFooter />
   </main>
 </template>
diff --git a/app/pages/xem/[slug].vue b/app/pages/xem/[slug].vue
index 596d192..afd5c28 100644
--- a/app/pages/xem/[slug].vue
+++ b/app/pages/xem/[slug].vue
@@ -1,27 +1,15 @@
 <script setup lang="ts">
 import type Hls from 'hls.js'
 import {
-  FastForward,
-  Heart,
-  Loader2,
-  Menu,
-  Maximize,
-  Pause,
-  PictureInPicture2,
-  Play,
-  Plus,
-  Rewind,
-  Settings,
-  Share2,
-  SkipForward,
-  Star,
-  Volume2,
-  VolumeX,
+  Bug, CircleHelp, FastForward, Heart, Layers, Loader2, Maximize, Pause,
+  PictureInPicture2, Play, Plus, Rewind, Settings, Share2, SkipForward,
+  Star, Volume2, VolumeX, Captions, Languages, ChevronDown, ChevronRight,
 } from 'lucide-vue-next'
 
 const route = useRoute()
 const selectedServer = ref(Math.max(Number(route.query.server || 0), 0))
 const selectedEpisode = ref(Math.max(Number(route.query.ep || 1) - 1, 0))
+const selectedSubtitle = ref(0)
 const hasStarted = ref(false)
 const isFavoriteMovie = ref(false)
 const actionMessage = ref('')
@@ -53,70 +41,57 @@ let edgeProgressTimer: ReturnType<typeof setTimeout> | undefined
 let singleTapTimer: ReturnType<typeof setTimeout> | undefined
 let holdSpeedTimer: ReturnType<typeof setTimeout> | undefined
 let hlsFallbackTimer: ReturnType<typeof setTimeout> | undefined
-let touchStartX = 0
-let touchStartY = 0
-let touchStartAt = 0
-let lastTapAt = 0
-let lastTapX = 0
-let holdRestoreRate = 1
-let ignoreNextTap = false
-let hlsFatalRetryCount = 0
-let autoOrientationFullscreen = false
+let touchStartX = 0, touchStartY = 0, touchStartAt = 0
+let lastTapAt = 0, lastTapX = 0, holdRestoreRate = 1, ignoreNextTap = false
+let hlsFatalRetryCount = 0, autoOrientationFullscreen = false
 let hlsPlayer: Hls | undefined
 let progressTimer: ReturnType<typeof setInterval> | undefined
 let lastSavedProgress = 0
-const {
-  loadWatchHistory: fetchWatchHistory,
-  saveWatchHistory: persistWatchHistory,
-} = useWatchHistory()
-const {
-  isFavorite,
-  saveFavorite,
-  removeFavorite,
-  saveWatchLater,
-} = useMovieLibrary()
+const { loadWatchHistory: fetchWatchHistory, saveWatchHistory: persistWatchHistory } = useWatchHistory()
+const { isFavorite, saveFavorite, removeFavorite, saveWatchLater } = useMovieLibrary()
 
 const { data: movie, pending, error } = useFetch(() => `/api/movies/${route.params.slug}`, {
-  query: computed(() => ({
-    source: route.query.source,
-    srcs: route.query.srcs,
-  })),
-  lazy: true,
+  query: computed(() => ({ source: route.query.source, srcs: route.query.srcs })),
   watch: [() => route.query.source, () => route.query.srcs],
 })
 
 const servers = computed(() => movie.value?.servers ?? [])
 const activeServer = computed(() => servers.value[selectedServer.value] ?? servers.value[0])
-const activeEpisode = computed(() => activeServer.value?.episodes?.[selectedEpisode.value] ?? activeServer.value?.episodes?.[0])
+const activeSubtitle = computed(() => activeServer.value?.channels?.[selectedSubtitle.value] ?? activeServer.value)
+const activeEpisode = computed(() => activeSubtitle.value?.episodes?.[selectedEpisode.value] ?? activeSubtitle.value?.episodes?.[0])
 const hlsPlayerUrl = computed(() => activeEpisode.value?.linkM3u8 || '')
-const actorSummary = computed(() => (movie.value?.actors ?? []).map((actor: any) => actor.name).filter(Boolean).slice(0, 6).join(', '))
+const actorSummary = computed(() => (movie.value?.actors ?? []).map((a: any) => a.name).filter(Boolean).slice(0, 6).join(', '))
 const durationSeconds = computed(() => Math.floor(videoDuration.value || parseDurationSeconds(movie.value?.time || '')))
-const hasNextEpisode = computed(() => Boolean(activeServer.value?.episodes?.[selectedEpisode.value + 1]))
-
-function getProxyUrl(url: string): string {
-  const encoded = btoa(url)
-  return `/api/proxy-m3u8/${encoded}`
-}
-
-const progressPercent = computed(() => {
-  if (!durationSeconds.value || !progressSeconds.value) return 0
-  return Math.min(Math.max((progressSeconds.value / durationSeconds.value) * 100, 0), 100)
+const hasNextEpisode = computed(() => Boolean(activeSubtitle.value?.episodes?.[selectedEpisode.value + 1]))
+const episodeProgress = computed(() => {
+  const total = movie.value?.episodeTotal ? Number(String(movie.value.episodeTotal).replace(/[^0-9]/g, '')) : 0
+  const available = activeSubtitle.value?.episodes?.length || 0
+  return { available, total }
 })
+
+function getProxyUrl(url: string) { const encoded = btoa(url); return `/api/proxy-m3u8/${encoded}` }
+const progressPercent = computed(() => durationSeconds.value && progressSeconds.value ? Math.min(Math.max((progressSeconds.value / durationSeconds.value) * 100, 0), 100) : 0)
 const shouldShowHlsControls = computed(() => (controlsVisible.value || !isVideoPlaying.value) && !(isHlsFullscreen.value && edgeProgressVisible.value && isVideoPlaying.value))
 const skipIntroSeconds = 85
 const skipOutroSeconds = computed(() => Math.max((durationSeconds.value || 0) - 85, 0))
-const libraryItem = computed(() => {
-  if (!movie.value) return null
+const libraryItem = computed(() => movie.value ? {
+  source: String(route.query.source || movie.value.source || ''), slug: String(route.params.slug),
+  name: movie.value.name, originName: movie.value.originName, thumb: movie.value.thumb, poster: movie.value.poster, updatedAt: Date.now(),
+} : null)
 
-  return {
-    source: String(route.query.source || movie.value.source || ''),
-    slug: String(route.params.slug),
-    name: movie.value.name,
-    originName: movie.value.originName,
-    thumb: movie.value.thumb,
-    poster: movie.value.poster,
-    updatedAt: Date.now(),
-  }
+// Related movies
+const { data: relatedData } = await useFetch('/api/movies', {
+  query: computed(() => ({ page: 1 })),
+  lazy: true, default: () => ({ items: [] }),
+})
+const relatedMovies = computed(() => {
+  const items = relatedData.value?.items ?? []
+  const currentSlug = route.params.slug
+  const currentCategories = movie.value?.categories ?? []
+  return items
+    .filter((m: any) => m.slug !== currentSlug)
+    .filter((m: any) => m.categories?.some((c: string) => currentCategories.includes(c)))
+    .slice(0, 8)
 })
 
 function formatEpisodeName(name?: string, index = 0) {
@@ -131,809 +106,298 @@ function serverLabel(server: any, index: number) {
   const name = String(server?.name || '').replace(/^(ophim|nguonc|kkphim)\s*-\s*/i, '').trim()
   const sameSourceServers = servers.value.filter((item: any) => item.source === server?.source)
   const sourceServerNumber = sameSourceServers.findIndex((item: any) => item === server) + 1
-
   if (source && sameSourceServers.length > 1) return `${source} #${sourceServerNumber || index + 1}`
   if (source) return source
   return name || `Server ${index + 1}`
 }
 
-function episodeLink(index: number) {
-  return {
-    path: `/xem/${route.params.slug}`,
-    query: {
-      source: route.query.source,
-      srcs: route.query.srcs,
-      server: selectedServer.value,
-      ep: index + 1,
-    },
-  }
+function subtitleLabel(server: any, index: number) {
+  return String(server?.name || `Vietsub #${index + 1}`).replace(/^(ophim|nguonc|kkphim)\s*-\s*/i, '').trim()
 }
 
-function episodeIndexForServer(serverIndex: number, episodeIndex = selectedEpisode.value) {
-  const episodeCount = servers.value[serverIndex]?.episodes?.length || 0
-  if (!episodeCount) return 0
-  return Math.min(Math.max(episodeIndex, 0), episodeCount - 1)
+function episodeLink(index: number) {
+  return { path: `/xem/${route.params.slug}`, query: { source: route.query.source, srcs: route.query.srcs, server: selectedServer.value, ep: index + 1 } }
+}
+
+function episodeIndexForServer(serverIndex: number, subIndex = selectedSubtitle.value, episodeIndex = selectedEpisode.value) {
+  const sub = servers.value[serverIndex]?.channels?.[subIndex] ?? servers.value[serverIndex]
+  const count = sub?.episodes?.length || 0
+  return count ? Math.min(Math.max(episodeIndex, 0), count - 1) : 0
 }
 
 async function selectServer(index: number) {
   if (index === selectedServer.value) return
   const shouldAutoplay = hasStarted.value
-  const nextEpisodeIndex = episodeIndexForServer(index)
   selectedServer.value = index
-  selectedEpisode.value = nextEpisodeIndex
-  resetProgressTimer()
-  destroyHlsPlayer()
-  await navigateTo({
-    path: `/xem/${route.params.slug}`,
-    query: {
-      ...route.query,
-      server: index,
-      ep: nextEpisodeIndex + 1,
-    },
-  }, { replace: true })
+  selectedSubtitle.value = 0
+  selectedEpisode.value = episodeIndexForServer(index, 0)
+  resetProgressTimer(); destroyHlsPlayer()
+  await navigateTo({ path: `/xem/${route.params.slug}`, query: { ...route.query, server: index, ep: selectedEpisode.value + 1 } }, { replace: true })
+  if (shouldAutoplay) nextTick(() => startPlayer())
+}
 
-  if (shouldAutoplay) {
-    nextTick(() => startPlayer())
-  }
+async function selectSubtitle(index: number) {
+  if (index === selectedSubtitle.value) return
+  selectedSubtitle.value = index
+  selectedEpisode.value = episodeIndexForServer(selectedServer.value, index)
+  resetProgressTimer(); destroyHlsPlayer()
+  await navigateTo({ path: `/xem/${route.params.slug}`, query: { ...route.query, server: selectedServer.value, ep: selectedEpisode.value + 1 } }, { replace: true })
+  if (hasStarted.value) nextTick(() => startPlayer())
 }
 
 async function startPlayer() {
   hasStarted.value = true
   await loadResumeProgress()
-  startProgressTimer()
-  saveWatchHistory()
+  startProgressTimer(); saveWatchHistory()
   nextTick(() => setupHlsPlayer(true))
   nextTick(() => handleOrientationFullscreen())
 }
 
 function parseDurationSeconds(value: string) {
-  const normalizedValue = value.toLowerCase()
-  const hourMatch = normalizedValue.match(/(\d+)\s*(?:h|giờ|gio)/)
-  const minuteMatch = normalizedValue.match(/(\d+)\s*(?:m|min|phút|phut|p)/)
-  const compactMatch = normalizedValue.match(/^(\d+)$/)
-  const hours = hourMatch ? Number(hourMatch[1]) : 0
-  const minutes = minuteMatch ? Number(minuteMatch[1]) : compactMatch ? Number(compactMatch[1]) : 0
-
-  return Math.max((hours * 60 + minutes) * 60, 0)
+  const nv = value.toLowerCase()
+  const h = nv.match(/(\d+)\s*(?:h|giờ|gio)/)
+  const m = nv.match(/(\d+)\s*(?:m|min|phút|phut|p)/) || nv.match(/^(\d+)$/)
+  return Math.max(((h ? Number(h[1]) : 0) * 60 + (m ? Number(m[1]) : 0)) * 60, 0)
 }
 
 function resetProgressTimer() {
-  progressSeconds.value = 0
-  videoCurrentTime.value = 0
-  videoDuration.value = 0
-  isVideoPlaying.value = false
-  isVideoBuffering.value = false
-  hlsErrorMessage.value = ''
-  pendingResumeSeconds.value = 0
-  lastSavedProgress = 0
-  clearHlsFallbackTimer()
-  stopProgressTimer()
+  progressSeconds.value = 0; videoCurrentTime.value = 0; videoDuration.value = 0
+  isVideoPlaying.value = false; isVideoBuffering.value = false; hlsErrorMessage.value = ''
+  pendingResumeSeconds.value = 0; lastSavedProgress = 0; clearHlsFallbackTimer(); stopProgressTimer()
 }
-
-function stopProgressTimer() {
-  if (!progressTimer) return
-  clearInterval(progressTimer)
-  progressTimer = undefined
-}
-
+function stopProgressTimer() { if (progressTimer) { clearInterval(progressTimer); progressTimer = undefined } }
 function tickProgress() {
   if (!hasStarted.value || (import.meta.client && document.visibilityState === 'hidden')) return
-
-  if (videoRef.value) {
-    progressSeconds.value = Math.floor(videoRef.value.currentTime || 0)
-    videoCurrentTime.value = progressSeconds.value
-  } else {
-    progressSeconds.value += 1
-  }
-
-  if (durationSeconds.value) {
-    progressSeconds.value = Math.min(progressSeconds.value, durationSeconds.value)
-  }
-
-  if (progressSeconds.value - lastSavedProgress >= 10) {
-    lastSavedProgress = progressSeconds.value
-    saveWatchHistory()
-  }
+  if (videoRef.value) { progressSeconds.value = Math.floor(videoRef.value.currentTime || 0); videoCurrentTime.value = progressSeconds.value }
+  else progressSeconds.value += 1
+  if (durationSeconds.value) progressSeconds.value = Math.min(progressSeconds.value, durationSeconds.value)
+  if (progressSeconds.value - lastSavedProgress >= 10) { lastSavedProgress = progressSeconds.value; saveWatchHistory() }
 }
-
-function startProgressTimer() {
-  if (!import.meta.client || progressTimer) return
-  progressTimer = setInterval(tickProgress, 1000)
-}
-
-function handleVisibilityChange() {
-  if (!import.meta.client || document.visibilityState !== 'hidden' || !hasStarted.value) return
-  saveWatchHistory()
-}
-
+function startProgressTimer() { if (!import.meta.client || progressTimer) return; progressTimer = setInterval(tickProgress, 1000) }
+function handleVisibilityChange() { if (!import.meta.client || document.visibilityState !== 'hidden' || !hasStarted.value) return; saveWatchHistory() }
 function handleKeyboardShortcut(event: KeyboardEvent) {
   if (!hasStarted.value || !videoRef.value) return
   if (['INPUT', 'TEXTAREA', 'SELECT'].includes((event.target as HTMLElement)?.tagName)) return
-
   const key = event.key.toLowerCase()
-
-  if (key === ' ') {
-    event.preventDefault()
-    toggleHlsPlayback()
-  } else if (key === 'arrowleft') {
-    event.preventDefault()
-    seekBy(-10)
-  } else if (key === 'arrowright') {
-    event.preventDefault()
-    seekBy(10)
-  } else if (key === 'f') {
-    event.preventDefault()
-    toggleFullscreen()
-  } else if (key === 'm') {
-    event.preventDefault()
-    toggleMute()
-  } else if (key === 'p') {
-    event.preventDefault()
-    togglePictureInPicture()
-  }
+  if (key === ' ') { event.preventDefault(); toggleHlsPlayback() }
+  else if (key === 'arrowleft') { event.preventDefault(); seekBy(-10) }
+  else if (key === 'arrowright') { event.preventDefault(); seekBy(10) }
+  else if (key === 'f') { event.preventDefault(); toggleFullscreen() }
+  else if (key === 'm') { event.preventDefault(); toggleMute() }
+  else if (key === 'p') { event.preventDefault(); togglePictureInPicture() }
 }
-
 function showControlsTemporarily() {
   controlsVisible.value = true
   if (controlsHideTimer) clearTimeout(controlsHideTimer)
   if (!isVideoPlaying.value || isSettingsOpen.value) return
-  controlsHideTimer = setTimeout(() => {
-    controlsVisible.value = false
-  }, 2600)
+  controlsHideTimer = setTimeout(() => { controlsVisible.value = false }, 2600)
 }
-
 function showFullscreenProgressOnly() {
   if (!isHlsFullscreen.value) return
-  edgeProgressVisible.value = true
-  controlsVisible.value = false
+  edgeProgressVisible.value = true; controlsVisible.value = false
   if (edgeProgressTimer) clearTimeout(edgeProgressTimer)
-  edgeProgressTimer = setTimeout(() => {
-    edgeProgressVisible.value = false
-  }, 1400)
+  edgeProgressTimer = setTimeout(() => { edgeProgressVisible.value = false }, 1400)
 }
-
-function clearHlsFallbackTimer() {
-  if (!hlsFallbackTimer) return
-  clearTimeout(hlsFallbackTimer)
-  hlsFallbackTimer = undefined
-}
-
-function scheduleHlsFallback(message = 'HLS phản hồi chậm, vui lòng thử lại...') {
+function clearHlsFallbackTimer() { if (hlsFallbackTimer) { clearTimeout(hlsFallbackTimer); hlsFallbackTimer = undefined } }
+function scheduleHlsFallback(message = 'HLS phản hồi chậm...') {
   clearHlsFallbackTimer()
-  hlsFallbackTimer = setTimeout(() => {
-    hlsErrorMessage.value = message
-    isVideoBuffering.value = false
-    isVideoPlaying.value = false
-  }, 12000)
+  hlsFallbackTimer = setTimeout(() => { hlsErrorMessage.value = message; isVideoBuffering.value = false; isVideoPlaying.value = false }, 12000)
 }
-
-function flashGestureHint(message: string) {
-  gestureHint.value = message
-  window.setTimeout(() => {
-    if (gestureHint.value === message) gestureHint.value = ''
-  }, 650)
-}
-
+function flashGestureHint(message: string) { gestureHint.value = message; window.setTimeout(() => { if (gestureHint.value === message) gestureHint.value = '' }, 650) }
 function formatPlayerTime(seconds = 0) {
-  const totalSeconds = Math.max(Math.floor(seconds), 0)
-  const hours = Math.floor(totalSeconds / 3600)
-  const minutes = Math.floor((totalSeconds % 3600) / 60)
-  const remainingSeconds = totalSeconds % 60
-
-  if (hours) {
-    return `${hours}:${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`
-  }
-
-  return `${minutes}:${String(remainingSeconds).padStart(2, '0')}`
+  const t = Math.max(Math.floor(seconds), 0)
+  const h = Math.floor(t / 3600), m = Math.floor((t % 3600) / 60), s = t % 60
+  return h ? `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}` : `${m}:${String(s).padStart(2, '0')}`
 }
 
 async function setupHlsPlayer(autoplay = false, tryProxy = true) {
-  console.log('[HLS] Setup called', { tryProxy, hasVideoRef: !!videoRef.value, hlsUrl: hlsPlayerUrl.value })
-
-  if (!import.meta.client || !videoRef.value || !hlsPlayerUrl.value) {
-    console.log('[HLS] Early return - missing requirements')
-    return
-  }
-
-  destroyHlsPlayer()
-  hlsFatalRetryCount = 0
-
-  const video = videoRef.value
-  isVideoBuffering.value = true
-  hlsErrorMessage.value = ''
-  video.volume = videoVolume.value
-  video.muted = isVideoMuted.value
-  video.playbackRate = playbackRate.value
-
-  // Use proxy if tryProxy is true, otherwise use direct URL
+  if (!import.meta.client || !videoRef.value || !hlsPlayerUrl.value) return
+  destroyHlsPlayer(); hlsFatalRetryCount = 0
+  const video = videoRef.value; isVideoBuffering.value = true; hlsErrorMessage.value = ''
+  video.volume = videoVolume.value; video.muted = isVideoMuted.value; video.playbackRate = playbackRate.value
   let sourceUrl = tryProxy ? getProxyUrl(hlsPlayerUrl.value) : hlsPlayerUrl.value
-  console.log('[HLS] Source URL:', sourceUrl)
-
-  // Force use hls.js when using proxy, as native HLS doesn't handle proxy URLs well
   if (video.canPlayType('application/vnd.apple.mpegurl') && !tryProxy) {
-    console.log('[HLS] Using native HLS (Safari) - direct URL only')
-    // Native HLS (Safari) - only when using direct URL
-    video.src = sourceUrl
-    scheduleHlsFallback()
-
-    // Listen for errors on native HLS
-    const handleError = () => {
-      console.log('[HLS] Native HLS error, falling back to hls.js')
-      video.removeEventListener('error', handleError)
-      // Fall back to hls.js instead of embed
-      tryProxy = false
-      setupHlsPlayer(autoplay, false)
-    }
+    video.src = sourceUrl; scheduleHlsFallback()
+    const handleError = () => { video.removeEventListener('error', handleError); setupHlsPlayer(autoplay, false) }
     video.addEventListener('error', handleError)
   } else {
-    console.log('[HLS] Using hls.js library')
     try {
       const { default: HlsPlayer } = await import('hls.js')
-
-      if (!HlsPlayer.isSupported()) {
-        console.log('[HLS] hls.js not supported')
-        hlsErrorMessage.value = 'Trình duyệt chưa hỗ trợ HLS.'
-        isVideoBuffering.value = false
-        return
-      }
-
-      hlsPlayer = new HlsPlayer({
-        enableWorker: true,
-        lowLatencyMode: true,
-        xhrSetup: (xhr, url) => {
-          xhr.withCredentials = false
-        },
-      })
-
+      if (!HlsPlayer.isSupported()) { hlsErrorMessage.value = 'Trình duyệt chưa hỗ trợ HLS.'; isVideoBuffering.value = false; return }
+      hlsPlayer = new HlsPlayer({ enableWorker: true, lowLatencyMode: true, xhrSetup: (xhr) => { xhr.withCredentials = false } })
       hlsPlayer.on(HlsPlayer.Events.MANIFEST_PARSED, () => {
-        console.log('[HLS] Manifest parsed successfully')
         clearHlsFallbackTimer()
-        qualityLevels.value = hlsPlayer?.levels
-          .map((level, index) => ({
-            label: level.height ? `${level.height}p` : `${Math.round((level.bitrate || 0) / 1000)}kbps`,
-            level: index,
-          }))
-          .filter((level) => level.label !== '0kbps') ?? []
-        selectedQuality.value = -1
-        applyResumeProgress()
+        qualityLevels.value = hlsPlayer?.levels.map((l, i) => ({ label: l.height ? `${l.height}p` : `${Math.round((l.bitrate || 0) / 1000)}kbps`, level: i })).filter(l => l.label !== '0kbps') ?? []
+        selectedQuality.value = -1; applyResumeProgress()
       })
-
       hlsPlayer.on(HlsPlayer.Events.ERROR, (_event, data) => {
-        console.log('[HLS] Error:', data.type, data.details, data.fatal)
         if (!data.fatal) return
-
-        // If using proxy and it fails, try direct URL
-        if (tryProxy) {
-          console.log('[HLS] Proxy failed, trying direct URL')
-          hlsErrorMessage.value = 'Proxy lỗi, đang thử trực tiếp...'
-          hlsPlayer?.destroy()
-
-          // Retry with direct URL
-          setTimeout(() => {
-            setupHlsPlayer(autoplay, false)
-          }, 100)
-          return
-        }
-
+        if (tryProxy) { hlsErrorMessage.value = 'Proxy lỗi, đang thử trực tiếp...'; hlsPlayer?.destroy(); setTimeout(() => { setupHlsPlayer(autoplay, false) }, 100); return }
         hlsFatalRetryCount += 1
-        if (hlsFatalRetryCount >= 2) {
-          console.log('[HLS] Too many errors, showing error message')
-          hlsErrorMessage.value = 'HLS tải không ổn định.'
-          isVideoBuffering.value = false
-          isVideoPlaying.value = false
-          return
-        }
-
-        if (data.type === HlsPlayer.ErrorTypes.NETWORK_ERROR) {
-          hlsErrorMessage.value = 'Mạng đang chập chờn, đang thử tải lại...'
-          hlsPlayer?.startLoad()
-        } else if (data.type === HlsPlayer.ErrorTypes.MEDIA_ERROR) {
-          hlsErrorMessage.value = 'Video bị lỗi giải mã, đang thử khôi phục...'
-          hlsPlayer?.recoverMediaError()
-        } else {
-          hlsErrorMessage.value = 'Link HLS đang lỗi, bạn chuyển sang chế độ Nhúng nhé.'
-        }
+        if (hlsFatalRetryCount >= 2) { hlsErrorMessage.value = 'HLS tải không ổn định.'; isVideoBuffering.value = false; isVideoPlaying.value = false; return }
+        if (data.type === HlsPlayer.ErrorTypes.NETWORK_ERROR) { hlsErrorMessage.value = 'Mạng chập chờn, đang thử lại...'; hlsPlayer?.startLoad() }
+        else if (data.type === HlsPlayer.ErrorTypes.MEDIA_ERROR) { hlsErrorMessage.value = 'Lỗi giải mã, đang khôi phục...'; hlsPlayer?.recoverMediaError() }
+        else { hlsErrorMessage.value = 'Link HLS lỗi, chuyển sang chế độ Nhúng nhé.' }
       })
-
-      console.log('[HLS] Loading source and attaching media')
-      hlsPlayer.loadSource(sourceUrl)
-      hlsPlayer.attachMedia(video)
-      scheduleHlsFallback()
-    } catch (error) {
-      console.error('[HLS] Setup error:', error)
-      hlsErrorMessage.value = 'Lỗi khởi tạo HLS player.'
-      isVideoBuffering.value = false
-      isVideoPlaying.value = false
-      return
-    }
-  }
-
-  if (autoplay) {
-    try {
-      await video.play()
-    } catch {
-      isVideoPlaying.value = false
-      hlsErrorMessage.value = 'HLS chưa phát được.'
-    }
+      hlsPlayer.loadSource(sourceUrl); hlsPlayer.attachMedia(video); scheduleHlsFallback()
+    } catch { hlsErrorMessage.value = 'Lỗi khởi tạo HLS player.'; isVideoBuffering.value = false; isVideoPlaying.value = false }
   }
+  if (autoplay) { try { await video.play() } catch { isVideoPlaying.value = false; hlsErrorMessage.value = 'HLS chưa phát được.' } }
 }
 
 function destroyHlsPlayer() {
   clearHlsFallbackTimer()
-
-  if (hlsPlayer) {
-    hlsPlayer.destroy()
-    hlsPlayer = undefined
-  }
-
-  if (videoRef.value) {
-    videoRef.value.removeAttribute('src')
-    videoRef.value.load()
-  }
-
-  qualityLevels.value = []
-  selectedQuality.value = -1
+  if (hlsPlayer) { hlsPlayer.destroy(); hlsPlayer = undefined }
+  if (videoRef.value) { videoRef.value.removeAttribute('src'); videoRef.value.load() }
+  qualityLevels.value = []; selectedQuality.value = -1
 }
 
 function updateVideoTime() {
   if (!videoRef.value) return
-  videoCurrentTime.value = Math.floor(videoRef.value.currentTime || 0)
-  progressSeconds.value = videoCurrentTime.value
-
-  if (Number.isFinite(videoRef.value.duration)) {
-    videoDuration.value = Math.floor(videoRef.value.duration || 0)
-  }
-}
-
-function updateVideoMetadata() {
-  clearHlsFallbackTimer()
-  updateVideoTime()
-  applyResumeProgress()
-  isVideoBuffering.value = false
-}
-
-function handleVideoCanPlay() {
-  clearHlsFallbackTimer()
-  isVideoBuffering.value = false
-}
-
-function handleVideoWaiting() {
-  isVideoBuffering.value = true
-  scheduleHlsFallback('HLS bị đứng quá lâu, đã chuyển sang chế độ Nhúng.')
-}
-
-function handleVideoPlaying() {
-  clearHlsFallbackTimer()
-  isVideoBuffering.value = false
-}
-
-function handleVideoError() {
-  hlsErrorMessage.value = 'HLS phát lỗi.'
-  isVideoBuffering.value = false
-  isVideoPlaying.value = false
+  videoCurrentTime.value = Math.floor(videoRef.value.currentTime || 0); progressSeconds.value = videoCurrentTime.value
+  if (Number.isFinite(videoRef.value.duration)) videoDuration.value = Math.floor(videoRef.value.duration || 0)
 }
+function updateVideoMetadata() { clearHlsFallbackTimer(); updateVideoTime(); applyResumeProgress(); isVideoBuffering.value = false }
+function handleVideoCanPlay() { clearHlsFallbackTimer(); isVideoBuffering.value = false }
+function handleVideoWaiting() { isVideoBuffering.value = true; scheduleHlsFallback('HLS bị đứng...') }
+function handleVideoPlaying() { clearHlsFallbackTimer(); isVideoBuffering.value = false }
+function handleVideoError() { hlsErrorMessage.value = 'HLS phát lỗi.'; isVideoBuffering.value = false; isVideoPlaying.value = false }
 
 async function loadResumeProgress() {
   if (!import.meta.client || !movie.value) return
-
   const source = String(route.query.source || movie.value.source || '')
-  const historyItems = await fetchWatchHistory(30)
-  const historyItem = historyItems.find((item) => item.slug === String(route.params.slug) && item.source === source)
-  const savedProgress = Math.floor(historyItem?.progressSeconds || 0)
-
-  if (!savedProgress || (historyItem?.episodeIndex ?? 0) !== selectedEpisode.value) return
-  pendingResumeSeconds.value = savedProgress
-  progressSeconds.value = savedProgress
-  videoCurrentTime.value = savedProgress
+  const items = await fetchWatchHistory(30)
+  const item = items.find((i) => i.slug === String(route.params.slug) && i.source === source)
+  const saved = Math.floor(item?.progressSeconds || 0)
+  if (!saved || (item?.episodeIndex ?? 0) !== selectedEpisode.value) return
+  pendingResumeSeconds.value = saved; progressSeconds.value = saved; videoCurrentTime.value = saved
 }
 
 function applyResumeProgress() {
   if (!videoRef.value || !pendingResumeSeconds.value) return
-  const resumeAt = durationSeconds.value
-    ? Math.min(pendingResumeSeconds.value, Math.max(durationSeconds.value - 8, 0))
-    : pendingResumeSeconds.value
-
-  videoRef.value.currentTime = resumeAt
-  videoCurrentTime.value = Math.floor(resumeAt)
-  progressSeconds.value = videoCurrentTime.value
-  pendingResumeSeconds.value = 0
-}
-
-function toggleHlsPlayback() {
-  if (!videoRef.value) return
-
-  if (videoRef.value.paused) {
-    videoRef.value.play()
-  } else {
-    videoRef.value.pause()
-  }
+  const resumeAt = durationSeconds.value ? Math.min(pendingResumeSeconds.value, Math.max(durationSeconds.value - 8, 0)) : pendingResumeSeconds.value
+  videoRef.value.currentTime = resumeAt; videoCurrentTime.value = Math.floor(resumeAt); progressSeconds.value = videoCurrentTime.value; pendingResumeSeconds.value = 0
 }
 
+function toggleHlsPlayback() { if (!videoRef.value) return; videoRef.value.paused ? videoRef.value.play() : videoRef.value.pause() }
 function seekBy(seconds: number) {
   if (!videoRef.value) return
-  const nextTime = Math.min(Math.max((videoRef.value.currentTime || 0) + seconds, 0), durationSeconds.value || Number.MAX_SAFE_INTEGER)
-  videoRef.value.currentTime = nextTime
+  videoRef.value.currentTime = Math.min(Math.max((videoRef.value.currentTime || 0) + seconds, 0), durationSeconds.value || Number.MAX_SAFE_INTEGER)
   updateVideoTime()
-  if (isHlsFullscreen.value) {
-    showFullscreenProgressOnly()
-  } else {
-    showControlsTemporarily()
-  }
+  if (isHlsFullscreen.value) showFullscreenProgressOnly(); else showControlsTemporarily()
   saveWatchHistory()
 }
-
-function seekHlsPlayer(event: Event) {
-  if (!videoRef.value) return
-  const value = Number((event.target as HTMLInputElement).value)
-  videoRef.value.currentTime = value
-  updateVideoTime()
-  if (isHlsFullscreen.value) showFullscreenProgressOnly()
-  saveWatchHistory()
-}
-
-function toggleMute() {
-  if (!videoRef.value) return
-  videoRef.value.muted = !videoRef.value.muted
-  isVideoMuted.value = videoRef.value.muted
-}
-
-function changeVolume(event: Event) {
-  if (!videoRef.value) return
-  const value = Number((event.target as HTMLInputElement).value)
-  videoVolume.value = value
-  videoRef.value.volume = value
-  videoRef.value.muted = value === 0
-  isVideoMuted.value = videoRef.value.muted
-}
-
-function changePlaybackRate(event: Event) {
-  if (!videoRef.value) return
-  playbackRate.value = Number((event.target as HTMLSelectElement).value)
-  videoRef.value.playbackRate = playbackRate.value
-  showControlsTemporarily()
-}
-
-function changeQuality(event: Event) {
-  const value = Number((event.target as HTMLSelectElement).value)
-  selectedQuality.value = value
-  if (hlsPlayer) hlsPlayer.currentLevel = value
-  showControlsTemporarily()
-}
-
-function getDocumentFullscreenElement() {
-  if (!import.meta.client) return null
-  const documentWithWebkit = document as Document & {
-    webkitFullscreenElement?: Element | null
-  }
-
-  return document.fullscreenElement || documentWithWebkit.webkitFullscreenElement || null
-}
-
+function seekHlsPlayer(event: Event) { if (!videoRef.value) return; videoRef.value.currentTime = Number((event.target as HTMLInputElement).value); updateVideoTime(); if (isHlsFullscreen.value) showFullscreenProgressOnly(); saveWatchHistory() }
+function toggleMute() { if (!videoRef.value) return; videoRef.value.muted = !videoRef.value.muted; isVideoMuted.value = videoRef.value.muted }
+function changeVolume(event: Event) { if (!videoRef.value) return; const v = Number((event.target as HTMLInputElement).value); videoVolume.value = v; videoRef.value.volume = v; videoRef.value.muted = v === 0; isVideoMuted.value = videoRef.value.muted }
+function changePlaybackRate(event: Event) { if (!videoRef.value) return; playbackRate.value = Number((event.target as HTMLSelectElement).value); videoRef.value.playbackRate = playbackRate.value; showControlsTemporarily() }
+function changeQuality(event: Event) { const v = Number((event.target as HTMLSelectElement).value); selectedQuality.value = v; if (hlsPlayer) hlsPlayer.currentLevel = v; showControlsTemporarily() }
+function getDocumentFullscreenElement() { if (!import.meta.client) return null; return document.fullscreenElement || (document as any).webkitFullscreenElement || null }
 async function enterPlayerFullscreen() {
   if (!import.meta.client) return false
-
-  const video = videoRef.value as (HTMLVideoElement & {
-    webkitEnterFullscreen?: () => void
-    webkitRequestFullscreen?: () => Promise<void> | void
-  }) | null
-  const target = (playerShellRef.value || playerViewportRef.value || video?.parentElement || video) as (HTMLElement & {
-    webkitRequestFullscreen?: () => Promise<void> | void
-  }) | null
-
+  const video = videoRef.value as any, target = (playerShellRef.value || playerViewportRef.value || video?.parentElement || video) as any
   if (!target && !video) return false
-
-  try {
-    if (target?.requestFullscreen) {
-      await target.requestFullscreen()
-      return true
-    }
-
-    if (target?.webkitRequestFullscreen) {
-      await target.webkitRequestFullscreen()
-      return true
-    }
-
-    if (video?.webkitEnterFullscreen) {
-      video.webkitEnterFullscreen()
-      return true
-    }
-  } catch {
-    try {
-      video?.webkitEnterFullscreen?.()
-      return Boolean(video)
-    } catch {
-      return false
-    }
-  }
-
+  try { if (target?.requestFullscreen) { await target.requestFullscreen(); return true } if (target?.webkitRequestFullscreen) { await target.webkitRequestFullscreen(); return true } if (video?.webkitEnterFullscreen) { video.webkitEnterFullscreen(); return true } } catch { try { video?.webkitEnterFullscreen?.(); return Boolean(video) } catch { return false } }
   return false
 }
-
-async function exitPlayerFullscreen() {
-  const documentWithWebkit = document as Document & {
-    webkitExitFullscreen?: () => Promise<void> | void
-  }
-
-  if (document.exitFullscreen) await document.exitFullscreen()
-  else await documentWithWebkit.webkitExitFullscreen?.()
-}
-
-async function toggleFullscreen() {
-  if (!import.meta.client) return
-
-  try {
-    if (getDocumentFullscreenElement()) {
-      await exitPlayerFullscreen()
-      return
-    }
-
-    await enterPlayerFullscreen()
-  } catch {
-    await enterPlayerFullscreen()
-  }
-}
-
+async function exitPlayerFullscreen() { if (document.exitFullscreen) await document.exitFullscreen(); else await (document as any).webkitExitFullscreen?.() }
+async function toggleFullscreen() { if (!import.meta.client) return; try { if (getDocumentFullscreenElement()) { await exitPlayerFullscreen(); return } await enterPlayerFullscreen() } catch { await enterPlayerFullscreen() } }
 function updateFullscreenState() {
   if (!import.meta.client) return
-  const fullscreenElement = getDocumentFullscreenElement()
-  const playerElement = playerShellRef.value || playerViewportRef.value
-  isHlsFullscreen.value = Boolean(
-    fullscreenElement
-    && playerElement
-    && (playerElement.contains(fullscreenElement) || fullscreenElement.contains(playerElement)),
-  )
+  const fe = getDocumentFullscreenElement(), pe = playerShellRef.value || playerViewportRef.value
+  isHlsFullscreen.value = Boolean(fe && pe && (pe.contains(fe) || fe.contains(pe)))
   if (!isHlsFullscreen.value) edgeProgressVisible.value = false
-  if (!fullscreenElement) autoOrientationFullscreen = false
+  if (!fe) autoOrientationFullscreen = false
 }
-
 function isMobileLandscapeViewport() {
   if (!import.meta.client) return false
-  const isCoarsePointer = window.matchMedia?.('(pointer: coarse)').matches ?? false
-  const isSmallScreen = window.matchMedia?.('(max-width: 940px)').matches ?? window.innerWidth <= 940
-  const isLandscape = window.matchMedia?.('(orientation: landscape)').matches ?? window.innerWidth > window.innerHeight
-
-  return isCoarsePointer && isSmallScreen && isLandscape
+  return (window.matchMedia?.('(pointer: coarse)').matches ?? false) && (window.matchMedia?.('(max-width: 940px)').matches ?? window.innerWidth <= 940) && (window.matchMedia?.('(orientation: landscape)').matches ?? window.innerWidth > window.innerHeight)
 }
-
 async function handleOrientationFullscreen() {
   if (!import.meta.client || !hasStarted.value) return
-
-  const fullscreenElement = getDocumentFullscreenElement()
-  if (!isMobileLandscapeViewport()) {
-    if (fullscreenElement && autoOrientationFullscreen) await exitPlayerFullscreen()
-    return
-  }
-
-  if (fullscreenElement) return
-
+  const fe = getDocumentFullscreenElement()
+  if (!isMobileLandscapeViewport()) { if (fe && autoOrientationFullscreen) await exitPlayerFullscreen(); return }
+  if (fe) return
   autoOrientationFullscreen = await enterPlayerFullscreen()
-  if (autoOrientationFullscreen) {
-    controlsVisible.value = false
-    showFullscreenProgressOnly()
-  }
+  if (autoOrientationFullscreen) { controlsVisible.value = false; showFullscreenProgressOnly() }
 }
-
-async function togglePictureInPicture() {
-  if (!videoRef.value || !document.pictureInPictureEnabled) return
-
-  if (document.pictureInPictureElement) {
-    await document.exitPictureInPicture()
-  } else {
-    await videoRef.value.requestPictureInPicture()
-  }
-}
-
-function skipIntro() {
-  if (!videoRef.value) return
-  videoRef.value.currentTime = Math.max(videoRef.value.currentTime, skipIntroSeconds)
-  updateVideoTime()
-}
-
-function skipOutro() {
-  if (!videoRef.value || !skipOutroSeconds.value) return
-  videoRef.value.currentTime = skipOutroSeconds.value
-  updateVideoTime()
-}
-
+async function togglePictureInPicture() { if (!videoRef.value || !document.pictureInPictureEnabled) return; document.pictureInPictureElement ? await document.exitPictureInPicture() : await videoRef.value.requestPictureInPicture() }
+function skipIntro() { if (!videoRef.value) return; videoRef.value.currentTime = Math.max(videoRef.value.currentTime, skipIntroSeconds); updateVideoTime() }
+function skipOutro() { if (!videoRef.value || !skipOutroSeconds.value) return; videoRef.value.currentTime = skipOutroSeconds.value; updateVideoTime() }
 function playNextEpisode(autoplay = true) {
   if (!hasNextEpisode.value) return
-  selectedEpisode.value += 1
-  hasStarted.value = false
-  resetProgressTimer()
-  destroyHlsPlayer()
+  selectedEpisode.value += 1; hasStarted.value = false; resetProgressTimer(); destroyHlsPlayer()
   navigateTo(episodeLink(selectedEpisode.value), { replace: true })
-
-  if (autoplay) {
-    nextTick(() => startPlayer())
-  }
+  if (autoplay) nextTick(() => startPlayer())
 }
-
-function handleVideoEnded() {
-  isVideoPlaying.value = false
-  saveWatchHistory()
-  playNextEpisode(true)
-}
-
-function seekByTapPosition(clientX: number) {
-  const rect = playerShellRef.value?.getBoundingClientRect()
-  const centerX = rect ? rect.left + rect.width / 2 : window.innerWidth / 2
-  const seconds = clientX < centerX ? -10 : 10
-  seekBy(seconds)
-  flashGestureHint(seconds > 0 ? '+10s' : '-10s')
-}
-
+function handleVideoEnded() { isVideoPlaying.value = false; saveWatchHistory(); playNextEpisode(true) }
+function seekByTapPosition(clientX: number) { seekBy(clientX < (playerShellRef.value?.getBoundingClientRect().left || 0) + (playerShellRef.value?.getBoundingClientRect().width || 0) / 2 ? -10 : 10); flashGestureHint(clientX < (playerShellRef.value?.getBoundingClientRect().left || 0) + (playerShellRef.value?.getBoundingClientRect().width || 0) / 2 ? '-10s' : '+10s') }
 function handlePlayerPointerDown() {
   if (!videoRef.value) return
   if (holdSpeedTimer) clearTimeout(holdSpeedTimer)
   holdSpeedTimer = setTimeout(() => {
     if (!videoRef.value) return
-    holdRestoreRate = videoRef.value.playbackRate || playbackRate.value || 1
-    videoRef.value.playbackRate = 2
-    isHoldSpeedActive.value = true
-    ignoreNextTap = true
-    flashGestureHint('2x')
+    holdRestoreRate = videoRef.value.playbackRate || playbackRate.value || 1; videoRef.value.playbackRate = 2; isHoldSpeedActive.value = true; ignoreNextTap = true; flashGestureHint('2x')
     if (isHlsFullscreen.value) showFullscreenProgressOnly()
   }, 420)
 }
-
 function stopHoldSpeed() {
-  if (holdSpeedTimer) {
-    clearTimeout(holdSpeedTimer)
-    holdSpeedTimer = undefined
-  }
-
+  if (holdSpeedTimer) { clearTimeout(holdSpeedTimer); holdSpeedTimer = undefined }
   if (!isHoldSpeedActive.value) return
   if (videoRef.value) videoRef.value.playbackRate = playbackRate.value || holdRestoreRate || 1
-  isHoldSpeedActive.value = false
-  window.setTimeout(() => {
-    ignoreNextTap = false
-  }, 80)
+  isHoldSpeedActive.value = false; window.setTimeout(() => { ignoreNextTap = false }, 80)
 }
-
 function handlePlayerTap(event: MouseEvent) {
-  if (ignoreNextTap) {
-    ignoreNextTap = false
-    return
-  }
-
-  const now = Date.now()
-  const tapX = event.clientX
-  const isDoubleTap = now - lastTapAt < 280 && Math.abs(tapX - lastTapX) < 90
-
-  if (isDoubleTap) {
-    if (singleTapTimer) {
-      clearTimeout(singleTapTimer)
-      singleTapTimer = undefined
-    }
-    lastTapAt = 0
-    seekByTapPosition(tapX)
-    return
-  }
-
-  lastTapAt = now
-  lastTapX = tapX
-  if (singleTapTimer) clearTimeout(singleTapTimer)
-  singleTapTimer = setTimeout(() => {
-    toggleHlsPlayback()
-    singleTapTimer = undefined
-  }, 260)
+  if (ignoreNextTap) { ignoreNextTap = false; return }
+  const now = Date.now(), tapX = event.clientX, isDouble = now - lastTapAt < 280 && Math.abs(tapX - lastTapX) < 90
+  if (isDouble) { if (singleTapTimer) { clearTimeout(singleTapTimer); singleTapTimer = undefined }; lastTapAt = 0; seekByTapPosition(tapX); return }
+  lastTapAt = now; lastTapX = tapX; if (singleTapTimer) clearTimeout(singleTapTimer)
+  singleTapTimer = setTimeout(() => { toggleHlsPlayback(); singleTapTimer = undefined }, 260)
 }
-
-function handleTouchStart(event: TouchEvent) {
-  const touch = event.touches[0]
-
-  if (!touch) return
-
-  touchStartX = touch.clientX
-  touchStartY = touch.clientY
-  touchStartAt = Date.now()
-}
-
+function handleTouchStart(event: TouchEvent) { const t = event.touches[0]; if (!t) return; touchStartX = t.clientX; touchStartY = t.clientY; touchStartAt = Date.now() }
 function handleTouchEnd(event: TouchEvent) {
-  if (!videoRef.value) return
-
-  const touch = event.changedTouches[0]
-  if (!touch) return
-
-  const deltaX = touch.clientX - touchStartX
-  const deltaY = touch.clientY - touchStartY
-  const elapsed = Date.now() - touchStartAt
-
-  if (Math.abs(deltaX) > 48 && Math.abs(deltaX) > Math.abs(deltaY) && elapsed < 700) {
-    seekBy(deltaX > 0 ? 10 : -10)
-    flashGestureHint(deltaX > 0 ? '+10s' : '-10s')
-    return
-  }
-
-  if (Math.abs(deltaY) > 48 && Math.abs(deltaY) > Math.abs(deltaX)) {
-    const nextVolume = Math.min(
-      Math.max(videoVolume.value + (deltaY < 0 ? 0.1 : -0.1), 0),
-      1
-    )
-
-    videoVolume.value = Number(nextVolume.toFixed(1))
-    videoRef.value.volume = videoVolume.value
-    videoRef.value.muted = videoVolume.value === 0
-    isVideoMuted.value = videoRef.value.muted
+  if (!videoRef.value) return; const t = event.changedTouches[0]; if (!t) return
+  const dx = t.clientX - touchStartX, dy = t.clientY - touchStartY, el = Date.now() - touchStartAt
+  if (Math.abs(dx) > 48 && Math.abs(dx) > Math.abs(dy) && el < 700) { seekBy(dx > 0 ? 10 : -10); flashGestureHint(dx > 0 ? '+10s' : '-10s'); return }
+  if (Math.abs(dy) > 48 && Math.abs(dy) > Math.abs(dx)) {
+    const nv = Math.min(Math.max(videoVolume.value + (dy < 0 ? 0.1 : -0.1), 0), 1)
+    videoVolume.value = Number(nv.toFixed(1)); videoRef.value.volume = videoVolume.value; videoRef.value.muted = videoVolume.value === 0; isVideoMuted.value = videoRef.value.muted
   }
 }
 
 async function saveWatchHistory() {
   if (!import.meta.client || !movie.value) return
-
-  const source = String(route.query.source || movie.value.source || '')
-  const slug = String(route.params.slug)
   await persistWatchHistory({
-    source,
-    slug,
-    name: movie.value.name,
-    originName: movie.value.originName,
-    thumb: movie.value.thumb,
-    poster: movie.value.poster,
-    episodeName: activeEpisode.value?.name,
-    episodeIndex: selectedEpisode.value,
-    serverIndex: selectedServer.value,
-    progressSeconds: Math.floor(progressSeconds.value),
-    durationSeconds: Math.floor(durationSeconds.value),
-    updatedAt: Date.now(),
+    source: String(route.query.source || movie.value.source || ''), slug: String(route.params.slug),
+    name: movie.value.name, originName: movie.value.originName, thumb: movie.value.thumb, poster: movie.value.poster,
+    episodeName: activeEpisode.value?.name, episodeIndex: selectedEpisode.value, serverIndex: selectedServer.value,
+    progressSeconds: Math.floor(progressSeconds.value), durationSeconds: Math.floor(durationSeconds.value), updatedAt: Date.now(),
   })
 }
 
-function flashActionMessage(message: string) {
-  actionMessage.value = message
-  window.setTimeout(() => {
-    if (actionMessage.value === message) actionMessage.value = ''
-  }, 2200)
-}
-
-async function refreshFavoriteState() {
-  if (!libraryItem.value) return
-  isFavoriteMovie.value = await isFavorite(libraryItem.value)
-}
-
+function flashActionMessage(message: string) { actionMessage.value = message; window.setTimeout(() => { if (actionMessage.value === message) actionMessage.value = '' }, 2200) }
+async function refreshFavoriteState() { if (!libraryItem.value) return; isFavoriteMovie.value = await isFavorite(libraryItem.value) }
 async function toggleFavorite() {
-  if (!libraryItem.value || actionBusy.value) return
-
-  actionBusy.value = true
-  if (isFavoriteMovie.value) {
-    await removeFavorite(libraryItem.value)
-    isFavoriteMovie.value = false
-    flashActionMessage('Đã bỏ khỏi yêu thích.')
-  } else {
-    await saveFavorite(libraryItem.value)
-    isFavoriteMovie.value = true
-    flashActionMessage('Đã lưu vào yêu thích.')
-  }
+  if (!libraryItem.value || actionBusy.value) return; actionBusy.value = true
+  if (isFavoriteMovie.value) { await removeFavorite(libraryItem.value); isFavoriteMovie.value = false; flashActionMessage('Đã bỏ khỏi yêu thích.') }
+  else { await saveFavorite(libraryItem.value); isFavoriteMovie.value = true; flashActionMessage('Đã lưu vào yêu thích.') }
   actionBusy.value = false
 }
-
 async function addToWatchLater() {
-  if (!libraryItem.value || actionBusy.value) return
-
-  actionBusy.value = true
-  await saveWatchLater(libraryItem.value)
-  actionBusy.value = false
-  flashActionMessage('Đã thêm vào danh sách xem sau.')
+  if (!libraryItem.value || actionBusy.value) return; actionBusy.value = true; await saveWatchLater(libraryItem.value); actionBusy.value = false; flashActionMessage('Đã thêm vào xem sau.')
 }
-
 async function shareMovie() {
   if (!import.meta.client || !movie.value) return
+  try { if (navigator.share) { await navigator.share({ title: `${movie.value.name} - CineK`, text: activeEpisode.value?.name || movie.value.name, url: window.location.href }); return } await navigator.clipboard.writeText(window.location.href); flashActionMessage('Đã copy link.') }
+  catch { flashActionMessage('Chưa chia sẻ được.') }
+}
 
-  try {
-    if (navigator.share) {
-      await navigator.share({
-        title: `${movie.value.name} - CineK`,
-        text: activeEpisode.value?.name || movie.value.originName || movie.value.name,
-        url: window.location.href,
-      })
-      return
-    }
-
-    await navigator.clipboard.writeText(window.location.href)
-    flashActionMessage('Đã copy link phim.')
-  } catch {
-    flashActionMessage('Chưa chia sẻ được, bạn thử lại nhé.')
-  }
+function getEpisodeDisplay() {
+  const ep = movie.value?.episode, total = movie.value?.episodeTotal
+  if (!ep) return undefined
+  const totalNum = total ? total.replace(/[^0-9]/g, '') : '', epNum = ep.replace(/[^0-9]/g, '')
+  if (epNum && totalNum && epNum !== totalNum) return `Tập ${epNum}/${totalNum}`
+  return ep
 }
 
 onMounted(async () => {
@@ -946,158 +410,61 @@ onMounted(async () => {
   window.addEventListener('resize', handleOrientationFullscreen)
   screen.orientation?.addEventListener?.('change', handleOrientationFullscreen)
 })
-
 onBeforeUnmount(() => {
-  if (hasStarted.value) saveWatchHistory()
-  stopProgressTimer()
-  if (controlsHideTimer) clearTimeout(controlsHideTimer)
-  if (edgeProgressTimer) clearTimeout(edgeProgressTimer)
-  if (singleTapTimer) clearTimeout(singleTapTimer)
-  if (holdSpeedTimer) clearTimeout(holdSpeedTimer)
-  clearHlsFallbackTimer()
-  destroyHlsPlayer()
-  if (import.meta.client) document.removeEventListener('visibilitychange', handleVisibilityChange)
-  if (import.meta.client) document.removeEventListener('keydown', handleKeyboardShortcut)
-  if (import.meta.client) document.removeEventListener('fullscreenchange', updateFullscreenState)
-  if (import.meta.client) document.removeEventListener('webkitfullscreenchange', updateFullscreenState)
-  if (import.meta.client) window.removeEventListener('orientationchange', handleOrientationFullscreen)
-  if (import.meta.client) window.removeEventListener('resize', handleOrientationFullscreen)
-  if (import.meta.client) screen.orientation?.removeEventListener?.('change', handleOrientationFullscreen)
+  if (hasStarted.value) saveWatchHistory(); stopProgressTimer()
+  if (controlsHideTimer) clearTimeout(controlsHideTimer); if (edgeProgressTimer) clearTimeout(edgeProgressTimer)
+  if (singleTapTimer) clearTimeout(singleTapTimer); if (holdSpeedTimer) clearTimeout(holdSpeedTimer)
+  clearHlsFallbackTimer(); destroyHlsPlayer()
+  if (import.meta.client) { document.removeEventListener('visibilitychange', handleVisibilityChange); document.removeEventListener('keydown', handleKeyboardShortcut); document.removeEventListener('fullscreenchange', updateFullscreenState); document.removeEventListener('webkitfullscreenchange', updateFullscreenState); window.removeEventListener('orientationchange', handleOrientationFullscreen); window.removeEventListener('resize', handleOrientationFullscreen); screen.orientation?.removeEventListener?.('change', handleOrientationFullscreen) }
 })
-
-watch(() => route.query, () => {
-  selectedServer.value = Math.max(Number(route.query.server || 0), 0)
-  selectedEpisode.value = Math.max(Number(route.query.ep || 1) - 1, 0)
-  hasStarted.value = false
-  resetProgressTimer()
-  destroyHlsPlayer()
-})
-
-watch([movie, activeEpisode], () => {
-  if (hasStarted.value) saveWatchHistory()
-})
-
-watch(libraryItem, () => {
-  refreshFavoriteState()
-})
-
+watch(() => route.query, () => { selectedServer.value = Math.max(Number(route.query.server || 0), 0); selectedEpisode.value = Math.max(Number(route.query.ep || 1) - 1, 0); selectedSubtitle.value = 0; hasStarted.value = false; resetProgressTimer(); destroyHlsPlayer() })
+watch([movie, activeEpisode], () => { if (hasStarted.value) saveWatchHistory() })
+watch(libraryItem, () => { refreshFavoriteState() })
 useHead(() => ({
-  title: movie.value ? `Xem ${movie.value.name} - ${activeEpisode.value?.name || 'Tập 1'} - CineK` : 'Đang tải phim - CineK',
-  meta: [
-    {
-      name: 'description',
-      content: movie.value
-        ? `Xem ${movie.value.name} ${activeEpisode.value?.name || 'Tập 1'} online tại CineK, hỗ trợ Vietsub, thuyết minh, lồng tiếng và nhiều server xem.`
-        : 'Xem phim Hàn Quốc online tại CineK với trình phát mượt, hỗ trợ nhiều server xem.',
-    },
-    {
-      property: 'og:title',
-      content: movie.value ? `Xem ${movie.value.name} - CineK` : 'CineK - Xem phim Hàn Quốc online',
-    },
-    {
-      property: 'og:description',
-      content: movie.value?.content || 'Xem phim Hàn Quốc online với trải nghiệm mượt trên CineK.',
-    },
-    {
-      property: 'og:image',
-      content: movie.value?.poster || movie.value?.thumb || '/icon.png',
-    },
-  ],
+  title: movie.value ? `Xem ${movie.value.name} - CineK` : 'Đang tải - CineK',
+  meta: [{ name: 'description', content: movie.value ? `Xem ${movie.value.name} online` : '' }, { property: 'og:title', content: movie.value ? `${movie.value.name} - CineK` : 'CineK' }, { property: 'og:image', content: movie.value?.poster || movie.value?.thumb || '/icon.png' }],
 }))
 </script>
 
 <template>
-  <main class="min-h-screen bg-[#08090d] text-white">
+  <main class="min-h-screen bg-[#0f111a] text-white">
     <AppHeader />
 
-    <Transition name="watch-page" mode="out-in">
-      <section v-if="pending && !movie" key="loading"
-        class="mx-auto max-w-390 px-3 pb-16 pt-24 sm:px-6 sm:pt-36 lg:px-8 lg:pt-28 xl:px-10">
-        <div class="h-5 w-28 animate-pulse rounded bg-white/10" />
-
-        <div class="mt-4 overflow-hidden rounded-md border border-white/10 bg-black shadow-2xl shadow-black/40">
-          <div class="relative aspect-video overflow-hidden bg-slate-950">
-            <div class="absolute left-3 top-3 hidden h-8 w-36 animate-pulse rounded-md bg-white/10 sm:block" />
-            <div class="absolute right-3 top-3 hidden h-8 w-44 animate-pulse rounded-md bg-white/10 sm:block" />
-            <div class="absolute inset-0 grid place-items-center">
-              <Loader2 class="size-10 animate-spin text-yellow-300" />
-            </div>
+    <!-- Loading -->
+    <section v-if="pending && !movie" class="mx-auto max-w-[1400px] px-4 pt-20 sm:px-6 lg:px-8 xl:px-10">
+      <div class="-mx-4 mb-6 overflow-hidden sm:mx-0 sm:rounded-xl">
+        <div class="aspect-video w-full animate-pulse rounded-none sm:rounded-t-xl bg-white/10" />
+        <div class="flex h-14 items-center justify-between border-t border-white/5 bg-black px-4 sm:px-6">
+          <div class="flex items-center gap-3">
+            <div class="h-8 w-8 animate-pulse rounded-full bg-white/10" />
+            <div class="h-3 w-24 animate-pulse rounded bg-white/10" />
           </div>
-          <div class="flex items-center justify-center gap-7 border-t border-white/10 px-4 py-4 sm:justify-start">
-            <div class="h-4 w-20 animate-pulse rounded bg-white/10" />
-            <div class="h-4 w-20 animate-pulse rounded bg-white/10" />
-            <div class="h-4 w-20 animate-pulse rounded bg-white/10" />
+          <div class="flex items-center gap-3">
+            <div v-for="i in 4" :key="i" class="h-7 w-7 animate-pulse rounded-md bg-white/10" />
           </div>
         </div>
-
-        <div class="mt-5 grid gap-6 lg:grid-cols-[minmax(0,1fr)_24rem]">
-          <section>
-            <div class="flex gap-4">
-              <div class="hidden h-28 w-20 animate-pulse rounded-md bg-white/10 sm:block" />
-              <div class="min-w-0 flex-1">
-                <div class="h-7 w-3/4 animate-pulse rounded bg-white/10" />
-                <div class="mt-3 h-4 w-1/2 animate-pulse rounded bg-yellow-300/20" />
-                <div class="mt-4 flex flex-wrap gap-2">
-                  <div class="h-7 w-14 animate-pulse rounded bg-white/10" />
-                  <div class="h-7 w-20 animate-pulse rounded bg-white/10" />
-                  <div class="h-7 w-16 animate-pulse rounded bg-white/10" />
-                </div>
-              </div>
-            </div>
-            <div class="mt-5 space-y-3">
-              <div class="h-4 animate-pulse rounded bg-white/10" />
-              <div class="h-4 w-11/12 animate-pulse rounded bg-white/10" />
-              <div class="h-4 w-4/5 animate-pulse rounded bg-white/10" />
-            </div>
-            <div class="mt-5 h-12 animate-pulse rounded-md bg-yellow-300/20" />
-            <div class="mt-6 border-t border-white/10 pt-4">
-              <div class="h-9 w-32 animate-pulse rounded bg-white/10" />
-              <div class="mt-5 grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
-                <div v-for="index in 12" :key="index" class="h-14 animate-pulse rounded-md bg-white/10" />
-              </div>
-            </div>
-          </section>
-
-          <aside class="hidden rounded-md border border-white/10 bg-white/5 p-5 sm:block lg:self-start">
-            <div class="h-5 w-32 animate-pulse rounded bg-white/10" />
-            <div class="mt-5 space-y-4">
-              <div class="h-4 animate-pulse rounded bg-white/10" />
-              <div class="h-4 w-5/6 animate-pulse rounded bg-white/10" />
-              <div class="h-4 w-2/3 animate-pulse rounded bg-white/10" />
-            </div>
-          </aside>
-        </div>
-      </section>
-
-      <div v-else-if="error || !movie" key="error"
-        class="mx-auto flex min-h-screen max-w-4xl items-center px-4 pt-36 lg:pt-24">
-        <div>
-          <h1 class="text-3xl font-black">Không mở được phim</h1>
-          <p class="mt-3 text-slate-300">Phim có thể đang được cập nhật hoặc hiện chưa có tập xem.</p>
-        </div>
       </div>
+    </section>
 
-      <section v-else key="content"
-        class="relative mx-auto max-w-390 px-3 pb-16 pt-24 sm:px-6 sm:pt-36 lg:px-8 lg:pt-28 xl:px-10">
-        <div v-if="pending"
-          class="pointer-events-none fixed inset-x-0 top-0 z-50 h-0.5 overflow-hidden bg-yellow-400/10">
-          <span class="kr-loading-line block h-full w-1/3 rounded-full bg-yellow-300" />
-        </div>
+    <!-- Error -->
+    <div v-else-if="error || !movie" class="mx-auto flex min-h-screen max-w-4xl items-center px-4 pt-36">
+      <div>
+        <h1 class="text-3xl font-black">Không mở được phim</h1>
+        <p class="mt-3 text-slate-300">Phim có thể đang được cập nhật.</p>
+      </div>
+    </div>
 
-        <NuxtLink
-          :to="{ path: `/phim/${route.params.slug}`, query: { source: route.query.source, srcs: route.query.srcs } }"
-          class="text-sm font-bold text-slate-100 hover:text-yellow-200">
-          ‹ Chi tiết phim
-        </NuxtLink>
-
-        <div class="mt-4 overflow-hidden rounded-md border border-white/10 bg-black shadow-2xl shadow-black/40">
+    <!-- Watch Page -->
+    <template v-else>
+      <section class="mx-auto max-w-[1400px] px-4 pt-16 sm:px-6 lg:px-8 xl:px-10">
+        <!-- Player -->
+        <div class="-mx-4 mb-6 overflow-hidden sm:mx-0 sm:rounded-xl">
           <div ref="playerViewportRef" class="relative aspect-video bg-slate-950">
             <div v-if="pending"
               class="pointer-events-none absolute inset-0 z-30 grid place-items-center bg-black/45 text-yellow-200 backdrop-blur-[1px]">
               <div
                 class="inline-flex items-center gap-3 rounded-full border border-yellow-300/25 bg-black/70 px-4 py-2 text-xs font-black shadow-xl shadow-black/30">
-                <Loader2 class="size-4 animate-spin" />
-                Đang tải phim
+                <Loader2 class="size-4 animate-spin" /> Đang tải phim
               </div>
             </div>
 
@@ -1110,37 +477,27 @@ useHead(() => ({
                 @play="isVideoPlaying = true; showControlsTemporarily()"
                 @pause="isVideoPlaying = false; controlsVisible = true" @ended="handleVideoEnded"
                 @error="handleVideoError" />
-
               <div
                 class="pointer-events-none absolute inset-x-0 top-0 h-20 bg-linear-to-b from-black/35 to-transparent" />
-
               <div v-if="isVideoBuffering"
                 class="pointer-events-none absolute inset-0 z-10 grid place-items-center bg-black/20 text-yellow-200">
                 <Loader2 class="size-10 animate-spin" />
               </div>
-
               <div v-if="hlsErrorMessage"
                 class="absolute left-1/2 top-1/2 z-20 w-[min(90%,28rem)] -translate-x-1/2 -translate-y-1/2 rounded-md border border-red-300/30 bg-red-950/85 p-4 text-center text-sm font-bold text-red-100">
-                {{ hlsErrorMessage }}
-              </div>
-
+                {{ hlsErrorMessage }}</div>
               <button v-if="videoCurrentTime < skipIntroSeconds && durationSeconds > 180" type="button"
                 class="absolute bottom-24 right-4 z-20 rounded-md border border-yellow-300/80 bg-black/55 px-4 py-2 text-xs font-black text-yellow-200 shadow-lg shadow-black/30 backdrop-blur transition hover:border-yellow-200 hover:bg-yellow-400 hover:text-slate-950"
-                @click="skipIntro">
-                Bỏ intro
-              </button>
-
+                @click="skipIntro">Bỏ intro</button>
               <button v-if="skipOutroSeconds && videoCurrentTime > skipOutroSeconds - 45 && hasNextEpisode"
                 type="button"
                 class="absolute bottom-24 right-4 z-20 inline-flex items-center gap-2 rounded-md border border-yellow-300/80 bg-black/55 px-4 py-2 text-xs font-black text-yellow-200 shadow-lg shadow-black/30 backdrop-blur transition hover:border-yellow-200 hover:bg-yellow-400 hover:text-slate-950"
                 @click="playNextEpisode(true)">
                 <SkipForward class="size-4" /> Tập tiếp
               </button>
-
               <button type="button"
                 class="absolute inset-0 grid cursor-pointer place-items-center text-white transition"
-                :class="isVideoPlaying && !controlsVisible ? 'opacity-0' : 'opacity-100'"
-                :aria-label="isVideoPlaying ? 'Tạm dừng' : 'Phát phim'" @click="handlePlayerTap"
+                :class="isVideoPlaying && !controlsVisible ? 'opacity-0' : 'opacity-100'" @click="handlePlayerTap"
                 @pointerdown="handlePlayerPointerDown" @pointerup="stopHoldSpeed" @pointercancel="stopHoldSpeed"
                 @pointerleave="stopHoldSpeed" @contextmenu.prevent>
                 <span
@@ -1149,294 +506,290 @@ useHead(() => ({
                   <Play v-else class="size-5 fill-current sm:size-7" />
                 </span>
               </button>
-
               <div v-if="gestureHint || isHoldSpeedActive"
                 class="pointer-events-none absolute left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black/55 px-4 py-2 text-sm font-black text-white shadow-2xl backdrop-blur">
-                {{ isHoldSpeedActive ? '2x' : gestureHint }}
-              </div>
-
+                {{ isHoldSpeedActive ? '2x' : gestureHint }}</div>
               <div class="kr-hls-edge-progress"
                 :class="edgeProgressVisible || (isHlsFullscreen && !shouldShowHlsControls) ? 'opacity-100' : 'opacity-0'" />
-
               <div class="kr-hls-controls text-white transition"
                 :class="shouldShowHlsControls ? 'translate-y-0 opacity-100' : 'pointer-events-none translate-y-3 opacity-0'">
-                <div class="kr-hls-time-row">
-                  <span>{{ formatPlayerTime(videoCurrentTime) }}</span>
-                  <span>{{ formatPlayerTime(durationSeconds) }}</span>
-                </div>
+                <div class="kr-hls-time-row"><span>{{ formatPlayerTime(videoCurrentTime) }}</span><span>{{
+                  formatPlayerTime(durationSeconds) }}</span></div>
                 <input class="kr-hls-range" type="range" min="0" :max="durationSeconds || 0" :value="videoCurrentTime"
                   step="1" @input="seekHlsPlayer">
                 <div class="kr-hls-actions">
                   <div class="kr-hls-actions-left">
-                    <button type="button" class="kr-hls-control-button is-primary"
-                      :aria-label="isVideoPlaying ? 'Tạm dừng' : 'Phát phim'" @click="toggleHlsPlayback">
+                    <button type="button" class="kr-hls-control-button is-primary" @click="toggleHlsPlayback">
                       <Pause v-if="isVideoPlaying" class="fill-current" />
                       <Play v-else class="fill-current" />
                     </button>
-                    <button type="button" class="kr-hls-control-button" aria-label="Lùi 10 giây" @click="seekBy(-10)">
+                    <button type="button" class="kr-hls-control-button" @click="seekBy(-10)">
                       <Rewind />
                     </button>
-                    <button type="button" class="kr-hls-control-button" aria-label="Tua 10 giây" @click="seekBy(10)">
+                    <button type="button" class="kr-hls-control-button" @click="seekBy(10)">
                       <FastForward />
                     </button>
-                    <button type="button" class="kr-hls-control-button" :aria-label="isVideoMuted ? 'Bật âm' : 'Tắt âm'"
-                      @click="toggleMute">
+                    <button type="button" class="kr-hls-control-button" @click="toggleMute">
                       <VolumeX v-if="isVideoMuted" />
                       <Volume2 v-else />
                     </button>
                     <input class="kr-volume-range hidden sm:block" type="range" min="0" max="1" step="0.05"
                       :value="videoVolume" @input="changeVolume">
                   </div>
-
                   <div class="kr-hls-actions-right">
                     <div class="relative">
                       <button type="button" class="kr-hls-control-button"
-                        :class="isSettingsOpen ? 'bg-yellow-400 text-slate-950' : ''" aria-label="Cài đặt player"
+                        :class="isSettingsOpen ? 'bg-yellow-400 text-slate-950' : ''"
                         @click="isSettingsOpen = !isSettingsOpen; controlsVisible = true">
                         <Settings />
                       </button>
-
                       <div v-if="isSettingsOpen"
                         class="absolute bottom-10 right-0 z-30 w-48 rounded-md border border-white/10 bg-slate-950/95 p-3 text-white shadow-2xl shadow-black/40 backdrop-blur sm:bottom-12 sm:w-56">
-                        <label class="block text-[11px] font-black uppercase text-slate-400">
-                          Tốc độ phát
-                        </label>
+                        <label class="block text-[11px] font-black uppercase text-slate-400">Tốc độ phát</label>
                         <select
                           class="mt-2 h-10 w-full cursor-pointer rounded-md border border-white/10 bg-white/10 px-3 text-sm font-black text-white outline-none"
-                          :value="playbackRate" aria-label="Tốc độ phát" @change="changePlaybackRate">
+                          :value="playbackRate" @change="changePlaybackRate">
                           <option class="bg-slate-950" value="0.75">0.75x</option>
                           <option class="bg-slate-950" value="1">1x</option>
                           <option class="bg-slate-950" value="1.25">1.25x</option>
                           <option class="bg-slate-950" value="1.5">1.5x</option>
                           <option class="bg-slate-950" value="2">2x</option>
                         </select>
-
-                        <label class="mt-4 block text-[11px] font-black uppercase text-slate-400">
-                          Chất lượng
-                        </label>
+                        <label class="mt-4 block text-[11px] font-black uppercase text-slate-400">Chất lượng</label>
                         <select
                           class="mt-2 h-10 w-full cursor-pointer rounded-md border border-white/10 bg-white/10 px-3 text-sm font-black text-white outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                          :value="selectedQuality" :disabled="!qualityLevels.length" aria-label="Chất lượng"
-                          @change="changeQuality">
+                          :value="selectedQuality" :disabled="!qualityLevels.length" @change="changeQuality">
                           <option class="bg-slate-950" value="-1">Auto</option>
                           <option v-for="level in qualityLevels" :key="level.level" class="bg-slate-950"
-                            :value="level.level">
-                            {{ level.label }}
-                          </option>
+                            :value="level.level">{{ level.label }}</option>
                         </select>
                       </div>
                     </div>
                     <button type="button" class="kr-hls-control-button kr-hls-desktop-button"
-                      aria-label="Picture in Picture" @click="togglePictureInPicture">
+                      @click="togglePictureInPicture">
                       <PictureInPicture2 />
                     </button>
                     <button v-if="hasNextEpisode" type="button" class="kr-hls-control-button kr-hls-desktop-button"
-                      aria-label="Tập tiếp theo" @click="playNextEpisode(true)">
+                      @click="playNextEpisode(true)">
                       <SkipForward />
                     </button>
-                    <button type="button" class="kr-hls-control-button" aria-label="Toàn màn hình"
-                      @click="toggleFullscreen">
+                    <button type="button" class="kr-hls-control-button" @click="toggleFullscreen">
                       <Maximize />
                     </button>
                   </div>
                 </div>
               </div>
             </div>
-            <button v-else type="button" class="absolute inset-0 text-white" :aria-label="`Phát ${movie.name}`"
-              @click="startPlayer">
-              <img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover opacity-45">
+
+            <button v-else type="button" class="absolute inset-0 text-white" @click="startPlayer">
+              <img :src="movie.thumb || movie.poster" :alt="movie.name" class="h-full w-full object-cover opacity-45">
               <div class="absolute inset-0 bg-black/45" />
               <div class="absolute inset-0 grid place-items-center">
                 <span
                   class="grid size-16 place-items-center rounded-full bg-yellow-400 text-slate-950 shadow-xl shadow-yellow-950/30">
                   <Play class="size-7 fill-current" />
                 </span>
-                <span v-if="!hlsPlayerUrl"
-                  class="mt-4 rounded-md bg-black/70 px-4 py-2 text-xs font-black text-slate-100">
-                  Tập này chưa có link HLS
-                </span>
               </div>
             </button>
           </div>
 
-          <div
-            class="flex items-center justify-center gap-7 border-t border-white/10 px-4 py-4 text-xs font-bold text-slate-100 sm:justify-start sm:gap-4 sm:py-3">
-            <button type="button"
-              class="inline-flex cursor-pointer items-center gap-2 hover:text-yellow-200 disabled:cursor-not-allowed disabled:opacity-70"
-              :class="isFavoriteMovie ? 'text-yellow-300' : ''" :disabled="actionBusy" @click="toggleFavorite">
-              <Heart class="size-4 sm:size-3" :class="isFavoriteMovie ? 'fill-current' : ''" />
-              {{ isFavoriteMovie ? 'Đã thích' : 'Yêu thích' }}
-            </button>
-            <button type="button"
-              class="inline-flex cursor-pointer items-center gap-2 hover:text-yellow-200 disabled:cursor-not-allowed disabled:opacity-70"
-              :disabled="actionBusy" @click="addToWatchLater">
-              <Plus class="size-4 sm:size-3" /> Thêm vào
-            </button>
-            <button type="button" class="inline-flex cursor-pointer items-center gap-2 hover:text-yellow-200"
-              @click="shareMovie">
-              <Share2 class="size-4 sm:size-3" /> Chia sẻ
-            </button>
-            <span v-if="actionMessage" class="hidden text-xs font-bold text-yellow-200 sm:inline">
-              {{ actionMessage }}
-            </span>
-          </div>
-          <p v-if="actionMessage"
-            class="border-t border-white/10 px-4 pb-3 text-center text-xs font-bold text-yellow-200 sm:hidden">
-            {{ actionMessage }}
-          </p>
-        </div>
-
-        <div class="mt-5 grid gap-6 lg:grid-cols-[minmax(0,1fr)_24rem]">
-          <section>
-            <div class="flex gap-4">
-              <img :src="movie.poster || movie.thumb" :alt="movie.name"
-                class="hidden h-28 w-20 rounded-md object-cover sm:block">
-              <div>
-                <h1 class="text-[1.35rem] font-black leading-tight sm:text-2xl">{{ movie.name }}</h1>
-                <p v-if="movie.originName" class="mt-1 text-sm font-bold text-yellow-200">{{ movie.originName }}</p>
-                <div class="mt-3 flex flex-wrap gap-2 text-xs font-black">
-                  <span v-if="movie.quality" class="rounded bg-white/12 px-2 py-1">{{ movie.quality }}</span>
-                  <span v-if="movie.episode" class="rounded bg-white/12 px-2 py-1">{{ movie.episode }}</span>
-                  <span v-if="movie.time" class="rounded bg-white/12 px-2 py-1">{{ movie.time }}</span>
-                  <span v-if="movie.rating"
-                    class="inline-flex items-center gap-1 rounded bg-yellow-400 px-2 py-1 text-slate-950">
-                    <Star class="size-3 fill-current" />
-                    {{ movie.rating.toFixed(1) }}
-                  </span>
-                </div>
+          <!-- Player Toolbar -->
+          <div class="flex h-14 items-center justify-between border-t border-white/5 bg-black px-4 sm:px-6">
+            <div class="flex items-center gap-3">
+              <div class="grid size-8 place-items-center rounded-full bg-yellow-400/20 text-yellow-300">
+                <Play class="size-4 fill-current" />
+              </div>
+              <div class="text-sm">
+                <span class="font-semibold text-white">{{ formatEpisodeName(activeEpisode?.name, selectedEpisode)
+                  }}</span>
+                <span class="mx-2 text-white/30">•</span>
+                <span class="text-white/60">{{ serverLabel(activeServer, selectedServer) }}</span>
               </div>
             </div>
-
-            <div v-if="movie.content" class="mt-4">
-              <p class="text-sm leading-7 text-slate-200" :class="descriptionExpanded ? '' : 'line-clamp-3'">{{ movie.content }}</p>
+            <div class="flex items-center gap-1">
               <button type="button"
-                class="mt-2 inline-flex items-center gap-1 text-xs font-semibold text-yellow-300 transition hover:text-yellow-200 sm:hidden"
-                @click="descriptionExpanded = !descriptionExpanded">
-                {{ descriptionExpanded ? 'Thu gọn' : 'Xem thêm' }}
-                <svg class="size-3 transition" :class="descriptionExpanded ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-                </svg>
+                class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-medium text-white/70 hover:bg-white/10 hover:text-white transition"
+                title="Báo lỗi">
+                <Bug class="size-4" /><span class="hidden sm:inline">Báo lỗi</span>
+              </button>
+              <button type="button"
+                class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-medium text-white/70 hover:bg-white/10 hover:text-white transition"
+                title="Hướng dẫn">
+                <CircleHelp class="size-4" /><span class="hidden sm:inline">Hướng dẫn</span>
               </button>
             </div>
+          </div>
+        </div>
 
-            <div class="mt-5 rounded-md bg-yellow-400 px-4 py-3 text-sm font-black text-slate-950">
-              Đang xem {{ formatEpisodeName(activeEpisode?.name, selectedEpisode) }}
+        <!-- Movie Info + Episodes -->
+        <div class="mt-4 flex flex-col gap-8 xl:mt-8 xl:flex-row">
+          <!-- Main Content -->
+          <div class="min-w-0 flex-1">
+            <!-- Movie Info Card -->
+            <div class="mb-6 flex items-start gap-6 lg:gap-8">
+              <div
+                class="hidden shrink-0 aspect-[2/3] w-32 rounded-xl overflow-hidden shadow-2xl sm:block md:w-40 lg:w-[150px]">
+                <img :src="movie.poster || movie.thumb" :alt="movie.name" class="w-full h-full object-cover">
+              </div>
+              <div class="flex-1 flex flex-col gap-4 pt-1 w-full text-center sm:text-left">
+                <div>
+                  <h1 class="text-2xl md:text-[28px] font-bold text-white mb-2 leading-tight">{{ movie.name }}</h1>
+                  <h2 class="text-[#eab308] text-sm md:text-[15px] font-medium opacity-90">{{ movie.originName }}</h2>
+                </div>
+
+                <!-- Badges -->
+                <div class="flex flex-wrap justify-center sm:justify-start items-center gap-2">
+                  <span v-if="movie.rating"
+                    class="inline-flex items-center rounded overflow-hidden border border-solid border-[rgba(1,180,228,0.5)]">
+                    <span class="bg-[#01B4E4] text-white px-1.5 py-0.5 font-bold text-[10px]">TMDb</span>
+                    <span class="bg-[rgba(1,180,228,0.1)] text-white px-1.5 py-0.5 text-[10px]">{{
+                      movie.rating.toFixed(1) }}</span>
+                  </span>
+                  <span v-if="movie.quality"
+                    class="inline-flex items-center justify-center rounded-[4px] font-black h-[22px] px-2 text-[11px]"
+                    style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%);color:#141414">{{
+                      movie.quality }}</span>
+                  <span v-if="movie.year"
+                    class="text-[11px] font-medium px-2 py-0.5 border border-white/20 rounded text-white/90">{{
+                      movie.year }}</span>
+                  <span v-if="getEpisodeDisplay()"
+                    class="text-[11px] font-medium px-2 py-0.5 border border-white/20 rounded text-white/90">{{
+                      getEpisodeDisplay() }}</span>
+                </div>
+
+                <!-- Genres -->
+                <div v-if="movie.categories?.length"
+                  class="flex flex-wrap justify-center sm:justify-start items-center gap-2">
+                  <span v-for="cat in movie.categories.slice(0, 4)" :key="cat"
+                    class="text-[11px] font-medium px-2.5 py-1 bg-white/5 rounded text-white/70">{{ cat }}</span>
+                </div>
+
+                <!-- Episode Progress -->
+                <div v-if="episodeProgress.total"
+                  class="inline-flex self-center sm:self-start items-center gap-1.5 px-3 py-1.5 rounded-full mt-2 border bg-[#eab308]/10 border-[#eab308]/20 text-[#eab308]">
+                  <Loader2 class="size-3.5 animate-spin" />
+                  <span class="text-xs font-medium">Đã chiếu: {{ episodeProgress.available }} / {{ episodeProgress.total }} tập</span>
+                </div>
+
+                <!-- Description -->
+                <div class="mt-2 text-left">
+                  <p class="text-[13px] md:text-sm text-white/70 leading-relaxed line-clamp-3"
+                    :class="descriptionExpanded ? 'line-clamp-none' : ''">{{ movie.content ||
+                      'Đang cập nhật nội dung phim.' }}</p>
+                  <NuxtLink
+                    :to="{ path: `/phim/${route.params.slug}`, query: { source: route.query.source, srcs: route.query.srcs } }"
+                    class="inline-flex items-center gap-1 text-[13px] text-cinek-500 hover:underline mt-1">
+                    Thông tin phim
+                    <ChevronRight class="size-4" />
+                  </NuxtLink>
+                </div>
+              </div>
             </div>
 
-            <div class="mt-6 border-t border-white/10 pt-4">
-              <div class="hidden">
-                <div>
-                  <p class="text-xs font-black uppercase tracking-wide text-yellow-200">Chọn server</p>
-                  <h2 class="mt-1 text-[1.08rem] font-black sm:text-xl">Danh sách tập</h2>
+            <!-- Episode Section -->
+            <div id="episodes-section" class="mt-8 mb-12 scroll-mt-24">
+              <!-- Header: Season + Server -->
+              <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
+                <div class="relative flex min-w-0 items-center gap-1.5 sm:gap-2">
+                  <div class="flex shrink-0 items-center gap-1 text-[12px] font-semibold text-white/50">
+                    <Layers class="size-4" /> Phần:
+                  </div>
+                  <button
+                    class="flex items-center gap-1.5 border border-white/30 text-white bg-white/5 rounded-md px-3 py-1.5 text-sm font-medium">
+                    <span>Phần 1</span>
+                  </button>
+                </div>
+                <div class="flex min-w-0 items-center gap-2">
+                  <span class="text-[13px] text-white/60 font-medium hidden sm:inline-block shrink-0">Chọn
+                    Server:</span>
+                  <div class="relative min-w-0 sm:w-auto">
+                    <div class="flex flex-wrap gap-2">
+                      <button v-for="(server, index) in servers" :key="server.name" type="button"
+                        class="flex items-center gap-1.5 text-[13px] transition-colors rounded-md px-3 py-1.5 border font-medium"
+                        :class="selectedServer === index ? 'border-white/30 text-white bg-white/5' : 'border-transparent text-white/60 hover:text-white'"
+                        @click="selectServer(index)">
+                        {{ serverLabel(server, index) }}
+                      </button>
+                    </div>
+                  </div>
                 </div>
-                <p class="text-xs font-bold text-slate-400">
-                  {{ serverLabel(activeServer, selectedServer) }}
-                </p>
               </div>
 
-              <div v-if="servers.length > 1" class="hidden">
-                <button v-for="(server, index) in servers" :key="`${server.name}-${index}-episode-server`" type="button"
-                  class="shrink-0 rounded px-4 py-2 text-sm font-black"
-                  :class="selectedServer === index ? 'bg-yellow-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
-                  @click="selectServer(index)">
-                  {{ serverLabel(server, index) }}
+              <!-- Subtitle/Source Buttons -->
+              <div v-if="activeServer?.channels?.length" class="flex flex-wrap gap-2 mb-6">
+                <button v-for="(sub, index) in activeServer.channels" :key="sub.name || index" type="button"
+                  class="group flex items-center gap-1.5 text-xs transition-colors rounded-md px-3 py-1.5 border font-medium"
+                  :class="selectedSubtitle === index ? 'border-white/30 text-white bg-white/5' : 'border-transparent text-white/60 hover:text-white'"
+                  @click="selectSubtitle(index)">
+                  <Captions v-if="index === 0" class="size-3.5" />
+                  <Languages v-else class="size-3.5" />
+                  <span>{{ subtitleLabel(sub, index) }}</span>
+                  <span class="rounded px-1.5 text-[10px] font-bold"
+                    :class="selectedSubtitle === index ? 'bg-white text-black' : 'bg-white/10 text-white/50'">
+                    {{ sub.episodes?.length || 0 }}
+                  </span>
                 </button>
               </div>
 
-              <div class="flex flex-col gap-3 lg:flex-row lg:items-center">
-                <div class="inline-flex shrink-0 items-center gap-3 text-white">
-                  <Menu class="size-5 text-yellow-300" />
-                  <button type="button"
-                    class="inline-flex items-center gap-2 border-r border-white/15 pr-5 text-xl font-black">
-                    Phần 1
-                  </button>
-                </div>
-
-                <div v-if="servers.length > 1"
-                  class="no-scrollbar flex min-w-0 flex-1 gap-2 overflow-x-auto pb-1 lg:pb-0">
-                  <button v-for="(server, index) in servers" :key="`${server.name}-${index}-episode-server-pill`"
-                    type="button"
-                    class="inline-flex shrink-0 items-center gap-2 rounded-md border px-4 py-2 text-sm font-black transition"
-                    :class="selectedServer === index ? 'border-white/35 bg-white/12 text-white' : 'border-transparent bg-transparent text-slate-300 hover:bg-white/8 hover:text-white'"
-                    @click="selectServer(index)">
-                    <span class="size-3 rounded-sm border border-current" aria-hidden="true" />
-                    {{ serverLabel(server, index) }}
-                  </button>
-                </div>
-
-                <div v-else class="text-sm font-bold text-slate-300">
-                  {{ serverLabel(activeServer, selectedServer) }}
-                </div>
-
-                <div class="hidden shrink-0 items-center gap-2 text-xs font-bold text-slate-300 lg:flex">
-                  <span>Rút gọn</span>
-                  <span
-                    class="relative inline-flex h-5 w-9 items-center rounded-full bg-yellow-400/18 ring-1 ring-yellow-300/35">
-                    <span class="ml-auto mr-1 size-3 rounded-full bg-yellow-300" />
-                  </span>
-                </div>
-              </div>
-
-              <div v-if="activeServer?.episodes?.length"
-                class="mt-5 grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
-                <NuxtLink v-for="(episode, index) in activeServer.episodes" :key="`${episode.name}-${index}`"
+              <!-- Episode Grid -->
+              <div v-if="activeSubtitle?.episodes?.length"
+                class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-x-2.5 gap-y-2.5">
+                <NuxtLink v-for="(episode, index) in activeSubtitle.episodes" :key="`${episode.name}-${index}`"
                   :to="episodeLink(index)"
-                  class="inline-flex h-14 items-center justify-center gap-2 rounded-md px-3 text-center text-sm font-black transition"
-                  :class="selectedEpisode === index ? 'bg-yellow-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
+                  class="group flex items-center justify-center gap-1.5 rounded-lg transition-all py-2.5 px-2 text-[13px] bg-[#191b24] text-white/90 hover:text-[#FFD166] hover:bg-[#1f2130] shadow-sm"
+                  :class="selectedEpisode === index ? 'bg-[#F5C518]/20 text-[#FFD166] border border-[#F5C518]/40' : ''">
                   <Play class="size-3 fill-current" />
                   {{ formatEpisodeName(episode.name, index) }}
                 </NuxtLink>
               </div>
-
-              <p v-else class="mt-4 rounded-md border border-white/10 bg-slate-900/70 p-4 text-sm text-slate-300">
-                Chưa có tập xem từ server này.
+              <p v-else
+                class="mt-4 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
+                Chưa có tập xem.
               </p>
             </div>
-          </section>
+          </div>
 
-          <aside class="hidden rounded-md border border-white/10 bg-white/5 p-5 sm:block lg:self-start">
-            <h2 class="text-base font-black">Thông tin phim</h2>
-            <div class="mt-4 space-y-3 text-sm text-slate-300">
-              <p><span class="font-black text-white">Số tập:</span> {{ movie.episode || 'Đang cập nhật' }}</p>
-              <p v-if="movie.countries?.length"><span class="font-black text-white">Quốc gia:</span> {{
-                movie.countries.join(', ') }}</p>
-              <p v-if="movie.year"><span class="font-black text-white">Năm:</span> {{ movie.year }}</p>
-              <p v-if="actorSummary"><span class="font-black text-white">Diễn viên:</span> {{
-                actorSummary }}</p>
+          <!-- Sidebar -->
+          <aside class="xl:w-[320px] shrink-0 xl:border-l xl:border-white/5 xl:pl-8">
+            <h3 class="text-sm font-bold text-white mb-4">Phim đề xuất</h3>
+            <div class="space-y-3">
+              <NuxtLink v-for="rel in relatedMovies" :key="rel.slug"
+                :to="{ path: `/phim/${rel.slug}`, query: { source: rel.source } }"
+                class="flex gap-3 group rounded-lg p-2 transition hover:bg-white/5 bg-[#1A1A24]">
+                <img :src="rel.thumb || rel.poster" :alt="rel.name" class="w-12 h-16 rounded object-cover shrink-0">
+                <div class="min-w-0">
+                  <p class="text-sm font-semibold text-white group-hover:text-yellow-300 transition truncate">{{
+                    rel.name }}</p>
+                  <p class="text-[11px] text-slate-400 mt-0.5">{{ rel.year || rel.quality || '' }}</p>
+                  <p v-if="rel.episode" class="text-[10px] text-white/60 mt-1">{{ rel.episode }}</p>
+                </div>
+              </NuxtLink>
             </div>
           </aside>
         </div>
+
+        <!-- Comment Section -->
+        <div class="mb-12">
+          <div class="flex items-center gap-4 mb-6">
+            <div class="flex items-center gap-2.5">
+              <h2 class="text-xl font-bold text-white">Bình luận</h2>
+            </div>
+          </div>
+          <div class="flex items-center gap-3 mb-8 p-4 bg-[#1a1a24] border border-white/10 rounded-xl">
+            <p class="text-sm text-slate-400">Đăng nhập để bình luận về phim này.</p>
+          </div>
+          <div class="flex flex-col items-center justify-center py-12 text-center">
+            <p class="text-slate-400 text-sm">Chưa có bình luận nào.</p>
+          </div>
+        </div>
       </section>
-    </Transition>
+    </template>
+
+    <AppFooter />
   </main>
 </template>
 
 <style scoped>
-.watch-page-enter-active,
-.watch-page-leave-active {
-  transition: opacity 0.18s ease, transform 0.18s ease;
-}
-
-.watch-page-enter-from,
-.watch-page-leave-to {
-  opacity: 0;
-  transform: translateY(6px);
-}
-
-.kr-loading-line {
-  animation: kr-loading-slide 1s ease-in-out infinite;
-}
-
-@keyframes kr-loading-slide {
-  0% {
-    transform: translateX(-120%);
-  }
-
-  100% {
-    transform: translateX(320%);
-  }
-}
-
 .kr-hls-controls {
   position: absolute;
   inset-inline: 0;
@@ -1456,7 +809,6 @@ useHead(() => ({
   color: white;
   font-size: 12px;
   font-weight: 800;
-  line-height: 1;
   text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
 }
 
@@ -1545,81 +897,24 @@ useHead(() => ({
   appearance: none;
   border-radius: 999px;
   background: white;
-  box-shadow: 0 0 0 3px rgb(250 204 21 / 0.25);
-}
-
-.kr-hls-range::-moz-range-thumb,
-.kr-volume-range::-moz-range-thumb {
-  width: 10px;
-  height: 10px;
-  border: 0;
-  border-radius: 999px;
-  background: white;
-  box-shadow: 0 0 0 3px rgb(250 204 21 / 0.25);
-}
-
-.kr-volume-range::-webkit-slider-thumb {
-  width: 12px;
-  height: 12px;
-  box-shadow: none;
-}
-
-.kr-volume-range::-moz-range-thumb {
-  width: 12px;
-  height: 12px;
-  box-shadow: none;
+  cursor: pointer;
 }
 
 .kr-hls-edge-progress {
   position: absolute;
-  inset-inline: 0;
+  left: 0;
   bottom: 0;
-  z-index: 12;
-  height: 4px;
-  pointer-events: none;
-  background: linear-gradient(90deg, rgb(250 204 21) v-bind('`${progressPercent}%`'), rgb(255 255 255 / 0.24) 0);
-  transition: opacity 0.24s ease;
+  right: 0;
+  height: 3px;
+  z-index: 20;
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
-@media (max-width: 640px) {
-  .kr-hls-desktop-button {
-    display: none;
-  }
-
-  .kr-hls-controls {
-    padding: 6px 10px 10px;
-  }
-
-  .kr-hls-time-row {
-    margin-bottom: 6px;
-    font-size: 11px;
-  }
-
-  .kr-hls-actions {
-    gap: 8px;
-    margin-top: 9px;
-  }
-
-  .kr-hls-actions-left,
-  .kr-hls-actions-right {
-    gap: 8px;
-  }
-
-  .kr-hls-control-button {
-    width: 25px;
-    height: 25px;
-    flex-basis: 25px;
-  }
-
-  .kr-hls-control-button svg {
-    width: 15px;
-    height: 15px;
-  }
-
-  .kr-hls-control-button.is-primary {
-    width: 30px;
-    height: 30px;
-    flex-basis: 30px;
-  }
+.kr-hls-edge-progress::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, rgb(250 204 21) v-bind('`${progressPercent}%`'), transparent 0);
 }
 </style>