feat: responsive navbar, hero và trang chi tiết phim

- Navbar: thêm hamburger menu + sidebar slide trên mobile
- Hero: responsive height, font-size, buttons, ẩn thumbnail carousel trên mobile
- Logo: nhỏ hơn trên mobile
- Trang chi tiết phim: layout mobile giống Ophim, nút xem đỏ, action buttons có label
- Movie card: điều chỉnh padding trên mobile

app/components/AppHeader.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { Search } from 'lucide-vue-next'
+import { Menu, Search, X } from 'lucide-vue-next'
 
 const route = useRoute()
 const router = useRouter()
 const keyword = ref(typeof route.query.q === 'string' ? route.query.q : '')
+const mobileMenuOpen = ref(false)
 
 const navItems = [
   { label: 'Trang chủ', to: '/' },
@@ -24,37 +25,88 @@ function submitSearch() {
     query: q ? { q } : undefined,
   })
 }
+
+function closeMobileMenu() {
+  mobileMenuOpen.value = false
+}
+
+watch(() => route.path, () => {
+  closeMobileMenu()
+})
 </script>
 
 <template>
   <header class="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-slate-950/78 backdrop-blur-xl">
-    <nav class="mx-auto grid max-w-[1560px] grid-cols-[auto_1fr] items-center gap-4 px-4 py-3 sm:px-6 lg:grid-cols-[auto_1fr_auto] lg:px-8 xl:px-10">
+    <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 />
 
-      <div class="no-scrollbar order-3 col-span-2 flex items-center justify-center gap-4 overflow-x-auto text-sm font-semibold text-slate-200 lg:order-none lg:col-span-1 lg:gap-7">
-        <NuxtLink
-          v-for="item in navItems"
-          :key="item.to"
-          :to="item.to"
-          class="shrink-0 transition hover:text-sky-200"
-          :class="isActive(item.to) ? 'text-sky-200' : 'text-slate-200'"
-        >
+      <div class="hidden lg:flex lg:items-center lg:gap-7 lg:text-sm lg:font-semibold lg:text-slate-200">
+        <NuxtLink v-for="item in navItems" :key="item.to" :to="item.to" class="shrink-0 transition hover:text-sky-200"
+          :class="isActive(item.to) ? 'text-sky-200' : 'text-slate-200'">
           {{ item.label }}
         </NuxtLink>
       </div>
 
       <form
         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-sky-950/20 sm:max-w-sm"
-        @submit.prevent="submitSearch"
-      >
+        @submit.prevent="submitSearch">
         <Search class="mr-3 size-4 shrink-0 text-sky-200" />
-        <input
-          v-model="keyword"
-          type="search"
-          placeholder="Tìm phim Hàn Quốc..."
-          class="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400"
-        >
+        <input v-model="keyword" type="search" placeholder="Tìm phim Hàn Quốc..."
+          class="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400">
       </form>
+
+      <button type="button"
+        class="grid size-10 shrink-0 place-items-center rounded-lg border border-white/10 bg-white/8 text-white transition hover:bg-white/16 lg:hidden"
+        aria-label="Mở menu" @click="mobileMenuOpen = true">
+        <Menu class="size-5" />
+      </button>
     </nav>
+
+    <Teleport to="body">
+      <Transition name="sidebar">
+        <div v-if="mobileMenuOpen" class="fixed inset-0 z-60 lg:hidden">
+          <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="closeMobileMenu" />
+          <div class="absolute inset-y-0 left-0 w-72 bg-slate-950 shadow-2xl">
+            <div class="flex items-center justify-between border-b border-white/10 px-4 py-4">
+              <AppLogo />
+              <button type="button"
+                class="grid size-10 place-items-center rounded-lg border border-white/10 bg-white/8 text-white transition hover:bg-white/16"
+                aria-label="Đóng menu" @click="closeMobileMenu">
+                <X class="size-5" />
+              </button>
+            </div>
+            <nav class="flex flex-col gap-1 p-4">
+              <NuxtLink v-for="item in navItems" :key="item.to" :to="item.to"
+                class="rounded-lg px-4 py-3 text-base font-semibold text-slate-200 transition hover:bg-white/8 hover:text-sky-200"
+                :class="isActive(item.to) ? 'bg-white/8 text-sky-200' : ''" @click="closeMobileMenu">
+                {{ item.label }}
+              </NuxtLink>
+            </nav>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
   </header>
 </template>
