From 629d5d7d2dd6f1b7d5db319c0741736cef33c30c Mon Sep 17 00:00:00 2001
From: ngthanhvu <nguyenthanhvudvfb@gmail.com>
Date: Thu, 23 Jul 2026 05:50:13 -0400
Subject: [PATCH] feat: add privacy policy, terms of use, FAQ, and contact page
 with relevant content

---
 app/components/AppFooter.vue     | 28 +++++-----
 app/pages/chinh-sach-bao-mat.vue | 50 +++++++++++++++++
 app/pages/dieu-khoan-su-dung.vue | 50 +++++++++++++++++
 app/pages/gioi-thieu.vue         | 56 +++++++++++++++++++
 app/pages/hoi-dap.vue            | 95 ++++++++++++++++++++++++++++++++
 app/pages/index.vue              |  4 +-
 app/pages/lien-he.vue            | 74 +++++++++++++++++++++++++
 7 files changed, 341 insertions(+), 16 deletions(-)
 create mode 100644 app/pages/chinh-sach-bao-mat.vue
 create mode 100644 app/pages/dieu-khoan-su-dung.vue
 create mode 100644 app/pages/gioi-thieu.vue
 create mode 100644 app/pages/hoi-dap.vue
 create mode 100644 app/pages/lien-he.vue

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 506a8af..115a353 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -13,9 +13,11 @@ const socialLinks = [
 ]
 
 const linkGroups = [
-  ['Domain dự phòng', 'Điều khoản sử dụng'],
-  ['Hỏi-Đáp', 'Giới thiệu'],
-  ['Chính sách bảo mật', 'Liên hệ'],
+  ['Điều khoản sử dụng', '/dieu-khoan-su-dung'],
+  ['Chính sách bảo mật', '/chinh-sach-bao-mat'],
+  ['Hỏi-Đáp', '/hoi-dap'],
+  ['Giới thiệu', '/gioi-thieu'],
+  ['Liên hệ', '/lien-he'],
 ]
 </script>
 
