nuxt-layer-core 2.0.1

package/app/layers/solution/app/components/CtaSection.vue

@@ -0,0 +1,329 @@
+<template>
+  <section id="lien-he" class="py-24 bg-white border-t border-slate-200">
+    <div class="max-w-7xl mx-auto px-6 lg:px-8">
+      <div class="cta-card bg-[#F7F9FB] rounded-3xl flex flex-col md:flex-row shadow-2xl">
+        <div
+          class="md:w-5/12 bg-gradient-to-br from-[#004AC6] to-[#1D4ED8] p-10 sm:p-12 text-white space-y-8 overflow-hidden rounded-l-3xl">
+          <p class="text-xs font-bold uppercase tracking-widest text-blue-100">Bắt đầu</p>
+          <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl leading-tight">
+            Đặt lịch tư vấn khóa học miễn phí, 30 phút
+          </h3>
+          <p class="text-blue-100/90 leading-relaxed">
+            Gửi thông tin hạ tầng hiện tại và mục tiêu học tập, đội ngũ kỹ thuật của Long Vân
+            sẽ phản hồi và đề xuất khóa học phù hợp trong vòng 24 giờ.
+          </p>
+          <div class="flex items-center gap-4">
+            <div class="w-10 h-10 rounded-[10px] bg-white/10 flex items-center justify-center">
+              <Icon name="lucide:mail" class="text-[18px]" />
+            </div>
+            <span class="text-sm">tuvan@longvan.net</span>
+          </div>
+          <div class="flex items-center gap-4">
+            <div class="w-10 h-10 rounded-[10px] bg-white/10 flex items-center justify-center">
+              <Icon name="lucide:phone" class="text-[18px]" />
+            </div>
+            <span class="text-sm">1800 6070</span>
+          </div>
+        </div>
+
+        <div class="md:w-7/12 p-10 sm:p-12 bg-white rounded-r-3xl">
+          <form class="space-y-5" @submit.prevent="handleSubmit" novalidate>
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <div class="space-y-1.5">
+                <label for="cta-name" class="text-xs font-bold uppercase text-slate-500">
+                  Họ và tên <span class="text-red-500">*</span>
+                </label>
+                <input id="cta-name" v-model.trim="form.name" type="text" @blur="touch('name')"
+                  class="w-full px-4 py-3 border rounded-[10px] outline-none text-sm text-slate-900 transition-all"
+                  :class="errors.name && touched.name ? 'border-red-400 focus:ring-2 focus:ring-red-200 focus:border-red-400' : 'border-slate-300 focus:ring-2 focus:ring-blue-200 focus:border-[#004AC6]'"
+                  placeholder="Nguyễn Văn A" />
+                <p v-if="errors.name && touched.name" class="text-red-500 text-xs mt-1">{{ errors.name }}</p>
+              </div>
+              <div class="space-y-1.5">
+                <label for="cta-phone" class="text-xs font-bold uppercase text-slate-500">
+                  Số điện thoại <span class="text-red-500">*</span>
+                </label>
+                <input id="cta-phone" v-model.trim="form.phone" type="tel" @blur="touch('phone')"
+                  class="w-full px-4 py-3 border rounded-[10px] outline-none text-sm text-slate-900 transition-all"
+                  :class="errors.phone && touched.phone ? 'border-red-400 focus:ring-2 focus:ring-red-200 focus:border-red-400' : 'border-slate-300 focus:ring-2 focus:ring-blue-200 focus:border-[#004AC6]'"
+                  placeholder="0912 345 678" />
+                <p v-if="errors.phone && touched.phone" class="text-red-500 text-xs mt-1">{{ errors.phone }}</p>
+              </div>
+            </div>
+            <div class="space-y-1.5">
+              <label for="cta-email" class="text-xs font-bold uppercase text-slate-500">Email</label>
+              <input id="cta-email" v-model.trim="form.email" type="email" @blur="touch('email')"
+                class="w-full px-4 py-3 border rounded-[10px] outline-none text-sm text-slate-900 transition-all"
+                :class="errors.email && touched.email ? 'border-red-400 focus:ring-2 focus:ring-red-200 focus:border-red-400' : 'border-slate-300 focus:ring-2 focus:ring-blue-200 focus:border-[#004AC6]'"
+                placeholder="ban@congty.com" />
+              <p v-if="errors.email && touched.email" class="text-red-500 text-xs mt-1">{{ errors.email }}</p>
+            </div>
+
+            <!-- Searchable dropdown -->
+            <div class="space-y-1.5" ref="dropdownRef">
+              <label class="text-xs font-bold uppercase text-slate-500">
+                Khóa học quan tâm <span class="text-red-500">*</span>
+              </label>
+              <div class="relative">
+                <div @click="toggleDropdown"
+                  class="w-full px-4 py-3 border rounded-[10px] text-sm text-slate-900 cursor-pointer flex items-center justify-between transition-all"
+                  :class="[
+                    dropdownOpen ? 'border-[#004AC6] ring-2 ring-blue-200' : 'border-slate-300',
+                    errors.course && touched.course ? 'border-red-400' : ''
+                  ]">
+                  <span :class="selectedCourse ? 'text-slate-900' : 'text-slate-400'">
+                    {{ selectedCourse ? selectedCourse.name : 'Chọn khóa học...' }}
+                  </span>
+                  <Icon name="lucide:chevron-down" class="text-[16px] text-slate-400 transition-transform"
+                    :class="dropdownOpen ? 'rotate-180' : ''" />
+                </div>
+
+                <Transition enter-active-class="transition ease-out duration-150"
+                  enter-from-class="opacity-0 -translate-y-1" enter-to-class="opacity-100 translate-y-0"
+                  leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100 translate-y-0"
+                  leave-to-class="opacity-0 -translate-y-1">
+                  <div v-if="dropdownOpen"
+                    class="absolute z-50 mt-1 w-full bg-white border border-slate-200 rounded-[10px] shadow-lg overflow-hidden">
+                    <div class="p-2 border-b border-slate-100">
+                      <div class="relative">
+                        <Icon name="lucide:search"
+                          class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[14px]" />
+                        <input ref="searchInput" v-model="searchQuery" type="text" placeholder="Tìm khóa học..."
+                          class="w-full pl-9 pr-3 py-2 text-sm border border-slate-200 rounded-md outline-none focus:border-[#004AC6] focus:ring-1 focus:ring-blue-200"
+                          @click.stop />
+                      </div>
+                    </div>
+                    <div class="max-h-56 overflow-y-auto">
+                      <div v-for="plan in filteredCourses" :key="plan.id" @click="selectCourse(plan)"
+                        class="px-4 py-3 text-sm cursor-pointer flex items-center gap-3 transition-colors"
+                        :class="selectedCourse?.id === plan.id ? 'bg-blue-50 text-[#004AC6]' : 'hover:bg-slate-50 text-slate-700'">
+                        <Icon :name="plan.icon" class="text-[16px] shrink-0"
+                          :class="selectedCourse?.id === plan.id ? 'text-[#004AC6]' : 'text-slate-400'" />
+                        <div class="flex-1 min-w-0">
+                          <p class="font-medium truncate">{{ plan.name }}</p>
+                          <p class="text-xs text-slate-400 truncate">{{ formatLevel(plan.level) }} · {{ plan.duration }}
+                          </p>
+                        </div>
+                        <Icon v-if="selectedCourse?.id === plan.id" name="lucide:check"
+                          class="text-[16px] text-[#004AC6] shrink-0" />
+                      </div>
+                      <div v-if="filteredCourses.length === 0" class="px-4 py-6 text-center text-sm text-slate-400">
+                        Không tìm thấy khóa học
+                      </div>
+                    </div>
+                  </div>
+                </Transition>
+              </div>
+              <p v-if="errors.course && touched.course" class="text-red-500 text-xs mt-1">{{ errors.course }}</p>
+            </div>
+
+            <button type="submit" :disabled="submitting"
+              class="w-full bg-[#004AC6] text-white py-3.5 rounded-[10px] font-bold flex items-center justify-center gap-2 hover:bg-[#1D4ED8] transition-all shadow-lg active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed">
+              <template v-if="submitting">
+                <span class="w-4 h-4 border-2 border-white/30 border-t-white rounded-[10px] animate-spin"></span>
+                Đang gửi...
+              </template>
+              <template v-else>
+                Gửi yêu cầu tư vấn
+                <Icon name="lucide:send" class="text-[18px]" />
+              </template>
+            </button>
+
+            <Transition enter-active-class="transition ease-out duration-300" enter-from-class="opacity-0 translate-y-2"
+              enter-to-class="opacity-100 translate-y-0">
+              <div v-if="submitSuccess"
+                class="flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-[10px] text-green-700 text-sm">
+                <Icon name="lucide:check-circle" class="text-[18px] text-green-500 shrink-0" />
+                Gửi yêu cầu tư vấn thành công! Chúng tôi sẽ liên hệ bạn trong 24 giờ.
+              </div>
+            </Transition>
+          </form>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+useScrollAnimate('.cta-card', 'scale-up')
+
+const props = defineProps({
+  plans: { type: Object, default: null },
+  selectedPlanId: { type: String, default: null },
+})
+
+const { addOpportunity } = useCrmApi()
+
+// Format plans from resumeData (same logic as CoursesSection)
+const samplePlans = [
+  { id: 'sample-1', name: 'Deployment & Management', icon: 'lucide:graduation-cap', level: 'Nền tảng', duration: '14 giờ' },
+  { id: 'sample-2', name: 'Clustering & Shared Storage', icon: 'lucide:network', level: 'Chuyên sâu', duration: '14 giờ' },
+  { id: 'sample-3', name: 'Proxmox VE Bundle', icon: 'lucide:package', level: 'Trọn gói', duration: '28 giờ' },
+]
+
+function formatLevel(level) {
+  const labels = {
+    basic: 'Cơ bản',
+    advanced: 'Nâng cao',
+    expert: 'Chuyên gia',
+  }
+
+  return labels[level || ''] || level || ''
+}
+
+const formatPlans = (resumeData) => {
+  const fieldResumes = resumeData?.fieldResumes || []
+  return fieldResumes
+    ?.filter((group) => group?.type === 'FIELD_GROUP' && Array.isArray(group?.children))
+    ?.map((group, index) => {
+      const fields = Object.fromEntries(
+        group.children?.map((field) => [field?.fieldName?.split('@')?.pop(), field?.value]) || []
+      )
+      return {
+        id: fields.productid || group.fieldName,
+        name: fields.title || '',
+        level: fields.level || '',
+        duration: fields.time || '',
+        icon: fields.icon || 'lucide:server',
+      }
+    }) || []
+}
+
+const formattedPlans = computed(() => {
+  const result = formatPlans(props.plans)
+  return result.length > 0 ? result : samplePlans
+})
+
+// Form state
+const form = reactive({ name: '', phone: '', email: '' })
+const errors = reactive({ name: '', phone: '', email: '', course: '' })
+const touched = reactive({ name: false, phone: false, email: false, course: false })
+const submitting = ref(false)
+const submitSuccess = ref(false)
+
+// Dropdown state
+const dropdownOpen = ref(false)
+const searchQuery = ref('')
+const selectedCourse = ref(null)
+const dropdownRef = ref(null)
+const searchInput = ref(null)
+
+// Auto-select when selectedPlanId changes
+watch(() => props.selectedPlanId, (id) => {
+  if (!id) return
+  const found = formattedPlans.value.find(p => p.id === id)
+  if (found) {
+    selectedCourse.value = found
+    touched.course = true
+    errors.course = ''
+  }
+}, { immediate: true })
+
+// Search filter
+const filteredCourses = computed(() => {
+  if (!searchQuery.value) return formattedPlans.value
+  const q = searchQuery.value.toLowerCase()
+  return formattedPlans.value.filter(p =>
+    p.name.toLowerCase().includes(q) || p.level.toLowerCase().includes(q)
+  )
+})
+
+function toggleDropdown() {
+  dropdownOpen.value = !dropdownOpen.value
+  if (dropdownOpen.value) {
+    nextTick(() => searchInput.value?.focus())
+  }
+}
+
+function selectCourse(plan) {
+  selectedCourse.value = plan
+  errors.course = ''
+  dropdownOpen.value = false
+  searchQuery.value = ''
+}
+
+// Close dropdown on outside click
+function onClickOutside(e) {
+  if (dropdownRef.value && !dropdownRef.value.contains(e.target)) {
+    dropdownOpen.value = false
+    searchQuery.value = ''
+  }
+}
+
+onMounted(() => document.addEventListener('click', onClickOutside))
+onUnmounted(() => document.removeEventListener('click', onClickOutside))
+
+// Validation
+function touch(field) {
+  touched[field] = true
+  validateField(field)
+}
+
+function validateField(field) {
+  if (field === 'name') {
+    if (!form.name) errors.name = 'Vui lòng nhập họ tên'
+    else if (form.name.length < 2) errors.name = 'Họ tên phải có ít nhất 2 ký tự'
+    else errors.name = ''
+  }
+  if (field === 'phone') {
+    if (!form.phone) errors.phone = 'Vui lòng nhập số điện thoại'
+    else if (!/^(0|\+84)\d{9,10}$/.test(form.phone.replace(/\s/g, ''))) errors.phone = 'Số điện thoại không hợp lệ'
+    else errors.phone = ''
+  }
+  if (field === 'email') {
+    if (form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errors.email = 'Email không hợp lệ'
+    else errors.email = ''
+  }
+  if (field === 'course') {
+    if (!selectedCourse.value) errors.course = 'Vui lòng chọn khóa học'
+    else errors.course = ''
+  }
+}
+
+function validateAll() {
+  ['name', 'phone', 'email', 'course'].forEach(f => { touched[f] = true; validateField(f) })
+  return !errors.name && !errors.phone && !errors.email && !errors.course
+}
+
+// Submit
+async function handleSubmit() {
+  if (!validateAll()) return
+  submitting.value = true
+  submitSuccess.value = false
+
+  try {
+    const hostname = window.location.origin
+
+    const description = [
+      `<strong>Khóa học:</strong> ${selectedCourse.value?.name || ''}`,
+      `<strong>Trình độ:</strong> ${formatLevel(selectedCourse.value?.level)}`,
+      `<strong>Thời lượng:</strong> ${selectedCourse.value?.duration || ''}`,
+      `<strong>Họ và tên:</strong> ${form.name}`,
+      `<strong>Số điện thoại:</strong> ${form.phone}`,
+      `<strong>Email:</strong> ${form.email || 'Không cung cấp'}`,
+    ].join('<br>')
+
+    await addOpportunity({
+      name: `Yêu cầu tư vấn khóa học ${selectedCourse.value.name}`,
+      description: description,
+      referName: form.name,
+      referPhone: form.phone,
+      referEmail: form.email,
+      targetUrl: `${hostname}${window.location.pathname}`,
+      extSource: 'WEBSITE',
+    })
+    submitSuccess.value = true
+    form.name = ''
+    form.phone = ''
+    form.email = ''
+    selectedCourse.value = null
+    Object.keys(touched).forEach(k => touched[k] = false)
+  } catch (err) {
+    console.error('Error submitting consultation:', err)
+    errors.name = 'Gửi yêu cầu thất bại, vui lòng thử lại.'
+    touched.name = true
+  } finally {
+    submitting.value = false
+  }
+}
+</script>

package/app/layers/solution/app/components/FeaturesSection.vue

@@ -0,0 +1,67 @@
+<template>
+  <section id="giai-phap" class="py-24 bg-white">
+    <div class="max-w-7xl mx-auto px-6 lg:px-8">
+      <div class="text-center mb-16">
+        <h2 class="text-[#004AC6] font-bold uppercase tracking-widest text-sm mb-2">Lợi ích khóa học</h2>
+        <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-slate-900 mb-4">
+          Vì sao nên tham gia đào tạo Proxmox VE?
+        </h3>
+        <p class="text-slate-500 max-w-2xl mx-auto">
+          Đầu tư một lần vào đào tạo bài bản không chỉ giúp bạn tối ưu năng lực vận hành, cắt giảm chi phí hạ tầng mà còn tạo bước đệm bứt phá trên con đường sự nghiệp.
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div
+          v-for="(item, i) in features"
+          :key="item.title"
+          :data-delay="i * 100"
+          class="feature-card bg-white p-8 rounded-xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all"
+        >
+          <div class="w-11 h-11 rounded-[10px] bg-blue-50 flex items-center justify-center mb-6 text-[#004AC6]">
+            <Icon :name="item.icon" />
+          </div>
+          <h4 class="font-bold text-lg text-slate-900 mb-3">{{ item.title }}</h4>
+          <p class="text-sm text-slate-500 leading-relaxed">{{ item.desc }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+useScrollAnimate('.feature-card', 'scale-up')
+
+const features = [
+  {
+    icon: 'lucide:server',
+    title: 'Làm chủ toàn diện Proxmox VE',
+    desc: 'Nắm vững trọn vẹn các khái niệm cốt lõi, từ triển khai ảo hóa cơ bản đến quản trị các tính năng cao cấp của nền tảng.'
+  },
+  {
+    icon: 'lucide:award',
+    title: 'Học từ chuyên gia thực chiến',
+    desc: 'Tiếp thu kinh nghiệm vận hành ảo hóa trực tiếp từ đội ngũ giảng viên được chứng nhận, đã xử lý hàng ngàn bài toán hệ thống.'
+  },
+  {
+    icon: 'lucide:monitor-play',
+    title: 'Thực hành Lab môi trường thật',
+    desc: 'Không chỉ học lý thuyết, bạn sẽ trực tiếp thao tác và giải quyết các tình huống giả lập sát với thực tế doanh nghiệp.'
+  },
+  {
+    icon: 'lucide:activity',
+    title: 'Troubleshooting thần tốc',
+    desc: 'Trang bị kỹ năng nhận diện "bệnh" hệ thống nhạy bén, giúp bạn xử lý sự cố chính xác và dứt điểm hơn bao giờ hết.'
+  },
+  {
+    icon: 'lucide:trending-up',
+    title: 'Thăng tiến & Khẳng định vị thế',
+    desc: 'Nâng tầm giá trị bản thân, tạo dựng sự tín nhiệm tuyệt đối với cấp trên, đồng nghiệp và đối tác nhờ năng lực chuyên môn vượt trội.'
+  },
+  {
+    icon: 'lucide:file-badge',
+    title: 'Chứng nhận chính quy',
+    desc: 'Nhận chứng chỉ hoàn thành khóa học danh giá, minh chứng rõ nét cho năng lực thực sự và sự đầu tư nghiêm túc của bạn.'
+  }
+]
+</script>

package/app/layers/solution/app/components/HeroSection.vue

@@ -0,0 +1,144 @@
+<template>
+  <section id="#" class="relative">
+    <!-- Hero -->
+    <div class="bg-gradient-to-br from-[#004AC6] to-[#1D4ED8] text-white pt-40 pb-24 overflow-hidden relative">
+      <!-- Dot grid pattern -->
+      <div class="absolute inset-0 opacity-[0.06]"
+        style="background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 24px 24px;"></div>
+
+      <!-- Cluster nodes decoration -->
+      <svg class="absolute inset-0 w-full h-full opacity-[0.08]" xmlns="http://www.w3.org/2000/svg">
+        <!-- Connection lines -->
+        <line x1="15%" y1="25%" x2="35%" y2="45%" stroke="white" stroke-width="1" />
+        <line x1="35%" y1="45%" x2="25%" y2="70%" stroke="white" stroke-width="1" />
+        <line x1="35%" y1="45%" x2="55%" y2="35%" stroke="white" stroke-width="1" />
+        <line x1="55%" y1="35%" x2="75%" y2="55%" stroke="white" stroke-width="1" />
+        <line x1="75%" y1="55%" x2="85%" y2="30%" stroke="white" stroke-width="1" />
+        <line x1="75%" y1="55%" x2="65%" y2="75%" stroke="white" stroke-width="1" />
+        <!-- Nodes -->
+        <circle cx="15%" cy="25%" r="4" fill="white" />
+        <circle cx="35%" cy="45%" r="5" fill="white" />
+        <circle cx="25%" cy="70%" r="3.5" fill="white" />
+        <circle cx="55%" cy="35%" r="4.5" fill="white" />
+        <circle cx="75%" cy="55%" r="5" fill="white" />
+        <circle cx="85%" cy="30%" r="3.5" fill="white" />
+        <circle cx="65%" cy="75%" r="4" fill="white" />
+        <!-- Pulse rings -->
+        <circle cx="35%" cy="45%" r="12" fill="none" stroke="white" stroke-width="0.5" class="hero-pulse" />
+        <circle cx="75%" cy="55%" r="14" fill="none" stroke="white" stroke-width="0.5" class="hero-pulse"
+          style="animation-delay: 1.5s" />
+      </svg>
+
+      <div class="max-w-7xl mx-auto px-6 lg:px-8 grid lg:grid-cols-2 gap-14 items-center relative z-10">
+        <!-- Left -->
+        <div>
+          <div
+            class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md px-4 py-2 rounded-[10px] border border-white/20 mb-6">
+            <Icon name="lucide:headset" class="text-[16px]" />
+            <span class="text-xs font-bold uppercase tracking-widest">
+              Tư vấn miễn phí · Đào tạo Proxmox Virtual Environment
+            </span>
+          </div>
+
+          <h1 class="font-['Montserrat'] font-extrabold text-2xl sm:text-[2rem] leading-[1.15] mb-6">
+            Chưa biết nên học khóa nào?<br />
+            Được tư vấn đúng lộ trình trong 15 phút.
+          </h1>
+
+          <p class="text-blue-100/90 text-lg leading-relaxed mb-8 max-w-xl">
+            Đội ngũ kỹ sư hạ tầng của Long Vân sẽ đánh giá năng lực hiện tại và
+            mục tiêu công việc của bạn, từ đó đề xuất khóa học Proxmox, Ceph hoặc
+            DevOps phù hợp nhất — thay vì để bạn tự đoán.
+          </p>
+
+          <div class="flex flex-wrap gap-4">
+            <NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')"
+              class="bg-white text-[#004AC6] px-7 py-3.5 rounded-[10px] font-bold flex items-center gap-2 hover:bg-blue-50 transition-colors shadow-lg active:scale-95">
+              Đặt lịch tư vấn miễn phí
+              <Icon name="lucide:arrow-right" class="text-[18px]" />
+            </NuxtLink>
+
+            <NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')"
+              class="bg-transparent border border-white/40 text-white px-7 py-3.5 rounded-[10px] font-bold hover:bg-white/10 transition-colors">
+              Xem danh sách khóa học
+            </NuxtLink>
+          </div>
+        </div>
+
+        <!-- Right -->
+        <div class="relative flex justify-center">
+          <div class="relative z-10 rounded-2xl overflow-hidden">
+            <!-- <NuxtImg src="/images/image_from_https_hercules_cdn.com_file_6dztkvkfnip0ud23tzzvu57c.png"
+              alt="Long Vân Proxmox Infrastructure" class="w-full h-full object-contain p-4" /> -->
+            <img src="/images/image_from_https_hercules_cdn.com_file_6dztkvkfnip0ud23tzzvu57c.png"
+              alt="Long Vân Proxmox Infrastructure" class="w-full h-full object-contain p-4" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Background phía dưới hero -->
+    <div class="bg-[#F7F9FB]">
+      <!-- Stats bar -->
+      <div class="relative -mt-8 z-10 max-w-7xl mx-auto px-6 lg:px-8">
+        <div class="hero-stats bg-white rounded-xl shadow-xl border border-slate-100 py-8 px-6">
+          <div class="grid grid-cols-3 gap-8 divide-x divide-slate-200">
+            <div class="text-center">
+              <div class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-[#004AC6]">
+                1.200+
+              </div>
+              <div class="text-slate-500 text-xs sm:text-sm font-medium mt-1">
+                Học viên đã được tư vấn
+              </div>
+            </div>
+
+            <div class="text-center">
+              <div class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-[#004AC6]">
+                96%
+              </div>
+              <div class="text-slate-500 text-xs sm:text-sm font-medium mt-1">
+                Chọn đúng khóa ngay lần đầu
+              </div>
+            </div>
+
+            <div class="text-center">
+              <div class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-[#004AC6]">
+                15 phút
+              </div>
+              <div class="text-slate-500 text-xs sm:text-sm font-medium mt-1">
+                Thời gian tư vấn trung bình
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Khoảng cách trước section tiếp theo -->
+        <div class="h-16"></div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const { scrollTo } = useScrollToSection()
+useScrollAnimate('.hero-stats', 'fade-up')
+</script>
+
+<style scoped>
+@keyframes pulse-ring {
+  0% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+.hero-pulse {
+  animation: pulse-ring 3s ease-out infinite;
+  transform-origin: center;
+}
+</style>