nuxt-layer-core 1.1.2 → 1.1.4

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

@@ -1,396 +1,369 @@
-<template>
-  <section id="goi-san-pham" ref="sectionRoot" class="py-24 bg-white overflow-hidden" :class="{ 'pricing-revealed': revealed }">
-    <div class="max-w-6xl mx-auto px-6 lg:px-8">
-      <div class="text-center mb-12 pricing-header">
-        <h2 class="text-[#004AC6] font-bold uppercase tracking-widest text-sm mb-2">Gói sản phẩm</h2>
-        <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-4xl text-slate-900 mb-4">
-          Chọn gói phù hợp<br class="hidden sm:block" />
-          với nhu cầu của bạn
-        </h3>
-        <p class="text-slate-500 max-w-2xl mx-auto leading-relaxed">
-          Thuê hạ tầng Proxmox HCI theo tháng, tham gia workshop 1 ngày hoặc chọn khóa đào tạo chuyên sâu. Chi phí
-          minh bạch, điều chỉnh theo yêu cầu riêng.
-        </p>
-
-        <div class="flex flex-wrap items-center justify-center gap-3 mt-8">
-          <button
-            v-for="tab in tabs"
-            :key="tab.id"
-            type="button"
-            @click="activeTab = tab.id"
-            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-bold transition-all duration-300 cursor-pointer"
-            :class="activeTab === tab.id
-              ? 'bg-[#004AC6] text-white shadow-lg shadow-blue-500/25 scale-[1.03]'
-              : 'bg-white text-slate-500 border border-slate-200 hover:border-blue-200 hover:text-[#004AC6]'
-              "
-          >
-            <Icon :name="tab.icon" class="w-4 h-4" />
-            {{ tab.label }}
-          </button>
-        </div>
-
-        <Transition name="fade-swap" mode="out-in">
-          <p :key="activeTab" class="text-slate-400 text-sm max-w-xl mx-auto mt-5">
-            {{ activeTabData.intro }}
-          </p>
-        </Transition>
-      </div>
-
-      <Transition name="fade-swap" mode="out-in">
-        <div :key="activeTab">
-          <!-- Info cards: only for Proxmox HCI -->
-          <div v-if="activeTab === 'hci'" class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
-            <div
-              v-for="(info, i) in hciInfoCards"
-              :key="info.title"
-              class="pricing-reveal bg-white rounded-2xl border border-slate-200 p-6 hover:border-blue-200 hover:shadow-lg transition-all duration-300"
-              :style="{ '--i': i }"
-            >
-              <div class="w-11 h-11 rounded-[10px] bg-blue-50 flex items-center justify-center mb-5 text-[#004AC6]">
-                <Icon :name="info.icon" class="w-5 h-5" />
-              </div>
-              <h4 class="font-bold text-slate-900 mb-2">{{ info.title }}</h4>
-              <p class="text-sm text-slate-500 leading-relaxed">{{ info.desc }}</p>
-            </div>
-          </div>
-
-          <!-- Billing period switch: only for Proxmox HCI -->
-          <div v-if="activeTab === 'hci'" class="flex flex-col items-center gap-4 mb-10">
-            <p class="text-slate-500 text-sm">Chọn kỳ hạn thuê, càng dài chi phí hàng tháng càng thấp</p>
-            <div class="inline-flex items-center gap-1 bg-white border border-slate-200 rounded-full p-1">
-              <button
-                v-for="period in billingPeriods"
-                :key="period.value"
-                type="button"
-                @click="activePeriod = period.value"
-                class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 cursor-pointer"
-                :class="activePeriod === period.value
-                  ? 'bg-[#004AC6] text-white shadow-md shadow-blue-500/25'
-                  : 'text-slate-500 hover:text-[#004AC6]'
-                  "
-              >
-                {{ period.label }}
-              </button>
-            </div>
-          </div>
-
-          <!-- Pricing cards -->
-          <Transition name="fade-swap" mode="out-in">
-            <div :key="activeTab + '-' + activePeriod" class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
-              <div
-                v-for="(plan, i) in activePlans"
-                :key="plan.name"
-                class="pricing-reveal group relative"
-                :style="{ '--i': i }"
-                :class="plan.highlight ? 'md:-mt-6' : 'md:mt-0'"
-              >
-                <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 h-full transition-all duration-300 ease-out"
-                  :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:star" class="w-3.5 h-3.5" />
-                    Được chọn nhiều nhất
-                  </div>
-
-                  <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>
-                    </div>
-
-                    <div class="pb-1">
-                      <span v-if="plan.contact" class="font-['Montserrat'] font-extrabold text-2xl text-[#004AC6]">
-                        Liên hệ
-                      </span>
-                      <template v-else>
-                        <span class="font-['Montserrat'] font-extrabold text-2xl sm:text-[28px] text-slate-900">
-                          {{ plan.priceLabel }}{{ formatPrice(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>
-
-                    <div class="flex flex-wrap gap-1.5">
-                      <span
-                        v-for="tag in plan.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.5 pt-4 border-t border-slate-100">
-                      <li
-                        v-for="feature in plan.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-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'
-                        : 'border border-slate-200 text-slate-600 hover:border-[#004AC6] hover:text-[#004AC6] hover:bg-blue-50/50'
-                        "
-                    >
-                      {{ activeTabData.cta }}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </Transition>
-        </div>
-      </Transition>
-    </div>
-  </section>
-</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: `/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)
-
-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())
-})
-
-const activeTab = ref('hci')
-const activePeriod = ref(36)
-
-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' },
-  { value: 24, label: 'Thuê 24 tháng' },
-  { value: 36, label: 'Thuê 36 tháng' },
-]
-
-const hciInfoCards = [
-  {
-    icon: 'lucide:server',
-    title: 'Thuê trọn gói tại DC của chúng tôi',
-    desc: 'Cụm đặt tại trung tâm dữ liệu Tier III, gồm phần cứng, điện, mạng và vận hành. Bạn chỉ dùng và trả phí hàng tháng.',
-  },
-  {
-    icon: 'lucide:building-2',
-    title: 'Thuê phần cứng đặt tại doanh nghiệp',
-    desc: 'Chúng tôi mang thiết bị tới đặt tại phòng máy của bạn, triển khai và bảo hành. Dữ liệu nằm trong nội bộ, không cần đầu tư ban đầu.',
-  },
-  {
-    icon: 'lucide:refresh-cw',
-    title: 'Thuê linh hoạt theo node',
-    desc: 'Thêm hoặc bớt node theo từng tháng khi nhu cầu thay đổi. Có tùy chọn chuyển quyền sở hữu thiết bị khi hết hạn thuê.',
-  },
-]
-
-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.',
-    cta: 'Nhận báo giá',
-  },
-  workshop: {
-    intro: 'Workshop cài đặt & triển khai Proxmox HCI trong 1 ngày, thực hành 100% trên lab thật.',
-    cta: 'Đăng ký workshop',
-  },
-  training: {
-    intro: 'Khóa học do giảng viên được Proxmox chứng nhận đứng lớp, kèm chứng nhận hoàn thành.',
-    cta: 'Đăng ký khóa học',
-  },
-}
-
-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 workshopItems.value.length > 0 ? workshopItems.value : workshopPlans
-  }
-  if (activeTab.value === 'training') {
-    return 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`,
-  }))
-})
-
-function formatPrice(value) {
-  if (!value && value !== 0) return ''
-  return new Intl.NumberFormat('vi-VN').format(value)
-}
-</script>
-
-<style scoped>
-.pricing-reveal {
-  animation: pricing-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
-  animation-delay: calc(var(--i, 0) * 110ms);
-  animation-play-state: paused;
-}
-
-.pricing-revealed .pricing-reveal {
-  animation-play-state: running;
-}
-
-@keyframes pricing-card-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="goi-san-pham" ref="sectionRoot" class="py-24 bg-white overflow-hidden" :class="{ 'pricing-revealed': revealed }">
+    <div class="max-w-6xl mx-auto px-6 lg:px-8">
+      <div class="text-center mb-12 pricing-header">
+        <h2 class="text-[#004AC6] font-bold uppercase tracking-widest text-sm mb-2">Gói sản phẩm</h2>
+        <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-4xl text-slate-900 mb-4">
+          Chọn gói phù hợp<br class="hidden sm:block" />
+          với nhu cầu của bạn
+        </h3>
+        <p class="text-slate-500 max-w-2xl mx-auto leading-relaxed">
+          Thuê hạ tầng Proxmox HCI theo tháng, tham gia workshop 1 ngày hoặc chọn khóa đào tạo chuyên sâu. Chi phí
+          minh bạch, điều chỉnh theo yêu cầu riêng.
+        </p>
+
+        <div class="flex flex-wrap items-center justify-center gap-3 mt-8">
+          <button
+            v-for="tab in tabs"
+            :key="tab.id"
+            type="button"
+            @click="activeTab = tab.id"
+            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-bold transition-all duration-300 cursor-pointer"
+            :class="activeTab === tab.id
+              ? 'bg-[#004AC6] text-white shadow-lg shadow-blue-500/25 scale-[1.03]'
+              : 'bg-white text-slate-500 border border-slate-200 hover:border-blue-200 hover:text-[#004AC6]'
+              "
+          >
+            <Icon :name="tab.icon" class="w-4 h-4" />
+            {{ tab.label }}
+          </button>
+        </div>
+
+        <Transition name="fade-swap" mode="out-in">
+          <p :key="activeTab" class="text-slate-400 text-sm max-w-xl mx-auto mt-5">
+            {{ activeTabData.intro }}
+          </p>
+        </Transition>
+      </div>
+
+      <Transition name="fade-swap" mode="out-in">
+        <div :key="activeTab">
+          <!-- Info cards: only for Proxmox HCI -->
+          <div v-if="activeTab === 'hci'" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 mb-16">
+            <div
+              v-for="(info, i) in hciInfoCards"
+              :key="info.title"
+              class="pricing-reveal bg-white rounded-2xl border border-slate-200 p-6 hover:border-blue-200 hover:shadow-lg transition-all duration-300"
+              :style="{ '--i': i }"
+            >
+              <div class="w-11 h-11 rounded-[10px] bg-blue-50 flex items-center justify-center mb-5 text-[#004AC6]">
+                <Icon :name="info.icon" class="w-5 h-5" />
+              </div>
+              <h4 class="font-bold text-slate-900 mb-2">{{ info.title }}</h4>
+              <p class="text-sm text-slate-500 leading-relaxed">{{ info.desc }}</p>
+            </div>
+          </div>
+
+          <!-- Billing period switch: only for Proxmox HCI -->
+          <div v-if="activeTab === 'hci'" class="flex flex-col items-center gap-4 mb-10">
+            <p class="text-slate-500 text-sm">Chọn kỳ hạn thuê, càng dài chi phí hàng tháng càng thấp</p>
+            <div class="inline-flex items-center gap-1 bg-white border border-slate-200 rounded-full p-1">
+              <button
+                v-for="period in billingPeriods"
+                :key="period.value"
+                type="button"
+                @click="activePeriod = period.value"
+                class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 cursor-pointer"
+                :class="activePeriod === period.value
+                  ? 'bg-[#004AC6] text-white shadow-md shadow-blue-500/25'
+                  : 'text-slate-500 hover:text-[#004AC6]'
+                  "
+              >
+                {{ period.label }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Pricing cards -->
+          <Transition name="fade-swap" mode="out-in">
+            <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', activePlans.length === 1 ? 'w-full max-w-sm' : '']"
+              >
+                <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 h-full transition-all duration-300 ease-out"
+                  :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:star" class="w-3.5 h-3.5" />
+                    Được chọn nhiều nhất
+                  </div>
+
+                  <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 v-if="plan.tagline" class="text-slate-500 text-sm leading-relaxed">{{ plan.tagline }}</p>
+                    </div>
+
+                    <div class="pb-1">
+                      <span v-if="plan.contact" class="font-['Montserrat'] font-extrabold text-2xl text-[#004AC6]">
+                        Liên hệ
+                      </span>
+                      <template v-else>
+                        <span class="font-['Montserrat'] font-extrabold text-2xl sm:text-[28px] text-slate-900">
+                          {{ 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"
+                        :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.5 pt-4 border-t border-slate-100">
+                      <li
+                        v-for="feature in plan.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-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
+                      type="button"
+                      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"
+                    >
+                      {{ plan.titleButton || activeTabData.cta }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </Transition>
+    </div>
+  </section>
+</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 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())
+})
+
+const activeTab = ref('hci')
+const activePeriod = ref(36)
+
+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' },
+  { value: 24, label: 'Thuê 24 tháng' },
+  { value: 36, label: 'Thuê 36 tháng' },
+]
+
+const hciInfoCards = [
+  {
+    icon: 'lucide:server',
+    title: 'Thuê trọn gói tại DC của chúng tôi',
+    desc: 'Cụm đặt tại trung tâm dữ liệu Tier III, gồm phần cứng, điện, mạng và vận hành. Bạn chỉ dùng và trả phí hàng tháng.',
+  },
+  {
+    icon: 'lucide:building-2',
+    title: 'Thuê phần cứng đặt tại doanh nghiệp',
+    desc: 'Chúng tôi mang thiết bị tới đặt tại phòng máy của bạn, triển khai và bảo hành. Dữ liệu nằm trong nội bộ, không cần đầu tư ban đầu.',
+  },
+  {
+    icon: 'lucide:refresh-cw',
+    title: 'Thuê linh hoạt theo node',
+    desc: 'Thêm hoặc bớt node theo từng tháng khi nhu cầu thay đổi. Có tùy chọn chuyển quyền sở hữu thiết bị khi hết hạn thuê.',
+  },
+]
+
+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.',
+    cta: 'Nhận báo giá',
+  },
+  workshop: {
+    intro: 'Workshop cài đặt & triển khai Proxmox HCI trong 1 ngày, thực hành 100% trên lab thật.',
+    cta: 'Đăng ký workshop',
+  },
+  training: {
+    intro: 'Khóa học do giảng viên được Proxmox chứng nhận đứng lớp, kèm chứng nhận hoàn thành.',
+    cta: 'Đăng ký khóa học',
+  },
+}
+
+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,
+    tagline: normalized.tagline,
+    desc: normalized.description,
+    unit: normalized.duration,
+    price: normalized.price,
+    prices: normalized.prices,
+    priceNote: normalized.priceNote,
+    tags: normalized.features,
+    features: normalized.features,
+    highlight: normalized.highlight,
+    url: normalized.url,
+    titleButton: normalized.titleButton,
+  }
+}
+
+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)
+)
+
+// 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 withSingleHighlight(workshopItems.value.length > 0 ? workshopItems.value : workshopPlans)
+  }
+  if (activeTab.value === 'training') {
+    return withSingleHighlight(trainingItems.value.length > 0 ? trainingItems.value : trainingPlans)
+  }
+
+  const source = hciItems.value.length > 0 ? hciItems.value : hciPlans
+  return withSingleHighlight(
+    source.map((plan) => ({
+      ...plan,
+      price: plan.prices?.[activePeriod.value],
+      priceNote: `Giá thuê khi ký hợp đồng ${activePeriod.value} tháng`,
+    }))
+  )
+})
+
+</script>
+
+<style scoped>
+.pricing-reveal {
+  animation: pricing-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: calc(var(--i, 0) * 110ms);
+  animation-play-state: paused;
+}
+
+.pricing-revealed .pricing-reveal {
+  animation-play-state: running;
+}
+
+@keyframes pricing-card-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>