feat: implement pagination for comments with load more functionality

app/pages/phim/[slug].vue

@@ -212,7 +212,7 @@ useHead(() => ({
 
       <!-- Content overlaps hero -->
       <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">
+        <div class="flex flex-col lg:flex-row gap-6 lg:gap-8 items-start">
           <!-- Poster Column -->
           <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
@@ -497,11 +497,15 @@ useHead(() => ({
                 </p>
               </div>
             </div>
+
+            <!-- Comment Section -->
+            <div class="mt-10">
+              <ClientOnly>
+                <CommentSection :source="activeSource" :slug="String(route.params.slug)" :movie-name="movie?.name" />
+              </ClientOnly>
+            </div>
           </div>
         </div>
-        <ClientOnly>
-          <CommentSection :source="activeSource" :slug="String(route.params.slug)" :movie-name="movie?.name" />
-        </ClientOnly>
       </div>
     </template>
   </div>

app/pages/xem/[slug].vue

@@ -590,7 +590,7 @@ useHead(() => ({
               </div>
               <div class="text-sm">
                 <span class="font-semibold text-white">{{ formatEpisodeName(activeEpisode?.name, selectedEpisode)
-                  }}</span>
+                }}</span>
                 <span class="mx-2 text-white/30">•</span>
                 <span class="text-white/60">{{ serverLabel(activeServer, selectedServer) }}</span>
               </div>
@@ -658,7 +658,7 @@ useHead(() => ({
                   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>
+                    }} tập</span>
                 </div>
 
                 <!-- Description -->
@@ -758,9 +758,11 @@ useHead(() => ({
           </aside>
         </div>
 
-        <ClientOnly>
-          <CommentSection :source="currentMovieSource" :slug="String(route.params.slug)" :movie-name="movie?.name" />
-        </ClientOnly>
+        <div class="mb-3">
+          <ClientOnly>
+            <CommentSection :source="currentMovieSource" :slug="String(route.params.slug)" :movie-name="movie?.name" />
+          </ClientOnly>
+        </div>
       </section>
     </template>
   </main>
@@ -894,5 +896,4 @@ useHead(() => ({
   inset: 0;
   background: linear-gradient(90deg, rgb(250 204 21) v-bind('`${progressPercent}%`'), transparent 0);
 }
-
 </style>