nuxt-layer-core 2.0.2 → 2.0.3

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

@@ -120,9 +120,17 @@
 useScrollAnimate('.course-card', 'fade-up')
 
 const props = defineProps({
-  plans: { type: Object, default: null },
   targetCTA: { type: String, default: '' },
   slug: { type: String, default: '' },
+  itemId01Groups01: { type: Object, default: null },
+  itemId02Groups01: { type: Object, default: null },
+  itemId03Groups01: { type: Object, default: null },
+  itemId01Groups02: { type: Object, default: null },
+  itemId02Groups02: { type: Object, default: null },
+  itemId03Groups02: { type: Object, default: null },
+  itemId01Groups03: { type: Object, default: null },
+  itemId02Groups03: { type: Object, default: null },
+  itemId03Groups03: { type: Object, default: null },
 })
 
 const isConsultant = computed(() => props.targetCTA === 'CONSULTANT')
@@ -130,8 +138,14 @@ const router = useRouter()
 
 function handleSelectPlan(plan) {
   router.push({
-    path: `/giai-phap-proxmox/dang-ky-khoa-hoc/${props.slug}`,
-    query: { plan: plan.id },
+    path: `/dang-ky-tu-van/khoa-hoc-proxmox`,
+    query: {
+      plan: plan.id,
+      name: plan.name,
+      level: plan.level,
+      duration: plan.duration,
+      description: plan.description || '',
+    },
   })
 }
 
@@ -200,47 +214,32 @@ const samplePlans = [
   }
 ]
 
-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
-        ]) || []
-      )
-
-      // const included = (fields.config_product || '')
-      //   .replace(/<br\s*\/?>/gi, '\n')
-      //   .replace(/<\/p>/gi, '\n')
-      //   .replace(/<[^>]*>/g, '')
-      //   .split('✓')
-      //   .map((item) => item.trim())
-      //   .filter(Boolean)
-
-      return {
-        id: fields.productid || group.fieldName,
-        name: fields.title || '',
-        level: fields.level || '',
-        duration: fields.time || '',
-        description: fields.short_description || '',
-        included: fields.config_product,
-        icon: fields.icon || 'lucide:server',
-        highlight: index === 1,
-        outcome: fields.outcome || ''
-      }
-    }) || []
-}
+const rawItems = computed(() => [
+  props.itemId01Groups01,
+  props.itemId02Groups01,
+  props.itemId03Groups01,
+  props.itemId01Groups02,
+  props.itemId02Groups02,
+  props.itemId03Groups02,
+  props.itemId01Groups03,
+  props.itemId02Groups03,
+  props.itemId03Groups03,
+])
 
 const formattedPlans = computed(() => {
-  const result = formatPlans(props.plans)
-  return result.length > 0 ? result : samplePlans
+  const items = rawItems.value.map(normalizePlanItem).filter(Boolean)
+  if (!items.length) return samplePlans
+
+  return items.map((item, index) => ({
+    id: item.id || `plan-${index}`,
+    name: item.name,
+    level: item.level,
+    duration: item.duration,
+    description: item.description,
+    included: item.features,
+    icon: item.icon,
+    highlight: index === 1,
+    outcome: '',
+  }))
 })
 </script>

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

@@ -61,19 +61,9 @@
 
             <!-- Searchable dropdown -->
             <div class="space-y-1.5" ref="dropdownRef">
-              <div class="flex items-center justify-between gap-2">
-                <label class="text-xs font-bold uppercase text-slate-500">
-                  Khóa học quan tâm <span class="text-red-500">*</span>
-                </label>
-                <button v-if="consultationRequest" type="button" @click="clearContext"
-                  class="flex items-center gap-1 text-[11px] font-medium text-[#004AC6] hover:underline cursor-pointer">
-                  <Icon name="lucide:x" class="w-3 h-3" />
-                  Xem tất cả
-                </button>
-              </div>
-              <p v-if="consultationRequest" class="text-[11px] text-slate-400 -mt-1">
-                Đã lọc theo mục bạn vừa chọn: {{ categoryLabels[consultationRequest.category] }}
-              </p>
+              <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"
@@ -155,48 +145,17 @@
 </template>
 
 <script setup>
-import { hciPlans, workshopPlans, trainingPlans } from '../data/pricingPlans'
-
 useScrollAnimate('.cta-card', 'scale-up')
 
 const props = defineProps({
-  plans: { type: Object, default: null },
   selectedPlanId: { type: String, default: null },
+  // Do DynamicPageSections gom từ CoursesSection / PricingPlansSection trên cùng trang (nếu có)
+  courses: { type: Array, default: () => [] },
+  pricingPlans: { type: Object, default: null },
 })
 