+
+<style scoped>
+.sidebar-enter-active,
+.sidebar-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.sidebar-enter-active>div:last-child,
+.sidebar-leave-active>div:last-child {
+  transition: transform 0.2s ease;
+}
+
+.sidebar-enter-from,
+.sidebar-leave-to {
+  opacity: 0;
+}
+
+.sidebar-enter-from>div:last-child,
+.sidebar-leave-to>div:last-child {
+  transform: translateX(-100%);
+}
+</style>

app/components/AppLogo.vue

@@ -5,13 +5,13 @@ import { Play } from 'lucide-vue-next'
 <template>
   <NuxtLink
     to="/"
-    class="group inline-flex h-10 min-w-[132px] shrink-0 flex-row flex-nowrap items-center gap-2.5 whitespace-nowrap"
+    class="group inline-flex h-8 min-w-[100px] shrink-0 flex-row flex-nowrap items-center gap-2 whitespace-nowrap sm:h-10 sm:min-w-[132px] sm:gap-2.5"
     aria-label="KR PHIM"
   >
-    <span class="grid size-9 shrink-0 place-items-center rounded-lg border border-sky-200/80 bg-black/30 text-white shadow-lg shadow-black/20 transition group-hover:border-sky-300 group-hover:text-sky-200">
-      <Play class="ml-0.5 size-5 fill-current" />
+    <span class="grid size-7 shrink-0 place-items-center rounded-lg border border-sky-200/80 bg-black/30 text-white shadow-lg shadow-black/20 transition group-hover:border-sky-300 group-hover:text-sky-200 sm:size-9">
+      <Play class="ml-0.5 size-4 fill-current sm:size-5" />
     </span>
-    <span class="inline-flex items-baseline text-2xl font-black uppercase leading-none tracking-tight">
+    <span class="inline-flex items-baseline text-xl font-black uppercase leading-none tracking-tight sm:text-2xl">
       <span class="text-sky-300">KR</span><span class="text-white">PHIM</span>
     </span>
   </NuxtLink>

app/components/HomeMovieCard.vue

@@ -64,17 +64,14 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <NuxtLink
-    :to="movieLink"
-    class="group relative block h-[19.5rem] w-44 shrink-0 snap-start transition duration-300 hover:z-30 hover:-translate-y-1 sm:h-[20.5rem] sm:w-52 xl:w-56"
-    @mouseenter="showPreview"
-    @mouseleave="scheduleHide"
-    @focus="showPreview"
-    @blur="scheduleHide"
-  >
-    <div class="absolute inset-0 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:ring-sky-300/60">
-      <img :src="movie.thumb || movie.poster" :alt="movie.name" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
-      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950 via-slate-950/70 to-transparent p-3">
+  <NuxtLink :to="movieLink"
+    class="group relative block h-78 w-44 shrink-0 snap-start transition duration-300 hover:z-30 hover:-translate-y-1 sm:h-82 sm:w-52 xl:w-56"
+    @mouseenter="showPreview" @mouseleave="scheduleHide" @focus="showPreview" @blur="scheduleHide">
+    <div
+      class="absolute inset-0 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:ring-sky-300/60">
+      <img :src="movie.thumb || movie.poster" :alt="movie.name"
+        class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
+      <div class="absolute inset-x-0 bottom-0 bg-linear-to-t from-slate-950 via-slate-950/70 to-transparent p-3">
         <p class="line-clamp-2 text-sm font-bold leading-snug text-white">{{ movie.name }}</p>
         <p class="mt-1 truncate text-xs text-sky-100">{{ movie.episode || movie.year || movie.quality }}</p>
       </div>
