nuxt-layer-core 1.1.3 → 1.1.4

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

@@ -15,9 +15,10 @@
         </p>
       </div>
 
-      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
+      <div class="grid gap-6 lg:gap-8"
+        :class="formattedPlans.length === 1 ? 'grid-cols-1 justify-items-center' : 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'">
         <div v-for="(plan, i) in formattedPlans" :key="plan.id" :data-delay="i * 150" class="course-card group relative"
-          :class="plan.highlight ? 'lg:-mt-6' : 'lg:mt-0'">
+          :class="[plan.highlight ? 'lg:-mt-6' : 'lg:mt-0', formattedPlans.length === 1 ? 'w-full max-w-sm' : '']">
           <!-- Glow nền cho card nổi bật -->
           <div v-if="plan.highlight"
             class="absolute -inset-3 bg-gradient-to-br from-[#004AC6]/25 via-blue-400/15 to-transparent rounded-[28px] blur-2xl opacity-70 -z-10">
@@ -66,8 +67,8 @@
                 <h4 class="font-bold text-xl text-slate-900 mb-2">
                   {{ plan.name }}
                 </h4>
-                <p class="text-slate-500 text-sm leading-relaxed">
-                  {{ plan.description }}
+                <p v-if="plan.tagline" class="text-slate-500 text-sm leading-relaxed">
+                  {{ plan.tagline }}
                 </p>
               </div>
 
@@ -81,6 +82,8 @@
                 </span>
               </div>
 
+              <p class="text-slate-500 text-sm leading-relaxed" v-html="plan.description"></p>
+
               <span class="text-[13px] text-slate-600 leading-loose [&_svg]:inline [&_svg]:text-[#004AC6]"
                 v-html="plan.included"></span>
 
@@ -100,13 +103,22 @@
               </div>
             </div>
 
-            <div v-if="isConsultant" class="p-7 pt-2 mt-auto">
-              <button @click="handleSelectPlan(plan)"
+            <div v-if="plan.url || isConsultant" class="p-7 pt-2 mt-auto">
+              <a v-if="plan.url" :href="plan.url" target="_blank" rel="noopener noreferrer"
+                class="w-full py-3.5 rounded-xl font-bold text-sm transition-all duration-300 cursor-pointer inline-flex items-center justify-center gap-2"
+                :class="plan.highlight
+                  ? 'bg-[#004AC6] text-white shadow-lg shadow-blue-500/25 hover:bg-[#1D4ED8] hover:shadow-blue-500/40'
+                  : 'border border-slate-200 text-slate-600 hover:border-[#004AC6] hover:text-[#004AC6] hover:bg-blue-50/50'
+                  ">
+                {{ plan.titleButton || 'Đăng ký ngay' }}
+                <Icon name="lucide:arrow-up-right" class="w-4 h-4" />
+              </a>
+              <button v-else @click="handleSelectPlan(plan)"
                 class="w-full py-3.5 rounded-xl font-bold text-sm transition-all duration-300 cursor-pointer" :class="plan.highlight
                   ? 'bg-[#004AC6] text-white shadow-lg shadow-blue-500/25 hover:bg-[#1D4ED8] hover:shadow-blue-500/40'
                   : 'border border-slate-200 text-slate-600 hover:border-[#004AC6] hover:text-[#004AC6] hover:bg-blue-50/50'
                   ">
-                Liên hệ tư vấn
+                {{ plan.titleButton || 'Liên hệ tư vấn' }}
               </button>
             </div>
           </div>
@@ -233,12 +245,16 @@ const formattedPlans = computed(() => {
   return items.map((item, index) => ({
     id: item.id || `plan-${index}`,
     name: item.name,
+    tagline: item.tagline,
     level: item.level,
     duration: item.duration,
     description: item.description,
     included: item.features,
     icon: item.icon,
-    highlight: index === 1,
+    url: item.url,
+    titleButton: item.titleButton,
+    // Chỉ 1 khóa -> tự động highlight (không có khóa khác để so sánh nên luôn là khóa nổi bật)
+    highlight: items.length === 1 ? true : index === 1,
     outcome: '',
   }))
 })

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

@@ -172,7 +172,6 @@ function formatLevel(level) {
   return labels[level || ''] || level || ''
 }
 
