TechX - UII Student Club<\/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@300;400;600&family=Space+Grotesk:wght@500;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* --- 1. UII SYSTEM DESIGN --- *\/\r\n :root {\r\n --uii-navy: #254385;\r\n --uii-orange: #f7941d;\r\n --uii-bg: #f8f9fa; \/* N\u1ec1n s\u00e1ng s\u1ea1ch s\u1ebd *\/\r\n --glass-white: rgba(255, 255, 255, 0.7);\r\n --glass-border: rgba(37, 67, 133, 0.1);\r\n --font-head: 'Space Grotesk', sans-serif; \/* Font c\u00f4ng ngh\u1ec7 *\/\r\n --font-body: 'Inter', sans-serif;\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n body {\r\n background-color: var(--uii-bg);\r\n color: var(--uii-navy);\r\n font-family: var(--font-body);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n \/* Background h\u1ecda ti\u1ebft Tech m\u1edd nh\u1ea1t *\/\r\n background-image: \r\n radial-gradient(var(--glass-border) 1px, transparent 1px),\r\n radial-gradient(var(--glass-border) 1px, transparent 1px);\r\n background-size: 40px 40px;\r\n background-position: 0 0, 20px 20px;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n \/* --- 2. HERO SECTION --- *\/\r\n .hero {\r\n min-height: 90vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n text-align: center;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Ch\u1eef X trang tr\u00ed kh\u1ed5ng l\u1ed3 m\u1edd nh\u1ea1t *\/\r\n .bg-x {\r\n position: absolute;\r\n font-family: var(--font-head);\r\n font-size: 80vh;\r\n font-weight: 800;\r\n color: rgba(37, 67, 133, 0.03);\r\n z-index: 0;\r\n line-height: 1;\r\n top: 50%; left: 50%;\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n .hero-badge {\r\n display: inline-block;\r\n padding: 8px 20px;\r\n border: 1px solid var(--uii-orange);\r\n color: var(--uii-orange);\r\n font-family: var(--font-head);\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n border-radius: 50px;\r\n margin-bottom: 25px;\r\n background: rgba(255, 255, 255, 0.8);\r\n letter-spacing: 1px;\r\n }\r\n\r\n .hero-title {\r\n font-family: var(--font-head);\r\n font-size: 5rem;\r\n line-height: 1;\r\n font-weight: 800;\r\n margin-bottom: 20px;\r\n background: linear-gradient(135deg, var(--uii-navy) 30%, var(--uii-orange) 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n position: relative;\r\n }\r\n\r\n .hero-desc {\r\n font-size: 1.2rem;\r\n color: #555;\r\n max-width: 700px;\r\n margin: 0 auto 40px;\r\n }\r\n\r\n .btn-main {\r\n display: inline-block;\r\n padding: 15px 40px;\r\n background: var(--uii-orange);\r\n color: white;\r\n font-weight: 700;\r\n text-decoration: none;\r\n border-radius: 50px;\r\n box-shadow: 0 10px 25px rgba(247, 148, 29, 0.3);\r\n transition: transform 0.3s;\r\n }\r\n .btn-main:hover { transform: translateY(-5px); }\r\n\r\n \/* --- 3. SECTIONS COMMON --- *\/\r\n .section { padding: 80px 0; }\r\n \r\n .sec-header {\r\n text-align: center;\r\n margin-bottom: 60px;\r\n }\r\n .sec-title {\r\n font-family: var(--font-head);\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n color: var(--uii-navy);\r\n position: relative;\r\n display: inline-block;\r\n }\r\n \/* D\u1ea5u g\u1ea1ch cam \u0111\u1eb7c tr\u01b0ng *\/\r\n .sec-title::after {\r\n content: '';\r\n display: block;\r\n width: 60px; height: 4px;\r\n background: var(--uii-orange);\r\n margin: 10px auto 0;\r\n border-radius: 2px;\r\n }\r\n\r\n \/* --- 4. CARDS (GLASS STYLE) --- *\/\r\n .grid-3 {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\r\n gap: 30px;\r\n }\r\n\r\n .card {\r\n background: var(--glass-white);\r\n border: 1px solid var(--glass-border);\r\n padding: 40px;\r\n border-radius: 12px;\r\n backdrop-filter: blur(10px);\r\n transition: 0.3s;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Hi\u1ec7u \u1ee9ng hover \u0111\u1ed3ng b\u1ed9 v\u1edbi trang News *\/\r\n .card:hover {\r\n background: #fff;\r\n transform: translateY(-5px);\r\n border-color: var(--uii-orange);\r\n box-shadow: 0 15px 30px rgba(37, 67, 133, 0.1);\r\n }\r\n\r\n .card-icon {\r\n font-size: 40px;\r\n margin-bottom: 20px;\r\n background: rgba(37, 67, 133, 0.05);\r\n width: 80px; height: 80px;\r\n display: flex; align-items: center; justify-content: center;\r\n border-radius: 50%;\r\n color: var(--uii-navy);\r\n transition: 0.3s;\r\n }\r\n .card:hover .card-icon {\r\n background: var(--uii-orange);\r\n color: white;\r\n }\r\n\r\n .card-title {\r\n font-family: var(--font-head);\r\n font-size: 1.5rem;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n }\r\n\r\n \/* --- 5. DEPARTMENTS (Correct Names) --- *\/\r\n .dept-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 30px;\r\n }\r\n\r\n .dept-card {\r\n display: flex;\r\n align-items: center;\r\n background: #fff;\r\n border: 1px solid #eee;\r\n padding: 30px;\r\n border-radius: 12px;\r\n transition: 0.3s;\r\n }\r\n .dept-card:hover {\r\n border-color: var(--uii-navy);\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.05);\r\n }\r\n\r\n .dept-num {\r\n font-family: var(--font-head);\r\n font-size: 3rem;\r\n font-weight: 800;\r\n color: rgba(37, 67, 133, 0.1); \/* S\u1ed1 m\u1edd l\u00e0m n\u1ec1n *\/\r\n margin-right: 20px;\r\n line-height: 1;\r\n }\r\n\r\n .dept-info h3 {\r\n font-family: var(--font-head);\r\n font-size: 1.3rem;\r\n color: var(--uii-navy);\r\n margin-bottom: 5px;\r\n }\r\n .dept-info p { font-size: 0.9rem; color: #666; margin: 0; }\r\n\r\n \/* --- 6. ACTIVITIES --- *\/\r\n .act-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 20px;\r\n }\r\n .act-item {\r\n height: 300px;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n position: relative;\r\n background: #ddd;\r\n }\r\n .act-img {\r\n width: 100%; height: 100%; object-fit: cover;\r\n transition: transform 0.5s;\r\n }\r\n .act-item:hover .act-img { transform: scale(1.1); }\r\n .act-overlay {\r\n position: absolute; bottom: 0; left: 0; width: 100%;\r\n padding: 20px;\r\n background: linear-gradient(to top, rgba(37,67,133,0.9), transparent);\r\n color: white;\r\n }\r\n .act-title { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; }\r\n\r\n \/* FOOTER *\/\r\n .footer {\r\n background: var(--uii-navy);\r\n color: white;\r\n text-align: center;\r\n padding: 40px 0;\r\n margin-top: 80px;\r\n }\r\n\r\n \/* Mobile *\/\r\n @media (max-width: 768px) {\r\n .hero-title { font-size: 3rem; }\r\n .dept-grid { grid-template-columns: 1fr; }\r\n .bg-x { font-size: 50vh; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"section\">\r\n <div class=\"container\">\r\n <div class=\"sec-header\">\r\n <h2 class=\"sec-title\">Core Values (The \"X\")<\/h2>\r\n <\/div>\r\n <div class=\"grid-3\">\r\n <div class=\"card\">\r\n <div class=\"card-icon\">\ud83d\udd2d<\/div>\r\n <h3 class=\"card-title\">Exploration<\/h3>\r\n <p>Constantly seeking new trends and knowledge to expand our vision.<\/p>\r\n <\/div>\r\n <div class=\"card\">\r\n <div class=\"card-icon\">\ud83e\uddea<\/div>\r\n <h3 class=\"card-title\">Experimentation<\/h3>\r\n <p>Bold thinking. Converting ideas into tangible projects (Project-based).<\/p>\r\n <\/div>\r\n <div class=\"card\">\r\n <div class=\"card-icon\">\ud83d\udd17<\/div>\r\n <h3 class=\"card-title\">Intersection<\/h3>\r\n <p>Connecting Technology, Business, and Innovation to create unique value.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section\" style=\"background: white;\">\r\n <div class=\"container\">\r\n <div class=\"sec-header\">\r\n <h2 class=\"sec-title\">Our Structure<\/h2>\r\n <\/div>\r\n <div class=\"dept-grid\">\r\n <div class=\"dept-card\">\r\n <div class=\"dept-num\">01<\/div>\r\n <div class=\"dept-info\">\r\n <h3>Research<\/h3>\r\n <p>Deep dive into emerging tech trends & core projects.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dept-card\">\r\n <div class=\"dept-num\">02<\/div>\r\n <div class=\"dept-info\">\r\n <h3>Internship & Training Program<\/h3>\r\n <p>Workshops, skill enhancement & internship opportunities.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dept-card\">\r\n <div class=\"dept-num\">03<\/div>\r\n <div class=\"dept-info\">\r\n <h3>Communications & Events<\/h3>\r\n <p>Brand building, media management & organizing events.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dept-card\">\r\n <div class=\"dept-num\">04<\/div>\r\n <div class=\"dept-info\">\r\n <h3>Human Resources<\/h3>\r\n <p>Talent acquisition, culture building & member bonding.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section\">\r\n <div class=\"container\">\r\n <div class=\"sec-header\">\r\n <h2 class=\"sec-title\">Key Activities<\/h2>\r\n <\/div>\r\n <div class=\"act-grid\">\r\n <div class=\"act-item\">\r\n <img decoding=\"async\" src=\"https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/12\/DSC04405-scaled.jpg\" class=\"act-img\" alt=\"Workshops\">\r\n <div class=\"act-overlay\"><div class=\"act-title\">Tech Workshops<\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"act-item\">\r\n <img decoding=\"async\" src=\"https:\/\/uii.ueh.edu.vn\/wp-content\/uploads\/2025\/12\/IMG_6793-scaled.png\" class=\"act-img\" alt=\"Team Building\">\r\n <div class=\"act-overlay\"><div class=\"act-title\">Events<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\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<div class=\"elementor-element elementor-element-153e9f1 e-flex e-con-boxed e-con e-parent\" data-id=\"153e9f1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-058569c elementor-widget elementor-widget-html\" data-id=\"058569c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n \/* --- TECHX CTA SECTION STYLES --- *\/\r\n .techx-section {\r\n background-color: #124275; \/* M\u00e0u xanh \u0111\u1eadm UII *\/\r\n padding: 80px 20px;\r\n text-align: center;\r\n color: #ffffff;\r\n font-family: 'Helvetica', 'Arial', sans-serif;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Trang tr\u00ed n\u1ec1n nh\u1eb9 (Optional) *\/\r\n .techx-section::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\r\n opacity: 0.3;\r\n pointer-events: none;\r\n }\r\n\r\n .techx-container {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .techx-title {\r\n font-size: 36px;\r\n font-weight: 800;\r\n margin-bottom: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .techx-desc {\r\n font-size: 18px;\r\n margin-bottom: 40px;\r\n color: #e0e6ed; \/* M\u00e0u tr\u1eafng x\u00e1m nh\u1eb9 *\/\r\n line-height: 1.6;\r\n }\r\n\r\n \/* N\u00fat b\u1ea5m Explore More *\/\r\n .techx-btn {\r\n display: inline-block;\r\n background-color: #ee6f35; \/* M\u00e0u cam UII *\/\r\n color: #fff !important; \/* Force m\u00e0u tr\u1eafng *\/\r\n font-size: 16px;\r\n font-weight: bold;\r\n padding: 16px 50px;\r\n border-radius: 50px;\r\n border: 2px solid #ee6f35;\r\n \r\n \/* Fix l\u1ed7i g\u1ea1ch ch\u00e2n *\/\r\n text-decoration: none !important;\r\n border-bottom: none !important; \r\n \r\n transition: all 0.3s ease;\r\n text-transform: uppercase;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n }\r\n\r\n \/* Hi\u1ec7u \u1ee9ng hover *\/\r\n .techx-btn:hover {\r\n background-color: transparent;\r\n color: #ee6f35 !important;\r\n border-color: #ee6f35;\r\n transform: translateY(-3px);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .techx-title { font-size: 28px; }\r\n .techx-desc { font-size: 16px; }\r\n }\r\n<\/style>\r\n\r\n<div class=\"techx-section\">\r\n <div class=\"techx-container\">\r\n <h2 class=\"techx-title\">Passionate About Technology and innovation?<\/h2>\r\n \r\n <a href=\"https:\/\/www.facebook.com\/techxclub.uii\" class=\"techx-btn\">Explore TechX Club<\/a>\r\n <\/div>\r\n<\/div>\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>UEH INSTITUTE OF INNOVATION TECHX CLUB TechX – UII Student Club Core Values (The “X”) \ud83d\udd2d Exploration Constantly seeking new trends and knowledge to expand our vision. \ud83e\uddea Experimentation Bold thinking. Converting ideas into tangible projects (Project-based). \ud83d\udd17 Intersection Connecting Technology, Business, and Innovation to create unique value. Our Structure 01 Research Deep dive into […]<\/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-2217","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/uii.ueh.edu.vn\/en\/wp-json\/wp\/v2\/pages\/2217","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=2217"}],"version-history":[{"count":13,"href":"https:\/\/uii.ueh.edu.vn\/en\/wp-json\/wp\/v2\/pages\/2217\/revisions"}],"predecessor-version":[{"id":7296,"href":"https:\/\/uii.ueh.edu.vn\/en\/wp-json\/wp\/v2\/pages\/2217\/revisions\/7296"}],"wp:attachment":[{"href":"https:\/\/uii.ueh.edu.vn\/en\/wp-json\/wp\/v2\/media?parent=2217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}