nuxt-layer-core 2.0.1

package/app/layers/solution/app/pages/dang-nhap/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <div>
+    <TheHeader />
+    <div class="min-h-[calc(50vh-4rem)] flex items-start justify-center pt-20 pb-16 px-6">
+      <div class="w-full max-w-md">
+      <!-- Header -->
+      <div class="mb-8 text-center">
+        <h1 class="font-['Montserrat'] font-extrabold text-2xl text-slate-900 mb-2">Đăng nhập</h1>
+        <p class="text-slate-500 text-sm">Chào mừng trở lại! Nhập thông tin để tiếp tục.</p>
+      </div>
+
+      <!-- Form card -->
+      <div class="bg-white rounded-2xl shadow-sm border border-slate-200/80 p-8">
+        <form @submit.prevent="onSubmit" class="space-y-5">
+          <!-- Username -->
+          <div>
+            <label for="username" class="block text-sm font-semibold text-slate-700 mb-1.5">
+              Tên tài khoản
+            </label>
+            <div class="relative">
+              <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
+                <Icon name="lucide:user" class="text-[17px]" />
+              </span>
+              <input
+                id="username"
+                v-model="form.username"
+                type="text"
+                autocomplete="username"
+                placeholder="Nhập SĐT hoặc Email"
+                :class="[
+                  'w-full pl-10 pr-4 py-3 rounded-[10px] border text-sm outline-none transition-all',
+                  errors.username
+                    ? 'border-red-400 bg-red-50 focus:border-red-500 focus:ring-2 focus:ring-red-100'
+                    : 'border-slate-200 bg-slate-50 focus:border-[#004AC6] focus:ring-2 focus:ring-blue-100 focus:bg-white'
+                ]"
+              />
+            </div>
+            <p v-if="errors.username" class="mt-1 text-xs text-red-500 flex items-center gap-1">
+              <Icon name="lucide:alert-circle" class="text-[13px]" /> {{ errors.username }}
+            </p>
+          </div>
+
+          <!-- Password -->
+          <div>
+            <div class="flex items-center justify-between mb-1.5">
+              <label for="password" class="text-sm font-semibold text-slate-700">Mật khẩu</label>
+              <NuxtLink :to="{ path: '/quen-mat-khau', query: { redirectUrl } }" class="text-xs text-[#004AC6] font-medium hover:underline">
+                Quên mật khẩu?
+              </NuxtLink>
+            </div>
+            <div class="relative">
+              <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
+                <Icon name="lucide:lock" class="text-[17px]" />
+              </span>
+              <input
+                id="password"
+                v-model="form.password"
+                :type="showPassword ? 'text' : 'password'"
+                autocomplete="current-password"
+                placeholder="Nhập mật khẩu"
+                :class="[
+                  'w-full pl-10 pr-11 py-3 rounded-[10px] border text-sm outline-none transition-all',
+                  errors.password
+                    ? 'border-red-400 bg-red-50 focus:border-red-500 focus:ring-2 focus:ring-red-100'
+                    : 'border-slate-200 bg-slate-50 focus:border-[#004AC6] focus:ring-2 focus:ring-blue-100 focus:bg-white'
+                ]"
+              />
+              <button
+                type="button"
+                @click="showPassword = !showPassword"
+                class="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors"
+              >
+                <Icon :name="showPassword ? 'lucide:eye-off' : 'lucide:eye'" class="text-[17px]" />
+              </button>
+            </div>
+            <p v-if="errors.password" class="mt-1 text-xs text-red-500 flex items-center gap-1">
+              <Icon name="lucide:alert-circle" class="text-[13px]" /> {{ errors.password }}
+            </p>
+          </div>
+
+          <!-- Remember me -->
+          <div class="flex items-center gap-2.5">
+            <input
+              id="remember"
+              v-model="form.remember"
+              type="checkbox"
+              class="w-4 h-4 rounded border-slate-300 text-[#004AC6] accent-[#004AC6] cursor-pointer"
+            />
+            <label for="remember" class="text-sm text-slate-600 cursor-pointer select-none">Ghi nhớ đăng nhập</label>
+          </div>
+
+          <!-- Submit -->
+          <button
+            type="submit"
+            :disabled="loading"
+            class="w-full flex items-center justify-center gap-2 bg-[#004AC6] hover:bg-[#1D4ED8] active:scale-[.98] text-white font-bold py-3.5 rounded-[10px] transition-all shadow-sm shadow-blue-600/20 disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            <span v-if="!loading">Đăng nhập</span>
+            <span v-else class="flex items-center gap-2">
+              <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
+              </svg>
+              Đang xử lý...
+            </span>
+          </button>
+        </form>
+
+        <!-- Divider -->
+        <div class="flex items-center gap-3 my-6">
+          <div class="flex-1 h-px bg-slate-200" />
+          <span class="text-xs text-slate-400 font-medium">hoặc</span>
+          <div class="flex-1 h-px bg-slate-200" />
+        </div>
+
+        <!-- Register link -->
+        <p class="text-center text-sm text-slate-500">
+          Chưa có tài khoản?
+          <NuxtLink :to="{ path: '/dang-ky', query: { redirectUrl } }" class="text-[#004AC6] font-semibold hover:underline ml-1">
+            Đăng ký ngay
+          </NuxtLink>
+        </p>
+      </div>
+      </div>
+    </div>
+    <TheFooter/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+
+definePageMeta({ layout: 'default' })
+
+useHead({ title: 'Đăng nhập — Long Vân' })
+
+const { login, getUserByToken } = useAuthApi()
+const { setCookie } = useCookieHelper()
+const { setUser } = useAuthState()
+const config = useRuntimeConfig()
+const route = useRoute()
+const router = useRouter()
+
+const tokenKey = config.public.ACCESSTOKEN_NAME as string
+const redirectUrl = computed(() => route.query.redirectUrl as string || '/')
+
+const form = reactive({
+  username: '',
+  password: '',
+  remember: false,
+})
+
+const errors = reactive({ username: '', password: '' })
+const loading = ref(false)
+const showPassword = ref(false)
+
+function validate() {
+  errors.username = ''
+  errors.password = ''
+  let valid = true
+  if (!form.username.trim()) {
+    errors.username = 'Vui lòng nhập tên tài khoản'
+    valid = false
+  }
+  if (!form.password) {
+    errors.password = 'Vui lòng nhập mật khẩu'
+    valid = false
+  } else if (form.password.length < 6) {
+    errors.password = 'Mật khẩu tối thiểu 6 ký tự'
+    valid = false
+  }
+  return valid
+}
+
+async function onSubmit() {
+  if (!validate()) return
+  loading.value = true
+
+  try {
+    const res = await login({
+      username: form.username.trim(),
+      password: form.password,
+      type: 'PW',
+    })
+
+    if (res?.accessToken) {
+      const days = form.remember ? 30 : 1
+      setCookie(tokenKey, res.accessToken, days)
+
+      // Update auth state for Header
+      setUser(res.fullName || res.username || form.username.trim())
+
+      const redirectUrl = route.query.redirectUrl as string
+      if (redirectUrl) {
+        window.location.assign(redirectUrl)
+      } else {
+        router.push('/giai-phap-proxmox')
+      }
+    } else {
+      toast.error('Tên tài khoản hoặc mật khẩu không đúng.')
+    }
+  } catch (err: any) {
+    toast.error(err?.message || 'Đã có lỗi xảy ra. Vui lòng thử lại.')
+  } finally {
+    loading.value = false
+  }
+}
+</script>

