nuxt-layer-core 1.0.1

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

@@ -0,0 +1,396 @@
+<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: `/dang-ky-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>

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

@@ -0,0 +1,283 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  plans?: Array<{
+    id: string
+    name: string
+    level: string
+    duration: string
+    icon: string
+    price?: string
+    description?: string
+  }>
+  selectedPlanId?: string
+}>(), {
+  plans: () => [],
+})
+
+const { addOpportunity } = useCrmApi()
+
+// Form state
+const selectedCourseId = ref(props.selectedPlanId || '')
+const form = reactive({ name: '', phone: '', email: '', note: '' })
+const studyMode = ref('online')
+const errors = reactive({ name: '', phone: '', email: '', course: '' })
+const touched = reactive({ name: false, phone: false, email: false, course: false })
+const submitting = ref(false)
+const submitSuccess = ref(false)
+
+// Auto-select first plan if none selected
+watch(() => props.plans, (list: any) => {
+  if (!selectedCourseId.value && list.length > 0) {
+    selectedCourseId.value = list[0].id
+  }
+}, { immediate: true })
+
+// Sync when selectedPlanId prop changes
+watch(() => props.selectedPlanId, (id) => {
+  if (id) selectedCourseId.value = id
+})
+
+const selectedPlan = computed(() => props.plans.find((p) => p.id === selectedCourseId.value))
+
+// Validation
+function touch(field: keyof typeof touched) {
+  touched[field] = true
+  validateField(field)
+}
+
+function validateField(field: keyof typeof touched) {
+  if (field === 'name') {
+    if (!form.name) errors.name = 'Vui lòng nhập họ tên'
+    else if (form.name.length < 2) errors.name = 'Họ tên phải có ít nhất 2 ký tự'
+    else errors.name = ''
+  }
+  if (field === 'phone') {
+    if (!form.phone) errors.phone = 'Vui lòng nhập số điện thoại'
+    else if (!/^(0|\+84)\d{9,10}$/.test(form.phone.replace(/\s/g, ''))) errors.phone = 'Số điện thoại không hợp lệ'
+    else errors.phone = ''
+  }
+  if (field === 'email') {
+    if (form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errors.email = 'Email không hợp lệ'
+    else errors.email = ''
+  }
+  if (field === 'course') {
+    if (!selectedCourseId.value) errors.course = 'Vui lòng chọn khóa học'
+    else errors.course = ''
+  }
+}
+
+function formatLevel(level?: string) {
+  const labels: Record<string, string> = {
+    basic: 'Cơ bản',
+    advanced: 'Nâng cao',
+    expert: 'Chuyên gia',
+  }
+
+  return labels[level || ''] || level || ''
+}
+
+// Ghép level + duration, bỏ qua phần nào rỗng thay vì để dính dấu "·" trơ
+function planMetaLine(plan: { level?: string; duration?: string }) {
+  return [formatLevel(plan.level), plan.duration].filter(Boolean).join(' · ')
+}
+
+function validateAll() {
+  ; (['name', 'phone', 'email', 'course'] as const).forEach((f) => {
+    touched[f] = true
+    validateField(f)
+  })
+  return !errors.name && !errors.phone && !errors.email && !errors.course
+}
+
+// Submit
+async function handleSubmit() {
+  if (!validateAll()) return
+  submitting.value = true
+  submitSuccess.value = false
+
+  try {
+    const hostname = window.location.origin
+    const studyModeLabel =
+      studyMode.value === 'online'
+        ? 'Học trực tuyến (Online)'
+        : studyMode.value === 'offline'
+          ? 'Học tại lớp (Offline)'
+          : 'Đào tạo doanh nghiệp'
+
+    const levelLabel =
+      selectedPlan.value?.level === 'basic'
+        ? 'Cơ bản'
+        : selectedPlan.value?.level === 'advanced'
+          ? 'Nâng cao'
+          : selectedPlan.value?.level === 'expert'
+            ? 'Chuyên gia'
+            : selectedPlan.value?.level || ''
+
+
+    const description = [
+      `<strong>Khóa học:</strong> ${selectedPlan.value?.name || ''}`,
+      `<strong>Trình độ:</strong> ${levelLabel}`,
+      `<strong>Thời lượng:</strong> ${selectedPlan.value?.duration || ''}`,
+      `<strong>Hình thức học:</strong> ${studyModeLabel}`,
+      `<strong>Họ và tên:</strong> ${form.name}`,
+      `<strong>Số điện thoại:</strong> ${form.phone}`,
+      `<strong>Email:</strong> ${form.email || 'Không cung cấp'}`,
+      `<strong>Ghi chú:</strong> ${form.note || 'Không có'}`,
+    ].join('<br>')
+
+    await addOpportunity({
+      name: `Yêu cầu đăng ký khóa học ${selectedPlan.value?.name}`,
+      description: description,
+      referName: form.name,
+      referPhone: form.phone,
+      referEmail: form.email,
+      targetUrl: `${hostname}${window.location.pathname}`,
+      extSource: 'WEBSITE',
+    })
+    submitSuccess.value = true
+
+    setTimeout(() => {
+      submitSuccess.value = false
+    }, 2000)
+    form.name = ''
+    form.phone = ''
+    form.email = ''
+    form.note = ''
+    Object.keys(touched).forEach((k) => (touched[k as keyof typeof touched] = false))
+  } catch (err) {
+    console.error('Error submitting registration:', err)
+    errors.name = 'Gửi đăng ký thất bại, vui lòng thử lại.'
+    touched.name = true
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="rounded-2xl border border-[#e7e9f0] bg-white p-8">
+    <h2 class="mb-5 text-[17px] font-bold text-slate-900">Thông tin đăng ký</h2>
+
+    <form @submit.prevent="handleSubmit">
+      <!-- Course selection -->
+      <div class="mb-5">
+        <label class="mb-[10px] block text-[13px] font-semibold text-gray-700">
+          {{ plans.length === 1 ? 'Gói bạn đăng ký tư vấn' : 'Chọn khóa học' }}
+        </label>
+
+        <!-- Đã chọn sẵn 1 gói từ trang trước -> chỉ hiển thị thông tin, không cần chọn lại -->
+        <div v-if="plans.length === 1" class="flex flex-col gap-2 rounded-[10px] border border-[#2f5fe0] bg-[#eef3ff] px-4 py-[14px]">
+          <div class="flex items-center gap-3">
+            <span class="relative h-[18px] w-[18px] flex-none rounded-[10px] border-2 border-[#2f5fe0]">
+              <span class="absolute inset-[3px] rounded-[10px] bg-[#2f5fe0]" />
+            </span>
+            <span class="flex flex-col gap-[2px]">
+              <span class="text-sm font-semibold text-slate-900">{{ plans[0].name }}</span>
+              <span v-if="planMetaLine(plans[0])" class="text-[12.5px] text-gray-500">{{ planMetaLine(plans[0]) }}</span>
+            </span>
+          </div>
+          <p v-if="plans[0].price" class="pl-[30px] text-[12.5px] font-semibold text-[#2f5fe0]">{{ plans[0].price }}</p>
+          <p v-if="plans[0].description" class="pl-[30px] text-[12.5px] text-gray-500">{{ plans[0].description }}</p>
+        </div>
+
+        <div v-else class="flex flex-col gap-[10px]">
+          <label v-for="course in plans" :key="course.id"
+            class="relative flex cursor-pointer items-center gap-3 rounded-[10px] border px-4 py-[14px] transition-colors"
+            :class="selectedCourseId === course.id ? 'border-[#2f5fe0] bg-[#eef3ff]' : 'border-[#e2e5ee] bg-white'">
+            <input type="radio" name="course" class="absolute h-0 w-0 opacity-0" :value="course.id"
+              v-model="selectedCourseId" @change="touch('course')">
+            <span class="relative h-[18px] w-[18px] flex-none rounded-[10px] border-2 transition-colors"
+              :class="selectedCourseId === course.id ? 'border-[#2f5fe0]' : 'border-[#cbd2e1]'">
+              <span v-if="selectedCourseId === course.id" class="absolute inset-[3px] rounded-[10px] bg-[#2f5fe0]" />
+            </span>
+            <span class="flex flex-col gap-[2px]">
+              <span class="text-sm font-semibold text-slate-900">{{ course.name }}</span>
+              <span v-if="planMetaLine(course)" class="text-[12.5px] text-gray-500">{{ planMetaLine(course) }}</span>
+            </span>
+          </label>
+        </div>
+        <p v-if="touched.course && errors.course" class="mt-1 text-[12px] text-red-500">{{ errors.course }}</p>
+      </div>
+
+      <!-- Name & Phone -->
+      <div class="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div>
+          <label class="mb-[10px] block text-[13px] font-semibold text-gray-700" for="fullname">Họ và tên</label>
+          <input id="fullname" v-model="form.name" type="text"
+            class="w-full rounded-[10px] border px-[14px] py-[11px] text-sm text-slate-900 placeholder:text-gray-400 focus:outline-none focus:ring-[3px]"
+            :class="touched.name && errors.name ? 'border-red-400 focus:border-red-400 focus:ring-red-400/15' : 'border-[#e2e5ee] focus:border-[#2f5fe0] focus:ring-[#2f5fe0]/15'"
+            placeholder="Nguyễn Văn A" @blur="touch('name')">
+          <p v-if="touched.name && errors.name" class="mt-1 text-[12px] text-red-500">{{ errors.name }}</p>
+        </div>
+        <div>
+          <label class="mb-[10px] block text-[13px] font-semibold text-gray-700" for="phone">Số điện thoại</label>
+          <input id="phone" v-model="form.phone" type="tel"
+            class="w-full rounded-[10px] border px-[14px] py-[11px] text-sm text-slate-900 placeholder:text-gray-400 focus:outline-none focus:ring-[3px]"
+            :class="touched.phone && errors.phone ? 'border-red-400 focus:border-red-400 focus:ring-red-400/15' : 'border-[#e2e5ee] focus:border-[#2f5fe0] focus:ring-[#2f5fe0]/15'"
+            placeholder="0912 345 678" @blur="touch('phone')">
+          <p v-if="touched.phone && errors.phone" class="mt-1 text-[12px] text-red-500">{{ errors.phone }}</p>
+        </div>
+      </div>
+
+      <!-- Email -->
+      <div class="mb-5">
+        <label class="mb-[10px] block text-[13px] font-semibold text-gray-700" for="email">Email</label>
+        <input id="email" v-model="form.email" type="email"
+          class="w-full rounded-[10px] border px-[14px] py-[11px] text-sm text-slate-900 placeholder:text-gray-400 focus:outline-none focus:ring-[3px]"
+          :class="touched.email && errors.email ? 'border-red-400 focus:border-red-400 focus:ring-red-400/15' : 'border-[#e2e5ee] focus:border-[#2f5fe0] focus:ring-[#2f5fe0]/15'"
+          placeholder="example@congty.vn" @blur="touch('email')">
+        <p v-if="touched.email && errors.email" class="mt-1 text-[12px] text-red-500">{{ errors.email }}</p>
+      </div>
+
+      <!-- Study mode -->
+      <div class="mb-5">
+        <label class="mb-[10px] block text-[13px] font-semibold text-gray-700">Hình thức học</label>
+        <div class="flex flex-wrap gap-[10px]">
+          <button type="button" class="rounded-[10px] border px-4 py-[9px] text-[13.5px] font-medium transition-colors"
+            :class="studyMode === 'online' ? 'border-[#2f5fe0] bg-[#2f5fe0] text-white' : 'border-[#e2e5ee] bg-white text-gray-700'"
+            @click="studyMode = 'online'">
+            Học trực tuyến (Online)
+          </button>
+          <button type="button" class="rounded-[10px] border px-4 py-[9px] text-[13.5px] font-medium transition-colors"
+            :class="studyMode === 'offline' ? 'border-[#2f5fe0] bg-[#2f5fe0] text-white' : 'border-[#e2e5ee] bg-white text-gray-700'"
+            @click="studyMode = 'offline'">
+            Học tại lớp (Offline)
+          </button>
+          <button type="button" class="rounded-[10px] border px-4 py-[9px] text-[13.5px] font-medium transition-colors"
+            :class="studyMode === 'enterprise' ? 'border-[#2f5fe0] bg-[#2f5fe0] text-white' : 'border-[#e2e5ee] bg-white text-gray-700'"
+            @click="studyMode = 'enterprise'">
+            Đào tạo doanh nghiệp
+          </button>
+        </div>
+      </div>
+
+      <!-- Notes -->
+      <div class="mb-5">
+        <label class="mb-[10px] block text-[13px] font-semibold text-gray-700" for="note">Ghi chú (tùy chọn)</label>
+        <textarea id="note" v-model="form.note" rows="3"
+          class="w-full min-h-[84px] resize-y rounded-[10px] border border-[#e2e5ee] bg-[#fafafb] px-[14px] py-[11px] text-sm text-slate-900 placeholder:text-gray-400 focus:border-[#2f5fe0] focus:outline-none focus:ring-[3px] focus:ring-[#2f5fe0]/15"
+          placeholder="Kinh nghiệm hiện tại, mục tiêu học tập..." />
+      </div>
+
+      <!-- Submit -->
+      <button type="submit" :disabled="submitting"
+        class="flex w-full items-center justify-center gap-2 rounded-[10px] bg-[#2f5fe0] px-5 py-[13px] text-[14.5px] font-semibold text-white transition-colors hover:bg-[#274ec2] disabled:opacity-60">
+        <span v-if="submitting">Đang gửi...</span>
+        <template v-else>
+          Gửi đăng ký
+          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <line x1="22" y1="2" x2="11" y2="13" />
+            <polygon points="22 2 15 22 11 13 2 9 22 2" />
+          </svg>
+        </template>
+      </button>
+    </form>
+
+    <!-- Success message -->
+    <div v-if="submitSuccess"
+      class="mb-5 mt-5 rounded-[10px] border border-green-200 bg-green-50 p-4 text-sm text-green-700">
+      Đăng ký thành công! Chúng tôi sẽ liên hệ với bạn trong thời gian sớm nhất.
+    </div>
+  </section>
+</template>