From 69f6c90eda948748cd04196997e7976f2226cd20 Mon Sep 17 00:00:00 2001
From: thanhvudaynee <thanhvu@ngthanhvu.io.vn>
Date: Sun, 17 May 2026 21:01:33 +0700
Subject: [PATCH] feat: add Docker support and implement movie detail and
 playback pages

---
 .dockerignore             |  12 +++
 Dockerfile                |  24 ++++++
 README.md                 |  33 +++++++-
 app/pages/phim/[slug].vue | 159 ++++++++++++++++++++--------------
 app/pages/xem/[slug].vue  | 174 ++++++++++++++++++++++++++++++++++++++
 docker-compose.yml        |  15 ++++
 nuxt.config.ts            |   4 +
 package-lock.json         |   2 +-
 package.json              |   6 +-
 9 files changed, 361 insertions(+), 68 deletions(-)
 create mode 100644 .dockerignore
 create mode 100644 Dockerfile
 create mode 100644 app/pages/xem/[slug].vue
 create mode 100644 docker-compose.yml

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..3cc1713
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,12 @@
+.git
+.nuxt
+.output
+.nitro
+.cache
+node_modules
+npm-debug.log
+*.log
+.env
+.env.*
+Dockerfile
+docker-compose.yml
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..054df42
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,24 @@
+FROM node:22-alpine AS deps
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+
+FROM node:22-alpine AS builder
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+FROM node:22-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV HOST=0.0.0.0
+ENV PORT=3002
+ENV NITRO_HOST=0.0.0.0
+ENV NITRO_PORT=3002
+
+COPY --from=builder /app/.output ./.output
+
+EXPOSE 3002
+CMD ["node", ".output/server/index.mjs"]
diff --git a/README.md b/README.md
index 4c9de81..c1641b8 100644
--- a/README.md
+++ b/README.md
@@ -58,7 +58,7 @@ npm run dev
 The app will usually be available at:
 
 ```text
-http://localhost:3000
+http://localhost:3002
 ```
 
 ## Production Build
@@ -75,6 +75,36 @@ Preview the production build locally:
 npm run preview
 ```
 
+Run the production server after building:
+
+```bash
+npm run start
+```
+
+The production server listens on port `3002` by default.
+
+## Docker
+
+Build and run with Docker Compose:
+
+```bash
+docker compose up -d --build
+```
+
+The container exposes the app at:
+
+```text
+http://localhost:3002
+```
+
+Stop the container:
+
+```bash
+docker compose down
+```
+
+The Compose service is named `kr-phim` and maps host port `3002` to container port `3002`.
+
 ## Available Routes
 
 - `/` - Home page with hero carousel and movie rows.
@@ -101,6 +131,7 @@ If one source is unavailable, the list endpoint still returns data from the othe
 npm run dev       # Start Nuxt development server
 npm run build     # Build for production
 npm run preview   # Preview the production build
+npm run start     # Start the built Nitro server
 npm run generate  # Generate a static build when supported
 ```
 
diff --git a/app/pages/phim/[slug].vue b/app/pages/phim/[slug].vue
index 1c78d63..68e5956 100644
--- a/app/pages/phim/[slug].vue
+++ b/app/pages/phim/[slug].vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { Heart, Play, Plus, Share2, Star } from 'lucide-vue-next'
+
 const route = useRoute()
 const selectedServer = ref(0)
