feat: Update nhiều thứ

app/components/AppFooter.vue

@@ -21,7 +21,7 @@ const linkGroups = [
 
 <template>
   <footer class="border-t border-white/10 bg-[#07090f] text-white">
-    <div class="mx-auto max-w-[1560px] px-4 py-10 sm:px-6 lg:px-8 xl:px-10">
+    <div class="mx-auto max-w-390 px-4 py-10 sm:px-6 lg:px-8 xl:px-10">
       <div class="flex flex-col gap-8 lg:flex-row lg:items-center">
         <div class="flex shrink-0 items-center gap-7">
           <AppLogo />
@@ -29,31 +29,24 @@ const linkGroups = [
         </div>
 
         <div class="flex flex-wrap gap-3">
-          <button
-            v-for="item in socialLinks"
-            :key="item.label"
-            type="button"
+          <button v-for="item in socialLinks" :key="item.label" type="button"
             class="grid size-12 place-items-center rounded-full bg-yellow-400 text-slate-950 shadow-lg shadow-yellow-950/30 transition hover:-translate-y-0.5 hover:bg-white"
-            :aria-label="item.label"
-          >
+            :aria-label="item.label">
             <AppIcon :name="item.icon" class="size-5" />
           </button>
         </div>
       </div>
 
       <div class="mt-10 flex flex-wrap gap-x-8 gap-y-5 text-sm font-bold">
-        <NuxtLink
-          v-for="[label, path] in linkGroups"
-          :key="label"
-          :to="path"
-          class="text-slate-100 transition hover:text-yellow-200"
-        >
+        <NuxtLink v-for="[label, path] in linkGroups" :key="label" :to="path"
+          class="text-slate-100 transition hover:text-yellow-200">
           {{ label }}
         </NuxtLink>
       </div>
 
       <p class="mt-10 max-w-4xl text-sm leading-7 text-slate-300">
-        CineK - Trang xem phim Hàn Quốc online chất lượng cao với Vietsub, thuyết minh, lồng tiếng và trải nghiệm xem mượt trên mọi thiết bị. Kho phim bộ, phim lẻ và nội dung mới được cập nhật thường xuyên.
+        CineK - Trang xem phim Hàn Quốc online chất lượng cao với Vietsub, thuyết minh, lồng tiếng và trải nghiệm xem
+        mượt trên mọi thiết bị. Kho phim bộ, phim lẻ và nội dung mới được cập nhật thường xuyên.
       </p>
 
       <p class="mt-7 text-sm text-slate-400">

app/components/AppHeader.vue

@@ -99,7 +99,7 @@ watch(() => route.path, () => {
         class="ml-auto flex w-full max-w-xs items-center rounded-full border border-white/10 bg-white/8 px-4 py-2 shadow-2xl shadow-yellow-950/20 sm:max-w-sm"
         @submit.prevent="submitSearch">
         <AppIcon name="search" class="mr-3 size-4 shrink-0 text-yellow-200" />
-        <input v-model="keyword" type="search" placeholder="Tìm phim Hàn Quốc..."
+        <input v-model="keyword" type="search" placeholder="Tìm phim..."
           class="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400">
       </form>
 
@@ -108,7 +108,8 @@ watch(() => route.path, () => {
           class="inline-flex h-10 shrink-0 cursor-pointer items-center gap-2 rounded-full bg-[#F2F4F7] px-4 text-sm font-semibold text-[#1c1c1c] shadow-sm transition hover:bg-white hover:shadow-md"
           aria-label="Tài khoản thành viên" @click="handleMemberClick">
           <template v-if="user">
-            <img v-if="avatarUrl" :src="avatarUrl" :alt="displayName" class="size-7 rounded-full object-cover ring-2 ring-[#FFD166]/20">
+            <img v-if="avatarUrl" :src="avatarUrl" :alt="displayName"
+              class="size-7 rounded-full object-cover ring-2 ring-[#FFD166]/20">
             <span v-else
               class="grid size-7 place-items-center rounded-full bg-[#FFD166]/20 text-xs font-bold text-[#FFD166]">
               {{ displayInitial }}
@@ -117,7 +118,8 @@ watch(() => route.path, () => {
           </template>
           <template v-else>
             <svg class="size-5 shrink-0" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+              <path
+                d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
             </svg>
             <span>Thành viên</span>
           </template>
@@ -125,10 +127,11 @@ watch(() => route.path, () => {
 
         <Transition name="member-menu">
           <div v-if="user && memberMenuOpen"
-            class="absolute right-0 top-[calc(100%+0.5rem)] w-56 overflow-hidden rounded-2xl border border-white/[0.08] bg-[#12121a]/95 py-2 text-sm shadow-[0_20px_50px_rgba(0,0,0,0.5)] backdrop-blur-xl">
-            <div class="border-b border-white/[0.06] px-4 py-3">
+            class="absolute right-0 top-[calc(100%+0.5rem)] w-56 overflow-hidden rounded-2xl border border-white/8 bg-[#12121a]/95 py-2 text-sm shadow-[0_20px_50px_rgba(0,0,0,0.5)] backdrop-blur-xl">
+            <div class="border-b border-white/6 px-4 py-3">
               <div class="flex items-center gap-2.5">
-                <img v-if="avatarUrl" :src="avatarUrl" :alt="displayName" class="size-8 rounded-full object-cover ring-2 ring-[#FFD166]/20">
+                <img v-if="avatarUrl" :src="avatarUrl" :alt="displayName"
+                  class="size-8 rounded-full object-cover ring-2 ring-[#FFD166]/20">
                 <div v-else class="grid size-8 shrink-0 place-items-center rounded-full bg-[#FFD166]/10">
                   <span class="text-xs font-bold text-[#FFD166]">{{ displayInitial }}</span>
                 </div>
@@ -139,11 +142,11 @@ watch(() => route.path, () => {
               </div>
             </div>
             <NuxtLink v-for="item in memberMenuItems" :key="item.label" :to="item.to"
-              class="flex h-10 w-full cursor-pointer items-center gap-2.5 px-4 transition hover:bg-white/[0.04] hover:text-white">
+              class="flex h-10 w-full cursor-pointer items-center gap-2.5 px-4 transition hover:bg-white/4 hover:text-white">
               <AppIcon :name="item.icon" class="size-4 shrink-0 text-white/50" />
               <span class="text-[13px] font-medium text-white/70">{{ item.label }}</span>
             </NuxtLink>
-            <div class="my-1.5 border-t border-white/[0.06]" />
+            <div class="my-1.5 border-t border-white/6" />
             <button type="button"
               class="flex h-10 w-full cursor-pointer items-center gap-2.5 px-4 text-[13px] font-medium text-red-400/70 transition hover:bg-red-400/8 hover:text-red-400"
               @click="handleLogout">
@@ -176,7 +179,8 @@ watch(() => route.path, () => {
             </div>
 
             <div v-if="user" class="flex items-center gap-3 border-b border-white/10 px-4 py-4">
-              <img v-if="avatarUrl" :src="avatarUrl" :alt="displayName" class="size-9 rounded-full object-cover ring-2 ring-[#FFD166]/20">
+              <img v-if="avatarUrl" :src="avatarUrl" :alt="displayName"
+                class="size-9 rounded-full object-cover ring-2 ring-[#FFD166]/20">
               <span v-else
                 class="grid size-9 place-items-center rounded-full bg-yellow-400/10 text-sm font-black text-yellow-400">
                 {{ displayInitial }}

app/components/HomeMovieCard.vue

@@ -19,20 +19,9 @@ const props = defineProps<{
   }
 }>()
 
-const episodeDisplay = computed(() => {
-  const ep = props.movie.episode
-  const total = props.movie.episodeTotal
-  if (!ep) return undefined
-
-  const totalNum = total ? total.replace(/[^0-9]/g, '') : ''
-  const epNum = ep.replace(/[^0-9]/g, '')
-
-  if (epNum && totalNum && epNum !== totalNum) {
-    return `Tập ${epNum}/${totalNum}`
-  }
-
-  return ep
-})
+const episodeDisplay = computed(() =>
+  getEpisodeDisplay(props.movie.episode, props.movie.episodeTotal),
+)
 
 const isPreviewVisible = ref(false)
 const isDescriptionExpanded = ref(false)