Deploy DPTXA to Hugging Face Spaces

.env

@@ -0,0 +1,6 @@
+PUBLIC_SUPABASE_URL=https://jjmzipyewddbepnelawf.supabase.co
+PUBLIC_SUPABASE_ANON_KEY=sb_publishable_p45xwwJNPMFAzp9K8YQlkA_2oc87I1u
+
+# TPhimX Cloudflare Worker HLS Proxy URL
+# Triển khai worker trong thư mục `cloudflare-worker/` trước rồi dán link vào đây
+PUBLIC_CLOUDFLARE_PROXY_URL=https://tphimx-r2-proxy.txagt145.workers.dev

.gitattributes

@@ -0,0 +1,4 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text
+*.svg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,19 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+dist/
+.astro/
+.vercel/
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# System Files
+.DS_Store
+Thumbs.db
+
+.vercel

Dockerfile

@@ -0,0 +1,19 @@
+FROM node:18-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install --legacy-peer-deps
+COPY . .
+RUN npm run build
+
+FROM node:18-alpine AS runtime
+WORKDIR /app
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/node_modules ./node_modules
+COPY --from=build /app/package.json ./package.json
+COPY --from=build /app/public ./public
+
+ENV HOST=0.0.0.0
+ENV PORT=7860
+EXPOSE 7860
+
+CMD ["node", "./dist/server/entry.mjs"]

astro.config.mjs

@@ -0,0 +1,23 @@
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+import tailwindcss from '@tailwindcss/vite';
+import sitemap from '@astrojs/sitemap';
+import node from '@astrojs/node';
+
+export default defineConfig({
+  site: 'https://dongmephim.online',
+  output: 'server',
+  adapter: node({
+    mode: 'standalone'
+  }),
+  integrations: [react(), sitemap()],
+  vite: {
+    plugins: [tailwindcss()]
+  },
+  prefetch: true,
+  image: {
+    service: {
+      entrypoint: 'astro/assets/services/sharp'
+    }
+  }
+});

cloudflare-worker/README.md

@@ -0,0 +1,49 @@
+# TPhimX - Cloudflare Worker R2 Auto-Cache CDN & Media Proxy
+
+Dự án này chứa mã nguồn **Cloudflare Worker** chịu trách nhiệm chạy **Reverse Proxy & Tự động lưu trữ (Cache) luồng phim HLS** vào bộ nhớ Cloudflare R2 bucket của bạn.
+
+---
+
+## ⚡ Các Tính Năng Vượt Trội
+
+1. **Bỏ qua CORS (CORS Bypass):** Cho phép phát phim trực tiếp từ trình duyệt trên mọi tên miền (`localhost`, `vercel.app`, `Smart TV`, `Mobile App`).
+2. **Hỗ trợ tua phim (Range Requests):** Trình phát phim có thể tua (seeking/scrubbing) mượt mà không bị xoay tròn tải lại nhờ hỗ trợ mã phản hồi HTTP `206 Partial Content`.
+3. **Tự động Cache vào R2 (Cache Miss / Cache Hit):**
+   - Khi có người xem phim, Worker sẽ kiểm tra trong Cloudflare R2 bucket (`tphimx-movie`) trước.
+   - Nếu phim **đã có** (Cache HIT): Worker phát trực tiếp từ R2 cực nhanh và mượt mà, **không tốn băng thông và zero egress fee**.
+   - Nếu phim **chưa có** (Cache MISS): Worker tải phim từ link gốc (như KKPhim/NguonC), đồng thời lưu file đó vào R2 bucket của bạn ở chế độ nền (background task) và trả về cho người dùng cùng lúc. Lần sau người khác xem sẽ là Cache HIT!
+4. **M3U8 Playlist Rewriter:** Tự động phân tích file danh sách phát `.m3u8` và viết lại toàn bộ đường dẫn các phân đoạn `.ts` để chúng tự động đi qua Worker và lưu vào R2 bucket của bạn.
+
+---
+
+## 🚀 Hướng Dẫn Triển Khai (Chỉ 2 Phút)
+
+Hãy chắc chắn rằng máy tính của bạn đã cài đặt Node.js. Chạy các lệnh sau trong Terminal tại thư mục này:
+
+### Bước 1: Đăng nhập vào Cloudflare
+Bật Terminal và chạy lệnh sau để đăng nhập tài khoản Cloudflare của bạn:
+```bash
+npx wrangler login
+```
+*Trình duyệt sẽ tự động mở ra, bạn chỉ cần bấm **Allow/Xác nhận**.*
+
+### Bước 2: Triển khai Worker
+Chạy lệnh sau để deploy trực tiếp lên hệ thống Cloudflare toàn cầu:
+```bash
+npx wrangler deploy
+```
+*Sau khi hoàn tất, hệ thống sẽ trả về một đường dẫn Worker của bạn, ví dụ:*
+`https://tphimx-r2-proxy.tên-tài-khoản.workers.dev`
+
+---
+
+## ⚙️ Cấu Hình Tên Miền / Cập Nhật Ứng Dụng Web
+
+Sau khi đã deploy xong và có link Worker của bạn:
+
+1. Mở file `.env` của web và cấu hình thêm biến môi trường sau để ứng dụng web tự động nhận diện:
+   ```env
+   PUBLIC_CLOUDFLARE_PROXY_URL=https://tphimx-r2-proxy.tên-tài-khoản.workers.dev
+   ```
+
+2. Các trang phát phim như [[slug].astro](file:///c:/Users/TXA3100/Desktop/SRC%20-%20ROPHIm/web/src/pages/xem/%5Bslug%5D.astro) sẽ tự động ưu tiên điều hướng qua Proxy R2 của bạn để phát phim nhanh chóng và tự động lưu trữ lại.

cloudflare-worker/index.js

@@ -0,0 +1,274 @@
+/**
+ * TPhimX - Cloudflare Worker HLS Media Proxy & R2 Auto-Cache CDN
+ * 
+ * Features:
+ * 1. CORS Bypass: Attaches Access-Control-Allow-Origin: * to all requests.
+ * 2. Range Requests: Supports seeking/scrubbing in HLS players (206 Partial Content).
+ * 3. Dynamic R2 Caching: Checks R2 first. On cache miss, fetches original video segment,
+ *    caches it into R2, and pipes it back to the client.
+ * 4. Playlist Rewriter: Rewrites .m3u8 relative and absolute URLs to route all subsequent
+ *    .ts media segment requests through this Worker and cache them in R2 automatically.
+ */
+
+export default {
+  async fetch(request, env, ctx) {
+    const urlObj = new URL(request.url);
+    const targetUrlStr = urlObj.searchParams.get('url');
+
+    if (!targetUrlStr) {
+      // Direct R2 Path-based Request: e.g. /fbi-part-one/360p/index.m3u8
+      const pathname = urlObj.pathname;
+      if (pathname && pathname !== '/') {
+        const r2Key = pathname.replace(/^\/+/, ''); // Convert leading slash to relative key
+        try {
+          const object = await env.tphimx_movie.get(r2Key);
+          if (object !== null) {
+            // Cache HIT - Serve directly from R2
+            const headers = new Headers();
+            object.writeHttpMetadata(headers);
+            headers.set('Access-Control-Allow-Origin', '*');
+            headers.set('X-TPhimX-Cache', 'HIT (Direct R2 Path)');
+            
+            // Handle Range Requests for seekability
+            const rangeHeader = request.headers.get('Range');
+            if (rangeHeader && object.size > 0) {
+              const parts = rangeHeader.replace(/bytes=/, "").split("-");
+              const start = parseInt(parts[0], 10);
+              const end = parts[1] ? parseInt(parts[1], 10) : object.size - 1;
+              
+              if (start >= 0 && end < object.size && start <= end) {
+                const slicedObject = await env.tphimx_movie.get(r2Key, {
+                  range: { offset: start, length: end - start + 1 }
+                });
+                
+                headers.set('Content-Range', `bytes ${start}-${end}/${object.size}`);
+                headers.set('Content-Length', String(end - start + 1));
+                
+                return new Response(slicedObject.body, {
+                  status: 206,
+                  headers
+                });
+              }
+            }
+            
+            return new Response(object.body, {
+              status: 200,
+              headers
+            });
+          } else {
+            return new Response('File not found in R2 bucket', { 
+              status: 404, 
+              headers: { 'Access-Control-Allow-Origin': '*' } 
+            });
+          }
+        } catch (err) {
+          return new Response(`R2 Path Error: ${err.message}`, { 
+            status: 500, 
+            headers: { 'Access-Control-Allow-Origin': '*' } 
+          });
+        }
+      }
+
+      return new Response(JSON.stringify({ 
+        error: 'Missing "url" search parameter.',
+        usage: `${urlObj.origin}/?url=https://example.com/stream.m3u8`
+      }), {
+        status: 400,
+        headers: {
+          'Content-Type': 'application/json',
+          'Access-Control-Allow-Origin': '*'
+        }
+      });
+    }
+
+    // Handle OPTIONS Preflight request
+    if (request.method === 'OPTIONS') {
+      return new Response(null, {
+        status: 204,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, HEAD, OPTIONS',
+          'Access-Control-Allow-Headers': '*',
+          'Access-Control-Max-Age': '86400'
+        }
+      });
+    }
+
+    let targetUrl;
+    try {
+      targetUrl = new URL(targetUrlStr);
+    } catch (e) {
+      return new Response('Invalid target URL format', { status: 400, headers: { 'Access-Control-Allow-Origin': '*' } });
+    }
+
+    // Generate unique storage key for Cloudflare R2
+    // Scheme: cache/<hostname>/<clean_pathname>
+    const cleanPath = targetUrl.pathname.replace(/^\/+/, '');
+    const r2Key = `cache/${targetUrl.hostname}/${cleanPath}`;
+
+    // 1. Check if file already exists in Cloudflare R2 bucket
+    try {
+      const object = await env.tphimx_movie.get(r2Key);
+      if (object !== null) {
+        // Cache HIT - Serve directly from R2
+        const headers = new Headers();
+        object.writeHttpMetadata(headers);
+        headers.set('Access-Control-Allow-Origin', '*');
+        headers.set('X-TPhimX-Cache', 'HIT (Cloudflare R2)');
+        
+        // Handle Range Requests for seekability
+        const rangeHeader = request.headers.get('Range');
+        if (rangeHeader && object.size > 0) {
+          const parts = rangeHeader.replace(/bytes=/, "").split("-");
+          const start = parseInt(parts[0], 10);
+          const end = parts[1] ? parseInt(parts[1], 10) : object.size - 1;
+          
+          if (start >= 0 && end < object.size && start <= end) {
+            // Slice the R2 object
+            const slicedObject = await env.tphimx_movie.get(r2Key, {
+              range: { offset: start, length: end - start + 1 }
+            });
+            
+            headers.set('Content-Range', `bytes ${start}-${end}/${object.size}`);
+            headers.set('Content-Length', String(end - start + 1));
+            
+            return new Response(slicedObject.body, {
+              status: 206,
+              headers
+            });
+          }
+        }
+        
+        return new Response(object.body, {
+          status: 200,
+          headers
+        });
+      }
+    } catch (err) {
+      // Log error but fallback to fetching from source to prevent playback interruption
+      console.error('R2 read error:', err.message);
+    }
+
+    // Cache MISS - Fetch from original media source server
+    try {
+      // Forward request headers like Range
+      const fetchHeaders = new Headers();
+      
+      // Bypass anti-hotlinking/Referer checks of media providers (e.g. s2.phim1280.tv)
+      const targetOrigin = targetUrl.origin;
+      fetchHeaders.set('Referer', targetOrigin + '/');
+      fetchHeaders.set('Origin', targetOrigin);
+      fetchHeaders.set('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36');
+      
+      const range = request.headers.get('Range');
+      if (range) fetchHeaders.set('Range', range);
+      
+      const response = await fetch(targetUrlStr, {
+        headers: fetchHeaders
+      });
+
+      if (!response.ok && response.status !== 206) {
+        const responseText = await response.text().catch(() => '');
+        return new Response(JSON.stringify({
+          error: `Failed to fetch original media source (HTTP ${response.status})`,
+          targetUrl: targetUrlStr,
+          sentHeaders: Object.fromEntries(fetchHeaders.entries()),
+          responseHeaders: Object.fromEntries(response.headers.entries()),
+          responseBody: responseText.substring(0, 500)
+        }), {
+          status: response.status,
+          headers: {
+            'Content-Type': 'application/json',
+            'Access-Control-Allow-Origin': '*'
+          }
+        });
+      }
+
+      const contentType = response.headers.get('Content-Type') || '';
+      const isM3U8 = targetUrl.pathname.endsWith('.m3u8') || 
+                     contentType.includes('mpegurl') || 
+                     contentType.includes('application/x-mpegURL');
+
+      if (isM3U8) {
+        // Rewrite HLS playlist URLs to route through this Worker Proxy
+        let playlistText = await response.text();
+        const baseTargetUrl = targetUrl.origin + targetUrl.pathname.substring(0, targetUrl.pathname.lastIndexOf('/') + 1);
+
+        const lines = playlistText.split('\n');
+        const rewrittenLines = lines.map(line => {
+          const trimmed = line.trim();
+          if (trimmed.length === 0 || trimmed.startsWith('#')) {
+            return line;
+          }
+
+          // Resolve absolute URL
+          let absoluteUrl = trimmed;
+          if (!trimmed.startsWith('http://') && !trimmed.startsWith('https://')) {
+            if (trimmed.startsWith('/')) {
+              absoluteUrl = targetUrl.origin + trimmed;
+            } else {
+              absoluteUrl = baseTargetUrl + trimmed;
+            }
+          }
+
+          // Rewritten relative segment URL to pipe through the worker
+          return `${urlObj.origin}/?url=${encodeURIComponent(absoluteUrl)}`;
+        });
+
+        const rewrittenPlaylist = rewrittenLines.join('\n');
+        const playlistBuffer = new TextEncoder().encode(rewrittenPlaylist);
+
+        // Save the rewritten playlist into Cloudflare R2 bucket
+        ctx.waitUntil(
+          env.tphimx_movie.put(r2Key, playlistBuffer, {
+            httpMetadata: { contentType: 'application/x-mpegURL' }
+          }).catch(e => console.error('R2 Put Error:', e.message))
+        );
+
+        return new Response(rewrittenPlaylist, {
+          status: 200,
+          headers: {
+            'Content-Type': 'application/x-mpegURL',
+            'Access-Control-Allow-Origin': '*',
+            'X-TPhimX-Cache': 'MISS (Rewritten & Cached)'
+          }
+        });
+      } else {
+        // Fetch raw binary segment file (.ts)
+        const segmentData = await response.arrayBuffer();
+
+        // Save the segment file into Cloudflare R2 bucket asynchronously
+        ctx.waitUntil(
+          env.tphimx_movie.put(r2Key, segmentData, {
+            httpMetadata: { contentType: contentType }
+          }).catch(e => console.error('R2 Put Error:', e.message))
+        );
+
+        // Build Response
+        const headers = new Headers();
+        headers.set('Content-Type', contentType);
+        headers.set('Access-Control-Allow-Origin', '*');
+        headers.set('X-TPhimX-Cache', 'MISS (Cached Segment)');
+        
+        if (response.status === 206) {
+          const contentRange = response.headers.get('Content-Range');
+          if (contentRange) headers.set('Content-Range', contentRange);
+          return new Response(segmentData, {
+            status: 206,
+            headers
+          });
+        }
+
+        return new Response(segmentData, {
+          status: 200,
+          headers
+        });
+      }
+    } catch (fetchErr) {
+      return new Response(`Proxy error: ${fetchErr.message}`, {
+        status: 502,
+        headers: { 'Access-Control-Allow-Origin': '*' }
+      });
+    }
+  }
+};

cloudflare-worker/wrangler.toml

@@ -0,0 +1,9 @@
+name = "tphimx-r2-proxy"
+main = "index.js"
+compatibility_date = "2024-03-01"
+
+# Cloudflare R2 Bucket Binding
+[[r2_buckets]]
+binding = "tphimx_movie"
+bucket_name = "tphimx-movie"
+preview_bucket_name = "tphimx-movie"

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "tphimx",
+  "type": "module",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "postbuild": "node scripts/format-xml.js",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/node": "^10.1.1",
+    "@astrojs/react": "^5.0.5",
+    "@astrojs/sitemap": "^3.7.2",
+    "@astrojs/vercel": "^10.0.7",
+    "@supabase/supabase-js": "^2.105.4",
+    "@tailwindcss/vite": "^4.0.0",
+    "astro": "^6.3.3",
+    "lucide-react": "^0.460.0",
+    "nodemailer": "^8.0.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "swiper": "^11.2.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.0"
+  }
+}

public/lib/txa/txacomment.js

