nuxt-layer-core 1.0.8 → 1.1.0

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

@@ -1,331 +1,349 @@
-<template>
-  <section id="phien-ban" ref="sectionRoot" class="py-24 bg-[#F7F9FB] overflow-hidden"
-    :class="{ 'versions-revealed': revealed }">
-    <div class="max-w-6xl mx-auto px-6 lg:px-8">
-      <div class="text-center mb-12 versions-header">
-        <h2 class="text-[#004AC6] font-bold uppercase tracking-widest text-sm mb-2">Phiên bản hỗ trợ</h2>
-        <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-4xl text-slate-900 mb-4">
-          Chọn phiên bản Ubuntu<br class="hidden sm:block" />
-          phù hợp với hệ thống của bạn
-        </h3>
-        <p class="text-slate-500 max-w-2xl mx-auto leading-relaxed">
-          Mỗi phiên bản Ubuntu có vòng đời hỗ trợ khác nhau. Chọn một phiên bản để triển khai,
-          sau đó chọn gói dịch vụ tương ứng bên dưới.
-        </p>
-      </div>
-
-      <!-- Version cards -->
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
-        <button
-          v-for="version in resolvedVersions"
-          :key="version.id"
-          type="button"
-          @click="activeVersionId = version.id"
-          class="version-reveal relative text-left bg-white rounded-2xl border p-6 flex flex-col gap-4 transition-all duration-300 cursor-pointer"
-          :style="{ '--i': 0 }"
-          :class="activeVersionId === version.id
-            ? 'border-[#004AC6] ring-1 ring-[#004AC6]/25 shadow-[0_12px_30px_-8px_rgba(0,74,198,0.25)]'
-            : 'border-slate-200 hover:border-blue-200 hover:shadow-lg'
-            "
-        >
-          <span
-            v-if="activeVersionId === version.id"
-            class="absolute -top-2.5 -right-2.5 w-7 h-7 rounded-full bg-[#004AC6] text-white flex items-center justify-center shadow-md"
-          >
-            <Icon name="lucide:check" class="w-4 h-4" />
-          </span>
-
-          <div class="flex items-center justify-between">
-            <UbuntuMark :size="32" :stroke="toneOf(version).icon" :accent="toneOf(version).icon" />
-            <span
-              class="text-[11px] font-bold uppercase tracking-wide px-2.5 py-1 rounded-full text-white"
-              :class="toneOf(version).pill"
-            >
-              {{ version.badge }}
-            </span>
-          </div>
-
-          <div>
-            <h4 class="font-bold text-lg text-slate-900">Ubuntu {{ version.version }}</h4>
-            <p class="text-sm font-semibold" :class="toneOf(version).text">{{ version.codename }}</p>
-          </div>
-
-          <p class="text-sm text-slate-500 leading-relaxed grow">{{ version.desc }}</p>
-
-          <div class="text-xs text-slate-400 space-y-1 pt-3 border-t border-slate-100">
-            <p>Ra mắt: {{ version.releaseDate }}</p>
-            <p class="font-semibold text-slate-600">{{ version.supportUntil }}</p>
-          </div>
-
-          <span
-            class="mt-1 inline-flex items-center justify-center gap-2 w-full py-2.5 rounded-xl font-bold text-sm transition-all duration-300"
-            :class="activeVersionId === version.id
-              ? 'bg-[#004AC6] text-white shadow-lg shadow-blue-500/25'
-              : 'border border-slate-200 text-slate-600'
-              "
-          >
-            <Icon name="lucide:arrow-right" class="w-4 h-4" />
-            Triển khai
-          </span>
-        </button>
-      </div>
-
-      <!-- Product groups for the selected version -->
-      <div class="text-center mb-10">
-        <h4 class="font-['Montserrat'] font-extrabold text-xl sm:text-2xl text-slate-900">
-          Nhóm sản phẩm hỗ trợ trên Ubuntu {{ activeVersion.version }}
-        </h4>
-      </div>
-
-      <Transition name="fade-swap" mode="out-in">
-        <div :key="activeVersionId" class="flex flex-col gap-14">
-          <div
-            v-for="(group, gi) in activeVersion.groups"
-            :key="group.id"
-            class="version-reveal"
-            :style="{ '--i': gi + 1 }"
-          >
-            <div class="flex items-start gap-3 mb-6">
-              <div class="w-10 h-10 rounded-[10px] bg-blue-50 flex items-center justify-center text-[#004AC6] shrink-0">
-                <Icon :name="group.icon" class="w-5 h-5" />
-              </div>
-              <div>
-                <h4 class="font-bold text-lg text-slate-900">{{ group.name }}</h4>
-                <p class="text-sm text-slate-500 mt-0.5">{{ group.desc }}</p>
-              </div>
-            </div>
-
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              <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'
-                  "
-              >
-                <div
-                  v-if="pkg.highlight"
-                  class="bg-gradient-to-r from-[#004AC6] to-[#1D63E0] text-white text-[11px] font-bold py-2 text-center uppercase tracking-widest flex items-center justify-center gap-1.5"
-                >
-                  <Icon name="lucide:star" class="w-3.5 h-3.5" />
-                  Phổ biến nhất
-                </div>
-
-                <div class="p-6 flex flex-col gap-4 grow">
-                  <div>
-                    <h5 class="font-bold text-slate-900 mb-1.5">{{ pkg.name }}</h5>
-                    <p class="text-slate-500 text-sm leading-relaxed">{{ pkg.desc }}</p>
-                  </div>
-
-                  <div class="pb-1">
-                    <span class="font-['Montserrat'] font-extrabold text-xl text-slate-900">
-                      {{ formatPrice(pkg.price) }}đ
-                    </span>
-                    <span class="text-slate-400 text-sm">{{ pkg.unit }}</span>
-                  </div>
-
-                  <div class="flex flex-wrap gap-1.5">
-                    <span
-                      v-for="tag in pkg.tags"
-                      :key="tag"
-                      class="text-[11px] font-medium text-slate-500 bg-slate-50 border border-slate-100 rounded-md px-2 py-1"
-                    >
-                      {{ tag }}
-                    </span>
-                  </div>
-
-                  <ul class="flex flex-col gap-2 pt-3 border-t border-slate-100">
-                    <li
-                      v-for="feature in pkg.features"
-                      :key="feature"
-                      class="flex items-start gap-2 text-sm text-slate-600"
-                    >
-                      <Icon name="lucide:check" class="w-4 h-4 text-[#004AC6] mt-0.5 shrink-0" />
-                      {{ feature }}
-                    </li>
-                  </ul>
-                </div>
-
-                <div class="p-6 pt-2">
-                  <button
-                    type="button"
-                    @click="handleSelectPackage(pkg, group)"
-                    class="w-full py-3 rounded-xl font-bold text-sm transition-all duration-300 cursor-pointer"
-                    :class="pkg.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'
-                      "
-                  >
-                    Tư vấn gói này
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </div>
-  </section>
-</template>
-
-<script setup>
-// Data giả dùng khi chưa cấu hình CMS - đã tắt vì CMS đã có data thật, giữ lại để bật lại khi cần
-// import { ubuntuVersions as fallbackVersions } from '../data/linuxVersions'
-
-const props = defineProps({
-  activeVersionId: { type: String, default: '' },
-  // groupsItem0X: JSON thông tin 1 phiên bản Ubuntu (id, version, codename, badge, badgeTone, recommended, releaseDate, supportUntil, desc)
-  groupsItem01: { type: Object, default: null },
-  groupsItem02: { type: Object, default: null },
-  groupsItem03: { type: Object, default: null },
-  // itemId0X_groups_0Y: JSON 1 nhóm sản phẩm (id, name, icon, desc, packages[]) thuộc phiên bản groupsItem0Y
-  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 emit = defineEmits(['select-package'])
-
-useScrollAnimate('.versions-header', 'fade-up')
-
-// Chuẩn hoá 1 nhóm sản phẩm từ CMS (item_id_0X_groups_0Y)
-const normalizeGroup = (raw) => {
-  if (!raw || typeof raw !== 'object' || !raw.name) return null
-
-  return {
-    id: raw.id || raw.name,
-    name: raw.name,
-    icon: raw.icon || 'lucide:server-cog',
-    desc: raw.desc || '',
-    packages: Array.isArray(raw.packages) ? raw.packages : [],
-  }
-}
-
-// Ghép 1 phiên bản Ubuntu (groups_item_0X) + 3 nhóm sản phẩm của nó (item_id_0X_groups_0Y)
-// Không có data CMS cho slot nào -> bỏ qua slot đó (không dùng data giả để fallback nữa)
-const buildVersion = (meta, groupSlots) => {
-  if (!meta || typeof meta !== 'object' || !meta.id) return null
-
-  const groups = groupSlots.map(normalizeGroup).filter(Boolean)
-
-  return {
-    ...meta,
-    groups,
-  }
-}
-
-const resolvedVersions = computed(() =>
-  [
-    buildVersion(props.groupsItem01, [props.itemId01Groups01, props.itemId02Groups01, props.itemId03Groups01]),
-    buildVersion(props.groupsItem02, [props.itemId01Groups02, props.itemId02Groups02, props.itemId03Groups02]),
-    buildVersion(props.groupsItem03, [props.itemId01Groups03, props.itemId02Groups03, props.itemId03Groups03]),
-  ].filter(Boolean)
-)
-
-const isValidVersion = (id) => resolvedVersions.value.some((v) => v.id === id)
-
-const activeVersionId = ref(
-  isValidVersion(props.activeVersionId)
-    ? props.activeVersionId
-    : resolvedVersions.value.find((v) => v.recommended)?.id || resolvedVersions.value[0]?.id || ''
-)
-
-const emptyVersion = { version: '', codename: '', badge: '', badgeTone: 'slate', releaseDate: '', supportUntil: '', desc: '', groups: [] }
-
-const activeVersion = computed(
-  () =>
-    resolvedVersions.value.find((v) => v.id === activeVersionId.value) ||
-    resolvedVersions.value[0] ||
-    emptyVersion
-)
-
-const badgeToneMap = {
-  primary: { pill: 'bg-[#004AC6]', text: 'text-[#004AC6]', icon: '#004AC6' },
-  amber: { pill: 'bg-amber-500', text: 'text-amber-600', icon: '#d97706' },
-  slate: { pill: 'bg-slate-500', text: 'text-slate-600', icon: '#475569' },
-}
-
-const toneOf = (version) => badgeToneMap[version.badgeTone] || badgeToneMap.slate
-
-function handleSelectPackage(pkg, group) {
-  emit('select-package', {
-    id: pkg.id,
-    name: pkg.name,
-    level: `Ubuntu ${activeVersion.value.version} · ${group.name}`,
-    duration: pkg.unit,
-    icon: 'lucide:server-cog',
-  })
-}
-
-function formatPrice(value) {
-  if (!value && value !== 0) return ''
-  return new Intl.NumberFormat('vi-VN').format(value)
-}
-
-const sectionRoot = ref(null)
-const revealed = ref(false)
-
-onMounted(() => {
-  const observer = new IntersectionObserver(
-    (entries) => {
-      for (const entry of entries) {
-        if (entry.isIntersecting) {
-          revealed.value = true
-          observer.disconnect()
-        }
-      }
-    },
-    { threshold: 0.15 }
-  )
-
-  if (sectionRoot.value) observer.observe(sectionRoot.value)
-  onUnmounted(() => observer.disconnect())
-})
-</script>
-
-<style scoped>
-.version-reveal {
-  animation: version-group-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
-  animation-delay: calc(var(--i, 0) * 120ms);
-  animation-play-state: paused;
-}
-
-.versions-revealed .version-reveal {
-  animation-play-state: running;
-}
-
-@keyframes version-group-in {
-  from {
-    opacity: 0;
-    transform: translateY(24px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.fade-swap-enter-active,
-.fade-swap-leave-active {
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.fade-swap-enter-from {
-  opacity: 0;
-  transform: translateY(10px);
-}
-
-.fade-swap-leave-to {
-  opacity: 0;
-  transform: translateY(-6px);
-}
-</style>
+<template>
+  <section id="phien-ban" ref="sectionRoot" class="py-24 bg-[#F7F9FB] overflow-hidden"
+    :class="{ 'versions-revealed': revealed }">
+    <div class="max-w-6xl mx-auto px-6 lg:px-8">
+      <div class="text-center mb-12 versions-header">
+        <h2 class="text-[#004AC6] font-bold uppercase tracking-widest text-sm mb-2">Phiên bản hỗ trợ</h2>
+        <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-4xl text-slate-900 mb-4">
+          Chọn phiên bản Ubuntu<br class="hidden sm:block" />
+          phù hợp với hệ thống của bạn
+        </h3>
+        <p class="text-slate-500 max-w-2xl mx-auto leading-relaxed">
+          Mỗi phiên bản Ubuntu có vòng đời hỗ trợ khác nhau. Chọn một phiên bản để triển khai,
+          sau đó chọn gói dịch vụ tương ứng bên dưới.
+        </p>
+      </div>
+
+      <!-- Version cards -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
+        <button
+          v-for="version in resolvedVersions"
+          :key="version.id"
+          type="button"
+          @click="selectVersion(version.id)"
+          class="version-reveal relative text-left bg-white rounded-2xl border p-6 flex flex-col gap-4 transition-all duration-300 cursor-pointer"
+          :style="{ '--i': 0 }"
+          :class="activeVersionId === version.id
+            ? 'border-[#004AC6] ring-1 ring-[#004AC6]/25 shadow-[0_12px_30px_-8px_rgba(0,74,198,0.25)]'
+            : 'border-slate-200 hover:border-blue-200 hover:shadow-lg'
+            "
+        >
+          <span
+            v-if="activeVersionId === version.id"
+            class="absolute -top-2.5 -right-2.5 w-7 h-7 rounded-full bg-[#004AC6] text-white flex items-center justify-center shadow-md"
+          >
+            <Icon name="lucide:check" class="w-4 h-4" />
+          </span>
+
+          <div class="flex items-center justify-between">
+            <UbuntuMark :size="32" :stroke="toneOf(version).icon" :accent="toneOf(version).icon" />
+            <span
+              class="text-[11px] font-bold uppercase tracking-wide px-2.5 py-1 rounded-full text-white"
+              :class="toneOf(version).pill"
+            >
+              {{ version.badge }}
+            </span>
+          </div>
+
+          <div>
+            <h4 class="font-bold text-lg text-slate-900">Ubuntu {{ version.version }}</h4>
+            <p class="text-sm font-semibold" :class="toneOf(version).text">{{ version.codename }}</p>
+          </div>
+
+          <p class="text-sm text-slate-500 leading-relaxed grow">{{ version.desc }}</p>
+
+          <div class="text-xs text-slate-400 space-y-1 pt-3 border-t border-slate-100">
+            <p>Ra mắt: {{ version.releaseDate }}</p>
+            <p class="font-semibold text-slate-600">{{ version.supportUntil }}</p>
+          </div>
+
+          <span
+            class="mt-1 inline-flex items-center justify-center gap-2 w-full py-2.5 rounded-xl font-bold text-sm transition-all duration-300"
+            :class="activeVersionId === version.id
+              ? 'bg-[#004AC6] text-white shadow-lg shadow-blue-500/25'
+              : 'border border-slate-200 text-slate-600'
+              "
+          >
+            <Icon name="lucide:arrow-right" class="w-4 h-4" />
+            Triển khai
+          </span>
+        </button>
+      </div>
+
+      <!-- Product groups for the selected version -->
+      <div id="nhom-san-pham" class="text-center mb-10 scroll-mt-24">
+        <h4 class="font-['Montserrat'] font-extrabold text-xl sm:text-2xl text-slate-900">
+          Nhóm sản phẩm hỗ trợ trên Ubuntu {{ activeVersion.version }}
+        </h4>
+      </div>
+
+      <Transition name="fade-swap" mode="out-in">
+        <div :key="activeVersionId" class="flex flex-col gap-14">
+          <div
+            v-for="(group, gi) in activeVersion.groups"
+            :key="group.id"
+            class="version-reveal"
+            :style="{ '--i': gi + 1 }"
+          >
+            <div class="flex items-start gap-3 mb-6">
+              <div class="w-10 h-10 rounded-[10px] bg-blue-50 flex items-center justify-center text-[#004AC6] shrink-0">
+                <Icon :name="group.icon" class="w-5 h-5" />
+              </div>
+              <div>
+                <h4 class="font-bold text-lg text-slate-900">{{ group.name }}</h4>
+                <p class="text-sm text-slate-500 mt-0.5">{{ group.desc }}</p>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              <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'
+                  "
+              >
+                <div
+                  v-if="pkg.highlight"
+                  class="bg-gradient-to-r from-[#004AC6] to-[#1D63E0] text-white text-[11px] font-bold py-2 text-center uppercase tracking-widest flex items-center justify-center gap-1.5"
+                >
+                  <Icon name="lucide:star" class="w-3.5 h-3.5" />
+                  Phổ biến nhất
+                </div>
+
+                <div class="p-6 flex flex-col gap-4 grow">
+                  <div>
+                    <h5 class="font-bold text-slate-900 mb-1.5">{{ pkg.name }}</h5>
+                    <p class="text-slate-500 text-sm leading-relaxed">{{ pkg.desc }}</p>
+                  </div>
+
+                  <div class="pb-1">
+                    <span class="font-['Montserrat'] font-extrabold text-xl text-slate-900">
+                      {{ formatPrice(pkg.price) }}đ
+                    </span>
+                    <span class="text-slate-400 text-sm">{{ pkg.unit }}</span>
+                  </div>
+
+                  <div class="flex flex-wrap gap-1.5">
+                    <span
+                      v-for="tag in pkg.tags"
+                      :key="tag"
+                      class="text-[11px] font-medium text-slate-500 bg-slate-50 border border-slate-100 rounded-md px-2 py-1"
+                    >
+                      {{ tag }}
+                    </span>
+                  </div>
+
+                  <ul class="flex flex-col gap-2 pt-3 border-t border-slate-100">
+                    <li
+                      v-for="feature in pkg.features"
+                      :key="feature"
+                      class="flex items-start gap-2 text-sm text-slate-600"
+                    >
+                      <Icon name="lucide:check" class="w-4 h-4 text-[#004AC6] mt-0.5 shrink-0" />
+                      {{ feature }}
+                    </li>
+                  </ul>
+                </div>
+
+                <div class="p-6 pt-2">
+                  <button
+                    type="button"
+                    @click="handlePackageClick(pkg, group)"
+                    class="w-full py-3 rounded-xl font-bold text-sm transition-all duration-300 cursor-pointer"
+                    :class="pkg.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
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </section>
+</template>
+
+<script setup>
+// Data giả dùng khi chưa cấu hình CMS - đã tắt vì CMS đã có data thật, giữ lại để bật lại khi cần
+// import { ubuntuVersions as fallbackVersions } from '../data/linuxVersions'
+
+const props = defineProps({
+  activeVersionId: { type: String, default: '' },
+  // groupsItem0X: JSON thông tin 1 phiên bản Ubuntu (id, version, codename, badge, badgeTone, recommended, releaseDate, supportUntil, desc)
+  groupsItem01: { type: Object, default: null },
+  groupsItem02: { type: Object, default: null },
+  groupsItem03: { type: Object, default: null },
+  // itemId0X_groups_0Y: JSON 1 nhóm sản phẩm (id, name, icon, desc, packages[]) thuộc phiên bản groupsItem0Y
+  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 emit = defineEmits(['select-package'])
+
+useScrollAnimate('.versions-header', 'fade-up')
+
+const { scrollTo } = useScrollToSection()
+
+// Chuẩn hoá 1 nhóm sản phẩm từ CMS (item_id_0X_groups_0Y)
+const normalizeGroup = (raw) => {
+  if (!raw || typeof raw !== 'object' || !raw.name) return null
+
+  return {
+    id: raw.id || raw.name,
+    name: raw.name,
+    icon: raw.icon || 'lucide:server-cog',
+    desc: raw.desc || '',
+    packages: Array.isArray(raw.packages) ? raw.packages : [],
+  }
+}
+
+// Ghép 1 phiên bản Ubuntu (groups_item_0X) + 3 nhóm sản phẩm của nó (item_id_0X_groups_0Y)
+// Không có data CMS cho slot nào -> bỏ qua slot đó (không dùng data giả để fallback nữa)
+const buildVersion = (meta, groupSlots) => {
+  if (!meta || typeof meta !== 'object' || !meta.id) return null
+
+  const groups = groupSlots.map(normalizeGroup).filter(Boolean)
+
+  return {
+    ...meta,
+    groups,
+  }
+}
+
+const resolvedVersions = computed(() =>
+  [
+    buildVersion(props.groupsItem01, [props.itemId01Groups01, props.itemId02Groups01, props.itemId03Groups01]),
+    buildVersion(props.groupsItem02, [props.itemId01Groups02, props.itemId02Groups02, props.itemId03Groups02]),
+    buildVersion(props.groupsItem03, [props.itemId01Groups03, props.itemId02Groups03, props.itemId03Groups03]),
+  ].filter(Boolean)
+)
+
+const isValidVersion = (id) => resolvedVersions.value.some((v) => v.id === id)
+
+const activeVersionId = ref(
+  isValidVersion(props.activeVersionId)
+    ? props.activeVersionId
+    : resolvedVersions.value.find((v) => v.recommended)?.id || resolvedVersions.value[0]?.id || ''
+)
+
+const emptyVersion = { version: '', codename: '', badge: '', badgeTone: 'slate', releaseDate: '', supportUntil: '', desc: '', groups: [] }
+
+const activeVersion = computed(
+  () =>
+    resolvedVersions.value.find((v) => v.id === activeVersionId.value) ||
+    resolvedVersions.value[0] ||
+    emptyVersion
+)
+
+const badgeToneMap = {
+  primary: { pill: 'bg-[#004AC6]', text: 'text-[#004AC6]', icon: '#004AC6' },
+  amber: { pill: 'bg-amber-500', text: 'text-amber-600', icon: '#d97706' },
+  slate: { pill: 'bg-slate-500', text: 'text-slate-600', icon: '#475569' },
+}
+
+const toneOf = (version) => badgeToneMap[version.badgeTone] || badgeToneMap.slate
+
+// Chọn phiên bản rồi cuộn xuống đúng khu vực nhóm sản phẩm bên dưới để người dùng thấy ngay kết quả
+function selectVersion(id) {
+  activeVersionId.value = id
+  nextTick(() => scrollTo('nhom-san-pham'))
+}
+
+// Gói có sẵn url (đăng ký/mua trực tiếp) -> điều hướng thẳng tới đó; không có thì báo lên trang cha để mở form tư vấn
+function handlePackageClick(pkg, group) {
+  if (pkg.url) {
+    window.location.href = pkg.url
+    return
+  }
+
+  handleSelectPackage(pkg, group)
+}
+
+function handleSelectPackage(pkg, group) {
+  emit('select-package', {
+    id: pkg.id,
+    name: pkg.name,
+    level: `Ubuntu ${activeVersion.value.version} · ${group.name}`,
+    duration: pkg.unit,
+    icon: 'lucide:server-cog',
+  })
+}
+
+function formatPrice(value) {
+  if (!value && value !== 0) return ''
+  return new Intl.NumberFormat('vi-VN').format(value)
+}
+
+const sectionRoot = ref(null)
+const revealed = ref(false)
+
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          revealed.value = true
+          observer.disconnect()
+        }
+      }
+    },
+    { threshold: 0.15 }
+  )
+
+  if (sectionRoot.value) observer.observe(sectionRoot.value)
+  onUnmounted(() => observer.disconnect())
+})
+</script>
+
+<style scoped>
+.version-reveal {
+  animation: version-group-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: calc(var(--i, 0) * 120ms);
+  animation-play-state: paused;
+}
+
+.versions-revealed .version-reveal {
+  animation-play-state: running;
+}
+
+@keyframes version-group-in {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-swap-enter-active,
+.fade-swap-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-swap-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.fade-swap-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+</style>