From f2479074df5c1d9b1529d6cc75ea32e20e62ba5b Mon Sep 17 00:00:00 2001
From: thanhvudaynee <thanhvu@ngthanhvu.io.vn>
Date: Sat, 23 May 2026 15:08:57 +0700
Subject: [PATCH] feat: implement movie player page with HLS and embedded
 streaming support, navigation, and watch history tracking

---
 app/components/HomeMovieCard.vue |  18 +-
 app/pages/index.vue              |  26 +-
 app/pages/phim/[slug].vue        |  55 ++-
 app/pages/phim/index.vue         |  43 +-
 app/pages/xem/[slug].vue         | 663 +++++++++++++++++++++++++++----
 server/api/movies/[slug].get.ts  |  31 +-
 server/utils/movies.ts           | 194 ++++++++-
 7 files changed, 878 insertions(+), 152 deletions(-)

diff --git a/app/components/HomeMovieCard.vue b/app/components/HomeMovieCard.vue
index d3ca2c1..d28da4a 100644
--- a/app/components/HomeMovieCard.vue
+++ b/app/components/HomeMovieCard.vue
@@ -16,6 +16,7 @@ const props = defineProps<{
     lang?: string
     categories?: string[]
     countries?: string[]
+    sources?: { source: string, slug: string }[]
   }
 }>()
 
@@ -23,9 +24,19 @@ const isPreviewVisible = ref(false)
 const previewStyle = ref<Record<string, string>>({})
 let hideTimer: ReturnType<typeof setTimeout> | undefined
 
