nuxt-layer-core 2.0.1 → 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

@@ -148,13 +148,14 @@
 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 { 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ờ' },
@@ -171,29 +172,46 @@ 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(() => formattedPlans.value)
+
 // Form state
 const form = reactive({ name: '', phone: '', email: '' })
 const errors = reactive({ name: '', phone: '', email: '', course: '' })
@@ -221,9 +239,9 @@ watch(() => props.selectedPlanId, (id) => {
 
 // Search filter
 const filteredCourses = computed(() => {
-  if (!searchQuery.value) return formattedPlans.value
+  if (!searchQuery.value) return dropdownPlans.value
   const q = searchQuery.value.toLowerCase()
-  return formattedPlans.value.filter(p =>
+  return dropdownPlans.value.filter(p =>
     p.name.toLowerCase().includes(q) || p.level.toLowerCase().includes(q)
   )
 })

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

@@ -146,8 +146,24 @@
                   </div>
 
                   <div 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'
+                        "
+                    >
+                      Đă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'
@@ -168,8 +184,53 @@
 </template>
 
 <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 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: `/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)
 const revealed = ref(false)
 
@@ -193,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' },
@@ -223,144 +286,6 @@ const hciInfoCards = [
   },
 ]
 
-const hciPlans = [
-  {
-    name: 'HCI Starter',
-    desc: 'Cụm 3 node cho doanh nghiệp vừa và nhỏ',
-    unit: '/tháng',
-    priceLabel: '',
-    prices: { 12: 14900000, 24: 11900000, 36: 9900000 },
-    tags: ['3 node x86', 'Ceph 3 bản sao', '10 GbE nội cụm', '~20 TB khả dụng'],
-    features: [
-      'Không chi phí đầu tư thiết bị ban đầu',
-      'Triển khai, tinh chỉnh và bật High Availability',
-      'Bảo hành, thay thế phần cứng trong suốt thời gian thuê',
-      'Đào tạo vận hành 1 buổi cho đội IT',
-    ],
-    highlight: false,
-  },
-  {
-    name: 'HCI Pro',
-    desc: 'Cụm mở rộng cho hệ thống production',
-    unit: '/tháng',
-    priceLabel: '',
-    prices: { 12: 27900000, 24: 23900000, 36: 20900000 },
-    tags: ['5 node NVMe', 'Ceph RBD + CephFS', '25 GbE dự phòng', '~60 TB khả dụng'],
-    features: [
-      'Proxmox Backup Server riêng đi kèm',
-      'SDN, firewall phân tầng cho từng VM',
-      'Giám sát, cảnh báo toàn cụm 24/7',
-      'Nâng cấp cấu hình giữa kỳ không phát sinh phí ký lại',
-    ],
-    highlight: true,
-  },
-  {
-    name: 'HCI Datacenter',
-    desc: 'Đa site, khôi phục thảm họa',
-    unit: '',
-    contact: true,
-    tags: ['Từ 8 node', 'Ceph đa pool', 'Mạng lõi 100 GbE', 'Dung lượng theo yêu cầu'],
-    features: [
-      'Nhân bản chéo hai trung tâm dữ liệu',
-      'Kịch bản DR và diễn tập định kỳ',
-      'Tự động hóa qua API/Terraform',
-      'Kỹ sư trực onsite theo SLA cam kết',
-    ],
-    highlight: false,
-  },
-]
-
-const workshopPlans = [
-  {
-    name: 'Workshop Trực tuyến',
-    desc: 'Tham gia từ xa · lab riêng trên cloud',
-    unit: '/học viên',
-    priceLabel: '',
-    price: 2900000,
-    priceNote: '',
-    tags: ['1 ngày · 8 giờ', 'Trực tuyến', 'Lab cloud riêng'],
-    features: [
-      'Cài đặt Proxmox VE từ số 0',
-      'Dựng cụm HCI với Ceph, bật High Availability',
-      'Ghi hình buổi học để xem lại 30 ngày',
-      'Checklist triển khai dùng ngay',
-    ],
-    highlight: false,
-  },
-  {
-    name: 'Workshop Tại lớp',
-    desc: 'Học trực tiếp cùng giảng viên',
-    unit: '/học viên',
-    priceLabel: '',
-    price: 3900000,
-    priceNote: '',
-    tags: ['1 ngày · 8 giờ', 'Tại lớp', 'Thiết bị thật tại lab'],
-    features: [
-      'Thao tác trực tiếp trên cụm nhiều node',
-      'Mô phỏng sự cố node và tự phục hồi',
-      'Hỏi đáp 1-1 với giảng viên',
-      'Suất ăn trưa và tài liệu in kèm',
-    ],
-    highlight: true,
-  },
-  {
-    name: 'Workshop Nội bộ doanh nghiệp',
-    desc: 'Tổ chức riêng cho đội IT của bạn',
-    unit: '/lớp tối đa 15 người',
-    priceLabel: 'Từ ',
-    price: 39000000,
-    priceNote: '',
-    tags: ['1-2 ngày', 'Tại doanh nghiệp', 'Nội dung tùy chỉnh'],
-    features: [
-      'Nội dung thiết kế theo hạ tầng hiện có',
-      'Giảng viên và thiết bị lab tới tận nơi',
-      'Đánh giá năng lực đội IT sau workshop',
-      'Ưu đãi khi kết hợp gói thuê HCI',
-    ],
-    highlight: false,
-  },
-]
-
-const trainingPlans = [
-  {
-    name: 'Deployment & Management',
-    desc: 'Nền tảng · máy chủ đơn',
-    unit: '/học viên',
-    priceLabel: 'Từ ',
-    price: 9900000,
-    priceNote: '',
-    tags: ['14 giờ · 2 buổi', 'Trực tuyến hoặc tại lớp', 'Lab thực hành riêng'],
-    features: ['Cài đặt, mạng, lưu trữ, VM/LXC', 'Backup, phân quyền, tường lửa', 'Chứng nhận hoàn thành Proxmox'],
-    highlight: false,
-  },
-  {
-    name: 'Clustering & Shared Storage',
-    desc: 'Chuyên sâu · cụm và Ceph',
-    unit: '/học viên',
-    priceLabel: 'Từ ',
-    price: 11900000,
-    priceNote: '',
-    tags: ['14 giờ · 2 buổi', 'Trực tuyến hoặc tại lớp', 'Lab cụm nhiều node'],
-    features: ['Cluster, pmxcfs, Corosync, SDN', 'Ceph HCI, ZFS replication, HA', 'Kịch bản sự cố thực chiến'],
-    highlight: true,
-  },
-  {
-    name: 'Proxmox VE Bundle',
-    desc: 'Trọn gói cả hai khóa · tiết kiệm hơn',
-    unit: '/học viên',
-    priceLabel: 'Từ ',
-    price: 19900000,
-    priceNote: '',
-    tags: ['28 giờ · 4-5 buổi', 'Trực tuyến hoặc tại lớp', 'Lộ trình liền mạch'],
-    features: [
-      'Gồm đủ Module 1 và Module 2',
-      'Ưu đãi khi đăng ký theo nhóm',
-      'Hỗ trợ hỏi đáp sau khóa học',
-    ],
-    highlight: false,
-  },
-]
-
 const tabContent = {
   hci: {
     intro: 'Thuê cụm siêu hội tụ theo tháng: không đầu tư ban đầu, đã bao gồm phần cứng, triển khai Ceph, HA và đội ngũ vận hành.',
@@ -378,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>