-// 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' },
@@ -183,7 +182,6 @@ const pricingCategoryMeta = {
 // props.courses / props.pricingPlans[category] đã được DynamicPageSections chuẩn hoá chung shape (normalizePlanItem)
 const formattedPlans = computed(() => {
   const courseOptions = props.courses
-    .filter((item) => !item.url)
     .map((item) => ({
       id: item.id,
       name: item.name,
@@ -195,7 +193,6 @@ const formattedPlans = computed(() => {
   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,

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

@@ -79,6 +79,13 @@
 
       <Transition name="fade-swap" mode="out-in">
         <div :key="activeVersionId" class="flex flex-col gap-14">
+          <div
+            v-if="activeVersion.groups.length === 0"
+            class="text-center text-slate-400 text-sm py-14 border border-dashed border-slate-200 rounded-2xl"
+          >
+            Chưa có gói dịch vụ nào được cấu hình cho phiên bản này.
+          </div>
+
           <div
             v-for="(group, gi) in activeVersion.groups"
             :key="group.id"
@@ -95,15 +102,18 @@
               </div>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="grid gap-6"
+              :class="group.packages.length === 1 ? 'grid-cols-1 justify-items-center' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'">
               <div
                 v-for="pkg in group.packages"
                 :key="pkg.id"
                 class="relative bg-white rounded-2xl flex flex-col overflow-hidden transition-all duration-300 ease-out"
-                :class="pkg.highlight
-                  ? 'ring-1 ring-[#004AC6]/15 shadow-[0_8px_30px_-6px_rgba(0,74,198,0.25)] hover:shadow-[0_20px_45px_-10px_rgba(0,74,198,0.35)] hover:-translate-y-1'
-                  : 'ring-1 ring-slate-200 shadow-[0_2px_10px_-2px_rgba(15,23,42,0.06)] hover:ring-blue-200 hover:shadow-[0_12px_30px_-8px_rgba(15,23,42,0.12)] hover:-translate-y-1'
-                  "
+                :class="[
+                  group.packages.length === 1 ? 'w-full max-w-sm' : '',
+                  pkg.highlight
+                    ? 'ring-1 ring-[#004AC6]/15 shadow-[0_8px_30px_-6px_rgba(0,74,198,0.25)] hover:shadow-[0_20px_45px_-10px_rgba(0,74,198,0.35)] hover:-translate-y-1'
+                    : 'ring-1 ring-slate-200 shadow-[0_2px_10px_-2px_rgba(15,23,42,0.06)] hover:ring-blue-200 hover:shadow-[0_12px_30px_-8px_rgba(15,23,42,0.12)] hover:-translate-y-1'
+                ]"
               >
                 <div
                   v-if="pkg.highlight"
@@ -121,7 +131,7 @@
 
                   <div class="pb-1">
                     <span class="font-['Montserrat'] font-extrabold text-xl text-slate-900">
-                      {{ formatPrice(pkg.price) }}đ
+                      {{ pkg.price }}
                     </span>
                     <span class="text-slate-400 text-sm">{{ pkg.unit }}</span>
                   </div>
@@ -158,7 +168,7 @@
                       : 'border border-slate-200 text-slate-600 hover:border-[#004AC6] hover:text-[#004AC6] hover:bg-blue-50/50'
                       "
                   >
-                    Đăng ký ngay
+                    {{ pkg.titleButton || 'Đăng ký ngay' }}
                   </button>
                 </div>
               </div>
@@ -207,7 +217,12 @@ const normalizeGroup = (raw) => {
     name: raw.name,
     icon: raw.icon || 'lucide:server-cog',
     desc: raw.desc || '',
-    packages: Array.isArray(raw.packages) ? raw.packages : [],
+    // Chỉ 1 gói -> tự động highlight (không có gói khác để so sánh nên luôn là gói nổi bật)
+    packages: Array.isArray(raw.packages)
+      ? raw.packages.length === 1
+        ? [{ ...raw.packages[0], highlight: true }]
+        : raw.packages
+      : [],
   }
 }
 
@@ -283,10 +298,6 @@ function handleSelectPackage(pkg, group) {
   })
 }
 
-function formatPrice(value) {
-  if (!value && value !== 0) return ''
-  return new Intl.NumberFormat('vi-VN').format(value)
-}
 
 const sectionRoot = ref(null)
 const revealed = ref(false)

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

@@ -76,13 +76,14 @@
 
           <!-- Pricing cards -->
           <Transition name="fade-swap" mode="out-in">
-            <div :key="activeTab + '-' + activePeriod" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
+            <div :key="activeTab + '-' + activePeriod" class="grid gap-6 lg:gap-8"
+              :class="activePlans.length === 1 ? 'grid-cols-1 justify-items-center' : 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'">
               <div
                 v-for="(plan, i) in activePlans"
                 :key="plan.name"
                 class="pricing-reveal group relative"
                 :style="{ '--i': i }"
-                :class="plan.highlight ? 'lg:-mt-6' : 'lg:mt-0'"
+                :class="[plan.highlight ? 'lg:-mt-6' : 'lg:mt-0', activePlans.length === 1 ? 'w-full max-w-sm' : '']"
               >
                 <div
                   v-if="plan.highlight"
@@ -107,7 +108,7 @@
                   <div class="p-7 flex flex-col gap-4">
                     <div>
                       <h4 class="font-bold text-xl text-slate-900 mb-2">{{ plan.name }}</h4>
-                      <p class="text-slate-500 text-sm leading-relaxed">{{ plan.desc }}</p>
+                      <p v-if="plan.tagline" class="text-slate-500 text-sm leading-relaxed">{{ plan.tagline }}</p>
                     </div>
 
                     <div class="pb-1">
@@ -116,13 +117,15 @@
                       </span>
                       <template v-else>
                         <span class="font-['Montserrat'] font-extrabold text-2xl sm:text-[28px] text-slate-900">
-                          {{ plan.priceLabel }}{{ formatPrice(plan.price) }}đ
+                          {{ plan.price }}
                         </span>
                         <span class="text-slate-400 text-sm">{{ plan.unit }}</span>
                       </template>
                       <p class="text-slate-400 text-xs mt-1.5">{{ plan.priceNote }}</p>
                     </div>
 
+                    <p class="text-slate-500 text-sm leading-relaxed" v-html="plan.desc"></p>
+
                     <div class="flex flex-wrap gap-1.5">
                       <span
                         v-for="tag in plan.tags"
@@ -157,20 +160,16 @@
                         : 'border border-slate-200 text-slate-600 hover:border-[#004AC6] hover:text-[#004AC6] hover:bg-blue-50/50'
                         "
                     >
-                      Đăng ký ngay
+                      {{ plan.titleButton || 'Đăng ký ngay' }}
                       <Icon name="lucide:arrow-up-right" class="w-4 h-4" />
                     </a>
                     <button
                       v-else
                       type="button"
-                      @click="handleContactClick(plan)"
-                      class="w-full py-3.5 rounded-xl font-bold text-sm transition-all duration-300 cursor-pointer"
-                      :class="plan.highlight
-                        ? 'bg-[#004AC6] text-white shadow-lg shadow-blue-500/25 hover:bg-[#1D4ED8] hover:shadow-blue-500/40'
-                        : 'border border-slate-200 text-slate-600 hover:border-[#004AC6] hover:text-[#004AC6] hover:bg-blue-50/50'
-                        "
+                      disabled
+                      class="w-full py-3.5 rounded-xl font-bold text-sm cursor-not-allowed opacity-50 border border-slate-200 text-slate-600"
                     >
-                      {{ activeTabData.cta }}
+                      {{ plan.titleButton || activeTabData.cta }}
                     </button>
                   </div>
                 </div>
@@ -203,34 +202,6 @@ const props = defineProps({
 
 useScrollAnimate('.pricing-header', 'fade-up')
 
-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) {
-  const priceText = plan.priceLabel || typeof plan.price === 'number'
-    ? `${plan.priceLabel || ''}${formatPrice(plan.price)}đ${plan.unit ? ' ' + plan.unit : ''}`
-    : ''
-
-  router.push({
-    path: `/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)
 const revealed = ref(false)
 
@@ -312,9 +283,9 @@ const toPricingPlan = (item) => {
   return {
     id: normalized.id,
     name: normalized.name,
+    tagline: normalized.tagline,
     desc: normalized.description,
     unit: normalized.duration,
-    priceLabel: normalized.priceLabel,
     price: normalized.price,
     prices: normalized.prices,
     priceNote: normalized.priceNote,
@@ -322,6 +293,7 @@ const toPricingPlan = (item) => {
     features: normalized.features,
     highlight: normalized.highlight,
     url: normalized.url,
+    titleButton: normalized.titleButton,
   }
 }
 
@@ -335,26 +307,27 @@ const trainingItems = computed(() =>
   [props.itemId01Groups03, props.itemId02Groups03, props.itemId03Groups03].map(toPricingPlan).filter(Boolean)
 )
 
+// Chỉ 1 gói -> tự động highlight (không có gói khác để so sánh nên luôn là gói nổi bật)
+const withSingleHighlight = (plans) => (plans.length === 1 ? [{ ...plans[0], highlight: true }] : plans)
+
 const activePlans = computed(() => {
   if (activeTab.value === 'workshop') {
-    return workshopItems.value.length > 0 ? workshopItems.value : workshopPlans
+    return withSingleHighlight(workshopItems.value.length > 0 ? workshopItems.value : workshopPlans)
   }
   if (activeTab.value === 'training') {
-    return trainingItems.value.length > 0 ? trainingItems.value : trainingPlans
+    return withSingleHighlight(trainingItems.value.length > 0 ? trainingItems.value : trainingPlans)
   }
 
   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`,
-  }))
+  return withSingleHighlight(
+    source.map((plan) => ({
+      ...plan,
+      price: plan.prices?.[activePeriod.value],
+      priceNote: `Giá thuê khi ký hợp đồng ${activePeriod.value} tháng`,
+    }))
+  )
 })
 
-function formatPrice(value) {
-  if (!value && value !== 0) return ''
-  return new Intl.NumberFormat('vi-VN').format(value)
-}
 </script>
 
 <style scoped>

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'
@@ -238,20 +239,11 @@ async function handleSubmit() {
       <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 justify-center gap-[10px] sm:justify-start">
-          <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
+          <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/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>

package/app/layers/solution/app/pages/gioi-thieu-san-pham/[slug]/index.vue

@@ -11,12 +11,118 @@ 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 goi_san_pham_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
+}
+
+// Gói thuê hạ tầng (goi_san_pham_*): giá theo 3 kỳ hạn 12/24/36 tháng, dùng thẳng text CMS trả về
+const toRentalPlanItem = (fieldName: string, highlight = false) => {
+  const group = findFieldGroup(fieldName)
+  if (!group) return undefined
+
+  return {
+    productId: group.productid,
+    name: group.name,
+    tagline: group.tagline,
+    unit: group.don_vi ? `/${group.don_vi}` : '',
+    // short_description là rich text từ CMS, PricingPlansSection render bằng v-html
+    short_description: group.short_description,
+    prices: {
+      12: group.gia_thue_12_thang,
+      24: group.gia_thue_24_thang,
+      36: group.gia_thue_36_thang,
+    },
+    url: group.url,
+    title_button: group.title_button,
+    highlight,
+  }
+}
+
+// Workshop / khóa đào tạo (goi_workshop_*, goi_dao_tao_proxmox_*): 1 mức giá duy nhất
+const toFlatPriceItem = (fieldName: string, highlight = false) => {
+  const group = findFieldGroup(fieldName)
+  if (!group) return undefined
+
+  return {
+    productId: group.productid,
+    name: group.name,
+    tagline: group.tagline,
+    unit: group.don_vi ? `/${group.don_vi}` : '',
+    short_description: group.short_description,
+    price: group.hoc_phi,
+    url: group.url,
+    title_button: group.title_button,
+    highlight,
+  }
+}
+
+const pricingHci01 = computed(() => toRentalPlanItem('goi_san_pham_co_ban'))
+const pricingHci02 = computed(() => toRentalPlanItem('goi_san_pham_nang_cao', true))
+const pricingHci03 = computed(() => toRentalPlanItem('goi_san_pham_cao_cap'))
+
+const pricingWorkshop01 = computed(() => toFlatPriceItem('goi_workshop_co_ban'))
+const pricingWorkshop02 = computed(() => toFlatPriceItem('goi_workshop_nang_cao', true))
+const pricingWorkshop03 = computed(() => toFlatPriceItem('goi_workshop_cao_cap'))
+
+const pricingTraining01 = computed(() => toFlatPriceItem('goi_dao_tao_proxmox_co_ban'))
+const pricingTraining02 = computed(() => toFlatPriceItem('goi_dao_tao_proxmox_nang_cao', true))
+const pricingTraining03 = computed(() => toFlatPriceItem('goi_dao_tao_proxmox_cao_cap'))
+
+// Đồng bộ dropdown "Khóa học quan tâm" của CtaSection với đúng data đang hiện ở PricingPlansSection
+const pricingPlans = computed(() => ({
+  hci: [pricingHci01.value, pricingHci02.value, pricingHci03.value].map(normalizePlanItem).filter(Boolean),
+  workshop: [pricingWorkshop01.value, pricingWorkshop02.value, pricingWorkshop03.value].map(normalizePlanItem).filter(Boolean),
+  training: [pricingTraining01.value, pricingTraining02.value, pricingTraining03.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>
+    <main class="min-h-screen bg-white text-slate-900">
+      <TheHeader :target-c-t-a="targetCTA" :slug="pageSlug" />
+      <ProxmoxHeroSection />
+      <ProxmoxPainPointsSection />
+      <ProxmoxVeFeaturesSection />
+      <ProxmoxHciOverviewSection />
+      <PricingPlansSection
+        :item-id01-groups01="pricingHci01"
+        :item-id02-groups01="pricingHci02"
+        :item-id03-groups01="pricingHci03"
+        :item-id01-groups02="pricingWorkshop01"
+        :item-id02-groups02="pricingWorkshop02"
+        :item-id03-groups02="pricingWorkshop03"
+        :item-id01-groups03="pricingTraining01"
+        :item-id02-groups03="pricingTraining02"
+        :item-id03-groups03="pricingTraining03"
+      />
+      <ProxmoxTrainingBenefitsSection />
+      <ProxmoxComparisonSection />
+      <!-- <CoursesSection :target-c-t-a="targetCTA" :slug="pageSlug" /> -->
+      <!-- <ProxmoxTestimonialsSection />
+      <ProxmoxFaqSection /> -->
+      <CtaSection :pricing-plans="pricingPlans" />
+      <TheFooter />
+    </main>
+  </div>
 </template>

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

@@ -1,22 +1,136 @@
-<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, 'gioi-thieu-template'),
-  { server: true }
-)
-</script>
-
-<template>
-  <DynamicPageSections
-    :field-resumes="data?.resumeData?.fieldResumes"
-    :target-c-t-a="data?.productData?.targetCTA"
-    :slug="data?.productData?.slug || slug"
-  />
-</template>
+<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, 'gioi-thieu-template'),
+  { server: true }
+)
+
+const targetCTA = computed(() => data.value?.productData?.targetCTA)
+const pageSlug = computed(() => data.value?.productData?.slug || slug.value)
+
+// Lấy 1 field group (vd version-khuyen-nghi) từ fieldResumes, gom children về object phẳng { name, type, ... }
+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
+}
+
+// 1 phiên bản Ubuntu (version-khuyen-nghi, version_on_dinh, version_lts)
+const toVersionMeta = (fieldName: string, badgeTone: string, recommended = false) => {
+  const group = findFieldGroup(fieldName)
+  if (!group) return undefined
+
+  return {
+    id: group.productid,
+    version: String(group.name || '').replace(/^Ubuntu\s+/i, ''),
+    codename: '',
+    badge: group.type,
+    badgeTone,
+    recommended,
+    releaseDate: group.createdate,
+    supportUntil: group.expired ? `Hỗ trợ đến ${group.expired}` : '',
+    desc: group.description,
+  }
+}
+
+const versionRecommended = computed(() => toVersionMeta('version-khuyen-nghi', 'primary', true))
+const versionStable = computed(() => toVersionMeta('version_on_dinh', 'amber'))
+const versionLts = computed(() => toVersionMeta('version_lts', 'slate'))
+
+// short_description là rich text <ul><li>✓ ...</li></ul> -> tách thành mảng text thuần
+// (template tự thêm icon check riêng nên phải bỏ ký tự ✓ có sẵn trong CMS để khỏi lặp)
+const parseFeatureList = (html?: string | null) => {
+  if (!html) return []
+
+  return [...html.matchAll(/<li[^>]*>([\s\S]*?)<\/li>/gi)]
+    .map((match) =>
+      (match[1] || '')
+        .replace(/<[^>]+>/g, '')
+        .replace(/&amp;/g, '&')
+        .replace(/^[✓\s]+/, '')
+        .trim()
+    )
+    .filter(Boolean)
+}
+
+// 1 gói dịch vụ (san_pham_01/02/03), gắn với 1 phiên bản Ubuntu qua relate_groups <-> productid của version
+const toPackage = (fieldName: string) => {
+  const group = findFieldGroup(fieldName)
+  if (!group?.name) return null
+
+  return {
+    id: group.productid || group.product_slug || group.name,
+    relateGroups: group.relate_groups,
+    name: group.name,
+    desc: group.tagline,
+    price: group.gia_tien,
+    unit: group.don_vi ? `/${group.don_vi}` : '',
+    features: parseFeatureList(group.short_description),
+    url: group.url,
+    titleButton: group.title_button,
+    highlight: false,
+  }
+}
+
+const packages = computed(() =>
+  [toPackage('san_pham_01'), toPackage('san_pham_02'), toPackage('san_pham_03')].filter(
+    (pkg): pkg is NonNullable<typeof pkg> => !!pkg
+  )
+)
+
+// Gom các gói thuộc về đúng phiên bản Ubuntu thành 1 nhóm sản phẩm cho phiên bản đó
+const toProductGroup = (versionId?: string) => {
+  const items = packages.value.filter((pkg) => pkg.relateGroups === versionId)
+  if (!items.length) return undefined
+
+  return {
+    id: 'goi-dich-vu',
+    name: 'Gói dịch vụ đề xuất',
+    icon: 'lucide:server-cog',
+    desc: '',
+    packages: items,
+  }
+}
+
+const groupRecommended = computed(() => toProductGroup(versionRecommended.value?.id))
+const groupStable = computed(() => toProductGroup(versionStable.value?.id))
+const groupLts = computed(() => toProductGroup(versionLts.value?.id))
+</script>
+
+<template>
+  <!-- <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" />
+    <LinuxIntroSection />
+    <LinuxVersionsSection
+      :groups-item01="versionRecommended"
+      :groups-item02="versionStable"
+      :groups-item03="versionLts"
+      :item-id01-groups01="groupRecommended"
+      :item-id01-groups02="groupStable"
+      :item-id01-groups03="groupLts"
+    />
+    <WhyChooseUbuntuSection />
+    <TheFooter />
+  </div>
+</template>

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

@@ -11,12 +11,67 @@ 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 giá trị 1 field top-level (vd name, level) từ fieldResumes
+const findFieldValue = (fieldName: string) => {
+  const field = data.value?.resumeData?.fieldResumes?.find(
+    (item: any) => item?.fieldName === fieldName && item?.type === 'FIELD'
+  )
+  return field?.value ?? ''
+}
+
+// Lấy 1 field group (vd hinh_thuc_hoc_online) từ fieldResumes, gom children về object phẳng { name, type }
+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 plan = computed(() => ({
+  id: findFieldValue('productid') || pageSlug.value,
+  name: findFieldValue('name'),
+  level: findFieldValue('level'),
+  duration: findFieldValue('thoi-gian'),
+  description: findFieldValue('short_description'),
+  icon: 'lucide:server',
+}))
+
+const toStudyMode = (fieldName: string) => {
+  const group = findFieldGroup(fieldName)
+  if (!group) return null
+  return { name: group.name, type: String(group.type || '').trim() }
+}
+
+const studyModes = computed(() =>
+  [
+    toStudyMode('hinh_thuc_hoc_online'),
+    toStudyMode('hinh_thuc_hoc_tai_lop'),
+    toStudyMode('dao_tao_doanh_nghiep'),
+  ].filter((mode): mode is { name: string; type: string } => !!mode)
+)
 </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" />
+    <RegistrationSection :plans="[plan]" :study-modes="studyModes" />
+    <TheFooter />
+  </div>
 </template>

package/package.json

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