{"id":2223,"date":"2025-10-16T08:26:02","date_gmt":"2025-10-16T08:26:02","guid":{"rendered":"https:\/\/phanthanhtuonghuan.id.vn\/?page_id=2223"},"modified":"2025-12-22T11:04:50","modified_gmt":"2025-12-22T04:04:50","slug":"news","status":"publish","type":"page","link":"https:\/\/uii.ueh.edu.vn\/vi\/news\/","title":{"rendered":"Tin t\u1ee9c"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2223\" class=\"elementor elementor-2223\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d98e912 e-flex e-con-boxed e-con e-parent\" data-id=\"d98e912\" 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-7d38a0b elementor-widget elementor-widget-html\" data-id=\"7d38a0b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* --- 1. SETUP --- *\/\r\n    :root {\r\n        --uii-navy: #254385;\r\n        --uii-orange: #f7941d;\r\n        --glass-bg: rgba(255, 255, 255, 0.85);\r\n        --glass-border: rgba(37, 67, 133, 0.15);\r\n        --text-main: #254385;\r\n        --text-gray: #666;\r\n    }\r\n\r\n    #uii-news-hub {\r\n        width: 100%;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        font-family: 'Inter', system-ui, sans-serif;\r\n        color: var(--text-main);\r\n        padding: 20px;\r\n    }\r\n\r\n    \/* --- 2. HEADER & TABS --- *\/\r\n    .hub-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: flex-end;\r\n        margin-bottom: 30px;\r\n        border-bottom: 2px solid rgba(37, 67, 133, 0.1);\r\n        padding-bottom: 15px;\r\n    }\r\n\r\n    .hub-title {\r\n        font-size: 32px;\r\n        font-weight: 800;\r\n        margin: 0;\r\n        line-height: 1;\r\n        position: relative;\r\n    }\r\n    .hub-title span { color: var(--uii-orange); }\r\n\r\n    .hub-tabs {\r\n        display: flex;\r\n        gap: 10px;\r\n    }\r\n\r\n    .tab-item {\r\n        background: transparent;\r\n        border: 1px solid transparent;\r\n        padding: 8px 20px;\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n        color: #999;\r\n        cursor: pointer;\r\n        border-radius: 30px;\r\n        transition: 0.3s;\r\n    }\r\n    .tab-item:hover { color: var(--uii-navy); background: rgba(37, 67, 133, 0.05); }\r\n    .tab-item.active {\r\n        background: var(--uii-navy);\r\n        color: #fff;\r\n        box-shadow: 0 4px 12px rgba(37, 67, 133, 0.2);\r\n    }\r\n\r\n    \/* --- 3. MAGAZINE LAYOUT --- *\/\r\n    .news-container {\r\n        display: grid;\r\n        grid-template-columns: 1.4fr 1fr; \/* Chia t\u1ec9 l\u1ec7 60% - 40% *\/\r\n        gap: 30px;\r\n        min-height: 400px;\r\n    }\r\n\r\n    \/* --- 4. HERO POST (B\u00c0I L\u1edaN B\u00caN TR\u00c1I) --- *\/\r\n    .hero-card {\r\n        position: relative;\r\n        border-radius: 16px;\r\n        overflow: hidden;\r\n        height: 500px; \/* Chi\u1ec1u cao c\u1ed1 \u0111\u1ecbnh cho \u0111\u1eb9p *\/\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: flex-end;\r\n        text-decoration: none;\r\n        box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n        transition: transform 0.3s;\r\n    }\r\n    .hero-card:hover { transform: scale(1.01); }\r\n\r\n    .hero-bg {\r\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n        object-fit: cover; transition: 0.5s; z-index: 0;\r\n    }\r\n    .hero-card:hover .hero-bg { transform: scale(1.05); }\r\n\r\n    \/* L\u1edbp ph\u1ee7 m\u00e0u \u0111en m\u1edd \u0111\u1ec3 \u0111\u1ecdc ch\u1eef *\/\r\n    .hero-overlay {\r\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n        background: linear-gradient(to top, rgba(15, 23, 42, 0.9), transparent 60%);\r\n        z-index: 1;\r\n    }\r\n\r\n    .hero-content {\r\n        position: relative; z-index: 2; padding: 30px; color: #fff;\r\n    }\r\n\r\n    .hero-tag {\r\n        background: var(--uii-orange); color: #fff;\r\n        padding: 5px 12px; border-radius: 4px;\r\n        font-size: 11px; font-weight: 800; text-transform: uppercase;\r\n        display: inline-block; margin-bottom: 15px;\r\n    }\r\n\r\n    .hero-title {\r\n        font-size: 28px; font-weight: 800; line-height: 1.3;\r\n        margin: 0 0 15px 0; text-shadow: 0 2px 4px rgba(0,0,0,0.3);\r\n    }\r\n\r\n    .hero-meta {\r\n        font-size: 13px; opacity: 0.8; display: flex; gap: 15px;\r\n    }\r\n\r\n    \/* --- 5. SIDE LIST (DANH S\u00c1CH B\u00caN PH\u1ea2I) --- *\/\r\n    .side-list {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 20px;\r\n        height: 500px;\r\n        overflow-y: auto; \/* Cho ph\u00e9p cu\u1ed9n n\u1ebfu danh s\u00e1ch d\u00e0i *\/\r\n        padding-right: 5px;\r\n    }\r\n    \/* Scrollbar \u0111\u1eb9p *\/\r\n    .side-list::-webkit-scrollbar { width: 4px; }\r\n    .side-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }\r\n\r\n    .side-card {\r\n        display: flex;\r\n        gap: 15px;\r\n        background: var(--glass-bg);\r\n        border: 1px solid var(--glass-border);\r\n        padding: 15px;\r\n        border-radius: 12px;\r\n        text-decoration: none;\r\n        transition: 0.3s;\r\n        align-items: center;\r\n    }\r\n    .side-card:hover {\r\n        background: #fff;\r\n        border-color: var(--uii-orange);\r\n        box-shadow: 0 5px 15px rgba(37, 67, 133, 0.08);\r\n        transform: translateX(5px);\r\n    }\r\n\r\n    .side-thumb {\r\n        width: 100px; height: 100px;\r\n        border-radius: 8px;\r\n        object-fit: cover;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .side-info { flex: 1; }\r\n\r\n    .side-date {\r\n        font-size: 11px; color: #888; font-weight: 600;\r\n        margin-bottom: 5px; display: block;\r\n    }\r\n    \r\n    .side-title {\r\n        font-size: 16px; font-weight: 700; color: var(--uii-navy);\r\n        line-height: 1.4; margin: 0;\r\n        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;\r\n    }\r\n\r\n    \/* --- 6. UTILS --- *\/\r\n    .loading-box {\r\n        grid-column: 1 \/ -1; height: 300px;\r\n        display: flex; justify-content: center; align-items: center;\r\n        color: var(--uii-navy); font-style: italic;\r\n    }\r\n    .hidden { display: none; }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 900px) {\r\n        .news-container { grid-template-columns: 1fr; height: auto; }\r\n        .hero-card { height: 350px; }\r\n        .side-list { height: auto; overflow: visible; }\r\n    }\r\n<\/style>\r\n\r\n<div id=\"uii-news-hub\">\r\n    \r\n    <div class=\"hub-header\">\r\n        <h2 class=\"hub-title\">Latest <span>Updates<\/span><\/h2>\r\n        <div class=\"hub-tabs\">\r\n            <button class=\"tab-item active\" onclick=\"loadWPPosts('all')\">All<\/button>\r\n            <button class=\"tab-item\" onclick=\"loadWPPosts('news')\">News<\/button>\r\n            <button class=\"tab-item\" onclick=\"loadWPPosts('event')\">Events<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"newsContainer\" class=\"news-container\">\r\n        <div class=\"loading-box\">Connecting to UII Database...<\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ --- C\u1ea4U H\u00ccNH API WORDPRESS ---\r\n    \/\/ Thay \u0111\u1ed5i s\u1ed1 l\u01b0\u1ee3ng b\u00e0i vi\u1ebft mu\u1ed1n l\u1ea5y (v\u00ed d\u1ee5 5 b\u00e0i: 1 b\u00e0i to, 4 b\u00e0i nh\u1ecf)\r\n    const wpApiUrl = '\/wp-json\/wp\/v2\/posts?_embed&per_page=5'; \r\n    const container = document.getElementById('newsContainer');\r\n\r\n    \/\/ H\u00e0m l\u1ea5y d\u1eef li\u1ec7u\r\n    async function loadWPPosts(filter = 'all') {\r\n        container.innerHTML = '<div class=\"loading-box\">Updating Content...<\/div>';\r\n        \r\n        \/\/ Update Active Tab\r\n        document.querySelectorAll('.tab-item').forEach(btn => btn.classList.remove('active'));\r\n        event.target.classList.add('active');\r\n\r\n        try {\r\n            const response = await fetch(wpApiUrl);\r\n            const posts = await response.json();\r\n\r\n            \/\/ L\u1ecdc d\u1eef li\u1ec7u ph\u00eda Client (\u0110\u01a1n gi\u1ea3n nh\u1ea5t cho b\u1ea1n)\r\n            const filteredPosts = posts.filter(post => {\r\n                if (filter === 'all') return true;\r\n                \r\n                \/\/ L\u1ea5y danh s\u00e1ch category c\u1ee7a b\u00e0i vi\u1ebft\r\n                const terms = post._embedded['wp:term'][0]; \r\n                const catNames = terms.map(t => t.name.toLowerCase());\r\n\r\n                \/\/ Logic l\u1ecdc th\u00f4ng minh: T\u00ecm ch\u1eef \"news\" ho\u1eb7c \"event\" trong t\u00ean category\r\n                if (filter === 'news') return catNames.some(c => c.includes('news') || c.includes('tin'));\r\n                if (filter === 'event') return catNames.some(c => c.includes('event') || c.includes('s\u1ef1 ki\u1ec7n'));\r\n                return false;\r\n            });\r\n\r\n            if (filteredPosts.length === 0) {\r\n                container.innerHTML = '<div class=\"loading-box\">No updates found in this section.<\/div>';\r\n                return;\r\n            }\r\n\r\n            renderLayout(filteredPosts);\r\n\r\n        } catch (error) {\r\n            console.error(error);\r\n            container.innerHTML = '<div class=\"loading-box\">Error loading data. Check console.<\/div>';\r\n        }\r\n    }\r\n\r\n    \/\/ H\u00e0m V\u1ebd Giao Di\u1ec7n (Layout Magazine)\r\n    function renderLayout(posts) {\r\n        let html = '';\r\n        \r\n        \/\/ 1. T\u00e1ch b\u00e0i \u0111\u1ea7u ti\u00ean l\u00e0m HERO (B\u00e0i To)\r\n        const heroPost = posts[0];\r\n        const remainingPosts = posts.slice(1); \/\/ C\u00e1c b\u00e0i c\u00f2n l\u1ea1i\r\n\r\n        \/\/ X\u1eed l\u00fd \u1ea3nh Hero\r\n        let heroImg = 'https:\/\/via.placeholder.com\/800x600?text=UII+News';\r\n        if (heroPost._embedded['wp:featuredmedia']) {\r\n            heroImg = heroPost._embedded['wp:featuredmedia'][0].source_url;\r\n        }\r\n        \r\n        \/\/ X\u1eed l\u00fd Ng\u00e0y Hero\r\n        const heroDate = new Date(heroPost.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });\r\n        \r\n        \/\/ Render HERO HTML\r\n        html += `\r\n            <a href=\"${heroPost.link}\" class=\"hero-card fade-in\">\r\n                <img decoding=\"async\" src=\"${heroImg}\" class=\"hero-bg\" alt=\"${heroPost.title.rendered}\">\r\n                <div class=\"hero-overlay\"><\/div>\r\n                <div class=\"hero-content\">\r\n                    <span class=\"hero-tag\">FEATURED<\/span>\r\n                    <h3 class=\"hero-title\">${heroPost.title.rendered}<\/h3>\r\n                    <div class=\"hero-meta\">\r\n                        <span>\ud83d\udcc5 ${heroDate}<\/span>\r\n                        <span>\u270d\ufe0f UII Editorial<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n        `;\r\n\r\n        \/\/ 2. Render danh s\u00e1ch b\u00ean ph\u1ea3i (SIDE LIST)\r\n        html += `<div class=\"side-list\">`;\r\n        \r\n        remainingPosts.forEach(post => {\r\n            \/\/ X\u1eed l\u00fd \u1ea3nh nh\u1ecf\r\n            let thumb = 'https:\/\/via.placeholder.com\/150?text=UII';\r\n            if (post._embedded['wp:featuredmedia']) {\r\n                thumb = post._embedded['wp:featuredmedia'][0].source_url;\r\n            }\r\n            \r\n            \/\/ X\u1eed l\u00fd ng\u00e0y nh\u1ecf\r\n            const date = new Date(post.date).toLocaleDateString('en-GB');\r\n\r\n            html += `\r\n                <a href=\"${post.link}\" class=\"side-card fade-in\">\r\n                    <img decoding=\"async\" src=\"${thumb}\" class=\"side-thumb\" alt=\"Thumbnail\">\r\n                    <div class=\"side-info\">\r\n                        <span class=\"side-date\">${date}<\/span>\r\n                        <h4 class=\"side-title\">${post.title.rendered}<\/h4>\r\n                    <\/div>\r\n                <\/a>\r\n            `;\r\n        });\r\n\r\n        html += `<\/div>`; \/\/ \u0110\u00f3ng side-list\r\n\r\n        container.innerHTML = html;\r\n    }\r\n\r\n    \/\/ Ch\u1ea1y l\u1ea7n \u0111\u1ea7u\r\n    document.addEventListener(\"DOMContentLoaded\", () => {\r\n        loadWPPosts();\r\n    });\r\n<\/script>\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-8516719 e-con-full e-flex e-con e-parent\" data-id=\"8516719\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3b5920 elementor-widget elementor-widget-html\" data-id=\"d3b5920\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<iframe src=\"https:\/\/fse.jegtheme.com\/uneza\/news\/\" width=\"100%\" height=\"600px\" frameborder=\"0\"><\/iframe>\r\n\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>Latest Updates All News Events Connecting to UII Database&#8230;<\/p>","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-2223","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/pages\/2223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/comments?post=2223"}],"version-history":[{"count":10,"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/pages\/2223\/revisions"}],"predecessor-version":[{"id":4985,"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/pages\/2223\/revisions\/4985"}],"wp:attachment":[{"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/media?parent=2223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}