-const selectedEpisode = ref(0)
 
 const { data: movie, pending, error } = await useFetch(`/api/movies/${route.params.slug}`, {
   query: {
@@ -11,13 +12,26 @@ const { data: movie, pending, error } = await useFetch(`/api/movies/${route.para
 
 const servers = computed(() => movie.value?.servers ?? [])
 const activeServer = computed(() => servers.value[selectedServer.value])
-const activeEpisode = computed(() => activeServer.value?.episodes?.[selectedEpisode.value])
-const playerUrl = computed(() => activeEpisode.value?.linkEmbed || activeEpisode.value?.linkM3u8 || '')
+const firstWatchLink = computed(() => ({
+  path: `/xem/${route.params.slug}`,
+  query: {
+    source: route.query.source,
+    server: selectedServer.value,
+    ep: 1,
+  },
+}))
 const episodeCount = computed(() => servers.value.reduce((total: number, server: any) => total + (server.episodes?.length || 0), 0))
 
-watch(selectedServer, () => {
-  selectedEpisode.value = 0
-})
+function episodeLink(index: number) {
+  return {
+    path: `/xem/${route.params.slug}`,
+    query: {
+      source: route.query.source,
+      server: selectedServer.value,
+      ep: index + 1,
+    },
+  }
+}
 
 useHead(() => ({
   title: movie.value ? `${movie.value.name} - KR Phim` : 'Đang tải phim - KR Phim',
@@ -31,12 +45,12 @@ useHead(() => ({
 </script>
 
 <template>
-  <main class="min-h-screen bg-slate-950 text-white">
+  <main class="min-h-screen bg-[#08090d] text-white">
     <AppHeader />
 
-    <div v-if="pending" class="mx-auto grid min-h-screen max-w-7xl gap-8 px-4 pt-36 sm:px-6 lg:grid-cols-[minmax(0,1fr)_22rem] lg:px-8 lg:pt-28">
-      <div class="aspect-video animate-pulse rounded-md bg-white/10" />
-      <div class="h-96 animate-pulse rounded-md bg-white/10" />
+    <div v-if="pending" class="mx-auto grid min-h-screen max-w-[1560px] 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-[36rem] 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">
@@ -47,91 +61,110 @@ useHead(() => ({
     </div>
 
     <template v-else>
-      <section class="relative pt-32 lg:pt-16">
-        <img :src="movie.poster || movie.thumb" :alt="movie.name" class="absolute inset-0 h-full w-full object-cover opacity-25">
-        <div class="absolute inset-0 bg-gradient-to-b from-slate-950/70 via-slate-950 to-slate-950" />
+      <section class="relative overflow-hidden pt-32 lg:pt-16">
+        <div class="absolute inset-x-0 top-0 h-[28rem] overflow-hidden">
+          <img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover opacity-45">
+          <div class="absolute inset-0 bg-gradient-to-b from-slate-950/45 via-[#08090d]/80 to-[#08090d]" />
+          <div class="absolute inset-0 bg-gradient-to-r from-[#08090d] via-transparent to-[#08090d]" />
+        </div>
 
-        <div class="relative mx-auto grid max-w-7xl gap-8 px-4 py-12 sm:px-6 lg:grid-cols-[minmax(0,1fr)_22rem] lg:px-8">
-          <div>
-            <div class="overflow-hidden rounded-md bg-black shadow-2xl shadow-sky-950/40 ring-1 ring-white/10">
-              <div class="aspect-video">
-                <iframe
-                  v-if="playerUrl"
-                  :src="playerUrl"
-                  :title="`${movie.name} - ${activeEpisode?.name || 'Tập phim'}`"
-                  class="h-full w-full"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                  allowfullscreen
-                />
-                <div v-else class="flex h-full items-center justify-center bg-slate-900 px-6 text-center text-slate-300">
-                  Phim này chưa có link xem khả dụng từ API.
-                </div>
-              </div>
+        <div class="relative mx-auto grid max-w-[1560px] gap-6 px-4 py-20 sm:px-6 lg:grid-cols-[22rem_minmax(0,1fr)] lg:px-8 xl:px-10">
+          <aside class="rounded-md border border-white/10 bg-[#15161b]/95 p-5 shadow-2xl shadow-black/40">
+            <img :src="movie.thumb || movie.poster" :alt="movie.name" class="mx-auto aspect-[2/3] w-48 rounded-md object-cover shadow-xl shadow-black/40">
+
+            <h1 class="mt-5 text-2xl font-black leading-tight">{{ movie.name }}</h1>
+            <p v-if="movie.originName" class="mt-1 text-sm font-bold text-sky-200">{{ movie.originName }}</p>
+
+            <div class="mt-4 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-white/12 px-2 py-1">
+                <Star class="size-3 fill-sky-300 text-sky-300" />
+                {{ movie.rating.toFixed(1) }}
+              </span>
             </div>
 
-            <div class="mt-8">
-              <p class="mb-3 text-sm font-semibold uppercase tracking-wide text-sky-300">{{ movie.source }} · {{ movie.lang || 'Vietsub' }}</p>
-              <h1 class="text-3xl font-black leading-tight sm:text-5xl">{{ movie.name }}</h1>
-              <p v-if="movie.originName" class="mt-2 text-lg text-slate-300">{{ movie.originName }}</p>
+            <div v-if="movie.categories?.length" class="mt-4">
+              <span class="rounded bg-white/12 px-3 py-1 text-xs font-bold">{{ movie.categories[0] }}</span>
+            </div>
 
-              <div class="mt-5 flex flex-wrap gap-2 text-sm text-slate-100">
-                <span v-if="movie.year" class="rounded-full bg-white/10 px-3 py-1">{{ movie.year }}</span>
-                <span v-if="movie.quality" class="rounded-full bg-white/10 px-3 py-1">{{ movie.quality }}</span>
-                <span v-if="movie.episode" class="rounded-full bg-sky-400/20 px-3 py-1 text-sky-100">{{ movie.episode }}</span>
-                <span v-if="movie.time" class="rounded-full bg-white/10 px-3 py-1">{{ movie.time }}</span>
-              </div>
-
-              <p v-if="movie.content" class="mt-6 max-w-4xl text-base leading-8 text-slate-200">
+            <div class="mt-5 space-y-3 text-sm leading-6 text-slate-300">
+              <p v-if="movie.content">
+                <span class="block font-black text-white">Giới thiệu:</span>
                 {{ movie.content }}
               </p>
+              <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="movie.actors?.length"><span class="font-black text-white">Diễn viên:</span> {{ movie.actors.slice(0, 6).join(', ') }}</p>
+            </div>
+          </aside>
 
-              <div class="mt-6 grid gap-3 text-sm text-slate-300 sm:grid-cols-2">
-                <p v-if="movie.categories?.length"><span class="font-bold text-white">Thể loại:</span> {{ movie.categories.join(', ') }}</p>
-                <p v-if="movie.countries?.length"><span class="font-bold text-white">Quốc gia:</span> {{ movie.countries.join(', ') }}</p>
-                <p v-if="movie.actors?.length"><span class="font-bold text-white">Diễn viên:</span> {{ movie.actors.slice(0, 8).join(', ') }}</p>
-                <p v-if="movie.directors?.length"><span class="font-bold text-white">Đạo diễn:</span> {{ movie.directors.join(', ') }}</p>
+          <section class="rounded-md border border-white/10 bg-[#15161b]/95 p-5 shadow-2xl shadow-black/40">
+            <div class="flex flex-col gap-4 border-b border-white/10 pb-5 lg:flex-row lg:items-center lg:justify-between">
+              <div class="flex flex-wrap gap-3">
+                <NuxtLink
+                  :to="firstWatchLink"
+                  class="inline-flex h-12 items-center justify-center gap-2 rounded-full bg-sky-400 px-7 text-sm font-black text-slate-950 transition hover:bg-white"
+                >
+                  <Play class="size-4 fill-current" />
+                  Xem ngay
+                </NuxtLink>
+                <button type="button" class="grid h-12 w-14 place-items-center rounded-full text-sm font-bold text-white transition hover:bg-white/10" aria-label="Yêu thích">
+                  <Heart class="size-5" />
+                </button>
+                <button type="button" class="grid h-12 w-14 place-items-center rounded-full text-sm font-bold text-white transition hover:bg-white/10" aria-label="Thêm vào">
+                  <Plus class="size-5" />
+                </button>
+                <button type="button" class="grid h-12 w-14 place-items-center rounded-full text-sm font-bold text-white transition hover:bg-white/10" aria-label="Chia sẻ">
+                  <Share2 class="size-5" />
+                </button>
+              </div>
+
+              <div v-if="movie.rating" class="inline-flex items-center gap-3 rounded-full bg-white/8 px-4 py-2 text-sm font-bold text-slate-200">
+                <span class="rounded bg-sky-300 px-2 py-1 text-xs font-black text-slate-950">IMDb</span>
+                <span>{{ movie.rating.toFixed(1) }}</span>
+                <span class="text-slate-400">Đánh giá</span>
               </div>
             </div>
-          </div>
 
-          <aside class="lg:sticky lg:top-24 lg:self-start">
-            <div class="rounded-md border border-white/10 bg-white/8 p-4 shadow-2xl shadow-black/20 backdrop-blur-xl">
-              <div class="flex items-center justify-between gap-3">
-                <h2 class="text-xl font-extrabold">Danh sách tập</h2>
-                <span class="text-sm text-slate-300">{{ episodeCount }} tập</span>
-              </div>
+            <div class="flex gap-6 border-b border-white/10 pt-5 text-sm font-black">
+              <button type="button" class="border-b-2 border-sky-300 pb-4 text-sky-200">Tập phim</button>
+              <button type="button" class="pb-4 text-slate-300">Diễn viên</button>
+            </div>
+
+            <div class="pt-7">
+              <h2 class="text-xl font-black">Danh sách tập</h2>
 
               <div v-if="servers.length > 1" class="mt-4 flex gap-2 overflow-x-auto pb-2">
                 <button
                   v-for="(server, index) in servers"
                   :key="server.name"
                   type="button"
-                  class="shrink-0 rounded-md px-3 py-2 text-sm font-semibold"
-                  :class="selectedServer === index ? 'bg-sky-300 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
+                  class="shrink-0 rounded px-4 py-2 text-sm font-black"
+                  :class="selectedServer === index ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
                   @click="selectedServer = index"
                 >
                   {{ server.name }}
                 </button>
               </div>
 
-              <div v-if="activeServer?.episodes?.length" class="mt-4 grid max-h-[32rem] grid-cols-3 gap-2 overflow-y-auto pr-1 sm:grid-cols-4 lg:grid-cols-3">
-                <button
+              <div v-if="activeServer?.episodes?.length" class="mt-3 grid gap-2 rounded-md border border-white/10 p-3 sm:grid-cols-3 lg:grid-cols-6">
+                <NuxtLink
                   v-for="(episode, index) in activeServer.episodes"
                   :key="`${episode.name}-${index}`"
-                  type="button"
-                  class="min-h-11 rounded-md px-3 py-2 text-sm font-bold transition"
-                  :class="selectedEpisode === index ? 'bg-sky-300 text-slate-950' : 'bg-slate-900/80 text-slate-100 hover:bg-sky-400/20'"
-                  @click="selectedEpisode = index"
+                  :to="episodeLink(index)"
+                  class="rounded-md bg-white/10 px-4 py-3 text-center text-sm font-black text-white transition hover:bg-sky-400 hover:text-slate-950"
                 >
                   {{ episode.name }}
-                </button>
+                </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ừ nguồn này.
               </p>
             </div>
-          </aside>
+          </section>
         </div>
       </section>
     </template>
diff --git a/app/pages/xem/[slug].vue b/app/pages/xem/[slug].vue
new file mode 100644
index 0000000..c09d53e
--- /dev/null
+++ b/app/pages/xem/[slug].vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { Heart, Play, Plus, Share2 } 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 hasStarted = ref(false)
+
+const { data: movie, pending, error } = await useFetch(`/api/movies/${route.params.slug}`, {
+  query: {
+    source: route.query.source,
+  },
+})
+
+const servers = computed(() => movie.value?.servers ?? [])
+const activeServer = computed(() => servers.value[selectedServer.value] ?? servers.value[0])
+const activeEpisode = computed(() => activeServer.value?.episodes?.[selectedEpisode.value] ?? activeServer.value?.episodes?.[0])
+const playerUrl = computed(() => activeEpisode.value?.linkEmbed || activeEpisode.value?.linkM3u8 || '')
+
+function episodeLink(index: number) {
+  return {
+    path: `/xem/${route.params.slug}`,
+    query: {
+      source: route.query.source,
+      server: selectedServer.value,
+      ep: index + 1,
+    },
+  }
+}
+
+function selectServer(index: number) {
+  selectedServer.value = index
+  selectedEpisode.value = 0
+  hasStarted.value = false
+}
+
+function startPlayer() {
+  hasStarted.value = true
+}
+
+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
+})
+
+useHead(() => ({
+  title: movie.value ? `Xem ${movie.value.name} - ${activeEpisode.value?.name || 'Tập 1'} - KR Phim` : 'Đang tải phim - KR Phim',
+  meta: [
+    {
+      name: 'description',
+      content: movie.value?.content || 'Xem phim Hàn Quốc Vietsub.',
+    },
+  ],
+}))
+</script>
+
+<template>
+  <main class="min-h-screen bg-[#08090d] text-white">
+    <AppHeader />
+
+    <div v-if="pending" class="mx-auto min-h-screen max-w-[1560px] px-4 pt-36 sm:px-6 lg:px-8 lg:pt-28 xl:px-10">
+      <div class="aspect-video animate-pulse rounded-md bg-white/10" />
+    </div>
+
+    <div v-else-if="error || !movie" class="mx-auto flex min-h-screen max-w-4xl items-center px-4 pt-36 lg:pt-24">
+      <div>
+        <h1 class="text-3xl font-black">Không mở được phim</h1>
+        <p class="mt-3 text-slate-300">Nguồn phim có thể đang chặn request hoặc phim chưa có tập xem.</p>
+      </div>
+    </div>
+
+    <template v-else>
+      <section class="mx-auto max-w-[1560px] px-4 pb-16 pt-36 sm:px-6 lg:px-8 lg:pt-28 xl:px-10">
+        <NuxtLink :to="{ path: `/phim/${route.params.slug}`, query: { source: route.query.source } }" class="text-sm font-bold text-sky-200 hover:text-white">
+          ‹ 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="relative aspect-video bg-slate-950">
+            <iframe
+              v-if="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"
+              allowfullscreen
+            />
+            <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-35">
+              <div class="absolute inset-0 bg-black/40" />
+              <div class="absolute inset-0 grid place-items-center">
+                <span class="grid size-16 place-items-center rounded-full bg-sky-400 text-slate-950 shadow-xl shadow-sky-950/30">
+                  <Play class="size-7 fill-current" />
+                </span>
+              </div>
+            </button>
+          </div>
+
+          <div class="flex flex-wrap gap-4 border-t border-white/10 px-4 py-3 text-xs font-bold text-slate-300">
+            <button type="button" class="inline-flex items-center gap-1 hover:text-white"><Heart class="size-3" /> Yêu thích</button>
+            <button type="button" class="inline-flex items-center gap-1 hover:text-white"><Plus class="size-3" /> Thêm vào</button>
+            <button type="button" class="inline-flex items-center gap-1 hover:text-white"><Share2 class="size-3" /> Chia sẻ</button>
+          </div>
+        </div>
+
+        <div class="mt-5 grid gap-6 lg:grid-cols-[minmax(0,1fr)_24rem]">
+          <section>
+            <div class="flex gap-4">
+              <img :src="movie.thumb || movie.poster" :alt="movie.name" class="h-28 w-20 rounded-md object-cover">
+              <div>
+                <h1 class="text-2xl font-black leading-tight">{{ movie.name }}</h1>
+                <p v-if="movie.originName" class="mt-1 text-sm font-bold text-sky-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 class="rounded bg-sky-400 px-2 py-1 text-slate-950">Đang xem {{ activeEpisode?.name || 'Tập 1' }}</span>
+                </div>
+              </div>
+            </div>
+
+            <p v-if="movie.content" class="mt-4 text-sm leading-7 text-slate-300">{{ movie.content }}</p>
+
+            <div class="mt-5 rounded-md bg-sky-400 px-4 py-3 text-sm font-black text-slate-950">
+              Đang xem {{ activeEpisode?.name || 'Tập 1' }}
+            </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-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
+                @click="selectServer(index)"
+              >
+                {{ server.name }}
+              </button>
+            </div>
+
+            <div v-if="activeServer?.episodes?.length" class="mt-3 grid 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="rounded-md px-4 py-3 text-center text-sm font-black transition"
+                :class="selectedEpisode === index ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
+              >
+                {{ episode.name }}
+              </NuxtLink>
+            </div>
+          </section>
+
+          <aside class="rounded-md border border-white/10 bg-white/5 p-5 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="movie.actors?.length"><span class="font-black text-white">Diễn viên:</span> {{ movie.actors.slice(0, 6).join(', ') }}</p>
+            </div>
+          </aside>
+        </div>
+      </section>
+    </template>
+  </main>
+</template>
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..40ba0f7
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,15 @@
+services:
+  kr-phim:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: kr-phim
+    restart: unless-stopped
+    environment:
+      NODE_ENV: production
+      HOST: 0.0.0.0
+      PORT: 3002
+      NITRO_HOST: 0.0.0.0
+      NITRO_PORT: 3002
+    ports:
+      - "3002:3002"
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 167d34b..1c246db 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,6 +4,10 @@ import tailwindcss from '@tailwindcss/vite'
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
+  devServer: {
+    host: '0.0.0.0',
+    port: 3002,
+  },
   css: ['~/assets/css/main.css'],
   vite: {
     plugins: [
diff --git a/package-lock.json b/package-lock.json
index 0346905..ec7a524 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,6 @@
       "name": "kr-phim",
       "hasInstallScript": true,
       "dependencies": {
-        "@oxc-parser/binding-win32-x64-msvc": "^0.128.0",
         "@tailwindcss/vite": "^4.3.0",
         "lucide-vue-next": "^1.0.0",
         "nuxt": "^4.4.5",
@@ -2141,6 +2140,7 @@
         "x64"
       ],
       "license": "MIT",
+      "optional": true,
       "os": [
         "win32"
       ],
diff --git a/package.json b/package.json
index 612de66..e72efea 100644
--- a/package.json
+++ b/package.json
@@ -4,13 +4,13 @@
   "private": true,
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --host 0.0.0.0 --port 3002",
     "generate": "nuxt generate",
-    "preview": "nuxt preview",
+    "preview": "nuxt preview --host 0.0.0.0 --port 3002",
+    "start": "node .output/server/index.mjs",
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@oxc-parser/binding-win32-x64-msvc": "^0.128.0",
     "@tailwindcss/vite": "^4.3.0",
     "lucide-vue-next": "^1.0.0",
     "nuxt": "^4.4.5",