nuxt-layer-core 1.1.2 → 1.1.4

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

@@ -10,8 +10,14 @@ const props = withDefaults(defineProps<{
     description?: string
   }>
   selectedPlanId?: string
+  studyModes?: Array<{ name: string; type: string }>
 }>(), {
   plans: () => [],
+  studyModes: () => [
+    { name: 'Học trực tuyến (Online)', type: 'online' },
+    { name: 'Học tại lớp (Offline)', type: 'offline' },
+    { name: 'Đào tạo doanh nghiệp', type: 'enterprise' },
+  ],
 })
 
 const { addOpportunity } = useCrmApi()
@@ -19,7 +25,7 @@ const { addOpportunity } = useCrmApi()
 // Form state
 const selectedCourseId = ref(props.selectedPlanId || '')
 const form = reactive({ name: '', phone: '', email: '', note: '' })
-const studyMode = ref('online')
+const studyMode = ref(props.studyModes[0]?.type || 'online')
 const errors = reactive({ name: '', phone: '', email: '', course: '' })
 const touched = reactive({ name: false, phone: false, email: false, course: false })
 const submitting = ref(false)
@@ -100,12 +106,7 @@ async function handleSubmit() {
 
   try {
     const hostname = window.location.origin
-    const studyModeLabel =
-      studyMode.value === 'online'
-        ? 'Học trực tuyến (Online)'
-        : studyMode.value === 'offline'
-          ? 'Học tại lớp (Offline)'
-          : 'Đào tạo doanh nghiệp'
+    const studyModeLabel = props.studyModes.find((mode) => mode.type === studyMode.value)?.name || studyMode.value
 
     const levelLabel =
       selectedPlan.value?.level === 'basic'
@@ -237,21 +238,12 @@ async function handleSubmit() {
       <!-- Study mode -->
       <div class="mb-5">
         <label class="mb-[10px] block text-[13px] font-semibold text-gray-700">Hình thức học</label>
-        <div class="flex flex-wrap gap-[10px]">
-          <button type="button" class="rounded-[10px] border px-4 py-[9px] text-[13.5px] font-medium transition-colors"
-            :class="studyMode === 'online' ? 'border-[#2f5fe0] bg-[#2f5fe0] text-white' : 'border-[#e2e5ee] bg-white text-gray-700'"
-            @click="studyMode = 'online'">
-            Học trực tuyến (Online)
-          </button>
-          <button type="button" class="rounded-[10px] border px-4 py-[9px] text-[13.5px] font-medium transition-colors"
-            :class="studyMode === 'offline' ? 'border-[#2f5fe0] bg-[#2f5fe0] text-white' : 'border-[#e2e5ee] bg-white text-gray-700'"
-            @click="studyMode = 'offline'">
-            Học tại lớp (Offline)
-          </button>
-          <button type="button" class="rounded-[10px] border px-4 py-[9px] text-[13.5px] font-medium transition-colors"
-            :class="studyMode === 'enterprise' ? 'border-[#2f5fe0] bg-[#2f5fe0] text-white' : 'border-[#e2e5ee] bg-white text-gray-700'"
-            @click="studyMode = 'enterprise'">
-            Đào tạo doanh nghiệp
+        <div class="flex flex-wrap justify-center gap-[10px] sm:justify-start">
+          <button v-for="mode in studyModes" :key="mode.type" type="button"
+            class="rounded-[10px] border px-4 py-[9px] text-[13.5px] font-medium transition-colors"
+            :class="studyMode === mode.type ? 'border-[#2f5fe0] bg-[#2f5fe0] text-white' : 'border-[#e2e5ee] bg-white text-gray-700'"
+            @click="studyMode = mode.type">
+            {{ mode.name }}
           </button>
         </div>
       </div>

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

@@ -8,6 +8,7 @@ defineProps<{
     icon: string
   }>
   selectedPlanId?: string
+  studyModes?: Array<{ name: string; type: string }>
 }>()
 </script>
 
@@ -18,7 +19,7 @@ defineProps<{
       <RegistrationSidebar />
 
       <!-- Right column: form -->
-      <RegistrationForm :plans="plans" :selected-plan-id="selectedPlanId" />
+      <RegistrationForm :plans="plans" :selected-plan-id="selectedPlanId" :study-modes="studyModes" />
     </div>
   </div>
 </template>

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

@@ -1,58 +1,58 @@
-<template>
-  <section id="khach-hang" class="py-24 bg-white border-t border-slate-200">
-    <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">Học viên nói gì</h2>
-        <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-slate-900">
-          Được tư vấn đúng khóa, học đúng thứ cần dùng
-        </h3>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <blockquote
-          v-for="(t, i) in testimonials"
-          :key="t.name"
-          :data-delay="i * 150"
-          class="testimonial-card bg-white p-8 rounded-xl border border-slate-200 relative hover:shadow-lg transition-shadow"
-        >
-          <Icon name="lucide:quote" class="text-blue-100 text-4xl absolute top-6 right-6" />
-          <p class="text-slate-700 leading-relaxed mb-6 relative z-10">{{ t.quote }}</p>
-          <footer class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-[10px] bg-gradient-to-br from-[#2563EB] to-[#1D4ED8] flex items-center justify-center text-xs font-bold text-white">
-              {{ t.initials }}
-            </div>
-            <div class="text-sm">
-              <p class="font-bold text-slate-900">{{ t.name }}</p>
-              <p class="text-slate-500">{{ t.role }}</p>
-            </div>
-          </footer>
-        </blockquote>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup>
-useScrollAnimate('.testimonial-card', 'slide-left')
-
-const testimonials = [
-  {
-    initials: 'TH',
-    name: 'Trần Hải',
-    role: 'IT Manager, chuỗi bán lẻ 20 chi nhánh',
-    quote: 'Ban đầu định đăng ký gói cao nhất, nhưng buổi tư vấn cho thấy đội em chỉ cần gói Nền tảng. Tiết kiệm được kha khá chi phí mà vẫn đạt mục tiêu.'
-  },
-  {
-    initials: 'NL',
-    name: 'Nguyễn Lâm',
-    role: 'DevOps Lead, công ty fintech',
-    quote: 'Người tư vấn hỏi rất kỹ về hạ tầng hiện tại trước khi gợi ý khóa học, nên nội dung học sát với công việc thật, không lan man.'
-  },
-  {
-    initials: 'PA',
-    name: 'Phạm Anh',
-    role: 'CTO, startup logistics',
-    quote: 'Nhờ được tư vấn đúng lộ trình, công ty chuyển từ VMware sang cluster HCI trên Proxmox và cắt gần 60% chi phí license hàng năm.'
-  }
-]
+<template>
+  <section id="khach-hang" class="py-24 bg-white border-t border-slate-200">
+    <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">Học viên nói gì</h2>
+        <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-slate-900">
+          Được tư vấn đúng khóa, học đúng thứ cần dùng
+        </h3>
+      </div>
+
+      <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+        <blockquote
+          v-for="(t, i) in testimonials"
+          :key="t.name"
+          :data-delay="i * 150"
+          class="testimonial-card bg-white p-8 rounded-xl border border-slate-200 relative hover:shadow-lg transition-shadow"
+        >
+          <Icon name="lucide:quote" class="text-blue-100 text-4xl absolute top-6 right-6" />
+          <p class="text-slate-700 leading-relaxed mb-6 relative z-10">{{ t.quote }}</p>
+          <footer class="flex items-center gap-3">
+            <div class="w-10 h-10 rounded-[10px] bg-gradient-to-br from-[#2563EB] to-[#1D4ED8] flex items-center justify-center text-xs font-bold text-white">
+              {{ t.initials }}
+            </div>
+            <div class="text-sm">
+              <p class="font-bold text-slate-900">{{ t.name }}</p>
+              <p class="text-slate-500">{{ t.role }}</p>
+            </div>
+          </footer>
+        </blockquote>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+useScrollAnimate('.testimonial-card', 'slide-left')
+
+const testimonials = [
+  {
+    initials: 'TH',
+    name: 'Trần Hải',
+    role: 'IT Manager, chuỗi bán lẻ 20 chi nhánh',
+    quote: 'Ban đầu định đăng ký gói cao nhất, nhưng buổi tư vấn cho thấy đội em chỉ cần gói Nền tảng. Tiết kiệm được kha khá chi phí mà vẫn đạt mục tiêu.'
+  },
+  {
+    initials: 'NL',
+    name: 'Nguyễn Lâm',
+    role: 'DevOps Lead, công ty fintech',
+    quote: 'Người tư vấn hỏi rất kỹ về hạ tầng hiện tại trước khi gợi ý khóa học, nên nội dung học sát với công việc thật, không lan man.'
+  },
+  {
+    initials: 'PA',
+    name: 'Phạm Anh',
+    role: 'CTO, startup logistics',
+    quote: 'Nhờ được tư vấn đúng lộ trình, công ty chuyển từ VMware sang cluster HCI trên Proxmox và cắt gần 60% chi phí license hàng năm.'
+  }
+]
 </script>

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

@@ -1,61 +1,61 @@
-<template>
-  <footer class="bg-white border-t border-slate-200 pt-16 pb-10">
-    <div class="max-w-7xl mx-auto px-6 lg:px-8 grid grid-cols-1 md:grid-cols-4 gap-10">
-      <div class="space-y-4">
-        <div class="flex items-center">
-          <img src="/images/logo-lvs-1300x330.png" alt="Long Vân" class="h-8 w-auto" />
-        </div>
-        <p class="text-slate-500 text-sm leading-relaxed">
-          Tư vấn và đào tạo hạ tầng siêu hội tụ Proxmox. Đồng hành cùng bạn chọn đúng khóa học,
-          đúng lộ trình nghề nghiệp.
-        </p>
-      </div>
-
-      <div>
-        <h5 class="font-bold text-slate-900 mb-5 text-sm">Khóa học</h5>
-        <ul class="space-y-3">
-          <li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Proxmox nền tảng</NuxtLink></li>
-          <li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Vận hành production</NuxtLink></li>
-          <li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Đào tạo doanh nghiệp</NuxtLink></li>
-        </ul>
-      </div>
-
-      <div>
-        <h5 class="font-bold text-slate-900 mb-5 text-sm">Tư vấn</h5>
-        <ul class="space-y-3">
-          <li><NuxtLink to="#giai-phap" @click.prevent="scrollTo('giai-phap')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Quy trình tư vấn</NuxtLink></li>
-          <li><NuxtLink to="#khach-hang" @click.prevent="scrollTo('khach-hang')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Học viên nói gì</NuxtLink></li>
-          <li><NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Đặt lịch tư vấn</NuxtLink></li>
-        </ul>
-      </div>
-
-      <div>
-        <h5 class="font-bold text-slate-900 mb-5 text-sm">Liên hệ</h5>
-        <ul class="space-y-3 text-sm text-slate-500">
-          <li class="flex items-center gap-2">
-            <Icon name="lucide:mail" class="text-[16px] text-[#004AC6]" />
-            tuvan@longvan.net
-          </li>
-          <li class="flex items-center gap-2">
-            <Icon name="lucide:phone" class="text-[16px] text-[#004AC6]" />
-            1800 6070
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <div class="max-w-7xl mx-auto px-6 lg:px-8 mt-12 pt-8 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4">
-      <p class="text-slate-400 text-xs">© {{ year }} Long Vân Cloud Solution. Bảo lưu mọi quyền.</p>
-      <div class="flex gap-6 text-xs text-slate-500">
-        <NuxtLink to="#giai-phap" @click.prevent="scrollTo('giai-phap')" class="hover:text-[#004AC6] transition-colors">Vì sao chọn chúng tôi</NuxtLink>
-        <NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="hover:text-[#004AC6] transition-colors">Khóa học</NuxtLink>
-        <NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')" class="hover:text-[#004AC6] transition-colors">Tư vấn</NuxtLink>
-      </div>
-    </div>
-  </footer>
-</template>
-
-<script setup>
-const { scrollTo } = useScrollToSection()
-const year = new Date().getFullYear()
+<template>
+  <footer class="bg-white border-t border-slate-200 pt-16 pb-10">
+    <div class="max-w-7xl mx-auto px-6 lg:px-8 grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
+      <div class="space-y-4">
+        <div class="flex items-center">
+          <img src="/images/logo-lvs-1300x330.png" alt="Long Vân" class="h-8 w-auto" />
+        </div>
+        <p class="text-slate-500 text-sm leading-relaxed">
+          Tư vấn và đào tạo hạ tầng siêu hội tụ Proxmox. Đồng hành cùng bạn chọn đúng khóa học,
+          đúng lộ trình nghề nghiệp.
+        </p>
+      </div>
+
+      <div>
+        <h5 class="font-bold text-slate-900 mb-5 text-sm">Khóa học</h5>
+        <ul class="space-y-3">
+          <li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Proxmox nền tảng</NuxtLink></li>
+          <li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Vận hành production</NuxtLink></li>
+          <li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Đào tạo doanh nghiệp</NuxtLink></li>
+        </ul>
+      </div>
+
+      <div>
+        <h5 class="font-bold text-slate-900 mb-5 text-sm">Tư vấn</h5>
+        <ul class="space-y-3">
+          <li><NuxtLink to="#giai-phap" @click.prevent="scrollTo('giai-phap')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Quy trình tư vấn</NuxtLink></li>
+          <li><NuxtLink to="#khach-hang" @click.prevent="scrollTo('khach-hang')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Học viên nói gì</NuxtLink></li>
+          <li><NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Đặt lịch tư vấn</NuxtLink></li>
+        </ul>
+      </div>
+
+      <div>
+        <h5 class="font-bold text-slate-900 mb-5 text-sm">Liên hệ</h5>
+        <ul class="space-y-3 text-sm text-slate-500">
+          <li class="flex items-center gap-2">
+            <Icon name="lucide:mail" class="text-[16px] text-[#004AC6]" />
+            tuvan@longvan.net
+          </li>
+          <li class="flex items-center gap-2">
+            <Icon name="lucide:phone" class="text-[16px] text-[#004AC6]" />
+            1800 6070
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="max-w-7xl mx-auto px-6 lg:px-8 mt-12 pt-8 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4">
+      <p class="text-slate-400 text-xs">© {{ year }} Long Vân Cloud Solution. Bảo lưu mọi quyền.</p>
+      <div class="flex gap-6 text-xs text-slate-500">
+        <NuxtLink to="#giai-phap" @click.prevent="scrollTo('giai-phap')" class="hover:text-[#004AC6] transition-colors">Vì sao chọn chúng tôi</NuxtLink>
+        <NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="hover:text-[#004AC6] transition-colors">Khóa học</NuxtLink>
+        <NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')" class="hover:text-[#004AC6] transition-colors">Tư vấn</NuxtLink>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+const { scrollTo } = useScrollToSection()
+const year = new Date().getFullYear()
 </script>

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

@@ -1,11 +1,11 @@
 <template>
   <header class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-slate-200/70 shadow-sm">
     <div class="max-w-7xl mx-auto px-6 lg:px-8 flex items-center justify-between h-16">
-      <NuxtLink :to="`/giai-phap-proxmox/khoa-hoc-proxmox-hci`" class="flex items-center gap-2.5">
+      <NuxtLink :to="`/giai-phap-proxmox/khoa-hoc-proxmox-hci`" class="flex shrink-0 items-center gap-2.5">
         <img src="/images/logo-lvs-1300x330.png" alt="Long Vân" class="h-8 w-auto" />
       </NuxtLink>
 
-      <nav class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
+      <nav class="hidden lg:flex shrink-0 items-center gap-5 whitespace-nowrap text-sm font-medium text-slate-600 xl:gap-8">
         <template v-for="link in navLinks" :key="link.id">
           <template v-if="link.path">
             <NuxtLink v-if="link.path && link.path != route.path" :to="`${link.path}`" :class="[
@@ -37,7 +37,7 @@
       </nav>
 
       <!-- Logged in -->
-      <div v-if="user" class="relative hidden md:block">
+      <div v-if="user" class="relative hidden lg:block">
         <button @click="showMenu = !showMenu"
           class="flex items-center gap-2.5 text-sm font-medium text-slate-700 hover:text-[#004AC6] transition-colors">
           <span
@@ -64,7 +64,7 @@
       </div>
 
       <!-- Not logged in -->
-      <div v-else class="hidden md:flex items-center gap-3">
+      <div v-else class="hidden shrink-0 items-center gap-3 whitespace-nowrap lg:flex">
         <a v-if="isConsultant" :href="`/giai-phap-proxmox/khoa-hoc-proxmox-hci#lien-he`" @click.prevent="scrollTo('lien-he')"
           class="inline-flex items-center gap-1.5 text-sm font-bold px-5 py-2.5 rounded-[10px] border border-[#004AC6] text-[#004AC6] hover:bg-blue-50 transition-all active:scale-95 cursor-pointer">
           Liên hệ tư vấn
@@ -78,7 +78,7 @@
       </div>
 
       <!-- Mobile menu toggle -->
-      <button type="button" class="md:hidden flex h-9 w-9 items-center justify-center rounded-[10px] text-slate-600 hover:bg-slate-100 transition-colors"
+      <button type="button" class="lg:hidden flex h-9 w-9 items-center justify-center rounded-[10px] text-slate-600 hover:bg-slate-100 transition-colors"
         :aria-expanded="showMobileMenu" aria-label="Mở menu"
         @click="showMobileMenu = !showMobileMenu">
         <Icon :name="showMobileMenu ? 'lucide:x' : 'lucide:menu'" class="text-[22px]" />
@@ -89,7 +89,7 @@
     <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="showMobileMenu" class="md:hidden border-t border-slate-200/70 bg-white px-6 py-4">
+      <div v-if="showMobileMenu" class="lg:hidden border-t border-slate-200/70 bg-white px-6 py-4">
         <nav class="flex flex-col gap-1 text-sm font-medium text-slate-600">
           <template v-for="link in navLinks" :key="link.id">
             <NuxtLink v-if="link.path && link.path != route.path" :to="`${link.path}`" class="rounded-[10px] px-3 py-2.5 transition-colors"

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

@@ -35,7 +35,7 @@ const { scrollTo } = useScrollToSection()
             Triển khai dễ dàng, mở rộng linh hoạt. Nhận tư vấn giải pháp từ chuyên gia Long Vân.
           </a>
 
-          <div v-reveal="{ delay: 280 }" class="mt-8 flex flex-wrap items-center gap-4">
+          <div v-reveal="{ delay: 280 }" class="mt-8 flex flex-wrap items-center justify-center gap-4 lg:justify-start">
             <a href="#lien-he" @click.prevent="scrollTo('lien-he')"
               class="inline-flex items-center gap-2 rounded-[10px] bg-blue-600 px-6 py-3.5 text-[15px] font-semibold text-white shadow-sm shadow-blue-600/20 transition hover:bg-blue-700">
               Nhận tư vấn triển khai
@@ -61,8 +61,8 @@ const { scrollTo } = useScrollToSection()
           </dl>
         </div>
 
-        <!-- Right: image with floating cards -->
-        <div v-reveal="{ type: 'right', delay: 160 }" class="relative flex h-full items-center">
+        <!-- Right: image with floating cards - ẩn trên mobile/tablet để tiết kiệm chiều cao -->
+        <div v-reveal="{ type: 'right', delay: 160 }" class="relative hidden h-full items-center lg:flex">
           <div class="w-full overflow-hidden rounded-3xl shadow-2xl shadow-blue-900/10 ring-1 ring-black/5">
             <img src="../../images/Proxmox HCI.png" alt="Datacenter server racks"
               class="block h-auto w-full object-contain" />

package/app/layers/solution/app/composables/usePlanNormalizer.ts

@@ -1,45 +1,49 @@
-// Chuẩn hoá 1 item CMS (đến từ item_id_0M_groups_0N của CoursesSection hoặc PricingPlansSection)
-// về cùng 1 shape, để mọi nơi tiêu thụ (CtaSection, PricingPlansSection...) không phải đoán field theo từng nguồn.
-export interface NormalizedPlanItem {
-  id: string
-  name: string
-  level: string
-  duration: string
-  description: string
-  features: string[]
-  price?: number
-  prices?: Record<string, number>
-  priceLabel: string
-  priceNote: string
-  highlight: boolean
-  url?: string
-  icon: string
-}
-
-export const normalizePlanItem = (item: any): NormalizedPlanItem | null => {
-  if (!item || typeof item !== 'object') return null
-
-  const features = Array.isArray(item.config_product)
-    ? item.config_product
-    : typeof item.config_product === 'string' && item.config_product
-      ? [item.config_product]
-      : Array.isArray(item.features)
-        ? item.features
-        : []
-
-  return {
-    id: String(item.productId ?? item.id ?? item.title ?? item.name ?? ''),
-    name: item.title || item.name || '',
-    level: item.level || '',
-    duration: item.time || item.unit || '',
-    description: item.short_description || item.desc || '',
-    features,
-    price: item.price,
-    prices: item.prices,
-    priceLabel: item.priceLabel || '',
-    priceNote: item.priceNote || '',
-    highlight: !!item.highlight,
-    url: item.url,
-    icon: item.icon || 'lucide:server',
-  }
-}
+// Chuẩn hoá 1 item CMS (đến từ item_id_0M_groups_0N của CoursesSection hoặc PricingPlansSection)
+// về cùng 1 shape, để mọi nơi tiêu thụ (CtaSection, PricingPlansSection...) không phải đoán field theo từng nguồn.
+export interface NormalizedPlanItem {
+  id: string
+  name: string
+  tagline: string
+  level: string
+  duration: string
+  description: string
+  features: string[]
+  price?: number
+  prices?: Record<string, number>
+  priceLabel: string
+  priceNote: string
+  highlight: boolean
+  url?: string
+  titleButton: string
+  icon: string
+}
+
+export const normalizePlanItem = (item: any): NormalizedPlanItem | null => {
+  if (!item || typeof item !== 'object') return null
+
+  const features = Array.isArray(item.config_product)
+    ? item.config_product
+    : typeof item.config_product === 'string' && item.config_product
+      ? [item.config_product]
+      : Array.isArray(item.features)
+        ? item.features
+        : []
+
+  return {
+    id: String(item.productId ?? item.id ?? item.title ?? item.name ?? ''),
+    name: item.title || item.name || '',
+    tagline: item.tagline || '',
+    level: item.level || '',
+    duration: item.time || item.unit || '',
+    description: item.short_description || item.desc || '',
+    features,
+    price: item.price,
+    prices: item.prices,
+    priceLabel: item.priceLabel || '',
+    priceNote: item.priceNote || '',
+    highlight: !!item.highlight,
+    url: item.url,
+    titleButton: item.title_button || item.titleButton || '',
+    icon: item.icon || 'lucide:server',
+  }
+}

package/app/layers/solution/app/pages/giai-phap-proxmox/[slug]/index.vue

@@ -11,12 +11,72 @@ const { data } = await useAsyncData(
   () => getSlugData(slug.value, 'giai-phap'),
   { server: true }
 )
+
+const targetCTA = computed(() => data.value?.productData?.targetCTA)
+const pageSlug = computed(() => data.value?.productData?.slug || slug.value)
+
+// Lấy 1 field group (vd khoa_dao_tao_co_ban) từ fieldResumes, gom children về object phẳng { productid, name, ... }
+const findFieldGroup = (fieldName: string) => {
+  const group = data.value?.resumeData?.fieldResumes?.find(
+    (field: any) => field?.fieldName === fieldName && field?.type === 'FIELD_GROUP'
+  )
+  if (!group?.children) return null
+
+  const result: Record<string, any> = {}
+  for (const field of group.children) {
+    const key = field?.fieldName?.split('@')?.pop()
+    if (key) result[key] = field?.value
+  }
+  return result
+}
+
+const toCourseItem = (fieldName: string, level: string) => {
+  const group = findFieldGroup(fieldName)
+  if (!group) return undefined
+
+  return {
+    productId: group.productid,
+    name: group.name,
+    tagline: group.tagline,
+    level,
+    time: group.thoi_gian_hoc,
+    // mo_ta_ngan là rich text từ CMS, CoursesSection render bằng v-html
+    short_description: group.mo_ta_ngan,
+    url: group.url,
+    title_button: group.title_button,
+  }
+}
+
+const courseBasic = computed(() => toCourseItem('khoa_dao_tao_co_ban', 'basic'))
+const courseAdvanced = computed(() => toCourseItem('khoa_dao_tao_nang_cao', 'advanced'))
+const courseExpert = computed(() => toCourseItem('khoa_dao_tao_chuyen_gia', 'expert'))
+
+// Đồng bộ dropdown "Khóa học quan tâm" của CtaSection với đúng data đang hiện ở CoursesSection
+const courses = computed(() =>
+  [courseBasic.value, courseAdvanced.value, courseExpert.value].map(normalizePlanItem).filter(Boolean)
+)
 </script>
 
 <template>
-  <DynamicPageSections
+  <!-- <DynamicPageSections
     :field-resumes="data?.resumeData?.fieldResumes"
     :target-c-t-a="data?.productData?.targetCTA"
     :slug="data?.productData?.slug || slug"
-  />
+  /> -->
+
+  <div class="bg-ink text-cloud font-body antialiased">
+    <TheHeader :target-c-t-a="targetCTA" :slug="pageSlug" />
+    <HeroSection />
+    <FeaturesSection />
+    <CoursesSection
+      :target-c-t-a="targetCTA"
+      :slug="pageSlug"
+      :item-id01-groups01="courseBasic"
+      :item-id02-groups01="courseAdvanced"
+      :item-id03-groups01="courseExpert"
+    />
+    <TestimonialsSection />
+    <CtaSection :courses="courses" />
+    <TheFooter />
+  </div>
 </template>