@@ -41,17 +43,15 @@ const linkGroups = [
         </div>
       </div>
 
-      <div class="mt-10 grid gap-8 text-sm font-bold sm:grid-cols-3 lg:max-w-3xl">
-        <div v-for="(group, index) in linkGroups" :key="index" class="space-y-5">
-          <NuxtLink
-            v-for="link in group"
-            :key="link"
-            to="/phim"
-            class="block text-slate-100 transition hover:text-yellow-200"
-          >
-            {{ link }}
-          </NuxtLink>
-        </div>
+      <div class="mt-10 flex flex-wrap gap-x-8 gap-y-5 text-sm font-bold">
+        <NuxtLink
+          v-for="[label, path] in linkGroups"
+          :key="label"
+          :to="path"
+          class="text-slate-100 transition hover:text-yellow-200"
+        >
+          {{ label }}
+        </NuxtLink>
       </div>
 
       <p class="mt-10 max-w-4xl text-sm leading-7 text-slate-300">
diff --git a/app/pages/chinh-sach-bao-mat.vue b/app/pages/chinh-sach-bao-mat.vue
new file mode 100644
index 0000000..89036aa
--- /dev/null
+++ b/app/pages/chinh-sach-bao-mat.vue
@@ -0,0 +1,50 @@
+<template>
+  <main class="min-h-screen bg-[#0f111a] text-white">
+    <AppHeader />
+
+    <section class="mx-auto max-w-[800px] px-4 pt-24 pb-16 sm:px-6 lg:px-8 xl:px-10">
+      <h1 class="text-3xl font-black text-white mb-6">Chính sách bảo mật</h1>
+
+      <div class="space-y-6 text-sm text-slate-300 leading-relaxed">
+        <div class="rounded-xl border border-white/10 bg-[#191b24] p-6">
+          <h2 class="text-lg font-bold text-white mb-3">1. Thu thập thông tin</h2>
+          <p>
+            CineK chỉ thu thập các thông tin cần thiết để cung cấp dịch vụ: email khi đăng ký tài khoản, lịch sử xem để lưu tiến trình, và danh sách phim yêu thích. Chúng tôi không thu thập thông tin cá nhân nhạy cảm.
+          </p>
+        </div>
+
+        <div class="rounded-xl border border-white/10 bg-[#191b24] p-6">
+          <h2 class="text-lg font-bold text-white mb-3">2. Sử dụng thông tin</h2>
+          <p>
+            Thông tin thu thập được sử dụng để: cung cấp và cải thiện dịch vụ, lưu tiến trình xem, đồng bộ danh sách yêu thích giữa các thiết bị, và gửi thông báo về phim mới (nếu bạn đăng ký).
+          </p>
+        </div>
+
+        <div class="rounded-xl border border-white/10 bg-[#191b24] p-6">
+          <h2 class="text-lg font-bold text-white mb-3">3. Chia sẻ thông tin</h2>
+          <p>
+            CineK không bán, chia sẻ hoặc tiết lộ thông tin cá nhân của bạn cho bên thứ ba, trừ khi có yêu cầu từ cơ quan pháp luật có thẩm quyền.
+          </p>
+        </div>
+
+        <div class="rounded-xl border border-white/10 bg-[#191b24] p-6">
+          <h2 class="text-lg font-bold text-white mb-3">4. Bảo mật dữ liệu</h2>
+          <p>
+            Chúng tôi sử dụng các biện pháp bảo mật tiêu chuẩn để bảo vệ thông tin người dùng, bao gồm mã hóa mật khẩu và kết nối HTTPS.
+          </p>
+        </div>
+
+        <div class="rounded-xl border border-white/10 bg-[#191b24] p-6">
+          <h2 class="text-lg font-bold text-white mb-3">5. Cookie</h2>
+          <p>
+            CineK sử dụng cookie để lưu phiên đăng nhập và tùy chọn người dùng. Bạn có thể tắt cookie trong trình duyệt nhưng một số tính năng có thể không hoạt động đúng.
+          </p>
+        </div>
+
+        <p class="text-slate-500">
+          Cập nhật lần cuối: Tháng 7, 2026. Nếu có thắc mắc, vui lòng <NuxtLink to="/lien-he" class="text-yellow-300 hover:underline">liên hệ chúng tôi</NuxtLink>.
+        </p>
+      </div>
+    </section>
+  </main>
+</template>
diff --git a/app/pages/dieu-khoan-su-dung.vue b/app/pages/dieu-khoan-su-dung.vue
new file mode 100644
index 0000000..e932c35
--- /dev/null
+++ b/app/pages/dieu-khoan-su-dung.vue
@@ -0,0 +1,50 @@
+<template>
+  <main class="min-h-screen bg-[#0f111a] text-white">
+    <AppHeader />
+
+    <section class="mx-auto max-w-[800px] px-4 pt-24 pb-16 sm:px-6 lg:px-8 xl:px-10">
+      <h1 class="text-3xl font-black text-white mb-6">Điều khoản sử dụng</h1>
+
+      <div class="space-y-6 text-sm text-slate-300 leading-relaxed">
+        <div class="rounded-xl border border-white/10 bg-[#191b24] p-6">
+          <h2 class="text-lg font-bold text-white mb-3">1. Dịch vụ</h2>
+          <p>
+            CineK cung cấp nền tảng xem phim trực tuyến miễn phí, tổng hợp nội dung từ nhiều nguồn công khai trên Internet. Chúng tôi không lưu trữ bất kỳ tệp phim nào trên máy chủ.
+          </p>
+        </div>
+
+        <div class="rounded-xl border border-white/10 bg-[#191b24] p-6">
+          <h2 class="text-lg font-bold text-white mb-3">2. Sử dụng hợp pháp</h2>
+          <p>
+            Người dùng chỉ được sử dụng CineK cho mục đích cá nhân, phi thương mại. Không được sao chép, phân phối, hoặc sử dụng nội dung trên CineK cho mục đích thương mại khi chưa được phép.
+          </p>
+        </div>
+
+        <div class="rounded-xl border border-white/10 bg-[#191b24] p-6">
+          <h2 class="text-lg font-bold text-white mb-3">3. Tài khoản</h2>
+          <p>
+            Bạn có trách nhiệm bảo mật tài khoản của mình. CineK có quyền tạm khóa hoặc xóa tài khoản nếu phát hiện hành vi vi phạm điều khoản sử dụng.
+          </p>
+        </div>
+
+        <div class="rounded-xl border border-white/10 bg-[#191b24] p-6">
+          <h2 class="text-lg font-bold text-white mb-3">4. Bản quyền</h2>
+          <p>
+            CineK không sở hữu bản quyền các nội dung phim trên nền tảng. Nếu bạn là chủ sở hữu bản quyền và muốn gỡ nội dung, vui lòng liên hệ chúng tôi.
+          </p>
+        </div>
+
+        <div class="rounded-xl border border-white/10 bg-[#191b24] p-6">
+          <h2 class="text-lg font-bold text-white mb-3">5. Thay đổi điều khoản</h2>
+          <p>
+            CineK có quyền thay đổi điều khoản sử dụng bất cứ lúc nào. Người dùng tiếp tục sử dụng dịch vụ đồng nghĩa với việc chấp nhận các thay đổi đó.
+          </p>
+        </div>
+
+        <p class="text-slate-500">
+          Cập nhật lần cuối: Tháng 7, 2026. Nếu có thắc mắc, vui lòng <NuxtLink to="/lien-he" class="text-yellow-300 hover:underline">liên hệ chúng tôi</NuxtLink>.
+        </p>
+      </div>
+    </section>
+  </main>
+</template>
diff --git a/app/pages/gioi-thieu.vue b/app/pages/gioi-thieu.vue
new file mode 100644
index 0000000..adfbd75
--- /dev/null
+++ b/app/pages/gioi-thieu.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { Film, Globe2, Heart, Play, Shield, Zap } from 'lucide-vue-next'
+
+const features = [
+  { icon: Play, title: 'Kho phim khổng lồ', desc: 'Tổng hợp phim Hàn Quốc từ nhiều nguồn, cập nhật liên tục mỗi ngày.' },
+  { icon: Shield, title: 'Miễn phí 100%', desc: 'Xem phim hoàn toàn miễn phí, không cần trả bất kỳ khoản phí nào.' },
+  { icon: Zap, title: 'Tốc độ nhanh', desc: 'Trình phát video mượt mà, hỗ trợ đa server, không quảng cáo xâm phạm.' },
+  { icon: Heart, title: 'Lưu tiến trình', desc: 'Tự động lưu tiến trình xem, danh sách yêu thích đồng bộ giữa các thiết bị.' },
+  { icon: Globe2, title: 'Đa ngôn ngữ', desc: 'Hỗ trợ Vietsub, thuyết minh, lồng tiếng cho đa số phim.' },
+  { icon: Film, title: 'Chất lượng cao', desc: 'Phim HD, Full HD, chất lượng hình ảnh và âm thanh tốt nhất.' },
+]
+</script>
+
+<template>
+  <main class="min-h-screen bg-[#0f111a] text-white">
+    <AppHeader />
+
+    <section class="mx-auto max-w-[1000px] px-4 pt-24 pb-16 sm:px-6 lg:px-8 xl:px-10">
+      <!-- Hero -->
+      <div class="text-center mb-12">
+        <h1 class="text-3xl sm:text-5xl font-black text-white mb-4">Giới thiệu về CineK</h1>
+        <p class="text-lg text-slate-400 max-w-2xl mx-auto">
+          CineK - Nền tảng xem phim Hàn Quốc online chất lượng cao, miễn phí, trải nghiệm mượt mà trên mọi thiết bị.
+        </p>
+      </div>
+
+      <!-- Features -->
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+        <div v-for="f in features" :key="f.title"
+          class="rounded-xl border border-white/10 bg-[#191b24] p-6 transition hover:border-white/20">
+          <div class="grid size-12 place-items-center rounded-xl bg-yellow-400/10 text-yellow-400 mb-4">
+            <component :is="f.icon" class="size-6" />
+          </div>
+          <h3 class="text-lg font-bold text-white mb-2">{{ f.title }}</h3>
+          <p class="text-sm text-slate-400 leading-relaxed">{{ f.desc }}</p>
+        </div>
+      </div>
+
+      <!-- About -->
+      <div class="rounded-xl border border-white/10 bg-[#191b24] p-6 sm:p-8">
+        <h2 class="text-2xl font-bold text-white mb-4">Về CineK</h2>
+        <div class="space-y-4 text-sm text-slate-300 leading-relaxed">
+          <p>
+            CineK được xây dựng dành riêng cho khán giả Việt Nam yêu thích phim Hàn Quốc. Chúng tôi tổng hợp phim từ nhiều nguồn khác nhau và cung cấp giao diện hoàn toàn bằng tiếng Việt, với phụ đề Vietsub và thuyết minh chất lượng cao.
+          </p>
+          <p>
+            CineK không lưu trữ bất kỳ tệp phim nào trên máy chủ. Chúng tôi chỉ nhúng và hiển thị nội dung từ các nguồn công khai trên Internet.
+          </p>
+          <p>
+            Với giao diện đẹp mắt, tốc độ tải nhanh và các tính năng hiện đại như lưu tiến trình xem, danh sách yêu thích, CineK mang đến trải nghiệm xem phim tốt nhất cho người dùng Việt Nam.
+          </p>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
diff --git a/app/pages/hoi-dap.vue b/app/pages/hoi-dap.vue
new file mode 100644
index 0000000..2537410
--- /dev/null
+++ b/app/pages/hoi-dap.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ChevronDown } from 'lucide-vue-next'
+
+const faqs = [
+  {
+    category: 'Tổng quan',
+    items: [
+      { q: 'CineK là gì?', a: 'CineK là nền tảng xem phim trực tuyến miễn phí dành cho khán giả yêu thích phim Hàn Quốc. Chúng tôi tổng hợp phim từ nhiều nguồn khác nhau và cung cấp giao diện hoàn toàn bằng tiếng Việt, với phụ đề Vietsub và thuyết minh chất lượng cao.' },
+      { q: 'CineK có miễn phí không?', a: 'Có, hoàn toàn miễn phí. Bạn không cần trả bất kỳ khoản phí nào để xem phim trên CineK.' },
+      { q: 'Tại sao nên chọn CineK?', a: 'CineK được thiết kế riêng cho người dùng Việt Nam với giao diện đẹp mắt, tốc độ tải nhanh, không quảng cáo xâm phạm, và các tính năng hiện đại như lưu tiến trình xem, danh sách yêu thích.' },
+    ],
+  },
+  {
+    category: 'Tài khoản',
+    items: [
+      { q: 'Tôi có cần tạo tài khoản để xem phim không?', a: 'Không bắt buộc. Bạn có thể xem phim ngay mà không cần đăng ký. Tuy nhiên, việc tạo tài khoản sẽ giúp bạn lưu phim yêu thích, đồng bộ tiến trình xem giữa các thiết bị.' },
+      { q: 'Làm sao để tạo tài khoản?', a: 'Nhấn vào biểu tượng người dùng ở góc trên bên phải, chọn "Đăng ký" và điền thông tin email cùng mật khẩu.' },
+      { q: 'Tôi quên mật khẩu, làm sao để lấy lại?', a: 'Tại trang đăng nhập, nhấn "Quên mật khẩu" và nhập email đã đăng ký. Hệ thống sẽ gửi link đặt lại mật khẩu đến email của bạn.' },
+    ],
+  },
+  {
+    category: 'Xem phim',
+    items: [
+      { q: 'Phim có phụ đề tiếng Việt không?', a: 'Đại đa số phim trên CineK đều có phụ đề Vietsub. Một số phim còn có bản thuyết minh hoặc lồng tiếng. Bạn có thể chọn phiên bản phù hợp ngay trên trang xem phim.' },
+      { q: 'Tôi không xem được phim, phải làm sao?', a: 'Hãy thử: (1) Tải lại trang, (2) Kiểm tra kết nối Internet, (3) Thử đổi server trong trình phát video, (4) Xóa bộ nhớ đệm trình duyệt. Nếu vẫn không được, nhấn "Báo lỗi" trên trang xem phim.' },
+      { q: 'Làm sao để xem tiếp phim đang xem dở?', a: 'Nếu bạn đã đăng nhập, hệ thống sẽ tự động lưu tiến trình xem. Khi quay lại, bạn sẽ thấy mục "Tiếp tục xem" ngay trên trang chủ.' },
+      { q: 'CineK có hỗ trợ xem trên điện thoại không?', a: 'Có. Giao diện của CineK được tối ưu hoàn toàn cho cả điện thoại, máy tính bảng, laptop và desktop.' },
+    ],
+  },
+  {
+    category: 'Tính năng',
+    items: [
+      { q: 'Làm sao để lưu phim vào danh sách yêu thích?', a: 'Tại trang chi tiết phim, nhấn vào biểu tượng trái tim để thêm phim vào danh sách yêu thích. Bạn có thể xem lại toàn bộ phim đã lưu trong phần Hồ sơ cá nhân.' },
+      { q: 'Tìm kiếm phim hoạt động như thế nào?', a: 'Bạn có thể tìm phim bằng tên, diễn viên hoặc từ khóa. Ngoài ra, hệ thống hỗ trợ lọc nâng cao theo quốc gia, thể loại, năm sản xuất.' },
+      { q: 'Làm sao để báo lỗi phim?', a: 'Tại trang xem phim, nhấn nút "Báo lỗi". Mô tả ngắn gọn lỗi bạn gặp phải. Đội ngũ sẽ kiểm tra và xử lý trong thời gian sớm nhất.' },
+    ],
+  },
+]
+
+const openItems = ref<Record<string, boolean>>({})
+
+function toggle(category: string, index: number) {
+  const key = `${category}-${index}`
+  openItems.value[key] = !openItems.value[key]
+}
+</script>
+
+<template>
+  <main class="min-h-screen bg-[#0f111a] text-white">
+    <AppHeader />
+
+    <section class="mx-auto max-w-[800px] px-4 pt-24 pb-16 sm:px-6 lg:px-8 xl:px-10">
+      <div class="mb-8">
+        <h1 class="text-3xl font-black text-white sm:text-4xl">Hỏi & Đáp</h1>
+        <p class="mt-2 text-slate-400">
+          Giải đáp các câu hỏi thường gặp khi sử dụng CineK. Không tìm thấy câu trả lời?
+          <NuxtLink to="/lien-he" class="text-yellow-300 hover:underline">Liên hệ chúng tôi</NuxtLink>.
+        </p>
+      </div>
+
+      <div v-for="section in faqs" :key="section.category" class="mb-8">
+        <h2 class="text-xl font-bold text-white mb-4">{{ section.category }}</h2>
+        <div class="space-y-2">
+          <div v-for="(item, index) in section.items" :key="index"
+            class="rounded-xl border border-white/10 bg-[#191b24] overflow-hidden">
+            <button type="button"
+              class="w-full flex items-center justify-between px-5 py-4 text-left text-sm font-semibold text-white hover:bg-white/5 transition"
+              @click="toggle(section.category, index)">
+              <span>{{ item.q }}</span>
+              <ChevronDown class="size-4 shrink-0 text-slate-400 transition-transform"
+                :class="openItems[`${section.category}-${index}`] ? 'rotate-180' : ''" />
+            </button>
+            <Transition name="faq">
+              <div v-if="openItems[`${section.category}-${index}`]"
+                class="px-5 pb-4 text-sm text-slate-300 leading-relaxed">
+                {{ item.a }}
+              </div>
+            </Transition>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.faq-enter-active,
+.faq-leave-active {
+  transition: opacity 0.2s ease, max-height 0.2s ease;
+}
+.faq-enter-from,
+.faq-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 97280b5..3954102 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -301,10 +301,10 @@ useHead({
   <main class="min-h-screen overflow-hidden bg-black">
     <AppHeader />
 
-    <section v-if="hero" class="relative w-full h-[70vh] sm:h-[80vh] md:h-[85vh] lg:h-[90vh] overflow-hidden">
+    <section v-if="hero" class="relative w-full h-screen overflow-hidden">
       <TransitionGroup name="hero-fade">
         <img v-for="(slide, index) in heroSlides" v-show="index === heroIndex" :key="`${slide.source}-${slide.slug}`"
-          :src="slide.poster || slide.thumb" :alt="slide.name"
+          :src="slide.thumb || slide.poster" :alt="slide.name"
           class="absolute inset-0 h-full w-full object-cover object-top lg:object-[72%_center]">
       </TransitionGroup>
 
diff --git a/app/pages/lien-he.vue b/app/pages/lien-he.vue
new file mode 100644
index 0000000..d9490ca
--- /dev/null
+++ b/app/pages/lien-he.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Mail, MessageCircle, Send } from 'lucide-vue-next'
+
+const contactMethods = [
+  {
+    icon: Send,
+    label: 'Telegram',
+    value: '@cinek_support',
+    link: 'https://telegram.dog/cinek',
+    desc: 'Nhắn tin trực tiếp, phản hồi nhanh nhất.',
+  },
+  {
+    icon: MessageCircle,
+    label: 'Cộng đồng',
+    value: 'Group Facebook CineK',
+    link: '#',
+    desc: 'Tham gia nhóm để trao đổi, chia sẻ phim.',
+  },
+  {
+    icon: Mail,
+    label: 'Email',
+    value: 'support@cinek.app',
+    link: 'mailto:support@cinek.app',
+    desc: 'Gửi email cho các vấn đề cần chi tiết.',
+  },
+]
+</script>
+
+<template>
+  <main class="min-h-screen bg-[#0f111a] text-white">
+    <AppHeader />
+
+    <section class="mx-auto max-w-[700px] px-4 pt-24 pb-16 sm:px-6 lg:px-8 xl:px-10">
+      <div class="mb-8">
+        <h1 class="text-3xl font-black text-white sm:text-4xl">Liên hệ</h1>
+        <p class="mt-2 text-slate-400">
+          Có câu hỏi, góp ý hoặc cần hỗ trợ? Liên hệ với chúng tôi qua các kênh bên dưới.
+        </p>
+      </div>
+
+      <div class="space-y-4 mb-8">
+        <NuxtLink v-for="method in contactMethods" :key="method.label" :to="method.link"
+          class="flex items-start gap-4 rounded-xl border border-white/10 bg-[#191b24] p-5 transition hover:border-white/20 hover:bg-white/5 group">
+          <div class="grid size-12 shrink-0 place-items-center rounded-xl bg-yellow-400/10 text-yellow-400">
+            <component :is="method.icon" class="size-6" />
+          </div>
+          <div>
+            <h3 class="font-bold text-white group-hover:text-yellow-300 transition">{{ method.label }}</h3>
+            <p class="text-sm text-yellow-200/80">{{ method.value }}</p>
+            <p class="text-sm text-slate-400 mt-1">{{ method.desc }}</p>
+          </div>
+        </NuxtLink>
+      </div>
+
+      <div class="rounded-xl border border-white/10 bg-[#191b24] p-6">
+        <h2 class="text-lg font-bold text-white mb-3">Lưu ý</h2>
+        <ul class="space-y-2 text-sm text-slate-300">
+          <li class="flex items-start gap-2">
+            <span class="text-yellow-400 mt-0.5">•</span>
+            <span>Chúng tôi sẽ phản hồi trong vòng 24 giờ.</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <span class="text-yellow-400 mt-0.5">•</span>
+            <span>Vui lòng mô tả rõ vấn đề bạn gặp phải để được hỗ trợ nhanh nhất.</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <span class="text-yellow-400 mt-0.5">•</span>
+            <span>Nếu báo lỗi phim, hãy kèm theo link phim và tập bị lỗi.</span>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </main>
+</template>