@@ -0,0 +1,493 @@
+/**
+ * TXA Comment Widget - TPHIMX Cinematic Platform
+ * Tự động hóa khung bình luận cao cấp.
+ */
+
+class TxaComment {
+  constructor(containerId) {
+    this.container = document.getElementById(containerId);
+    if (!this.container) return;
+
+    this.movieSlug = this.container.getAttribute('data-movie-slug');
+    this.movieType = this.container.getAttribute('data-movie-type') || null;
+    this.episodeName = this.container.getAttribute('data-episode-name') || null;
+    this.serverName = this.container.getAttribute('data-server-name') || null;
+
+    const userAttr = this.container.getAttribute('data-user');
+    this.user = userAttr ? JSON.parse(userAttr) : null;
+    this.comments = [];
+    this.bannedUsers = [];
+
+    this.init();
+  }
+
+  async init() {
+    this.renderSkeleton();
+    await this.fetchComments();
+    this.renderCommentsList();
+    this.setupListeners();
+  }
+
+  renderSkeleton() {
+    const isLogged = !!this.user;
+    
+    this.container.innerHTML = `
+      <div class="space-y-6 text-left">
+         <!-- Heading -->
+         <div class="flex items-center gap-3">
+            <i class="fas fa-comment-dots text-primary text-xl"></i>
+            <h3 class="text-lg font-black text-white">Bình luận (<span id="txac-count">0</span>)</h3>
+         </div>
+
+         <!-- Input Area -->
+         <div class="glass-sub rounded-3xl p-5 border border-white/5 space-y-4">
+            ${isLogged ? `
+               <div class="relative">
+                  <span class="absolute right-3 top-3 text-[10px] text-gray-500 font-mono" id="txac-char-counter">0 / 1000</span>
+                  <textarea 
+                     id="txac-textarea" 
+                     maxlength="1000" 
+                     placeholder="Viết bình luận..." 
+                     class="w-full bg-[#12141d] border border-white/5 rounded-2xl px-5 py-4 pt-10 text-sm text-white focus:outline-none focus:border-primary/50 transition-all resize-none min-h-[100px]"
+                  ></textarea>
+               </div>
+               
+               <div class="flex items-center justify-between pt-2">
+                  <!-- Spoiler Toggle -->
+                  <div class="flex items-center gap-3">
+                     <label class="relative inline-flex items-center cursor-pointer select-none">
+                        <input type="checkbox" id="txac-spoiler" class="sr-only peer" />
+                        <div class="w-9 h-5 bg-white/10 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></div>
+                     </label>
+                     <span class="text-xs text-gray-400 font-bold select-none">Tiết lộ?</span>
+                  </div>
+
+                  <!-- Send button -->
+                  <button id="txac-submit-btn" class="flex items-center gap-2 rounded-xl bg-primary/10 hover:bg-primary text-primary hover:text-dark border border-primary/20 hover:border-primary px-5 py-2.5 text-xs font-black uppercase tracking-widest transition-all active:scale-95 cursor-pointer">
+                     Gửi <i class="fas fa-paper-plane text-[10px]"></i>
+                  </button>
+               </div>
+            ` : `
+               <div class="py-8 text-center text-xs text-gray-500">
+                  Vui lòng <a href="/dang-nhap" class="text-primary font-bold hover:underline">đăng nhập</a> để tham gia bình luận.
+               </div>
+            `}
+         </div>
+
+         <!-- Comments list -->
+         <div id="txac-list" class="space-y-4 pt-4 divide-y divide-white/5">
+            <div class="text-center text-xs text-gray-500 py-6">Đang tải bình luận...</div>
+         </div>
+      </div>
+    `;
+  }
+
+  async fetchComments() {
+    try {
+      const res = await fetch(`/api/movie/comments?slug=${this.movieSlug}`);
+      if (res.ok) {
+        const data = await res.json();
+        this.comments = data.comments || [];
+        this.bannedUsers = data.bannedUsers || [];
+        this.userProfiles = data.userProfiles || {};
+      }
+    } catch (e) {
+      console.error('[TxaComment] Error fetching comments:', e);
+    }
+  }
+
+  renderCommentsList() {
+    const listContainer = document.getElementById('txac-list');
+    const countSpan = document.getElementById('txac-count');
+    
+    if (countSpan) {
+      const totalCount = this.comments.length;
+      countSpan.textContent = window.txaformat ? window.txaformat.twoDigits(totalCount) : (totalCount < 10 ? '0' + totalCount : totalCount);
+    }
+
+    if (!listContainer) return;
+
+    if (this.comments.length === 0) {
+      listContainer.innerHTML = `
+        <div class="text-center text-xs text-gray-500 py-8">
+           Chưa có bình luận nào. Hãy là người đầu tiên chia sẻ cảm nghĩ!
+        </div>
+      `;
+      return;
+    }
+
+    listContainer.innerHTML = this.comments.map(c => {
+      const charCode = c.username ? c.username.charCodeAt(0) : 65;
+      const avatarColors = [
+        'bg-primary text-dark', 'bg-emerald-500 text-white', 'bg-blue-500 text-white', 
+        'bg-pink-500 text-white', 'bg-yellow-500 text-dark', 'bg-purple-500 text-white'
+      ];
+      const avatarStyle = avatarColors[charCode % avatarColors.length];
+
+      // Spoiler Logic
+      const isSpoiler = c.is_spoiler;
+      const commentBody = isSpoiler 
+        ? `<div class="relative bg-red-500/5 border border-red-500/10 rounded-xl p-3 text-xs text-gray-400 mt-1 cursor-pointer spoiler-blur" onclick="this.classList.remove('spoiler-blur')">
+             <span class="block text-[9px] font-black uppercase text-red-400 tracking-wider mb-1"><i class="fas fa-exclamation-triangle"></i> Bình luận có chứa tình tiết phim (Click để xem)</span>
+             <span>${c.content}</span>
+           </div>`
+        : `<p class="text-sm text-gray-300 leading-relaxed mt-1">${c.content}</p>`;
+
+      // Episode Tag (If commented from watch page)
+      const episodeTag = (c.episode_name && c.server_name)
+        ? `<span class="ml-2 bg-primary/10 text-primary border border-primary/20 text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded-lg">${c.episode_name} - ${c.server_name}</span>`
+        : '';
+
+      // Likes/Dislikes Arrays
+      const likes = c.likes || [];
+      const dislikes = c.dislikes || [];
+      const hasLiked = this.user && likes.includes(this.user.username);
+      const hasDisliked = this.user && dislikes.includes(this.user.username);
+
+      // Actions Check (Delete comment)
+      const canDelete = this.user && (c.username === this.user.username || this.user.role === 'admin');
+      const deleteButton = canDelete
+        ? `<button class="txac-delete-btn text-gray-500 hover:text-red-400 transition-all flex items-center justify-center h-6 w-6 rounded-lg bg-white/5 hover:bg-red-500/10 cursor-pointer select-none ml-2" data-id="${c.id}" data-txatooltip="Xóa bình luận">
+             <i class="fas fa-trash-alt text-[10px]"></i>
+           </button>`
+        : '';
+
+      // Ban Button (For Admin ONLY)
+      const isBanned = this.bannedUsers.includes(c.username);
+      const showBanBtn = this.user && this.user.role === 'admin' && c.username !== this.user.username;
+      const banButton = showBanBtn
+        ? (isBanned 
+            ? `<button class="txac-ban-btn text-emerald-400 hover:text-emerald-300 transition-all flex items-center justify-center h-6 w-6 rounded-lg bg-white/5 hover:bg-emerald-500/10 cursor-pointer select-none ml-auto animate-pulse" data-username="${c.username}" data-action="unban" data-txatooltip="Bỏ cấm bình luận @${c.username}">
+                 <i class="fas fa-user-check text-[10px]"></i>
+               </button>`
+            : `<button class="txac-ban-btn text-red-500 hover:text-red-400 transition-all flex items-center justify-center h-6 w-6 rounded-lg bg-white/5 hover:bg-red-500/10 cursor-pointer select-none ml-auto" data-username="${c.username}" data-action="ban" data-txatooltip="Cấm bình luận @${c.username} (1 click)">
+                 <i class="fas fa-user-slash text-[10px]"></i>
+               </button>`
+          )
+        : '';
+
+      // Lấy thông tin profile phục vụ cho hover popup
+      const profile = (this.userProfiles && this.userProfiles[c.username]) || {
+        commentsCount: 0,
+        likesCount: 0,
+        ward: '',
+        province: ''
+      };
+
+      let locationStr = 'Chưa cập nhật';
+      if (profile.ward || profile.province) {
+        const parts = [];
+        if (profile.ward) parts.push(`xã ${profile.ward}`);
+        if (profile.province) parts.push(`tỉnh ${profile.province}`);
+        locationStr = parts.join(', ');
+        locationStr = locationStr.charAt(0).toUpperCase() + locationStr.slice(1);
+      }
+
+      const formattedComments = window.txaformat ? window.txaformat.twoDigits(profile.commentsCount) : (profile.commentsCount < 10 ? '0' + profile.commentsCount : profile.commentsCount);
+      const formattedLikes = window.txaformat ? window.txaformat.twoDigits(profile.likesCount) : (profile.likesCount < 10 ? '0' + profile.likesCount : profile.likesCount);
+
+      // Check if user has custom avatar URL
+      const hasAvatar = profile && profile.avatar_url;
+      const avatarInner = hasAvatar
+        ? `<img src="${profile.avatar_url}" class="h-full w-full object-cover" />`
+        : (c.username ? c.username[0] : 'U');
+
+      return `
+        <div class="pt-5 flex gap-4 items-start group">
+           <!-- Avatar -->
+           <div class="h-9 w-9 rounded-full overflow-hidden flex-shrink-0 flex items-center justify-center font-black uppercase text-xs ${hasAvatar ? '' : avatarStyle}">
+              ${avatarInner}
+           </div>
+           
+           <!-- Content -->
+           <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2">
+                 <!-- Username với hover popup info -->
+                 <div class="relative inline-block group/usercard">
+                    <span class="text-xs font-bold text-white hover:text-primary transition-all cursor-pointer">@${c.username}</span>
+                    
+                    <!-- Hover Card Popup -->
+                    <div class="absolute bottom-full left-0 mb-3 w-64 p-4 rounded-2xl bg-[#090b11]/98 border border-white/10 shadow-2xl backdrop-blur-md opacity-0 pointer-events-none group-hover/usercard:opacity-100 group-hover/usercard:pointer-events-auto transition-all duration-200 z-50 transform translate-y-1 group-hover/usercard:translate-y-0 text-left">
+                       <div class="absolute -inset-px rounded-2xl bg-gradient-to-r from-primary/10 to-blue-500/10 opacity-40 blur-sm pointer-events-none"></div>
+                       <div class="relative space-y-3">
+                          <div class="flex items-center gap-3">
+                             <div class="h-8 w-8 rounded-full overflow-hidden flex items-center justify-center font-black uppercase text-xs ${hasAvatar ? '' : avatarStyle}">
+                                ${avatarInner}
+                             </div>
+                             <div>
+                                <div class="text-xs font-black text-white">@${c.username}</div>
+                                <div class="text-[9px] text-gray-500 font-bold uppercase tracking-wider">Thành viên TPhimX</div>
+                             </div>
+                          </div>
+                          <div class="border-t border-white/5 my-1"></div>
+                          <div class="space-y-2 text-[11px] text-gray-400">
+                             <div class="flex items-center gap-2">
+                                <i class="fas fa-comment text-primary w-4 text-center"></i>
+                                <span>Số bình luận: <strong class="text-white">${formattedComments}</strong></span>
+                             </div>
+                             <div class="flex items-center gap-2">
+                                <i class="fas fa-heart text-red-500 w-4 text-center"></i>
+                                <span>Đã thích: <strong class="text-white">${formattedLikes} phim</strong></span>
+                             </div>
+                             <div class="flex items-start gap-2">
+                                <i class="fas fa-map-marker-alt text-emerald-400 w-4 text-center mt-0.5"></i>
+                                <span class="leading-relaxed">Nơi ở: <strong class="text-white">${locationStr}</strong></span>
+                             </div>
+                          </div>
+                       </div>
+                    </div>
+                 </div>
+                 ${episodeTag}
+                 <span class="text-[10px] text-gray-500 ml-1">${(window.txaformat && window.txaformat.relativeTime) ? window.txaformat.relativeTime(c.created_at) : this.formatRelativeTime(c.created_at)}</span>
+                 ${banButton}
+                 ${deleteButton}
+              </div>
+              ${commentBody}
+              
+              <!-- Likes & Dislikes Row -->
+              <div class="flex items-center gap-4 mt-3 pt-1">
+                 <!-- Like -->
+                 <button class="txac-reaction-btn flex items-center gap-1.5 transition-all text-xs font-bold select-none cursor-pointer ${hasLiked ? 'text-primary' : 'text-gray-500 hover:text-primary'}" data-id="${c.id}" data-action="like" data-txatooltip="Thích bình luận">
+                    <i class="${hasLiked ? 'fas fa-thumbs-up' : 'far fa-thumbs-up'} text-[11px]"></i>
+                    <span class="font-mono text-[11px] font-bold">${likes.length}</span>
+                 </button>
+                 <!-- Dislike -->
+                 <button class="txac-reaction-btn flex items-center gap-1.5 transition-all text-xs font-bold select-none cursor-pointer ${hasDisliked ? 'text-red-500' : 'text-gray-500 hover:text-red-500'}" data-id="${c.id}" data-action="dislike" data-txatooltip="Không thích bình luận">
+                    <i class="${hasDisliked ? 'fas fa-thumbs-down' : 'far fa-thumbs-down'} text-[11px]"></i>
+                    <span class="font-mono text-[11px] font-bold">${dislikes.length}</span>
+                 </button>
+              </div>
+           </div>
+        </div>
+      `;
+    }).join('');
+
+    if (window.initTxaTooltips) {
+      setTimeout(() => window.initTxaTooltips(), 50);
+    }
+  }
+
+  setupListeners() {
+    const textarea = document.getElementById('txac-textarea');
+    const counter = document.getElementById('txac-char-counter');
+    const submitBtn = document.getElementById('txac-submit-btn');
+    const spoiler = document.getElementById('txac-spoiler');
+
+    // Char count update
+    if (textarea && counter) {
+      textarea.addEventListener('input', () => {
+        const len = textarea.value.length;
+        counter.textContent = `${len} / 1000`;
+      });
+    }
+
+    // Submit new comment
+    if (submitBtn && textarea) {
+      submitBtn.addEventListener('click', async (e) => {
+        e.preventDefault();
+        const content = textarea.value.trim();
+        if (!content) {
+          if (window.txatoast) window.txatoast.warning('Nội dung bình luận không được để trống!', 3000, 'bottom-right');
+          return;
+        }
+
+        submitBtn.disabled = true;
+        
+        try {
+          const res = await fetch('/api/movie/comments', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              movieSlug: this.movieSlug,
+              content: content,
+              isSpoiler: spoiler ? spoiler.checked : false,
+              episodeName: this.episodeName,
+              serverName: this.serverName,
+              movieType: this.movieType
+            })
+          });
+
+          const data = await res.json();
+          if (res.ok) {
+            if (window.txatoast) window.txatoast.success(data.message, 3000, 'bottom-right');
+            textarea.value = '';
+            if (counter) counter.textContent = '0 / 1000';
+            if (spoiler) spoiler.checked = false;
+            
+            // Reload comments
+            await this.fetchComments();
+            this.renderCommentsList();
+          } else {
+            if (window.txatoast) window.txatoast.error(data.error, 3000, 'bottom-right');
+          }
+        } catch (err) {
+          if (window.txatoast) window.txatoast.error('Lỗi gửi bình luận!', 3000, 'bottom-right');
+        } finally {
+          submitBtn.disabled = false;
+        }
+      });
+    }
+
+    // Event delegation for Likes, Dislikes, Delete, Ban buttons
+    const listContainer = document.getElementById('txac-list');
+    if (listContainer) {
+      listContainer.addEventListener('click', async (e) => {
+        // Find reaction button (Like / Dislike)
+        const reactBtn = e.target.closest('.txac-reaction-btn');
+        if (reactBtn) {
+          e.preventDefault();
+          const commentId = reactBtn.getAttribute('data-id');
+          const action = reactBtn.getAttribute('data-action');
+          await this.handleReaction(commentId, action);
+          return;
+        }
+
+        // Find delete button
+        const deleteBtn = e.target.closest('.txac-delete-btn');
+        if (deleteBtn) {
+          e.preventDefault();
+          const commentId = deleteBtn.getAttribute('data-id');
+          this.handleDelete(commentId);
+          return;
+        }
+
+        // Find ban button
+        const banBtn = e.target.closest('.txac-ban-btn');
+        if (banBtn) {
+          e.preventDefault();
+          const targetUsername = banBtn.getAttribute('data-username');
+          const action = banBtn.getAttribute('data-action');
+          this.handleBan(targetUsername, action);
+          return;
+        }
+      });
+    }
+  }
+
+  async handleReaction(commentId, action) {
+    if (!this.user) {
+      if (window.txatoast) window.txatoast.warning('Vui lòng đăng nhập để bình chọn bình luận!', 3000, 'bottom-right');
+      return;
+    }
+
+    try {
+      const res = await fetch('/api/movie/comments', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ commentId, action })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        // Cập nhật mảng trực tiếp cho comment hiện tại và re-render để hiển thị thay đổi lập tức
+        const comment = this.comments.find(c => c.id === commentId);
+        if (comment) {
+          comment.likes = data.likes || [];
+          comment.dislikes = data.dislikes || [];
+          this.renderCommentsList();
+        }
+      } else {
+        if (window.txatoast) window.txatoast.error(data.error, 3000, 'bottom-right');
+      }
+    } catch (err) {
+      console.error('[TxaComment] Lỗi tương tác:', err);
+    }
+  }
+
+  handleDelete(commentId) {
+    if (!window.txamodal) {
+      if (confirm('Bạn có chắc chắn muốn xóa bình luận này không?')) {
+        this.executeDelete(commentId);
+      }
+      return;
+    }
+
+    window.txamodal.show({
+      title: 'Xóa bình luận',
+      message: 'Bạn có chắc chắn muốn xóa vĩnh viễn bình luận này? Hành động này không thể hoàn tác.',
+      type: 'danger',
+      confirmText: 'Xóa ngay',
+      onConfirm: async () => {
+        await this.executeDelete(commentId);
+        return true;
+      }
+    });
+  }
+
+  async executeDelete(commentId) {
+    try {
+      const res = await fetch('/api/movie/comments', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ commentId })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        if (window.txatoast) window.txatoast.success(data.message, 3000, 'bottom-right');
+        this.comments = this.comments.filter(c => c.id !== commentId);
+        this.renderCommentsList();
+      } else {
+        if (window.txatoast) window.txatoast.error(data.error, 3000, 'bottom-right');
+      }
+    } catch (err) {
+      if (window.txatoast) window.txatoast.error('Lỗi khi xóa bình luận!', 3000, 'bottom-right');
+    }
+  }
+
+  handleBan(targetUsername, action) {
+    // Chặn 1-click siêu tốc không cần xác nhận
+    this.executeBan(targetUsername, action);
+  }
+
+  async executeBan(targetUsername, action) {
+    try {
+      const res = await fetch('/api/movie/comments', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action, targetUsername })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        if (window.txatoast) window.txatoast.success(data.message, 3000, 'bottom-right');
+        this.bannedUsers = data.bannedUsers || [];
+        this.renderCommentsList();
+      } else {
+        if (window.txatoast) window.txatoast.error(data.error, 3000, 'bottom-right');
+      }
+    } catch (err) {
+      if (window.txatoast) window.txatoast.error('Lỗi khi thực thi yêu cầu chặn!', 3000, 'bottom-right');
+    }
+  }
+
+  formatRelativeTime(isoString) {
+    if (!isoString) return '';
+    const date = new Date(isoString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    
+    if (isNaN(date.getTime()) || diffMs < 0) return 'Vừa xong';
+    
+    const diffSec = Math.floor(diffMs / 1000);
+    if (diffSec < 60) return 'Vừa xong';
+    
+    const diffMin = Math.floor(diffSec / 60);
+    if (diffMin < 60) return `${diffMin} phút trước`;
+    
+    const diffHour = Math.floor(diffMin / 60);
+    if (diffHour < 24) return `${diffHour} giờ trước`;
+    
+    // Vượt quá 1 ngày (24 giờ): Chuyển sang định dạng ngày cụ thể "ngày/tháng/năm" chuẩn Việt Nam
+    const day = date.getDate();
+    const month = date.getMonth() + 1;
+    const year = date.getFullYear();
+    return `${day}/${month}/${year}`;
+  }
+}
+
+// Auto instantiate on load
+function initTxaCommentWidget() {
+  if (document.getElementById('txa-comment-container')) {
+     window.txacomment = new TxaComment('txa-comment-container');
+  }
+}
+document.addEventListener('DOMContentLoaded', initTxaCommentWidget);
+document.addEventListener('astro:page-load', initTxaCommentWidget);

public/lib/txa/txaformat.js

@@ -0,0 +1,67 @@
+/**
+ * TXA Format Utility
+ * Version: 1.0 (Web Optimized)
+ */
+
+const txaformat = {
+    twoDigits: (n) => (n < 10 ? '0' : '') + n,
+    
+    shortNumber: (n) => {
+        if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+        if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
+        return n;
+    },
+
+    number: (n) => new Intl.NumberFormat('vi-VN').format(n),
+
+    duration: function (s) {
+        const h = Math.floor(s / 3600);
+        const m = Math.floor((s % 3600) / 60);
+        const sec = Math.floor(s % 60);
+        let str = '';
+        if (h > 0) str += this.twoDigits(h) + ':';
+        return str + this.twoDigits(m) + ':' + this.twoDigits(sec);
+    },
+
+    fileSize: (bytes) => {
+        if (bytes === 0) return '0 B';
+        const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+        return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + ' ' + units[i];
+    },
+
+    dateTime: (val) => {
+        if (!val) return '';
+        const d = new Date(val);
+        if (isNaN(d.getTime())) return val;
+        return d.toLocaleString('vi-VN');
+    },
+
+    relativeTime: (val) => {
+        if (!val) return '';
+        const date = new Date(val);
+        const now = new Date();
+        const diffMs = now.getTime() - date.getTime();
+        
+        if (isNaN(date.getTime()) || diffMs < 0) return 'Vừa xong';
+        
+        const diffSec = Math.floor(diffMs / 1000);
+        if (diffSec < 60) return 'Vừa xong';
+        
+        const diffMin = Math.floor(diffSec / 60);
+        if (diffMin < 60) return `${diffMin} phút trước`;
+        
+        const diffHour = Math.floor(diffMin / 60);
+        if (diffHour < 24) return `${diffHour} giờ trước`;
+        
+        // Quá 1 ngày (24 giờ) sẽ hiện là ngày/tháng/năm
+        const day = date.getDate();
+        const month = date.getMonth() + 1;
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+    }
+};
+
+if (typeof window !== 'undefined') {
+    window.txaformat = txaformat;
+}

public/lib/txa/txamodal.js

@@ -0,0 +1,138 @@
+/**
+ * TxaModal - Premium Modal System
+ * Migration: TPHIMX V2 (Vite Compatible)
+ */
+
+class TxaModal {
+    constructor() {
+        this.containerCreated = false;
+        this.container = null;
+        this.overlay = null;
+        this.modal = null;
+    }
+
+    createContainer() {
+        if (this.containerCreated && document.getElementById('txamodal-container')) {
+            this.container = document.getElementById('txamodal-container');
+            this.overlay = document.getElementById('txamodal-overlay');
+            this.modal = document.getElementById('txamodal-content');
+            return true;
+        }
+
+        const container = document.createElement('div');
+        container.id = 'txamodal-container';
+        container.style.cssText = `position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; z-index: 2147483640; padding: 20px;`;
+
+        const overlay = document.createElement('div');
+        overlay.id = 'txamodal-overlay';
+        overlay.style.cssText = `position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 15, 25, 0.7); backdrop-filter: blur(12px); opacity: 0; transition: opacity 0.3s ease;`;
+
+        const modal = document.createElement('div');
+        modal.id = 'txamodal-content';
+        modal.style.cssText = `position: relative; background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(24px); width: 100%; max-width: 500px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); transform: scale(0.9) translateY(30px); opacity: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; display: flex; flex-direction: column;`;
+
+        container.appendChild(overlay);
+        container.appendChild(modal);
+        document.body.appendChild(container);
+
+        this.container = container;
+        this.overlay = overlay;
+        this.modal = modal;
+        this.containerCreated = true;
+        return true;
+    }
+
+    show({ title, message, type = 'info', confirmText = 'Xác nhận', cancelText = 'Hủy', showCancel = true, showConfirm = true, onConfirm = null, onCancel = null, input = null, inputPlaceholder = '', inputType = 'text' }) {
+        if (!this.createContainer()) return;
+
+        let icon = '<i class="fas fa-info-circle text-indigo-500"></i>';
+        let btnConfirmStyle = 'background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff;';
+
+        if (type === 'danger') {
+            icon = '<i class="fas fa-exclamation-triangle text-red-500"></i>';
+            btnConfirmStyle = 'background: #ef4444; color: #fff;';
+        } else if (type === 'warning') {
+            icon = '<i class="fas fa-exclamation-circle text-amber-500"></i>';
+            btnConfirmStyle = 'background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff;';
+        } else if (type === 'success') {
+            icon = '<i class="fas fa-check-circle text-emerald-500"></i>';
+            btnConfirmStyle = 'background: #10b981; color: #fff;';
+        }
+
+        let inputHtml = '';
+        if (input) {
+            inputHtml = `
+                <div style="margin-top: 24px;">
+                     <input id="txamodal-input" type="${inputType}" placeholder="${inputPlaceholder}" 
+                            style="width: 100%; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); padding: 14px 20px; border-radius: 16px; color: #fff; outline: none; font-family: inherit;">
+                </div>
+            `;
+        }
+
+        let cancelBtnHtml = '';
+        if (showCancel && cancelText) {
+            cancelBtnHtml = `<button id="txamodal-cancel" style="flex: 1; padding: 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #94a3b8; font-weight: 600; cursor: pointer; transition: all 0.2s;">${cancelText}</button>`;
+        }
+
+        let confirmBtnHtml = '';
+        if (showConfirm) {
+            confirmBtnHtml = `<button id="txamodal-confirm" style="flex: 1; padding: 14px; border-radius: 16px; border: none; ${btnConfirmStyle} font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.3);">${confirmText}</button>`;
+        }
+
+        this.modal.innerHTML = `
+            <div style="padding: 40px 30px; text-align: center;">
+                <div style="font-size: 64px; margin-bottom: 24px;">${icon}</div>
+                <h3 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 800; color: #fff;">${title || 'Thông báo'}</h3>
+                <div style="color: #94a3b8; line-height: 1.6;">${message}</div>
+                ${inputHtml}
+            </div>
+            ${(showCancel || showConfirm) ? `
+            <div style="padding: 24px 30px; background: rgba(0, 0, 0, 0.3); display: flex; gap: 12px;">
+                ${cancelBtnHtml}
+                ${confirmBtnHtml}
+            </div>` : ''}
+        `;
+
+        this.container.style.display = 'flex';
+        setTimeout(() => {
+            this.overlay.style.opacity = '1';
+            this.modal.style.opacity = '1';
+            this.modal.style.transform = 'scale(1) translateY(0)';
+            if (input) document.getElementById('txamodal-input').focus();
+        }, 10);
+
+        const confirmBtn = document.getElementById('txamodal-confirm');
+        if (confirmBtn) {
+            confirmBtn.onclick = async () => {
+                let result = true;
+                if (input) {
+                    const val = document.getElementById('txamodal-input').value;
+                    if (onConfirm) result = await onConfirm(val);
+                } else {
+                    if (onConfirm) result = await onConfirm();
+                }
+                if (result !== false) this.hide();
+            };
+        }
+
+        const cancelBtn = document.getElementById('txamodal-cancel');
+        if (cancelBtn) {
+            cancelBtn.onclick = () => {
+                if (typeof onCancel === 'function') {
+                    try { onCancel(); } catch (_) { /* noop */ }
+                }
+                this.hide();
+            };
+        }
+    }
+
+    hide() {
+        if (!this.container) return;
+        this.overlay.style.opacity = '0';
+        this.modal.style.opacity = '0';
+        this.modal.style.transform = 'scale(0.95) translateY(20px)';
+        setTimeout(() => { this.container.style.display = 'none'; }, 400);
+    }
+}
+
+window.txamodal = new TxaModal();

public/lib/txa/txatoast.js

