From dd42fe4f29b0260152a95339394be08f40e1b4dd Mon Sep 17 00:00:00 2001
From: ngthanhvu <nguyenthanhvudvfb@gmail.com>
Date: Thu, 23 Jul 2026 05:21:36 -0400
Subject: [PATCH] style: update background color and adjust layout for
 consistency across pages

---
 app/assets/css/main.css      |  4 +-
 app/components/AppHeader.vue |  3 +-
 app/pages/index.vue          |  8 ++--
 app/pages/phim/[slug].vue    | 89 +++++++++++++++++++++---------------
 app/pages/xem/[slug].vue     | 17 ++++---
 5 files changed, 67 insertions(+), 54 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index d6ab7b9..3b22dec 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -17,9 +17,7 @@ html {
 
 body {
   min-width: 320px;
-  background:
-    radial-gradient(circle at 15% 0%, rgba(234, 179, 8, 0.22), transparent 34rem),
-    linear-gradient(135deg, #201a05 0%, #17130a 46%, #020617 100%);
+  background-color: #0f111a;
   color: #f8fbff;
 }
 
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 56eebbe..4892d55 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -109,8 +109,7 @@ watch(() => route.path, () => {
           class="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400">
       </form>
 
-      <div class="group/member relative hidden shrink-0 items-center gap-2.5 md:flex"
-        @mouseenter="memberMenuOpen = true" @mouseleave="memberMenuOpen = false">
+      <div class="group/member relative hidden shrink-0 items-center gap-2.5 md:flex">
         <button type="button"
           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">
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 8578299..97280b5 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -352,7 +352,7 @@ useHead({
                 <span class="bg-[rgba(1,180,228,0.1)] text-white px-1.5 py-0.5">{{ hero.rating.toFixed(1) }}</span>
               </div>
               <span v-if="hero.quality"
-                class="inline-flex items-center justify-center rounded-sm text-[#141414] font-black leading-none tracking-normal h-[22px] px-2 text-[11px]"
+                class="inline-flex items-center justify-center rounded-sm text-[#141414] font-black leading-none tracking-normal h-5.5 px-2 text-[11px]"
                 style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%)">
                 {{ hero.quality }}
               </span>
@@ -378,7 +378,8 @@ useHead({
             </div>
 
             <!-- Action buttons (desktop only) -->
-            <div class="hidden md:flex justify-center md:justify-start items-center gap-4 pointer-events-auto relative z-40">
+            <div
+              class="hidden md:flex justify-center md:justify-start items-center gap-4 pointer-events-auto relative z-40">
               <!-- Watch Now button -->
               <NuxtLink :to="movieLink(hero)"
                 class="w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 text-[#0f1115] rounded-full flex items-center justify-center transition-transform hover:scale-105 shadow-[0_0_15px_rgba(254,207,89,0.5)] shrink-0 pointer-events-auto"
@@ -401,7 +402,8 @@ useHead({
                 <NuxtLink :to="movieLink(hero)"
                   class="group/link w-16 md:w-20 h-full flex items-center justify-center transition-colors text-white hover:text-[#FECF59]"
                   aria-label="Thông tin phim">
-                  <Info class="size-6 md:size-7 text-white fill-none stroke-current group-hover/link:text-[#FECF59] transition-all" />
+                  <Info
+                    class="size-6 md:size-7 text-white fill-none stroke-current group-hover/link:text-[#FECF59] transition-all" />
                 </NuxtLink>
               </div>
             </div>
diff --git a/app/pages/phim/[slug].vue b/app/pages/phim/[slug].vue
index 0fc5de6..02096dc 100644
--- a/app/pages/phim/[slug].vue
+++ b/app/pages/phim/[slug].vue
@@ -162,7 +162,7 @@ onMounted(async () => {
   await $fetch(`/api/movies/${route.params.slug}/view`, {
     method: 'POST',
     query: { source: route.query.source },
-  }).catch(() => {})
+  }).catch(() => { })
 })
 
 watch(requestedSource, () => { selectedServer.value = 0 })
@@ -181,13 +181,13 @@ useHead(() => ({
 </script>
 
 <template>
-  <main class="min-h-screen bg-[#0f111a] text-white">
+  <div class="min-h-screen bg-[#0f111a] text-white">
     <AppHeader />
 
     <!-- Loading -->
-    <div v-if="pending" class="mx-auto max-w-[1400px] px-4 pt-36 sm:px-6 lg:px-8 xl:px-10">
+    <div v-if="pending" class="mx-auto max-w-350 px-4 pt-36 sm:px-6 lg:px-8 xl:px-10">
       <div class="grid gap-6 lg:grid-cols-[22rem_minmax(0,1fr)]">
-        <div class="h-[28rem] animate-pulse rounded-xl bg-white/10" />
+        <div class="h-112 animate-pulse rounded-xl bg-white/10" />
         <div class="space-y-4">
           <div class="h-10 w-3/4 animate-pulse rounded bg-white/10" />
           <div class="h-6 w-1/2 animate-pulse rounded bg-white/10" />
@@ -207,7 +207,7 @@ useHead(() => ({
     <!-- Movie Detail -->
     <template v-else>
       <!-- Hero Backdrop -->
-      <section class="relative h-[210px] md:h-[600px] lg:h-[70vh] xl:max-h-[800px] overflow-hidden bg-[#0f111a]">
+      <section class="relative h-52.5 md:h-150 lg:h-[70vh] xl:max-h-200 overflow-hidden bg-[#0f111a]">
         <img :src="movie.poster || movie.thumb" :alt="movie.name"
           class="absolute inset-0 h-full w-full object-cover object-center scale-105 opacity-70 md:opacity-80">
         <div class="absolute inset-0 hidden md:block"
@@ -223,11 +223,12 @@ useHead(() => ({
       </section>
 
       <!-- Content overlaps hero -->
-      <div class="max-w-[1400px] mx-auto px-4 -mt-24 md:-mt-48 lg:-mt-64 relative z-10 mb-20">
+      <div class="max-w-350 mx-auto px-4 -mt-24 md:-mt-48 lg:-mt-64 relative z-10 mb-20">
         <div class="flex flex-col md:flex-row gap-6 md:gap-10 items-start">
           <!-- Poster Column -->
-          <div class="shrink-0 w-40 md:w-56 lg:w-64 max-w-[280px] mx-auto md:mx-0 flex flex-col gap-8">
-            <div class="relative rounded-xl overflow-hidden shadow-2xl shadow-[#0f111a]/50 ring-1 ring-white/10 bg-[#16161e] w-full aspect-[2/3]">
+          <div class="shrink-0 w-40 md:w-56 lg:w-64 max-w-70 mx-auto md:mx-0 flex flex-col gap-8">
+            <div
+              class="relative rounded-xl overflow-hidden shadow-2xl shadow-[#0f111a]/50 ring-1 ring-white/10 bg-[#16161e] w-full aspect-2/3">
               <img :src="movie.poster || movie.thumb" :alt="movie.name"
                 class="w-full h-full object-cover relative z-10">
             </div>
@@ -259,14 +260,16 @@ useHead(() => ({
             <!-- Badges -->
             <div class="hidden md:flex flex-wrap items-center gap-2 text-white/90 mb-4 text-[10px] md:text-xs">
               <span v-if="movie.quality"
-                class="inline-flex items-center justify-center rounded-[4px] font-black leading-none tracking-normal h-[22px] px-2 text-[11px]"
+                class="inline-flex items-center justify-center rounded-sm font-black leading-none tracking-normal h-5.5 px-2 text-[11px]"
                 style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%);color:#141414">
                 {{ movie.quality }}
               </span>
-              <span v-if="movie.lang" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
+              <span v-if="movie.lang"
+                class="px-2 py-0.75 rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
                 {{ movie.lang }}
               </span>
-              <span v-if="getEpisodeDisplay()" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
+              <span v-if="getEpisodeDisplay()"
+                class="px-2 py-0.75 rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
                 {{ getEpisodeDisplay() }}
               </span>
               <span v-if="movie.rating"
@@ -289,8 +292,8 @@ useHead(() => ({
                 <div class="w-px h-8 bg-white/10 mx-1" />
                 <button type="button"
                   class="flex flex-col items-center justify-center gap-1 transition-all hover:-translate-y-0.5 active:scale-95 px-3"
-                  :class="isFavoriteMovie ? 'text-yellow-300' : 'text-white/90'"
-                  :disabled="actionBusy" @click="toggleFavorite">
+                  :class="isFavoriteMovie ? 'text-yellow-300' : 'text-white/90'" :disabled="actionBusy"
+                  @click="toggleFavorite">
                   <Heart class="size-5" :class="isFavoriteMovie ? 'fill-current' : ''" />
                   <span class="text-[11px]">{{ isFavoriteMovie ? 'Đã thích' : 'Yêu thích' }}</span>
                 </button>
@@ -315,8 +318,8 @@ useHead(() => ({
             <div class="flex md:hidden gap-5 justify-center pt-2 mb-4">
               <button type="button"
                 class="flex flex-col items-center justify-center gap-1 transition-all active:scale-95"
-                :class="isFavoriteMovie ? 'text-yellow-300' : 'text-white/90'"
-                :disabled="actionBusy" @click="toggleFavorite">
+                :class="isFavoriteMovie ? 'text-yellow-300' : 'text-white/90'" :disabled="actionBusy"
+                @click="toggleFavorite">
                 <Heart class="size-6" :class="isFavoriteMovie ? 'fill-current' : ''" />
                 <span class="text-[11px]">Yêu thích</span>
               </button>
@@ -346,7 +349,8 @@ useHead(() => ({
               </div>
               <div class="flex items-start gap-2">
                 <span class="text-slate-500 shrink-0 w-20">Loại:</span>
-                <span class="text-slate-200">{{ movie.type === 'single' ? 'Phim lẻ' : movie.type === 'series' ? 'Phim bộ' : movie.type || 'Đang cập nhật' }}</span>
+                <span class="text-slate-200">{{ movie.type === 'single' ? 'Phim lẻ' : movie.type === 'series' ?
+                  'Phim bộ' : movie.type || 'Đang cập nhật' }}</span>
               </div>
               <div class="flex items-start gap-2">
                 <span class="text-slate-500 shrink-0 w-20">Năm:</span>
@@ -377,14 +381,16 @@ useHead(() => ({
               <div v-if="movieInfoOpen" class="space-y-2 text-sm text-slate-300">
                 <div class="flex flex-wrap gap-2 text-[10px] mb-3">
                   <span v-if="movie.quality"
-                    class="inline-flex items-center justify-center rounded-[4px] font-black h-[22px] px-2 text-[11px]"
+                    class="inline-flex items-center justify-center rounded-sm font-black h-5.5 px-2 text-[11px]"
                     style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%);color:#141414">
                     {{ movie.quality }}
                   </span>
-                  <span v-if="movie.lang" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
+                  <span v-if="movie.lang"
+                    class="px-2 py-0.75 rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
                     {{ movie.lang }}
                   </span>
-                  <span v-if="getEpisodeDisplay()" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
+                  <span v-if="getEpisodeDisplay()"
+                    class="px-2 py-0.75 rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
                     {{ getEpisodeDisplay() }}
                   </span>
                   <span v-if="movie.rating"
@@ -394,11 +400,17 @@ useHead(() => ({
                   </span>
                 </div>
 
-                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Trạng thái:</span><span>{{ getEpisodeDisplay() || movie.episode || 'Đang cập nhật' }}</span></div>
-                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Loại:</span><span>{{ movie.type === 'single' ? 'Phim lẻ' : movie.type === 'series' ? 'Phim bộ' : movie.type || 'Đang cập nhật' }}</span></div>
-                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Năm:</span><span>{{ movie.year || 'Đang cập nhật' }}</span></div>
-                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Thể loại:</span><span>{{ movie.categories?.join(', ') || 'Đang cập nhật' }}</span></div>
-                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Quốc gia:</span><span>{{ movie.countries?.join(', ') || 'Đang cập nhật' }}</span></div>
+                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Trạng thái:</span><span>{{
+                  getEpisodeDisplay() || movie.episode || 'Đang cập nhật' }}</span></div>
+                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Loại:</span><span>{{ movie.type ===
+                  'single' ? 'Phim lẻ' : movie.type === 'series' ? 'Phim bộ' : movie.type || 'Đang cập nhật' }}</span>
+                </div>
+                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Năm:</span><span>{{ movie.year ||
+                  'Đang cập nhật' }}</span></div>
+                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Thể loại:</span><span>{{
+                  movie.categories?.join(', ') || 'Đang cập nhật' }}</span></div>
+                <div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Quốc gia:</span><span>{{
+                  movie.countries?.join(', ') || 'Đang cập nhật' }}</span></div>
 
                 <div v-if="movie.content" class="pt-3 border-t border-white/10">
                   <h3 class="text-[14px] font-semibold text-white mb-2">Nội dung phim</h3>
@@ -421,14 +433,16 @@ useHead(() => ({
                   :class="activeTab === 'episodes' ? 'text-[#F5C518]' : 'text-slate-400 hover:text-white'"
                   @click="activeTab = 'episodes'">
                   Tập phim
-                  <span v-if="activeTab === 'episodes'" class="absolute bottom-0 left-0 w-full h-[2px] bg-[#F5C518] rounded-t-md" />
+                  <span v-if="activeTab === 'episodes'"
+                    class="absolute bottom-0 left-0 w-full h-0.5 bg-[#F5C518] rounded-t-md" />
                 </button>
                 <button type="button"
                   class="pb-3 text-[13px] md:text-[15px] font-semibold transition-colors relative whitespace-nowrap"
                   :class="activeTab === 'actors' ? 'text-[#F5C518]' : 'text-slate-400 hover:text-white'"
                   @click="activeTab = 'actors'">
                   Diễn viên
-                  <span v-if="activeTab === 'actors'" class="absolute bottom-0 left-0 w-full h-[2px] bg-[#F5C518] rounded-t-md" />
+                  <span v-if="activeTab === 'actors'"
+                    class="absolute bottom-0 left-0 w-full h-0.5 bg-[#F5C518] rounded-t-md" />
                 </button>
               </div>
 
@@ -444,10 +458,9 @@ useHead(() => ({
                     class="group flex items-center gap-1.5 text-[13px] transition-colors rounded-md px-3.5 py-2 border font-medium"
                     :class="selectedServer === index
                       ? 'border-white/30 text-white bg-white/5'
-                      : 'border-transparent text-white/60 hover:text-white'"
-                    @click="selectedServer = index">
+                      : 'border-transparent text-white/60 hover:text-white'" @click="selectedServer = index">
                     <span>{{ serverLabel(server, index) }}</span>
-                    <span class="w-[20px] h-[20px] rounded-full font-bold text-[10px]"
+                    <span class="w-5 h-5 rounded-full font-bold text-[10px]"
                       :class="selectedServer === index ? 'bg-white text-black' : 'bg-white/20 text-white'">
                       {{ server.episodes?.length || 0 }}
                     </span>
@@ -460,12 +473,13 @@ useHead(() => ({
                   <NuxtLink v-for="(episode, index) in activeServer.episodes" :key="`${episode.name}-${index}`"
                     :to="episodeLink(index)"
                     class="group flex items-center justify-center gap-1.5 rounded-lg transition-all py-2.5 px-2 text-[13px] bg-[#191b24] text-white/90 hover:text-[#FFD166] hover:bg-[#1f2130] shadow-sm">
-                    <Play class="size-3 fill-current opacity-0 group-hover:opacity-100 transition-opacity" />
+                    <Play class="size-3 fill-current" />
                     {{ formatEpisodeName(episode.name, index) }}
                   </NuxtLink>
                 </div>
 
-                <p v-else class="mt-2 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
+                <p v-else
+                  class="mt-2 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
                   Chưa có tập xem từ server này.
                 </p>
               </div>
@@ -483,12 +497,14 @@ useHead(() => ({
                     </div>
                     <div class="min-w-0">
                       <p class="truncate text-sm font-semibold text-white">{{ actor.name }}</p>
-                      <p v-if="actor.originalName" class="mt-0.5 truncate text-xs text-yellow-200/70">{{ actor.originalName }}</p>
+                      <p v-if="actor.originalName" class="mt-0.5 truncate text-xs text-yellow-200/70">{{
+                        actor.originalName }}</p>
                       <p v-if="actor.role" class="mt-0.5 truncate text-xs text-slate-400">{{ actor.role }}</p>
                     </div>
                   </div>
                 </div>
-                <p v-else class="mt-4 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
+                <p v-else
+                  class="mt-4 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
                   Chưa có thông tin diễn viên.
                 </p>
               </div>
@@ -502,14 +518,13 @@ useHead(() => ({
             <MessageCircle class="size-5 text-yellow-300" />
             <h2 class="text-xl font-bold text-white">Bình luận</h2>
           </div>
-          <div class="flex flex-col items-center justify-center py-10 text-center border border-white/10 rounded-xl bg-[#191b24]">
+          <div
+            class="flex flex-col items-center justify-center py-10 text-center border border-white/10 rounded-xl bg-[#191b24]">
             <MessageCircle class="size-10 text-slate-500 mb-3" />
             <p class="text-sm text-slate-400">Tính năng bình luận đang được phát triển.</p>
           </div>
         </div>
       </div>
     </template>
-
-    <AppFooter />
-  </main>
+  </div>
 </template>
diff --git a/app/pages/xem/[slug].vue b/app/pages/xem/[slug].vue
index afd5c28..6c1b71a 100644
--- a/app/pages/xem/[slug].vue
+++ b/app/pages/xem/[slug].vue
@@ -431,7 +431,7 @@ useHead(() => ({
     <AppHeader />
 
     <!-- Loading -->
-    <section v-if="pending && !movie" class="mx-auto max-w-[1400px] px-4 pt-20 sm:px-6 lg:px-8 xl:px-10">
+    <section v-if="pending && !movie" class="mx-auto max-w-350 px-4 pt-20 sm:px-6 lg:px-8 xl:px-10">
       <div class="-mx-4 mb-6 overflow-hidden sm:mx-0 sm:rounded-xl">
         <div class="aspect-video w-full animate-pulse rounded-none sm:rounded-t-xl bg-white/10" />
         <div class="flex h-14 items-center justify-between border-t border-white/5 bg-black px-4 sm:px-6">
@@ -456,7 +456,7 @@ useHead(() => ({
 
     <!-- Watch Page -->
     <template v-else>
-      <section class="mx-auto max-w-[1400px] px-4 pt-16 sm:px-6 lg:px-8 xl:px-10">
+      <section class="mx-auto max-w-350 px-4 pt-16 sm:px-6 lg:px-8 xl:px-10">
         <!-- Player -->
         <div class="-mx-4 mb-6 overflow-hidden sm:mx-0 sm:rounded-xl">
           <div ref="playerViewportRef" class="relative aspect-video bg-slate-950">
@@ -628,13 +628,13 @@ useHead(() => ({
             <!-- Movie Info Card -->
             <div class="mb-6 flex items-start gap-6 lg:gap-8">
               <div
-                class="hidden shrink-0 aspect-[2/3] w-32 rounded-xl overflow-hidden shadow-2xl sm:block md:w-40 lg:w-[150px]">
+                class="hidden shrink-0 aspect-2/3 w-32 rounded-xl overflow-hidden shadow-2xl sm:block md:w-40 lg:w-37.5">
                 <img :src="movie.poster || movie.thumb" :alt="movie.name" class="w-full h-full object-cover">
               </div>
               <div class="flex-1 flex flex-col gap-4 pt-1 w-full text-center sm:text-left">
                 <div>
                   <h1 class="text-2xl md:text-[28px] font-bold text-white mb-2 leading-tight">{{ movie.name }}</h1>
-                  <h2 class="text-[#eab308] text-sm md:text-[15px] font-medium opacity-90">{{ movie.originName }}</h2>
+                  <h2 class="text-cinek-500 text-sm md:text-[15px] font-medium opacity-90">{{ movie.originName }}</h2>
                 </div>
 
                 <!-- Badges -->
@@ -646,7 +646,7 @@ useHead(() => ({
                       movie.rating.toFixed(1) }}</span>
                   </span>
                   <span v-if="movie.quality"
-                    class="inline-flex items-center justify-center rounded-[4px] font-black h-[22px] px-2 text-[11px]"
+                    class="inline-flex items-center justify-center rounded-sm font-black h-5.5 px-2 text-[11px]"
                     style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%);color:#141414">{{
                       movie.quality }}</span>
                   <span v-if="movie.year"
@@ -666,9 +666,10 @@ useHead(() => ({
 
                 <!-- Episode Progress -->
                 <div v-if="episodeProgress.total"
-                  class="inline-flex self-center sm:self-start items-center gap-1.5 px-3 py-1.5 rounded-full mt-2 border bg-[#eab308]/10 border-[#eab308]/20 text-[#eab308]">
+                  class="inline-flex self-center sm:self-start items-center gap-1.5 px-3 py-1.5 rounded-full mt-2 border bg-cinek-500/10 border-cinek-500/20 text-cinek-500">
                   <Loader2 class="size-3.5 animate-spin" />
-                  <span class="text-xs font-medium">Đã chiếu: {{ episodeProgress.available }} / {{ episodeProgress.total }} tập</span>
+                  <span class="text-xs font-medium">Đã chiếu: {{ episodeProgress.available }} / {{ episodeProgress.total
+                  }} tập</span>
                 </div>
 
                 <!-- Description -->
@@ -784,8 +785,6 @@ useHead(() => ({
         </div>
       </section>
     </template>
-
-    <AppFooter />
   </main>
 </template>