feat: add HLS proxy, view tracking, and player improvements

- Add HLS proxy middleware for CORS bypass
- Add view tracking API endpoint
- Improve HLS player with proxy fallback mechanism
- Add custom episode support in admin
- Update admin movie list with view count
- Add description expand/collapse on movie detail
- Fix hydration warnings in watch page

app/components/AppHeader.vue

@@ -89,7 +89,7 @@ watch(() => route.path, () => {
 </script>
 
 <template>
-  <header class="fixed inset-x-0 top-0 z-50 bg-gradient-to-b from-black/80 via-black/40 to-transparent">
+  <header class="fixed inset-x-0 top-0 z-50 bg-linear-to-b from-black/80 via-black/40 to-transparent">
     <nav class="mx-auto flex max-w-390 items-center gap-3 px-4 py-3 sm:px-6 lg:gap-6 lg:px-8 xl:px-10">
       <AppLogo />
 
@@ -115,7 +115,8 @@ watch(() => route.path, () => {
           class="inline-flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full bg-white px-2.5 pl-1 text-xs font-black text-slate-950 shadow-xl shadow-black/20 transition hover:bg-yellow-100"
           aria-label="Tài khoản thành viên" @click="handleMemberClick">
           <template v-if="user">
-            <span class="grid size-7 place-items-center rounded-full bg-yellow-400/20 text-xs font-black text-yellow-400">
+            <span
+              class="grid size-7 place-items-center rounded-full bg-yellow-400/20 text-xs font-black text-yellow-400">
               {{ displayInitial }}
             </span>
             <span class="max-w-24 truncate">{{ displayName }}</span>
@@ -171,7 +172,8 @@ watch(() => route.path, () => {
             </div>
 
             <div v-if="user" class="flex items-center gap-3 border-b border-white/10 px-4 py-4">
-              <span class="grid size-9 place-items-center rounded-full bg-yellow-400/10 text-sm font-black text-yellow-400">
+              <span
+                class="grid size-9 place-items-center rounded-full bg-yellow-400/10 text-sm font-black text-yellow-400">
                 {{ displayInitial }}
               </span>
               <div class="min-w-0">

app/components/HomeMovieCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Circle, Heart, Play } from 'lucide-vue-next'
+import { ChevronDown, ChevronUp, Circle, Heart, Play } from 'lucide-vue-next'
 
 const props = defineProps<{
   movie: {
@@ -21,6 +21,7 @@ const props = defineProps<{
 }>()
 
 const isPreviewVisible = ref(false)
+const isDescriptionExpanded = ref(false)
 const previewStyle = ref<Record<string, string>>({})
 let hideTimer: ReturnType<typeof setTimeout> | undefined
 
@@ -62,6 +63,7 @@ function scheduleHide() {
   if (hideTimer) clearTimeout(hideTimer)
   hideTimer = setTimeout(() => {
     isPreviewVisible.value = false
+    isDescriptionExpanded.value = false
   }, 90)
 }
 
@@ -137,13 +139,25 @@ onBeforeUnmount(() => {
               movie.episode }}</span>
           </div>
 
-          <p class="mt-3 line-clamp-2 text-xs font-bold leading-6 text-slate-200">
-            <template v-if="movie.countries?.length">{{ movie.countries.slice(0, 2).join(' • ') }}</template>
-            <template v-if="movie.countries?.length && movie.categories?.length"> • </template>
-            <template v-if="movie.categories?.length">{{ movie.categories.slice(0, 3).join(' • ') }}</template>
-            <template v-if="!movie.countries?.length && !movie.categories?.length">Phim Hàn Quốc Vietsub mới cập
-              nhật</template>
-          </p>
+          <div class="mt-3">
+            <p class="text-xs font-bold leading-6 text-slate-200" :class="isDescriptionExpanded ? '' : 'line-clamp-1'">
+              <template v-if="movie.countries?.length">{{ movie.countries.slice(0, 2).join(' • ') }}</template>
+              <template v-if="movie.countries?.length && movie.categories?.length"> • </template>
+              <template v-if="movie.categories?.length">{{ movie.categories.slice(0, 3).join(' • ') }}</template>
+              <template v-if="!movie.countries?.length && !movie.categories?.length">Phim Hàn Quốc Vietsub mới cập
+                nhật</template>
+            </p>
+            <button type="button"
+              class="mt-1 inline-flex items-center gap-0.5 text-[10px] font-semibold text-yellow-300 transition hover:text-yellow-200"
+              @click.stop="isDescriptionExpanded = !isDescriptionExpanded">
+              <template v-if="isDescriptionExpanded">
+                Thu gọn <ChevronUp class="size-3" />
+              </template>
+              <template v-else>
+                Xem thêm <ChevronDown class="size-3" />
+              </template>
+            </button>
+          </div>
         </div>
       </NuxtLink>
     </Transition>