package/app/layers/solution/app/pages/doi-mat-khau/index.vue

@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <TheHeader />
+    <div class="min-h-[calc(50vh-4rem)] flex items-start justify-center pt-20 pb-16 px-6">
+      <div class="w-full max-w-md">
+      <!-- Header -->
+      <div class="mb-8 text-center">
+        <h1 class="font-['Montserrat'] font-extrabold text-2xl text-slate-900 mb-2">Đổi mật khẩu</h1>
+        <p class="text-slate-500 text-sm">Tạo mật khẩu mới bảo mật cho tài khoản của bạn.</p>
+      </div>
+
+      <!-- Card -->
+      <div class="bg-white rounded-2xl shadow-sm border border-slate-200/80 p-8">
+
+        <!-- Invalid/missing token state -->
+        <div v-if="!resetKey && !route.query.token" class="text-center space-y-4 py-4">
+          <div class="w-14 h-14 rounded-[10px] bg-amber-50 flex items-center justify-center mx-auto">
+            <Icon name="lucide:alert-triangle" class="text-amber-500 text-[26px]" />
+          </div>
+          <p class="text-slate-600 text-sm">Link đặt lại mật khẩu không hợp lệ hoặc đã hết hạn.</p>
+          <NuxtLink to="/quen-mat-khau" class="inline-flex items-center gap-2 text-[#004AC6] font-semibold hover:underline">
+            <Icon name="lucide:arrow-left" class="text-[15px]" />
+            Yêu cầu lại
+          </NuxtLink>
+        </div>
+
+        <!-- Change password form -->
+        <form v-else @submit.prevent="onSubmit" class="space-y-5">
+          <!-- New password -->
+          <div>
+            <label for="newPass" class="block text-sm font-semibold text-slate-700 mb-1.5">Mật khẩu mới</label>
+            <div class="relative">
+              <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
+                <Icon name="lucide:lock" class="text-[17px]" />
+              </span>
+              <input
+                id="newPass"
+                v-model="form.newPassword"
+                :type="showNew ? 'text' : 'password'"
+                autocomplete="new-password"
+                placeholder="Tối thiểu 6 ký tự"
+                :class="[
+                  'w-full pl-10 pr-11 py-3 rounded-[10px] border text-sm outline-none transition-all',
+                  errors.newPassword
+                    ? 'border-red-400 bg-red-50 focus:border-red-500 focus:ring-2 focus:ring-red-100'
+                    : 'border-slate-200 bg-slate-50 focus:border-[#004AC6] focus:ring-2 focus:ring-blue-100 focus:bg-white'
+                ]"
+              />
+              <button type="button" @click="showNew = !showNew" class="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors">
+                <Icon :name="showNew ? 'lucide:eye-off' : 'lucide:eye'" class="text-[17px]" />
+              </button>
+            </div>
+            <p v-if="errors.newPassword" class="mt-1 text-xs text-red-500 flex items-center gap-1">
+              <Icon name="lucide:alert-circle" class="text-[13px]" /> {{ errors.newPassword }}
+            </p>
+
+            <!-- Strength indicator -->
+            <div class="mt-2 space-y-1">
+              <div class="flex gap-1">
+                <div v-for="i in 4" :key="i" :class="['h-1 flex-1 rounded-[10px] transition-all', strengthLevel >= i ? strengthColor : 'bg-slate-200']" />
+              </div>
+              <p v-if="form.newPassword" class="text-xs" :class="strengthTextColor">{{ strengthLabel }}</p>
+            </div>
+          </div>
+
+          <!-- Confirm password -->
+          <div>
+            <label for="confirmPass" class="block text-sm font-semibold text-slate-700 mb-1.5">Xác nhận mật khẩu</label>
+            <div class="relative">
+              <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
+                <Icon name="lucide:lock" class="text-[17px]" />
+              </span>
+              <input
+                id="confirmPass"
+                v-model="form.confirmPassword"
+                :type="showConfirm ? 'text' : 'password'"
+                autocomplete="new-password"
+                placeholder="Nhập lại mật khẩu mới"
+                :class="[
+                  'w-full pl-10 pr-11 py-3 rounded-[10px] border text-sm outline-none transition-all',
+                  errors.confirmPassword
+                    ? 'border-red-400 bg-red-50 focus:border-red-500 focus:ring-2 focus:ring-red-100'
+                    : 'border-slate-200 bg-slate-50 focus:border-[#004AC6] focus:ring-2 focus:ring-blue-100 focus:bg-white'
+                ]"
+              />
+              <button type="button" @click="showConfirm = !showConfirm" class="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors">
+                <Icon :name="showConfirm ? 'lucide:eye-off' : 'lucide:eye'" class="text-[17px]" />
+              </button>
+            </div>
+            <p v-if="errors.confirmPassword" class="mt-1 text-xs text-red-500 flex items-center gap-1">
+              <Icon name="lucide:alert-circle" class="text-[13px]" /> {{ errors.confirmPassword }}
+            </p>
+          </div>
+
+          <!-- Password rules -->
+          <ul class="space-y-1.5">
+            <li v-for="rule in passwordRules" :key="rule.label" class="flex items-center gap-2 text-xs">
+              <Icon
+                :name="rule.met ? 'lucide:check-circle' : 'lucide:circle'"
+                :class="rule.met ? 'text-emerald-500' : 'text-slate-300'"
+                class="text-[14px] shrink-0"
+              />
+              <span :class="rule.met ? 'text-emerald-600' : 'text-slate-400'">{{ rule.label }}</span>
+            </li>
+          </ul>
+
+          <div v-if="apiError" class="flex items-start gap-2 bg-red-50 border border-red-200 rounded-[10px] px-4 py-3 text-sm text-red-700">
+            <Icon name="lucide:alert-triangle" class="text-[16px] mt-0.5 shrink-0" />
+            <span>{{ apiError }}</span>
+          </div>
+
+          <button
+            type="submit"
+            :disabled="loading"
+            class="w-full flex items-center justify-center gap-2 bg-[#004AC6] hover:bg-[#1D4ED8] active:scale-[.98] text-white font-bold py-3.5 rounded-[10px] transition-all shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            <span v-if="!loading">Đổi mật khẩu</span>
+            <span v-else class="flex items-center gap-2">
+              <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
+              </svg>
+              Đang cập nhật...
+            </span>
+          </button>
+        </form>
+      </div>
+      </div>
+    </div>
+    <TheFooter/>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+useHead({ title: 'Đổi mật khẩu — Long Vân' })
+
+const { checkResetKey, resetPassword } = useAuthApi()
+const route = useRoute()
+const router = useRouter()
+
+const redirectUrl = computed(() => route.query.redirectUrl as string || '/')
+const resetKey = ref('')
+const loading = ref(false)
+const apiError = ref('')
+const showNew = ref(false)
+const showConfirm = ref(false)
+
+const form = reactive({ newPassword: '', confirmPassword: '' })
+const errors = reactive({ newPassword: '', confirmPassword: '' })
+
+// Password strength
+const passwordRules = computed(() => [
+  { label: 'Tối thiểu 6 ký tự', met: form.newPassword.length >= 6 },
+  { label: 'Có chữ hoa (A-Z)', met: /[A-Z]/.test(form.newPassword) },
+  { label: 'Có chữ số (0-9)', met: /\d/.test(form.newPassword) },
+  { label: 'Có ký tự đặc biệt (!@#...)', met: /[!@#$%^&*]/.test(form.newPassword) },
+])
+
+const strengthLevel = computed(() => passwordRules.value.filter(r => r.met).length)
+const strengthColor = computed(() => {
+  if (strengthLevel.value <= 1) return 'bg-red-400'
+  if (strengthLevel.value === 2) return 'bg-amber-400'
+  if (strengthLevel.value === 3) return 'bg-blue-400'
+  return 'bg-emerald-500'
+})
+const strengthTextColor = computed(() => {
+  if (strengthLevel.value <= 1) return 'text-red-500'
+  if (strengthLevel.value === 2) return 'text-amber-600'
+  if (strengthLevel.value === 3) return 'text-blue-600'
+  return 'text-emerald-600'
+})
+const strengthLabel = computed(() => {
+  if (strengthLevel.value <= 1) return 'Yếu'
+  if (strengthLevel.value === 2) return 'Trung bình'
+  if (strengthLevel.value === 3) return 'Khá mạnh'
+  return 'Rất mạnh'
+})
+
+function validate() {
+  errors.newPassword = ''
+  errors.confirmPassword = ''
+  let valid = true
+  if (!form.newPassword) {
+    errors.newPassword = 'Vui lòng nhập mật khẩu mới'
+    valid = false
+  } else if (form.newPassword.length < 6) {
+    errors.newPassword = 'Mật khẩu tối thiểu 6 ký tự'
+    valid = false
+  }
+  if (!form.confirmPassword) {
+    errors.confirmPassword = 'Vui lòng xác nhận mật khẩu'
+    valid = false
+  } else if (form.newPassword !== form.confirmPassword) {
+    errors.confirmPassword = 'Mật khẩu xác nhận không khớp'
+    valid = false
+  }
+  return valid
+}
+
+async function onSubmit() {
+  if (!validate()) return
+  loading.value = true
+  apiError.value = ''
+
+  try {
+    const phone = route.query.phone as string
+    const token = route.query.token as string
+
+    if (token && phone) {
+      // Reset password using OTP token
+      await resetPassword(phone, form.newPassword, token)
+      router.push('/dang-nhap')
+    } else if (resetKey.value) {
+      // Validate reset key first
+      const keyRes = await checkResetKey(resetKey.value)
+      if (!keyRes?.accessToken) {
+        apiError.value = 'Link đặt lại mật khẩu đã hết hạn.'
+        return
+      }
+      await resetPassword(keyRes.userLoginId, form.newPassword, keyRes.accessToken)
+      router.push('/dang-nhap')
+    } else {
+      apiError.value = 'Thiếu thông tin xác thực. Vui lòng thử lại.'
+    }
+  } catch (err: any) {
+    apiError.value = err?.message || 'Đã có lỗi xảy ra. Vui lòng thử lại.'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  resetKey.value = route.query.key as string || ''
+})
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <div class="bg-ink text-cloud font-body antialiased">
+    <TheHeader :target-c-t-a="targetCTA" :slug="slug" />
+    <HeroSection />
+    <FeaturesSection />
+    <CoursesSection :plans="data?.resumeData" :target-c-t-a="targetCTA" :slug="slug" />
+    <TestimonialsSection />
+    <CtaSection v-if="targetCTA === 'CONSULTANT'" :plans="data?.resumeData" />
+    <TheFooter/>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: 'default',
+})
+
+const route = useRoute()
+const { getSolutionDetail } = useSolutionApi()
+
+const { data, error } = await useAsyncData(
+  `solution-${route.params.slug}`,
+  () => getSolutionDetail(route.params.slug, 'giai-phap'),
+  { server: true }
+)
+
+if (error.value || !data.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Không tìm thấy giải pháp', fatal: true })
+}
+
+const targetCTA = computed(() => data.value?.productData?.[0]?.targetCTA || '')
+const slug = computed(() => data.value?.productData?.[0]?.slug || String(route.params.slug))
+
+useHead({
+  title: computed(() => data.value?.productData?.product?.title || 'Giới thiệu giải pháp Proxmox HCI'),
+})
+</script>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+definePageMeta({
+    layout: 'default',
+})
+
+const route = useRoute()
+const { getSolutionDetail } = useSolutionApi()
+
+const { data, error } = await useAsyncData(
+    `solution-${route.params.slug}`,
+    () => getSolutionDetail(String(route.params.slug), 'giai-phap'),
+    { server: true }
+)
+
+if (error.value || !data.value) {
+    throw createError({ statusCode: 404, statusMessage: 'Không tìm thấy giải pháp', fatal: true })
+}
+
+const targetCTA = computed(() => data.value?.productData?.[0]?.targetCTA || '')
+const slug = computed(() => data.value?.productData?.[0]?.slug || String(route.params.slug))
+
+useHead({
+    title: computed(() => data.value?.productData?.product?.title || 'Giới thiệu sản phẩm Proxmox HCI'),
+})
+
+</script>
+
+<template>
+    <div>
+        <main class="min-h-screen bg-white text-slate-900">
+            <TheHeader :target-c-t-a="targetCTA" :slug="slug" />
+            <ProxmoxHeroSection />
+            <ProxmoxVeFeaturesSection />
+            <ProxmoxHciOverviewSection />
+            <PricingPlansSection />
+            <ProxmoxTrainingBenefitsSection />
+            <ProxmoxComparisonSection />
+            <CoursesSection :plans="data?.resumeData" :target-c-t-a="targetCTA" :slug="slug" />
+            <ProxmoxTestimonialsSection />
+            <ProxmoxFaqSection />
+            <CtaSection v-if="targetCTA === 'CONSULTANT'" :plans="data?.resumeData" />
+            <TheFooter />
+        </main>
+    </div>
+</template>