@@ -85,25 +82,15 @@ onBeforeUnmount(() => {
   </NuxtLink>
 
   <Teleport to="body">
-    <Transition
-      enter-active-class="transition duration-180 ease-out"
-      enter-from-class="scale-95 opacity-0"
-      enter-to-class="scale-100 opacity-100"
-      leave-active-class="transition duration-120 ease-in"
-      leave-from-class="scale-100 opacity-100"
-      leave-to-class="scale-95 opacity-0"
-    >
-      <NuxtLink
-        v-if="isPreviewVisible"
-        :to="movieLink"
-        class="fixed z-[90] hidden origin-top-left overflow-hidden rounded-xl bg-[#1a0b14] text-white shadow-2xl shadow-black/60 ring-1 ring-sky-300/45 sm:block"
-        :style="previewStyle"
-        @mouseenter="keepPreview"
-        @mouseleave="scheduleHide"
-      >
+    <Transition enter-active-class="transition duration-180 ease-out" enter-from-class="scale-95 opacity-0"
+      enter-to-class="scale-100 opacity-100" leave-active-class="transition duration-120 ease-in"
+      leave-from-class="scale-100 opacity-100" leave-to-class="scale-95 opacity-0">
+      <NuxtLink v-if="isPreviewVisible" :to="movieLink"
+        class="fixed z-90 hidden origin-top-left overflow-hidden rounded-xl bg-[#1a0b14] text-white shadow-2xl shadow-black/60 ring-1 ring-sky-300/45 sm:block"
+        :style="previewStyle" @mouseenter="keepPreview" @mouseleave="scheduleHide">
         <div class="relative h-44 overflow-hidden">
           <img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover">
-          <div class="absolute inset-0 bg-gradient-to-t from-[#1a0b14] via-[#1a0b14]/30 to-transparent" />
+          <div class="absolute inset-0 bg-linear-to-t from-[#1a0b14] via-[#1a0b14]/30 to-transparent" />
           <div class="absolute inset-x-0 bottom-0 p-4">
             <h3 class="line-clamp-2 text-xl font-black leading-tight text-white">
               {{ movie.name }}
@@ -116,7 +103,8 @@ onBeforeUnmount(() => {
 
         <div class="p-4 pt-3">
           <div class="grid grid-cols-[1fr_6.25rem_6.25rem] gap-2">
-            <span class="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-sky-400 px-4 text-sm font-black text-slate-950 transition hover:bg-white">
+            <span
+              class="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-sky-400 px-4 text-sm font-black text-slate-950 transition hover:bg-white">
               <Play class="size-4 fill-current" />
               Xem ngay
             </span>
@@ -129,17 +117,20 @@ onBeforeUnmount(() => {
           </div>
 
           <div class="mt-3 flex flex-wrap gap-2 text-xs font-black">
-            <span v-if="movie.quality" class="rounded bg-black/28 px-2.5 py-1.5 text-white ring-1 ring-white/10">{{ movie.quality }}</span>
+            <span v-if="movie.quality" class="rounded bg-black/28 px-2.5 py-1.5 text-white ring-1 ring-white/10">{{
+              movie.quality }}</span>
             <span v-if="movie.lang" class="rounded bg-sky-300 px-2.5 py-1.5 text-slate-950">{{ movie.lang }}</span>
             <span v-if="movie.time" class="rounded bg-white px-2.5 py-1.5 text-slate-950">{{ movie.time }}</span>
-            <span v-if="movie.episode" class="rounded bg-black/28 px-2.5 py-1.5 text-white ring-1 ring-white/10">{{ movie.episode }}</span>
+            <span v-if="movie.episode" class="rounded bg-black/28 px-2.5 py-1.5 text-white ring-1 ring-white/10">{{
+              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>
+            <template v-if="!movie.countries?.length && !movie.categories?.length">Phim Hàn Quốc Vietsub mới cập
+              nhật</template>
           </p>
         </div>
       </NuxtLink>