{"id":2143,"date":"2025-10-16T07:46:53","date_gmt":"2025-10-16T07:46:53","guid":{"rendered":"https:\/\/phanthanhtuonghuan.id.vn\/?page_id=2143"},"modified":"2026-07-01T18:06:40","modified_gmt":"2026-07-01T11:06:40","slug":"home","status":"publish","type":"page","link":"https:\/\/uii.ueh.edu.vn\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t<\/div>\t\t
\n\t\t\t\t\t

WELCOME TO UII<\/h1>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t<\/path><\/svg>\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tScroll Down\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\n\n \n \n UEH Institute of Innovation - Homepage Sections<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* =========================================\n 1. GLOBAL THEME (UII SYSTEM)\n ========================================= *\/\n :root {\n --uii-blue: #234B86;\n --uii-blue-dark: #1a3a6c;\n --uii-orange: #EB6825;\n --uii-ink: #0f172a;\n --uii-muted: #64748B;\n --uii-soft: #F8FAFC;\n --uii-border: #E2E8F0;\n --uii-white: #fff;\n --font-sans: 'Inter', sans-serif;\n --radius-xl: 24px;\n --radius-md: 16px;\n --shadow-hover: 0 20px 40px rgba(35, 75, 134, 0.12);\n }\n\n * { box-sizing: border-box; }\n \n body { \n margin: 0; \n padding: 0; \n font-family: var(--font-sans); \n background-color: #fff; \n color: var(--uii-ink); \n line-height: 1.6; \n }\n\n a { text-decoration: none; color: inherit; transition: 0.3s; }\n img { max-width: 100%; display: block; }\n \n .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }\n .section { padding: 80px 0; }\n .text-center { text-align: center; }\n\n \/* =========================================\n STANDARD CTA BUTTON DESIGN\n ========================================= *\/\n .cta-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n background: var(--uii-orange);\n color: white !important;\n font-weight: 700;\n font-size: 1rem;\n padding: 12px 32px;\n border-radius: 99px;\n border: none;\n cursor: pointer;\n text-decoration: none !important;\n border-bottom: none !important;\n box-shadow: none !important;\n transition: all 0.3s ease;\n box-shadow: 0 4px 10px rgba(235, 104, 37, 0.2);\n }\n\n .cta-btn:hover {\n background: #d95d1e;\n transform: translateY(-3px);\n box-shadow: 0 10px 20px rgba(235, 104, 37, 0.3);\n }\n\n .cta-btn svg {\n transition: transform 0.3s ease;\n }\n\n .cta-btn:hover svg {\n transform: translateX(4px);\n }\n\n \/* --- TYPOGRAPHY --- *\/\n .uii-eyebrow-small { \n color: var(--uii-orange); \n font-weight: 700; \n text-transform: uppercase; \n letter-spacing: 0em; \n font-size: 1.125rem; \n display: inline-block; \n margin-bottom: 16px;\n font-family: var(--font-sans);\n }\n \n .uii-section-title { \n font-size: clamp(2rem, 2.5vw, 2.5rem);\n color: var(--uii-blue) !important; \n margin: 0 0 20px; \n line-height: 1.2; \n font-weight: 700;\n letter-spacing: -0.02em;\n }\n \n .uii-section-desc { \n font-size: 1.1rem; \n color: var(--uii-muted); \n max-width: 800px; \n margin: 0 auto 40px; \n }\n\n \/* =========================================\n 2. ABOUT TEASER\n ========================================= *\/\n .about-teaser { background: white; padding: 80px 0; }\n .teaser-card {\n background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-hover);\n padding: 60px; \n text-align: center; \n max-width: 1000px; margin: 0 auto;\n border-top: 4px solid var(--uii-orange);\n }\n .teaser-card .uii-section-desc {\n text-align: justify;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 50px;\n }\n\n \/* =========================================\n 3. PILLARS (CORE ACTIVITIES)\n ========================================= *\/\n .pillars-section { background: var(--uii-soft); }\n .pillars-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;\n }\n .pillar-card {\n background: white; border-radius: var(--radius-md); overflow: hidden;\n border: 1px solid var(--uii-border); transition: 0.3s;\n display: flex; flex-direction: column;\n }\n .pillar-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); border-color: var(--uii-blue); }\n \n .pillar-img { height: 240px; overflow: hidden; position: relative; }\n .pillar-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }\n \n .pillar-body { padding: 30px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }\n .pillar-icon { \n width: 50px; height: 50px; background: rgba(35, 75, 134, 0.1); color: var(--uii-blue);\n border-radius: 12px; display: grid; place-items: center; margin-bottom: 20px;\n }\n .pillar-title { font-size: 1.5rem; font-weight: 800; color: var(--uii-blue); margin: 0 0 12px; }\n .pillar-desc { color: var(--uii-muted); font-size: 1rem; margin-bottom: 30px; }\n\n \/* Responsive *\/\n @media (max-width: 1024px) {\n .pillars-grid { grid-template-columns: 1fr; }\n .teaser-card { padding: 40px 20px; }\n }\n <\/style>\n\n\n\n <section id=\"about\" class=\"about-teaser\">\n <div class=\"container\">\n <div class=\"teaser-card\">\n <span class=\"uii-eyebrow-small\">UEH INSTITUTE OF INNOVATION<\/span>\n <h2 class=\"uii-section-title\">Where Every Idea Has A Story<\/h2>\n <p class=\"uii-section-desc\">\n UEH Institute of Innovation (UII) is a sci-tech organization that plays as a university\u2019s hub for innovation and entrepreneurship. We provide a comprehensive suite of services, from protecting intellectual property to the commercialization of new discoveries through licensing and\/or new enterprise development. UII aims to offer an application-oriented set of strategies and instruments for fostering innovation management of MSMEs, stimulating the innovation culture and strengthening the competitiveness of the startup community.\n <\/p>\n \n <a href=\"\/about_uii\/\" class=\"cta-btn\">\n Learn more about our vision\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"programs\" class=\"pillars-section section\">\n <div class=\"container\">\n <div class=\"text-center\">\n <span class=\"uii-eyebrow-small\">WHAT WE DO<\/span>\n <h2 class=\"uii-section-title\">Our Core Pillars<\/h2>\n <\/div>\n \n <div class=\"pillars-grid\">\n <div class=\"pillar-card\">\n <div class=\"pillar-img\">\n <img decoding=\"async\" src=\"https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/12\/Entreprenourship.jpg\" onerror=\"this.src='https:\/\/images.unsplash.com\/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=1000&q=80'\" alt=\"Education\" title=\"Home\">\n <\/div>\n <div class=\"pillar-body\">\n <div class=\"pillar-icon\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"><\/path><path d=\"M6 12v5c3 3 9 3 12 0v-5\"><\/path><\/svg>\n <\/div>\n <h3 class=\"pillar-title\">Education & Training<\/h3>\n <p class=\"pillar-desc\">Short courses and academic programs designed to equip students with the mindset and skillset for the innovation economy.<\/p>\n \n <a href=\"\/education\/\" class=\"cta-btn\" style=\"margin-top:auto;\">\n Explore\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"pillar-card\">\n <div class=\"pillar-img\">\n <img decoding=\"async\" src=\"https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/12\/shortcourse-.webp\" onerror=\"this.src='https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1000&q=80'\" alt=\"Incubation\" title=\"Home\">\n <\/div>\n <div class=\"pillar-body\">\n <div class=\"pillar-icon\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"><\/path><path d=\"M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"><\/path><\/svg>\n <\/div>\n <h3 class=\"pillar-title\">Startup Incubation<\/h3>\n <p class=\"pillar-desc\">Comprehensive support for early-stage startups: mentorship, funding access, and workspace in the heart of HCMC.<\/p>\n \n <a href=\"\/uii-startup-community\/\" class=\"cta-btn\" style=\"margin-top:auto;\">\n Join Incubator\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"pillar-card\">\n <div class=\"pillar-img\">\n <img decoding=\"async\" src=\"https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/12\/img-1079-1695395901-1566-1695395919.webp\" onerror=\"this.src='https:\/\/images.unsplash.com\/photo-1581093458791-9f3c3900df4b?auto=format&fit=crop&w=1000&q=80'\" alt=\"Research\" title=\"Home\">\n <\/div>\n <div class=\"pillar-body\">\n <div class=\"pillar-icon\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M2 12h20\"><\/path><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"><\/path><\/svg>\n <\/div>\n <h3 class=\"pillar-title\">Research & Projects<\/h3>\n <p class=\"pillar-desc\">Applied research and technology transfer projects that solve real-world problems for businesses and society.<\/p>\n \n <a href=\"\/applied-research-projects\/\" class=\"cta-btn\" style=\"margin-top:auto;\">\n View Projects\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-db1a3c8 e-con-full e-flex e-con e-parent\" data-id=\"db1a3c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1f7d32 elementor-widget elementor-widget-html\" data-id=\"d1f7d32\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"vi\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n <title>NEWS Block<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@500;700;900&display=swap\" rel=\"stylesheet\">\n\n <style>\n .news-hero-simple {\n text-align: center;\n padding: 1rem 1.5rem;\n background-color: #ffffff;\n }\n\n .news-title {\n font-family: 'Inter', sans-serif;\n font-size: clamp(1rem, 2.5vw, 2.5rem);\n font-weight: 700; \/* c\u1ef1c \u0111\u1eadm *\/\n color: #234B86;\n margin-bottom: 1rem;\n letter-spacing: -0.02em;\n }\n\n .news-subtitle {\n font-family: 'Inter', system-ui, sans-serif;\n font-size: clamp(1.125rem, 4vw, 1.375rem);\n color: #EB6825;\n max-width: 720px;\n margin: 0 auto;\n font-weight: 700;\n line-height: 1.5;\n }\n\n @media (max-width: 640px) {\n .news-hero-simple {\n padding: 4rem 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"news-hero-simple\">\n <h1 class=\"news-title\">News<\/h1>\n <p class=\"news-subtitle\">\n The latest information and useful knowledge at UEH-CTD-UII\n <\/p>\n<\/div>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e7a2112 e-con-full e-flex e-con e-parent\" data-id=\"e7a2112\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-62522da elementor-widget elementor-widget-html\" data-id=\"62522da\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>UII Homepage Widget (Auto-Slug C\u1eadp nh\u1eadt)<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;800;900&family=Merriweather:wght@700;900&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* =========================================\r\n UII HOMEPAGE WIDGET STYLES \r\n ========================================= *\/\r\n :root {\r\n --uii-blue: #234B86;\r\n --uii-orange: #EB6825;\r\n --uii-orange-earth: #D95D1E;\r\n --uii-ink: #111827;\r\n --uii-muted: #6B7280;\r\n --uii-soft: #F8FAFC;\r\n --uii-border: #E5E7EB;\r\n \r\n --card-radius: 8px;\r\n --card-bg: #ffffff;\r\n --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\r\n }\r\n\r\n body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #fff; }\r\n \r\n .homepage-section {\r\n max-width: 1280px;\r\n margin: 0px auto;\r\n padding: 0 20px;\r\n }\r\n\r\n \/* --- FOOTER ACTION (BUTTON) --- *\/\r\n .hw-footer-actions {\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 40px;\r\n }\r\n\r\n .hw-view-all-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px; \r\n\r\n background: var(--uii-orange);\r\n color: white !important;\r\n border: none;\r\n border-radius: 99px;\r\n\r\n font-weight: 700;\r\n font-size: 1rem; \r\n text-decoration: none !important;\r\n \r\n padding: 12px 32px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(235, 104, 37, 0.2);\r\n }\r\n\r\n .hw-view-all-btn:hover {\r\n background: #d95d1e;\r\n color: white !important;\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 20px rgba(235, 104, 37, 0.3);\r\n }\r\n\r\n .hw-view-all-btn svg {\r\n transition: transform 0.3s ease;\r\n }\r\n .hw-view-all-btn:hover svg {\r\n transform: translateX(4px);\r\n }\r\n\r\n .hw-layout-stack {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 50px;\r\n }\r\n\r\n \/* --- 1. HERO SECTION --- *\/\r\n .hw-hero {\r\n position: relative;\r\n width: 100%;\r\n height: 800px;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.15);\r\n background: #eee;\r\n display: block;\r\n text-decoration: none !important;\r\n }\r\n\r\n .hw-hero-img {\r\n width: 100%; height: 100%; object-fit: cover;\r\n transition: transform 0.6s ease;\r\n }\r\n .hw-hero:hover .hw-hero-img { transform: scale(1.03); }\r\n\r\n .hw-hero-overlay {\r\n position: absolute; bottom: 0; left: 0; width: 100%;\r\n background: linear-gradient(to top, rgba(35, 75, 134, 0.95) 0%, rgba(35, 75, 134, 0.8) 100%);\r\n padding: 24px 30px;\r\n color: #fff;\r\n display: flex; flex-direction: column; align-items: center; text-align: center;\r\n border-top: 1px solid rgba(255,255,255,0.15);\r\n backdrop-filter: blur(4px);\r\n }\r\n\r\n .hw-hero-label {\r\n font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;\r\n color: var(--uii-orange); margin-bottom: 8px; display: block;\r\n background: rgba(255,255,255,0.1); padding: 4px 12px; border-radius: 99px;\r\n }\r\n\r\n .hw-hero-title {\r\n font-family: 'Inter', sans-serif;\r\n font-size: 1.8rem; font-weight: 800; line-height: 1.3; margin: 0 0 16px 0;\r\n color: #fff; transition: color 0.2s; max-width: 900px;\r\n text-decoration: none !important;\r\n }\r\n .hw-hero:hover .hw-hero-title { color: #fff; text-shadow: 0 0 10px rgba(235, 104, 37, 0.5); }\r\n\r\n .hw-hero-sdgs { display: flex; gap: 8px; justify-content: center; }\r\n \r\n .hw-hero-sdg-link {\r\n display: block; transition: transform 0.2s ease;\r\n text-decoration: none !important;\r\n }\r\n .hw-hero-sdg-link:hover { transform: translateY(-3px) scale(1.1); }\r\n\r\n .hw-hero-sdg-icon {\r\n width: 32px; height: 32px; border-radius: 4px; background: #fff;\r\n object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n }\r\n \r\n \/* --- 2. GRID SECTION --- *\/\r\n .hw-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .hw-card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--uii-border);\r\n border-radius: var(--card-radius);\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n box-shadow: 0 1px 2px rgba(0,0,0,0.05); \r\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n }\r\n\r\n .hw-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n border-color: #d1d5db;\r\n }\r\n\r\n .hw-card-visual {\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 16\/9;\r\n overflow: hidden;\r\n background: var(--uii-soft);\r\n }\r\n\r\n .hw-card-img-link { display: block; width: 100%; height: 100%; }\r\n .hw-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }\r\n .hw-card:hover .hw-card-img { transform: scale(1.05); }\r\n\r\n .hw-card-body {\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n gap: 12px;\r\n }\r\n\r\n .hw-card-sdgs-row {\r\n display: flex;\r\n gap: 6px;\r\n align-items: center;\r\n min-height: 24px;\r\n }\r\n \r\n .hw-sdg-link {\r\n display: block;\r\n transition: transform 0.2s ease;\r\n text-decoration: none !important;\r\n }\r\n .hw-sdg-link:hover { transform: scale(1.15) translateY(-2px); z-index: 10; }\r\n\r\n .hw-sdg-badge {\r\n width: 24px; height: 24px;\r\n border-radius: 4px;\r\n object-fit: cover;\r\n box-shadow: 0 1px 2px rgba(0,0,0,0.1);\r\n display: block;\r\n }\r\n\r\n .hw-card-cat {\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n color: var(--uii-orange);\r\n letter-spacing: 0.05em;\r\n text-decoration: none !important;\r\n transition: color 0.2s;\r\n }\r\n .hw-card-cat:hover { color: var(--uii-blue); text-decoration: underline !important; }\r\n\r\n .hw-card-title {\r\n font-family: 'Inter', sans-serif;\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n color: var(--uii-ink);\r\n line-height: 1.4;\r\n margin: 0;\r\n flex-grow: 1;\r\n }\r\n \r\n .hw-card-title-link {\r\n color: inherit;\r\n text-decoration: none !important;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n transition: color 0.2s;\r\n }\r\n\r\n .hw-card:hover .hw-card-title-link { color: var(--uii-blue); }\r\n\r\n .hw-card-date {\r\n font-size: 0.8rem;\r\n font-weight: 400;\r\n color: var(--uii-muted);\r\n margin-top: auto;\r\n padding-top: 8px;\r\n }\r\n\r\n \/* =========================================\r\n FLUID SKELETON PREVENTS CLS\r\n ========================================= *\/\r\n .skeleton {\r\n background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);\r\n background-size: 200% 100%;\r\n animation: loading 1.5s infinite;\r\n }\r\n @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }\r\n\r\n .skeleton-image {\r\n width: 100%;\r\n aspect-ratio: 16\/9;\r\n border-bottom: 1px solid var(--uii-border);\r\n }\r\n .skeleton-row {\r\n height: 14px;\r\n background-color: #f0f0f0;\r\n border-radius: 4px;\r\n margin-bottom: 10px;\r\n }\r\n .skeleton-row.slug { width: 40%; height: 10px; }\r\n .skeleton-row.title-1 { width: 90%; height: 16px; margin-top: 10px;}\r\n .skeleton-row.title-2 { width: 75%; height: 16px; }\r\n .skeleton-row.date { width: 30%; height: 10px; margin-top: auto; }\r\n\r\n \/* =========================================\r\n RESPONSIVE ADJUSTMENTS (FIXED)\r\n ========================================= *\/\r\n\r\n \/* Tablet (iPad Portrait & Landscape) *\/\r\n @media (min-width: 601px) and (max-width: 1024px) {\r\n .hw-hero { height: 500px !important; }\r\n .hw-hero-overlay { padding: 30px; }\r\n .hw-hero-title { font-size: 1.8rem; max-width: 90%; }\r\n .hw-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }\r\n .hw-card-visual { aspect-ratio: 16\/10; }\r\n }\r\n\r\n \/* Mobile (Phones) - FORCE 1 COLUMN *\/\r\n @media (max-width: 600px) {\r\n .hw-hero { \r\n height: 50vh !important; \r\n min-height: 400px !important; \r\n }\r\n .hw-hero-img {\r\n object-fit: cover !important;\r\n object-position: center top !important;\r\n }\r\n .hw-hero-overlay { \r\n padding: 20px; \r\n align-items: flex-start; \r\n text-align: left;\r\n }\r\n .hw-hero-title {\r\n font-size: 1.4rem; \r\n line-height: 1.3;\r\n margin-bottom: 10px;\r\n }\r\n .hw-hero-label { margin-bottom: 5px; font-size: 0.65rem; }\r\n .hw-grid { \r\n grid-template-columns: 1fr !important;\r\n gap: 30px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"homepage-section\">\r\n <div class=\"hw-layout-stack\">\r\n\r\n <a href=\"#\" id=\"hw-hero-link\" class=\"hw-hero skeleton\">\r\n <img decoding=\"async\" id=\"hw-hero-img\" src=\"\" alt=\"\" class=\"hw-hero-img\" style=\"opacity:0\">\r\n <div class=\"hw-hero-overlay\">\r\n <span class=\"hw-hero-label\">Highlighted news<\/span>\r\n <h3 id=\"hw-hero-title\" class=\"hw-hero-title\">Loading highlights...<\/h3>\r\n <div class=\"hw-hero-sdgs\" id=\"hw-hero-sdgs\"><\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <div class=\"hw-grid\" id=\"hw-grid-container\">\r\n <div class=\"hw-card\">\r\n <div class=\"skeleton-image skeleton\"><\/div>\r\n <div class=\"hw-card-body\">\r\n <div class=\"skeleton-row slug skeleton\"><\/div>\r\n <div class=\"skeleton-row title-1 skeleton\"><\/div>\r\n <div class=\"skeleton-row title-2 skeleton\"><\/div>\r\n <div class=\"skeleton-row date skeleton\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hw-card\">\r\n <div class=\"skeleton-image skeleton\"><\/div>\r\n <div class=\"hw-card-body\">\r\n <div class=\"skeleton-row slug skeleton\"><\/div>\r\n <div class=\"skeleton-row title-1 skeleton\"><\/div>\r\n <div class=\"skeleton-row title-2 skeleton\"><\/div>\r\n <div class=\"skeleton-row date skeleton\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hw-card\">\r\n <div class=\"skeleton-image skeleton\"><\/div>\r\n <div class=\"hw-card-body\">\r\n <div class=\"skeleton-row slug skeleton\"><\/div>\r\n <div class=\"skeleton-row title-1 skeleton\"><\/div>\r\n <div class=\"skeleton-row title-2 skeleton\"><\/div>\r\n <div class=\"skeleton-row date skeleton\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hw-card\">\r\n <div class=\"skeleton-image skeleton\"><\/div>\r\n <div class=\"hw-card-body\">\r\n <div class=\"skeleton-row slug skeleton\"><\/div>\r\n <div class=\"skeleton-row title-1 skeleton\"><\/div>\r\n <div class=\"skeleton-row title-2 skeleton\"><\/div>\r\n <div class=\"skeleton-row date skeleton\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hw-footer-actions\">\r\n <a href=\"\/news-events\" class=\"hw-view-all-btn\">View All News & Events \u2192<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n const HW_BASE_URL = 'https:\/\/uii.ueh.edu.vn';\r\n \r\n const isEN = window.location.pathname.includes('\/en') || document.documentElement.lang.toLowerCase().startsWith('en');\r\n const langParam = isEN ? '&uii_lang=en' : '';\r\n\r\n \/\/ L\u1ea4Y L\u1ea0I M\u1ea2NG SLUG C\u0168: H\u1ec7 th\u1ed1ng t\u1ef1 \u0111\u1ed9ng qu\u00e9t t\u00ecm ID d\u1ef1a tr\u00ean ch\u1eef vi\u1ebft, kh\u00f4ng c\u1ea7n \u0111i\u1ec1n ID s\u1ed1 n\u1eefa!\r\n const CATEGORY_CONFIG = [\r\n { slug: 'life-at-ueh-ctd-uii', label: 'LIFE AT UEH - CTD - UII' },\r\n { slug: 'science-expert-insights', label: 'SCIENCE & EXPERT INSIGHTS' },\r\n { slug: 'ueh-ctd-uii-in-the-news', label: 'UEH - CTD - UII IN THE NEWS' },\r\n { slug: 'admissions-career-guidance', label: 'ADMISSIONS & CAREER GUIDANCE' }\r\n ];\r\n\r\n const SDG_IMAGES_SRC = [\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_01NoPoverty.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_02ZeroHunger.svg.webp',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_03GoodHealth.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_04QualityEducation.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_05GenderEquality.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_06CleanWaterSanitation.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_07CleanEnergy.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_08DecentWork.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_09Industry.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_10ReducedInequalities.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_11SustainableCities.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_12ResponsibleConsumption.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_13Climate.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_14.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_15LifeOnLand.svg.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_16.png',\r\n 'https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/10\/Sustainable_Development_Goal_17Partnerships.svg.png'\r\n ];\r\n\r\n function getPostSDGs(post) {\r\n const formatSDG = (num) => ({\r\n img: SDG_IMAGES_SRC[num - 1],\r\n link: `${HW_BASE_URL}\/sdg\/sdg-${num}\/`,\r\n id: num\r\n });\r\n\r\n const allTerms = post?._embedded?.['wp:term']?.flat() || [];\r\n const sdgTerms = allTerms.filter(t => t?.taxonomy === 'sdg');\r\n \r\n if (sdgTerms.length > 0) {\r\n return sdgTerms.map(t => {\r\n const num = parseInt(t.slug.replace('sdg-', '')) || 1; \r\n return formatSDG(num);\r\n });\r\n }\r\n return []; \r\n }\r\n\r\n async function initHomeWidget() {\r\n try {\r\n const res = await fetch(`${HW_BASE_URL}\/wp-json\/wp\/v2\/posts?_embed&per_page=1${langParam}`);\r\n const heroLink = document.getElementById('hw-hero-link');\r\n const heroImg = document.getElementById('hw-hero-img');\r\n const heroTitle = document.getElementById('hw-hero-title');\r\n\r\n if(res.ok) {\r\n const data = await res.json();\r\n if(data.length > 0) {\r\n const post = data[0];\r\n heroLink.href = post.link;\r\n heroLink.classList.remove('skeleton'); \r\n heroTitle.innerHTML = post.title.rendered;\r\n \r\n if(post?._embedded?.['wp:featuredmedia']?.[0]?.source_url) {\r\n heroImg.src = post._embedded['wp:featuredmedia'][0].source_url;\r\n heroImg.style.opacity = '1';\r\n } else {\r\n heroImg.src = 'https:\/\/via.placeholder.com\/1200x600?text=UII+News';\r\n heroImg.style.opacity = '1';\r\n }\r\n\r\n const sdgs = getPostSDGs(post);\r\n const sdgContainer = document.getElementById('hw-hero-sdgs');\r\n sdgContainer.innerHTML = '';\r\n const heroSDGData = sdgs.length > 0 ? sdgs : [\r\n { img: SDG_IMAGES_SRC[3], link: `${HW_BASE_URL}\/sdg\/sdg-4\/`, id: 4 },\r\n { img: SDG_IMAGES_SRC[8], link: `${HW_BASE_URL}\/sdg\/sdg-9\/`, id: 9 },\r\n { img: SDG_IMAGES_SRC[16], link: `${HW_BASE_URL}\/sdg\/sdg-17\/`, id: 17 }\r\n ];\r\n \r\n heroSDGData.forEach(sdg => {\r\n sdgContainer.innerHTML += `\r\n <a href=\"${sdg.link}\" class=\"hw-hero-sdg-link\" title=\"SDG ${sdg.id}\">\r\n <img decoding=\"async\" src=\"${sdg.img}\" class=\"hw-hero-sdg-icon\" alt=\"SDG ${sdg.id}\">\r\n <\/a>`;\r\n });\r\n } else {\r\n heroLink.classList.remove('skeleton');\r\n heroTitle.innerHTML = isEN ? \"Latest highlights will be updated soon...\" : \"Tin t\u1ee9c n\u1ed5i b\u1eadt s\u1ebd \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt s\u1edbm...\";\r\n heroImg.style.display = 'none';\r\n }\r\n } else {\r\n heroLink.classList.remove('skeleton');\r\n heroTitle.innerHTML = isEN ? \"Latest highlights will be updated soon...\" : \"Tin t\u1ee9c n\u1ed5i b\u1eadt s\u1ebd \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt s\u1edbm...\";\r\n }\r\n } catch(e) { \r\n console.error(\"Hero Load Error\", e); \r\n const hl = document.getElementById('hw-hero-link');\r\n if(hl) hl.classList.remove('skeleton');\r\n }\r\n\r\n \/\/ THU\u1eacT TO\u00c1N \u0110\u1ed2NG TH\u00cc: T\u1ef1 \u0111\u1ed9ng qu\u00e9t ID qua Slug r\u1ed3i b\u1ed1c b\u00e0i vi\u1ebft v\u1ec1 an to\u00e0n\r\n const gridContainer = document.getElementById('hw-grid-container');\r\n const gridPromises = CATEGORY_CONFIG.map(async (config) => {\r\n try {\r\n \/\/ B\u01b0\u1edbc 1: G\u1ecdi API h\u1ecfi ID c\u1ee7a slug t\u01b0\u01a1ng \u1ee9ng\r\n const catRes = await fetch(`${HW_BASE_URL}\/wp-json\/wp\/v2\/categories?slug=${config.slug}`);\r\n if (!catRes.ok) return getCardHTML(null, config, true);\r\n const catData = await catRes.json();\r\n if (!catData?.length) return getCardHTML(null, config, true);\r\n \r\n const catId = catData[0].id;\r\n\r\n \/\/ B\u01b0\u1edbc 2: D\u00f9ng ID t\u00ecm \u0111\u01b0\u1ee3c \u0111\u1ec3 b\u1ed1c b\u00e0i vi\u1ebft m\u1edbi nh\u1ea5t ra ngo\u00e0i\r\n const postRes = await fetch(`${HW_BASE_URL}\/wp-json\/wp\/v2\/posts?_embed&per_page=1&categories=${catId}${langParam}`);\r\n if (!postRes.ok) return getCardHTML(null, config, true);\r\n \r\n const postData = await postRes.json();\r\n if (!postData?.length) return getCardHTML(null, config, true);\r\n \r\n return getCardHTML(postData[0], config);\r\n } catch (e) {\r\n return getCardHTML(null, config, true);\r\n }\r\n });\r\n\r\n const cardsHTML = await Promise.all(gridPromises);\r\n gridContainer.innerHTML = cardsHTML.join('');\r\n }\r\n\r\n function getCardHTML(post, config, isError = false) {\r\n const fallbackTitle = isEN ? \"Explore latest updates...\" : \"Kh\u00e1m ph\u00e1 c\u00e1c c\u1eadp nh\u1eadt m\u1edbi nh\u1ea5t...\";\r\n \r\n if (isError || !post) {\r\n return `\r\n <div class=\"hw-card\">\r\n <div class=\"hw-card-visual\">\r\n <a href=\"${HW_BASE_URL}\/category\/${config.slug}\/\" class=\"hw-card-img-link\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/600x450?text=${encodeURIComponent(config.label)}\" class=\"hw-card-img\">\r\n <\/a>\r\n <\/div>\r\n <div class=\"hw-card-body\">\r\n <a href=\"${HW_BASE_URL}\/category\/${config.slug}\/\" class=\"hw-card-cat\">${config.label}<\/a>\r\n <h3 class=\"hw-card-title\"><a href=\"${HW_BASE_URL}\/category\/${config.slug}\/\" class=\"hw-card-title-link\">${fallbackTitle}<\/a><\/h3>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n const img = post?._embedded?.['wp:featuredmedia']?.[0]?.source_url || 'https:\/\/via.placeholder.com\/600x450?text=UII+News';\r\n const date = new Date(post.date).toLocaleDateString(isEN ? 'en-GB' : 'vi-VN', { day: 'numeric', month: 'short', year: 'numeric' });\r\n \r\n let sdgs = getPostSDGs(post);\r\n if(sdgs.length === 0) {\r\n const formatSDG = (num) => ({ img: SDG_IMAGES_SRC[num - 1], link: `${HW_BASE_URL}\/sdg\/sdg-${num}\/`, id: num });\r\n sdgs = [formatSDG(4), formatSDG(9)];\r\n }\r\n\r\n let sdgHTML = '';\r\n sdgs.slice(0,3).forEach(sdg => {\r\n sdgHTML += `\r\n <a href=\"${sdg.link}\" class=\"hw-sdg-link\" title=\"SDG ${sdg.id}\">\r\n <img decoding=\"async\" src=\"${sdg.img}\" class=\"hw-sdg-badge\" alt=\"SDG ${sdg.id}\">\r\n <\/a>`;\r\n });\r\n\r\n return `\r\n <div class=\"hw-card\">\r\n <div class=\"hw-card-visual\">\r\n <a href=\"${post.link}\" class=\"hw-card-img-link\">\r\n <img decoding=\"async\" src=\"${img}\" alt=\"${post.title.rendered}\" class=\"hw-card-img\">\r\n <\/a>\r\n <\/div>\r\n <div class=\"hw-card-body\">\r\n <div class=\"hw-card-sdgs-row\">\r\n ${sdgHTML}\r\n <\/div>\r\n <a href=\"${HW_BASE_URL}\/category\/${config.slug}\/\" class=\"hw-card-cat\">${config.label}<\/a>\r\n <h3 class=\"hw-card-title\"><a href=\"${post.link}\" class=\"hw-card-title-link\">${post.title.rendered}<\/a><\/h3>\r\n <div class=\"hw-card-date\">${date}<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', initHomeWidget);\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9556ae5 e-con-full e-flex e-con e-parent\" data-id=\"9556ae5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1a4c621 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"1a4c621\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>UEH Institute of Innovation - Impact Section<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* =========================================\r\n UII IMPACT SECTION CONFIGURATION (FIXED)\r\n ========================================= *\/\r\n :root {\r\n --uii-blue: #234B86;\r\n --uii-orange: #EB6825;\r\n --uii-ink: #0f172a;\r\n --uii-muted: #64748B;\r\n --font-sans: 'Inter', sans-serif;\r\n }\r\n\r\n body { \r\n margin: 0 !important; \r\n padding: 0 !important; \r\n overflow-x: hidden; \r\n font-family: var(--font-sans);\r\n }\r\n\r\n .container { \r\n max-width: 1280px; \r\n margin: 0 auto; \r\n padding: 0 20px; \r\n }\r\n\r\n .impact-section {\r\n background: #F8FAFC; \r\n color: var(--uii-blue);\r\n padding: 60px 0; \r\n text-align: center;\r\n \/* FIX: Removed position hacks that threw it off-screen in Elementor *\/\r\n width: 100%; \r\n }\r\n\r\n .section-eyebrow { \r\n color: var(--uii-blue); \r\n font-weight: 800; \r\n text-transform: uppercase; \r\n letter-spacing: 0.05em; \r\n font-size: 2.2rem; \r\n display: block; \r\n \/* FIX: Changed from -50px to safe positive spacing to stop overlapping elements *\/\r\n margin-bottom: 40px; \r\n }\r\n\r\n .impact-grid {\r\n display: grid; \r\n grid-template-columns: repeat(4, 1fr); \r\n gap: 0;\r\n }\r\n\r\n .impact-item { \r\n padding: 40px 20px; \r\n \/* FIX: Tinted divider lines blue so they are visible on the light gray background *\/\r\n border-right: 1px solid rgba(35, 75, 134, 0.12); \r\n }\r\n \r\n .impact-item:last-child { \r\n border-right: none; \r\n }\r\n \r\n .impact-num { \r\n font-size: clamp(2.5rem, 5vw, 4rem); \r\n font-weight: 800; \r\n color: var(--uii-orange); \r\n line-height: 1; \r\n margin-bottom: 15px; \r\n letter-spacing: -0.03em;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .impact-label { \r\n font-size: 0.9rem; \r\n font-weight: 700; \r\n color: var(--uii-muted);\r\n text-transform: uppercase; \r\n letter-spacing: 1px;\r\n }\r\n\r\n \/* Responsive Breakpoints *\/\r\n @media (max-width: 1024px) {\r\n .impact-grid { grid-template-columns: 1fr 1fr; }\r\n .impact-item:nth-child(2n) { border-right: none; }\r\n .impact-item { border-bottom: 1px solid rgba(35, 75, 134, 0.12); }\r\n .impact-item:nth-last-child(-n+2) { border-bottom: none; }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .section-eyebrow { font-size: 1.6rem; margin-bottom: 20px; }\r\n .impact-grid { grid-template-columns: 1fr; }\r\n .impact-item { border-right: none !important; border-bottom: 1px solid rgba(35, 75, 134, 0.12); }\r\n .impact-item:last-child { border-bottom: none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"impact-section\" id=\"counter-section\">\r\n <div class=\"container\">\r\n <span class=\"section-eyebrow\">Our Impact<\/span>\r\n \r\n <div class=\"impact-grid\">\r\n <div class=\"impact-item\">\r\n <div class=\"impact-num\">\r\n <span class=\"counter\" data-target=\"170\">0<\/span><span>+<\/span>\r\n <\/div>\r\n <div class=\"impact-label\">Startups Incubated<\/div>\r\n <\/div>\r\n\r\n <div class=\"impact-item\">\r\n <div class=\"impact-num\">\r\n <span>$<\/span><span class=\"counter\" data-target=\"1.5\">0<\/span><span>M<\/span>\r\n <\/div>\r\n <div class=\"impact-label\">Funds Raised<\/div>\r\n <\/div>\r\n\r\n <div class=\"impact-item\">\r\n <div class=\"impact-num\">\r\n <span class=\"counter\" data-target=\"6000\">0<\/span><span>+<\/span>\r\n <\/div>\r\n <div class=\"impact-label\">Community Members<\/div>\r\n <\/div>\r\n\r\n <div class=\"impact-item\">\r\n <div class=\"impact-num\">\r\n <span class=\"counter\" data-target=\"50\">0<\/span><span>+<\/span>\r\n <\/div>\r\n <div class=\"impact-label\">Corporate Partners<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n function animateCounters() {\r\n const counters = document.querySelectorAll('.counter');\r\n const duration = 1000; \r\n\r\n counters.forEach(counter => {\r\n const target = parseFloat(counter.getAttribute('data-target'));\r\n const isFloat = counter.getAttribute('data-target').includes('.');\r\n const startTime = performance.now();\r\n\r\n function updateCounter(currentTime) {\r\n const elapsedTime = currentTime - startTime;\r\n const progress = Math.min(elapsedTime \/ duration, 1);\r\n \r\n const easeProgress = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);\r\n let currentValue = easeProgress * target;\r\n\r\n if (isFloat) {\r\n counter.innerText = currentValue.toFixed(1);\r\n } else {\r\n counter.innerText = Math.floor(currentValue).toLocaleString();\r\n }\r\n\r\n if (progress < 1) {\r\n requestAnimationFrame(updateCounter);\r\n } else {\r\n counter.innerText = isFloat ? target.toFixed(1) : target.toLocaleString();\r\n }\r\n }\r\n\r\n requestAnimationFrame(updateCounter);\r\n });\r\n }\r\n\r\n const observerOptions = {\r\n root: null,\r\n threshold: 0.3 \r\n };\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n animateCounters();\r\n observer.unobserve(entry.target); \r\n }\r\n });\r\n }, observerOptions);\r\n\r\n const targetSection = document.querySelector('#counter-section');\r\n if (targetSection) observer.observe(targetSection);\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\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>WELCOME TO UII Scroll Down UEH Institute of Innovation – Homepage Sections UEH INSTITUTE OF INNOVATION Where Every Idea Has A Story UEH Institute of Innovation (UII) is a sci-tech organization that plays as a university\u2019s hub for innovation and entrepreneurship. We provide a comprehensive suite of services, from protecting intellectual property to the commercialization […]<\/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-2143","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/uii.ueh.edu.vn\/en\/wp-json\/wp\/v2\/pages\/2143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uii.ueh.edu.vn\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uii.ueh.edu.vn\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uii.ueh.edu.vn\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uii.ueh.edu.vn\/en\/wp-json\/wp\/v2\/comments?post=2143"}],"version-history":[{"count":558,"href":"https:\/\/uii.ueh.edu.vn\/en\/wp-json\/wp\/v2\/pages\/2143\/revisions"}],"predecessor-version":[{"id":10131,"href":"https:\/\/uii.ueh.edu.vn\/en\/wp-json\/wp\/v2\/pages\/2143\/revisions\/10131"}],"wp:attachment":[{"href":"https:\/\/uii.ueh.edu.vn\/en\/wp-json\/wp\/v2\/media?parent=2143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}