-const consultationRequest = useConsultationRequest()
-
-const categoryLabels = {
-  hci: 'Proxmox HCI',
-  workshop: 'Workshop 1 ngày',
-  training: 'Đào tạo Proxmox',
-}
-
-// Items relevant to whichever plan the visitor just picked in PricingPlansSection
-const contextPlans = computed(() => {
-  const category = consultationRequest.value?.category
-  if (category === 'hci') {
-    return hciPlans.map((p) => ({ id: p.id, name: p.name, level: 'Gói thuê hạ tầng', duration: p.unit, icon: 'lucide:server-cog' }))
-  }
-  if (category === 'workshop') {
-    return workshopPlans.map((p) => ({ id: p.id, name: p.name, level: 'Workshop', duration: p.tags?.[0] || '', icon: 'lucide:zap' }))
-  }
-  if (category === 'training') {
-    return trainingPlans.map((p) => ({ id: p.id, name: p.name, level: 'Khóa đào tạo', duration: p.tags?.[0] || '', icon: 'lucide:graduation-cap' }))
-  }
-  return null
-})
-
-function clearContext() {
-  consultationRequest.value = null
-  selectedCourse.value = null
-  touched.course = false
-  errors.course = ''
-}
-
 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ờ' },
@@ -213,30 +172,45 @@ function formatLevel(level) {
   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',
-      }
-    }) || []
+// CtaSection chỉ để tự gửi tư vấn -> chỉ show option KHÔNG có url riêng (option có url đã có nút "Đăng ký ngay" đi thẳng)
+const pricingCategoryMeta = {
+  hci: { level: 'Gói thuê hạ tầng', icon: 'lucide:server-cog' },
+  workshop: { level: 'Workshop', icon: 'lucide:zap' },
+  training: { level: 'Khóa đào tạo', icon: 'lucide:graduation-cap' },
 }
 
+// Luôn gộp đủ data từ CoursesSection + PricingPlansSection (nếu trang có các component đó)
+// props.courses / props.pricingPlans[category] đã được DynamicPageSections chuẩn hoá chung shape (normalizePlanItem)
 const formattedPlans = computed(() => {
-  const result = formatPlans(props.plans)
-  return result.length > 0 ? result : samplePlans
+  const courseOptions = props.courses
+    .filter((item) => !item.url)
+    .map((item) => ({
+      id: item.id,
+      name: item.name,
+      level: item.level,
+      duration: item.duration,
+      icon: item.icon,
+    }))
+
+  const pricingOptions = props.pricingPlans
+    ? Object.entries(pricingCategoryMeta).flatMap(([category, meta]) =>
+        (props.pricingPlans[category] || [])
+          .filter((item) => !item.url)
+          .map((item) => ({
+            id: item.id,
+            name: item.name,
+            level: meta.level,
+            duration: item.duration,
+            icon: meta.icon,
+          }))
+      )
+    : []
+
+  const combined = [...courseOptions, ...pricingOptions]
+  return combined.length > 0 ? combined : samplePlans
 })
 
-const dropdownPlans = computed(() => contextPlans.value || formattedPlans.value)
+const dropdownPlans = computed(() => formattedPlans.value)
 
 // Form state
 const form = reactive({ name: '', phone: '', email: '' })
@@ -263,18 +237,6 @@ watch(() => props.selectedPlanId, (id) => {
   }
 }, { immediate: true })
 
