nuxt-layer-core 1.1.1 → 1.1.3

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

@@ -1,245 +1,245 @@
-<template>
-  <section id="dao-tao" class="py-24 bg-[#F7F9FB] border-t border-slate-200">
-    <div class="max-w-7xl mx-auto px-6 lg:px-8" id="chi-phi">
-      <div class="text-center mb-20">
-        <span
-          class="inline-block text-[#004AC6] font-bold uppercase tracking-widest text-xs mb-3 px-3 py-1 bg-blue-50 rounded-full">
-          Chương trình đào tạo
-        </span>
-        <h3 class="font-['Montserrat'] font-extrabold text-3xl sm:text-4xl text-slate-900 mb-4">
-          Các khóa đào tạo Proxmox VE
-        </h3>
-        <p class="text-slate-500 max-w-2xl mx-auto leading-relaxed">
-          Nội dung bám sát chương trình chính thức của Proxmox, kết hợp lý thuyết chuyên sâu và thực hành trên hệ thống
-          thực tế.
-        </p>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
-        <div v-for="(plan, i) in formattedPlans" :key="plan.id" :data-delay="i * 150" class="course-card group relative"
-          :class="plan.highlight ? 'md:-mt-6' : 'md:mt-0'">
-          <!-- 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">
-          </div>
-
-          <div
-            class="relative bg-white rounded-2xl flex flex-col overflow-hidden transition-all duration-300 ease-out h-full"
-            :class="plan.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="plan.highlight"
-              class="bg-gradient-to-r from-[#004AC6] to-[#1D63E0] text-white text-[11px] font-bold py-2.5 text-center uppercase tracking-widest flex items-center justify-center gap-1.5">
-              <Icon name="lucide:sparkles" class="w-3.5 h-3.5" />
-              Được tư vấn chọn nhiều nhất
-            </div>
-
-            <div class="p-7 flex flex-col gap-5">
-              <div class="flex justify-between items-start">
-                <div
-                  class="w-12 h-12 rounded-xl flex items-center justify-center transition-transform duration-300 group-hover:scale-105"
-                  :class="plan.highlight
-                    ? 'bg-blue-50 text-[#004AC6] ring-4 ring-blue-50/70'
-                    : 'bg-slate-50 text-slate-400'
-                    ">
-                  <!-- <Icon :name="plan.icon" class="w-5 h-5" /> -->
-                  <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 34 512 444">
-                    <path
-                      d="M137.9 34.1c-10.5 0-19.7 1.9-28.5 5.7-8.6 3.8-16.2 8.9-22.9 15.6l170 186.4L426.1 55.3c-6.7-6.7-14.3-11.8-23.4-15.6-8.3-3.8-18-5.7-28-5.7-10.5 0-20.5 2.2-29.4 6.2-9.2 4-16.7 10-23.7 17l-65.2 72.2-66-72.2c-6.7-7-14.3-12.9-23.7-17-8.3-4-18.3-6.1-28.8-6.1M256.4 270l-170 186.7c6.7 6.5 14.3 11.8 22.9 15.6 8.9 3.8 18.1 5.7 28 5.7 11 0 20.5-2.4 29.4-6.2 9.4-4.3 17.5-10 24.2-17l65.5-72.2 65.4 72.2c6.7 7 14.3 12.7 23.4 17 8.9 3.8 18.6 6.2 29.4 6.2 10 0 19.7-1.9 28-5.7 9.2-3.8 16.7-9.2 23.4-15.6z"
-                      style="fill-rule:evenodd;clip-rule:evenodd" />
-                    <path
-                      d="M56 90.1c-10.8.3-21.3 2.4-30.7 6.5-9.7 4-18 9.7-25.3 16.7L129.8 256 0 398.5c7.3 7.3 15.6 12.9 25.3 17.2 9.4 4.3 19.9 6.2 30.7 6.7 11.6-.5 22.4-2.4 32.3-7.3q15-6.9 25.8-18.6l128-140.5-127.9-140.3c-7.8-7.5-16.2-13.7-26.1-18.6-10-4.6-20.5-6.7-32.1-7m399.7 0c-11.6.3-21.8 2.4-31.8 7-10 4.8-18.6 11-26.1 18.6L270.4 256l127.4 140.6q11.25 11.7 26.1 18.6c10 4.8 20.2 6.7 31.8 7.3 11.6-.5 21.5-2.4 31-6.7 10.2-4.3 18-10 25.3-17.2L382.5 256 512 113.3c-7.3-7-15.1-12.7-25.3-16.7-9.4-4.1-19.4-6.2-31-6.5"
-                      style="fill-rule:evenodd;clip-rule:evenodd;fill:#e57000" />
-                  </svg>
-                </div>
-
-                <span class="text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full" :class="plan.highlight
-                  ? 'bg-blue-50 text-[#004AC6]'
-                  : 'bg-slate-100 text-slate-500'
-                  ">
-                  {{ formatLevel(plan.level) }}
-                </span>
-              </div>
-
-              <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.description }}
-                </p>
-              </div>
-
-              <div class="pb-5 border-b border-slate-100">
-                <span class="font-['Montserrat'] font-extrabold text-2xl text-slate-900">
-                  {{ plan.duration }}
-                </span>
-                <span class="text-slate-400 text-sm flex items-center gap-1.5 mt-2">
-                  <Icon name="lucide:monitor-play" class="w-4 h-4" />
-                  Online / thực hành
-                </span>
-              </div>
-
-              <span class="text-[13px] text-slate-600 leading-loose [&_svg]:inline [&_svg]:text-[#004AC6]"
-                v-html="plan.included"></span>
-
-              <div v-if="plan.outcome" class="p-4 rounded-xl" :class="plan.highlight
-                ? 'bg-gradient-to-br from-blue-50 to-indigo-50/60 border border-blue-100'
-                : 'bg-slate-50 border border-slate-100'
-                ">
-                <span class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest mb-2"
-                  :class="plan.highlight ? 'text-[#004AC6]' : 'text-slate-500'">
-                  <Icon name="lucide:target" class="w-3.5 h-3.5" />
-                  Kết quả đạt được
-                </span>
-                <p class="text-xs leading-relaxed font-semibold"
-                  :class="plan.highlight ? 'text-blue-900' : 'text-slate-700'">
-                  {{ plan.outcome }}
-                </p>
-              </div>
-            </div>
-
-            <div v-if="isConsultant" class="p-7 pt-2 mt-auto">
-              <button @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
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup>
-useScrollAnimate('.course-card', 'fade-up')
-
-const props = defineProps({
-  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')
-const router = useRouter()
-
-function handleSelectPlan(plan) {
-  router.push({
-    path: `/tu-van/khoa-hoc-proxmox`,
-    query: {
-      plan: plan.id,
-      name: plan.name,
-      level: plan.level,
-      duration: plan.duration,
-      description: plan.description || '',
-    },
-  })
-}
-
-function formatLevel(level) {
-  const labels = {
-    basic: 'Cơ bản',
-    advanced: 'Nâng cao',
-    expert: 'Chuyên gia',
-  }
-
-  return labels[level || ''] || level || ''
-}
-
-const samplePlans = [
-  {
-    id: 'sample-1',
-    name: 'Deployment & Management',
-    icon: 'lucide:graduation-cap',
-    level: 'Nền tảng',
-    duration: '14 giờ · Từ 2 buổi',
-    description: 'Dành cho IT admin, kỹ sư hệ thống cần triển khai và quản trị ảo hóa trên máy chủ đơn.',
-    included: [
-      'Kiến trúc, cài đặt & thiết lập hệ thống',
-      'Cấu hình mạng (Bridge, VLAN, SDN)',
-      'Lưu trữ nội bộ & quản lý VM/LXC',
-      'Backup & Restore qua giao diện/CLI',
-      'Phân quyền, xác thực & Tường lửa',
-      'Chuyển đổi V2V và P2V'
-    ],
-    highlight: false,
-    outcome: 'Thành thạo triển khai, vận hành, sao lưu và xử lý sự cố trên máy chủ đơn lẻ.'
-  },
-  {
-    id: 'sample-2',
-    name: 'Clustering & Shared Storage',
-    icon: 'lucide:network',
-    level: 'Chuyên sâu',
-    duration: '14 giờ · Từ 2 buổi',
-    description: 'Kỹ sư cần xây dựng cụm, triển khai HA, Ceph và tối ưu hóa tài nguyên diện rộng.',
-    included: [
-      'Kiến trúc cụm (Corosync, pmxcfs)',
-      'Triển khai lưu trữ siêu hội tụ Ceph',
-      'Tính sẵn sàng cao (HA) cho VM/LXC',
-      'Nhân bản đĩa ZFS (Replication)',
-      'Kịch bản sự cố & QDevice tiebreaker',
-      'Tự động hóa với REST API & CLI'
-    ],
-    highlight: true,
-    outcome: 'Đủ năng lực quản trị cụm nhiều node, lưu trữ phân tán Ceph và duy trì HA an toàn.'
-  },
-  {
-    id: 'sample-3',
-    name: 'Proxmox VE Bundle',
-    icon: 'lucide:package',
-    level: 'Trọn gói',
-    duration: '28 giờ · Từ 4-5 buổi',
-    description: 'Deep dive nền tảng toàn diện: bao trọn kiến thức từ máy chủ đơn đến cụm phức tạp.',
-    included: [
-      'Trọn bộ nội dung khóa Nền tảng',
-      'Trọn bộ nội dung khóa Chuyên sâu',
-      'Lab thực hành với môi trường thực tế',
-      'Hướng dẫn xử lý các ca lỗi production'
-    ],
-    highlight: false,
-    outcome: 'Trở thành chuyên gia Proxmox thực thụ, sẵn sàng thi chứng chỉ và quản trị hạ tầng quy mô lớn.'
-  }
-]
-
-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 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: '',
-  }))
-})
+<template>
+  <section id="dao-tao" class="py-24 bg-[#F7F9FB] border-t border-slate-200">
+    <div class="max-w-7xl mx-auto px-6 lg:px-8" id="chi-phi">
+      <div class="text-center mb-20">
+        <span
+          class="inline-block text-[#004AC6] font-bold uppercase tracking-widest text-xs mb-3 px-3 py-1 bg-blue-50 rounded-full">
+          Chương trình đào tạo
+        </span>
+        <h3 class="font-['Montserrat'] font-extrabold text-3xl sm:text-4xl text-slate-900 mb-4">
+          Các khóa đào tạo Proxmox VE
+        </h3>
+        <p class="text-slate-500 max-w-2xl mx-auto leading-relaxed">
+          Nội dung bám sát chương trình chính thức của Proxmox, kết hợp lý thuyết chuyên sâu và thực hành trên hệ thống
+          thực tế.
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
+        <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'">
+          <!-- 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">
+          </div>
+
+          <div
+            class="relative bg-white rounded-2xl flex flex-col overflow-hidden transition-all duration-300 ease-out h-full"
+            :class="plan.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="plan.highlight"
+              class="bg-gradient-to-r from-[#004AC6] to-[#1D63E0] text-white text-[11px] font-bold py-2.5 text-center uppercase tracking-widest flex items-center justify-center gap-1.5">
+              <Icon name="lucide:sparkles" class="w-3.5 h-3.5" />
+              Được tư vấn chọn nhiều nhất
+            </div>
+
+            <div class="p-7 flex flex-col gap-5">
+              <div class="flex justify-between items-start">
+                <div
+                  class="w-12 h-12 rounded-xl flex items-center justify-center transition-transform duration-300 group-hover:scale-105"
+                  :class="plan.highlight
+                    ? 'bg-blue-50 text-[#004AC6] ring-4 ring-blue-50/70'
+                    : 'bg-slate-50 text-slate-400'
+                    ">
+                  <!-- <Icon :name="plan.icon" class="w-5 h-5" /> -->
+                  <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 34 512 444">
+                    <path
+                      d="M137.9 34.1c-10.5 0-19.7 1.9-28.5 5.7-8.6 3.8-16.2 8.9-22.9 15.6l170 186.4L426.1 55.3c-6.7-6.7-14.3-11.8-23.4-15.6-8.3-3.8-18-5.7-28-5.7-10.5 0-20.5 2.2-29.4 6.2-9.2 4-16.7 10-23.7 17l-65.2 72.2-66-72.2c-6.7-7-14.3-12.9-23.7-17-8.3-4-18.3-6.1-28.8-6.1M256.4 270l-170 186.7c6.7 6.5 14.3 11.8 22.9 15.6 8.9 3.8 18.1 5.7 28 5.7 11 0 20.5-2.4 29.4-6.2 9.4-4.3 17.5-10 24.2-17l65.5-72.2 65.4 72.2c6.7 7 14.3 12.7 23.4 17 8.9 3.8 18.6 6.2 29.4 6.2 10 0 19.7-1.9 28-5.7 9.2-3.8 16.7-9.2 23.4-15.6z"
+                      style="fill-rule:evenodd;clip-rule:evenodd" />
+                    <path
+                      d="M56 90.1c-10.8.3-21.3 2.4-30.7 6.5-9.7 4-18 9.7-25.3 16.7L129.8 256 0 398.5c7.3 7.3 15.6 12.9 25.3 17.2 9.4 4.3 19.9 6.2 30.7 6.7 11.6-.5 22.4-2.4 32.3-7.3q15-6.9 25.8-18.6l128-140.5-127.9-140.3c-7.8-7.5-16.2-13.7-26.1-18.6-10-4.6-20.5-6.7-32.1-7m399.7 0c-11.6.3-21.8 2.4-31.8 7-10 4.8-18.6 11-26.1 18.6L270.4 256l127.4 140.6q11.25 11.7 26.1 18.6c10 4.8 20.2 6.7 31.8 7.3 11.6-.5 21.5-2.4 31-6.7 10.2-4.3 18-10 25.3-17.2L382.5 256 512 113.3c-7.3-7-15.1-12.7-25.3-16.7-9.4-4.1-19.4-6.2-31-6.5"
+                      style="fill-rule:evenodd;clip-rule:evenodd;fill:#e57000" />
+                  </svg>
+                </div>
+
+                <span class="text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full" :class="plan.highlight
+                  ? 'bg-blue-50 text-[#004AC6]'
+                  : 'bg-slate-100 text-slate-500'
+                  ">
+                  {{ formatLevel(plan.level) }}
+                </span>
+              </div>
+
+              <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.description }}
+                </p>
+              </div>
+
+              <div class="pb-5 border-b border-slate-100">
+                <span class="font-['Montserrat'] font-extrabold text-2xl text-slate-900">
+                  {{ plan.duration }}
+                </span>
+                <span class="text-slate-400 text-sm flex items-center gap-1.5 mt-2">
+                  <Icon name="lucide:monitor-play" class="w-4 h-4" />
+                  Online / thực hành
+                </span>
+              </div>
+
+              <span class="text-[13px] text-slate-600 leading-loose [&_svg]:inline [&_svg]:text-[#004AC6]"
+                v-html="plan.included"></span>
+
+              <div v-if="plan.outcome" class="p-4 rounded-xl" :class="plan.highlight
+                ? 'bg-gradient-to-br from-blue-50 to-indigo-50/60 border border-blue-100'
+                : 'bg-slate-50 border border-slate-100'
+                ">
+                <span class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest mb-2"
+                  :class="plan.highlight ? 'text-[#004AC6]' : 'text-slate-500'">
+                  <Icon name="lucide:target" class="w-3.5 h-3.5" />
+                  Kết quả đạt được
+                </span>
+                <p class="text-xs leading-relaxed font-semibold"
+                  :class="plan.highlight ? 'text-blue-900' : 'text-slate-700'">
+                  {{ plan.outcome }}
+                </p>
+              </div>
+            </div>
+
+            <div v-if="isConsultant" class="p-7 pt-2 mt-auto">
+              <button @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
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+useScrollAnimate('.course-card', 'fade-up')
+
+const props = defineProps({
+  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')
+const router = useRouter()
+
+function handleSelectPlan(plan) {
+  router.push({
+    path: `/tu-van/khoa-hoc-proxmox`,
+    query: {
+      plan: plan.id,
+      name: plan.name,
+      level: plan.level,
+      duration: plan.duration,
+      description: plan.description || '',
+    },
+  })
+}
+
+function formatLevel(level) {
+  const labels = {
+    basic: 'Cơ bản',
+    advanced: 'Nâng cao',
+    expert: 'Chuyên gia',
+  }
+
+  return labels[level || ''] || level || ''
+}
+
+const samplePlans = [
+  {
+    id: 'sample-1',
+    name: 'Deployment & Management',
+    icon: 'lucide:graduation-cap',
+    level: 'Nền tảng',
+    duration: '14 giờ · Từ 2 buổi',
+    description: 'Dành cho IT admin, kỹ sư hệ thống cần triển khai và quản trị ảo hóa trên máy chủ đơn.',
+    included: [
+      'Kiến trúc, cài đặt & thiết lập hệ thống',
+      'Cấu hình mạng (Bridge, VLAN, SDN)',
+      'Lưu trữ nội bộ & quản lý VM/LXC',
+      'Backup & Restore qua giao diện/CLI',
+      'Phân quyền, xác thực & Tường lửa',
+      'Chuyển đổi V2V và P2V'
+    ],
+    highlight: false,
+    outcome: 'Thành thạo triển khai, vận hành, sao lưu và xử lý sự cố trên máy chủ đơn lẻ.'
+  },
+  {
+    id: 'sample-2',
+    name: 'Clustering & Shared Storage',
+    icon: 'lucide:network',
+    level: 'Chuyên sâu',
+    duration: '14 giờ · Từ 2 buổi',
+    description: 'Kỹ sư cần xây dựng cụm, triển khai HA, Ceph và tối ưu hóa tài nguyên diện rộng.',
+    included: [
+      'Kiến trúc cụm (Corosync, pmxcfs)',
+      'Triển khai lưu trữ siêu hội tụ Ceph',
+      'Tính sẵn sàng cao (HA) cho VM/LXC',
+      'Nhân bản đĩa ZFS (Replication)',
+      'Kịch bản sự cố & QDevice tiebreaker',
+      'Tự động hóa với REST API & CLI'
+    ],
+    highlight: true,
+    outcome: 'Đủ năng lực quản trị cụm nhiều node, lưu trữ phân tán Ceph và duy trì HA an toàn.'
+  },
+  {
+    id: 'sample-3',
+    name: 'Proxmox VE Bundle',
+    icon: 'lucide:package',
+    level: 'Trọn gói',
+    duration: '28 giờ · Từ 4-5 buổi',
+    description: 'Deep dive nền tảng toàn diện: bao trọn kiến thức từ máy chủ đơn đến cụm phức tạp.',
+    included: [
+      'Trọn bộ nội dung khóa Nền tảng',
+      'Trọn bộ nội dung khóa Chuyên sâu',
+      'Lab thực hành với môi trường thực tế',
+      'Hướng dẫn xử lý các ca lỗi production'
+    ],
+    highlight: false,
+    outcome: 'Trở thành chuyên gia Proxmox thực thụ, sẵn sàng thi chứng chỉ và quản trị hạ tầng quy mô lớn.'
+  }
+]
+
+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 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>