nuxt-layer-core 1.0.5 → 1.0.6

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

@@ -0,0 +1,280 @@
+<template>
+  <section class="relative">
+    <!-- Hero -->
+    <div class="bg-gradient-to-br from-[#004AC6] to-[#1D4ED8] text-white pt-40 pb-24 overflow-hidden relative">
+      <div class="absolute inset-0 opacity-[0.06]"
+        style="background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 24px 24px;"></div>
+
+      <div class="max-w-7xl mx-auto px-6 lg:px-8 grid lg:grid-cols-2 gap-14 items-center relative z-10">
+        <div>
+          <div
+            class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md px-4 py-2 rounded-[10px] border border-white/20 mb-6">
+            <UbuntuMark :size="16" />
+            <span class="text-xs font-bold uppercase tracking-widest">
+              Hệ điều hành máy chủ · Mã nguồn mở
+            </span>
+          </div>
+
+          <h1 class="font-['Montserrat'] font-extrabold text-2xl sm:text-[2rem] leading-[1.15] mb-6">
+            Linux là nền tảng cho phần lớn<br />
+            hạ tầng máy chủ hiện đại
+          </h1>
+
+          <p class="text-blue-100/90 text-lg leading-relaxed mb-8 max-w-xl">
+            Miễn phí, mã nguồn mở và được cộng đồng toàn cầu kiểm chứng qua hàng chục năm.
+            Trong số các bản phân phối (distro) Linux hiện có, chúng tôi triển khai và hỗ trợ
+            chính trên <strong class="text-white">Ubuntu Server</strong> — lựa chọn phù hợp cho phần lớn nhu cầu.
+          </p>
+
+          <div class="flex flex-wrap gap-4">
+            <a href="#phien-ban" @click.prevent="scrollTo('phien-ban')"
+              class="bg-white text-[#004AC6] px-7 py-3.5 rounded-[10px] font-bold flex items-center gap-2 hover:bg-blue-50 transition-colors shadow-lg active:scale-95">
+              Xem các phiên bản hỗ trợ
+              <Icon name="lucide:arrow-right" class="text-[18px]" />
+            </a>
+
+            <a href="#vi-sao-ubuntu" @click.prevent="scrollTo('vi-sao-ubuntu')"
+              class="bg-transparent border border-white/40 text-white px-7 py-3.5 rounded-[10px] font-bold hover:bg-white/10 transition-colors">
+              Vì sao chọn Ubuntu?
+            </a>
+          </div>
+        </div>
+
+        <!-- Sơ đồ "lớp nền tảng": Linux/Ubuntu là lớp lõi bên dưới ứng dụng của bạn - minh hoạ đúng nghĩa "nền tảng" thay vì 1 khối UI dashboard chung chung -->
+        <div class="relative flex justify-center py-6">
+          <div class="linux-glow absolute w-64 h-64 sm:w-72 sm:h-72 bg-orange-400/25 rounded-full blur-3xl -top-10 -left-6"></div>
+          <div class="linux-glow linux-glow-delay absolute w-64 h-64 sm:w-72 sm:h-72 bg-sky-300/25 rounded-full blur-3xl -bottom-10 -right-6"></div>
+
+          <div class="stack-float relative w-full max-w-sm">
+            <!-- đường dẫn năng lượng chạy dọc, nối các lớp lại với nhau -->
+            <div class="absolute left-6 top-6 bottom-6 w-px bg-gradient-to-b from-white/0 via-white/25 to-white/0"></div>
+            <div class="absolute left-[23px] top-6 bottom-6 w-[3px] overflow-hidden rounded-full">
+              <div class="stack-flow absolute left-0 w-[3px] h-20 bg-gradient-to-b from-transparent via-orange-300 to-transparent"></div>
+            </div>
+
+            <div class="flex flex-col gap-4">
+              <div
+                v-for="(layer, i) in stackLayers"
+                :key="layer.title"
+                class="stack-layer relative flex items-center gap-4"
+                :style="{ animationDelay: `${i * 150}ms` }"
+              >
+                <div class="relative z-10 w-12 h-12 rounded-2xl flex items-center justify-center shrink-0"
+                  :class="layer.highlight
+                    ? 'bg-white text-[#004AC6] shadow-lg shadow-black/20 ring-4 ring-white/25'
+                    : 'bg-white/10 border border-white/20 backdrop-blur-md'"
+                >
+                  <UbuntuMark v-if="layer.mark" :size="22" :stroke="layer.highlight ? '#004AC6' : '#fff'"
+                    :accent="layer.highlight ? '#004AC6' : '#fff'" />
+                  <Icon v-else :name="layer.icon" class="w-5 h-5" :class="layer.highlight ? '' : 'text-white'" />
+                </div>
+
+                <div class="flex-1 rounded-xl px-4 py-3 backdrop-blur-md transition-all"
+                  :class="layer.highlight
+                    ? 'bg-white/15 border border-white/40 shadow-lg'
+                    : 'bg-white/5 border border-white/10'"
+                >
+                  <p class="text-sm font-bold flex items-center gap-2">
+                    {{ layer.title }}
+                    <span v-if="layer.highlight"
+                      class="text-[9px] font-bold uppercase tracking-wide bg-white/20 rounded-full px-2 py-0.5">
+                      Khuyến nghị
+                    </span>
+                  </p>
+                  <p class="text-[11.5px] text-white/60 mt-0.5">{{ layer.desc }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Stats + benefits -->
+    <div class="bg-[#F7F9FB]">
+      <div class="relative -mt-8 z-10 max-w-7xl mx-auto px-6 lg:px-8">
+        <div class="hero-stats bg-white rounded-xl shadow-xl border border-slate-100 py-8 px-6">
+          <div class="grid grid-cols-2 sm:grid-cols-4 gap-8 sm:divide-x divide-slate-200">
+            <div v-for="stat in stats" :key="stat.label" class="text-center">
+              <div class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-[#004AC6]">
+                {{ stat.value }}
+              </div>
+              <div class="text-slate-500 text-xs sm:text-sm font-medium mt-1">
+                {{ stat.label }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="max-w-7xl mx-auto px-6 lg:px-8 py-24">
+        <div class="text-center mb-16">
+          <h2 class="text-[#004AC6] font-bold uppercase tracking-widest text-sm mb-2">Vì sao dùng Linux</h2>
+          <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-slate-900 mb-4">
+            Nền tảng đáng tin cậy cho mọi quy mô hệ thống
+          </h3>
+          <p class="text-slate-500 max-w-2xl mx-auto">
+            Từ máy chủ web đơn giản đến hạ tầng cloud quy mô lớn, Linux là lựa chọn hàng đầu
+            của các nhà cung cấp dịch vụ và doanh nghiệp công nghệ trên thế giới.
+          </p>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div
+            v-for="(item, i) in benefits"
+            :key="item.title"
+            :data-delay="i * 100"
+            class="linux-benefit-card bg-white p-8 rounded-xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all"
+          >
+            <div class="w-11 h-11 rounded-[10px] bg-blue-50 flex items-center justify-center mb-6 text-[#004AC6]">
+              <Icon :name="item.icon" />
+            </div>
+            <h4 class="font-bold text-lg text-slate-900 mb-3">{{ item.title }}</h4>
+            <p class="text-sm text-slate-500 leading-relaxed">{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const { scrollTo } = useScrollToSection()
+
+useScrollAnimate('.hero-stats', 'fade-up')
+useScrollAnimate('.linux-benefit-card', 'scale-up')
+
+// Các lớp trong sơ đồ "nền tảng": từ ứng dụng trên cùng xuống tới phần cứng dưới cùng, Ubuntu là lớp được khuyến nghị
+const stackLayers = [
+  {
+    title: 'Ứng dụng & dịch vụ của bạn',
+    desc: 'Website, API, database, workload của riêng bạn',
+    icon: 'lucide:layout-grid',
+    highlight: false,
+  },
+  {
+    title: 'Ubuntu Server LTS',
+    desc: 'Hệ điều hành được chúng tôi khuyến nghị triển khai',
+    mark: true,
+    highlight: true,
+  },
+  {
+    title: 'Linux Kernel',
+    desc: 'Lõi hệ điều hành, quản lý tiến trình và tài nguyên hệ thống',
+    icon: 'lucide:cpu',
+    highlight: false,
+  },
+  {
+    title: 'Phần cứng máy chủ',
+    desc: 'CPU, RAM, lưu trữ SSD/NVMe vật lý',
+    icon: 'lucide:server',
+    highlight: false,
+  },
+]
+
+const stats = [
+  { value: '96%', label: 'Top 1M website chạy trên Linux' },
+  { value: '3', label: 'Phiên bản Ubuntu đang hỗ trợ' },
+  { value: '10+', label: 'Năm hỗ trợ bảo mật (Ubuntu LTS)' },
+  { value: '24/7', label: 'Đội ngũ vận hành hỗ trợ' },
+]
+
+const benefits = [
+  {
+    icon: 'lucide:code-2',
+    title: 'Mã nguồn mở & miễn phí',
+    desc: 'Không tốn chi phí bản quyền, toàn quyền tuỳ biến hệ thống theo nhu cầu riêng của bạn.',
+  },
+  {
+    icon: 'lucide:shield-check',
+    title: 'Bảo mật vượt trội',
+    desc: 'Cộng đồng và nhà phát triển liên tục rà soát, vá lỗi nhanh chóng ngay khi phát hiện.',
+  },
+  {
+    icon: 'lucide:gauge',
+    title: 'Hiệu năng & ổn định',
+    desc: 'Tiêu tốn ít tài nguyên hơn, phù hợp chạy liên tục nhiều năm không cần khởi động lại.',
+  },
+  {
+    icon: 'lucide:users',
+    title: 'Cộng đồng hỗ trợ toàn cầu',
+    desc: 'Hàng triệu tài liệu, diễn đàn và chuyên gia sẵn sàng hỗ trợ khi bạn gặp sự cố.',
+  },
+  {
+    icon: 'lucide:sliders-horizontal',
+    title: 'Khả năng tuỳ biến cao',
+    desc: 'Cài đặt đúng những gì cần dùng, dễ dàng tối ưu cho từng loại ứng dụng cụ thể.',
+  },
+  {
+    icon: 'lucide:piggy-bank',
+    title: 'Tiết kiệm chi phí',
+    desc: 'Không phát sinh phí license theo số lượng máy chủ, tối ưu chi phí khi mở rộng quy mô.',
+  },
+]
+</script>
+
+<style scoped>
+.linux-glow {
+  animation: linux-glow-drift 8s ease-in-out infinite;
+}
+
+.linux-glow-delay {
+  animation-delay: -4s;
+}
+
+@keyframes linux-glow-drift {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.6;
+  }
+
+  50% {
+    transform: translate(12px, -12px) scale(1.1);
+    opacity: 0.9;
+  }
+}
+
+.stack-float {
+  animation: stack-float-y 6s ease-in-out infinite;
+}
+
+@keyframes stack-float-y {
+  0%, 100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+.stack-layer {
+  animation: stack-layer-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes stack-layer-in {
+  from {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.stack-flow {
+  animation: stack-flow-y 3s linear infinite;
+}
+
+@keyframes stack-flow-y {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(340%);
+  }
+}
+</style>

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

@@ -0,0 +1,331 @@
+<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>

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

@@ -0,0 +1,18 @@
+<template>
+  <svg :width="size" :height="size" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <circle cx="24" cy="24" r="19" :stroke="stroke" stroke-width="2" opacity="0.35" />
+    <path d="M25.5 5.3A18.7 18.7 0 0 1 40 24" :stroke="stroke" stroke-width="2" stroke-linecap="round" opacity="0.7" />
+    <path d="M22.5 42.7A18.7 18.7 0 0 1 8 24" :stroke="stroke" stroke-width="2" stroke-linecap="round" opacity="0.7" />
+    <circle cx="25" cy="5" r="4" :fill="accent" />
+    <circle cx="7" cy="30" r="4" :fill="accent" />
+    <circle cx="41" cy="30" r="4" :fill="accent" />
+  </svg>
+</template>
+
+<script setup>
+defineProps({
+  size: { type: [Number, String], default: 28 },
+  stroke: { type: String, default: 'currentColor' },
+  accent: { type: String, default: 'currentColor' },
+})
+</script>

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

@@ -0,0 +1,141 @@
+<template>
+  <section id="vi-sao-ubuntu" ref="sectionRoot" class="py-24 bg-white overflow-hidden"
+    :class="{ 'ubuntu-revealed': revealed }">
+    <div class="max-w-7xl mx-auto px-6 lg:px-8">
+      <div class="grid lg:grid-cols-[0.9fr_1.1fr] gap-14 items-center mb-16">
+        <div class="ubuntu-reveal" style="--i: 0">
+          <div class="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center text-[#004AC6] mb-5">
+            <UbuntuMark :size="30" />
+          </div>
+          <h2 class="text-[#004AC6] font-bold uppercase tracking-widest text-sm mb-2">Khuyến nghị</h2>
+          <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-4xl text-slate-900 mb-4 leading-tight">
+            Vì sao nên chọn<br />Ubuntu Server?
+          </h3>
+          <p class="text-slate-500 leading-relaxed mb-6">
+            Trong số các bản phân phối đang hỗ trợ, Ubuntu Server LTS là lựa chọn mặc định của chúng tôi
+            cho phần lớn khách hàng nhờ sự cân bằng giữa độ ổn định, tính tương thích và cộng đồng hỗ trợ.
+          </p>
+          <a href="#phien-ban" @click.prevent="scrollTo('phien-ban')"
+            class="inline-flex items-center gap-2 text-[#004AC6] font-bold text-sm hover:gap-3 transition-all">
+            Xem các gói dịch vụ trên Ubuntu
+            <Icon name="lucide:arrow-right" class="w-4 h-4" />
+          </a>
+        </div>
+
+        <div class="ubuntu-reveal grid grid-cols-2 gap-4" style="--i: 1">
+          <div
+            v-for="stat in highlightStats"
+            :key="stat.label"
+            class="bg-[#F7F9FB] rounded-2xl border border-slate-100 p-6 text-center"
+          >
+            <div class="font-['Montserrat'] font-extrabold text-2xl text-[#004AC6] mb-1">{{ stat.value }}</div>
+            <div class="text-slate-500 text-xs font-medium leading-relaxed">{{ stat.label }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div
+          v-for="(reason, i) in reasons"
+          :key="reason.title"
+          class="ubuntu-reveal bg-white p-7 rounded-xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all"
+          :style="{ '--i': i + 2 }"
+        >
+          <div class="w-11 h-11 rounded-[10px] bg-blue-50 flex items-center justify-center mb-5 text-[#004AC6]">
+            <Icon :name="reason.icon" />
+          </div>
+          <h4 class="font-bold text-slate-900 mb-2">{{ reason.title }}</h4>
+          <p class="text-sm text-slate-500 leading-relaxed">{{ reason.desc }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const { scrollTo } = useScrollToSection()
+
+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 highlightStats = [
+  { value: '5 năm', label: 'Hỗ trợ bảo mật miễn phí (LTS)' },
+  { value: '10 năm', label: 'Hỗ trợ mở rộng với Ubuntu Pro' },
+  { value: '#1', label: 'Distro phổ biến nhất trên cloud' },
+  { value: '30M+', label: 'Server đang chạy Ubuntu' },
+]
+
+const reasons = [
+  {
+    icon: 'lucide:calendar-check',
+    title: 'Vòng đời hỗ trợ dài (LTS)',
+    desc: 'Mỗi bản LTS được hỗ trợ cập nhật bảo mật miễn phí 5 năm, hạn chế rủi ro khi vận hành lâu dài.',
+  },
+  {
+    icon: 'lucide:puzzle',
+    title: 'Tương thích rộng',
+    desc: 'Hầu hết phần mềm, driver và dịch vụ cloud đều hỗ trợ Ubuntu đầu tiên trước các distro khác.',
+  },
+  {
+    icon: 'lucide:container',
+    title: 'Chuẩn cho Docker & Kubernetes',
+    desc: 'Là base image phổ biến nhất cho container, dễ dàng triển khai lên mọi nền tảng container hoá.',
+  },
+  {
+    icon: 'lucide:refresh-cw-off',
+    title: 'Vá bảo mật không cần khởi động lại',
+    desc: 'Hỗ trợ Livepatch giúp cập nhật kernel bảo mật mà không làm gián đoạn dịch vụ đang chạy.',
+  },
+  {
+    icon: 'lucide:book-open',
+    title: 'Tài liệu & cộng đồng lớn nhất',
+    desc: 'Dễ dàng tìm hướng dẫn, giải pháp cho hầu hết mọi vấn đề gặp phải trong quá trình vận hành.',
+  },
+  {
+    icon: 'lucide:terminal',
+    title: 'Dễ quản trị',
+    desc: 'Công cụ quản lý gói (APT, Snap) và cấu hình mạng (Netplan) đơn giản, thân thiện với người mới.',
+  },
+]
+</script>
+
+<style scoped>
+.ubuntu-reveal {
+  animation: ubuntu-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: calc(var(--i, 0) * 100ms);
+  animation-play-state: paused;
+}
+
+.ubuntu-revealed .ubuntu-reveal {
+  animation-play-state: running;
+}
+
+@keyframes ubuntu-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

package/app/layers/solution/app/composables/useSolutionApi.ts

@@ -29,8 +29,8 @@ export const useSolutionApi = () => {
     }
 
     // Tạm thời: dò slug path theo cấp bất kỳ (slug/slug2/slug3), lấy object đầu tiên rồi gọi resume theo profileId
-    const getSlugData = async (slug: string) => {
-        const list = await handleGetSlugPathView(slug, 'giai-phap')
+    const getSlugData = async (slug: string, type: string) => {
+        const list = await handleGetSlugPathView(slug, type ||'giai-phap')
         console.log("🚀 ~ getSlugData ~ list:", list)
 
         const first = list?.[0]

package/app/layers/solution/app/data/linuxVersions.ts

@@ -0,0 +1,386 @@
+// Dữ liệu giới thiệu các phiên bản Ubuntu đang được hỗ trợ + nhóm sản phẩm/gói dịch vụ triển khai trên đó
+// Mỗi phiên bản có bộ nhóm sản phẩm/gói riêng (giá, cấu hình khác nhau chút) để khi chọn version khác,
+// danh sách gói bên dưới thực sự đổi theo, dễ quan sát thay vì dùng chung 1 bộ dữ liệu.
+export const ubuntuVersions = [
+  {
+    id: 'ubuntu-24-04',
+    version: '24.04 LTS',
+    codename: 'Noble Numbat',
+    badge: 'Khuyến nghị',
+    badgeTone: 'primary',
+    recommended: true,
+    releaseDate: 'Tháng 4, 2024',
+    supportUntil: 'Hỗ trợ đến 2029',
+    desc: 'Phiên bản hỗ trợ dài hạn mới nhất, lý tưởng cho môi trường doanh nghiệp và máy chủ sản xuất.',
+    groups: [
+      {
+        id: 'cloud-server',
+        name: 'Máy chủ ảo (Cloud Server)',
+        icon: 'lucide:server-cog',
+        desc: 'Khởi tạo máy chủ ảo chạy Ubuntu 24.04 LTS chỉ trong vài phút, toàn quyền root.',
+        packages: [
+          {
+            id: 'smart-cloud-server-24-04',
+            name: 'Smart Cloud Server',
+            desc: 'Cloud server phổ thông, dễ mở rộng theo nhu cầu',
+            unit: '/tháng',
+            price: 109000,
+            tags: ['1 vCPU', '2 GB RAM', '40 GB NVMe'],
+            features: ['Cài sẵn Ubuntu 24.04 LTS', 'Snapshot theo yêu cầu', 'IP public riêng'],
+            highlight: false,
+          },
+          {
+            id: 'dedicated-cloud-server-24-04',
+            name: 'Dedicated Cloud Server',
+            desc: 'Tài nguyên riêng, không chia sẻ với khách hàng khác',
+            unit: '/tháng',
+            price: 950000,
+            tags: ['8 vCPU', '16 GB RAM', '200 GB NVMe'],
+            features: ['Hiệu năng ổn định 100%', 'Backup tự động hàng ngày', 'Kernel Livepatch bật sẵn'],
+            highlight: true,
+          },
+          {
+            id: 'linux-cloud-server-24-04',
+            name: 'Linux Cloud Server',
+            desc: 'Tối ưu riêng cho khối lượng công việc Linux',
+            unit: '/tháng',
+            price: 269000,
+            tags: ['4 vCPU', '8 GB RAM', '100 GB NVMe'],
+            features: ['Tối ưu kernel 6.8 cho Ubuntu', 'Hỗ trợ kỹ thuật 24/7'],
+            highlight: false,
+          },
+        ],
+      },
+      {
+        id: 'hosting-email',
+        name: 'Hosting & Email',
+        icon: 'lucide:globe',
+        desc: 'Dịch vụ hosting và email chạy trên nền Ubuntu 24.04 LTS, quản trị đơn giản.',
+        packages: [
+          {
+            id: 'web-hosting-24-04',
+            name: 'Web Hosting',
+            desc: 'Hosting chia sẻ cho website vừa và nhỏ',
+            unit: '/tháng',
+            price: 55000,
+            tags: ['5 GB SSD', '1 domain', 'Free SSL'],
+            features: ['PHP 8.3 / MySQL 8 mới nhất', 'Sao lưu hàng tuần'],
+            highlight: false,
+          },
+          {
+            id: 'cloud-directadmin-24-04',
+            name: 'Cloud DirectAdmin',
+            desc: 'Hosting quản trị qua giao diện DirectAdmin',
+            unit: '/tháng',
+            price: 219000,
+            tags: ['20 GB SSD', 'Unlimited domain', 'DirectAdmin'],
+            features: ['Giao diện quản trị trực quan', 'Cài đặt ứng dụng 1-click'],
+            highlight: true,
+          },
+          {
+            id: 'email-hosting-24-04',
+            name: 'Email Hosting',
+            desc: 'Email doanh nghiệp theo tên miền riêng',
+            unit: '/tháng',
+            price: 32000,
+            tags: ['10 GB/hộp thư', 'Chống spam', 'Webmail'],
+            features: ['Đồng bộ đa thiết bị', 'Chống virus, spam tự động'],
+            highlight: false,
+          },
+        ],
+      },
+      {
+        id: 'advanced-infra',
+        name: 'Hạ tầng nâng cao',
+        icon: 'lucide:layers',
+        desc: 'Giải pháp hạ tầng linh hoạt cho khối lượng công việc lớn trên Ubuntu 24.04 LTS.',
+        packages: [
+          {
+            id: 'elastic-cloud-24-04',
+            name: 'Elastic Cloud',
+            desc: 'Tự động co giãn tài nguyên theo tải thực tế',
+            unit: '/tháng',
+            price: 650000,
+            tags: ['Auto-scaling', 'Load Balancer', 'SSD NVMe'],
+            features: ['Mở rộng tức thời khi tăng traffic', 'Thanh toán theo mức dùng thực tế'],
+            highlight: false,
+          },
+          {
+            id: 'private-cloud-24-04',
+            name: 'Private Cloud',
+            desc: 'Hạ tầng cloud riêng biệt, không chia sẻ tài nguyên',
+            unit: '/tháng',
+            price: 5200000,
+            tags: ['Dedicated hardware', 'Ceph storage', 'SDN riêng'],
+            features: ['Cách ly hoàn toàn với khách hàng khác', 'Tùy biến cấu hình theo yêu cầu'],
+            highlight: true,
+          },
+          {
+            id: 'gpu-cloud-desktop-24-04',
+            name: 'GPU Cloud Desktop',
+            desc: 'Máy trạm ảo có GPU cho xử lý đồ hoạ, AI',
+            unit: '/tháng',
+            price: 2190000,
+            tags: ['GPU rời', '16 GB RAM', 'Ubuntu Desktop 24.04'],
+            features: ['Truy cập từ xa mọi lúc', 'Cấu hình GPU theo nhu cầu'],
+            highlight: false,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'ubuntu-23-10',
+    version: '23.10',
+    codename: 'Mantic Minotaur',
+    badge: 'Ổn định',
+    badgeTone: 'amber',
+    recommended: false,
+    releaseDate: 'Tháng 10, 2023',
+    supportUntil: 'Hỗ trợ đến 07/2024',
+    desc: 'Phiên bản trung gian với các tính năng mới nhất, phù hợp cho người dùng muốn trải nghiệm đầu tiên.',
+    groups: [
+      {
+        id: 'cloud-server',
+        name: 'Máy chủ ảo (Cloud Server)',
+        icon: 'lucide:server-cog',
+        desc: 'Khởi tạo máy chủ ảo chạy Ubuntu 23.10 chỉ trong vài phút, toàn quyền root.',
+        packages: [
+          {
+            id: 'smart-cloud-server-23-10',
+            name: 'Smart Cloud Server',
+            desc: 'Cloud server phổ thông, dùng thử tính năng mới trước bản LTS',
+            unit: '/tháng',
+            price: 99000,
+            tags: ['1 vCPU', '2 GB RAM', '40 GB SSD'],
+            features: ['Cài sẵn Ubuntu 23.10', 'Snapshot theo yêu cầu'],
+            highlight: false,
+          },
+          {
+            id: 'dedicated-cloud-server-23-10',
+            name: 'Dedicated Cloud Server',
+            desc: 'Tài nguyên riêng, phù hợp môi trường staging',
+            unit: '/tháng',
+            price: 890000,
+            tags: ['8 vCPU', '16 GB RAM', '200 GB SSD'],
+            features: ['Hiệu năng ổn định 100%', 'Backup tự động hàng ngày'],
+            highlight: true,
+          },
+          {
+            id: 'linux-cloud-server-23-10',
+            name: 'Linux Cloud Server',
+            desc: 'Trải nghiệm kernel và gói phần mềm mới nhất',
+            unit: '/tháng',
+            price: 249000,
+            tags: ['4 vCPU', '8 GB RAM', '100 GB SSD'],
+            features: ['Kernel 6.5 mới nhất', 'Hỗ trợ kỹ thuật giờ hành chính'],
+            highlight: false,
+          },
+        ],
+      },
+      {
+        id: 'hosting-email',
+        name: 'Hosting & Email',
+        icon: 'lucide:globe',
+        desc: 'Dịch vụ hosting và email chạy trên nền Ubuntu 23.10.',
+        packages: [
+          {
+            id: 'web-hosting-23-10',
+            name: 'Web Hosting',
+            desc: 'Hosting chia sẻ cho website vừa và nhỏ',
+            unit: '/tháng',
+            price: 49000,
+            tags: ['5 GB SSD', '1 domain', 'Free SSL'],
+            features: ['PHP 8.2 / MySQL 8', 'Sao lưu hàng tuần'],
+            highlight: false,
+          },
+          {
+            id: 'cloud-directadmin-23-10',
+            name: 'Cloud DirectAdmin',
+            desc: 'Hosting quản trị qua giao diện DirectAdmin',
+            unit: '/tháng',
+            price: 199000,
+            tags: ['20 GB SSD', '10 domain', 'DirectAdmin'],
+            features: ['Giao diện quản trị trực quan', 'Cài đặt ứng dụng 1-click'],
+            highlight: true,
+          },
+          {
+            id: 'email-hosting-23-10',
+            name: 'Email Hosting',
+            desc: 'Email doanh nghiệp theo tên miền riêng',
+            unit: '/tháng',
+            price: 29000,
+            tags: ['10 GB/hộp thư', 'Chống spam', 'Webmail'],
+            features: ['Đồng bộ đa thiết bị', 'Chống virus, spam tự động'],
+            highlight: false,
+          },
+        ],
+      },
+      {
+        id: 'advanced-infra',
+        name: 'Hạ tầng nâng cao',
+        icon: 'lucide:layers',
+        desc: 'Giải pháp hạ tầng linh hoạt cho khối lượng công việc lớn trên Ubuntu 23.10.',
+        packages: [
+          {
+            id: 'elastic-cloud-23-10',
+            name: 'Elastic Cloud',
+            desc: 'Tự động co giãn tài nguyên theo tải thực tế',
+            unit: '/tháng',
+            price: 590000,
+            tags: ['Auto-scaling', 'Load Balancer', 'SSD'],
+            features: ['Mở rộng tức thời khi tăng traffic'],
+            highlight: false,
+          },
+          {
+            id: 'private-cloud-23-10',
+            name: 'Private Cloud',
+            desc: 'Hạ tầng cloud riêng biệt, không chia sẻ tài nguyên',
+            unit: '/tháng',
+            price: 4900000,
+            tags: ['Dedicated hardware', 'Ceph storage'],
+            features: ['Cách ly hoàn toàn với khách hàng khác'],
+            highlight: true,
+          },
+          {
+            id: 'gpu-cloud-desktop-23-10',
+            name: 'GPU Cloud Desktop',
+            desc: 'Máy trạm ảo có GPU cho xử lý đồ hoạ, AI',
+            unit: '/tháng',
+            price: 1990000,
+            tags: ['GPU rời', '16 GB RAM', 'Ubuntu Desktop 23.10'],
+            features: ['Truy cập từ xa mọi lúc'],
+            highlight: false,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'ubuntu-22-04',
+    version: '22.04 LTS',
+    codename: 'Jammy Jellyfish',
+    badge: 'LTS',
+    badgeTone: 'slate',
+    recommended: false,
+    releaseDate: 'Tháng 4, 2022',
+    supportUntil: 'Hỗ trợ đến 2027',
+    desc: 'Phiên bản LTS trước, vẫn được hỗ trợ đầy đủ và được nhiều tổ chức tin dùng.',
+    groups: [
+      {
+        id: 'cloud-server',
+        name: 'Máy chủ ảo (Cloud Server)',
+        icon: 'lucide:server-cog',
+        desc: 'Khởi tạo máy chủ ảo chạy Ubuntu 22.04 LTS, phù hợp hệ thống đã kiểm chứng lâu dài.',
+        packages: [
+          {
+            id: 'smart-cloud-server-22-04',
+            name: 'Smart Cloud Server',
+            desc: 'Cloud server phổ thông, giá ưu đãi cho hệ thống cũ',
+            unit: '/tháng',
+            price: 89000,
+            tags: ['1 vCPU', '2 GB RAM', '40 GB SSD'],
+            features: ['Cài sẵn Ubuntu 22.04 LTS', 'Snapshot theo yêu cầu'],
+            highlight: false,
+          },
+          {
+            id: 'dedicated-cloud-server-22-04',
+            name: 'Dedicated Cloud Server',
+            desc: 'Tài nguyên riêng, tương thích phần mềm legacy',
+            unit: '/tháng',
+            price: 790000,
+            tags: ['8 vCPU', '16 GB RAM', '200 GB SSD'],
+            features: ['Hiệu năng ổn định 100%', 'Backup tự động hàng ngày'],
+            highlight: true,
+          },
+          {
+            id: 'linux-cloud-server-22-04',
+            name: 'Linux Cloud Server',
+            desc: 'Đã kiểm chứng ổn định qua nhiều năm vận hành',
+            unit: '/tháng',
+            price: 219000,
+            tags: ['4 vCPU', '8 GB RAM', '100 GB SSD'],
+            features: ['Kernel 5.15 LTS ổn định', 'Hỗ trợ kỹ thuật 24/7'],
+            highlight: false,
+          },
+        ],
+      },
+      {
+        id: 'hosting-email',
+        name: 'Hosting & Email',
+        icon: 'lucide:globe',
+        desc: 'Dịch vụ hosting và email chạy trên nền Ubuntu 22.04 LTS.',
+        packages: [
+          {
+            id: 'web-hosting-22-04',
+            name: 'Web Hosting',
+            desc: 'Hosting chia sẻ cho website vừa và nhỏ',
+            unit: '/tháng',
+            price: 45000,
+            tags: ['5 GB SSD', '1 domain', 'Free SSL'],
+            features: ['PHP 8.1 / MySQL 8', 'Sao lưu hàng tuần'],
+            highlight: false,
+          },
+          {
+            id: 'cloud-directadmin-22-04',
+            name: 'Cloud DirectAdmin',
+            desc: 'Hosting quản trị qua giao diện DirectAdmin',
+            unit: '/tháng',
+            price: 179000,
+            tags: ['20 GB SSD', 'Unlimited domain', 'DirectAdmin'],
+            features: ['Giao diện quản trị trực quan', 'Cài đặt ứng dụng 1-click'],
+            highlight: true,
+          },
+          {
+            id: 'email-hosting-22-04',
+            name: 'Email Hosting',
+            desc: 'Email doanh nghiệp theo tên miền riêng',
+            unit: '/tháng',
+            price: 25000,
+            tags: ['10 GB/hộp thư', 'Chống spam', 'Webmail'],
+            features: ['Đồng bộ đa thiết bị', 'Chống virus, spam tự động'],
+            highlight: false,
+          },
+        ],
+      },
+      {
+        id: 'advanced-infra',
+        name: 'Hạ tầng nâng cao',
+        icon: 'lucide:layers',
+        desc: 'Giải pháp hạ tầng linh hoạt, đã kiểm chứng ổn định trên Ubuntu 22.04 LTS.',
+        packages: [
+          {
+            id: 'elastic-cloud-22-04',
+            name: 'Elastic Cloud',
+            desc: 'Tự động co giãn tài nguyên theo tải thực tế',
+            unit: '/tháng',
+            price: 530000,
+            tags: ['Auto-scaling', 'Load Balancer', 'SSD'],
+            features: ['Mở rộng tức thời khi tăng traffic'],
+            highlight: false,
+          },
+          {
+            id: 'private-cloud-22-04',
+            name: 'Private Cloud',
+            desc: 'Hạ tầng cloud riêng biệt, không chia sẻ tài nguyên',
+            unit: '/tháng',
+            price: 4500000,
+            tags: ['Dedicated hardware', 'Ceph storage'],
+            features: ['Cách ly hoàn toàn với khách hàng khác'],
+            highlight: true,
+          },
+          {
+            id: 'gpu-cloud-desktop-22-04',
+            name: 'GPU Cloud Desktop',
+            desc: 'Máy trạm ảo có GPU cho xử lý đồ hoạ, AI',
+            unit: '/tháng',
+            price: 1790000,
+            tags: ['GPU rời', '16 GB RAM', 'Ubuntu Desktop 22.04'],
+            features: ['Truy cập từ xa mọi lúc'],
+            highlight: false,
+          },
+        ],
+      },
+    ],
+  },
+]

package/app/layers/solution/app/pages/giai-phap-proxmox/[slug]/index.vue

@@ -8,7 +8,7 @@ const slug = computed(() => route.params.slug as string)
 
 const { data } = await useAsyncData(
   `slug-${slug.value}`,
-  () => getSlugData(slug.value),
+  () => getSlugData(slug.value, 'giai-phap'),
   { server: true }
 )
 </script>

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

@@ -8,12 +8,12 @@ const slug = computed(() => route.params.slug as string)
 
 const { data } = await useAsyncData(
   `slug-${slug.value}`,
-  () => getSlugData(slug.value),
+  () => getSlugData(slug.value, 'giai-phap'),
   { server: true }
 )
 </script>
 
-<template>
+<template>{{ data }}
   <DynamicPageSections
     :field-resumes="data?.resumeData?.fieldResumes"
     :target-c-t-a="data?.productData?.targetCTA"

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+const { getSlugData } = useSolutionApi()
+
+const slug = computed(() => route.params.slug as string)
+
+const { data } = await useAsyncData(
+  `slug-${slug.value}`,
+  () => getSlugData(slug.value, 'gioi-thieu-template'),
+  { server: true }
+)
+</script>
+
+<template>
+  <DynamicPageSections
+    :field-resumes="data?.resumeData?.fieldResumes"
+    :target-c-t-a="data?.productData?.targetCTA"
+    :slug="data?.productData?.slug || slug"
+  />
+</template>

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

@@ -8,7 +8,7 @@ const slug = computed(() => route.params.slug as string)
 
 const { data } = await useAsyncData(
   `slug-${slug.value}`,
-  () => getSlugData(slug.value),
+  () => getSlugData(slug.value, 'giai-phap'),
   { server: true }
 )
 </script>

package/package.json

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