-// Auto-select + activate the item the visitor just picked in PricingPlansSection
-watch(consultationRequest, (request) => {
-  if (!request) return
-  const found = dropdownPlans.value.find(p => p.id === request.planId)
-    || dropdownPlans.value.find(p => p.name === request.planName)
-  if (found) {
-    selectedCourse.value = found
-    touched.course = true
-    errors.course = ''
-  }
-}, { immediate: true })
-
 // Search filter
 const filteredCourses = computed(() => {
   if (!searchQuery.value) return dropdownPlans.value

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

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+const props = defineProps<{
+  fieldResumes?: Array<any> | null
+  targetCTA?: string
+  slug?: string
+}>()
+
+const parseValue = (value: unknown) => {
+  if (typeof value !== 'string') return value
+
+  const trimmed = value.trim()
+  if (!trimmed) return null
+
+  if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+    try {
+      return JSON.parse(trimmed)
+    } catch {
+      return value
+    }
+  }
+
+  return value
+}
+
+const toCamelCase = (key: string) => key.replace(/_([a-z0-9])/gi, (_, c) => c.toUpperCase())
+
+// Gom các item_id_0M_groups_0N (M: 1-3) của 1 group cụ thể thành mảng item hợp lệ
+const pickGroupItems = (sectionProps: Record<string, any> | undefined, groupSuffix: string) => {
+  if (!sectionProps) return []
+  return [1, 2, 3]
+    .map((n) => sectionProps[`itemId0${n}Groups${groupSuffix}`])
+    .filter((item) => item && typeof item === 'object')
+}
+
+const sections = computed(() => {
+  const list = (props.fieldResumes || [])
+    .filter((group: any) => group?.type === 'FIELD_GROUP' && Array.isArray(group?.children))
+    .map((group: any) => {
+      const componentProps: Record<string, any> = {}
+      let componentName = ''
+
+      for (const field of group.children) {
+        const key = field?.fieldName?.split('@')?.pop()
+        if (!key) continue
+
+        if (key === 'component_name') {
+          componentName = field?.value || ''
+          continue
+        }
+
+        componentProps[toCamelCase(key)] = parseValue(field?.value)
+      }
+
+      return {
+        component: componentName,
+        props: {
+          targetCTA: props.targetCTA,
+          slug: props.slug,
+          ...componentProps,
+        },
+      }
+    })
+    .filter((section: { component: string }) => section.component)
+
+  // CtaSection không có data riêng trong CMS, lấy nhờ từ CoursesSection/PricingPlansSection nếu có trên trang
+  const coursesSection = list.find((s) => s.component === 'CoursesSection')
+  const pricingSection = list.find((s) => s.component === 'PricingPlansSection')
+
+  const courses = coursesSection
+    ? ['01', '02', '03']
+        .flatMap((suffix) => pickGroupItems(coursesSection.props, suffix))
+        .map(normalizePlanItem)
+        .filter(Boolean)
+    : []
+
+  const pricingPlans = pricingSection
+    ? {
+        hci: pickGroupItems(pricingSection.props, '01').map(normalizePlanItem).filter(Boolean),
+        workshop: pickGroupItems(pricingSection.props, '02').map(normalizePlanItem).filter(Boolean),
+        training: pickGroupItems(pricingSection.props, '03').map(normalizePlanItem).filter(Boolean),
+      }
+    : null
+
+  return list.map((section) => {
+    if (section.component !== 'CtaSection') return section
+
+    return {
+      ...section,
+      props: {
+        ...section.props,
+        courses,
+        pricingPlans,
+      },
+    }
+  })
+})
+</script>
+
+<template>
+  <template v-for="(section, index) in sections" :key="index">
+    <component :is="section.component" v-bind="section.props" />
+  </template>
+</template>

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

@@ -186,18 +186,49 @@
 <script setup>
 import { hciPlans, workshopPlans, trainingPlans } from '../data/pricingPlans'
 
+const props = defineProps({
+  groupsItem01: { type: String, default: '' },
+  groupsItem02: { type: String, default: '' },
+  groupsItem03: { type: String, default: '' },
+  itemId01Groups01: { type: Object, default: null },
+  itemId02Groups01: { type: Object, default: null },
+  itemId03Groups01: { type: Object, default: null },
+  itemId01Groups02: { type: Object, default: null },
+  itemId02Groups02: { type: Object, default: null },
+  itemId03Groups02: { type: Object, default: null },
+  itemId01Groups03: { type: Object, default: null },
+  itemId02Groups03: { type: Object, default: null },
+  itemId03Groups03: { type: Object, default: null },
+})
+
 useScrollAnimate('.pricing-header', 'fade-up')
 
-const { scrollTo } = useScrollToSection()
-const consultationRequest = useConsultationRequest()
+const router = useRouter()
+
+// Không có url riêng -> mở trang đăng ký tư vấn, mang theo thông tin gói qua query (giống CoursesSection.handleSelectPlan)
+const categoryLevelLabels = {
+  hci: 'Gói thuê hạ tầng',
+  workshop: 'Workshop',
+  training: 'Khóa đào tạo',
+}
 
 function handleContactClick(plan) {
-  consultationRequest.value = {
-    category: activeTab.value,
-    planId: plan.id,
-    planName: plan.name,
-  }
-  scrollTo('lien-he')
+  const priceText = plan.priceLabel || typeof plan.price === 'number'
+    ? `${plan.priceLabel || ''}${formatPrice(plan.price)}đ${plan.unit ? ' ' + plan.unit : ''}`
+    : ''
+
+  router.push({
+    path: `/dang-ky-tu-van/khoa-hoc-proxmox`,
+    query: {
+      plan: plan.id || plan.name,
+      name: plan.name,
+      level: categoryLevelLabels[activeTab.value] || '',
+      // plan.unit là hậu tố giá ("/tháng", "/học viên"), không phải thời lượng -> ưu tiên tags[0] ("1 ngày · 8 giờ")
+      duration: plan.tags?.[0] || '',
+      price: priceText,
+      description: plan.desc || '',
+    },
+  })
 }
 
 const sectionRoot = ref(null)
@@ -223,11 +254,13 @@ onMounted(() => {
 const activeTab = ref('hci')
 const activePeriod = ref(36)
 
-const tabs = [
-  { id: 'hci', label: 'Proxmox HCI', icon: 'lucide:server-cog' },
-  { id: 'workshop', label: 'Workshop 1 ngày', icon: 'lucide:zap' },
-  { id: 'training', label: 'Đào tạo Proxmox', icon: 'lucide:layers' },
-]
+const groupLabel = (value, fallback) => (typeof value === 'string' && value.trim()) || fallback
+
+const tabs = computed(() => [
+  { id: 'hci', label: groupLabel(props.groupsItem01, 'Proxmox HCI'), icon: 'lucide:server-cog' },
+  { id: 'workshop', label: groupLabel(props.groupsItem02, 'Workshop 1 ngày'), icon: 'lucide:zap' },
+  { id: 'training', label: groupLabel(props.groupsItem03, 'Đào tạo Proxmox'), icon: 'lucide:layers' },
+])
 
 const billingPeriods = [
   { value: 12, label: 'Thuê 12 tháng' },
@@ -270,11 +303,48 @@ const tabContent = {
 
 const activeTabData = computed(() => tabContent[activeTab.value])
 
+// CMS đổ item theo shape chung (title/time/short_description/config_product/productId, giống CoursesSection)
+// -> chuẩn hoá qua normalizePlanItem rồi map lại đúng field template pricing card đang cần (desc/unit/tags/features)
+const toPricingPlan = (item) => {
+  const normalized = normalizePlanItem(item)
+  if (!normalized) return null
+
+  return {
+    id: normalized.id,
+    name: normalized.name,
+    desc: normalized.description,
+    unit: normalized.duration,
+    priceLabel: normalized.priceLabel,
+    price: normalized.price,
+    prices: normalized.prices,
+    priceNote: normalized.priceNote,
+    tags: normalized.features,
+    features: normalized.features,
+    highlight: normalized.highlight,
+    url: normalized.url,
+  }
+}
+
+const hciItems = computed(() =>
+  [props.itemId01Groups01, props.itemId02Groups01, props.itemId03Groups01].map(toPricingPlan).filter(Boolean)
+)
+const workshopItems = computed(() =>
+  [props.itemId01Groups02, props.itemId02Groups02, props.itemId03Groups02].map(toPricingPlan).filter(Boolean)
+)
+const trainingItems = computed(() =>
+  [props.itemId01Groups03, props.itemId02Groups03, props.itemId03Groups03].map(toPricingPlan).filter(Boolean)
+)
+
 const activePlans = computed(() => {
-  if (activeTab.value === 'workshop') return workshopPlans
-  if (activeTab.value === 'training') return trainingPlans
+  if (activeTab.value === 'workshop') {
+    return workshopItems.value.length > 0 ? workshopItems.value : workshopPlans
+  }
+  if (activeTab.value === 'training') {
+    return trainingItems.value.length > 0 ? trainingItems.value : trainingPlans
+  }
 
-  return hciPlans.map((plan) => ({
+  const source = hciItems.value.length > 0 ? hciItems.value : hciPlans
+  return source.map((plan) => ({
     ...plan,
     price: plan.prices?.[activePeriod.value],
     priceNote: `Giá thuê khi ký hợp đồng ${activePeriod.value} tháng`,

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

@@ -1,14 +1,18 @@
 <script setup lang="ts">
-const props = defineProps<{
-  plans: Array<{
+const props = withDefaults(defineProps<{
+  plans?: Array<{
     id: string
     name: string
     level: string
     duration: string
     icon: string
+    price?: string
+    description?: string
   }>
   selectedPlanId?: string
-}>()
+}>(), {
+  plans: () => [],
+})
 
 const { addOpportunity } = useCrmApi()
 
@@ -72,6 +76,11 @@ function formatLevel(level?: string) {
   return labels[level || ''] || level || ''
 }
 
+// Ghép level + duration, bỏ qua phần nào rỗng thay vì để dính dấu "·" trơ
+function planMetaLine(plan: { level?: string; duration?: string }) {
+  return [formatLevel(plan.level), plan.duration].filter(Boolean).join(' · ')
+}
+
 function validateAll() {
   ; (['name', 'phone', 'email', 'course'] as const).forEach((f) => {
     touched[f] = true
@@ -152,8 +161,26 @@ async function handleSubmit() {
     <form @submit.prevent="handleSubmit">
       <!-- Course selection -->
       <div class="mb-5">
-        <label class="mb-[10px] block text-[13px] font-semibold text-gray-700">Chọn khóa học</label>
-        <div class="flex flex-col gap-[10px]">
+        <label class="mb-[10px] block text-[13px] font-semibold text-gray-700">
+          {{ plans.length === 1 ? 'Gói bạn đăng ký tư vấn' : 'Chọn khóa học' }}
+        </label>
+
+        <!-- Đã chọn sẵn 1 gói từ trang trước -> chỉ hiển thị thông tin, không cần chọn lại -->
+        <div v-if="plans.length === 1" class="flex flex-col gap-2 rounded-[10px] border border-[#2f5fe0] bg-[#eef3ff] px-4 py-[14px]">
+          <div class="flex items-center gap-3">
+            <span class="relative h-[18px] w-[18px] flex-none rounded-[10px] border-2 border-[#2f5fe0]">
+              <span class="absolute inset-[3px] rounded-[10px] bg-[#2f5fe0]" />
+            </span>
+            <span class="flex flex-col gap-[2px]">
+              <span class="text-sm font-semibold text-slate-900">{{ plans[0].name }}</span>
+              <span v-if="planMetaLine(plans[0])" class="text-[12.5px] text-gray-500">{{ planMetaLine(plans[0]) }}</span>
+            </span>
+          </div>
+          <p v-if="plans[0].price" class="pl-[30px] text-[12.5px] font-semibold text-[#2f5fe0]">{{ plans[0].price }}</p>
+          <p v-if="plans[0].description" class="pl-[30px] text-[12.5px] text-gray-500">{{ plans[0].description }}</p>
+        </div>
+
+        <div v-else class="flex flex-col gap-[10px]">
           <label v-for="course in plans" :key="course.id"
             class="relative flex cursor-pointer items-center gap-3 rounded-[10px] border px-4 py-[14px] transition-colors"
             :class="selectedCourseId === course.id ? 'border-[#2f5fe0] bg-[#eef3ff]' : 'border-[#e2e5ee] bg-white'">
@@ -165,7 +192,7 @@ async function handleSubmit() {
             </span>
             <span class="flex flex-col gap-[2px]">
               <span class="text-sm font-semibold text-slate-900">{{ course.name }}</span>
-              <span class="text-[12.5px] text-gray-500">{{ formatLevel(course.level) }} · {{ course.duration }}</span>
+              <span v-if="planMetaLine(course)" class="text-[12.5px] text-gray-500">{{ planMetaLine(course) }}</span>
             </span>
           </label>
         </div>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  plans: Array<{
+    id: string
+    name: string
+    level: string
+    duration: string
+    icon: string
+  }>
+  selectedPlanId?: string
+}>()
+</script>
+
+<template>
+  <div class="min-h-screen bg-[#f4f5f9] px-6 py-[7rem] font-sans text-slate-900">
+    <div class="mx-auto grid max-w-[1000px] grid-cols-1 items-start gap-6 md:grid-cols-[340px_1fr]">
+      <!-- Left column -->
+      <RegistrationSidebar />
+
+      <!-- Right column: form -->
+      <RegistrationForm :plans="plans" :selected-plan-id="selectedPlanId" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,70 @@
+<template>
+  <aside class="flex flex-col gap-4">
+    <div class="rounded-2xl border border-[#e7e9f0] bg-white p-7">
+      <h2 class="mb-5 text-[17px] font-bold text-slate-900">Vì sao chọn chúng tôi</h2>
+      <ul class="flex flex-col gap-[22px]">
+        <li class="flex items-start gap-3">
+          <span
+            class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
+            <svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+              <circle cx="9" cy="7" r="4" />
+              <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+              <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+            </svg>
+          </span>
+          <span class="flex flex-col gap-[3px]">
+            <span class="text-sm font-semibold text-slate-900">Lớp nhỏ, kèm sát</span>
+            <span class="text-[13px] leading-relaxed text-gray-500">Sĩ số giới hạn, giảng viên hỗ trợ trực tiếp
+              từng học viên.</span>
+          </span>
+        </li>
+        <li class="flex items-start gap-3">
+          <span
+            class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
+            <svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M22 10 12 5 2 10l10 5 10-5Z" />
+              <path d="M6 12v5c0 1.66 2.69 3 6 3s6-1.34 6-3v-5" />
+            </svg>
+          </span>
+          <span class="flex flex-col gap-[3px]">
+            <span class="text-sm font-semibold text-slate-900">Thực hành hệ thống thật</span>
+            <span class="text-[13px] leading-relaxed text-gray-500">Thao tác trên cụm Proxmox HCI thực tế, không
+              chỉ lý thuyết.</span>
+          </span>
+        </li>
+        <li class="flex items-start gap-3">
+          <span
+            class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
+            <svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+              stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10" />
+              <path d="m9 12 2 2 4-4" />
+            </svg>
+          </span>
+          <span class="flex flex-col gap-[3px]">
+            <span class="text-sm font-semibold text-slate-900">Chứng nhận hoàn thành</span>
+            <span class="text-[13px] leading-relaxed text-gray-500">Cấp chứng nhận và hỗ trợ tư vấn nghề nghiệp
+              sau khóa học.</span>
+          </span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="rounded-2xl border border-[#dbe4fd] bg-[#eef2ff] px-6 py-[22px]">
+      <p class="mb-2 flex items-center gap-[9px] text-sm font-bold text-[#2f5fe0]">
+        <svg class="h-[17px] w-[17px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M23 7 16 12l7 5V7Z" />
+          <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+        </svg>
+        Khai giảng linh hoạt
+      </p>
+      <p class="text-[13px] leading-relaxed text-gray-600">
+        Lịch học buổi tối và cuối tuần, phù hợp cho cả người đi làm. Hỗ trợ ghi hình buổi học để xem lại.
+      </p>
+    </div>
+  </aside>
+</template>

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

@@ -1,7 +1,7 @@
 <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/${slug}`" class="flex items-center gap-2.5">
+      <NuxtLink :to="`/giai-phap-proxmox/khoa-hoc-proxmox-hci`" class="flex items-center gap-2.5">
         <img src="/images/logo-lvs-1300x330.png" alt="Long Vân" class="h-8 w-auto" />
       </NuxtLink>
 
@@ -16,7 +16,7 @@
             ]">
               {{ link.label }}
             </NuxtLink>
-            <a v-else :href="`/giai-phap-proxmox/${slug}#${link.id}`" @click.prevent="handleAnchorClick(link)" :class="[
+            <a v-else :href="`/giai-phap-proxmox/khoa-hoc-proxmox-hci#${link.id}`" @click.prevent="handleAnchorClick(link)" :class="[
               'pb-1 border-b-2 transition-all duration-200 cursor-pointer',
               activeSection === link.id
                 ? 'text-[#004AC6] font-bold border-[#004AC6]'
@@ -25,7 +25,7 @@
               {{ link.label }}
             </a>
           </template>
-          <a v-else :href="`/giai-phap-proxmox/${slug}#${link.id}`" @click.prevent="handleAnchorClick(link)" :class="[
+          <a v-else :href="`/giai-phap-proxmox/khoa-hoc-proxmox-hci#${link.id}`" @click.prevent="handleAnchorClick(link)" :class="[
             'pb-1 border-b-2 transition-all duration-200 cursor-pointer',
             activeSection === link.id
               ? 'text-[#004AC6] font-bold border-[#004AC6]'
@@ -65,16 +65,16 @@
 
       <!-- Not logged in -->
       <div v-else class="flex items-center gap-3">
-        <a v-if="isConsultant" :href="`/giai-phap-proxmox/${slug}#lien-he`" @click.prevent="scrollTo('lien-he')"
+        <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
           <Icon name="lucide:headset" class="text-[16px]" />
         </a>
-        <NuxtLink to="/dang-nhap"
+        <a :href="loginHref"
           class="inline-flex items-center gap-1.5 text-sm font-bold px-5 py-2.5 rounded-[10px] bg-[#004AC6] text-white hover:bg-[#1D4ED8] transition-all active:scale-95 shadow-sm shadow-blue-600/20">
           Đăng nhập
           <Icon name="lucide:log-in" class="text-[16px]" />
-        </NuxtLink>
+        </a>
       </div>
     </div>
   </header>
@@ -98,7 +98,7 @@ const route = useRoute()
 const tokenKey = config.public.ACCESSTOKEN_NAME as string
 
 const navLinks = computed(() => [
-  { id: 'san-pham', label: 'Sản phẩm', path: `/giai-phap-proxmox/${props.slug}/proxmox-hci` },
+  { id: 'san-pham', label: 'Sản phẩm', path: `/gioi-thieu-san-pham/proxmox-hci` },
   { id: 'giai-phap', label: 'Vì sao chọn chúng tôi' },
   { id: 'chi-phi', label: 'Học phí' },
   { id: 'khach-hang', label: 'Học viên nói gì' },
@@ -106,6 +106,10 @@ const navLinks = computed(() => [
 
 const { scrollTo } = useScrollToSection()
 
+// route.fullPath gồm cả query hiện tại (vd ?plan=...&name=...) để sau khi đăng nhập quay lại đúng chỗ
+// Trang đăng nhập nằm ở domain LONGVAN_WEB (vd https://dev.longvan.net), không phải app này
+const loginHref = computed(() => `${config.public.LONGVAN_WEB}/dang-nhap?redirectUrl=${encodeURIComponent(route.fullPath)}`)
+
 const activeSection = useActiveSection(navLinks.value.map(l => l.id))
 const user = ref<{ fullName?: string; username?: string } | null>(null)
 const showMenu = ref(false)

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

@@ -0,0 +1,45 @@
+// 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',
+  }
+}

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

@@ -28,6 +28,23 @@ export const useSolutionApi = () => {
         return data
     }
 
+    // Tạm thời: dò slug path theo cấp bất kỳ (slug/slug2/slug3), lấy object đầu tiên rồi gọi resume theo profileId
+    const getSlugData = async (slug: string) => {
+        const list = await handleGetSlugPathView(slug, 'giai-phap')
+        console.log("🚀 ~ getSlugData ~ list:", list)
+
+        const first = list?.[0]
+        console.log("🚀 ~ getSlugData ~ first:", first)
+
+        const profileId = first?.profileId
+        if (!profileId) return { productData: first, resumeData: null }
+
+        const resumeData = await getResumeByIdData(profileId)   
+        console.log("🚀 ~ getSlugData ~ resumeData:", resumeData)
+
+        return { productData: first, resumeData }
+    }
+
     const getSolutionDetail = async (slug: string, type: string) => {
         const productData = await handleGetSlugPathView(slug, type)
 
@@ -51,5 +68,6 @@ export const useSolutionApi = () => {
         getPublicProductDynamic,
         getResumeByIdData,
         getSolutionDetail,
+        getSlugData,
     }
 }

package/app/layers/solution/app/nuxt.config.ts

@@ -6,4 +6,10 @@ export default defineNuxtConfig({
       "types",
     ],
   },
+  components: [
+    {
+      path: "./components",
+      global: true,
+    },
+  ],
 })

package/app/layers/solution/app/pages/[slug]/[slug2]/[slug3]/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+const { getSlugData } = useSolutionApi()
+
+const slug3 = computed(() => route.params.slug3 as string)
+
+const { data } = await useAsyncData(
+  `slug3-${slug3.value}`,
+  () => getSlugData(slug3.value),
+  { server: true }
+)
+</script>
+
+<template>
+  <DynamicPageSections
+    :field-resumes="data?.resumeData?.fieldResumes"
+    :target-c-t-a="data?.productData?.targetCTA"
+    :slug="data?.productData?.slug || slug3"
+  />
+</template>

package/app/layers/solution/app/pages/[slug]/[slug2]/index.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+const { getSlugData } = useSolutionApi()
+
+const slug2 = computed(() => route.params.slug2 as string)
+
+const { data } = await useAsyncData(
+  `slug2-${slug2.value}`,
+  () => getSlugData(slug2.value),
+  { server: true }
+)
+</script>
+
+<template>
+  <DynamicPageSections
+    :field-resumes="data?.resumeData?.fieldResumes"
+    :target-c-t-a="data?.productData?.targetCTA"
+    :slug="data?.productData?.slug || slug2"
+  />
+  <!-- {{ data }} -->
+</template>

package/app/layers/solution/app/pages/[slug]/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+const { getSlugData } = useSolutionApi()
+
+const slug = computed(() => route.params.slug as string)
+
+const { data } = await useAsyncData(
+  `slug-${slug.value}`,
+  () => getSlugData(slug.value),
+  { server: true }
+)
+</script>
+
+<template>
+  <DynamicPageSections
+    :field-resumes="data?.resumeData?.fieldResumes"
+    :target-c-t-a="data?.productData?.targetCTA"
+    :slug="data?.productData?.slug || slug"
+  />
+</template>

package/app/layers/solution/app/pages/dang-ky-tu-van/khoa-hoc-proxmox.vue.disabled

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+
+// Gói cần tư vấn được mang theo qua query từ CoursesSection (không fetch lại API)
+const selectedPlan = computed(() => {
+  const id = route.query.plan
+  if (!id) return null
+
+  return {
+    id: String(id),
+    name: String(route.query.name || ''),
+    level: String(route.query.level || ''),
+    duration: String(route.query.duration || ''),
+    price: String(route.query.price || ''),
+    description: String(route.query.description || ''),
+    icon: 'lucide:server',
+  }
+})
+
+const plans = computed(() => (selectedPlan.value ? [selectedPlan.value] : []))
+
+useHead({
+  title: computed(() =>
+    selectedPlan.value?.name ? `Đăng ký tư vấn - ${selectedPlan.value.name}` : 'Đăng ký tư vấn khóa học Proxmox'
+  ),
+})
+</script>
+
+<template>
+  <div class="bg-ink text-cloud font-body antialiased">
+    <TheHeader />
+
+    <RegistrationSection :plans="plans" :selected-plan-id="selectedPlan?.id" />
+
+    <TheFooter />
+  </div>
+</template>

package/app/layers/solution/app/pages/giai-phap-proxmox/dang-ky-khoa-hoc/[slug].vue.disabled

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+const { getSolutionDetail } = useSolutionApi()
+
+const slug = computed(() => route.params.slug as string)
+
+// SSR data fetch
+const { data, error } = await useAsyncData(
+  `dang-ky-${slug.value}`,
+  () => getSolutionDetail(slug.value, 'giai-phap'),
+  { server: true }
+)
+
+if (error.value || !data.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Không tìm thấy khóa học', fatal: true })
+}
+
+// Format plans from resumeData
+const formatPlans = (resumeData: any) => {
+  const fieldResumes = resumeData?.fieldResumes || []
+  return fieldResumes
+    ?.filter((group: any) => group?.type === 'FIELD_GROUP' && Array.isArray(group?.children))
+    ?.map((group: any) => {
+      const fields = Object.fromEntries(
+        group.children?.map((field: any) => [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 plans = computed(() => formatPlans(data.value?.resumeData))
+const targetCTA = computed(() => data.value?.productData?.[0]?.targetCTA || '')
+const selectedPlanId = computed(() => (route.query.plan as string) || '')
+
+useHead({
+  title: computed(() => `Đăng ký khóa học - ${data.value?.productData?.[0]?.product?.title || 'Proxmox HCI'}`),
+})
+</script>
+
+<template>
+  <div class="bg-ink text-cloud font-body antialiased">
+    <TheHeader :target-c-t-a="targetCTA" :slug="slug" />
+
+    <RegistrationSection :plans="plans" :selected-plan-id="selectedPlanId" />
+
+    <TheFooter />
+  </div>
+</template>

package/app/pages/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 // import GiaiPhapPage from '../layers/solution/app/pages/giai-phap-proxmox/[slug]/index.vue'
-import GiaiPhapPage from '../layers/solution/app/pages/giai-phap-proxmox/[slug]/proxmox-hci/index.vue'
+// import GiaiPhapPage from '../layers/solution/app/pages/giai-phap-proxmox/[slug]/proxmox-hci/index.vue'
+import GiaiPhapPage from '../layers/solution/app/pages/[slug]/[slug2]/index.vue'
 </script>
 
 <template>

package/nuxt.config.ts

@@ -80,6 +80,7 @@ export default defineNuxtConfig({
       STORE_ID: process.env.STORE_ID,
       ENVIROMENT: process.env.ENVIROMENT,
       ACCESSTOKEN_NAME: process.env.ACCESSTOKEN_NAME || 'accessToken',
+      LONGVAN_WEB: process.env.LONGVAN_WEB
     },
   },
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-layer-core",
   "type": "module",
   "private": false,
-  "version": "2.0.2",
+  "version": "2.0.3",
   "scripts": {
     "build": "env-cmd -f .env nuxt build",
     "dev": "env-cmd -f .env nuxt dev"

package/app/layers/solution/app/pages/giai-phap-proxmox/dang-ky-khoa-hoc/[slug].vue

@@ -1,131 +0,0 @@
-<script setup lang="ts">
-definePageMeta({ layout: 'default' })
-
-const route = useRoute()
-const { getSolutionDetail } = useSolutionApi()
-
-const slug = computed(() => route.params.slug as string)
-
-// SSR data fetch
-const { data, error } = await useAsyncData(
-  `dang-ky-${slug.value}`,
-  () => getSolutionDetail(slug.value, 'giai-phap'),
-  { server: true }
-)
-
-if (error.value || !data.value) {
-  throw createError({ statusCode: 404, statusMessage: 'Không tìm thấy khóa học', fatal: true })
-}
-
-// Format plans from resumeData
-const formatPlans = (resumeData: any) => {
-  const fieldResumes = resumeData?.fieldResumes || []
-  return fieldResumes
-    ?.filter((group: any) => group?.type === 'FIELD_GROUP' && Array.isArray(group?.children))
-    ?.map((group: any) => {
-      const fields = Object.fromEntries(
-        group.children?.map((field: any) => [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 plans = computed(() => formatPlans(data.value?.resumeData))
-const targetCTA = computed(() => data.value?.productData?.[0]?.targetCTA || '')
-const selectedPlanId = computed(() => (route.query.plan as string) || '')
-
-useHead({
-  title: computed(() => `Đăng ký khóa học - ${data.value?.productData?.[0]?.product?.title || 'Proxmox HCI'}`),
-})
-</script>
-
-<template>
-  <div class="bg-ink text-cloud font-body antialiased">
-    <TheHeader :target-c-t-a="targetCTA" :slug="slug" />
-
-    <div class="min-h-screen bg-[#f4f5f9] px-6 py-[7rem] font-sans text-slate-900">
-      <div class="mx-auto grid max-w-[1000px] grid-cols-1 items-start gap-6 md:grid-cols-[340px_1fr]">
-        <!-- Left column -->
-        <aside class="flex flex-col gap-4">
-          <div class="rounded-2xl border border-[#e7e9f0] bg-white p-7">
-            <h2 class="mb-5 text-[17px] font-bold text-slate-900">Vì sao chọn chúng tôi</h2>
-            <ul class="flex flex-col gap-[22px]">
-              <li class="flex items-start gap-3">
-                <span
-                  class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
-                  <svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-                    <circle cx="9" cy="7" r="4" />
-                    <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-                  </svg>
-                </span>
-                <span class="flex flex-col gap-[3px]">
-                  <span class="text-sm font-semibold text-slate-900">Lớp nhỏ, kèm sát</span>
-                  <span class="text-[13px] leading-relaxed text-gray-500">Sĩ số giới hạn, giảng viên hỗ trợ trực tiếp
-                    từng học viên.</span>
-                </span>
-              </li>
-              <li class="flex items-start gap-3">
-                <span
-                  class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
-                  <svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M22 10 12 5 2 10l10 5 10-5Z" />
-                    <path d="M6 12v5c0 1.66 2.69 3 6 3s6-1.34 6-3v-5" />
-                  </svg>
-                </span>
-                <span class="flex flex-col gap-[3px]">
-                  <span class="text-sm font-semibold text-slate-900">Thực hành hệ thống thật</span>
-                  <span class="text-[13px] leading-relaxed text-gray-500">Thao tác trên cụm Proxmox HCI thực tế, không
-                    chỉ lý thuyết.</span>
-                </span>
-              </li>
-              <li class="flex items-start gap-3">
-                <span
-                  class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
-                  <svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="10" />
-                    <path d="m9 12 2 2 4-4" />
-                  </svg>
-                </span>
-                <span class="flex flex-col gap-[3px]">
-                  <span class="text-sm font-semibold text-slate-900">Chứng nhận hoàn thành</span>
-                  <span class="text-[13px] leading-relaxed text-gray-500">Cấp chứng nhận và hỗ trợ tư vấn nghề nghiệp
-                    sau khóa học.</span>
-                </span>
-              </li>
-            </ul>
-          </div>
-
-          <div class="rounded-2xl border border-[#dbe4fd] bg-[#eef2ff] px-6 py-[22px]">
-            <p class="mb-2 flex items-center gap-[9px] text-sm font-bold text-[#2f5fe0]">
-              <svg class="h-[17px] w-[17px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M23 7 16 12l7 5V7Z" />
-                <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
-              </svg>
-              Khai giảng linh hoạt
-            </p>
-            <p class="text-[13px] leading-relaxed text-gray-600">
-              Lịch học buổi tối và cuối tuần, phù hợp cho cả người đi làm. Hỗ trợ ghi hình buổi học để xem lại.
-            </p>
-          </div>
-        </aside>
-
-        <!-- Right column: form -->
-        <RegistrationForm :plans="plans" :selected-plan-id="selectedPlanId" />
-      </div>
-    </div>
-
-    <TheFooter />
-  </div>
-</template>