package/app/layers/solution/app/pages/giai-phap-proxmox/dang-ky-khoa-hoc/[slug].vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+const { getSolutionDetail } = useSolutionApi()
+
+const slug = computed(() => route.params.slug as string)
+
+// SSR data fetch
+const { data, error } = await useAsyncData(
+  `dang-ky-${slug.value}`,
+  () => getSolutionDetail(slug.value, 'giai-phap'),
+  { server: true }
+)
+
+if (error.value || !data.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Không tìm thấy khóa học', fatal: true })
+}
+
+// Format plans from resumeData
+const formatPlans = (resumeData: any) => {
+  const fieldResumes = resumeData?.fieldResumes || []
+  return fieldResumes
+    ?.filter((group: any) => group?.type === 'FIELD_GROUP' && Array.isArray(group?.children))
+    ?.map((group: any) => {
+      const fields = Object.fromEntries(
+        group.children?.map((field: any) => [field?.fieldName?.split('@')?.pop(), field?.value]) || []
+      )
+      return {
+        id: fields.productid || group.fieldName,
+        name: fields.title || '',
+        level: fields.level || '',
+        duration: fields.time || '',
+        icon: fields.icon || 'lucide:server',
+      }
+    }) || []
+}
+
+const plans = computed(() => formatPlans(data.value?.resumeData))
+const targetCTA = computed(() => data.value?.productData?.[0]?.targetCTA || '')
+const selectedPlanId = computed(() => (route.query.plan as string) || '')
+
+useHead({
+  title: computed(() => `Đăng ký khóa học - ${data.value?.productData?.[0]?.product?.title || 'Proxmox HCI'}`),
+})
+</script>
+
+<template>
+  <div class="bg-ink text-cloud font-body antialiased">
+    <TheHeader :target-c-t-a="targetCTA" :slug="slug" />
+
+    <div class="min-h-screen bg-[#f4f5f9] px-6 py-[7rem] font-sans text-slate-900">
+      <div class="mx-auto grid max-w-[1000px] grid-cols-1 items-start gap-6 md:grid-cols-[340px_1fr]">
+        <!-- Left column -->
+        <aside class="flex flex-col gap-4">
+          <div class="rounded-2xl border border-[#e7e9f0] bg-white p-7">
+            <h2 class="mb-5 text-[17px] font-bold text-slate-900">Vì sao chọn chúng tôi</h2>
+            <ul class="flex flex-col gap-[22px]">
+              <li class="flex items-start gap-3">
+                <span
+                  class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
+                  <svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                    <circle cx="9" cy="7" r="4" />
+                    <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+                  </svg>
+                </span>
+                <span class="flex flex-col gap-[3px]">
+                  <span class="text-sm font-semibold text-slate-900">Lớp nhỏ, kèm sát</span>
+                  <span class="text-[13px] leading-relaxed text-gray-500">Sĩ số giới hạn, giảng viên hỗ trợ trực tiếp
+                    từng học viên.</span>
+                </span>
+              </li>
+              <li class="flex items-start gap-3">
+                <span
+                  class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
+                  <svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M22 10 12 5 2 10l10 5 10-5Z" />
+                    <path d="M6 12v5c0 1.66 2.69 3 6 3s6-1.34 6-3v-5" />
+                  </svg>
+                </span>
+                <span class="flex flex-col gap-[3px]">
+                  <span class="text-sm font-semibold text-slate-900">Thực hành hệ thống thật</span>
+                  <span class="text-[13px] leading-relaxed text-gray-500">Thao tác trên cụm Proxmox HCI thực tế, không
+                    chỉ lý thuyết.</span>
+                </span>
+              </li>
+              <li class="flex items-start gap-3">
+                <span
+                  class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
+                  <svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="m9 12 2 2 4-4" />
+                  </svg>
+                </span>
+                <span class="flex flex-col gap-[3px]">
+                  <span class="text-sm font-semibold text-slate-900">Chứng nhận hoàn thành</span>
+                  <span class="text-[13px] leading-relaxed text-gray-500">Cấp chứng nhận và hỗ trợ tư vấn nghề nghiệp
+                    sau khóa học.</span>
+                </span>
+              </li>
+            </ul>
+          </div>
+
+          <div class="rounded-2xl border border-[#dbe4fd] bg-[#eef2ff] px-6 py-[22px]">
+            <p class="mb-2 flex items-center gap-[9px] text-sm font-bold text-[#2f5fe0]">
+              <svg class="h-[17px] w-[17px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M23 7 16 12l7 5V7Z" />
+                <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+              </svg>
+              Khai giảng linh hoạt
+            </p>
+            <p class="text-[13px] leading-relaxed text-gray-600">
+              Lịch học buổi tối và cuối tuần, phù hợp cho cả người đi làm. Hỗ trợ ghi hình buổi học để xem lại.
+            </p>
+          </div>
+        </aside>
+
+        <!-- Right column: form -->
+        <RegistrationForm :plans="plans" :selected-plan-id="selectedPlanId" />
+      </div>
+    </div>
+
+    <TheFooter />
+  </div>
+</template>