Gia nh\u1eadp \u0111\u1ed9i ng\u0169 Heart Academy<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,typography\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\" \/>\r\n <script>\r\n tailwind.config = {\r\n darkMode: \"class\",\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: \"#3B4DA8\",\r\n secondary: \"#E94B68\",\r\n \"background-light\": \"#F9FAFB\",\r\n \"background-dark\": \"#111827\",\r\n \"surface-light\": \"#FFFFFF\",\r\n \"surface-dark\": \"#1F2937\",\r\n \"text-light\": \"#1F2937\",\r\n \"text-dark\": \"#F3F4F6\",\r\n \"muted-light\": \"#6B7280\",\r\n \"muted-dark\": \"#9CA3AF\",\r\n },\r\n fontFamily: {\r\n display: [\"Montserrat\", \"sans-serif\"],\r\n body: [\"Montserrat\", \"sans-serif\"],\r\n },\r\n },\r\n },\r\n };\r\n <\/script>\r\n <style>\r\n input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], textarea, select {\r\n background-color: #ffffff !important; color: #1F2937 !important; border-color: #d1d5db !important;\r\n }\r\n input::placeholder, textarea::placeholder { color: #9CA3AF !important; opacity: 1 !important; }\r\n input:focus, textarea:focus, select:focus {\r\n background-color: #ffffff !important; border-color: #3B4DA8 !important; color: #1F2937 !important;\r\n outline: none !important; box-shadow: 0 0 0 3px rgba(59, 77, 168, 0.1) !important;\r\n }\r\n .skeleton { background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }\r\n @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }\r\n <\/style>\r\n<\/head>\r\n<body class=\"font-body bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark transition-colors duration-200\">\r\n\r\n \r\n <div class=\"relative bg-surface-light dark:bg-surface-dark overflow-hidden\" id=\"hero-section\">\r\n <div class=\"max-w-7xl mx-auto\">\r\n <div class=\"relative z-10 pb-8 bg-surface-light dark:bg-surface-dark sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32\">\r\n <main class=\"mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28\">\r\n <div class=\"sm:text-center lg:text-left\">\r\n <h1 class=\"text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white sm:text-5xl md:text-6xl\">\r\n <span class=\"block xl:inline\" id=\"hero-title-1\">Ki\u1ebfn t\u1ea1o t\u01b0\u01a1ng lai c\u00f9ng<\/span>\r\n <span class=\"block text-primary dark:text-blue-400\" id=\"hero-title-2\">Heart Academy<\/span>\r\n <\/h1>\r\n <p class=\"mt-3 text-base text-muted-light dark:text-muted-dark sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0\" id=\"hero-desc\">\r\n Gia nh\u1eadp \u0111\u1ed9i ng\u0169 nh\u1eefng chuy\u00ean gia \u0111am m\u00ea, n\u01a1i b\u1ea1n \u0111\u01b0\u1ee3c th\u1eed th\u00e1ch, ph\u00e1t tri\u1ec3n v\u00e0 \u0111\u1ecbnh h\u00ecnh t\u01b0\u01a1ng lai c\u1ee7a ng\u00e0nh marketing b\u1ea5t \u0111\u1ed9ng s\u1ea3n.\r\n <\/p>\r\n <div class=\"mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start\">\r\n <div class=\"rounded-md shadow\">\r\n <a class=\"w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:opacity-90 md:py-4 md:text-lg md:px-10 transition\" href=\"#positions\">Xem v\u1ecb tr\u00ed m\u1edf<\/a>\r\n <\/div>\r\n <div class=\"mt-3 sm:mt-0 sm:ml-3\">\r\n <a class=\"w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-blue-100 hover:bg-blue-200 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700 md:py-4 md:text-lg md:px-10 transition focus:outline-none\" href=\"#culture\">V\u0103n h\u00f3a c\u00f4ng ty<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lg:absolute lg:inset-y-0 lg:right-0 lg:w-1\/2\">\r\n <img decoding=\"async\" id=\"hero-image\" alt=\"Team meeting at Heart Academy\" class=\"h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full\" src=\"https:\/\/heartacademy.edu.vn\/wp-content\/uploads\/2026\/02\/Picture16.png\" \/>\r\n <div class=\"absolute inset-0 bg-primary opacity-10 dark:opacity-40 lg:hidden\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section class=\"py-16 bg-background-light dark:bg-background-dark\" id=\"culture\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center\">\r\n <h2 class=\"text-base text-secondary font-semibold tracking-wide uppercase\">L\u1ee3i \u00edch<\/h2>\r\n <p class=\"mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl\" id=\"benefits-title\">\r\n T\u1ea1i sao ch\u1ecdn Heart Academy?\r\n <\/p>\r\n <p class=\"mt-4 max-w-2xl text-xl text-muted-light dark:text-muted-dark mx-auto\" id=\"benefits-subtitle\">\r\n Ch\u00fang t\u00f4i kh\u00f4ng ch\u1ec9 x\u00e2y d\u1ef1ng s\u1ef1 nghi\u1ec7p, ch\u00fang t\u00f4i x\u00e2y d\u1ef1ng con ng\u01b0\u1eddi.\r\n <\/p>\r\n <\/div>\r\n <div class=\"mt-12 grid gap-8 grid-cols-1 md:grid-cols-3\" id=\"benefits-grid\">\r\n \r\n <div class=\"bg-surface-light dark:bg-surface-dark rounded-xl shadow-lg p-8 text-center skeleton h-64\"><\/div>\r\n <div class=\"bg-surface-light dark:bg-surface-dark rounded-xl shadow-lg p-8 text-center skeleton h-64\"><\/div>\r\n <div class=\"bg-surface-light dark:bg-surface-dark rounded-xl shadow-lg p-8 text-center skeleton h-64\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-12 bg-white dark:bg-gray-800\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <h2 class=\"text-3xl font-extrabold text-gray-900 dark:text-white mb-8 text-center\" id=\"gallery-title\">Kho\u1ea3nh kh\u1eafc Heart Academy<\/h2>\r\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\" id=\"gallery-grid\">\r\n \r\n <div class=\"col-span-2 row-span-2 skeleton rounded-lg h-96\"><\/div>\r\n <div class=\"skeleton rounded-lg h-48\"><\/div>\r\n <div class=\"skeleton rounded-lg h-48\"><\/div>\r\n <div class=\"skeleton rounded-lg h-48\"><\/div>\r\n <div class=\"skeleton rounded-lg h-48\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-16 bg-surface-light dark:bg-surface-dark border-y border-gray-100 dark:border-gray-700\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-12\">\r\n <h2 class=\"text-3xl font-extrabold text-gray-900 dark:text-white\">Quy tr\u00ecnh tuy\u1ec3n d\u1ee5ng<\/h2>\r\n <\/div>\r\n <div class=\"relative\">\r\n <div class=\"hidden md:block absolute top-1\/2 left-0 w-full h-1 bg-gray-200 dark:bg-gray-700 transform -translate-y-1\/2 z-0\"><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10\" id=\"process-grid\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-16 bg-background-light dark:bg-background-dark\" id=\"positions\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"sm:flex sm:items-center sm:justify-between mb-10\">\r\n <div>\r\n <h2 class=\"text-3xl font-extrabold text-gray-900 dark:text-white\">V\u1ecb tr\u00ed \u0111ang tuy\u1ec3n<\/h2>\r\n <p class=\"mt-2 text-muted-light dark:text-muted-dark\">T\u00ecm ki\u1ebfm c\u01a1 h\u1ed9i ph\u00f9 h\u1ee3p v\u1edbi b\u1ea1n.<\/p>\r\n <\/div>\r\n <div class=\"mt-4 sm:mt-0\">\r\n <div class=\"relative rounded-md shadow-sm\">\r\n <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\r\n <span class=\"material-icons text-gray-400\">search<\/span>\r\n <\/div>\r\n <input id=\"job-search\" class=\"focus:ring-primary focus:border-primary block w-full pl-10 sm:text-sm border-gray-300 rounded-md py-2\" placeholder=\"T\u00ecm ki\u1ebfm v\u1ecb tr\u00ed...\" type=\"text\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-surface-light dark:bg-surface-dark shadow overflow-hidden sm:rounded-md\">\r\n <ul class=\"divide-y divide-gray-200 dark:divide-gray-700\" id=\"jobs-list\">\r\n \r\n <li class=\"px-4 py-6\"><div class=\"skeleton h-16 rounded\"><\/div><\/li>\r\n <li class=\"px-4 py-6\"><div class=\"skeleton h-16 rounded\"><\/div><\/li>\r\n <li class=\"px-4 py-6\"><div class=\"skeleton h-16 rounded\"><\/div><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"mt-8 text-center\">\r\n <p class=\"text-muted-light dark:text-muted-dark mb-4\" id=\"cta-text\">Kh\u00f4ng t\u00ecm th\u1ea5y v\u1ecb tr\u00ed ph\u00f9 h\u1ee3p? H\u00e3y g\u1eedi CV c\u1ee7a b\u1ea1n v\u00e0o ng\u00e2n h\u00e0ng nh\u00e2n s\u1ef1.<\/p>\r\n <button class=\"bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 px-6 py-2 rounded-md font-medium hover:bg-gray-50 dark:hover:bg-gray-600 transition\">\r\n G\u1eedi CV ngay\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <script>\r\n const API = 'https:\/\/heartacademy.edu.vn\/wp-json\/wp\/v2';\r\n\r\n \/\/ \u2500\u2500 Color mappings \u2500\u2500\r\n const COLOR_MAP = {\r\n blue: { bg: 'bg-blue-100 dark:bg-blue-900', text: 'text-primary dark:text-blue-300' },\r\n red: { bg: 'bg-red-100 dark:bg-red-900', text: 'text-secondary dark:text-red-300' },\r\n green: { bg: 'bg-green-100 dark:bg-green-900', text: 'text-green-600 dark:text-green-300' },\r\n purple: { bg: 'bg-purple-100 dark:bg-purple-900', text: 'text-purple-600 dark:text-purple-300' },\r\n };\r\n\r\n const JOB_TYPE_STYLE = {\r\n 'full-time': { bg: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200', label: 'Full-time' },\r\n 'part-time': { bg: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200', label: 'Part-time' },\r\n 'remote': { bg: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200', label: 'Remote' },\r\n 'internship': { bg: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200', label: 'Internship' },\r\n };\r\n\r\n \/\/ \u2500\u2500 Helper: decode HTML entities \u2500\u2500\r\n function decodeHTML(html) {\r\n const txt = document.createElement('textarea');\r\n txt.innerHTML = html;\r\n return txt.value;\r\n }\r\n\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ 1. FETCH CAREER PAGE (page-level ACF content)\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n async function loadCareerPage() {\r\n try {\r\n const res = await fetch(`${API}\/pages?slug=career-page&_fields=id,acf`);\r\n const pages = await res.json();\r\n if (!pages.length || !pages[0].acf) return;\r\n const acf = pages[0].acf;\r\n\r\n \/\/ Hero\r\n if (acf.hero_title_1) document.getElementById('hero-title-1').textContent = acf.hero_title_1;\r\n if (acf.hero_title_2) document.getElementById('hero-title-2').textContent = acf.hero_title_2;\r\n if (acf.hero_description) document.getElementById('hero-desc').textContent = acf.hero_description;\r\n if (acf.hero_image) document.getElementById('hero-image').src = acf.hero_image;\r\n\r\n \/\/ Benefits\r\n if (acf.benefits_title) document.getElementById('benefits-title').textContent = acf.benefits_title;\r\n if (acf.benefits_subtitle) document.getElementById('benefits-subtitle').textContent = acf.benefits_subtitle;\r\n\r\n if (acf.benefits && acf.benefits.length) {\r\n const grid = document.getElementById('benefits-grid');\r\n grid.innerHTML = acf.benefits.map(b => {\r\n const c = COLOR_MAP[b.color_class] || COLOR_MAP.blue;\r\n return `\r\n <div class=\"bg-surface-light dark:bg-surface-dark rounded-xl shadow-lg p-8 text-center hover:shadow-xl transition transform hover:-translate-y-1\">\r\n <div class=\"flex items-center justify-center h-16 w-16 rounded-full ${c.bg} ${c.text} mx-auto mb-6\">\r\n <span class=\"material-icons text-3xl\">${b.icon || 'star'}<\/span>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold text-gray-900 dark:text-white mb-3\">${b.title}<\/h3>\r\n <p class=\"text-muted-light dark:text-muted-dark\">${b.description}<\/p>\r\n <\/div>`;\r\n }).join('');\r\n }\r\n\r\n \/\/ Gallery\r\n if (acf.gallery_title) document.getElementById('gallery-title').textContent = acf.gallery_title;\r\n\r\n if (acf.gallery_images && acf.gallery_images.length) {\r\n const grid = document.getElementById('gallery-grid');\r\n grid.innerHTML = acf.gallery_images.map((img, i) => {\r\n const isLarge = img.size === 'large';\r\n const sizeClass = isLarge ? 'col-span-2 row-span-2' : '';\r\n const heightClass = isLarge ? 'h-full' : 'h-48';\r\n return `\r\n <div class=\"${sizeClass} relative overflow-hidden rounded-lg group\">\r\n <img decoding=\"async\" alt=\"${img.caption || ''}\" class=\"w-full ${heightClass} object-cover transform group-hover:scale-110 transition duration-500\" src=\"${img.image_url}\" \/>\r\n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/60 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-4\">\r\n <span class=\"text-white font-medium\">${img.caption || ''}<\/span>\r\n <\/div>\r\n <\/div>`;\r\n }).join('');\r\n }\r\n\r\n \/\/ Process Steps\r\n if (acf.process_steps && acf.process_steps.length) {\r\n const grid = document.getElementById('process-grid');\r\n grid.innerHTML = acf.process_steps.map(step => {\r\n const isIcon = isNaN(step.step_number);\r\n const borderColor = step.border_color || 'primary';\r\n const inner = isIcon\r\n ? `<span class=\"material-icons\">${step.step_number}<\/span>`\r\n : step.step_number;\r\n const fillClass = (step.step_number === 'check')\r\n ? `bg-primary text-white border-${borderColor}`\r\n : `bg-white dark:bg-gray-800 text-${borderColor === 'primary' ? 'primary' : borderColor} border-${borderColor}`;\r\n return `\r\n <div class=\"flex flex-col items-center text-center group\">\r\n <div class=\"w-16 h-16 ${fillClass} border-4 rounded-full flex items-center justify-center font-bold text-xl mb-4 group-hover:scale-110 transition duration-300 shadow-md\">\r\n ${inner}\r\n <\/div>\r\n <h3 class=\"text-lg font-bold text-gray-900 dark:text-white mb-2\">${step.title}<\/h3>\r\n <p class=\"text-sm text-muted-light dark:text-muted-dark px-4\">${step.description}<\/p>\r\n <\/div>`;\r\n }).join('');\r\n }\r\n\r\n \/\/ CTA\r\n if (acf.cta_text) document.getElementById('cta-text').textContent = acf.cta_text;\r\n\r\n } catch (err) {\r\n console.warn('Career page ACF load failed, using defaults:', err);\r\n }\r\n }\r\n\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ 2. FETCH JOBS (from the \"job\" post type)\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n let allJobs = [];\r\n\r\n async function loadJobs() {\r\n try {\r\n const res = await fetch(`${API}\/job?per_page=50&status=publish&_fields=id,title,content,link,acf`);\r\n allJobs = await res.json();\r\n renderJobs(allJobs);\r\n } catch (err) {\r\n console.error('Failed to load jobs:', err);\r\n document.getElementById('jobs-list').innerHTML =\r\n '<li class=\"px-6 py-8 text-center text-muted-light dark:text-muted-dark\">Kh\u00f4ng th\u1ec3 t\u1ea3i danh s\u00e1ch v\u1ecb tr\u00ed. Vui l\u00f2ng th\u1eed l\u1ea1i sau.<\/li>';\r\n }\r\n }\r\n\r\n function renderJobs(jobs) {\r\n const list = document.getElementById('jobs-list');\r\n\r\n if (!jobs.length) {\r\n list.innerHTML = '<li class=\"px-6 py-8 text-center text-muted-light dark:text-muted-dark\">Hi\u1ec7n t\u1ea1i ch\u01b0a c\u00f3 v\u1ecb tr\u00ed n\u00e0o \u0111ang m\u1edf. H\u00e3y quay l\u1ea1i sau nh\u00e9!<\/li>';\r\n return;\r\n }\r\n\r\n list.innerHTML = jobs.map(job => {\r\n const title = decodeHTML(job.title?.rendered || job.title || '');\r\n const acf = job.acf || {};\r\n const dept = acf.department || '';\r\n const loc = acf.location || '';\r\n const jobType = acf.job_type || 'full-time';\r\n const salary = acf.salary_range || '';\r\n const link = acf.apply_link || job.link || '#';\r\n const style = JOB_TYPE_STYLE[jobType] || JOB_TYPE_STYLE['full-time'];\r\n\r\n return `\r\n <li>\r\n <a class=\"block hover:bg-gray-50 dark:hover:bg-gray-800 transition duration-150 ease-in-out\" href=\"${link}\">\r\n <div class=\"px-4 py-4 sm:px-6\">\r\n <div class=\"flex items-center justify-between\">\r\n <p class=\"text-lg font-semibold text-primary dark:text-blue-400 truncate\">${title}<\/p>\r\n <div class=\"ml-2 flex-shrink-0 flex gap-2\">\r\n <p class=\"px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${style.bg}\">${style.label}<\/p>\r\n ${salary ? `<p class=\"px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300\">${salary}<\/p>` : ''}\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-2 sm:flex sm:justify-between\">\r\n <div class=\"sm:flex\">\r\n ${dept ? `<p class=\"flex items-center text-sm text-muted-light dark:text-muted-dark mr-6\">\r\n <span class=\"material-icons text-gray-400 text-sm mr-1\">business_center<\/span>${dept}<\/p>` : ''}\r\n ${loc ? `<p class=\"mt-2 flex items-center text-sm text-muted-light dark:text-muted-dark sm:mt-0\">\r\n <span class=\"material-icons text-gray-400 text-sm mr-1\">location_on<\/span>${loc}<\/p>` : ''}\r\n <\/div>\r\n <div class=\"mt-2 flex items-center text-sm sm:mt-0\">\r\n <p class=\"text-secondary dark:text-red-400 font-medium flex items-center\">\r\n Xem chi ti\u1ebft <span class=\"material-icons text-sm ml-1\">arrow_forward<\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>`;\r\n }).join('');\r\n }\r\n\r\n \/\/ \u2500\u2500 Search \/ Filter \u2500\u2500\r\n document.getElementById('job-search').addEventListener('input', function () {\r\n const q = this.value.toLowerCase().trim();\r\n if (!q) { renderJobs(allJobs); return; }\r\n const filtered = allJobs.filter(job => {\r\n const title = (job.title?.rendered || '').toLowerCase();\r\n const dept = (job.acf?.department || '').toLowerCase();\r\n const loc = (job.acf?.location || '').toLowerCase();\r\n return title.includes(q) || dept.includes(q) || loc.includes(q);\r\n });\r\n renderJobs(filtered);\r\n });\r\n\r\n \/\/ \u2500\u2500 Init \u2500\u2500\r\n document.addEventListener('DOMContentLoaded', () => {\r\n loadCareerPage();\r\n loadJobs();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gia nh\u1eadp \u0111\u1ed9i ng\u0169 Heart Academy Ki\u1ebfn t\u1ea1o t\u01b0\u01a1ng lai c\u00f9ng Heart Academy Gia nh\u1eadp \u0111\u1ed9i ng\u0169 nh\u1eefng chuy\u00ean gia \u0111am m\u00ea, n\u01a1i b\u1ea1n \u0111\u01b0\u1ee3c th\u1eed th\u00e1ch, ph\u00e1t tri\u1ec3n v\u00e0 \u0111\u1ecbnh h\u00ecnh t\u01b0\u01a1ng lai c\u1ee7a ng\u00e0nh marketing b\u1ea5t \u0111\u1ed9ng s\u1ea3n. Xem v\u1ecb tr\u00ed m\u1edf V\u0103n h\u00f3a c\u00f4ng ty L\u1ee3i \u00edch T\u1ea1i sao ch\u1ecdn Heart Academy? […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-401","page","type-page","status-publish","hentry"],"acf":{"hero_image":"https:\/\/heartacademy.edu.vn\/wp-content\/uploads\/2026\/02\/Picture16.png","hero_title_1":"Ki\u1ebfn t\u1ea1o t\u01b0\u01a1ng lai c\u00f9ng","hero_title_2":"Heart Academy","hero_description":"Gia nh\u1eadp \u0111\u1ed9i ng\u0169 nh\u1eefng chuy\u00ean gia \u0111am m\u00ea, n\u01a1i b\u1ea1n \u0111\u01b0\u1ee3c th\u1eed th\u00e1ch, ph\u00e1t tri\u1ec3n v\u00e0 \u0111\u1ecbnh h\u00ecnh t\u01b0\u01a1ng lai c\u1ee7a ng\u00e0nh marketing b\u1ea5t \u0111\u1ed9ng s\u1ea3n.","benefits_title":"T\u1ea1i sao ch\u1ecdn Heart Academy?","benefits_subtitle":"Ch\u00fang t\u00f4i kh\u00f4ng ch\u1ec9 x\u00e2y d\u1ef1ng s\u1ef1 nghi\u1ec7p, ch\u00fang t\u00f4i x\u00e2y d\u1ef1ng con ng\u01b0\u1eddi.","gallery_title":"Kho\u1ea3nh kh\u1eafc Heart Academy","cta_text":"Kh\u00f4ng t\u00ecm th\u1ea5y v\u1ecb tr\u00ed ph\u00f9 h\u1ee3p? H\u00e3y g\u1eedi CV c\u1ee7a b\u1ea1n v\u00e0o ng\u00e2n h\u00e0ng nh\u00e2n s\u1ef1."},"_links":{"self":[{"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/pages\/401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/comments?post=401"}],"version-history":[{"count":29,"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/pages\/401\/revisions"}],"predecessor-version":[{"id":1174,"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/pages\/401\/revisions\/1174"}],"wp:attachment":[{"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/media?parent=401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Gia nh\u1eadp \u0111\u1ed9i ng\u0169 Heart Academy<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,typography\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\" \/>\r\n <script>\r\n tailwind.config = {\r\n darkMode: \"class\",\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: \"#3B4DA8\",\r\n secondary: \"#E94B68\",\r\n \"background-light\": \"#F9FAFB\",\r\n \"background-dark\": \"#111827\",\r\n \"surface-light\": \"#FFFFFF\",\r\n \"surface-dark\": \"#1F2937\",\r\n \"text-light\": \"#1F2937\",\r\n \"text-dark\": \"#F3F4F6\",\r\n \"muted-light\": \"#6B7280\",\r\n \"muted-dark\": \"#9CA3AF\",\r\n },\r\n fontFamily: {\r\n display: [\"Montserrat\", \"sans-serif\"],\r\n body: [\"Montserrat\", \"sans-serif\"],\r\n },\r\n },\r\n },\r\n };\r\n <\/script>\r\n <style>\r\n input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], textarea, select {\r\n background-color: #ffffff !important; color: #1F2937 !important; border-color: #d1d5db !important;\r\n }\r\n input::placeholder, textarea::placeholder { color: #9CA3AF !important; opacity: 1 !important; }\r\n input:focus, textarea:focus, select:focus {\r\n background-color: #ffffff !important; border-color: #3B4DA8 !important; color: #1F2937 !important;\r\n outline: none !important; box-shadow: 0 0 0 3px rgba(59, 77, 168, 0.1) !important;\r\n }\r\n .skeleton { background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }\r\n @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }\r\n <\/style>\r\n<\/head>\r\n<body class=\"font-body bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark transition-colors duration-200\">\r\n\r\n \r\n <div class=\"relative bg-surface-light dark:bg-surface-dark overflow-hidden\" id=\"hero-section\">\r\n <div class=\"max-w-7xl mx-auto\">\r\n <div class=\"relative z-10 pb-8 bg-surface-light dark:bg-surface-dark sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32\">\r\n <main class=\"mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28\">\r\n <div class=\"sm:text-center lg:text-left\">\r\n <h1 class=\"text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white sm:text-5xl md:text-6xl\">\r\n <span class=\"block xl:inline\" id=\"hero-title-1\">Ki\u1ebfn t\u1ea1o t\u01b0\u01a1ng lai c\u00f9ng<\/span>\r\n <span class=\"block text-primary dark:text-blue-400\" id=\"hero-title-2\">Heart Academy<\/span>\r\n <\/h1>\r\n <p class=\"mt-3 text-base text-muted-light dark:text-muted-dark sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0\" id=\"hero-desc\">\r\n Gia nh\u1eadp \u0111\u1ed9i ng\u0169 nh\u1eefng chuy\u00ean gia \u0111am m\u00ea, n\u01a1i b\u1ea1n \u0111\u01b0\u1ee3c th\u1eed th\u00e1ch, ph\u00e1t tri\u1ec3n v\u00e0 \u0111\u1ecbnh h\u00ecnh t\u01b0\u01a1ng lai c\u1ee7a ng\u00e0nh marketing b\u1ea5t \u0111\u1ed9ng s\u1ea3n.\r\n <\/p>\r\n <div class=\"mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start\">\r\n <div class=\"rounded-md shadow\">\r\n <a class=\"w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:opacity-90 md:py-4 md:text-lg md:px-10 transition\" href=\"#positions\">Xem v\u1ecb tr\u00ed m\u1edf<\/a>\r\n <\/div>\r\n <div class=\"mt-3 sm:mt-0 sm:ml-3\">\r\n <a class=\"w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-blue-100 hover:bg-blue-200 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700 md:py-4 md:text-lg md:px-10 transition focus:outline-none\" href=\"#culture\">V\u0103n h\u00f3a c\u00f4ng ty<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lg:absolute lg:inset-y-0 lg:right-0 lg:w-1\/2\">\r\n <img decoding=\"async\" id=\"hero-image\" alt=\"Team meeting at Heart Academy\" class=\"h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full\" src=\"https:\/\/heartacademy.edu.vn\/wp-content\/uploads\/2026\/02\/Picture16.png\" \/>\r\n <div class=\"absolute inset-0 bg-primary opacity-10 dark:opacity-40 lg:hidden\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section class=\"py-16 bg-background-light dark:bg-background-dark\" id=\"culture\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center\">\r\n <h2 class=\"text-base text-secondary font-semibold tracking-wide uppercase\">L\u1ee3i \u00edch<\/h2>\r\n <p class=\"mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl\" id=\"benefits-title\">\r\n T\u1ea1i sao ch\u1ecdn Heart Academy?\r\n <\/p>\r\n <p class=\"mt-4 max-w-2xl text-xl text-muted-light dark:text-muted-dark mx-auto\" id=\"benefits-subtitle\">\r\n Ch\u00fang t\u00f4i kh\u00f4ng ch\u1ec9 x\u00e2y d\u1ef1ng s\u1ef1 nghi\u1ec7p, ch\u00fang t\u00f4i x\u00e2y d\u1ef1ng con ng\u01b0\u1eddi.\r\n <\/p>\r\n <\/div>\r\n <div class=\"mt-12 grid gap-8 grid-cols-1 md:grid-cols-3\" id=\"benefits-grid\">\r\n \r\n <div class=\"bg-surface-light dark:bg-surface-dark rounded-xl shadow-lg p-8 text-center skeleton h-64\"><\/div>\r\n <div class=\"bg-surface-light dark:bg-surface-dark rounded-xl shadow-lg p-8 text-center skeleton h-64\"><\/div>\r\n <div class=\"bg-surface-light dark:bg-surface-dark rounded-xl shadow-lg p-8 text-center skeleton h-64\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-12 bg-white dark:bg-gray-800\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <h2 class=\"text-3xl font-extrabold text-gray-900 dark:text-white mb-8 text-center\" id=\"gallery-title\">Kho\u1ea3nh kh\u1eafc Heart Academy<\/h2>\r\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\" id=\"gallery-grid\">\r\n \r\n <div class=\"col-span-2 row-span-2 skeleton rounded-lg h-96\"><\/div>\r\n <div class=\"skeleton rounded-lg h-48\"><\/div>\r\n <div class=\"skeleton rounded-lg h-48\"><\/div>\r\n <div class=\"skeleton rounded-lg h-48\"><\/div>\r\n <div class=\"skeleton rounded-lg h-48\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-16 bg-surface-light dark:bg-surface-dark border-y border-gray-100 dark:border-gray-700\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-12\">\r\n <h2 class=\"text-3xl font-extrabold text-gray-900 dark:text-white\">Quy tr\u00ecnh tuy\u1ec3n d\u1ee5ng<\/h2>\r\n <\/div>\r\n <div class=\"relative\">\r\n <div class=\"hidden md:block absolute top-1\/2 left-0 w-full h-1 bg-gray-200 dark:bg-gray-700 transform -translate-y-1\/2 z-0\"><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10\" id=\"process-grid\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-16 bg-background-light dark:bg-background-dark\" id=\"positions\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"sm:flex sm:items-center sm:justify-between mb-10\">\r\n <div>\r\n <h2 class=\"text-3xl font-extrabold text-gray-900 dark:text-white\">V\u1ecb tr\u00ed \u0111ang tuy\u1ec3n<\/h2>\r\n <p class=\"mt-2 text-muted-light dark:text-muted-dark\">T\u00ecm ki\u1ebfm c\u01a1 h\u1ed9i ph\u00f9 h\u1ee3p v\u1edbi b\u1ea1n.<\/p>\r\n <\/div>\r\n <div class=\"mt-4 sm:mt-0\">\r\n <div class=\"relative rounded-md shadow-sm\">\r\n <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\r\n <span class=\"material-icons text-gray-400\">search<\/span>\r\n <\/div>\r\n <input id=\"job-search\" class=\"focus:ring-primary focus:border-primary block w-full pl-10 sm:text-sm border-gray-300 rounded-md py-2\" placeholder=\"T\u00ecm ki\u1ebfm v\u1ecb tr\u00ed...\" type=\"text\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-surface-light dark:bg-surface-dark shadow overflow-hidden sm:rounded-md\">\r\n <ul class=\"divide-y divide-gray-200 dark:divide-gray-700\" id=\"jobs-list\">\r\n \r\n <li class=\"px-4 py-6\"><div class=\"skeleton h-16 rounded\"><\/div><\/li>\r\n <li class=\"px-4 py-6\"><div class=\"skeleton h-16 rounded\"><\/div><\/li>\r\n <li class=\"px-4 py-6\"><div class=\"skeleton h-16 rounded\"><\/div><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"mt-8 text-center\">\r\n <p class=\"text-muted-light dark:text-muted-dark mb-4\" id=\"cta-text\">Kh\u00f4ng t\u00ecm th\u1ea5y v\u1ecb tr\u00ed ph\u00f9 h\u1ee3p? H\u00e3y g\u1eedi CV c\u1ee7a b\u1ea1n v\u00e0o ng\u00e2n h\u00e0ng nh\u00e2n s\u1ef1.<\/p>\r\n <button class=\"bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 px-6 py-2 rounded-md font-medium hover:bg-gray-50 dark:hover:bg-gray-600 transition\">\r\n G\u1eedi CV ngay\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <script>\r\n const API = 'https:\/\/heartacademy.edu.vn\/wp-json\/wp\/v2';\r\n\r\n \/\/ \u2500\u2500 Color mappings \u2500\u2500\r\n const COLOR_MAP = {\r\n blue: { bg: 'bg-blue-100 dark:bg-blue-900', text: 'text-primary dark:text-blue-300' },\r\n red: { bg: 'bg-red-100 dark:bg-red-900', text: 'text-secondary dark:text-red-300' },\r\n green: { bg: 'bg-green-100 dark:bg-green-900', text: 'text-green-600 dark:text-green-300' },\r\n purple: { bg: 'bg-purple-100 dark:bg-purple-900', text: 'text-purple-600 dark:text-purple-300' },\r\n };\r\n\r\n const JOB_TYPE_STYLE = {\r\n 'full-time': { bg: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200', label: 'Full-time' },\r\n 'part-time': { bg: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200', label: 'Part-time' },\r\n 'remote': { bg: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200', label: 'Remote' },\r\n 'internship': { bg: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200', label: 'Internship' },\r\n };\r\n\r\n \/\/ \u2500\u2500 Helper: decode HTML entities \u2500\u2500\r\n function decodeHTML(html) {\r\n const txt = document.createElement('textarea');\r\n txt.innerHTML = html;\r\n return txt.value;\r\n }\r\n\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ 1. FETCH CAREER PAGE (page-level ACF content)\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n async function loadCareerPage() {\r\n try {\r\n const res = await fetch(`${API}\/pages?slug=career-page&_fields=id,acf`);\r\n const pages = await res.json();\r\n if (!pages.length || !pages[0].acf) return;\r\n const acf = pages[0].acf;\r\n\r\n \/\/ Hero\r\n if (acf.hero_title_1) document.getElementById('hero-title-1').textContent = acf.hero_title_1;\r\n if (acf.hero_title_2) document.getElementById('hero-title-2').textContent = acf.hero_title_2;\r\n if (acf.hero_description) document.getElementById('hero-desc').textContent = acf.hero_description;\r\n if (acf.hero_image) document.getElementById('hero-image').src = acf.hero_image;\r\n\r\n \/\/ Benefits\r\n if (acf.benefits_title) document.getElementById('benefits-title').textContent = acf.benefits_title;\r\n if (acf.benefits_subtitle) document.getElementById('benefits-subtitle').textContent = acf.benefits_subtitle;\r\n\r\n if (acf.benefits && acf.benefits.length) {\r\n const grid = document.getElementById('benefits-grid');\r\n grid.innerHTML = acf.benefits.map(b => {\r\n const c = COLOR_MAP[b.color_class] || COLOR_MAP.blue;\r\n return `\r\n <div class=\"bg-surface-light dark:bg-surface-dark rounded-xl shadow-lg p-8 text-center hover:shadow-xl transition transform hover:-translate-y-1\">\r\n <div class=\"flex items-center justify-center h-16 w-16 rounded-full ${c.bg} ${c.text} mx-auto mb-6\">\r\n <span class=\"material-icons text-3xl\">${b.icon || 'star'}<\/span>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold text-gray-900 dark:text-white mb-3\">${b.title}<\/h3>\r\n <p class=\"text-muted-light dark:text-muted-dark\">${b.description}<\/p>\r\n <\/div>`;\r\n }).join('');\r\n }\r\n\r\n \/\/ Gallery\r\n if (acf.gallery_title) document.getElementById('gallery-title').textContent = acf.gallery_title;\r\n\r\n if (acf.gallery_images && acf.gallery_images.length) {\r\n const grid = document.getElementById('gallery-grid');\r\n grid.innerHTML = acf.gallery_images.map((img, i) => {\r\n const isLarge = img.size === 'large';\r\n const sizeClass = isLarge ? 'col-span-2 row-span-2' : '';\r\n const heightClass = isLarge ? 'h-full' : 'h-48';\r\n return `\r\n <div class=\"${sizeClass} relative overflow-hidden rounded-lg group\">\r\n <img decoding=\"async\" alt=\"${img.caption || ''}\" class=\"w-full ${heightClass} object-cover transform group-hover:scale-110 transition duration-500\" src=\"${img.image_url}\" \/>\r\n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/60 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-4\">\r\n <span class=\"text-white font-medium\">${img.caption || ''}<\/span>\r\n <\/div>\r\n <\/div>`;\r\n }).join('');\r\n }\r\n\r\n \/\/ Process Steps\r\n if (acf.process_steps && acf.process_steps.length) {\r\n const grid = document.getElementById('process-grid');\r\n grid.innerHTML = acf.process_steps.map(step => {\r\n const isIcon = isNaN(step.step_number);\r\n const borderColor = step.border_color || 'primary';\r\n const inner = isIcon\r\n ? `<span class=\"material-icons\">${step.step_number}<\/span>`\r\n : step.step_number;\r\n const fillClass = (step.step_number === 'check')\r\n ? `bg-primary text-white border-${borderColor}`\r\n : `bg-white dark:bg-gray-800 text-${borderColor === 'primary' ? 'primary' : borderColor} border-${borderColor}`;\r\n return `\r\n <div class=\"flex flex-col items-center text-center group\">\r\n <div class=\"w-16 h-16 ${fillClass} border-4 rounded-full flex items-center justify-center font-bold text-xl mb-4 group-hover:scale-110 transition duration-300 shadow-md\">\r\n ${inner}\r\n <\/div>\r\n <h3 class=\"text-lg font-bold text-gray-900 dark:text-white mb-2\">${step.title}<\/h3>\r\n <p class=\"text-sm text-muted-light dark:text-muted-dark px-4\">${step.description}<\/p>\r\n <\/div>`;\r\n }).join('');\r\n }\r\n\r\n \/\/ CTA\r\n if (acf.cta_text) document.getElementById('cta-text').textContent = acf.cta_text;\r\n\r\n } catch (err) {\r\n console.warn('Career page ACF load failed, using defaults:', err);\r\n }\r\n }\r\n\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ 2. FETCH JOBS (from the \"job\" post type)\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n let allJobs = [];\r\n\r\n async function loadJobs() {\r\n try {\r\n const res = await fetch(`${API}\/job?per_page=50&status=publish&_fields=id,title,content,link,acf`);\r\n allJobs = await res.json();\r\n renderJobs(allJobs);\r\n } catch (err) {\r\n console.error('Failed to load jobs:', err);\r\n document.getElementById('jobs-list').innerHTML =\r\n '<li class=\"px-6 py-8 text-center text-muted-light dark:text-muted-dark\">Kh\u00f4ng th\u1ec3 t\u1ea3i danh s\u00e1ch v\u1ecb tr\u00ed. Vui l\u00f2ng th\u1eed l\u1ea1i sau.<\/li>';\r\n }\r\n }\r\n\r\n function renderJobs(jobs) {\r\n const list = document.getElementById('jobs-list');\r\n\r\n if (!jobs.length) {\r\n list.innerHTML = '<li class=\"px-6 py-8 text-center text-muted-light dark:text-muted-dark\">Hi\u1ec7n t\u1ea1i ch\u01b0a c\u00f3 v\u1ecb tr\u00ed n\u00e0o \u0111ang m\u1edf. H\u00e3y quay l\u1ea1i sau nh\u00e9!<\/li>';\r\n return;\r\n }\r\n\r\n list.innerHTML = jobs.map(job => {\r\n const title = decodeHTML(job.title?.rendered || job.title || '');\r\n const acf = job.acf || {};\r\n const dept = acf.department || '';\r\n const loc = acf.location || '';\r\n const jobType = acf.job_type || 'full-time';\r\n const salary = acf.salary_range || '';\r\n const link = acf.apply_link || job.link || '#';\r\n const style = JOB_TYPE_STYLE[jobType] || JOB_TYPE_STYLE['full-time'];\r\n\r\n return `\r\n <li>\r\n <a class=\"block hover:bg-gray-50 dark:hover:bg-gray-800 transition duration-150 ease-in-out\" href=\"${link}\">\r\n <div class=\"px-4 py-4 sm:px-6\">\r\n <div class=\"flex items-center justify-between\">\r\n <p class=\"text-lg font-semibold text-primary dark:text-blue-400 truncate\">${title}<\/p>\r\n <div class=\"ml-2 flex-shrink-0 flex gap-2\">\r\n <p class=\"px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${style.bg}\">${style.label}<\/p>\r\n ${salary ? `<p class=\"px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300\">${salary}<\/p>` : ''}\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-2 sm:flex sm:justify-between\">\r\n <div class=\"sm:flex\">\r\n ${dept ? `<p class=\"flex items-center text-sm text-muted-light dark:text-muted-dark mr-6\">\r\n <span class=\"material-icons text-gray-400 text-sm mr-1\">business_center<\/span>${dept}<\/p>` : ''}\r\n ${loc ? `<p class=\"mt-2 flex items-center text-sm text-muted-light dark:text-muted-dark sm:mt-0\">\r\n <span class=\"material-icons text-gray-400 text-sm mr-1\">location_on<\/span>${loc}<\/p>` : ''}\r\n <\/div>\r\n <div class=\"mt-2 flex items-center text-sm sm:mt-0\">\r\n <p class=\"text-secondary dark:text-red-400 font-medium flex items-center\">\r\n Xem chi ti\u1ebft <span class=\"material-icons text-sm ml-1\">arrow_forward<\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>`;\r\n }).join('');\r\n }\r\n\r\n \/\/ \u2500\u2500 Search \/ Filter \u2500\u2500\r\n document.getElementById('job-search').addEventListener('input', function () {\r\n const q = this.value.toLowerCase().trim();\r\n if (!q) { renderJobs(allJobs); return; }\r\n const filtered = allJobs.filter(job => {\r\n const title = (job.title?.rendered || '').toLowerCase();\r\n const dept = (job.acf?.department || '').toLowerCase();\r\n const loc = (job.acf?.location || '').toLowerCase();\r\n return title.includes(q) || dept.includes(q) || loc.includes(q);\r\n });\r\n renderJobs(filtered);\r\n });\r\n\r\n \/\/ \u2500\u2500 Init \u2500\u2500\r\n document.addEventListener('DOMContentLoaded', () => {\r\n loadCareerPage();\r\n loadJobs();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gia nh\u1eadp \u0111\u1ed9i ng\u0169 Heart Academy Ki\u1ebfn t\u1ea1o t\u01b0\u01a1ng lai c\u00f9ng Heart Academy Gia nh\u1eadp \u0111\u1ed9i ng\u0169 nh\u1eefng chuy\u00ean gia \u0111am m\u00ea, n\u01a1i b\u1ea1n \u0111\u01b0\u1ee3c th\u1eed th\u00e1ch, ph\u00e1t tri\u1ec3n v\u00e0 \u0111\u1ecbnh h\u00ecnh t\u01b0\u01a1ng lai c\u1ee7a ng\u00e0nh marketing b\u1ea5t \u0111\u1ed9ng s\u1ea3n. Xem v\u1ecb tr\u00ed m\u1edf V\u0103n h\u00f3a c\u00f4ng ty L\u1ee3i \u00edch T\u1ea1i sao ch\u1ecdn Heart Academy? […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-401","page","type-page","status-publish","hentry"],"acf":{"hero_image":"https:\/\/heartacademy.edu.vn\/wp-content\/uploads\/2026\/02\/Picture16.png","hero_title_1":"Ki\u1ebfn t\u1ea1o t\u01b0\u01a1ng lai c\u00f9ng","hero_title_2":"Heart Academy","hero_description":"Gia nh\u1eadp \u0111\u1ed9i ng\u0169 nh\u1eefng chuy\u00ean gia \u0111am m\u00ea, n\u01a1i b\u1ea1n \u0111\u01b0\u1ee3c th\u1eed th\u00e1ch, ph\u00e1t tri\u1ec3n v\u00e0 \u0111\u1ecbnh h\u00ecnh t\u01b0\u01a1ng lai c\u1ee7a ng\u00e0nh marketing b\u1ea5t \u0111\u1ed9ng s\u1ea3n.","benefits_title":"T\u1ea1i sao ch\u1ecdn Heart Academy?","benefits_subtitle":"Ch\u00fang t\u00f4i kh\u00f4ng ch\u1ec9 x\u00e2y d\u1ef1ng s\u1ef1 nghi\u1ec7p, ch\u00fang t\u00f4i x\u00e2y d\u1ef1ng con ng\u01b0\u1eddi.","gallery_title":"Kho\u1ea3nh kh\u1eafc Heart Academy","cta_text":"Kh\u00f4ng t\u00ecm th\u1ea5y v\u1ecb tr\u00ed ph\u00f9 h\u1ee3p? H\u00e3y g\u1eedi CV c\u1ee7a b\u1ea1n v\u00e0o ng\u00e2n h\u00e0ng nh\u00e2n s\u1ef1."},"_links":{"self":[{"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/pages\/401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/comments?post=401"}],"version-history":[{"count":29,"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/pages\/401\/revisions"}],"predecessor-version":[{"id":1174,"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/pages\/401\/revisions\/1174"}],"wp:attachment":[{"href":"https:\/\/heartacademy.edu.vn\/index.php\/wp-json\/wp\/v2\/media?parent=401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}