+const movieSourcesQuery = computed(() =>
+  (props.movie.sources || [{ source: props.movie.source, slug: props.movie.slug }])
+    .filter((source) => source.source && source.slug)
+    .map((source) => `${source.source}:${source.slug}`)
+    .join(','),
+)
+
 const movieLink = computed(() => ({
   path: `/phim/${props.movie.slug}`,
-  query: { source: props.movie.source },
+  query: {
+    source: props.movie.source,
+    srcs: movieSourcesQuery.value || undefined,
+  },
 }))
 
 function showPreview(event: MouseEvent) {
@@ -75,8 +86,9 @@ onBeforeUnmount(() => {
         <p class="line-clamp-2 text-sm font-bold leading-snug text-white">{{ movie.name }}</p>
         <p class="mt-1 truncate text-xs text-emerald-100">{{ movie.episode || movie.year || movie.quality }}</p>
       </div>
-      <span class="absolute left-2 top-2 rounded bg-emerald-400 px-2 py-1 text-xs font-black text-slate-950">
-        {{ movie.source }}
+      <span v-if="movie.sources?.length && movie.sources.length > 1"
+        class="absolute left-2 top-2 rounded bg-emerald-400 px-2 py-1 text-xs font-black text-slate-950">
+        {{ movie.sources.length }} server
       </span>
     </div>
   </NuxtLink>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 1df6fcf..0e2dbdb 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -65,6 +65,23 @@ function uniqueHeroMovies(items: any[]) {
   return uniqueItems
 }
 
+function movieSourcesQuery(movie: any) {
+  return (movie?.sources || [{ source: movie?.source, slug: movie?.slug }])
+    .filter((source: any) => source.source && source.slug)
+    .map((source: any) => `${source.source}:${source.slug}`)
+    .join(',')
+}
+
+function movieLink(movie: any) {
+  return {
+    path: `/phim/${movie?.slug}`,
+    query: {
+      source: movie?.source,
+      srcs: movieSourcesQuery(movie) || undefined,
+    },
+  }
+}
+
 function selectHero(index: number) {
   heroIndex.value = index
 }
@@ -102,6 +119,7 @@ watch(hero, async (currentHero) => {
     const detail = await $fetch(`/api/movies/${currentHero.slug}`, {
       query: {
         source: currentHero.source,
+        srcs: movieSourcesQuery(currentHero) || undefined,
       },
     })
     heroDetailCache.set(cacheKey, detail)
@@ -283,7 +301,7 @@ useHead({
             {{ heroDescription }}
           </p>
           <div class="mt-6 flex items-center gap-3 sm:mt-8 sm:gap-4">
-            <NuxtLink :to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
+            <NuxtLink :to="movieLink(hero)"
               class="grid size-12 shrink-0 place-items-center rounded-full bg-emerald-300 text-slate-950 shadow-2xl shadow-emerald-950/50 transition hover:scale-105 hover:bg-white sm:size-16"
               aria-label="Xem ngay">
               <Play class="size-6 fill-current sm:size-7" />
@@ -298,7 +316,7 @@ useHead({
               aria-label="Thêm vào thư viện">
               <BookPlus class="size-4 sm:size-5" />
             </button>
-            <NuxtLink :to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
+            <NuxtLink :to="movieLink(hero)"
               class="grid size-10 shrink-0 place-items-center rounded-full border border-white/20 bg-black/28 text-white backdrop-blur transition hover:bg-white/16 sm:size-12"
               aria-label="Thông tin phim">
               <Info class="size-4 sm:size-5" />
@@ -344,7 +362,7 @@ useHead({
     </section>
 
     <div class="relative z-10 mx-auto -mt-10 max-w-390 px-4 pb-16 sm:px-6 lg:px-8 xl:px-10">
-      <div v-if="sourceStatus.length" class="mb-8 hidden flex-wrap gap-2 text-xs text-slate-300 sm:flex">
+      <div v-if="sourceStatus.length" class="hidden">
         <span v-for="source in sourceStatus" :key="source.name"
           class="rounded-full border border-white/10 bg-white/8 px-3 py-1">
           {{ source.name }}: {{ source.ok ? 'sẵn sàng' : 'đang bị chặn' }}
@@ -396,7 +414,7 @@ useHead({
         <div v-for="item in 12" :key="item" class="aspect-2/3 animate-pulse rounded-md bg-white/10" />
       </div>
 
-      <section v-for="(row, index) in apiRows" v-show="row.items.length"
+      <section v-for="(row, index) in rows" v-show="row.items.length"
         :id="index === 0 ? 'latest' : index === 1 ? 'series' : 'movies'" :key="row.title" class="mb-12">
         <div class="mb-4 flex items-end justify-between gap-4">
           <h2 class="text-2xl font-extrabold text-white">{{ row.title }}</h2>
diff --git a/app/pages/phim/[slug].vue b/app/pages/phim/[slug].vue
index c7389b4..ebd2ade 100644
--- a/app/pages/phim/[slug].vue
+++ b/app/pages/phim/[slug].vue
@@ -3,6 +3,7 @@ import { ChevronDown, Heart, Play, Plus, Share2, Star } from 'lucide-vue-next'
 
 const route = useRoute()
 const requestedSource = computed(() => String(route.query.source || 'ophim'))
+const requestedSources = computed(() => typeof route.query.srcs === 'string' ? route.query.srcs : '')
 const selectedServer = ref(0)
 const movieInfoOpen = ref(false)
 const activeTab = ref<'episodes' | 'actors'>('episodes')
@@ -16,29 +17,37 @@ const {
   removeFavorite,
   saveWatchLater,
 } = useMovieLibrary()
-const sourceOptions = [
-  { label: 'OPhim', value: 'ophim' },
-  { label: 'NguonC', value: 'nguonc' },
-  { label: 'KKPhim', value: 'kkphim' },
-]
 
 const { data: movie, pending, error } = await useFetch(() => `/api/movies/${route.params.slug}`, {
   query: computed(() => ({
     source: requestedSource.value,
+    srcs: requestedSources.value || undefined,
   })),
-  watch: [requestedSource],
+  watch: [requestedSource, requestedSources],
 })
 
 const servers = computed(() => movie.value?.servers ?? [])
 const activeServer = computed(() => servers.value[selectedServer.value])
-const activeSource = computed(() => String(movie.value?.source || route.query.source || 'ophim'))
+const activeSource = computed(() => String(activeServer.value?.source || movie.value?.source || route.query.source || 'ophim'))
+const activeSourceSlug = computed(() => String(activeServer.value?.sourceSlug || movie.value?.slug || route.params.slug))
+const activeSourceServerIndex = computed(() => Number(activeServer.value?.sourceServerIndex ?? 0))
+const sourceOptions = computed(() =>
+  (movie.value?.sources || [{ source: activeSource.value, slug: activeSourceSlug.value }])
+    .map((source: any) => ({
+      label: String(source.source || '').toUpperCase(),
+      value: source.source,
+      slug: source.slug,
+    }))
+    .filter((source: any) => source.value && source.slug),
+)
 const actors = computed(() => movie.value?.actors ?? [])
 const actorSummary = computed(() => actors.value.map((actor: any) => actor.name).filter(Boolean).slice(0, 6).join(', '))
 const firstWatchLink = computed(() => ({
-  path: `/xem/${route.params.slug}`,
+  path: `/xem/${activeSourceSlug.value}`,
   query: {
     source: activeSource.value,
-    server: selectedServer.value,
+    srcs: requestedSources.value || undefined,
+    server: activeSourceServerIndex.value,
     ep: 1,
   },
 }))
@@ -48,7 +57,7 @@ const libraryItem = computed(() => {
 
   return {
     source: activeSource.value,
-    slug: String(route.params.slug),
+    slug: activeSourceSlug.value,
     name: movie.value.name,
     originName: movie.value.originName,
     thumb: movie.value.thumb,
@@ -59,22 +68,32 @@ const libraryItem = computed(() => {
 
 function episodeLink(index: number) {
   return {
-    path: `/xem/${route.params.slug}`,
+    path: `/xem/${activeSourceSlug.value}`,
     query: {
       source: activeSource.value,
-      server: selectedServer.value,
+      srcs: requestedSources.value || undefined,
+      server: activeSourceServerIndex.value,
       ep: index + 1,
     },
   }
 }
 
 function sourceLink(source: string) {
+  const ref = sourceOptions.value.find((item: any) => item.value === source)
   return {
-    path: `/phim/${route.params.slug}`,
-    query: { source },
+    path: `/phim/${ref?.slug || route.params.slug}`,
+    query: {
+      source,
+      srcs: requestedSources.value || undefined,
+    },
   }
 }
 
+function serverLabel(server: any, index: number) {
+  const label = String(server?.name || '').replace(/^(ophim|nguonc|kkphim)\s*-\s*/i, '').trim()
+  return label || `Server ${index + 1}`
+}
+
 function formatEpisodeName(name: string, index: number) {
   const label = String(name || index + 1).trim()
   return /^\d+$/.test(label) ? `Tập ${label}` : label
@@ -153,6 +172,10 @@ watch(requestedSource, () => {
   selectedServer.value = 0
 })
 
+watch(requestedSources, () => {
+  selectedServer.value = 0
+})
+
 watch([libraryItem, user], () => {
   refreshFavoriteState()
 })
@@ -278,7 +301,7 @@ useHead(() => ({
                 </div>
 
                 <div class="flex flex-col gap-3 sm:items-end">
-                  <div class="flex items-center justify-center gap-2 sm:justify-end">
+                  <div class="hidden">
                     <span class="text-xs font-black text-slate-300">Nguồn API</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"
@@ -338,7 +361,7 @@ useHead(() => ({
                     class="shrink-0 rounded px-4 py-2 text-sm font-black"
                     :class="selectedServer === index ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
                     @click="selectedServer = index">
-                    {{ server.name }}
+                    {{ serverLabel(server, index) }}
                   </button>
                 </div>
 
diff --git a/app/pages/phim/index.vue b/app/pages/phim/index.vue
index 7588707..0780cbe 100644
--- a/app/pages/phim/index.vue
+++ b/app/pages/phim/index.vue
@@ -8,7 +8,6 @@ const page = ref(Math.max(Number(route.query.page || 1), 1))
 const keyword = ref(typeof route.query.q === 'string' ? route.query.q : '')
 const debouncedKeyword = ref(keyword.value.trim())
 const type = ref(typeof route.query.type === 'string' ? route.query.type : 'all')
-const source = ref(typeof route.query.source === 'string' ? route.query.source : 'all')
 const sourceOptions = [
   { label: 'Tất cả API', value: 'all' },
   { label: 'OPhim', value: 'ophim' },
@@ -30,17 +29,12 @@ watch(type, () => {
   page.value = 1
 })
 
-watch(source, () => {
-  page.value = 1
-})
-
-watch([page, debouncedKeyword, type, source], () => {
+watch([page, debouncedKeyword, type], () => {
   router.replace({
     query: {
       page: page.value > 1 ? page.value : undefined,
       q: debouncedKeyword.value || undefined,
       type: type.value !== 'all' ? type.value : undefined,
-      source: source.value !== 'all' ? source.value : undefined,
     },
   })
 })
@@ -49,7 +43,6 @@ const { data, pending, error } = await useFetch('/api/movies', {
   query: computed(() => ({
     page: page.value,
     keyword: debouncedKeyword.value || undefined,
-    source: source.value !== 'all' ? source.value : undefined,
   })),
 })
 
@@ -68,6 +61,23 @@ const filteredMovies = computed(() => {
 const totalPages = computed(() => Number(data.value?.pagination?.totalPages || data.value?.pagination?.total_pages || 0))
 const sourceStatus = computed(() => data.value?.sources ?? [])
 
+function movieSourcesQuery(movie: any) {
+  return (movie.sources || [{ source: movie.source, slug: movie.slug }])
+    .filter((source: any) => source.source && source.slug)
+    .map((source: any) => `${source.source}:${source.slug}`)
+    .join(',')
+}
+
+function movieLink(movie: any) {
+  return {
+    path: `/phim/${movie.slug}`,
+    query: {
+      source: movie.source,
+      srcs: movieSourcesQuery(movie),
+    },
+  }
+}
+
 function nextPage() {
   page.value += 1
   window.scrollTo({ top: 0, behavior: 'smooth' })
@@ -132,16 +142,7 @@ useHead({
         </div>
       </div>
 
-      <div class="mb-6 flex flex-wrap gap-2 text-sm font-black text-slate-200">
-        <button v-for="option in sourceOptions" :key="option.value" type="button"
-          class="rounded-full border border-white/10 px-4 py-2 transition"
-          :class="source === option.value ? 'bg-emerald-300 text-slate-950' : 'bg-white/8 hover:bg-white/14 hover:text-white'"
-          @click="source = option.value">
-          {{ option.label }}
-        </button>
-      </div>
-
-      <div v-if="sourceStatus.length" class="mb-8 flex flex-wrap gap-2 text-xs text-slate-300">
+      <div v-if="sourceStatus.length" class="hidden">
         <span v-for="source in sourceStatus" :key="source.name"
           class="rounded-full border border-white/10 bg-white/8 px-3 py-1">
           {{ source.name }}: {{ source.ok ? 'sẵn sàng' : 'đang bị chặn' }}
@@ -158,7 +159,7 @@ useHead({
 
       <div v-else class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6">
         <NuxtLink v-for="movie in filteredMovies" :key="`${movie.source}-${movie.slug}`"
-          :to="{ path: `/phim/${movie.slug}`, query: { source: movie.source } }" class="group">
+          :to="movieLink(movie)" class="group">
           <div
             class="relative aspect-2/3 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-emerald-300/60">
             <img :src="movie.thumb || movie.poster" :alt="movie.name"
@@ -167,8 +168,8 @@ useHead({
               <p class="line-clamp-2 text-sm font-bold leading-snug text-white">{{ movie.name }}</p>
               <p class="mt-1 truncate text-xs text-emerald-100">{{ movie.episode || movie.year || movie.quality }}</p>
             </div>
-            <span class="absolute left-2 top-2 rounded bg-emerald-400 px-2 py-1 text-xs font-black text-slate-950">
-              {{ movie.source }}
+            <span v-if="movie.sources?.length > 1" class="absolute left-2 top-2 rounded bg-emerald-400 px-2 py-1 text-xs font-black text-slate-950">
+              {{ movie.sources.length }} server
             </span>
           </div>
         </NuxtLink>
diff --git a/app/pages/xem/[slug].vue b/app/pages/xem/[slug].vue
index 3fbd9d3..287154c 100644
--- a/app/pages/xem/[slug].vue
+++ b/app/pages/xem/[slug].vue
@@ -4,6 +4,7 @@ import {
   FastForward,
   Heart,
   Loader2,
+  Menu,
   Maximize,
   Pause,
   PictureInPicture2,
@@ -22,6 +23,7 @@ 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 hasStarted = ref(false)
+const hasManualPlayerMode = ref(false)
 const isFavoriteMovie = ref(false)
 const actionMessage = ref('')
 const actionBusy = ref(false)
@@ -41,11 +43,24 @@ const qualityLevels = ref<{ label: string, level: number }[]>([])
 const isSettingsOpen = ref(false)
 const hlsErrorMessage = ref('')
 const controlsVisible = ref(true)
+const isHlsFullscreen = ref(false)
+const edgeProgressVisible = ref(false)
+const gestureHint = ref('')
+const isHoldSpeedActive = ref(false)
 const pendingResumeSeconds = ref(0)
 let controlsHideTimer: ReturnType<typeof setTimeout> | undefined
+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 hlsPlayer: Hls | undefined
 let progressTimer: ReturnType<typeof setInterval> | undefined
 let lastSavedProgress = 0
@@ -61,10 +76,12 @@ const {
   saveWatchLater,
 } = useMovieLibrary()
 
-const { data: movie, pending, error } = await useFetch(`/api/movies/${route.params.slug}`, {
-  query: {
+const { data: movie, pending, error } = await useFetch(() => `/api/movies/${route.params.slug}`, {
+  query: computed(() => ({
     source: route.query.source,
-  },
+    srcs: route.query.srcs,
+  })),
+  watch: [() => route.query.source, () => route.query.srcs],
 })
 
 const servers = computed(() => movie.value?.servers ?? [])
@@ -82,6 +99,7 @@ const progressPercent = computed(() => {
   if (!durationSeconds.value || !progressSeconds.value) return 0
   return Math.min(Math.max((progressSeconds.value / durationSeconds.value) * 100, 0), 100)
 })
+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(() => {
@@ -98,23 +116,65 @@ const libraryItem = computed(() => {
   }
 })
 
+function formatEpisodeName(name?: string, index = 0) {
+  const value = String(name || index + 1).trim()
+  if (!value) return `Tập ${index + 1}`
+  if (/^(tập|tap|episode|ep)\b/i.test(value)) return value
+  return `Tập ${value}`
+}
+
+function serverLabel(server: any, index: number) {
+  const source = String(server?.source || '').toUpperCase()
+  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 selectServer(index: number) {
+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)
+}
+
+async function selectServer(index: number) {
+  if (index === selectedServer.value) return
+  const shouldAutoplay = hasStarted.value
+  const nextEpisodeIndex = episodeIndexForServer(index)
   selectedServer.value = index
-  selectedEpisode.value = 0
+  selectedEpisode.value = nextEpisodeIndex
   hasStarted.value = false
+  hasManualPlayerMode.value = false
   resetProgressTimer()
   destroyHlsPlayer()
+  choosePreferredPlayerMode(true)
+  await navigateTo({
+    path: `/xem/${route.params.slug}`,
+    query: {
+      ...route.query,
+      server: index,
+      ep: nextEpisodeIndex + 1,
+    },
+  }, { replace: true })
+
+  if (shouldAutoplay) {
+    nextTick(() => startPlayer())
+  }
 }
 
 async function startPlayer() {
@@ -131,6 +191,7 @@ async function startPlayer() {
 function selectPlayerMode(mode: 'embed' | 'hls') {
   if (mode === playerMode.value) return
 
+  hasManualPlayerMode.value = true
   playerMode.value = mode
   isSettingsOpen.value = false
   hasStarted.value = false
@@ -138,6 +199,11 @@ function selectPlayerMode(mode: 'embed' | 'hls') {
   destroyHlsPlayer()
 }
 
+function choosePreferredPlayerMode(force = false) {
+  if (!force && hasManualPlayerMode.value) return
+  playerMode.value = canUseHls.value ? 'hls' : 'embed'
+}
+
 function parseDurationSeconds(value: string) {
   const normalizedValue = value.toLowerCase()
   const hourMatch = normalizedValue.match(/(\d+)\s*(?:h|giờ|gio)/)
@@ -158,6 +224,7 @@ function resetProgressTimer() {
   hlsErrorMessage.value = ''
   pendingResumeSeconds.value = 0
   lastSavedProgress = 0
+  clearHlsFallbackTimer()
   stopProgressTimer()
 }
 
@@ -233,6 +300,54 @@ function showControlsTemporarily() {
   }, 2600)
 }
 
+function showFullscreenProgressOnly() {
+  if (!isHlsFullscreen.value) return
+  edgeProgressVisible.value = true
+  controlsVisible.value = false
+  if (edgeProgressTimer) clearTimeout(edgeProgressTimer)
+  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, đang chuyển sang chế độ Nhúng...') {
+  if (!canUseEmbed.value) return
+  clearHlsFallbackTimer()
+  hlsFallbackTimer = setTimeout(() => {
+    fallbackToEmbed(message)
+  }, 12000)
+}
+
+function fallbackToEmbed(message = 'HLS đang lỗi, đã chuyển sang chế độ Nhúng.') {
+  clearHlsFallbackTimer()
+  if (!canUseEmbed.value) {
+    hlsErrorMessage.value = 'HLS đang lỗi và phim này chưa có link Nhúng ở server này.'
+    isVideoBuffering.value = false
+    return
+  }
+
+  hlsErrorMessage.value = ''
+  isVideoBuffering.value = false
+  isVideoPlaying.value = false
+  isSettingsOpen.value = false
+  playerMode.value = 'embed'
+  destroyHlsPlayer()
+  flashActionMessage(message)
+}
+
+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)
@@ -250,6 +365,7 @@ async function setupHlsPlayer(autoplay = false) {
   if (!import.meta.client || !videoRef.value || !hlsPlayerUrl.value) return
 
   destroyHlsPlayer()
+  hlsFatalRetryCount = 0
 
   const video = videoRef.value
   isVideoBuffering.value = true
@@ -260,9 +376,15 @@ async function setupHlsPlayer(autoplay = false) {
 
   if (video.canPlayType('application/vnd.apple.mpegurl')) {
     video.src = hlsPlayerUrl.value
+    scheduleHlsFallback()
   } else {
     const { default: HlsPlayer } = await import('hls.js')
 
+    if (!HlsPlayer.isSupported()) {
+      fallbackToEmbed('Trình duyệt chưa hỗ trợ HLS, đã chuyển sang chế độ Nhúng.')
+      return
+    }
+
     if (!HlsPlayer.isSupported()) {
       hlsErrorMessage.value = 'Trình duyệt chưa hỗ trợ HLS, bạn dùng chế độ Nhúng nhé.'
       return
@@ -273,6 +395,7 @@ async function setupHlsPlayer(autoplay = false) {
       lowLatencyMode: true,
     })
     hlsPlayer.on(HlsPlayer.Events.MANIFEST_PARSED, () => {
+      clearHlsFallbackTimer()
       qualityLevels.value = hlsPlayer?.levels
         .map((level, index) => ({
           label: level.height ? `${level.height}p` : `${Math.round((level.bitrate || 0) / 1000)}kbps`,
@@ -285,6 +408,12 @@ async function setupHlsPlayer(autoplay = false) {
     hlsPlayer.on(HlsPlayer.Events.ERROR, (_event, data) => {
       if (!data.fatal) return
 
+      hlsFatalRetryCount += 1
+      if (hlsFatalRetryCount >= 2) {
+        fallbackToEmbed('HLS tải không ổn định, đã chuyển sang chế độ Nhúng.')
+        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()
@@ -297,6 +426,7 @@ async function setupHlsPlayer(autoplay = false) {
     })
     hlsPlayer.loadSource(hlsPlayerUrl.value)
     hlsPlayer.attachMedia(video)
+    scheduleHlsFallback()
   }
 
   if (autoplay) {
@@ -304,11 +434,14 @@ async function setupHlsPlayer(autoplay = false) {
       await video.play()
     } catch {
       isVideoPlaying.value = false
+      fallbackToEmbed('HLS chưa phát được, đã chuyển sang chế độ Nhúng.')
     }
   }
 }
 
 function destroyHlsPlayer() {
+  clearHlsFallbackTimer()
+
   if (hlsPlayer) {
     hlsPlayer.destroy()
     hlsPlayer = undefined
@@ -334,11 +467,31 @@ function updateVideoTime() {
 }
 
 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() {
+  fallbackToEmbed('HLS phát lỗi, đã chuyển sang chế độ Nhúng.')
+}
+
 async function loadResumeProgress() {
   if (!import.meta.client || !movie.value) return
 
@@ -380,7 +533,11 @@ function seekBy(seconds: number) {
   const nextTime = Math.min(Math.max((videoRef.value.currentTime || 0) + seconds, 0), durationSeconds.value || Number.MAX_SAFE_INTEGER)
   videoRef.value.currentTime = nextTime
   updateVideoTime()
-  showControlsTemporarily()
+  if (isHlsFullscreen.value) {
+    showFullscreenProgressOnly()
+  } else {
+    showControlsTemporarily()
+  }
   saveWatchHistory()
 }
 
@@ -389,6 +546,7 @@ function seekHlsPlayer(event: Event) {
   const value = Number((event.target as HTMLInputElement).value)
   videoRef.value.currentTime = value
   updateVideoTime()
+  if (isHlsFullscreen.value) showFullscreenProgressOnly()
   saveWatchHistory()
 }
 
@@ -421,14 +579,52 @@ function changeQuality(event: Event) {
   showControlsTemporarily()
 }
 
-function toggleFullscreen() {
-  const target = videoRef.value?.parentElement
-  if (!target) return
-  if (document.fullscreenElement) {
-    document.exitFullscreen()
-  } else {
-    target.requestFullscreen()
+async function toggleFullscreen() {
+  if (!import.meta.client || !videoRef.value) return
+
+  const video = videoRef.value as HTMLVideoElement & {
+    webkitEnterFullscreen?: () => void
+    webkitRequestFullscreen?: () => Promise<void> | void
   }
+  const target = (playerShellRef.value || video.parentElement || video) as HTMLElement & {
+    webkitRequestFullscreen?: () => Promise<void> | void
+  }
+  const documentWithWebkit = document as Document & {
+    webkitFullscreenElement?: Element | null
+    webkitExitFullscreen?: () => Promise<void> | void
+  }
+
+  try {
+    if (document.fullscreenElement || documentWithWebkit.webkitFullscreenElement) {
+      if (document.exitFullscreen) await document.exitFullscreen()
+      else await documentWithWebkit.webkitExitFullscreen?.()
+      return
+    }
+
+    if (target.requestFullscreen) {
+      await target.requestFullscreen()
+      return
+    }
+
+    if (target.webkitRequestFullscreen) {
+      await target.webkitRequestFullscreen()
+      return
+    }
+
+    video.webkitEnterFullscreen?.()
+  } catch {
+    video.webkitEnterFullscreen?.()
+  }
+}
+
+function updateFullscreenState() {
+  if (!import.meta.client) return
+  const documentWithWebkit = document as Document & {
+    webkitFullscreenElement?: Element | null
+  }
+  const fullscreenElement = document.fullscreenElement || documentWithWebkit.webkitFullscreenElement
+  isHlsFullscreen.value = Boolean(fullscreenElement && playerShellRef.value?.contains(fullscreenElement))
+  if (!isHlsFullscreen.value) edgeProgressVisible.value = false
 }
 
 async function togglePictureInPicture() {
@@ -472,6 +668,71 @@ function handleVideoEnded() {
   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 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')
+    if (isHlsFullscreen.value) showFullscreenProgressOnly()
+  }, 420)
+}
+
+function stopHoldSpeed() {
+  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)
+}
+
+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)
+}
+
 function handleTouchStart(event: TouchEvent) {
   const touch = event.touches[0]
   touchStartX = touch.clientX
@@ -488,6 +749,7 @@ function handleTouchEnd(event: TouchEvent) {
 
   if (Math.abs(deltaX) > 48 && Math.abs(deltaX) > Math.abs(deltaY) && elapsed < 700) {
     seekBy(deltaX > 0 ? 10 : -10)
+    flashGestureHint(deltaX > 0 ? '+10s' : '-10s')
     return
   }
 
@@ -583,32 +845,43 @@ onMounted(async () => {
   await refreshFavoriteState()
   document.addEventListener('visibilitychange', handleVisibilityChange)
   document.addEventListener('keydown', handleKeyboardShortcut)
+  document.addEventListener('fullscreenchange', updateFullscreenState)
+  document.addEventListener('webkitfullscreenchange', updateFullscreenState)
 })
 
 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)
 })
 
 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
+  hasManualPlayerMode.value = false
   resetProgressTimer()
   destroyHlsPlayer()
+  choosePreferredPlayerMode(true)
 })
 
 watch([movie, activeEpisode], () => {
   if (hasStarted.value) saveWatchHistory()
+  hasManualPlayerMode.value = false
+  choosePreferredPlayerMode(true)
 })
 
 watch([canUseEmbed, canUseHls], () => {
-  if (!canUseHls.value && playerMode.value === 'hls') playerMode.value = 'embed'
-  if (!canUseEmbed.value && canUseHls.value) playerMode.value = 'hls'
+  choosePreferredPlayerMode()
 }, {
   immediate: true,
 })
@@ -645,13 +918,14 @@ useHead(() => ({
 
     <template v-else>
       <section 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">
-        <NuxtLink :to="{ path: `/phim/${route.params.slug}`, query: { source: route.query.source } }"
+        <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-emerald-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">
-          <div class="grid grid-cols-2 gap-2 border-b border-white/10 bg-slate-950/92 p-2 sm:hidden">
+          <div class="border-b border-white/10 bg-slate-950/92 p-2 sm:hidden">
+            <div class="grid grid-cols-2 gap-2">
             <button type="button"
               class="rounded-md px-3 py-2 text-sm font-black transition disabled:cursor-not-allowed disabled:opacity-40"
               :class="playerMode === 'embed' ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-slate-100'"
@@ -664,6 +938,16 @@ useHead(() => ({
               :disabled="!canUseHls" @click="selectPlayerMode('hls')">
               HLS
             </button>
+            </div>
+
+            <div v-if="servers.length > 1" class="no-scrollbar mt-2 flex gap-2 overflow-x-auto">
+              <button v-for="(server, index) in servers" :key="`${server.name}-${index}-mobile-player`" type="button"
+                class="shrink-0 rounded-md px-3 py-2 text-xs font-black transition"
+                :class="selectedServer === index ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-slate-100'"
+                @click="selectServer(index)">
+                {{ serverLabel(server, index) }}
+              </button>
+            </div>
           </div>
 
           <div class="relative aspect-video bg-slate-950">
@@ -681,6 +965,18 @@ useHead(() => ({
               </button>
             </div>
 
+            <div v-if="servers.length > 1"
+              class="absolute right-3 top-3 z-20 hidden max-w-[48%] rounded-md border border-white/10 bg-black/65 p-1 text-xs font-black text-white backdrop-blur sm:flex">
+              <div class="no-scrollbar flex max-w-full gap-1 overflow-x-auto">
+                <button v-for="(server, index) in servers" :key="`${server.name}-${index}-player`" type="button"
+                  class="shrink-0 rounded px-3 py-1.5 transition"
+                  :class="selectedServer === index ? 'bg-emerald-400 text-slate-950' : 'text-slate-200 hover:bg-white/10'"
+                  @click="selectServer(index)">
+                  {{ serverLabel(server, index) }}
+                </button>
+              </div>
+            </div>
+
             <iframe v-if="playerMode === 'embed' && playerUrl && hasStarted" :src="playerUrl"
               :title="`${movie.name} - ${activeEpisode?.name || 'Tập phim'}`" class="h-full w-full"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -691,9 +987,10 @@ useHead(() => ({
               @touchend.passive="handleTouchEnd">
               <video ref="videoRef" class="h-full w-full bg-black object-contain" playsinline
                 @loadedmetadata="updateVideoMetadata" @timeupdate="updateVideoTime"
-                @canplay="isVideoBuffering = false" @waiting="isVideoBuffering = true"
-                @playing="isVideoBuffering = false" @play="isVideoPlaying = true; showControlsTemporarily()"
-                @pause="isVideoPlaying = false; controlsVisible = true" @ended="handleVideoEnded" />
+                @canplay="handleVideoCanPlay" @waiting="handleVideoWaiting"
+                @playing="handleVideoPlaying" @play="isVideoPlaying = true; showControlsTemporarily()"
+                @pause="isVideoPlaying = false; controlsVisible = true" @ended="handleVideoEnded"
+                @error="handleVideoError" />
 
               <div class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/70 via-transparent to-black/35" />
 
@@ -722,7 +1019,9 @@ useHead(() => ({
               <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="toggleHlsPlayback">
+                :aria-label="isVideoPlaying ? 'Tạm dừng' : 'Phát phim'" @click="handlePlayerTap"
+                @pointerdown="handlePlayerPointerDown" @pointerup="stopHoldSpeed" @pointercancel="stopHoldSpeed"
+                @pointerleave="stopHoldSpeed" @contextmenu.prevent>
                 <span
                   class="grid size-12 place-items-center rounded-full bg-emerald-400 text-slate-950 shadow-xl shadow-emerald-950/30 sm:size-16">
                   <Pause v-if="isVideoPlaying" class="size-5 fill-current sm:size-7" />
@@ -730,48 +1029,57 @@ useHead(() => ({
                 </span>
               </button>
 
-              <div class="absolute inset-x-0 bottom-0 z-10 px-3 pb-3 text-white transition sm:px-4 sm:pb-4"
-                :class="controlsVisible || !isVideoPlaying ? 'opacity-100' : 'pointer-events-none opacity-0'">
-                <input class="kr-hls-range w-full cursor-pointer" type="range" min="0" :max="durationSeconds || 0"
+              <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>
+
+              <div class="kr-hls-edge-progress"
+                :class="edgeProgressVisible || (isHlsFullscreen && !shouldShowHlsControls) ? 'opacity-100' : 'opacity-0'" />
+
+              <div class="kr-hls-controls text-white transition"
+                :class="shouldShowHlsControls ? 'opacity-100' : 'pointer-events-none opacity-0'">
+                <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="mt-2 flex items-center justify-between gap-2 sm:mt-3 sm:gap-3">
-                  <div class="flex min-w-0 items-center gap-1.5 sm:gap-3">
+                <div class="kr-hls-actions">
+                  <div class="kr-hls-actions-left">
                     <button type="button"
-                      class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
+                      class="kr-hls-control-button is-primary"
                       :aria-label="isVideoPlaying ? 'Tạm dừng' : 'Phát phim'" @click="toggleHlsPlayback">
-                      <Pause v-if="isVideoPlaying" class="size-3.5 fill-current sm:size-4" />
-                      <Play v-else class="size-3.5 fill-current sm:size-4" />
+                      <Pause v-if="isVideoPlaying" class="fill-current" />
+                      <Play v-else class="fill-current" />
                     </button>
                     <button type="button"
-                      class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
+                      class="kr-hls-control-button"
                       aria-label="Lùi 10 giây" @click="seekBy(-10)">
-                      <Rewind class="size-3.5 sm:size-4" />
+                      <Rewind />
                     </button>
                     <button type="button"
-                      class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
+                      class="kr-hls-control-button"
                       aria-label="Tua 10 giây" @click="seekBy(10)">
-                      <FastForward class="size-3.5 sm:size-4" />
+                      <FastForward />
                     </button>
                     <button type="button"
-                      class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
+                      class="kr-hls-control-button"
                       :aria-label="isVideoMuted ? 'Bật âm' : 'Tắt âm'" @click="toggleMute">
-                      <VolumeX v-if="isVideoMuted" class="size-3.5 sm:size-4" />
-                      <Volume2 v-else class="size-3.5 sm:size-4" />
+                      <VolumeX v-if="isVideoMuted" />
+                      <Volume2 v-else />
                     </button>
-                    <input class="kr-volume-range hidden w-20 cursor-pointer sm:block" type="range" min="0" max="1"
+                    <input class="kr-volume-range hidden sm:block" type="range" min="0" max="1"
                       step="0.05" :value="videoVolume" @input="changeVolume">
-                    <span class="shrink-0 text-[11px] font-black text-slate-100 sm:text-xs">
-                      {{ formatPlayerTime(videoCurrentTime) }} / {{ formatPlayerTime(durationSeconds) }}
-                    </span>
                   </div>
 
-                  <div class="flex shrink-0 items-center gap-1.5 sm:gap-2">
+                  <div class="kr-hls-actions-right">
                     <div class="relative">
                       <button type="button"
-                        class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
+                        class="kr-hls-control-button"
                         :class="isSettingsOpen ? 'bg-emerald-400 text-slate-950' : ''" aria-label="Cài đặt player"
                         @click="isSettingsOpen = !isSettingsOpen; controlsVisible = true">
-                        <Settings class="size-3.5 sm:size-4" />
+                        <Settings />
                       </button>
 
                       <div v-if="isSettingsOpen"
@@ -804,19 +1112,19 @@ useHead(() => ({
                       </div>
                     </div>
                     <button type="button"
-                      class="hidden size-9 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:grid"
+                      class="kr-hls-control-button kr-hls-desktop-button"
                       aria-label="Picture in Picture" @click="togglePictureInPicture">
-                      <PictureInPicture2 class="size-4" />
+                      <PictureInPicture2 />
                     </button>
                     <button v-if="hasNextEpisode" type="button"
-                      class="hidden size-9 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:grid"
+                      class="kr-hls-control-button kr-hls-desktop-button"
                       aria-label="Tập tiếp theo" @click="playNextEpisode(true)">
-                      <SkipForward class="size-4" />
+                      <SkipForward />
                     </button>
                     <button type="button"
-                      class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
+                      class="kr-hls-control-button"
                       aria-label="Toàn màn hình" @click="toggleFullscreen">
-                      <Maximize class="size-3.5 sm:size-4" />
+                      <Maximize />
                     </button>
                   </div>
                 </div>
@@ -889,27 +1197,78 @@ useHead(() => ({
             <p v-if="movie.content" class="mt-4 text-sm leading-7 text-slate-200">{{ movie.content }}</p>
 
             <div class="mt-5 rounded-md bg-emerald-400 px-4 py-3 text-sm font-black text-slate-950">
-              Đang xem {{ activeEpisode?.name || 'Tập 1' }}
+              Đang xem {{ formatEpisodeName(activeEpisode?.name, selectedEpisode) }}
             </div>
 
-            <div v-if="servers.length > 1" class="mt-4 flex gap-2 overflow-x-auto pb-2">
-              <button v-for="(server, index) in servers" :key="server.name" type="button"
-                class="shrink-0 rounded px-4 py-2 text-sm font-black"
-                :class="selectedServer === index ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
-                @click="selectServer(index)">
-                {{ server.name }}
-              </button>
-            </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-emerald-200">Chọn server</p>
+                  <h2 class="mt-1 text-[1.08rem] font-black sm:text-xl">Danh sách tập</h2>
+                </div>
+                <p class="text-xs font-bold text-slate-400">
+                  {{ serverLabel(activeServer, selectedServer) }}
+                </p>
+              </div>
 
-            <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-4 lg:grid-cols-6">
-              <NuxtLink v-for="(episode, index) in activeServer.episodes" :key="`${episode.name}-${index}`"
-                :to="episodeLink(index)"
-                class="inline-flex items-center justify-center gap-2 rounded-md px-3 py-3 text-center text-sm font-black transition"
-                :class="selectedEpisode === index ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
-                <Play class="size-3 fill-current" />
-                {{ episode.name }}
-              </NuxtLink>
+              <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-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
+                  @click="selectServer(index)">
+                  {{ serverLabel(server, index) }}
+                </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-emerald-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
+                    <span class="text-xs text-slate-400">v</span>
+                  </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-emerald-400/18 ring-1 ring-emerald-300/35">
+                    <span class="ml-auto mr-1 size-3 rounded-full bg-emerald-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}`"
+                  :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-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
+                  <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>
             </div>
           </section>
 
@@ -931,38 +1290,190 @@ useHead(() => ({
 </template>
 
 <style scoped>
+.kr-hls-controls {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 10;
+  padding: 8px 14px 14px;
+  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.78) 22%, rgb(0 0 0 / 0.92));
+}
+
+.kr-hls-time-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  color: white;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
+}
+
+.kr-hls-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin-top: 12px;
+}
+
+.kr-hls-actions-left,
+.kr-hls-actions-right {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 16px;
+}
+
+.kr-hls-actions-right {
+  flex-shrink: 0;
+}
+
+.kr-hls-control-button {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 28px;
+  cursor: pointer;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: white;
+  transition: color 0.16s ease, transform 0.16s ease;
+}
+
+.kr-hls-control-button:hover {
+  color: rgb(52 211 153);
+  transform: scale(1.08);
+}
+
+.kr-hls-control-button svg {
+  width: 18px;
+  height: 18px;
+}
+
+.kr-hls-control-button.is-primary {
+  width: 34px;
+  height: 34px;
+  flex-basis: 34px;
+  border: 2px solid white;
+}
+
+.kr-hls-control-button.is-primary svg {
+  width: 17px;
+  height: 17px;
+}
+
+.kr-hls-desktop-button {
+  display: grid;
+}
+
 .kr-hls-range,
 .kr-volume-range {
-  height: 6px;
+  display: block;
+  width: 100%;
+  height: 4px;
   appearance: none;
   border-radius: 999px;
   background:
-    linear-gradient(90deg, rgb(56 189 248) v-bind('`${progressPercent}%`'), rgb(255 255 255 / 0.22) 0);
+    linear-gradient(90deg, rgb(52 211 153) v-bind('`${progressPercent}%`'), rgb(255 255 255 / 0.18) 0);
+  cursor: pointer;
   outline: none;
 }
 
 .kr-volume-range {
+  width: 112px;
+  height: 3px;
   background:
-    linear-gradient(90deg, rgb(56 189 248) v-bind('`${videoVolume * 100}%`'), rgb(255 255 255 / 0.22) 0);
+    linear-gradient(90deg, white v-bind('`${videoVolume * 100}%`'), rgb(255 255 255 / 0.25) 0);
 }
 
 .kr-hls-range::-webkit-slider-thumb,
 .kr-volume-range::-webkit-slider-thumb {
-  width: 14px;
-  height: 14px;
+  width: 10px;
+  height: 10px;
   appearance: none;
   border-radius: 999px;
   background: white;
-  box-shadow: 0 0 0 5px rgb(56 189 248 / 0.22);
+  box-shadow: 0 0 0 3px rgb(52 211 153 / 0.22);
 }
 
 .kr-hls-range::-moz-range-thumb,
 .kr-volume-range::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
+  width: 10px;
+  height: 10px;
   border: 0;
   border-radius: 999px;
   background: white;
-  box-shadow: 0 0 0 5px rgb(56 189 248 / 0.22);
+  box-shadow: 0 0 0 3px rgb(52 211 153 / 0.22);
+}
+
+.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;
+}
+
+.kr-hls-edge-progress {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 12;
+  height: 4px;
+  pointer-events: none;
+  background:
+    linear-gradient(90deg, rgb(52 211 153) v-bind('`${progressPercent}%`'), rgb(255 255 255 / 0.24) 0);
+  transition: opacity 0.18s 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;
+  }
 }
 </style>
diff --git a/server/api/movies/[slug].get.ts b/server/api/movies/[slug].get.ts
index c7c62d7..3aa56bd 100644
--- a/server/api/movies/[slug].get.ts
+++ b/server/api/movies/[slug].get.ts
@@ -1,33 +1,18 @@
-import { getKkphimDetail, getNguoncDetail, getOphimDetail } from '../../utils/movies'
+import { getMovieDetailGroup, parseSourceRefs } from '../../utils/movies'
 
 export default defineEventHandler(async (event) => {
   const slug = getRouterParam(event, 'slug')
-  const source = getQuery(event).source
+  const query = getQuery(event)
+  const source = query.source
 
   if (!slug) {
     throw createError({ statusCode: 400, statusMessage: 'Thiếu slug phim' })
   }
 
-  const detailBySource = {
-    ophim: getOphimDetail,
-    nguonc: getNguoncDetail,
-    kkphim: getKkphimDetail,
-  }
+  const requestedSource = typeof source === 'string' && ['ophim', 'nguonc', 'kkphim'].includes(source)
+    ? source as 'ophim' | 'nguonc' | 'kkphim'
+    : 'ophim'
+  const refs = parseSourceRefs(query.sources || query.srcs, requestedSource, slug)
 
-  const requestedSource = typeof source === 'string' && source in detailBySource ? source as keyof typeof detailBySource : 'ophim'
-  const orderedSources = [
-    requestedSource,
-    ...Object.keys(detailBySource).filter((item) => item !== requestedSource) as Array<keyof typeof detailBySource>,
-  ]
-  let lastError: unknown
-
-  for (const sourceName of orderedSources) {
-    try {
-      return await detailBySource[sourceName](slug)
-    } catch (error) {
-      lastError = error
-    }
-  }
-
-  throw lastError
+  return await getMovieDetailGroup(refs)
 })
diff --git a/server/utils/movies.ts b/server/utils/movies.ts
index 3db509a..24df01c 100644
--- a/server/utils/movies.ts
+++ b/server/utils/movies.ts
@@ -19,6 +19,13 @@ export interface NormalizedMovie {
   updatedAt?: string
   categories: string[]
   countries: string[]
+  sources?: MovieSourceRef[]
+}
+
+export interface MovieSourceRef {
+  source: Source
+  slug: string
+  name?: string
 }
 
 export interface NormalizedEpisode {
@@ -30,6 +37,9 @@ export interface NormalizedEpisode {
 
 export interface NormalizedServer {
   name: string
+  source?: Source
+  sourceSlug?: string
+  sourceServerIndex?: number
   episodes: NormalizedEpisode[]
 }
 
@@ -121,6 +131,55 @@ function stripHtml(value?: string) {
     .trim()
 }
 
+function comparableText(value?: string) {
+  return text(value)
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+function compactTitleKey(value?: string) {
+  return comparableText(value)
+    .replace(/\b(vietsub|thuyet-minh|long-tieng|hd|full-hd|fhd|bluray|web-dl|webdl)\b/g, '')
+    .replace(/\b(phan|mua|season|part|ss|s)-?(\d+)\b/g, 's$2')
+    .replace(/\b(19|20)\d{2}\b/g, '')
+    .replace(/-{2,}/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+function movieTitleAliases(movie: NormalizedMovie) {
+  const aliases = new Set<string>()
+  const values = [
+    movie.originName,
+    movie.name,
+    movie.slug,
+  ]
+
+  for (const value of values) {
+    const key = compactTitleKey(value)
+    if (!key || key.length < 3) continue
+    aliases.add(key)
+
+    const seriesLike = movie.type !== 'single' || !/^(full|hoan-tat)$/i.test(String(movie.episode || ''))
+    if (seriesLike) {
+      aliases.add(key.replace(/-(\d+)$/, '-s$1'))
+      aliases.add(key.replace(/-s(\d+)$/, '-$1'))
+    }
+  }
+
+  return [...aliases]
+}
+
+function movieSourceRef(movie: NormalizedMovie): MovieSourceRef {
+  return {
+    source: movie.source,
+    slug: movie.slug,
+    name: movie.name,
+  }
+}
+
 function isSource(value: unknown): value is Source {
   return typeof value === 'string' && SOURCE_NAMES.includes(value as Source)
 }
@@ -139,15 +198,70 @@ function interleaveMovies(groups: NormalizedMovie[][]) {
   return interleaved
 }
 
-function uniqueMovies(items: NormalizedMovie[]) {
-  const seen = new Set<string>()
+function groupMovies(items: NormalizedMovie[]) {
+  const groups = new Map<string, NormalizedMovie>()
+  const exactAliases = new Map<string, string>()
+  const looseAliases = new Map<string, string>()
+  const looseAliasCollisions = new Set<string>()
 
-  return items.filter((movie) => {
-    const key = `${movie.source}:${movie.slug || movie.name}`
-    if (seen.has(key)) return false
-    seen.add(key)
-    return true
-  })
+  function rememberLooseAlias(alias: string, groupKey: string) {
+    const existingGroupKey = looseAliases.get(alias)
+    if (!existingGroupKey) {
+      looseAliases.set(alias, groupKey)
+      return
+    }
+
+    if (existingGroupKey !== groupKey) {
+      looseAliasCollisions.add(alias)
+    }
+  }
+
+  for (const movie of items) {
+    const aliases = movieTitleAliases(movie)
+    const key = aliases[0]
+    const fallbackKey = `${movie.source}:${movie.slug || movie.name}`
+    const exactKeys = movie.year ? aliases.map((alias) => `${alias}:${movie.year}`) : []
+    const existingGroupKey = exactKeys
+      .map((alias) => exactAliases.get(alias))
+      .find(Boolean)
+      || aliases
+        .map((alias) => looseAliasCollisions.has(alias) ? undefined : looseAliases.get(alias))
+        .find(Boolean)
+    const groupKey = existingGroupKey || (movie.year && key ? `${key}:${movie.year}` : key) || fallbackKey
+    const existing = groups.get(groupKey)
+    if (!existing) {
+      groups.set(groupKey, {
+        ...movie,
+        sources: [movieSourceRef(movie)],
+      })
+      for (const alias of aliases) {
+        if (movie.year) exactAliases.set(`${alias}:${movie.year}`, groupKey)
+        rememberLooseAlias(alias, groupKey)
+      }
+      continue
+    }
+
+    if (!existing.sources?.some((source) => source.source === movie.source && source.slug === movie.slug)) {
+      existing.sources = [...(existing.sources || []), movieSourceRef(movie)]
+    }
+
+    existing.thumb ||= movie.thumb
+    existing.poster ||= movie.poster
+    existing.originName ||= movie.originName
+    existing.rating ||= movie.rating
+    existing.categories = [...new Set([...existing.categories, ...movie.categories])]
+    existing.countries = [...new Set([...existing.countries, ...movie.countries])]
+    existing.updatedAt = existing.updatedAt && movie.updatedAt
+      ? (new Date(existing.updatedAt).getTime() > new Date(movie.updatedAt).getTime() ? existing.updatedAt : movie.updatedAt)
+      : existing.updatedAt || movie.updatedAt
+
+    for (const alias of aliases) {
+      if (movie.year) exactAliases.set(`${alias}:${movie.year}`, groupKey)
+      rememberLooseAlias(alias, groupKey)
+    }
+  }
+
+  return [...groups.values()]
 }
 
 function normalizeActor(actor: any): NormalizedActor | undefined {
@@ -333,7 +447,7 @@ export async function getKoreanMovies(page: number, keyword = '', source: Source
 
   const resultGroups = results.map((result) => result.status === 'fulfilled' ? result.value.items : [])
   const items = source === 'all' ? interleaveMovies(resultGroups) : resultGroups.flat()
-  const unique = uniqueMovies(items)
+  const unique = groupMovies(items)
 
   const pagination = results.find((result) => result.status === 'fulfilled')?.value.pagination ?? {}
 
@@ -364,6 +478,8 @@ export async function getOphimDetail(slug: string): Promise<MovieDetail> {
     trailer: text(movie?.trailer_url),
     servers: toArray(data?.episodes ?? json?.episodes ?? movie?.episodes).map((server: any) => ({
       name: text(server?.server_name, 'Server'),
+      source: 'ophim',
+      sourceSlug: normalized.slug,
       episodes: toArray(server?.server_data).map((episode: any) => ({
         name: text(episode?.name, 'Tập phim'),
         slug: text(episode?.slug),
@@ -387,6 +503,8 @@ export async function getNguoncDetail(slug: string): Promise<MovieDetail> {
     trailer: text(movie?.trailer_url || movie?.trailer),
     servers: toArray(movie?.episodes ?? json?.episodes ?? json?.data?.episodes).map((server: any) => ({
       name: text(server?.server_name || server?.name, 'Server'),
+      source: 'nguonc',
+      sourceSlug: normalized.slug,
       episodes: toArray(server?.server_data ?? server?.items ?? server?.episodes).map((episode: any) => ({
         name: text(episode?.name || episode?.title, 'Tập phim'),
         slug: text(episode?.slug),
@@ -412,6 +530,8 @@ export async function getKkphimDetail(slug: string): Promise<MovieDetail> {
     trailer: text(movie?.trailer_url),
     servers: toArray(data?.episodes ?? json?.episodes ?? movie?.episodes).map((server: any) => ({
       name: text(server?.server_name, 'Server'),
+      source: 'kkphim',
+      sourceSlug: normalized.slug,
       episodes: toArray(server?.server_data).map((episode: any) => ({
         name: text(episode?.name, 'Tập phim'),
         slug: text(episode?.slug),
@@ -421,3 +541,59 @@ export async function getKkphimDetail(slug: string): Promise<MovieDetail> {
     })),
   }
 }
+
+export function parseSourceRefs(value: unknown, fallbackSource: Source, fallbackSlug: string): MovieSourceRef[] {
+  const refs = typeof value === 'string'
+    ? value.split(',').map((item) => {
+        const [source, ...slugParts] = item.split(':')
+        const slug = slugParts.join(':')
+        return isSource(source) && slug ? { source, slug } : undefined
+      }).filter(Boolean) as MovieSourceRef[]
+    : []
+
+  if (refs.length) return refs
+  return [{ source: fallbackSource, slug: fallbackSlug }]
+}
+
+export async function getMovieDetailGroup(refs: MovieSourceRef[]): Promise<MovieDetail> {
+  const detailBySource = {
+    ophim: getOphimDetail,
+    nguonc: getNguoncDetail,
+    kkphim: getKkphimDetail,
+  }
+  const uniqueRefs = refs.filter((ref, index, allRefs) =>
+    index === allRefs.findIndex((item) => item.source === ref.source && item.slug === ref.slug),
+  )
+  const results = await Promise.allSettled(
+    uniqueRefs.map((ref) => detailBySource[ref.source](ref.slug)),
+  )
+  const details = results
+    .map((result) => result.status === 'fulfilled' ? result.value : null)
+    .filter(Boolean) as MovieDetail[]
+
+  if (!details.length) {
+    const firstRef = uniqueRefs[0]
+    return await detailBySource[firstRef.source](firstRef.slug)
+  }
+
+  const primary = details[0]
+  const sources = details.map(movieSourceRef)
+  const servers = details.flatMap((detail) =>
+    detail.servers.map((server, sourceServerIndex) => ({
+      ...server,
+      name: `${detail.source.toUpperCase()} - ${server.name}`,
+      source: detail.source,
+      sourceSlug: detail.slug,
+      sourceServerIndex,
+    })),
+  )
+
+  return {
+    ...primary,
+    sources,
+    servers,
+    actors: details.find((detail) => detail.actors.length)?.actors || primary.actors,
+    directors: details.find((detail) => detail.directors.length)?.directors || primary.directors,
+    content: details.find((detail) => detail.content && detail.content.length > primary.content.length)?.content || primary.content,
+  }
+}