@@ -0,0 +1,199 @@
+/**
+ * TXAToast - Liquid Glass Toast Notification System
+ * Hỗ trợ đa vị trí, bypass CSP qua Trusted Types & SVG Inline
+ */
+
+class TXAToastSystem {
+  constructor() {
+    this.containers = {};
+    this.policy = null;
+    this.initPolicy();
+    this.injectStyles();
+  }
+
+  initPolicy() {
+    if (typeof window !== 'undefined' && window.trustedTypes) {
+      try {
+        this.policy = window.trustedTypes.createPolicy('txatoast-policy', {
+          createHTML: (string) => string
+        });
+      } catch (e) {
+        this.policy = window.trustedTypes.defaultPolicy || { createHTML: (string) => string };
+      }
+    }
+  }
+
+  getContainer(position = 'top-right') {
+    if (typeof document === 'undefined') return null;
+    
+    const id = `txatoast-container-${position}`;
+    let container = document.getElementById(id);
+    
+    if (!container) {
+      container = document.createElement('div');
+      container.id = id;
+      
+      const posStyles = {
+        'top-right': 'top: 24px; right: 24px;',
+        'top-left': 'top: 24px; left: 24px;',
+        'bottom-right': 'bottom: 24px; right: 24px;',
+        'bottom-left': 'bottom: 24px; left: 24px;',
+        'top-center': 'top: 24px; left: 50%; transform: translateX(-50%); align-items: center;',
+        'bottom-center': 'bottom: 24px; left: 50%; transform: translateX(-50%); align-items: center;'
+      };
+
+      container.style.cssText = `
+        position: fixed;
+        z-index: 2147483647;
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        pointer-events: none;
+        max-width: 380px;
+        width: 100%;
+        ${posStyles[position] || posStyles['top-right']}
+      `;
+      document.body.appendChild(container);
+    }
+    return container;
+  }
+
+  injectStyles() {
+    if (typeof document === 'undefined' || document.getElementById('txatoast-styles')) return;
+    
+    const style = document.createElement('style');
+    style.id = 'txatoast-styles';
+    style.textContent = `
+      .txa-toast {
+        pointer-events: auto;
+        position: relative;
+        padding: 16px 22px;
+        border-radius: 24px;
+        color: #ffffff;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 14px;
+        overflow: hidden;
+        background: rgba(255, 255, 255, 0.02);
+        backdrop-filter: blur(30px);
+        -webkit-backdrop-filter: blur(30px);
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2);
+        opacity: 0;
+        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      }
+      
+      /* Position-based Animations */
+      [id*="-right"] .txa-toast { transform: translateX(120%) scale(0.9); }
+      [id*="-left"] .txa-toast { transform: translateX(-120%) scale(0.9); }
+      [id*="-center"] .txa-toast { transform: translateY(50px) scale(0.9); }
+      [id*="top-center"] .txa-toast { transform: translateY(-50px) scale(0.9); }
+
+      .txa-toast.txa-show { transform: translate(0) scale(1); opacity: 1; }
+      .txa-toast.txa-hide { opacity: 0; scale: 0.85; }
+      
+      .txa-toast::before {
+        content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
+        background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 60%); pointer-events: none; mix-blend-mode: overlay;
+      }
+      
+      .txa-toast-success { border-color: rgba(16, 185, 129, 0.4); box-shadow: 0 12px 35px rgba(16, 185, 129, 0.2); }
+      .txa-toast-success .txa-icon { color: #10b981; }
+      
+      .txa-toast-error { border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 12px 35px rgba(239, 68, 68, 0.2); }
+      .txa-toast-error .txa-icon { color: #ef4444; }
+      
+      .txa-toast-info { border-color: rgba(59, 130, 246, 0.4); box-shadow: 0 12px 35px rgba(59, 130, 246, 0.2); }
+      .txa-toast-info .txa-icon { color: #3b82f6; }
+      
+      .txa-toast-warning { border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 12px 35px rgba(245, 158, 11, 0.2); }
+      .txa-toast-warning .txa-icon { color: #f59e0b; }
+      
+      .txa-content-wrapper { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-grow: 1; }
+      .txa-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; }
+      .txa-message { line-height: 1.4; text-shadow: 0 1px 2px rgba(0,0,0,0.6); flex-grow: 1; }
+      
+      .txa-close { 
+        background: transparent; border: none; color: rgba(255, 255, 255, 0.4); 
+        cursor: pointer; padding: 6px; display: flex; align-items: center; 
+        justify-content: center; transition: all 0.2s; border-radius: 50%;
+      }
+      .txa-close:hover { color: #ffffff; background: rgba(255,255,255,0.1); transform: rotate(90deg); }
+      
+      .txa-progress-bar { 
+        position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; 
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); 
+        transform-origin: left; transform: scaleX(1);
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  show(message, type = 'info', duration = 3500, position = 'top-right') {
+    const container = this.getContainer(position);
+    if (!container) return;
+    
+    const svgIcons = {
+      success: `<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`,
+      error: `<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>`,
+      info: `<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`,
+      warning: `<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`
+    };
+
+    const toast = document.createElement('div');
+    toast.className = `txa-toast txa-toast-${type}`;
+    
+    const rawHTML = `
+      <div class="txa-content-wrapper">
+        <div class="txa-icon">${svgIcons[type] || svgIcons.info}</div>
+        <div class="txa-message">${message}</div>
+      </div>
+      <button class="txa-close" aria-label="Close">
+        <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+      </button>
+      <div class="txa-progress-bar"></div>
+    `;
+
+    if (this.policy) {
+      toast.innerHTML = this.policy.createHTML(rawHTML);
+    } else {
+      toast.innerHTML = rawHTML;
+    }
+
+    container.appendChild(toast);
+    setTimeout(() => { toast.classList.add('txa-show'); }, 10);
+    
+    const progressBar = toast.querySelector('.txa-progress-bar');
+    if (progressBar) {
+      progressBar.style.transition = `transform ${duration}ms linear`;
+      progressBar.style.transform = 'scaleX(0)';
+    }
+
+    const closeToast = () => {
+      toast.classList.remove('txa-show');
+      toast.classList.add('txa-hide');
+      setTimeout(() => { toast.remove(); }, 500);
+    };
+
+    toast.querySelector('.txa-close').onclick = closeToast;
+    setTimeout(closeToast, duration);
+  }
+
+  success(msg, duration, pos) { this.show(msg, 'success', duration, pos); }
+  error(msg, duration, pos) { this.show(msg, 'error', duration, pos); }
+  info(msg, duration, pos) { this.show(msg, 'info', duration, pos); }
+  warning(msg, duration, pos) { this.show(msg, 'warning', duration, pos); }
+}
+
+const txatoastInstance = new TXAToastSystem();
+if (typeof window !== 'undefined') {
+  window.txatoast = txatoastInstance;
+  document.addEventListener('astro:page-load', () => {
+    txatoastInstance.injectStyles();
+  });
+}

public/lib/txa/txatooltip.js

@@ -0,0 +1,198 @@
+/**
+ * Ultimate Liquid Tooltip System (TXA Tooltip V2)
+ * High performance, mouse-following, glassmorphism design
+ * Supports data-txa-tooltip, data-txatooltip, and .txatooltip class
+ */
+
+(function () {
+    'use strict';
+
+    if (window.isTxaTooltipInit) return;
+    window.isTxaTooltipInit = true;
+
+    const tooltip = document.getElementById('txa-tooltip') || document.createElement('div');
+    if (!tooltip.id) {
+        tooltip.id = 'txa-tooltip';
+        tooltip.style.cssText = `
+            position: fixed;
+            pointer-events: none;
+            z-index: 2147483647;
+            padding: 12px 18px;
+            background: rgba(15, 23, 42, 0.96);
+            backdrop-filter: blur(20px) saturate(180%);
+            -webkit-backdrop-filter: blur(20px) saturate(180%);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 16px;
+            color: #fff;
+            font-size: 14px;
+            font-weight: 500;
+            box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 20px rgba(99, 102, 241, 0.2);
+            opacity: 0;
+            transform: scale(0.95) translateY(10px);
+            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), left 0.08s linear, top 0.08s linear;
+            white-space: normal;
+            max-width: 320px;
+            line-height: 1.6;
+            text-align: left;
+            word-break: break-word;
+            font-family: 'Outfit', sans-serif;
+        `;
+    }
+
+    function initTooltip() {
+        if (!document.body) {
+            window.addEventListener('DOMContentLoaded', initTooltip);
+            return;
+        }
+        if (!document.getElementById('txa-tooltip')) {
+            document.body.appendChild(tooltip);
+        }
+    }
+
+    window.initTxaTooltips = initTooltip;
+    initTooltip();
+    document.addEventListener('astro:page-load', initTooltip);
+
+    let currentTarget = null;
+    let hideTimeout = null;
+    let isMouseOnTooltip = false;
+
+    tooltip.addEventListener('mouseenter', () => {
+        isMouseOnTooltip = true;
+        clearTimeout(hideTimeout);
+    });
+
+    tooltip.addEventListener('mouseleave', () => {
+        isMouseOnTooltip = false;
+        if (!currentTarget) hideTooltip();
+    });
+
+    function showTooltip(text, target, e = null) {
+        if (!text) return;
+        clearTimeout(hideTimeout);
+        
+        const link = target.getAttribute('data-tooltip-link');
+        const linkTitle = target.getAttribute('data-tooltip-link-title') || 'Xem chi tiết';
+        
+        let content = `<div class="txa-tooltip-content">${text}</div>`;
+        if (link) {
+            content += `
+                <div class="txa-tooltip-action" style="margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px;">
+                    <a href="${link}" class="txa-tooltip-btn" style="display: block; width: 100%; padding: 8px 12px; background: linear-gradient(90deg, #6366f1, #a855f7); color: #fff; border-radius: 8px; text-align: center; font-weight: 700; font-size: 12px; transition: all 0.2s; text-decoration: none;">
+                        <i class="fas fa-external-link-alt me-1"></i> ${linkTitle}
+                    </a>
+                </div>
+            `;
+            tooltip.style.pointerEvents = 'auto';
+        } else {
+            tooltip.style.pointerEvents = 'none';
+        }
+
+        tooltip.innerHTML = content;
+        
+        // Dynamic alignment
+        tooltip.style.textAlign = text.length > 40 ? 'left' : 'center';
+        
+        tooltip.style.opacity = '1';
+        tooltip.style.transform = 'scale(1) translateY(0)';
+        currentTarget = target;
+
+        if (e) {
+            updatePosition(e);
+        }
+    }
+
+    function hideTooltip() {
+        if (isMouseOnTooltip) return;
+        
+        hideTimeout = setTimeout(() => {
+            if (isMouseOnTooltip) return;
+            tooltip.style.opacity = '0';
+            tooltip.style.transform = 'scale(0.95) translateY(10px)';
+            currentTarget = null;
+        }, 100);
+    }
+
+    function updatePosition(e) {
+        if (tooltip.style.opacity === '0' || isMouseOnTooltip) return;
+
+        const offset = 20;
+        const rect = tooltip.getBoundingClientRect();
+
+        let x = e.clientX - (rect.width / 2);
+        let y = e.clientY - rect.height - offset;
+
+        const padding = 15;
+
+        if (x < padding) x = padding;
+        if (x + rect.width + padding > window.innerWidth) {
+            x = window.innerWidth - rect.width - padding;
+        }
+
+        if (y < padding) {
+            y = e.clientY + offset;
+        }
+
+        tooltip.style.left = x + 'px';
+        tooltip.style.top = y + 'px';
+    }
+
+    document.addEventListener('mouseover', (e) => {
+        const target = e.target.closest('[data-txa-tooltip], [data-txatooltip], .txatooltip, .txaxtooltip');
+        if (target) {
+            // Logic for sidebar menu items (collapsed state)
+            if (target.classList.contains('menu-item') || target.classList.contains('sidebar-link')) {
+                const isSidebarCollapsed = document.body.classList.contains('sidebar-collapsed');
+                if (!isSidebarCollapsed && window.innerWidth > 992) return;
+            }
+
+            const tooltipText = target.getAttribute('data-txa-tooltip') || target.getAttribute('data-txatooltip') || target.title;
+            if (tooltipText) {
+                // Remove title to prevent browser default tooltip
+                if (target.title) {
+                    target.setAttribute('data-original-title', target.title);
+                    target.title = '';
+                }
+                showTooltip(tooltipText, target, e);
+            }
+        }
+    });
+
+    document.addEventListener('mouseout', (e) => {
+        const target = e.target.closest('[data-txa-tooltip], [data-txatooltip], .txatooltip, .txaxtooltip');
+        if (target) {
+            // Restore title if needed
+            const originalTitle = target.getAttribute('data-original-title');
+            if (originalTitle) {
+                target.title = originalTitle;
+                target.removeAttribute('data-original-title');
+            }
+            hideTooltip();
+        }
+    });
+
+    document.addEventListener('mousemove', (e) => {
+        if (currentTarget) updatePosition(e);
+    });
+
+    document.addEventListener('click', (e) => {
+        if (!tooltip.contains(e.target)) hideTooltip();
+    });
+
+    // Fullscreen support
+    function handleFullscreenChange() {
+        const fsElem = document.fullscreenElement || document.webkitFullscreenElement;
+        if (fsElem) {
+            fsElem.appendChild(tooltip);
+            tooltip.style.zIndex = '2147483647';
+        } else {
+            if (document.body && !document.body.contains(tooltip)) {
+                document.body.appendChild(tooltip);
+            }
+        }
+    }
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+
+})();

public/robots.txt

@@ -0,0 +1,6 @@
+User-agent: *
+Disallow: /admin/
+Disallow: /admin/*
+Allow: /
+
+Sitemap: https://tphimx.vercel.app/sitemap-index.xml

scratch/test_fetch.js

@@ -0,0 +1,18 @@
+
+async function test() {
+  const targetUrl = 'https://v7.kkphimplayer7.com/20260514/LGQKiMAz/preview.jpg';
+  try {
+    const response = await fetch(targetUrl, {
+      headers: {
+        'Referer': 'https://v7.kkphimplayer7.com/',
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
+      }
+    });
+    console.log('Status:', response.status);
+    console.log('Headers:', JSON.stringify(Object.fromEntries(response.headers.entries()), null, 2));
+  } catch (err) {
+    console.error('Error:', err);
+  }
+}
+
+test();

scratch/test_variations.js

@@ -0,0 +1,24 @@
+
+async function test() {
+  const variations = [
+    'https://v7.kkphimplayer7.com/20260514/LGQKiMAz/preview.jpg',
+    'https://v7.kkphimplayer7.com/20260514/LGQKiMAz/thumb.jpg',
+    'https://v7.kkphimplayer7.com/20260514/LGQKiMAz/index.jpg',
+    'https://v7.kkphimplayer7.com/20260514/LGQKiMAz/preview.png'
+  ];
+  for (const url of variations) {
+    try {
+      const response = await fetch(url, {
+        headers: {
+          'Referer': 'https://v7.kkphimplayer7.com/',
+          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
+        }
+      });
+      console.log(`URL: ${url} -> Status: ${response.status}`);
+    } catch (err) {
+      console.error(`URL: ${url} -> Error: ${err.message}`);
+    }
+  }
+}
+
+test();

scripts/apply_subtitle_update.js

@@ -0,0 +1,118 @@
+import fs from 'fs';
+import path from 'path';
+import { createClient } from '@supabase/supabase-js';
+
+// Parse .env manually
+const envPath = path.resolve('.env');
+if (!fs.existsSync(envPath)) {
+  console.error("Error: .env file not found at", envPath);
+  process.exit(1);
+}
+
+const envContent = fs.readFileSync(envPath, 'utf-8');
+const env = {};
+envContent.split('\n').forEach(line => {
+  const trimmed = line.trim();
+  if (trimmed.startsWith('#') || !trimmed) return;
+  const match = trimmed.match(/^([^=]+)=(.*)$/);
+  if (match) {
+    env[match[1].trim()] = match[2].trim();
+  }
+});
+
+const supabaseUrl = env.PUBLIC_SUPABASE_URL;
+const supabaseAnonKey = env.PUBLIC_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseAnonKey) {
+  console.error("Error: Supabase URL or Anon Key is missing in .env!");
+  process.exit(1);
+}
+
+const supabase = createClient(supabaseUrl, supabaseAnonKey);
+
+async function run() {
+  try {
+    const srtPath = "C:\\Users\\TXA3100\\Desktop\\VIETSUB\\sut_vi.srt";
+    if (!fs.existsSync(srtPath)) {
+      console.error("Error: SRT file not found at", srtPath);
+      process.exit(1);
+    }
+    const srtContent = fs.readFileSync(srtPath, 'utf-8');
+
+    console.log("Read SRT subtitle successfully. Length:", srtContent.length);
+
+    const movie_json = {
+      "_id": "fbi-part-one-id",
+      "imdb": { "id": null },
+      "lang": "Vietsub",
+      "name": "FBI: Part One",
+      "slug": "fbi-part-one",
+      "time": "120 phút",
+      "tmdb": { "id": null, "type": "movie", "season": 1, "vote_count": 0, "vote_average": 0 },
+      "type": "single",
+      "view": 0,
+      "year": 2026,
+      "actor": ["FBI Agents"],
+      "notify": "",
+      "status": "completed",
+      "content": "Bộ phim hành động FBI Part One cực kỳ kịch tính và hấp dẫn, đi kèm hệ thống Storyboard dynamic youtube-style mượt mà và chất lượng đa luồng chất lượng cao.",
+      "country": [{ "id": "usa", "name": "Mỹ", "slug": "my" }],
+      "created": { "time": "2026-05-18T14:40:00.000Z" },
+      "quality": "HD",
+      "category": [{ "id": "action", "name": "Hành Động", "slug": "hanh-dong" }],
+      "chieurap": false,
+      "director": ["FBI Directors"],
+      "modified": { "time": "2026-05-18T14:40:00.000Z" },
+      "showtimes": "",
+      "thumb_url": "https://phimimg.com/upload/vod/20260307-1/81572d43eddf1dc784f3f53f6323f46d.jpg",
+      "poster_url": "https://phimimg.com/upload/vod/20260307-1/7e5b11b1d5ce3514f6d62787d164b816.jpg",
+      "origin_name": "FBI Part One",
+      "trailer_url": "",
+      "is_copyright": false,
+      "sub_docquyen": false,
+      "episode_total": "1",
+      "episode_current": "Full"
+    };
+
+    const episodes_json = [
+      {
+        "server_name": "Cloudflare R2 Premium",
+        "server_data": [
+          {
+            "name": "Full Movie",
+            "slug": "full-movie",
+            "filename": "FBI Part One - Full HD - Vietsub",
+            "link_m3u8": "https://tphimx-r2-proxy.txagt145.workers.dev/fbi-part-one/master.m3u8",
+            "link_embed": "https://tphimx-r2-proxy.txagt145.workers.dev/fbi-part-one/master.m3u8",
+            "subtitles_srt": srtContent
+          }
+        ]
+      }
+    ];
+
+    console.log("Upserting movie record to public.movies for slug 'fbi-part-one'...");
+    
+    const { data, error } = await supabase
+      .from('movies')
+      .upsert({
+        slug: 'fbi-part-one',
+        movie: movie_json,
+        episodes: episodes_json,
+        updated_at: new Date().toISOString()
+      })
+      .select();
+
+    if (error) {
+      throw error;
+    }
+
+    console.log("Success! Movie 'fbi-part-one' has been successfully registered/updated with SRT subtitles.");
+    console.log("Result rows:", data ? data.length : 0);
+
+  } catch (err) {
+    console.error("Error executing database upsert:", err);
+    process.exit(1);
+  }
+}
+
+run();

scripts/format-xml.js

@@ -0,0 +1,51 @@
+import fs from 'fs';
+import path from 'path';
+
+function formatXml(xml) {
+  let formatted = '';
+  let pad = 0;
+  xml = xml.replace(/(>)(<)(\/*)/g, '$1\r\n$2$3');
+  xml.split('\r\n').forEach(node => {
+    let indent = 0;
+    if (node.match(/.+<\/\w[^>]*>$/)) {
+      indent = 0;
+    } else if (node.match(/^<\/\w/)) {
+      if (pad !== 0) { pad -= 1; }
+    } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
+      indent = 1;
+    } else {
+      indent = 0;
+    }
+    
+    formatted += '  '.repeat(pad) + node + '\r\n';
+    pad += indent;
+  });
+  return formatted.trim();
+}
+
+const filesToFormat = [
+  'dist/client/sitemap-index.xml',
+  'dist/client/sitemap-0.xml',
+  'dist/client/sitemap-1.xml',
+  'dist/client/sitemap-2.xml',
+  'dist/client/sitemap-3.xml',
+  'dist/client/sitemap-4.xml',
+  'dist/client/sitemap-5.xml',
+  '.vercel/output/static/sitemap-index.xml',
+  '.vercel/output/static/sitemap-0.xml',
+  '.vercel/output/static/sitemap-1.xml',
+  '.vercel/output/static/sitemap-2.xml',
+  '.vercel/output/static/sitemap-3.xml',
+  '.vercel/output/static/sitemap-4.xml',
+  '.vercel/output/static/sitemap-5.xml'
+];
+
+filesToFormat.forEach(filePath => {
+  const fullPath = path.resolve(process.cwd(), filePath);
+  if (fs.existsSync(fullPath)) {
+    const xmlContent = fs.readFileSync(fullPath, 'utf8');
+    const prettyXml = formatXml(xmlContent);
+    fs.writeFileSync(fullPath, prettyXml, 'utf8');
+    console.log(`Formatted XML: ${filePath}`);
+  }
+});

src/components/CombinedRegionSection.jsx

@@ -0,0 +1,132 @@
+import { formatImageUrl } from '../lib/image';
+
+export default function CombinedRegionSection({ sections = [] }) {
+  if (!sections || sections.length === 0) return null;
+
+  return (
+    <section className="mx-auto max-w-7xl px-4 py-10 md:px-8 relative overflow-hidden">
+      {/* Master Premium Glass Container */}
+      <div className="relative overflow-hidden rounded-[32px] border border-white/5 bg-gradient-to-br from-white/[0.02] to-white/[0.003] p-6 shadow-2xl backdrop-blur-2xl md:p-10">
+        
+        {/* Abstract Floating Glows */}
+        <div className="absolute -left-20 -top-20 -z-10 h-80 w-80 rounded-full bg-primary/5 blur-[100px] pointer-events-none" />
+        <div className="absolute -right-20 -bottom-20 -z-10 h-80 w-80 rounded-full bg-amber-500/5 blur-[100px] pointer-events-none" />
+
+        {/* Section Header */}
+        <div className="relative z-10 mb-10 flex items-center justify-between border-b border-white/5 pb-5">
+          <div className="flex items-center gap-3">
+            <span className="h-8 w-2 rounded-full bg-gradient-to-b from-primary to-amber-500 shadow-[0_0_20px_rgba(124,58,237,0.4)]" />
+            <h2 className="text-xl font-black uppercase tracking-tight text-white md:text-2xl">
+              Đường Đua Điện Ảnh Quốc Tế
+            </h2>
+          </div>
+          <span className="hidden sm:inline-block rounded-full bg-white/5 border border-white/10 px-3 py-1 text-[8px] font-black uppercase tracking-widest text-gray-400">
+            Cập nhật hàng ngày
+          </span>
+        </div>
+
+        {/* Rows wrapper */}
+        <div className="relative z-10 space-y-12">
+          {sections.map((sec, idx) => {
+            // Authentic sponsor configuration for each region
+            const sponsors = {
+              'trung-quoc': { name: 'VIC88 TÀI TRỢ', bg: 'from-amber-600 to-red-600 shadow-red-600/30' },
+              'han-quoc': { name: 'F88 SPORT', bg: 'from-emerald-600 to-teal-600 shadow-emerald-600/30' },
+              'au-my': { name: '86BET LIVE', bg: 'from-blue-600 to-indigo-600 shadow-blue-600/30' }
+            };
+            
+            const sponsor = sponsors[sec.country] || { name: 'ROPHIM VIP', bg: 'from-primary to-accent shadow-primary/30' };
+
+            return (
+              <div key={sec.country} className="space-y-5">
+                {/* Row Header */}
+                <div className="flex items-center justify-between">
+                  <h3 className="flex items-center gap-2.5 text-xs font-black uppercase tracking-widest text-gray-300">
+                    <span className={`h-2.5 w-2.5 rounded-full bg-gradient-to-br ${sponsor.bg}`} />
+                    {sec.title}
+                  </h3>
+                  <a 
+                    href={sec.href} 
+                    className="group/all flex items-center gap-1 text-[9px] font-black uppercase tracking-widest text-primary hover:text-white transition-all duration-300 cursor-pointer"
+                  >
+                    Xem tất cả 
+                    <i className="fas fa-chevron-right text-[7px] transition-transform duration-300 group-hover/all:translate-x-1" />
+                  </a>
+                </div>
+
+                {/* Landscape 16/9 Card Scroll list */}
+                <div className="scrollbar-hide flex overflow-x-auto gap-5 pb-4 px-1 -mx-1 snap-x scroll-smooth">
+                  {sec.movies.slice(0, 10).map((m, mIdx) => {
+                    const poster = formatImageUrl(m.poster_url || m.thumb_url);
+                    const year = m.year || '';
+                    const quality = m.quality || 'FHD';
+                    const lang = m.lang || 'Vietsub';
+
+                    return (
+                      <div 
+                        key={m._id || m.slug} 
+                        className="w-[200px] sm:w-[240px] md:w-[280px] flex-shrink-0 snap-start group/land relative"
+                      >
+                        {/* 16:9 Image wrapper */}
+                        <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl border border-white/5 bg-black/40 transition-all duration-500 shadow-lg group-hover/land:scale-[1.03] group-hover/land:shadow-[0_12px_30px_rgba(0,0,0,0.6)] group-hover/land:border-white/15">
+                          <img 
+                            src={poster} 
+                            alt={m.name} 
+                            className="h-full w-full object-cover transition-transform duration-700 group-hover/land:scale-105" 
+                          />
+                          <div className="absolute inset-0 bg-gradient-to-t from-black/95 via-black/30 to-transparent" />
+
+                          {/* Authentic Sponsor Badge Overlay (on FIRST card of row) */}
+                          {mIdx === 0 && (
+                            <div className={`absolute top-3 left-3 z-30 bg-gradient-to-r ${sponsor.bg} text-[7px] font-black uppercase text-white px-2.5 py-0.5 rounded shadow-[0_4px_12px_rgba(0,0,0,0.5)] tracking-widest`}>
+                              {sponsor.name}
+                            </div>
+                          )}
+
+                          {/* Quality/Lang tags in top-right */}
+                          <div className="absolute top-3 right-3 z-20 flex gap-1">
+                            <span className="rounded bg-black/70 border border-white/10 px-1.5 py-[2px] text-[7px] font-black uppercase text-gray-300 backdrop-blur-sm shadow-md">
+                              {quality}
+                            </span>
+                            <span className="rounded bg-primary/90 px-1.5 py-[2px] text-[7px] font-black uppercase text-white backdrop-blur-sm shadow-md">
+                              {lang}
+                            </span>
+                          </div>
+
+                          {/* Glow Play Button overlay */}
+                          <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover/land:opacity-100 transition-opacity duration-300 bg-black/40 backdrop-blur-[1px] z-10">
+                            <div className="h-11 w-11 rounded-full bg-primary flex items-center justify-center text-white shadow-[0_0_20px_rgba(229,9,20,0.5)] transform scale-75 group-hover/land:scale-100 transition-transform duration-300">
+                              <i className="fas fa-play text-xs ml-0.5" />
+                            </div>
+                          </div>
+
+                          {/* Movie title overlay */}
+                          <div className="absolute bottom-3 left-4 right-4 z-20">
+                            <h4 className="line-clamp-1 text-[11px] sm:text-xs font-black uppercase tracking-tight text-white group-hover/land:text-primary transition-colors duration-300">
+                              {m.name}
+                            </h4>
+                            <div className="mt-0.5 flex items-center gap-1.5 text-[8px] font-bold text-gray-400 uppercase tracking-widest">
+                              <span className="truncate max-w-[120px]">{m.origin_name}</span>
+                              {year && (
+                                <>
+                                  <span className="h-1 w-1 rounded-full bg-gray-600" />
+                                  <span>{year}</span>
+                                </>
+                              )}
+                            </div>
+                          </div>
+
+                          <a href={`/phim/${m.slug}`} className="absolute inset-0 z-30" />
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/DeferredHero.astro

@@ -0,0 +1,87 @@
+---
+import HeroBanner from './HeroBanner.jsx';
+import { getNewestMovies } from '../lib/api.js';
+import { txasupabase } from '../lib/txasupabase.js';
+
+// 1. Lấy tất cả phim cục bộ để tìm phim được ghim lên slider
+const localMoviesObj = await txasupabase.getLocalMovies();
+const deletedSlugs = await txasupabase.getDeletedMovies();
+
+const allLocalMovies = Object.values(localMoviesObj)
+  .filter(m => !deletedSlugs.includes(m.movie.slug));
+
+// Lọc các phim được chọn ghim lên slider
+const pinnedMovies = allLocalMovies
+  .filter(m => m.movie.is_slider === true || m.movie.is_slider === 'true')
+  .map(m => ({
+    _id: m.movie.id || m.movie.slug,
+    name: m.movie.name,
+    slug: m.movie.slug,
+    origin_name: m.movie.origin_name,
+    thumb_url: m.movie.thumb_url,
+    poster_url: m.movie.poster_url,
+    year: m.movie.year,
+    quality: m.movie.quality || 'FHD',
+    lang: m.movie.lang || 'Vietsub',
+    episode_current: m.movie.episode_current || 'Tập 1',
+    type: m.movie.type || 'single',
+    isLocal: true
+  }));
+
+// Sắp xếp phim được ghim theo thời gian cập nhật mới nhất
+pinnedMovies.sort((a, b) => {
+  const timeA = new Date(localMoviesObj[a.slug]?.movie.modified?.time || 0).getTime();
+  const timeB = new Date(localMoviesObj[b.slug]?.movie.modified?.time || 0).getTime();
+  return timeB - timeA;
+});
+
+// Cần tối đa 10 phim cho slider
+let heroMovies = [...pinnedMovies];
+
+if (heroMovies.length === 0) {
+  // Lấy danh sách phim mới nhất để bù đắp các vị trí trống
+  const newest = await getNewestMovies(1);
+  const newestMovies = newest?.items || [];
+  
+  let extraMovies = [...newestMovies];
+  if (extraMovies.length < 4) {
+    try {
+      const res = await fetch('https://phimapi.com/danh-sach/phim-moi-cap-nhat?page=1');
+      if (res.ok) {
+        const data = await res.json();
+        const items = data.items || [];
+        const mapped = items.map(item => ({
+          _id: item._id,
+          name: item.name,
+          slug: item.slug,
+          origin_name: item.origin_name,
+          thumb_url: item.thumb_url,
+          poster_url: item.poster_url,
+          year: item.year,
+          quality: item.quality || 'FHD',
+          lang: item.lang || 'Vietsub',
+          episode_current: item.episode_current || 'Tập 1',
+          type: item.type || 'single',
+          isLocal: false
+        }));
+        extraMovies = [...extraMovies, ...mapped.filter(m => !extraMovies.some(x => x.slug === m.slug))];
+      }
+    } catch (e) {
+      console.error('Hero fallback error:', e);
+    }
+  }
+
+  // Thêm phim mới vào slider và loại trừ các phim đã được ghim/đã thêm để tránh trùng lặp
+  for (const movie of extraMovies) {
+    if (heroMovies.length >= 10) break;
+    if (!heroMovies.some(m => m.slug === movie.slug)) {
+      heroMovies.push(movie);
+    }
+  }
+}
+
+// Giới hạn đúng tối đa 10 phim
+heroMovies = heroMovies.slice(0, 10);
+---
+
+<HeroBanner movies={heroMovies} client:load />

src/components/DeferredSection.astro

@@ -0,0 +1,24 @@
+---
+import MovieSection from './MovieSection.jsx';
+import { getNewestMovies, getSeriesMovies, getSingleMovies, getCartoonMovies } from '../lib/api.js';
+
+interface Props {
+  type: 'newest' | 'series' | 'single' | 'cartoon';
+  title: string;
+  href: string;
+}
+
+const { type, title, href } = Astro.props;
+
+let movies = [];
+try {
+  if (type === 'newest') movies = (await getNewestMovies(1))?.items || [];
+  if (type === 'series') movies = (await getSeriesMovies(1))?.items || [];
+  if (type === 'single') movies = (await getSingleMovies(1))?.items || [];
+  if (type === 'cartoon') movies = (await getCartoonMovies(1))?.items || [];
+} catch (e) {
+  console.error(e);
+}
+---
+
+<MovieSection title={title} movies={movies} href={href} client:load />

src/components/DeferredTopTen.astro

@@ -0,0 +1,66 @@
+---
+import TopTenSection from './TopTenSection.jsx';
+import { getSeriesMovies } from '../lib/api.js';
+import { txasupabase } from '../lib/txasupabase.js';
+
+const data = await getSeriesMovies(1);
+let rawMovies = data?.items || [];
+
+if (rawMovies.length < 4) {
+  try {
+    const res = await fetch('https://phimapi.com/v1/api/danh-sach/phim-bo?page=1');
+    if (res.ok) {
+      const d = await res.json();
+      const items = d.data?.items || [];
+      const mapped = items.map(item => ({
+        _id: item._id,
+        name: item.name,
+        slug: item.slug,
+        origin_name: item.origin_name,
+        thumb_url: item.thumb_url,
+        poster_url: item.poster_url,
+        year: item.year,
+        quality: item.quality || 'FHD',
+        lang: item.lang || 'Vietsub',
+        episode_current: item.episode_current || 'Tập 1',
+        type: item.type || 'series',
+        isLocal: false
+      }));
+      rawMovies = [...rawMovies, ...mapped.filter(m => !rawMovies.some(x => x.slug === m.slug))];
+    }
+  } catch (e) {
+    console.error('TopTen fallback error:', e);
+  }
+}
+
+// Smart Deduplicate by base name (to avoid multiple seasons of the same show)
+const uniqueMovies = [];
+const seenBaseNames = new Set();
+
+for (const m of rawMovies) {
+  const baseName = m.name.split(' (Phần')[0].trim().toLowerCase();
+  
+  if (!seenBaseNames.has(baseName)) {
+    seenBaseNames.add(baseName);
+    uniqueMovies.push(m);
+  }
+}
+
+const seriesMovies = uniqueMovies.slice(0, 10);
+
+// Fetch Top Rated & Most Favorited
+const topRated = await txasupabase.getTopRatedMovies(10).catch(() => []);
+const mostFavorited = await txasupabase.getMostFavoritedMovies(10).catch(() => []);
+
+// Intelligent Fallbacks
+const finalSeries = seriesMovies;
+const finalRated = topRated.length >= 3 ? topRated : seriesMovies;
+const finalFavorited = mostFavorited.length >= 3 ? mostFavorited : seriesMovies;
+---
+
+<TopTenSection 
+  series={finalSeries} 
+  rated={finalRated} 
+  favorited={finalFavorited} 
+  client:only="react" 
+/>

src/components/EpisodeList.jsx

@@ -0,0 +1,170 @@
+import { Play, CheckCircle2 } from 'lucide-react';
+import { useState, useEffect } from 'react';
+
+export default function EpisodeList({ episodes, currentTap, movieSlug }) {
+  const [serverIndex, setServerIndex] = useState(0);
+  const [selectedChunkIndex, setSelectedChunkIndex] = useState(0);
+  const [watched, setWatched] = useState([]);
+
+  // Tự động đồng bộ server và tab (chunk) chứa tập đang phát (currentTap)
+  useEffect(() => {
+    if (currentTap && episodes?.length) {
+      const foundServerIdx = episodes.findIndex(server => 
+        server.server_data?.some(ep => ep.name === currentTap)
+      );
+      if (foundServerIdx !== -1) {
+        setServerIndex(foundServerIdx);
+        
+        const targetServer = episodes[foundServerIdx];
+        const targetEpisodes = targetServer?.server_data || [];
+        const epIdx = targetEpisodes.findIndex(ep => ep.name === currentTap);
+        if (epIdx !== -1) {
+          const targetChunkIdx = Math.floor(epIdx / 25);
+          setSelectedChunkIndex(targetChunkIdx);
+        }
+      }
+    }
+  }, [currentTap, episodes]);
+
+  // Tải lịch sử xem phim
+  useEffect(() => {
+    try {
+      const history = JSON.parse(localStorage.getItem('txa_watch_history') || '{}');
+      if (history[movieSlug]?.watched) {
+        setWatched(history[movieSlug].watched);
+      }
+    } catch (e) {
+      console.error('Failed to load watch history');
+    }
+  }, [movieSlug]);
+
+  if (!episodes?.length) return null;
+
+  const currentServer = episodes[serverIndex] || episodes[0];
+  const allEpisodes = currentServer?.server_data || [];
+  
+  // Chia danh sách tập phim thành các nhóm tối đa 25 tập
+  const chunkSize = 25;
+  const chunks = [];
+  for (let i = 0; i < allEpisodes.length; i += chunkSize) {
+    chunks.push(allEpisodes.slice(i, i + chunkSize));
+  }
+
+  // Đảm bảo selectedChunkIndex không vượt quá phạm vi mới sau khi đổi server
+  const activeChunkIndex = selectedChunkIndex < chunks.length ? selectedChunkIndex : 0;
+  const visibleEpisodes = chunks[activeChunkIndex] || [];
+
+  return (
+    <div suppressHydrationWarning className="glass rounded-[32px] p-6 shadow-2xl backdrop-blur-2xl border border-white/5 space-y-6">
+      
+      {/* Tiêu đề & Chọn Server / Chọn Tab 25 tập */}
+      <div suppressHydrationWarning className="flex flex-col gap-4 border-b border-white/5 pb-6">
+        
+        <div suppressHydrationWarning className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
+          <div suppressHydrationWarning className="flex items-center gap-3">
+            <span className="h-8 w-2 rounded-full bg-primary shadow-[0_0_15px_rgba(229,9,20,0.5)]" />
+            <h3 className="text-xl font-black uppercase tracking-tighter text-white">
+              Danh sách tập
+            </h3>
+          </div>
+
+          {/* Các Server phát */}
+          {episodes.length > 1 && (
+            <div suppressHydrationWarning className="flex flex-wrap gap-2">
+              {episodes.map((server, idx) => (
+                <button
+                  key={idx}
+                  onClick={() => {
+                    setServerIndex(idx);
+                    setSelectedChunkIndex(0); // Reset về tab đầu tiên khi đổi server
+                  }}
+                  className={`rounded-2xl px-5 py-2.5 text-xs font-black uppercase tracking-widest transition-all cursor-pointer ${
+                    serverIndex === idx
+                      ? 'bg-primary text-white shadow-[0_0_20px_rgba(229,9,20,0.4)] scale-105'
+                      : 'glass text-gray-400 hover:text-white hover:bg-white/5'
+                  }`}
+                >
+                  {server.server_name}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Các Tab phân trang 25 tập (chỉ hiện khi có trên 25 tập) */}
+        {chunks.length > 1 && (
+          <div suppressHydrationWarning className="flex flex-wrap gap-2 mt-2 pt-4 border-t border-white/5">
+            {chunks.map((chunk, idx) => {
+              const startIdx = idx * chunkSize + 1;
+              const endIdx = Math.min((idx + 1) * chunkSize, allEpisodes.length);
+              
+              // Tạo nhãn tab trực quan theo tên tập hoặc index số
+              const getLabel = () => {
+                const sName = chunk[0]?.name;
+                const eName = chunk[chunk.length - 1]?.name;
+                const sNum = parseInt(sName);
+                const eNum = parseInt(eName);
+                if (!isNaN(sNum) && !isNaN(eNum)) {
+                  return `Tập ${sNum} - ${eNum}`;
+                }
+                return `${sName} - ${eName}`;
+              };
+
+              const isActive = activeChunkIndex === idx;
+
+              return (
+                <button
+                  key={idx}
+                  onClick={() => setSelectedChunkIndex(idx)}
+                  className={`rounded-xl px-4 py-2 text-xs font-black transition-all cursor-pointer ${
+                    isActive
+                      ? 'bg-yellow-500 text-dark shadow-[0_0_15px_rgba(234,179,8,0.3)] scale-105'
+                      : 'bg-white/5 text-gray-400 hover:text-white hover:bg-white/10'
+                  }`}
+                >
+                  {getLabel()}
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Grid danh sách tập */}
+      <div suppressHydrationWarning className="grid grid-cols-3 gap-3 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10">
+        {visibleEpisodes.map((ep) => {
+          const isWatched = watched.includes(ep.name);
+          const isActive = ep.name === currentTap;
+          
+          return (
+             <a
+              key={ep.name}
+              href={`/xem/${movieSlug}?tap=${ep.name}`}
+              className={`group relative flex flex-col items-center justify-center rounded-2xl py-4 transition-all duration-300 ${
+                isActive
+                  ? 'bg-primary shadow-[0_0_25px_rgba(229,9,20,0.3)] ring-2 ring-primary scale-105 z-10'
+                  : 'glass hover:bg-white/10 hover:translate-y-[-2px]'
+              }`}
+            >
+              <span className={`text-sm font-black tracking-tight ${isActive ? 'text-white' : 'text-gray-400 group-hover:text-white'}`}>
+                {ep.name.toLowerCase().includes('tập') ? ep.name : `Tập ${ep.name}`}
+              </span>
+              
+              {isWatched && !isActive && (
+                <div className="absolute -right-1 -top-1 rounded-full bg-green-500 p-0.5 text-white shadow-lg ring-2 ring-[#0f0f0f]">
+                  <CheckCircle2 size={10} fill="currentColor" className="text-white" />
+                </div>
+              )}
+              
+              {isActive && (
+                 <div className="mt-1">
+                    <Play size={10} fill="white" className="text-white animate-pulse" />
+                 </div>
+              )}
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/Footer.jsx

@@ -0,0 +1,206 @@
+import { Film, Heart } from 'lucide-react';
+
+export default function Footer({ settings = {} }) {
+  const currentYear = new Date().getFullYear();
+  const copyrightYear = currentYear > 2026 ? `2026 - ${currentYear}` : '2026';
+
+  const socials = [
+    {
+      key: 'social_fb',
+      label: 'Theo dõi DPTXA trên Facebook',
+      hoverColor: '#1877F2',
+      trackingName: 'facebook',
+      svg: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.75z"/>
+        </svg>
+      )
+    },
+    {
+      key: 'social_fb_group',
+      label: 'Tham gia Cộng đồng Facebook',
+      hoverColor: '#1877F2',
+      trackingName: 'facebook_group',
+      svg: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
+        </svg>
+      )
+    },
+    {
+      key: 'social_zalo_group',
+      label: 'Tham gia Nhóm Zalo hỗ trợ',
+      hoverColor: '#0068FF',
+      trackingName: 'zalo',
+      svg: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12 2C6.48 2 2 5.58 2 10c0 1.95.86 3.73 2.3 5.09L3.5 19.5c-.13.34.19.68.52.54l4.58-1.99c1.17.34 2.27.45 3.4.45 5.52 0 10-3.58 10-8s-4.48-8-10-8zm2.5 11h-4.24l2.94-3.53H10.5V8.5h4.24L11.8 12.03h2.7v1.47z"/>
+        </svg>
+      )
+    },
+    {
+      key: 'social_telegram',
+      label: 'Kênh Telegram DPTXA',
+      hoverColor: '#24A1DE',
+      trackingName: 'telegram',
+      svg: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-1-.65-.35-1 .22-1.58.15-.15 2.72-2.5 2.77-2.71.01-.03.01-.13-.05-.18-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .24z"/>
+        </svg>
+      )
+    },
+    {
+      key: 'social_tiktok',
+      label: 'Theo dõi DPTXA trên TikTok',
+      hoverColor: '#FE2C55',
+      trackingName: 'tiktok',
+      svg: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.17-2.86-.74-3.95-1.72-.1-.09-.17-.13-.27-.24v6.07c.07 2.13-.53 4.36-2.02 5.92-1.49 1.62-3.8 2.47-5.97 2.4-2.18-.04-4.42-.9-5.74-2.65-1.43-1.84-1.75-4.52-1.01-6.73.68-2.11 2.58-3.79 4.77-4.19 1.12-.22 2.3-.1 3.38.31.02-2.31.01-4.63.01-6.95.03-.45.02-.91.03-1.36-.08-2.34-.05-4.69-.07-7.04z" />
+        </svg>
+      )
+    },
+    {
+      key: 'social_instagram',
+      label: 'Kênh Instagram DPTXA',
+      hoverColor: '#E1306C',
+      trackingName: 'instagram',
+      svg: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
+        </svg>
+      )
+    }
+  ];
+
+  return (
+    <footer className="relative z-10 border-t border-white/10 bg-[#0f0f0f] mt-auto">
+      {/* Dynamic Stagger Fade-Up styles for Premium Aesthetics & Accessibility */}
+      <style dangerouslySetInnerHTML={{__html: `
+        @keyframes footerSocialFadeUp {
+          from {
+            opacity: 0;
+            transform: translateY(12px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .social-link-item {
+          opacity: 0;
+          animation: footerSocialFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .social-link-item {
+            animation: none !important;
+            opacity: 1 !important;
+            transform: none !important;
+            transition: none !important;
+          }
+        }
+      `}} />
+
+      <div className="mx-auto max-w-7xl px-4 py-10">
+        <div className="grid gap-8 md:grid-cols-4">
+          <div>
+            <div className="mb-4">
+              <a href="/" className="flex items-center shrink-0 transition-transform hover:scale-[1.02] active:scale-95 group">
+                <svg className="h-8 w-8" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <circle cx="50" cy="50" r="44" stroke="url(#footer-purple-grad)" strokeWidth="5" fill="black" fillOpacity="0.3"/>
+                  <circle cx="50" cy="50" r="36" stroke="url(#footer-purple-grad)" strokeWidth="1.5" strokeDasharray="3 3" opacity="0.8"/>
+                  <path d="M44 32.5L68 50L44 67.5V32.5Z" fill="url(#footer-purple-grad)" stroke="url(#footer-purple-grad)" strokeWidth="1" strokeLinejoin="round"/>
+                  <defs>
+                    <linearGradient id="footer-purple-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+                      <stop offset="0%" stopColor="#a78bfa"/>
+                      <stop offset="50%" stopColor="#7c3aed"/>
+                      <stop offset="100%" stopColor="#4c1d95"/>
+                    </linearGradient>
+                  </defs>
+                </svg>
+                <div className="flex flex-col ml-2 justify-center leading-none">
+                  <span className="text-lg font-black tracking-tight text-white flex items-center leading-none">
+                    D<span className="text-primary">P</span>TXA
+                  </span>
+                  <span className="text-[8px] font-bold text-gray-400 mt-1 tracking-wider whitespace-nowrap leading-none">Động Phim Đỉnh Cao</span>
+                </div>
+              </a>
+            </div>
+            <p className="text-[10px] font-black uppercase tracking-[0.4em] text-primary mb-3">Động Phim Đỉnh Cao</p>
+            <p className="text-sm leading-relaxed text-gray-400">
+              Nền tảng xem phim trực tuyến miễn phí với kho phim khổng lồ, cập nhật liên tục mỗi ngày. Trải nghiệm đường truyền siêu tốc, chất lượng Full HD.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="mb-4 text-xs font-black uppercase tracking-widest text-white">Thể loại</h3>
+            <ul className="space-y-3 text-sm text-gray-400">
+              <li><a href="/danh-sach/phim-le" className="hover:text-primary transition-colors">Phim lẻ</a></li>
+              <li><a href="/danh-sach/phim-bo" className="hover:text-primary transition-colors">Phim bộ</a></li>
+              <li><a href="/danh-sach/hoat-hinh" className="hover:text-primary transition-colors">Hoạt hình</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="mb-4 text-xs font-black uppercase tracking-widest text-white">Chính sách</h3>
+            <ul className="space-y-3 text-sm text-gray-400">
+              <li><a href="/dieu-khoan" className="hover:text-primary transition-colors">Điều khoản sử dụng</a></li>
+              <li><a href="/chinh-sach" className="hover:text-primary transition-colors">Chính sách bảo mật</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">DMCA</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="mb-4 text-xs font-black uppercase tracking-widest text-white">Liên hệ</h3>
+            <p className="mb-2 text-sm text-gray-400 font-medium">Email: contact@tphimx.com</p>
+            <div className="flex flex-wrap gap-4 mt-4">
+              {socials
+                .filter(social => settings[`${social.key}_enable`] && settings[`${social.key}_url`])
+                .map((social, index) => {
+                  const url = settings[`${social.key}_url`];
+                  return (
+                    <a
+                      key={social.key}
+                      href={url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="social-link-item text-gray-400 transition-all duration-300 hover:scale-115 active:scale-90 flex items-center justify-center p-2 rounded-xl bg-white/[0.02] border border-white/5"
+                      style={{
+                        '--hover-color': social.hoverColor,
+                        animationDelay: `${index * 80}ms`
+                      }}
+                      onMouseEnter={(e) => {
+                        e.currentTarget.style.color = social.hoverColor;
+                        e.currentTarget.style.borderColor = `${social.hoverColor}33`;
+                        e.currentTarget.style.backgroundColor = `${social.hoverColor}10`;
+                        e.currentTarget.style.boxShadow = `0 0 15px ${social.hoverColor}22`;
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.color = '';
+                        e.currentTarget.style.borderColor = '';
+                        e.currentTarget.style.backgroundColor = '';
+                        e.currentTarget.style.boxShadow = '';
+                      }}
+                      data-txatooltip={social.label}
+                      data-social={social.trackingName}
+                    >
+                      {social.svg}
+                    </a>
+                  );
+                })}
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-white/5 pt-8 text-[10px] font-black uppercase tracking-widest text-gray-600 md:flex-row">
+          <p className="flex items-center gap-2">
+            <Film size={14} /> &copy; {copyrightYear} DPTXA - Động Phim Đỉnh Cao
+          </p>
+          <p className="flex items-center gap-2">
+            Made with <Heart size={12} className="text-primary animate-pulse" /> by DPTXA Team
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/Header.astro

@@ -0,0 +1,677 @@
+---
+import { txasupabase } from '../lib/txasupabase.js';
+
+const genres = await txasupabase.getGenres().catch(() => []);
+const countries = await txasupabase.getCountries().catch(() => []);
+
+const navLinks = [
+  { href: '/', label: 'Trang chủ' },
+  { href: '/danh-sach/phim-le', label: 'Phim Lẻ' },
+  { href: '/danh-sach/phim-bo', label: 'Phim Bộ' },
+];
+---
+
+<header
+  id="main-header"
+  class="fixed top-0 left-0 right-0 z-[100] transition-all duration-500 bg-gradient-to-b from-black/35 via-transparent to-transparent"
+>
+  <div id="header-inner" class="w-full flex items-center justify-between px-4 md:px-6 xl:px-10 py-4 md:py-6 transition-all duration-300">
+    
+    <!-- Left: Logo & Search -->
+    <div class="flex items-center gap-2 md:gap-4 lg:gap-6 flex-1 min-w-0">
+      <button id="menu-drawer-trigger" class="xl:hidden text-white hover:text-primary transition-all text-lg p-2.5 rounded-xl hover:bg-white/5 cursor-pointer shrink-0 flex items-center justify-center" aria-label="Mở menu">
+        <i class="fas fa-bars"></i>
+      </button>
+      <a href="/" class="flex items-center shrink-0 transition-transform hover:scale-[1.02] active:scale-95 group">
+        <!-- SVG Play Circle Logo (Matching TPHIMX Premium Theme) -->
+        <svg class="h-9 md:h-10 w-auto animate-pulse" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" style="height: 42px; width: 42px;">
+          <circle cx="50" cy="50" r="44" stroke="url(#purple-grad)" stroke-width="5" fill="black" fill-opacity="0.3"/>
+          <circle cx="50" cy="50" r="36" stroke="url(#purple-grad)" stroke-width="1.5" stroke-dasharray="3 3" opacity="0.8"/>
+          <path d="M44 32.5L68 50L44 67.5V32.5Z" fill="url(#purple-grad)" stroke="url(#purple-grad)" stroke-width="1" stroke-linejoin="round"/>
+          <defs>
+            <linearGradient id="purple-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stop-color="#a78bfa"/>
+              <stop offset="50%" stop-color="#7c3aed"/>
+              <stop offset="100%" stop-color="#4c1d95"/>
+            </linearGradient>
+          </defs>
+        </svg>
+        <div class="flex flex-col ml-2.5 justify-center leading-none">
+          <span class="text-lg md:text-[22px] font-black tracking-tight text-white flex items-center leading-none">
+            D<span class="text-primary">P</span>TXA
+          </span>
+          <span class="hidden sm:inline-block text-[8px] font-black text-gray-400 mt-2 tracking-widest uppercase leading-none">Động Phim Đỉnh Cao</span>
+        </div>
+      </a>
+
+      <!-- Search Bar (Pill-shaped, next to Logo) -->
+      <div class="relative hidden xl:block w-40 focus-within:w-52 xl:w-56 xl:focus-within:w-72 transition-all duration-300 ease-out group shrink-0">
+        <form id="header-search-form" class="flex items-center h-9 rounded-full bg-white/[0.06] border border-white/[0.08] px-3.5 focus-within:bg-white/10 focus-within:border-white/15 transition-all cursor-pointer w-full">
+          <i class="fas fa-search text-[11px] text-gray-400 shrink-0 select-none"></i>
+          <input
+            type="text"
+            id="header-search-input"
+            placeholder="Tìm phim, diễn viên..."
+            class="flex-1 bg-transparent text-[11px] font-bold text-white outline-none placeholder:text-gray-400/40 min-w-0 ml-2 transition-all duration-300"
+            autocomplete="off"
+          />
+          <span id="search-shortcut-badge" class="hidden sm:inline-flex items-center justify-center text-[8px] font-black text-gray-400 bg-white/10 border border-white/5 px-2 py-0.5 rounded ml-2 shrink-0 leading-none group-focus-within:hidden select-none">/</span>
+        </form>
+        <div id="search-suggestions" class="absolute left-0 right-0 top-full mt-2 max-h-[400px] overflow-y-auto hidden rounded-2xl border border-white/10 p-2 shadow-2xl glass-dropdown z-[120] scrollbar-thin">
+          <div id="suggestions-content" class="flex flex-col gap-1"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-4 xl:gap-6 shrink-0">
+      <!-- Desktop Navigation Menu (Inline in Header!) -->
+      <nav class="hidden xl:flex items-center gap-1 xl:gap-2 2xl:gap-3 text-[11px] xl:text-[13px] 2xl:text-[14px] font-black uppercase tracking-wider text-gray-300">
+        <a href="/chu-de" data-astro-prefetch class="px-2 xl:px-3 py-1.5 xl:py-2 hover:text-white rounded-xl hover:bg-white/[0.06] transition-all whitespace-nowrap">Chủ đề</a>
+        
+        <div class="relative group">
+          <button class="flex items-center gap-1 px-2 xl:px-3 py-1.5 xl:py-2 hover:text-white rounded-xl hover:bg-white/[0.06] transition-all cursor-pointer whitespace-nowrap">
+            Thể loại <i class="fas fa-caret-down text-[10px] opacity-50 ml-0.5"></i>
+          </button>
+          <div class="absolute left-1/2 -translate-x-1/2 top-[80%] pt-4 w-[560px] opacity-0 translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto transition-all duration-300 z-[120]">
+            <div class="glass-dropdown rounded-3xl p-5 border border-white/10 shadow-2xl grid grid-cols-4 gap-1.5 max-h-[380px] overflow-y-auto scrollbar-thin">
+              {genres.length > 0 ? genres.map((g: any) => (
+                <a href={`/the-loai/${g.slug}`} class="px-3.5 py-2.5 rounded-xl text-[12px] font-bold text-gray-400 hover:bg-white/5 hover:text-white transition-all truncate">{g.name}</a>
+              )) : (
+                <span class="col-span-4 text-center text-gray-600 text-[12px] py-4">Chưa có thể loại</span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <a href="/danh-sach/phim-le" data-astro-prefetch class="px-2 xl:px-3 py-1.5 xl:py-2 hover:text-white rounded-xl hover:bg-white/[0.06] transition-all whitespace-nowrap">Phim Lẻ</a>
+        <a href="/danh-sach/phim-bo" data-astro-prefetch class="px-2 xl:px-3 py-1.5 xl:py-2 hover:text-white rounded-xl hover:bg-white/[0.06] transition-all whitespace-nowrap">Phim Bộ</a>
+
+        <a href="#" id="xem-chung-btn" class="flex items-center gap-1 xl:gap-1.5 px-2 xl:px-3 py-1.5 xl:py-2 hover:text-white rounded-xl hover:bg-white/[0.06] transition-all whitespace-nowrap group" data-txatooltip="Xem phim cùng bạn bè thời gian thực - Sắp ra mắt!">
+          Xem Chung
+          <span class="bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white text-[8px] font-black px-1.5 py-0.5 rounded shadow-[0_0_12px_rgba(168,85,247,0.5)] tracking-wide uppercase leading-none scale-90 origin-left">Sắp ra mắt</span>
+        </a>
+        <div class="relative group">
+          <button class="flex items-center gap-1 px-2 xl:px-3 py-1.5 xl:py-2 hover:text-white rounded-xl hover:bg-white/[0.06] transition-all cursor-pointer whitespace-nowrap">
+            Quốc gia <i class="fas fa-caret-down text-[10px] opacity-50 ml-0.5"></i>
+          </button>
+          <div class="absolute left-1/2 -translate-x-1/2 top-[80%] pt-4 w-[460px] opacity-0 translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto transition-all duration-300 z-[120]">
+            <div class="glass-dropdown rounded-3xl p-5 border border-white/10 shadow-2xl grid grid-cols-3 gap-1.5 max-h-[380px] overflow-y-auto scrollbar-thin">
+              {countries.length > 0 ? countries.map((c: any) => (
+                <a href={`/quoc-gia/${c.slug}`} class="px-3.5 py-2.5 rounded-xl text-[12px] font-bold text-gray-400 hover:bg-white/5 hover:text-white transition-all truncate">{c.name}</a>
+              )) : (
+                <span class="col-span-3 text-center text-gray-600 text-[12px] py-4">Chưa có quốc gia</span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <a href="/dien-vien" class="px-2 xl:px-3 py-1.5 xl:py-2 hover:text-white rounded-xl hover:bg-white/[0.06] transition-all whitespace-nowrap">Diễn viên</a>
+        <a href="/lich-chieu" class="px-2 xl:px-3 py-1.5 xl:py-2 hover:text-white rounded-xl hover:bg-white/[0.06] transition-all whitespace-nowrap">Lịch chiếu</a>
+      </nav>
+
+      <!-- Auth + Mobile Buttons -->
+      <div class="flex items-center gap-3 shrink-0">
+        <div id="auth-container" class="relative group">
+          <div id="auth-loading" class="flex items-center gap-3">
+            <div class="h-8 w-24 animate-pulse rounded-lg bg-white/5"></div>
+          </div>
+          <div id="auth-guest" class="hidden">
+            <a href="/dang-nhap" data-astro-prefetch class="flex items-center justify-center gap-2 rounded-full bg-white/[0.08] border border-white/[0.08] px-5 py-2 text-xs font-black text-white hover:bg-white hover:text-black hover:border-white transition-all">
+              <i class="fas fa-user text-xs"></i>
+              Thành viên
+            </a>
+          </div>
+          <div id="auth-user" class="hidden flex items-center gap-3 cursor-pointer group">
+            <div class="hidden sm:flex flex-col items-end leading-none">
+              <span class="text-[9.5px] font-black uppercase tracking-widest text-gray-500 mb-1">Thành viên</span>
+              <span id="user-display-name" class="text-[13px] font-bold text-white group-hover:text-primary transition-colors">Admin</span>
+            </div>
+            <div class="relative">
+              <div id="user-avatar" class="h-9 w-9 rounded-xl bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center text-white font-black shadow-lg ring-2 ring-white/10 overflow-hidden">
+                <img id="user-avatar-img" src="" class="h-full w-full object-cover hidden" />
+                <span id="user-avatar-text" class="text-xs">A</span>
+              </div>
+              <div class="absolute right-0 top-full pt-3 w-64 translate-y-2 opacity-0 pointer-events-none group-hover:translate-y-0 group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300 z-[110]">
+                <div class="glass-dropdown rounded-2xl p-2 border border-white/10 shadow-2xl overflow-hidden">
+                  <div class="px-4 py-3.5 border-b border-white/5 mb-1.5">
+                    <div id="user-email" class="text-xs font-semibold text-gray-500 truncate">user@example.com</div>
+                  </div>
+                  <a href="/ca-nhan/yeu-thich" class="flex items-center gap-3 px-4 py-3 rounded-xl text-xs font-bold text-gray-400 hover:bg-white/5 hover:text-white transition-all"><i class="fas fa-heart text-[15px] text-primary/60"></i> Phim yêu thích</a>
+                  <a href="/ca-nhan/lich-su" class="flex items-center gap-3 px-4 py-3 rounded-xl text-xs font-bold text-gray-400 hover:bg-white/5 hover:text-white transition-all"><i class="fas fa-history text-[15px] text-primary/60"></i> Lịch sử xem</a>
+                  <div id="admin-link-container"></div>
+                  <button id="logout-btn" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-xs font-bold text-gray-400 hover:bg-red-500/10 hover:text-red-500 transition-all"><i class="fas fa-sign-out-alt text-[15px]"></i> Đăng xuất</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Mobile triggers -->
+        <div class="flex items-center gap-2 xl:hidden">
+          <button id="mobile-search-trigger" class="text-gray-400 hover:text-white h-9 w-9 flex items-center justify-center rounded-lg bg-white/5"><i class="fas fa-search text-xs"></i></button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile Search Overlay -->
+  <div id="mobile-search-overlay" class="fixed inset-0 z-[110] hidden bg-black/95 backdrop-blur-3xl animate-in fade-in duration-300">
+    <div class="p-6">
+      <div class="flex items-center justify-between mb-8">
+        <div class="text-2xl font-black tracking-tighter text-white">D<span class="text-primary">P</span>TXA</div>
+        <button id="mobile-search-close" class="h-12 w-12 flex items-center justify-center rounded-full bg-white/5 text-white">
+          <i class="fas fa-times text-xl"></i>
+        </button>
+      </div>
+      <form id="mobile-search-form" class="relative">
+        <input 
+          type="text" 
+          id="mobile-search-input" 
+          placeholder="Nhập tên phim bạn muốn tìm..." 
+          class="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-5 text-lg font-bold text-white outline-none focus:border-primary/50 focus:bg-white/10 transition-all"
+          autocomplete="off"
+        />
+        <button type="submit" class="absolute right-4 top-1/2 -translate-y-1/2 h-12 w-12 flex items-center justify-center rounded-xl bg-primary text-white shadow-[0_0_20px_var(--primary)]">
+          <i class="fas fa-search"></i>
+        </button>
+      </form>
+      <!-- Mobile Search Suggestions -->
+      <div id="mobile-search-suggestions" class="mt-6 max-h-[calc(100vh-220px)] overflow-y-auto hidden rounded-3xl border border-white/10 p-2 glass-dropdown">
+         <div id="mobile-suggestions-content" class="flex flex-col gap-1"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Slide-out Navigation Drawer (Glassmorphic) -->
+  <div
+    id="menu-drawer"
+    class="fixed inset-y-0 left-0 w-80 max-w-[85vw] z-[120] -translate-x-full hidden flex-col h-full max-h-screen overflow-y-auto scrollbar-hide bg-black/95 backdrop-blur-3xl border-r border-white/10 p-6 transition-transform duration-300 ease-out overscroll-contain"
+    style="-webkit-overflow-scrolling: touch;"
+  >
+    <!-- Close button & Logo -->
+    <div class="flex items-center justify-between mb-6 pb-4 border-b border-white/5 shrink-0">
+      <div class="text-[17px] font-black tracking-tight text-white flex items-center">
+        D<span class="text-primary mr-0.5">P</span>TXA
+      </div>
+      <button id="menu-drawer-close" class="h-8 w-8 flex items-center justify-center rounded-xl bg-white/5 text-white hover:bg-white/10 transition-all cursor-pointer">
+        <i class="fas fa-times text-sm"></i>
+      </button>
+    </div>
+
+    <!-- Navigation Links inside Drawer -->
+    <div class="space-y-1.5 pr-1">
+      <a href="/" class="flex items-center gap-3 rounded-xl hover:bg-white/5 px-4 py-2.5 text-xs font-bold uppercase tracking-wider text-gray-300 hover:text-white transition-all">
+        <i class="fas fa-home text-sm text-primary/60 w-5"></i> Trang chủ
+      </a>
+      <a href="/chu-de" class="flex items-center gap-3 rounded-xl hover:bg-white/5 px-4 py-2.5 text-xs font-bold uppercase tracking-wider text-gray-300 hover:text-white transition-all">
+        <i class="fas fa-compass text-sm text-primary/60 w-5"></i> Chủ đề
+      </a>
+      <a href="/danh-sach/phim-le" class="flex items-center gap-3 rounded-xl hover:bg-white/5 px-4 py-2.5 text-xs font-bold uppercase tracking-wider text-gray-300 hover:text-white transition-all">
+        <i class="fas fa-film text-sm text-primary/60 w-5"></i> Phim Lẻ
+      </a>
+      <a href="/danh-sach/phim-bo" class="flex items-center gap-3 rounded-xl hover:bg-white/5 px-4 py-2.5 text-xs font-bold uppercase tracking-wider text-gray-300 hover:text-white transition-all">
+        <i class="fas fa-tv text-sm text-primary/60 w-5"></i> Phim Bộ
+      </a>
+      <a href="#" id="drawer-xem-chung-btn" class="flex items-center justify-between rounded-xl hover:bg-white/5 px-4 py-2.5 text-xs font-bold uppercase tracking-wider text-gray-300 hover:text-white transition-all group">
+        <span class="flex items-center gap-3">
+          <i class="fas fa-users text-sm text-primary/60 w-5"></i> Xem Chung
+        </span>
+        <span class="bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white text-[8px] font-black px-1.5 py-0.5 rounded leading-none">Sắp ra mắt</span>
+      </a>
+      <a href="/dien-vien" class="flex items-center gap-3 rounded-xl hover:bg-white/5 px-4 py-2.5 text-xs font-bold uppercase tracking-wider text-gray-300 hover:text-white transition-all">
+        <i class="fas fa-user-friends text-sm text-primary/60 w-5"></i> Diễn viên
+      </a>
+      <a href="/lich-chieu" class="flex items-center gap-3 rounded-xl hover:bg-white/5 px-4 py-2.5 text-xs font-bold uppercase tracking-wider text-gray-300 hover:text-white transition-all">
+        <i class="fas fa-calendar-alt text-sm text-primary/60 w-5"></i> Lịch chiếu
+      </a>
+
+      <!-- Dividers for lists -->
+      <div class="h-px bg-white/5 my-4"></div>
+
+      <!-- Countries list -->
+      <div class="px-4 py-2 text-[10px] font-black tracking-widest text-gray-500 uppercase">Quốc gia</div>
+      <div class="grid grid-cols-2 gap-1.5 px-2">
+        {countries.length > 0 ? countries.map((c: any) => (
+          <a href={`/quoc-gia/${c.slug}`} class="px-2.5 py-2 rounded-lg text-[11px] font-bold text-gray-400 hover:bg-white/5 hover:text-white transition-all truncate">{c.name}</a>
+        )) : (
+          <span class="col-span-2 text-center text-gray-600 text-[11px] py-2">Chưa có quốc gia</span>
+        )}
+      </div>
+
+      <!-- Genres list -->
+      <div class="h-px bg-white/5 my-4"></div>
+      <div class="px-4 py-2 text-[10px] font-black tracking-widest text-gray-500 uppercase">Thể loại</div>
+      <div class="grid grid-cols-2 gap-1.5 px-2 pb-6">
+        {genres.length > 0 ? genres.map((g: any) => (
+          <a href={`/the-loai/${g.slug}`} class="px-2.5 py-2 rounded-lg text-[11px] font-bold text-gray-400 hover:bg-white/5 hover:text-white transition-all truncate">{g.name}</a>
+        )) : (
+          <span class="col-span-2 text-center text-gray-600 text-[11px] py-2">Chưa có thể loại</span>
+        )}
+      </div>
+    </div>
+  </div>
+
+  <!-- Drawer Backdrop Overlay -->
+  <div
+    id="drawer-backdrop"
+    class="fixed inset-0 z-[115] bg-black/60 backdrop-blur-sm hidden opacity-0 transition-opacity duration-300"
+  ></div>
+</header>
+
+<script>
+  function initHeader() {
+    const header = document.getElementById('main-header');
+    if (!header || header.dataset.initialized) return;
+    header.dataset.initialized = 'true';
+
+    const drawerTrigger = document.getElementById('menu-drawer-trigger');
+    const drawer = document.getElementById('menu-drawer');
+    const backdrop = document.getElementById('drawer-backdrop');
+    const drawerClose = document.getElementById('menu-drawer-close');
+    const searchForm = document.getElementById('header-search-form');
+    const searchInput = document.getElementById('header-search-input');
+
+    // Shortcut badge label detection
+    const shortcutBadge = document.getElementById('search-shortcut-badge');
+    const isMac = navigator.userAgent.toLowerCase().includes('mac');
+    if (shortcutBadge) {
+      shortcutBadge.textContent = isMac ? '⌘K' : '/';
+    }
+
+    // Global Keydown search shortcut focus
+    if (!window._hasSearchShortcut) {
+      window._hasSearchShortcut = true;
+      window.addEventListener('keydown', (e) => {
+        const activeEl = document.activeElement;
+        if (activeEl && (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA' || activeEl.hasAttribute('contenteditable'))) {
+          return;
+        }
+        
+        const isMacUser = navigator.userAgent.toLowerCase().includes('mac');
+        const sInput = document.getElementById('header-search-input');
+        
+        if ((isMacUser && e.metaKey && e.key.toLowerCase() === 'k') || (!isMacUser && e.key === '/')) {
+          e.preventDefault();
+          sInput?.focus();
+          sInput?.select();
+        }
+      });
+    }
+
+    if (!header) return;
+
+    // Scroll Effect
+    const headerInner = document.getElementById('header-inner');
+    const handleScroll = () => {
+      if (window.scrollY > 30) {
+        header.classList.add('glass-scrolled', 'shadow-2xl');
+        header.classList.remove('bg-gradient-to-b', 'from-black/35', 'via-transparent', 'to-transparent');
+        headerInner?.classList.add('py-3');
+        headerInner?.classList.remove('py-4', 'md:py-6');
+      } else {
+        header.classList.remove('glass-scrolled', 'shadow-2xl');
+        header.classList.add('bg-gradient-to-b', 'from-black/35', 'via-transparent', 'to-transparent');
+        headerInner?.classList.add('py-4', 'md:py-6');
+        headerInner?.classList.remove('py-3');
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    handleScroll(); // Init state
+
+    // Drawer Xem Chung click handling with txatoast
+    const drawerXemChungBtn = document.getElementById('drawer-xem-chung-btn');
+    drawerXemChungBtn?.addEventListener('click', (e) => {
+      e.preventDefault();
+      const { txatoast } = window;
+      if (txatoast) {
+        txatoast.info('Tính năng Xem Chung phim trực tuyến đang được phát triển và sẽ sớm ra mắt!');
+      } else {
+        alert('Tính năng Xem Chung phim trực tuyến sắp ra mắt!');
+      }
+    });
+
+    // Auto-focus search input when search form is clicked
+    searchForm?.addEventListener('click', () => {
+      searchInput?.focus();
+    });
+
+    // Drawer Open & Close Animation Logic
+    const openDrawer = () => {
+      drawer?.classList.remove('hidden');
+      backdrop?.classList.remove('hidden');
+      setTimeout(() => {
+        drawer?.classList.remove('-translate-x-full');
+        backdrop?.classList.add('opacity-100');
+      }, 10);
+      document.body.style.overflow = 'hidden';
+    };
+
+    const closeDrawer = () => {
+      drawer?.classList.add('-translate-x-full');
+      backdrop?.classList.remove('opacity-100');
+      setTimeout(() => {
+        drawer?.classList.add('hidden');
+        backdrop?.classList.add('hidden');
+      }, 300);
+      document.body.style.overflow = '';
+    };
+
+    drawerTrigger?.addEventListener('click', openDrawer);
+    drawerClose?.addEventListener('click', closeDrawer);
+    backdrop?.addEventListener('click', closeDrawer);
+
+    // Mobile Search Overlay Logic
+    const mobileSearchTrigger = document.getElementById('mobile-search-trigger');
+    const mobileSearchOverlay = document.getElementById('mobile-search-overlay');
+    const mobileSearchClose = document.getElementById('mobile-search-close');
+    const mobileSearchForm = document.getElementById('mobile-search-form');
+    const mobileSearchInput = document.getElementById('mobile-search-input');
+
+    mobileSearchTrigger?.addEventListener('click', () => {
+      mobileSearchOverlay?.classList.remove('hidden');
+      document.body.style.overflow = 'hidden';
+      setTimeout(() => mobileSearchInput?.focus(), 300);
+    });
+
+    mobileSearchClose?.addEventListener('click', () => {
+      mobileSearchOverlay?.classList.add('hidden');
+      if (drawer?.classList.contains('hidden')) {
+        document.body.style.overflow = '';
+      }
+    });
+
+    mobileSearchForm?.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const q = mobileSearchInput?.value.trim();
+      if (q) window.location.href = `/tim-kiem?q=${encodeURIComponent(q)}`;
+    });
+
+    // Search Suggestions and Logic
+    const searchSuggestions = document.getElementById('search-suggestions');
+    const suggestionsContent = document.getElementById('suggestions-content');
+    const mobileSearchSuggestions = document.getElementById('mobile-search-suggestions');
+    const mobileSuggestionsContent = document.getElementById('mobile-suggestions-content');
+
+    function debounce(func, wait) {
+      let timeout;
+      return function(...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(this, args), wait);
+      };
+    }
+
+    const formatImageUrl = (url) => {
+      if (!url) return '';
+      if (url.startsWith('http')) return url;
+      const cleanUrl = url.startsWith('/') ? url : `/${url}`;
+      return `https://phimimg.com${cleanUrl}`;
+    };
+
+    function highlightMatch(text, query) {
+      if (!query || !text) return text;
+      
+      const normalize = (str) => {
+        return str
+          .normalize("NFD")
+          .replace(/[\u0300-\u036f]/g, "")
+          .toLowerCase()
+          .replace(/đ/g, "d");
+      };
+
+      const normalizedText = normalize(text);
+      const normalizedQuery = normalize(query);
+      
+      let result = "";
+      let lastIdx = 0;
+      let idx = normalizedText.indexOf(normalizedQuery);
+      
+      if (idx === -1) return text;
+      
+      while (idx !== -1) {
+        result += text.substring(lastIdx, idx);
+        result += `<span class="text-primary font-black">${text.substring(idx, idx + query.length)}</span>`;
+        lastIdx = idx + query.length;
+        idx = normalizedText.indexOf(normalizedQuery, lastIdx);
+      }
+      
+      result += text.substring(lastIdx);
+      return result;
+    }
+
+    const performSearch = async (query, container, dropdown) => {
+      const q = query.trim();
+      if (!q) {
+        dropdown?.classList.add('hidden');
+        if (container) container.innerHTML = '';
+        return;
+      }
+
+      try {
+        const res = await fetch(`/api/movie/search?q=${encodeURIComponent(q)}`);
+        const { items } = await res.json();
+        
+        if (!items || items.length === 0) {
+          if (container) {
+            container.innerHTML = `
+              <div class="p-4 text-center text-xs font-black uppercase tracking-widest text-gray-500">
+                Không tìm thấy phim nào
+              </div>
+            `;
+          }
+          dropdown?.classList.remove('hidden');
+          return;
+        }
+
+        if (container) {
+          container.innerHTML = items.slice(0, 5).map((movie: any) => {
+            const poster = formatImageUrl(movie.poster_url || movie.thumb_url);
+            const titleHtml = highlightMatch(movie.name, q);
+            const originHtml = highlightMatch(movie.origin_name, q);
+            const status = movie.episode_current || 'HD';
+            const year = movie.year || '';
+            const type = movie.type === 'single' ? 'Phim Lẻ' : 'Phim Bộ';
+
+            return `
+              <a href="/phim/${movie.slug}" class="flex items-center gap-3 p-2 rounded-2xl hover:bg-white/5 transition-all group">
+                <div class="h-14 w-10 overflow-hidden rounded-xl border border-white/10 shrink-0">
+                  <img src="${poster}" class="h-full w-full object-cover group-hover:scale-105 transition-transform" />
+                </div>
+                <div class="min-w-0 flex-1">
+                  <div class="text-[11px] font-black uppercase text-white truncate group-hover:text-primary transition-colors">${titleHtml}</div>
+                  <div class="text-[9px] font-bold text-gray-500 truncate">${originHtml}</div>
+                  <div class="flex items-center gap-2 mt-1">
+                     <span class="text-[8px] font-black uppercase text-primary px-1.5 py-0.5 rounded bg-primary/10 border border-primary/20">${status}</span>
+                     ${year ? `<span class="text-[8px] font-bold text-gray-400">${year}</span>` : ''}
+                     <span class="text-[8px] font-bold text-gray-500">${type}</span>
+                  </div>
+                </div>
+                <i class="fas fa-chevron-right text-[8px] text-gray-600 group-hover:text-primary transition-colors mr-2"></i>
+              </a>
+            `;
+          }).join('');
+        }
+        dropdown?.classList.remove('hidden');
+      } catch (err) {
+        console.error('Search suggestion error:', err);
+      }
+    };
+
+    const debouncedDesktopSearch = debounce((q: string) => {
+      performSearch(q, suggestionsContent, searchSuggestions);
+    }, 150);
+
+    const debouncedMobileSearch = debounce((q) => {
+      performSearch(q, mobileSuggestionsContent, mobileSearchSuggestions);
+    }, 150);
+
+    searchInput?.addEventListener('input', (e) => {
+      debouncedDesktopSearch(e.target.value);
+    });
+
+    mobileSearchInput?.addEventListener('input', (e) => {
+      debouncedMobileSearch(e.target.value);
+    });
+
+    // Hide dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+      if (!searchForm?.contains(e.target) && !searchSuggestions?.contains(e.target)) {
+        searchSuggestions?.classList.add('hidden');
+      }
+    });
+
+    // Focus triggers again if there's value
+    searchInput?.addEventListener('focus', () => {
+      if (searchInput.value.trim()) {
+        searchSuggestions?.classList.remove('hidden');
+      }
+    });
+
+    searchForm?.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const query = searchInput?.value.trim();
+      if (query) {
+        window.location.href = `/tim-kiem?q=${encodeURIComponent(query)}`;
+      }
+    });
+
+    // Close menu on link click inside drawer
+    drawer?.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', closeDrawer);
+    });
+  }
+
+  async function checkAuth() {
+    const authContainer = document.getElementById('auth-container');
+    if (!authContainer || authContainer.dataset.initialized) return;
+    authContainer.dataset.initialized = 'true';
+
+    const loading = document.getElementById('auth-loading');
+    const guest = document.getElementById('auth-guest');
+    const userEl = document.getElementById('auth-user');
+    const mobileContainer = document.getElementById('mobile-auth-menu');
+
+    try {
+      const res = await fetch('/api/auth/me');
+      const { user } = await res.json();
+      
+      if (loading) loading.classList.add('hidden');
+
+      if (user) {
+        // Desktop UI
+        if (userEl) {
+           userEl.classList.remove('hidden');
+           const nameEl = document.getElementById('user-display-name');
+           const emailEl = document.getElementById('user-email');
+           const avatarText = document.getElementById('user-avatar-text');
+           const adminContainer = document.getElementById('admin-link-container');
+
+           if (nameEl) nameEl.textContent = user.username;
+           if (emailEl) emailEl.textContent = user.email || `${user.username}@tphimx.com`;
+           
+           const avatarImg = document.getElementById('user-avatar-img');
+           if (user.avatar_url && avatarImg) {
+             avatarImg.src = user.avatar_url;
+             avatarImg.classList.remove('hidden');
+             avatarText?.classList.add('hidden');
+           } else if (avatarText) {
+             avatarText.textContent = user.username[0].toUpperCase();
+             avatarText.classList.remove('hidden');
+             avatarImg?.classList.add('hidden');
+           }
+           
+            if (user.role === 'admin' && adminContainer) {
+              adminContainer.innerHTML = `
+                 <a href="/admin" class="flex items-center gap-3 px-4 py-3 rounded-xl text-xs font-bold text-primary hover:bg-primary/10 transition-all">
+                    <i class="fas fa-user-shield text-[15px]"></i>
+                    Bảng quản trị
+                 </a>
+              `;
+           }
+
+           document.getElementById('logout-btn')?.addEventListener('click', async () => {
+              await fetch('/api/auth/logout', { method: 'POST' });
+              window.location.reload();
+           });
+        }
+
+        // Mobile UI
+        if (mobileContainer) {
+          mobileContainer.innerHTML = `
+            <div class="w-full flex flex-col gap-4">
+              <div class="flex items-center justify-between rounded-3xl bg-white/5 p-6 border border-white/10">
+                <div class="flex items-center gap-4">
+                  ${user.avatar_url ? `
+                    <div class="h-14 w-14 rounded-2xl overflow-hidden shadow-[0_0_20px_var(--primary)] ring-2 ring-white/10 shrink-0">
+                      <img src="${user.avatar_url}" class="h-full w-full object-cover" />
+                    </div>
+                  ` : `
+                    <div class="h-14 w-14 rounded-2xl bg-primary flex items-center justify-center text-2xl font-black text-white shadow-[0_0_20px_var(--primary)] shrink-0">${user.username[0].toUpperCase()}</div>
+                  `}
+                  <div class="flex flex-col">
+                    <span class="text-[10px] font-black uppercase tracking-widest text-gray-500">Thành viên TPHIMX</span>
+                    <span class="text-lg font-black uppercase text-white">${user.username}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="grid grid-cols-2 gap-3">
+                 <a href="/ca-nhan/yeu-thich" class="flex flex-col items-center gap-3 rounded-3xl bg-white/5 p-6 border border-white/10 text-[10px] font-black uppercase tracking-widest text-gray-400">
+                    <i class="fas fa-heart text-2xl text-primary"></i>
+                    Yêu thích
+                 </a>
+                 <a href="/ca-nhan/lich-su" class="flex flex-col items-center gap-3 rounded-3xl bg-white/5 p-6 border border-white/10 text-[10px] font-black uppercase tracking-widest text-gray-400">
+                    <i class="fas fa-history text-2xl text-primary"></i>
+                    Lịch sử
+                 </a>
+              </div>
+              ${user.role === 'admin' ? `
+                 <a href="/admin" class="flex items-center justify-center gap-3 rounded-3xl bg-primary/20 border border-primary/30 p-5 text-[10px] font-black uppercase tracking-widest text-primary">
+                    <i class="fas fa-user-shield"></i>
+                    Quản trị hệ thống
+                 </a>
+              ` : ''}
+              <button id="mobile-logout-btn" class="flex items-center justify-center gap-3 rounded-3xl bg-red-500/10 border border-red-500/20 p-5 text-[10px] font-black uppercase tracking-widest text-red-500">
+                 <i class="fas fa-sign-out-alt"></i>
+                 Đăng xuất tài khoản
+              </button>
+            </div>
+          `;
+          document.getElementById('mobile-logout-btn')?.addEventListener('click', async () => {
+            await fetch('/api/auth/logout', { method: 'POST' });
+            window.location.reload();
+          });
+        }
+      } else {
+         if (guest) guest.classList.remove('hidden');
+      }
+      
+      if (window.initTxaTooltips) window.initTxaTooltips();
+    } catch (err) {
+      console.error('Auth check failed:', err);
+      if (guest) guest.classList.remove('hidden');
+    }
+  }
+
+  // Run immediately since DOM is ready when script executes
+  initHeader();
+  checkAuth();
+
+  // Support Astro View Transitions
+  document.addEventListener('astro:page-load', () => {
+    initHeader();
+    checkAuth();
+  });
+</script>
+
+<style>
+  .glass-scrolled {
+    backdrop-filter: blur(20px) saturate(180%);
+    background: rgba(10, 10, 10, 0.85);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  }
+  .glass-dropdown {
+    background: rgba(15, 15, 15, 0.92);
+    backdrop-filter: blur(30px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+</style>

src/components/Header.jsx

@@ -0,0 +1,100 @@
+import { useState, useEffect } from 'react';
+import { Search, Menu, X } from 'lucide-react';
+
+const navLinks = [
+  { href: '/', label: 'Trang chủ' },
+  { href: '/danh-sach/phim-le', label: 'Phim Lẻ' },
+  { href: '/danh-sach/phim-bo', label: 'Phim Bộ' },
+  { href: '/danh-sach/hoat-hinh', label: 'Hoạt hình' },
+];
+
+export default function Header() {
+  const [scrolled, setScrolled] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const onScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener('scroll', onScroll);
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    if (query.trim()) {
+      window.location.href = `/tim-kiem?q=${encodeURIComponent(query.trim())}`;
+    }
+  };
+
+  if (!mounted) {
+    return (
+      <header className="fixed top-0 left-0 right-0 z-50 bg-black/90 opacity-0">
+        <div className="mx-auto max-w-[1400px] px-4 py-2.5">
+          <div className="text-2xl font-black text-white">T<span className="text-primary">PHIM</span>X</div>
+        </div>
+      </header>
+    );
+  }
+
+  return (
+    <header
+      suppressHydrationWarning
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${scrolled ? 'glass bg-black/70 shadow-2xl' : 'bg-gradient-to-b from-black/95 to-transparent'}`}
+    >
+      {/* Row 1: Logo + Search + Auth */}
+      <div suppressHydrationWarning className="mx-auto flex max-w-[1400px] items-center justify-between px-4 lg:px-6 py-2.5">
+        <a href="/" className="flex items-center shrink-0 transition-transform hover:scale-[1.02] active:scale-95">
+          <div className="h-9 md:h-10 w-auto overflow-hidden">
+            <img src="/logo-full.png" className="h-full w-full object-contain" alt="TPHIMX" />
+          </div>
+        </a>
+
+        <form onSubmit={handleSearch} className="hidden md:flex items-center flex-1 max-w-md mx-6 rounded-lg bg-white/[0.06] border border-white/[0.06] px-4 py-2 focus-within:bg-white/10 focus-within:border-primary/30 transition-all">
+          <Search size={12} className="text-gray-500 mr-3 shrink-0" />
+          <input
+            type="text"
+            placeholder="Tìm kiếm phim, diễn viên..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="flex-1 bg-transparent text-xs font-medium text-white outline-none placeholder:text-gray-500"
+          />
+        </form>
+
+        <div suppressHydrationWarning className="flex items-center gap-2 shrink-0">
+          <button onClick={() => setMenuOpen(!menuOpen)} className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 text-white transition-all hover:bg-primary hover:text-dark md:hidden">
+            {menuOpen ? <X size={18} /> : <Menu size={18} />}
+          </button>
+        </div>
+      </div>
+
+      {/* Row 2: Nav Bar */}
+      <nav suppressHydrationWarning className={`hidden md:block border-t border-white/[0.04] ${scrolled ? 'bg-transparent' : 'bg-black/20'}`}>
+        <div className="mx-auto max-w-[1400px] flex items-center gap-0.5 px-4 lg:px-6 py-0 text-[11px] font-bold">
+          {navLinks.map((link) => (
+            <a key={link.href} href={link.href} className="px-4 py-2.5 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-all whitespace-nowrap">
+              {link.label}
+            </a>
+          ))}
+          <a href="/dien-vien" className="px-4 py-2.5 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-all whitespace-nowrap">Diễn viên</a>
+          <a href="/lich-chieu" className="px-4 py-2.5 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-all whitespace-nowrap">Lịch chiếu</a>
+        </div>
+      </nav>
+
+      {/* Mobile Menu */}
+      {menuOpen && (
+        <div suppressHydrationWarning className="glass flex flex-col border-t border-white/5 bg-black/95 p-4 md:hidden">
+          {navLinks.map((link) => (
+            <a key={link.href} href={link.href} className="flex items-center justify-between rounded-xl px-5 py-4 text-xs font-bold text-gray-300 transition-all active:scale-95 active:bg-primary active:text-dark" onClick={() => setMenuOpen(false)}>
+              {link.label}
+              <i className="fas fa-chevron-right text-[9px] opacity-30"></i>
+            </a>
+          ))}
+          <a href="/dien-vien" className="flex items-center justify-between rounded-xl px-5 py-4 text-xs font-bold text-gray-300 transition-all" onClick={() => setMenuOpen(false)}>Diễn viên</a>
+          <a href="/lich-chieu" className="flex items-center justify-between rounded-xl px-5 py-4 text-xs font-bold text-gray-300 transition-all" onClick={() => setMenuOpen(false)}>Lịch chiếu</a>
+        </div>
+      )}
+    </header>
+  );
+}

src/components/HeroBanner.jsx

@@ -0,0 +1,223 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Play, Info, ChevronLeft, ChevronRight } from 'lucide-react';
+import { formatImageUrl } from '../lib/image';
+
+export default function HeroBanner({ movies = [] }) {
+  const [active, setActive] = useState(0);
+  const [progress, setProgress] = useState(0);
+  const [favorites, setFavorites] = useState([]);
+
+  useEffect(() => {
+    fetch('/api/user/favorite')
+      .then(res => res.json())
+      .then(data => {
+        if (data && data.favorites) {
+          setFavorites(data.favorites.map(f => f.slug));
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  const handleFavoriteClick = async (m) => {
+    try {
+      const res = await fetch('/api/user/favorite', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          movieSlug: m.slug,
+          movieName: m.name,
+          movieThumb: m.thumb_url || m.poster_url
+        })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        if (window.txatoast) {
+          window.txatoast.success(data.message);
+        }
+        if (data.action === 'added') {
+          setFavorites(prev => [...prev, m.slug]);
+        } else {
+          setFavorites(prev => prev.filter(slug => slug !== m.slug));
+        }
+      } else {
+        if (window.txatoast) {
+          window.txatoast.error(data.error || 'Vui lòng đăng nhập!');
+        }
+      }
+    } catch (e) {
+      if (window.txatoast) {
+        window.txatoast.error('Không thể thực hiện lúc này!');
+      }
+    }
+  };
+
+  const heroMovies = movies.slice(0, 5);
+
+  const next = useCallback(() => {
+    setActive((prev) => (prev + 1) % heroMovies.length);
+    setProgress(0);
+  }, [heroMovies.length]);
+
+  const prev = useCallback(() => {
+    setActive((prev) => (prev - 1 + heroMovies.length) % heroMovies.length);
+    setProgress(0);
+  }, [heroMovies.length]);
+
+  useEffect(() => {
+    if (heroMovies.length <= 1) return;
+    const interval = 100; // 0.1s
+    const step = 100 / (6000 / interval); // 6s per slide
+    
+    const timer = setInterval(() => {
+      setProgress((p) => {
+        if (p >= 100) {
+          next();
+          return 0;
+        }
+        return p + step;
+      });
+    }, interval);
+
+    return () => clearInterval(timer);
+  }, [heroMovies.length, next]);
+
+  if (!heroMovies.length) return null;
+  const movie = heroMovies[active];
+  const bg = formatImageUrl(movie.poster_url || movie.thumb_url);
+  const year = movie.year || (movie.modified?.time ? new Date(movie.modified.time).getFullYear() : '');
+
+  return (
+    <div className="relative h-[600px] w-full overflow-hidden md:h-[750px] lg:h-[850px]">
+      {/* Background Slides with Stylized Text */}
+      {heroMovies.map((m, i) => (
+        <div
+          key={m._id}
+          className={`absolute inset-0 transition-all duration-[2000ms] ease-out ${
+            i === active ? 'opacity-100 scale-100' : 'opacity-0 scale-110'
+          }`}
+        >
+          {/* Main Background Image */}
+          <div 
+            className="absolute inset-0 bg-cover bg-center md:bg-[center_right_20%]"
+            style={{ backgroundImage: `url(${formatImageUrl(m.poster_url || m.thumb_url)})` }}
+          />
+          
+          {/* Stylized Background Text Layer (The "Thu Hút Mãnh Liệt" style in bg) */}
+          <div className="absolute inset-0 flex items-center justify-center opacity-10 select-none pointer-events-none overflow-hidden">
+             <h1 className="text-[20vw] font-black uppercase whitespace-nowrap rotate-[-10deg] text-white">
+                {m.name}
+             </h1>
+          </div>
+        </div>
+      ))}
+
+      {/* Gradients for cinematic feel */}
+      <div className="absolute inset-0 bg-gradient-to-r from-[#0f0f0f] via-[#0f0f0f]/80 to-transparent z-10" />
+      <div className="absolute inset-0 bg-gradient-to-t from-[#0f0f0f] via-transparent to-transparent z-10" />
+
+      <div className="relative mx-auto flex h-full max-w-7xl flex-col justify-center px-6 z-20">
+        <div className="max-w-2xl transition-all duration-700 transform opacity-100 translate-y-0">
+          <h1 className="text-4xl font-black text-white md:text-6xl lg:text-7xl drop-shadow-[0_0_30px_rgba(255,255,255,0.2)]">
+            <a href={`/phim/${movie.slug}`} className="hover:text-primary transition-colors cursor-pointer">
+              {movie.name}
+            </a>
+          </h1>
+          
+          {movie.origin_name && (
+            <p className="mt-2 text-sm font-bold text-gray-400 md:text-base uppercase tracking-wider opacity-60 italic">{movie.origin_name}</p>
+          )}
+
+          {/* Badges Row */}
+          <div className="mt-6 flex flex-wrap items-center gap-3">
+             <div className="flex items-center gap-1.5 rounded-lg bg-yellow-500/20 px-2.5 py-1 text-[10px] font-black text-yellow-500 ring-1 ring-yellow-500/30">
+                <i className="fas fa-star"></i> {movie.tmdb?.vote_average || (8.5 + (movie.slug.length % 15) / 10).toFixed(1)}
+             </div>
+             <span className="glass rounded-lg px-2.5 py-1 text-[10px] font-black text-gray-300 ring-1 ring-white/10 uppercase">
+                {movie.quality || 'Full HD'}
+             </span>
+             <span className="glass rounded-lg px-2.5 py-1 text-[10px] font-black text-gray-300 ring-1 ring-white/10">
+                {year}
+             </span>
+             {movie.tmdb?.season && (
+                <span className="glass rounded-lg px-2.5 py-1 text-[10px] font-black text-gray-300 ring-1 ring-white/10">
+                   Phần {movie.tmdb.season}
+                </span>
+             )}
+             <span className="glass rounded-lg px-2.5 py-1 text-[10px] font-black text-gray-300 ring-1 ring-white/10">
+                {movie.episode_current?.toLowerCase().includes('hoàn tất') ? 'Hoàn tất' : `Tập ${movie.episode_current?.match(/\d+/)?.[0] || '??'}`} 
+                {movie.episode_total && movie.episode_total !== '1' && ` / ${movie.episode_total}`}
+             </span>
+          </div>
+
+          {/* Categories Row */}
+          <div className="mt-4 flex flex-wrap gap-2">
+             {movie.category?.slice(0, 4).map(cat => (
+               <span key={cat.id} className="text-[11px] font-bold text-gray-500 hover:text-white transition-colors cursor-pointer">
+                  {cat.name}
+               </span>
+             ))}
+          </div>
+
+          <p className="mt-8 line-clamp-3 max-w-xl text-sm leading-relaxed text-gray-400 md:text-base drop-shadow-md">
+            {movie.content?.replace(/<[^>]*>/g, '') || movie.description || ''}
+          </p>
+
+          <div className="mt-10 flex items-center gap-4">
+            <a
+              href={`/xem/${movie.slug}`}
+              className="group flex h-14 w-14 items-center justify-center rounded-full bg-yellow-500 text-black shadow-[0_0_30px_rgba(234,179,8,0.4)] transition-all hover:scale-110 active:scale-95"
+              data-txatooltip="Xem phim ngay"
+            >
+              <i className="fas fa-play text-xl ml-1"></i>
+            </a>
+            
+            <button 
+               className={`glass flex h-14 w-14 items-center justify-center rounded-full transition-all hover:bg-white/10 hover:ring-2 hover:ring-white/20 ${favorites.includes(movie.slug) ? 'text-primary' : 'text-white'}`}
+               onClick={() => handleFavoriteClick(movie)}
+               data-txatooltip={favorites.includes(movie.slug) ? "Bỏ yêu thích" : "Thêm vào yêu thích"}
+            >
+               <i className={`${favorites.includes(movie.slug) ? 'fas' : 'far'} fa-heart text-xl`}></i>
+            </button>
+
+            <a
+              href={`/phim/${movie.slug}`}
+              className="glass flex h-14 w-14 items-center justify-center rounded-full text-white transition-all hover:bg-white/10 hover:ring-2 hover:ring-white/20"
+              data-txatooltip="Thông tin chi tiết"
+            >
+               <i className="fas fa-info text-xl"></i>
+            </a>
+          </div>
+        </div>
+
+        {/* Thumbnails Navigation (Right side row) */}
+        <div className="absolute bottom-16 right-6 hidden lg:flex items-center gap-3">
+            {heroMovies.map((m, i) => (
+              <div 
+                key={m._id} 
+                onClick={() => { setActive(i); setProgress(0); }}
+                className={`group relative h-16 w-24 cursor-pointer overflow-hidden rounded-xl border-2 transition-all duration-500 ${
+                   i === active ? 'border-primary scale-110 shadow-[0_0_20px_rgba(229,9,20,0.5)]' : 'border-white/10 opacity-50 hover:opacity-100'
+                }`}
+              >
+                <img src={formatImageUrl(m.thumb_url || m.poster_url)} className="h-full w-full object-cover" alt="nav" />
+                {i === active && (
+                   <div className="absolute bottom-0 left-0 h-1 bg-primary transition-all duration-100" style={{ width: `${progress}%` }} />
+                )}
+              </div>
+            ))}
+        </div>
+
+        {/* Mobile Navigation */}
+        <div className="absolute bottom-8 left-6 flex lg:hidden gap-2">
+           {heroMovies.map((_, i) => (
+              <div 
+                 key={i} 
+                 onClick={() => { setActive(i); setProgress(0); }}
+                 className={`h-1.5 rounded-full transition-all duration-500 ${i === active ? 'w-8 bg-primary' : 'w-2 bg-white/20'}`}
+              />
+           ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/HomeSectionsLoader.jsx

@@ -0,0 +1,147 @@
+import { useEffect, useState, useRef } from 'react';
+import MovieSection from './MovieSection.jsx';
+import CombinedRegionSection from './CombinedRegionSection.jsx';
+
+const SECTION_CONFIGS = [
+  { type: 'newest', title: 'Phim mới cập nhật', href: '/danh-sach/phim-moi-cap-nhat' },
+  { type: 'series', title: 'Phim bộ đặc sắc', href: '/danh-sach/phim-bo' },
+  { type: 'single', title: 'Phim Điện Ảnh Mới Coóng', href: '/danh-sach/phim-le' },
+  { category: 'phim-chieu-rap', title: 'Mãn Nhãn với Phim Chiếu Rạp', href: '/the-loai/phim-chieu-rap' },
+  { type: 'cartoon', title: 'Thế giới hoạt hình', href: '/danh-sach/hoat-hinh' },
+  { country: 'trung-quoc', title: 'Phim Trung Quốc mới', href: '/quoc-gia/trung-quoc' },
+  { country: 'han-quoc', title: 'Phim Hàn Quốc mới', href: '/quoc-gia/han-quoc' },
+  { country: 'au-my', title: 'Phim Âu-Mỹ mới', href: '/quoc-gia/au-my' }
+];
+
+export default function HomeSectionsLoader() {
+  const [loadedSections, setLoadedSections] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const loaderRef = useRef(null);
+
+  const fetchSectionData = async (config) => {
+    try {
+      const params = new URLSearchParams();
+      if (config.type) params.append('type', config.type);
+      if (config.category) params.append('category', config.category);
+      if (config.country) params.append('country', config.country);
+
+      const res = await fetch(`/api/movies?${params.toString()}`);
+      if (!res.ok) throw new Error('Failed to fetch movies');
+      const data = await res.json();
+      return data.items || [];
+    } catch (e) {
+      console.error(`[HomeSectionsLoader] Error loading ${config.title}:`, e);
+      return [];
+    }
+  };
+
+  // Tải danh mục tiếp theo khi cuộn xuống
+  const loadNextSection = async () => {
+    if (loading || currentIndex >= SECTION_CONFIGS.length) return;
+    
+    setLoading(true);
+    const config = SECTION_CONFIGS[currentIndex];
+    const movies = await fetchSectionData(config);
+    
+    if (movies.length > 0) {
+      setLoadedSections(prev => {
+        if (prev.some(s => s.title === config.title)) return prev;
+        return [...prev, { ...config, movies }];
+      });
+    }
+    
+    setCurrentIndex(prev => prev + 1);
+    setLoading(false);
+  };
+
+  // Lần đầu tải 2 Section đầu tiên để lấp đầy khung nhìn ngay lập tức
+  useEffect(() => {
+    let active = true;
+
+    const initLoad = async () => {
+      setLoading(true);
+      
+      // Load Section 1
+      const config1 = SECTION_CONFIGS[0];
+      const movies1 = await fetchSectionData(config1);
+      if (active && movies1.length > 0) {
+        setLoadedSections([{ ...config1, movies: movies1 }]);
+      }
+      
+      // Load Section 2
+      const config2 = SECTION_CONFIGS[1];
+      const movies2 = await fetchSectionData(config2);
+      if (active && movies2.length > 0) {
+        setLoadedSections(prev => [...prev, { ...config2, movies: movies2 }]);
+      }
+      
+      if (active) {
+        setCurrentIndex(2);
+        setLoading(false);
+      }
+    };
+
+    initLoad();
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  // Lắng nghe Intersection Observer để kích hoạt tải Section tiếp theo khi cuộn xuống gần cuối
+  useEffect(() => {
+    if (!loaderRef.current || currentIndex >= SECTION_CONFIGS.length || loading) return;
+
+    const observer = new IntersectionObserver((entries) => {
+      const target = entries[0];
+      if (target.isIntersecting && !loading) {
+        loadNextSection();
+      }
+    }, {
+      rootMargin: '350px', // Bắt đầu tải ngầm trước khi cuộn tới 350px để tạo trải nghiệm bất tận mượt mà
+      threshold: 0.1
+    });
+
+    observer.observe(loaderRef.current);
+    return () => observer.disconnect();
+  }, [currentIndex, loading]);
+
+  const normalSections = loadedSections.filter(sec => !['trung-quoc', 'han-quoc', 'au-my'].includes(sec.country));
+  const regionSections = loadedSections.filter(sec => ['trung-quoc', 'han-quoc', 'au-my'].includes(sec.country));
+
+  return (
+    <div className="space-y-4">
+      {normalSections.map((sec, i) => (
+        <MovieSection 
+          key={`${sec.type || sec.category || sec.country}-${i}`} 
+          title={sec.title} 
+          movies={sec.movies} 
+          href={sec.href} 
+        />
+      ))}
+
+      {regionSections.length > 0 && (
+        <CombinedRegionSection sections={regionSections} />
+      )}
+
+      {/* Điểm kích hoạt cuộn tải Section */}
+      {currentIndex < SECTION_CONFIGS.length && (
+        <div ref={loaderRef} className="flex flex-col items-center justify-center py-12">
+          {loading && (
+            <>
+              <div className="relative flex h-16 w-16 items-center justify-center">
+                {/* Vòng quay hiệu ứng Neon cao cấp */}
+                <div className="absolute inset-0 animate-spin rounded-full border-4 border-t-primary border-r-accent border-b-transparent border-l-transparent"></div>
+                <div className="h-6 w-6 animate-pulse rounded-full bg-primary/80 blur-[2px]"></div>
+              </div>
+              <span className="mt-4 text-xs font-black uppercase tracking-widest text-gray-500 animate-pulse">
+                Đang tải thêm danh mục phim...
+              </span>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/MovieCard.jsx

@@ -0,0 +1,127 @@
+import { Play, Star, Clock, Calendar } from 'lucide-react';
+const IMAGE_BASE_URL = 'https://phimimg.com';
+
+const formatImageUrl = (url) => {
+  if (!url) return '';
+  if (url.startsWith('http')) return url;
+  const cleanUrl = url.startsWith('/') ? url : `/${url}`;
+  return `${IMAGE_BASE_URL}${cleanUrl}`;
+};
+
+export default function MovieCard({ movie }) {
+  if (!movie) return null;
+
+  const poster = formatImageUrl(movie.poster_url);
+  const thumb = formatImageUrl(movie.thumb_url || movie.poster_url);
+  const year = movie.year || (movie.modified?.time ? new Date(movie.modified.time).getFullYear() : '');
+  const quality = movie.quality || 'HD';
+  const lang = movie.lang?.toLowerCase() || 'vietsub';
+  
+  const isVietsub = lang.includes('vietsub') || lang.includes('pđ') || lang.includes('phụ đề') || lang === 'vietsub';
+  const isThuyetMinh = lang.includes('thuyết minh') || lang.includes('tm');
+  
+  const isSingle = movie.type === 'single' || movie.type === 'movie';
+  const epNum = movie.episode_current?.match(/\d+/)?.[0];
+  const isFull = movie.episode_current?.toLowerCase().includes('hoàn tất') || 
+                 (movie.episode_current === movie.episode_total && movie.episode_total !== '1' && movie.episode_total !== undefined);
+  
+  const statusLabel = isFull ? 'Hoàn tất' : (epNum ? `Tập ${epNum}` : movie.episode_current);
+  
+  // Deterministic rating based on slug to avoid hydration mismatch
+  const getRating = (slug) => {
+    if (!slug) return "8.5";
+    let hash = 0;
+    for (let i = 0; i < slug.length; i++) hash = slug.charCodeAt(i) + ((hash << 5) - hash);
+    return (8.5 + (Math.abs(hash) % 15) / 10).toFixed(1);
+  };
+  const rating = movie.tmdb?.vote_average || getRating(movie.slug);
+
+  return (
+    <a 
+      href={`/phim/${movie.slug}`} 
+      className="group relative block overflow-hidden rounded-[24px] bg-[#1a1a1a] transition-all duration-500 hover:ring-2 hover:ring-primary/50 shadow-xl"
+      data-txatooltip={`<div class='p-2'><div class='text-primary font-black mb-1'>${movie.name}</div><div class='text-xs text-gray-400 line-clamp-3'>${movie.content?.replace(/<[^>]*>/g, '')}</div></div>`}
+    >
+      <div className="relative aspect-[2/3] overflow-hidden">
+        {/* Main Background Image */}
+        <img
+          src={poster}
+          alt={movie.name}
+          loading="lazy"
+          decoding="async"
+          className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
+        />
+        
+        {/* Overlay Gradients */}
+        <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90" />
+        <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-transparent opacity-40" />
+
+        {/* Quality Badge (Top Left) */}
+        <div className="absolute left-3 top-3 z-20">
+          <span className="glass rounded-lg px-2.5 py-1 text-xs font-black uppercase text-white ring-1 ring-white/20 shadow-2xl">
+            {quality}
+          </span>
+        </div>
+
+        {/* Rating Badge (Top Right) */}
+        <div className="absolute right-3 top-3 z-20 flex flex-col items-end gap-1.5">
+           <div className="glass flex items-center gap-1.5 rounded-lg px-3 py-1.5 ring-1 ring-yellow-500/30">
+              <i className="fas fa-star text-xs text-yellow-500"></i>
+              <span className="text-xs font-black text-white">{rating}</span>
+           </div>
+           {year && (
+             <span className="glass rounded-lg px-3 py-1.5 text-xs font-black tracking-widest text-gray-300 ring-1 ring-white/10">
+               {year}
+             </span>
+           )}
+        </div>
+
+        {/* Small Poster Thumbnail Overlay (Bottom Left) */}
+        <div className="absolute bottom-4 left-3 z-10 h-16 w-11 overflow-hidden rounded-xl border border-white/20 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:-translate-y-1">
+          <img src={thumb} className="h-full w-full object-cover" alt="mini" />
+        </div>
+
+        {/* Bottom Status Badges (Vietsub | Thuyết Minh | Status) */}
+        <div className="absolute bottom-4 right-3 flex flex-col items-end gap-1.5">
+          <div className="flex flex-wrap gap-1 bg-black/85 p-1 rounded-xl border border-white/10 backdrop-blur-md shadow-2xl">
+            {isVietsub && (
+              <span className="rounded-lg bg-indigo-600/80 px-2 py-1 text-[9px] font-black uppercase text-white shadow-md">
+                Vietsub
+              </span>
+            )}
+            {isThuyetMinh && (
+              <span className="rounded-lg bg-emerald-600/80 px-2 py-1 text-[9px] font-black uppercase text-white shadow-md">
+                Thuyết Minh
+              </span>
+            )}
+            {isSingle ? (
+              <span className="rounded-lg bg-blue-600/85 px-2 py-1 text-[9px] font-black uppercase text-white shadow-md">
+                FULL
+              </span>
+            ) : (
+              statusLabel && (
+                <span className="rounded-lg bg-amber-500/85 px-2 py-1 text-[9px] font-black uppercase text-dark shadow-md">
+                  {statusLabel}
+                </span>
+              )
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="p-4 pt-3.5 space-y-1">
+        <h3 className="line-clamp-1 text-base font-black uppercase tracking-tight text-white transition-colors group-hover:text-primary">
+          {movie.name}
+        </h3>
+        <div className="flex items-center justify-between gap-2">
+           <p className="line-clamp-1 text-sm font-bold text-gray-400">{movie.origin_name}</p>
+           {statusLabel && (
+             <span className="text-xs font-black uppercase tracking-wider text-amber-400 bg-amber-400/10 px-2 py-0.5 rounded border border-amber-400/25 shrink-0">
+                {statusLabel}
+             </span>
+           )}
+        </div>
+      </div>
+    </a>
+  );
+}

src/components/MovieSection.jsx

@@ -0,0 +1,92 @@
+import { useEffect, useRef, useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import MovieCard from './MovieCard';
+
+export default function MovieSection({ title, movies = [], href = '#' }) {
+  const [visible, setVisible] = useState(true);
+  const sectionRef = useRef(null);
+  const scrollRef = useRef(null);
+  const [showLeft, setShowLeft] = useState(false);
+  const [showRight, setShowRight] = useState(true);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.unobserve(entry.target);
+        }
+      },
+      { threshold: 0.1 }
+    );
+    if (sectionRef.current) observer.observe(sectionRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+    const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
+    setShowLeft(scrollLeft > 10);
+    setShowRight(scrollLeft < scrollWidth - clientWidth - 10);
+  };
+
+  const scroll = (dir) => {
+    if (!scrollRef.current) return;
+    const amount = scrollRef.current.clientWidth * 0.8;
+    scrollRef.current.scrollBy({ left: dir * amount, behavior: 'smooth' });
+  };
+
+  if (!movies?.length) return null;
+
+  return (
+    <section 
+      ref={sectionRef}
+      className={`mx-auto max-w-7xl px-4 py-10 transition-all duration-1000 ${visible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}
+    >
+      <div className="mb-8 flex items-center justify-between">
+        <h2 className="flex items-center gap-3 text-2xl font-black uppercase tracking-tighter text-white md:text-3xl">
+          <span className="h-8 w-2 rounded-full bg-primary shadow-[0_0_15px_rgba(229,9,20,0.5)]" />
+          {title}
+        </h2>
+        {href !== '#' && (
+          <a href={href} className="group flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-gray-500 transition-colors hover:text-white">
+            Xem tất cả
+            <ChevronRight size={14} className="transition-transform group-hover:translate-x-1" />
+          </a>
+        )}
+      </div>
+
+      <div className="group relative">
+        {showLeft && (
+          <button 
+            onClick={() => scroll(-1)}
+            className="absolute -left-4 top-1/2 z-30 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white backdrop-blur-md opacity-0 transition-all group-hover:opacity-100 hover:bg-primary"
+          >
+            <ChevronLeft size={24} />
+          </button>
+        )}
+        
+        {showRight && (
+          <button 
+            onClick={() => scroll(1)}
+            className="absolute -right-4 top-1/2 z-30 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white backdrop-blur-md opacity-0 transition-all group-hover:opacity-100 hover:bg-primary"
+          >
+            <ChevronRight size={24} />
+          </button>
+        )}
+
+        <div 
+          ref={scrollRef}
+          onScroll={handleScroll}
+          className="scrollbar-hide flex gap-5 overflow-x-auto pb-4"
+        >
+          {movies.map((movie) => (
+            <div key={movie._id || movie.slug} className="w-[180px] flex-shrink-0 md:w-[220px]">
+              <MovieCard movie={movie} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/MovieSlider.jsx

@@ -0,0 +1,118 @@
+import { useEffect, useRef, useState } from 'react';
+import { ChevronLeft, ChevronRight, Play, Star, Calendar, Clock } from 'lucide-react';
+
+export default function MovieSlider({ movies = [] }) {
+  const containerRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(true);
+
+  const checkScroll = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 10);
+  };
+
+  useEffect(() => {
+    checkScroll();
+    const el = containerRef.current;
+    if (el) {
+      el.addEventListener('scroll', checkScroll);
+      window.addEventListener('resize', checkScroll);
+      return () => {
+        el.removeEventListener('scroll', checkScroll);
+        window.removeEventListener('resize', checkScroll);
+      };
+    }
+  }, [movies]);
+
+  const scroll = (dir) => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.scrollBy({ left: dir * el.clientWidth * 0.8, behavior: 'smooth' });
+  };
+
+  if (!movies?.length) return null;
+
+  return (
+    <div className="relative mx-auto max-w-7xl px-4 py-4">
+      <div className="mb-3 flex items-center gap-2 text-lg font-bold text-white md:text-xl">
+        <span className="h-5 w-1 rounded bg-[#e50914]" />
+        Đề xuất hot
+      </div>
+      <div className="relative">
+        <div
+          ref={containerRef}
+          className="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-4 scrollbar-hide"
+          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+        >
+          {movies.map((movie) => {
+            const thumb = movie.thumb_url || movie.poster_url || '';
+            const year = movie.year || (movie.modified?.time ? new Date(movie.modified.time).getFullYear() : '');
+            return (
+              <a
+                key={movie._id || movie.slug}
+                href={`/phim/${movie.slug}`}
+                className="group relative w-[260px] flex-shrink-0 snap-start overflow-hidden rounded-xl sm:w-[300px] md:w-[340px]"
+              >
+                <div className="relative aspect-[16/10] overflow-hidden">
+                  <img
+                    src={thumb}
+                    alt={movie.name}
+                    loading="lazy"
+                    className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                    onError={(e) => { e.currentTarget.src = 'https://via.placeholder.com/640x360/1a1a1a/888?text=No+Image'; }}
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent" />
+                  <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                    <div className="flex h-14 w-14 items-center justify-center rounded-full bg-[#e50914]/90 shadow-xl backdrop-blur-sm">
+                      <Play size={24} className="ml-1 text-white" fill="white" />
+                    </div>
+                  </div>
+                  <div className="absolute left-3 top-3">
+                    {movie.quality && (
+                      <span className="rounded bg-[#e50914] px-2 py-0.5 text-[10px] font-bold uppercase text-white">
+                        {movie.quality}
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div className="p-3">
+                  <h3 className="line-clamp-1 text-sm font-bold text-white group-hover:text-[#e50914]">
+                    {movie.name}
+                  </h3>
+                  <div className="mt-1 flex flex-wrap items-center gap-3 text-[11px] text-gray-400">
+                    {year && <span className="flex items-center gap-1"><Calendar size={10} /> {year}</span>}
+                    {movie.time && <span className="flex items-center gap-1"><Clock size={10} /> {movie.time}</span>}
+                    {movie.tmdb?.vote_average && (
+                      <span className="flex items-center gap-1 text-yellow-400">
+                        <Star size={10} fill="currentColor" /> {movie.tmdb.vote_average.toFixed(1)}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </a>
+            );
+          })}
+        </div>
+
+        {canScrollLeft && (
+          <button
+            onClick={() => scroll(-1)}
+            className="absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-9 w-9 items-center justify-center rounded-full bg-black/60 text-white backdrop-blur-sm hover:bg-[#e50914] transition-colors"
+          >
+            <ChevronLeft size={20} />
+          </button>
+        )}
+        {canScrollRight && (
+          <button
+            onClick={() => scroll(1)}
+            className="absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-9 w-9 items-center justify-center rounded-full bg-black/60 text-white backdrop-blur-sm hover:bg-[#e50914] transition-colors"
+          >
+            <ChevronRight size={20} />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/PaginatedGrid.jsx

@@ -0,0 +1,104 @@
+import { useState, useRef } from 'react';
+import MovieCard from './MovieCard';
+import Pagination from './Pagination';
+
+export default function PaginatedGrid({ initialData, category, title, query, topic, country, type }) {
+  const [data, setData] = useState(initialData);
+  const [loading, setLoading] = useState(false);
+  const containerRef = useRef(null);
+
+  const moviesList = data?.items || [];
+  const currentPage = data?.pagination?.currentPage || 1;
+  const totalPages = data?.pagination?.totalPages || 1;
+
+  // Xây dựng đường dẫn cơ sở basePath động chuẩn chỉnh cho chuyển trang
+  let basePath = '';
+  if (typeof window !== 'undefined') {
+    const url = new URL(window.location.href);
+    url.searchParams.delete('page');
+    // Giữ nguyên các tham số tìm kiếm khác (như q) nếu có
+    basePath = url.pathname + url.search;
+  } else {
+    // Giải pháp dự phòng khi Render trên máy chủ (SSR Fallback)
+    if (query) {
+      basePath = `/tim-kiem?q=${encodeURIComponent(query)}`;
+    } else if (topic) {
+      basePath = `/chu-de/${topic}`;
+    } else {
+      basePath = category ? `/the-loai/${category}` : '';
+    }
+  }
+
+  const handlePageChange = async (pageNum) => {
+    if (pageNum === currentPage || loading) return;
+    setLoading(true);
+
+    // Cuộn mượt mà lên đầu danh sách/bảng phim với offset hợp lý
+    if (containerRef.current) {
+      containerRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+
+    try {
+      let apiUrl = `/api/movies?page=${pageNum}`;
+      if (category) apiUrl += `&category=${encodeURIComponent(category)}`;
+      if (topic) apiUrl += `&topic=${encodeURIComponent(topic)}`;
+      if (country) apiUrl += `&country=${encodeURIComponent(country)}`;
+      if (query) apiUrl += `&q=${encodeURIComponent(query)}`;
+      if (type) apiUrl += `&type=${encodeURIComponent(type)}`;
+
+      const res = await fetch(apiUrl);
+      if (!res.ok) throw new Error(`HTTP error ${res.status}`);
+      const json = await res.json();
+
+      // Giãn cách một chút (300ms) để hiệu ứng chuyển trang trông premium, mượt mà và trực quan
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      setData(json);
+
+      // Cập nhật địa chỉ URL trình duyệt mà không gây tải lại toàn bộ trang
+      const newUrl = new URL(window.location.href);
+      newUrl.searchParams.set('page', String(pageNum));
+      window.history.pushState({}, '', newUrl.toString());
+    } catch (err) {
+      console.error('Lỗi khi tải trang mới:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div ref={containerRef} className="space-y-12 relative scroll-mt-28">
+      {/* Hiệu ứng phủ kính Glassmorphism Loading Siêu Sang Trọng */}
+      {loading && (
+        <div className="absolute inset-0 z-50 bg-black/40 backdrop-blur-[2px] rounded-3xl flex items-center justify-center transition-all duration-300 animate-fade-in">
+          <div className="flex flex-col items-center gap-3 bg-[#12141d]/85 border border-white/10 rounded-2xl p-6 shadow-2xl">
+            <div className="h-10 w-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin"></div>
+            <span className="text-xs font-black uppercase tracking-widest text-primary animate-pulse">Đang cập nhật...</span>
+          </div>
+        </div>
+      )}
+
+      {moviesList.length === 0 ? (
+        <div className="py-20 text-center text-gray-500 font-bold uppercase tracking-widest text-xs">
+          Không tìm thấy phim nào
+        </div>
+      ) : (
+        <>
+          {/* Grid hiển thị danh sách phim hiện tại */}
+          <div className={`grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 transition-all duration-300 ${loading ? 'opacity-30 blur-[1px]' : 'opacity-100'}`}>
+            {moviesList.map((movie) => (
+              <MovieCard key={movie._id || movie.slug} movie={movie} />
+            ))}
+          </div>
+
+          {/* Phân trang tiêu chuẩn cao cấp bằng AJAX */}
+          <Pagination 
+            currentPage={currentPage} 
+            totalPages={totalPages} 
+            basePath={basePath} 
+            onPageChange={handlePageChange} 
+          />
+        </>
+      )}
+    </div>
+  );
+}

src/components/Pagination.jsx

@@ -0,0 +1,66 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export default function Pagination({ currentPage, totalPages, basePath, onPageChange }) {
+  if (totalPages <= 1) return null;
+
+  const getPages = () => {
+    const pages = [];
+    const maxVisible = 5;
+    let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+    let end = Math.min(totalPages, start + maxVisible - 1);
+    if (end - start < maxVisible - 1) start = Math.max(1, end - maxVisible + 1);
+    for (let i = start; i <= end; i++) pages.push(i);
+    return pages;
+  };
+
+  const buildUrl = (page) => {
+    const sep = basePath.includes('?') ? '&' : '?';
+    return `${basePath}${sep}page=${page}`;
+  };
+
+  const handlePageClick = (e, page) => {
+    if (onPageChange) {
+      e.preventDefault();
+      onPageChange(page);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center gap-2 py-8">
+      {currentPage > 1 && (
+        <a
+          href={buildUrl(currentPage - 1)}
+          onClick={(e) => handlePageClick(e, currentPage - 1)}
+          className="flex h-9 w-9 items-center justify-center rounded-md bg-[#1a1a1a] text-gray-300 hover:bg-[#e50914] hover:text-white transition-colors"
+        >
+          <ChevronLeft size={16} />
+        </a>
+      )}
+
+      {getPages().map((page) => (
+        <a
+          key={page}
+          href={buildUrl(page)}
+          onClick={(e) => handlePageClick(e, page)}
+          className={`flex h-9 min-w-[36px] items-center justify-center rounded-md px-2 text-sm font-medium transition-colors ${
+            page === currentPage
+              ? 'bg-[#e50914] text-white'
+              : 'bg-[#1a1a1a] text-gray-300 hover:bg-[#2a2a2a] hover:text-white'
+          }`}
+        >
+          {page}
+        </a>
+      ))}
+
+      {currentPage < totalPages && (
+        <a
+          href={buildUrl(currentPage + 1)}
+          onClick={(e) => handlePageClick(e, currentPage + 1)}
+          className="flex h-9 w-9 items-center justify-center rounded-md bg-[#1a1a1a] text-gray-300 hover:bg-[#e50914] hover:text-white transition-colors"
+        >
+          <ChevronRight size={16} />
+        </a>
+      )}
+    </div>
+  );
+}

src/components/SplashScreen.jsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+
+export default function SplashScreen() {
+  const [visible, setVisible] = useState(true);
+  const [fadeOut, setFadeOut] = useState(false);
+
+  useEffect(() => {
+    const show = () => {
+      setVisible(true);
+      setFadeOut(false);
+    };
+    const hide = () => {
+      setFadeOut(true);
+      setTimeout(() => setVisible(false), 600);
+    };
+
+    document.addEventListener('astro:before-preparation', show);
+    document.addEventListener('astro:after-preparation', hide);
+
+    // Initial hide for first page load
+    const timer = setTimeout(hide, 1000);
+
+    return () => {
+      document.removeEventListener('astro:before-preparation', show);
+      document.removeEventListener('astro:after-preparation', hide);
+      clearTimeout(timer);
+    };
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className={`fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-[#0f0f0f] transition-opacity duration-500 ${fadeOut ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}
+    >
+      <div className="relative mb-8 flex flex-col items-center">
+        <div className="relative w-80 h-32 overflow-hidden animate-pulse">
+          <img src="/logo-full.png" className="h-full w-full object-contain" alt="TPHIMX Full Logo" />
+        </div>
+        <div className="mt-4 text-[12px] font-black uppercase tracking-[0.6em] text-primary">Tuyệt mỹ từng khung hình</div>
+        <div className="mt-6 h-[2px] w-64 bg-gradient-to-r from-transparent via-primary to-transparent" />
+      </div>
+      <div className="flex gap-1.5">
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            className="h-2.5 w-2.5 rounded-full bg-primary animate-bounce shadow-[0_0_8px_var(--primary)]"
+            style={{ animationDelay: `${i * 0.15}s` }}
+          />
+        ))}
+      </div>
+      <p className="mt-4 text-sm tracking-widest text-gray-500 uppercase">Đang tải...</p>
+    </div>
+  );
+}

src/components/TopTenCard.jsx

@@ -0,0 +1,120 @@
+import { Play, Info } from 'lucide-react';
+import { useState, useRef } from 'react';
+import { formatImageUrl } from '../lib/image';
+
+export default function TopTenCard({ movie, index }) {
+  const [showPreview, setShowPreview] = useState(false);
+  const hoverTimer = useRef(null);
+
+  const handleMouseEnter = () => {
+    hoverTimer.current = setTimeout(() => {
+      setShowPreview(true);
+    }, 400); // Mượt mà hơn với 400ms phản hồi
+  };
+
+  const handleMouseLeave = () => {
+    if (hoverTimer.current) clearTimeout(hoverTimer.current);
+    setShowPreview(false);
+  };
+
+  const year = movie.year || (movie.modified?.time ? new Date(movie.modified.time).getFullYear() : '');
+  const epCount = movie.episode_current?.match(/\d+/)?.[0] || '??';
+  
+  // horizontal backdrop for preview
+  const backdrop = formatImageUrl(movie.poster_url || movie.thumb_url);
+  const poster = formatImageUrl(movie.thumb_url || movie.poster_url);
+
+  return (
+    <div 
+      className="relative flex flex-col group/card h-[240px] md:h-[340px] w-full"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Giant Netflix Outlined Number */}
+      <div
+        className="pointer-events-none absolute select-none leading-none font-black transition-all duration-700 group-hover/card:scale-105"
+        style={{
+          left: '-12px',
+          bottom: '40px',
+          fontSize: '180px',
+          fontWeight: 950,
+          fontStyle: 'italic',
+          fontFamily: '"Outfit", "Impact", "Arial Black", sans-serif',
+          color: '#0c0c0c',
+          WebkitTextStroke: '4px rgba(255, 255, 255, 0.45)',
+          textShadow: '0 10px 30px rgba(0,0,0,0.9), 10px 10px 20px rgba(0,0,0,0.7)',
+          zIndex: 10,
+        }}
+      >
+        {index + 1}
+      </div>
+
+      {/* Overlapping Poster Card */}
+      <div className="relative ml-[35%] w-[65%] h-[80%] z-20 transition-all duration-500 group-hover/card:translate-x-2 group-hover/card:scale-[1.03]">
+        <div 
+          className="absolute inset-0 overflow-hidden rounded-2xl shadow-[0_15px_30px_rgba(0,0,0,0.8)] ring-1 ring-white/10 group-hover/card:shadow-[0_20px_40px_rgba(229,9,20,0.45)] group-hover/card:ring-primary/50"
+        >
+          <img src={poster} alt={movie.name} className="h-full w-full object-cover" />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent" />
+        </div>
+
+        {/* Episode Badge */}
+        <div className="absolute bottom-2 left-2 z-20 flex flex-wrap gap-1">
+          <span className="rounded px-2 py-[3px] text-[9px] md:text-[10px] font-black uppercase tracking-wide text-white bg-black/85 border border-white/10 backdrop-blur-sm shadow-md">
+            TẬP {epCount}
+          </span>
+        </div>
+
+        <a href={`/phim/${movie.slug}`} className="absolute inset-0 z-40 rounded-2xl" />
+      </div>
+
+      {/* Info below aligned with poster */}
+      <div className="ml-[35%] pl-3 pr-1 pt-3 h-[20%] flex flex-col justify-center min-w-0">
+        <h3 className="line-clamp-1 text-[13px] md:text-[15px] font-black uppercase tracking-tight text-white transition-colors duration-300 group-hover/card:text-primary">
+          {movie.name}
+        </h3>
+        <p className="mt-1 line-clamp-1 text-[9px] md:text-[11px] font-bold uppercase tracking-widest text-gray-400">
+          {movie.origin_name}
+        </p>
+      </div>
+
+      {/* Premium Hover Preview Popup */}
+      {showPreview && (
+        <div className="absolute left-[65%] top-[10%] z-[100] w-[280px] -translate-x-1/2 -translate-y-[20%] animate-in fade-in zoom-in duration-300 pointer-events-auto">
+          <div className="overflow-hidden rounded-2xl bg-[#141414] shadow-[0_25px_60px_rgba(0,0,0,0.95)] ring-1 ring-white/10 border border-white/5">
+            <div className="relative aspect-video w-full overflow-hidden">
+               <img src={backdrop} className="h-full w-full object-cover" alt="preview" />
+               <div className="absolute inset-0 bg-gradient-to-t from-[#141414] via-transparent to-transparent" />
+               <div className="absolute bottom-3 left-3 right-3 flex items-end justify-between">
+                  <div className="flex flex-col min-w-0">
+                     <span className="text-[10px] font-black text-white shadow-black drop-shadow-lg truncate">{movie.name}</span>
+                     <span className="text-[7px] font-bold text-gray-400 uppercase tracking-widest truncate">{movie.origin_name}</span>
+                  </div>
+                  <span className="rounded bg-primary px-1.5 py-0.5 text-[7px] font-black text-white uppercase shrink-0 shadow-lg">{movie.quality || 'FHD'}</span>
+               </div>
+            </div>
+            
+            <div className="p-4 bg-[#141414]">
+               <div className="flex items-center gap-3 mb-3.5">
+                  <a href={`/xem/${movie.slug}`} className="flex flex-1 items-center justify-center gap-2 rounded-xl bg-white py-2.5 text-[9px] font-black uppercase tracking-widest text-black transition-all hover:bg-white/90 hover:scale-[1.02] active:scale-95 shadow-md">
+                     <Play size={10} fill="black" /> Xem ngay
+                  </a>
+                  <a href={`/phim/${movie.slug}`} className="flex h-9 w-9 items-center justify-center rounded-xl bg-white/10 text-white transition-all hover:bg-white/20 hover:scale-[1.02] border border-white/5 shadow-md">
+                     <Info size={14} />
+                  </a>
+               </div>
+               <p className="line-clamp-2 text-[9px] leading-relaxed text-gray-400 font-medium">
+                  {movie.content?.replace(/<[^>]*>/g, '') || 'Đang cập nhật nội dung cốt truyện...'}
+               </p>
+               <div className="mt-3.5 pt-3 border-t border-white/5 flex items-center gap-2 text-[8px] font-bold text-gray-500 uppercase tracking-wider">
+                  <span>{year}</span>
+                  <span className="h-1 w-1 rounded-full bg-gray-700" />
+                  <span>{movie.episode_current}</span>
+               </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/TopTenSection.jsx

@@ -0,0 +1,119 @@
+import { useRef, useState, useEffect } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import TopTenCard from './TopTenCard';
+
+export default function TopTenSection({ series = [], rated = [], favorited = [] }) {
+  const [activeTab, setActiveTab] = useState('series');
+  const scrollRef = useRef(null);
+  const [showLeft, setShowLeft] = useState(false);
+  const [showRight, setShowRight] = useState(true);
+
+  const getMoviesForTab = () => {
+    switch (activeTab) {
+      case 'rated': return rated;
+      case 'favorited': return favorited;
+      case 'series':
+      default: return series;
+    }
+  };
+
+  const movies = getMoviesForTab();
+
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+    const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
+    setShowLeft(scrollLeft > 10);
+    setShowRight(scrollLeft < scrollWidth - clientWidth - 10);
+  };
+
+  const scroll = (dir) => {
+    if (!scrollRef.current) return;
+    const amount = scrollRef.current.clientWidth * 0.8;
+    scrollRef.current.scrollBy({ left: dir * amount, behavior: 'smooth' });
+  };
+
+  // Reset scroll position on tab change
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft = 0;
+      handleScroll();
+    }
+  }, [activeTab]);
+
+  if (!movies?.length) return null;
+
+  return (
+    <section className="mx-auto max-w-7xl px-4 py-10 md:px-8 overflow-hidden">
+      {/* Header Tabs */}
+      <div className="mb-10 flex flex-col md:flex-row md:items-center justify-between gap-6 border-b border-white/5 pb-5">
+        <div className="flex items-center gap-3">
+          <span className="h-8 w-2 rounded-full bg-primary shadow-[0_0_20px_rgba(229,9,20,0.6)]" />
+          <h2 className="text-2xl font-black uppercase tracking-tight text-white">
+            Bảng Xếp Hạng
+          </h2>
+        </div>
+        
+        {/* Premium Tab Buttons */}
+        <div className="flex flex-wrap gap-2 bg-white/5 p-1 rounded-2xl border border-white/5 backdrop-blur-md self-start md:self-auto">
+          {[
+            { id: 'series', name: 'Top Phim Bộ', icon: 'fa-fire' },
+            { id: 'rated', name: 'Đánh Giá Cao', icon: 'fa-star' },
+            { id: 'favorited', name: 'Yêu Thích Nhất', icon: 'fa-heart' }
+          ].map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-2 px-5 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all duration-300 cursor-pointer ${
+                activeTab === tab.id
+                  ? 'bg-primary text-white shadow-[0_0_20px_rgba(229,9,20,0.3)] scale-[1.02]'
+                  : 'text-gray-400 hover:text-white hover:bg-white/5'
+              }`}
+            >
+              <i className={`fas ${tab.icon} text-[9px] ${activeTab === tab.id ? 'text-white' : 'text-gray-500'}`}></i>
+              {tab.name}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Row có scroll ngang */}
+      <div className="relative group/section">
+        {/* Nút trái */}
+        {showLeft && (
+          <button
+            onClick={() => scroll(-1)}
+            className="absolute left-1 top-[42%] z-40 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full bg-black/80 text-white backdrop-blur-sm opacity-0 transition-all duration-300 group-hover/section:opacity-100 hover:bg-primary border border-white/10 shadow-lg cursor-pointer"
+          >
+            <ChevronLeft size={20} />
+          </button>
+        )}
+
+        {/* Nút phải */}
+        {showRight && (
+          <button
+            onClick={() => scroll(1)}
+            className="absolute right-1 top-[42%] z-40 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full bg-black/80 text-white backdrop-blur-sm opacity-0 transition-all duration-300 group-hover/section:opacity-100 hover:bg-primary border border-white/10 shadow-lg cursor-pointer"
+          >
+            <ChevronRight size={20} />
+          </button>
+        )}
+
+        {/* Track */}
+        <div
+          ref={scrollRef}
+          onScroll={handleScroll}
+          className="scrollbar-hide flex overflow-x-auto pb-16 pt-2 px-4 md:px-8 gap-6 md:gap-8"
+        >
+          {movies.slice(0, 10).map((movie, idx) => (
+            <div
+              key={`${movie._id || movie.slug}-${activeTab}-${idx}`}
+              className="w-[180px] md:w-[240px] flex-shrink-0"
+            >
+              <TopTenCard movie={movie} index={idx} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/AdminLayout.astro

@@ -0,0 +1,463 @@
+---
+import '../styles/global.css';
+import { ClientRouter } from 'astro:transitions';
+
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+
+// Mock admin check - in real app, check role from cookie/session
+const token = Astro.cookies.get('auth_token')?.value;
+let user = null;
+if (token) {
+  try {
+    user = JSON.parse(Buffer.from(token, 'base64').toString('utf-8'));
+  } catch(e) {}
+}
+
+let forceRedirect = false;
+if (!user || user.role !== 'admin') {
+  forceRedirect = true;
+}
+
+const sidebarLinks = [
+  { href: '/admin', label: 'Tổng quan', icon: 'fas fa-chart-line' },
+  { href: '/admin/duyet-zalo', label: 'Duyệt Zalo', icon: 'fas fa-user-check', badgeId: 'nav-badge-zalo' },
+  { href: '/admin/bao-cao-loi', label: 'Báo cáo lỗi', icon: 'fas fa-exclamation-triangle', badgeId: 'nav-badge-loi' },
+  { href: '/admin/phim', label: 'Quản lý phim', icon: 'fas fa-film' },
+  { href: '/admin/crawl', label: 'Thu thập phim', icon: 'fas fa-spider' },
+  { href: '/admin/crawl-nang-cao', label: 'Cào nâng cao', icon: 'fas fa-search-plus' },
+  { href: '/admin/server', label: 'Quản lý Server', icon: 'fas fa-server' },
+  { href: '/admin/the-loai', label: 'Thể loại', icon: 'fas fa-tags' },
+  { href: '/admin/quoc-gia', label: 'Quốc gia', icon: 'fas fa-globe' },
+  { href: '/admin/dien-vien', label: 'Diễn viên', icon: 'fas fa-user-friends' },
+  { href: '/admin/nguoi-dung', label: 'Người dùng', icon: 'fas fa-users' },
+  { href: '/admin/binh-luan', label: 'Bình luận', icon: 'fas fa-comments', badgeId: 'nav-badge-comment' },
+  { href: '/admin/email', label: 'Lịch sử Email', icon: 'fas fa-envelope-open-text' },
+  { href: '/admin/cai-dat', label: 'Cài đặt', icon: 'fas fa-cog' },
+];
+---
+
+<!doctype html>
+<html lang="vi">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    {forceRedirect && <meta http-equiv="refresh" content="0;url=/dang-nhap" />}
+    <title>{title} - TPHIMX Admin</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+    
+    <!-- TXA Core Libraries -->
+    <script is:inline src="/lib/txa/txaformat.js" defer></script>
+    <script is:inline src="/lib/txa/txatooltip.js" defer></script>
+    <script is:inline src="/lib/txa/txatoast.js" defer></script>
+    <script is:inline src="/lib/txa/txamodal.js" type="module" defer></script>
+
+    <ClientRouter />
+  </head>
+  <body class="bg-[#0b0c10] text-white selection:bg-primary selection:text-dark overflow-x-hidden w-full max-w-full">
+    {forceRedirect ? (
+      <div class="fixed inset-0 z-[10000] flex flex-col items-center justify-center bg-[#0b0c10]">
+        <div class="w-10 h-10 rounded-full border-4 border-white/5 border-t-primary animate-spin shadow-[0_0_30px_rgba(124,58,237,0.4)] mb-4"></div>
+        <p class="text-xs font-black uppercase tracking-widest text-primary animate-pulse">Vui lòng đăng nhập...</p>
+      </div>
+    ) : (
+      <>
+        <!-- Premium Cinematic Splash Loading Screen -->
+    <div id="txa-splash-loader" class="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-[#0b0c10] transition-all duration-700">
+      <!-- Glowing aura behind logo -->
+      <div class="absolute w-[400px] h-[400px] bg-primary/10 rounded-full blur-[120px] animate-pulse"></div>
+      
+      <div class="relative flex flex-col items-center gap-6 scale-95 animate-fade-in">
+        <!-- Spinning Outer Ring -->
+        <div class="relative flex items-center justify-center">
+          <div class="w-24 h-24 rounded-full border-4 border-white/5 border-t-primary animate-spin shadow-[0_0_30px_rgba(124,58,237,0.4)]"></div>
+          <!-- Logo Icon inside -->
+          <div class="absolute w-14 h-14 overflow-hidden rounded-2xl shadow-lg">
+            <img src="/logo-icon.png" class="h-full w-full object-cover" />
+          </div>
+        </div>
+        
+        <!-- Branding & Subtext -->
+        <div class="flex flex-col items-center">
+          <div class="text-3xl font-black tracking-tighter text-white animate-pulse">
+            T<span class="text-primary">PHIM</span>X
+          </div>
+          <div class="mt-2 text-[10px] font-black uppercase tracking-[0.2em] text-gray-500">
+            Hệ thống Quản trị Cao cấp
+          </div>
+        </div>
+        
+        <!-- Premium Horizontal Progress Bar -->
+        <div class="w-48 h-1 bg-white/5 rounded-full overflow-hidden border border-white/5">
+          <div class="h-full bg-gradient-to-r from-primary to-violet-400 w-1/3 rounded-full animate-progress-loading"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex min-h-screen w-full max-w-full overflow-x-hidden">
+      <!-- Desktop Sidebar -->
+      <aside class="fixed left-0 top-0 hidden h-screen w-72 border-r border-white/5 bg-dark-light lg:block z-[100]">
+        <div class="flex h-full flex-col p-8">
+          <div class="mb-12 flex items-center gap-4">
+            <div class="h-10 w-10 overflow-hidden rounded-xl shadow-[0_0_20px_var(--primary)]">
+               <img src="/logo-icon.png" class="h-full w-full object-cover" />
+            </div>
+            <div class="text-2xl font-black tracking-tighter">
+               T<span class="text-primary">PHIM</span>X
+            </div>
+          </div>
+
+          <nav class="flex-1 space-y-1.5 overflow-y-auto pr-2 scrollbar-thin">
+            {sidebarLinks.map(link => {
+              const isActive = Astro.url.pathname === link.href || (link.href !== '/admin' && Astro.url.pathname.startsWith(link.href + '/'));
+              return (
+                <a 
+                  href={link.href} 
+                  class={`flex items-center gap-4 rounded-2xl px-6 py-3.5 text-xs font-black uppercase tracking-widest transition-all group ${
+                    isActive 
+                      ? 'bg-primary/15 text-primary border-l-4 border-primary shadow-[0_0_15px_rgba(124,58,237,0.1)]' 
+                      : 'text-gray-500 hover:bg-white/5 hover:text-white active:bg-primary/10'
+                  }`}
+                >
+                  <i class={`${link.icon} text-base ${isActive ? 'text-primary animate-pulse' : 'group-hover:text-primary transition-colors'}`}></i>
+                  <span>{link.label}</span>
+                  {link.badgeId && (
+                    <span 
+                      id={link.badgeId} 
+                      class={`hidden ml-auto px-2 py-0.5 rounded-full text-[9px] font-black text-white min-w-[18px] text-center animate-pulse ${
+                        link.badgeId === 'nav-badge-loi' ? 'bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.4)]' : 
+                        link.badgeId === 'nav-badge-comment' ? 'bg-amber-500 shadow-[0_0_10px_rgba(245,158,11,0.4)]' : 
+                        'bg-primary shadow-[0_0_10px_rgba(124,58,237,0.4)]'
+                      }`}
+                    >
+                      0
+                    </span>
+                  )}
+                </a>
+              );
+            })}
+          </nav>
+
+          <div class="mt-auto pt-6 border-t border-white/5">
+             <div class="flex items-center gap-4">
+                 {user?.avatar_url ? (
+                    <div class="h-10 w-10 overflow-hidden rounded-full shrink-0 shadow-lg">
+                       <img src={user.avatar_url} class="h-full w-full object-cover" />
+                    </div>
+                 ) : (
+                    <div class="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-dark font-black shrink-0">
+                       {user?.username?.[0]?.toUpperCase() || 'A'}
+                    </div>
+                 )}
+                 <div class="flex flex-col">
+                    <span class="text-sm font-bold text-white">{user?.username || 'Admin'}</span>
+                    <span class="text-[10px] font-black uppercase tracking-widest text-gray-500">Quản trị viên</span>
+                 </div>
+                 <a href="/" class="ml-auto text-gray-500 hover:text-red-500 transition-colors">
+                    <i class="fas fa-sign-out-alt"></i>
+                 </a>
+             </div>
+          </div>
+        </div>
+      </aside>
+
+      <!-- Mobile Top Header -->
+      <header class="fixed top-0 left-0 right-0 z-[90] flex h-16 items-center justify-between border-b border-white/5 bg-[#12141d]/80 px-6 backdrop-blur-xl lg:hidden">
+        <div class="flex items-center gap-3">
+          <div class="h-8 w-8 overflow-hidden rounded-lg shadow-[0_0_15px_rgba(124,58,237,0.5)]">
+             <img src="/logo-icon.png" class="h-full w-full object-cover" />
+          </div>
+          <span class="text-lg font-black tracking-tighter text-white">T<span class="text-primary">PHIM</span>X</span>
+        </div>
+        <button id="mobile-menu-trigger" class="h-10 w-10 rounded-xl bg-white/5 flex items-center justify-center text-gray-400 hover:text-white border border-white/5 active:scale-95 transition-all">
+          <i class="fas fa-bars"></i>
+        </button>
+      </header>
+
+      <!-- Mobile Slide-out Drawer -->
+      <div id="mobile-drawer" class="fixed inset-0 z-[200] hidden bg-black/60 opacity-0 backdrop-blur-md transition-all duration-300 pointer-events-none">
+        <div class="absolute inset-y-0 right-0 w-[280px] bg-[#12141d] border-l border-white/5 p-8 flex flex-col justify-between transform translate-x-full transition-transform duration-300 pointer-events-auto overflow-y-auto scrollbar-thin">
+          <div>
+            <div class="flex items-center justify-between mb-12">
+              <div class="flex items-center gap-3">
+                <div class="h-8 w-8 overflow-hidden rounded-lg shadow-[0_0_15px_rgba(124,58,237,0.5)]">
+                   <img src="/logo-icon.png" class="h-full w-full object-cover" />
+                </div>
+                <span class="text-lg font-black tracking-tighter text-white">T<span class="text-primary">PHIM</span>X</span>
+              </div>
+              <button id="mobile-menu-close" class="h-8 w-8 rounded-lg bg-white/5 flex items-center justify-center text-gray-400 hover:text-white border border-white/5">
+                <i class="fas fa-times text-sm"></i>
+              </button>
+            </div>
+
+            <nav class="space-y-1.5 pr-1">
+              {sidebarLinks.map(link => {
+                const isActive = Astro.url.pathname === link.href || (link.href !== '/admin' && Astro.url.pathname.startsWith(link.href + '/'));
+                return (
+                  <a 
+                    href={link.href} 
+                    class={`flex items-center gap-4 rounded-xl px-5 py-3.5 text-xs font-black uppercase tracking-widest transition-all group ${
+                      isActive 
+                        ? 'bg-primary/15 text-primary border-l-4 border-primary shadow-[0_0_15px_rgba(124,58,237,0.1)]' 
+                        : 'text-gray-500 hover:bg-white/5 hover:text-white active:bg-primary/10'
+                    }`}
+                  >
+                    <i class={`${link.icon} text-base ${isActive ? 'text-primary' : 'group-hover:text-primary transition-colors'}`}></i>
+                    <span>{link.label}</span>
+                    {link.badgeId && (
+                      <span 
+                        id={`${link.badgeId}-mobile`} 
+                        class={`hidden ml-auto px-2 py-0.5 rounded-full text-[9px] font-black text-white min-w-[18px] text-center animate-pulse ${
+                          link.badgeId === 'nav-badge-loi' ? 'bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.4)]' : 
+                          link.badgeId === 'nav-badge-comment' ? 'bg-amber-500 shadow-[0_0_10px_rgba(245,158,11,0.4)]' : 
+                          'bg-primary shadow-[0_0_10px_rgba(124,58,237,0.4)]'
+                        }`}
+                      >
+                        0
+                      </span>
+                    )}
+                  </a>
+                );
+              })}
+            </nav>
+          </div>
+
+          <div class="pt-8 border-t border-white/5">
+             <div class="flex items-center gap-4">
+                {user?.avatar_url ? (
+                   <div class="h-10 w-10 overflow-hidden rounded-full shrink-0 shadow-lg">
+                      <img src={user.avatar_url} class="h-full w-full object-cover" />
+                   </div>
+                ) : (
+                   <div class="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-dark font-black shrink-0">
+                      {user?.username?.[0]?.toUpperCase() || 'A'}
+                   </div>
+                )}
+                <div class="flex flex-col">
+                   <span class="text-sm font-bold text-white">{user?.username || 'Admin'}</span>
+                   <span class="text-[10px] font-black uppercase tracking-widest text-gray-500">Quản trị viên</span>
+                </div>
+                <a href="/" class="ml-auto text-gray-500 hover:text-red-500 transition-colors">
+                   <i class="fas fa-sign-out-alt"></i>
+                </a>
+             </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Main Content -->
+      <main class="flex-1 lg:ml-72 p-4 sm:p-6 pt-24 pb-24 lg:p-12 lg:pt-12 overflow-x-hidden max-w-full">
+        <slot />
+      </main>
+    </div>
+      </>
+    )}
+  </body>
+</html>
+
+<script>
+  // Hide splash loader on initial load with a smooth buffer delay
+  const hideInitialSplash = () => {
+    const splash = document.getElementById('txa-splash-loader');
+    if (splash) {
+      setTimeout(() => {
+        splash.style.opacity = '0';
+        splash.style.pointerEvents = 'none';
+        setTimeout(() => {
+          splash.style.display = 'none';
+        }, 700);
+      }, 450); // 450ms buffer delay to let admin panels mount seamlessly
+    }
+  };
+
+  if (document.readyState === 'complete') {
+    hideInitialSplash();
+  } else {
+    window.addEventListener('load', () => {
+      setTimeout(hideInitialSplash, 150);
+    });
+  }
+
+  // Handle transition page load
+  document.addEventListener('astro:before-preparation', () => {
+    const splash = document.getElementById('txa-splash-loader');
+    if (splash) {
+      splash.style.display = 'flex';
+      void splash.offsetWidth;
+      splash.style.opacity = '1';
+      splash.style.pointerEvents = 'auto';
+    }
+  });
+
+  document.addEventListener('astro:page-load', () => {
+    // Hide splash loader on navigation complete
+    hideInitialSplash();
+
+    if ((window as any).initTxaTooltips) (window as any).initTxaTooltips();
+
+    // Mobile Drawer Logic
+    const trigger = document.getElementById('mobile-menu-trigger');
+    const closeBtn = document.getElementById('mobile-menu-close');
+    const drawer = document.getElementById('mobile-drawer');
+    const panel = drawer?.querySelector('.pointer-events-auto');
+
+    const openDrawer = () => {
+      if (drawer && panel) {
+        drawer.classList.remove('hidden');
+        // Force reflow
+        void drawer.offsetWidth;
+        drawer.classList.add('opacity-100');
+        drawer.classList.remove('pointer-events-none');
+        panel.classList.remove('translate-x-full');
+      }
+    };
+
+    const closeDrawer = () => {
+      if (drawer && panel) {
+        drawer.classList.remove('opacity-100');
+        drawer.classList.add('pointer-events-none');
+        panel.classList.add('translate-x-full');
+        setTimeout(() => {
+          drawer.classList.add('hidden');
+        }, 300);
+      }
+    };
+
+    trigger?.addEventListener('click', openDrawer);
+    closeBtn?.addEventListener('click', closeDrawer);
+    drawer?.addEventListener('click', (e) => {
+      if (e.target === drawer) closeDrawer();
+    });
+
+    // Real-time notifications logic (8 seconds polling)
+    const pollNotifications = async () => {
+      try {
+        const res = await fetch('/api/admin/notifications');
+        if (!res.ok) return;
+        const data = await res.json();
+        if (!data.success) return;
+
+        // 1. Zalo badge
+        const zaloCount = data.pendingZalo;
+        ['nav-badge-zalo', 'nav-badge-zalo-mobile'].forEach(id => {
+          const badge = document.getElementById(id);
+          if (badge) {
+            if (zaloCount > 0) {
+              badge.textContent = zaloCount;
+              badge.classList.remove('hidden');
+            } else {
+              badge.classList.add('hidden');
+            }
+          }
+        });
+
+        // 2. Report badge
+        const reportCount = data.pendingReports;
+        ['nav-badge-loi', 'nav-badge-loi-mobile'].forEach(id => {
+          const badge = document.getElementById(id);
+          if (badge) {
+            if (reportCount > 0) {
+              badge.textContent = reportCount;
+              badge.classList.remove('hidden');
+            } else {
+              badge.classList.add('hidden');
+            }
+          }
+        });
+
+        // 3. Comments badge
+        if (window.location.pathname.startsWith('/admin/binh-luan')) {
+          localStorage.setItem('admin_last_viewed_comments', new Date().toISOString());
+        }
+
+        const lastViewedStr = localStorage.getItem('admin_last_viewed_comments');
+        let newCommentsCount = 0;
+        if (lastViewedStr && data.comments) {
+          const lastViewedTime = new Date(lastViewedStr).getTime();
+          newCommentsCount = data.comments.filter(c => new Date(c.created_at).getTime() > lastViewedTime).length;
+        } else if (data.comments) {
+          const last24h = Date.now() - 24 * 60 * 60 * 1000;
+          newCommentsCount = data.comments.filter(c => new Date(c.created_at).getTime() > last24h).length;
+        }
+
+        ['nav-badge-comment', 'nav-badge-comment-mobile'].forEach(id => {
+          const badge = document.getElementById(id);
+          if (badge) {
+            if (newCommentsCount > 0) {
+              badge.textContent = newCommentsCount;
+              badge.classList.remove('hidden');
+            } else {
+              badge.classList.add('hidden');
+            }
+          }
+        });
+
+        // 4. Comparison and Toast alerts
+        const prevZalo = parseInt(sessionStorage.getItem('prev_pending_zalo') || '0', 10);
+        const prevReports = parseInt(sessionStorage.getItem('prev_pending_reports') || '0', 10);
+        const prevComments = parseInt(sessionStorage.getItem('prev_new_comments') || '0', 10);
+
+        // Make sure toast objects are present
+        if ((window as any).txatoast) {
+          if (zaloCount > prevZalo) {
+            (window as any).txatoast.info(`🔔 Có yêu cầu duyệt Zalo mới đang chờ phê duyệt!`);
+          }
+          if (reportCount > prevReports) {
+            (window as any).txatoast.warning(`⚠️ Có báo cáo lỗi phim mới chưa được xử lý!`);
+          }
+          if (newCommentsCount > prevComments) {
+            (window as any).txatoast.success(`💬 Có bình luận mới của người xem trên trang phim!`);
+          }
+        }
+
+        // Cache counts
+        sessionStorage.setItem('prev_pending_zalo', zaloCount.toString());
+        sessionStorage.setItem('prev_pending_reports', reportCount.toString());
+        sessionStorage.setItem('prev_new_comments', newCommentsCount.toString());
+
+      } catch (err) {
+        console.error('Failed to fetch notifications:', err);
+      }
+    };
+
+    // Expose notification fetcher globally so admin sub-pages can refresh counts immediately after any actions
+    (window as any).txaPollNotifications = pollNotifications;
+
+    // Initial fetch
+    pollNotifications();
+
+    // Clear previous interval if any
+    if ((window as any).txaNotificationInterval) {
+      clearInterval((window as any).txaNotificationInterval);
+    }
+
+    // Set polling interval
+    (window as any).txaNotificationInterval = setInterval(pollNotifications, 8000);
+  });
+</script>
+
+<style>
+  @theme {
+    --color-primary: #7c3aed;
+    --color-dark: #0b0c10;
+    --color-dark-light: #12141d;
+  }
+  @keyframes progress-loading {
+    0% { transform: translateX(-100%); }
+    50% { transform: translateX(100%); }
+    100% { transform: translateX(-100%); }
+  }
+  .animate-progress-loading {
+    animation: progress-loading 2s infinite linear;
+  }
+  @keyframes fade-in {
+    from { opacity: 0; transform: scale(0.9); }
+    to { opacity: 1; transform: scale(1); }
+  }
+  .animate-fade-in {
+    animation: fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+</style>