{"id":2836,"date":"2025-11-07T19:06:16","date_gmt":"2025-11-07T11:06:16","guid":{"rendered":"https:\/\/www.klwong.hk\/?page_id=2836"},"modified":"2026-04-20T18:04:21","modified_gmt":"2026-04-20T10:04:21","slug":"%e7%ab%8b%e6%b3%95%e6%9c%83%e9%81%b8%e8%88%89%e5%b0%88%e9%a0%81-2","status":"publish","type":"page","link":"https:\/\/www.klwong.hk\/?page_id=2836","title":{"rendered":"\u7acb\u6cd5\u6703\u9078\u8209\u5c08\u9801"},"content":{"rendered":"<!-- \u7acb\u6cd5\u6703\u767c\u8a00\u5c08\u9801 -->\r\n<!-- \u8bf7\u5c06\u6b64\u5185\u5bb9\u590d\u5236\u5230 WordPress \u9875\u9762\u7684\u7f16\u8f91\u5668\u4e2d\uff0c\u5e76\u9009\u62e9 \"Election Home\" \u6a21\u677f -->\r\n<!-- \u6ce8\u610f\uff1a\u5c01\u9762\u9875\u5df2\u5728\u6a21\u677f\u4e2d\u663e\u793a\uff0c\u6b64\u5904\u53ea\u5305\u542b\u7acb\u6cd5\u6703\u767c\u8a00\u7279\u6709\u7684\u5185\u5bb9 -->\r\n\r\n<style>\r\n.play-fullscreen-btn:hover {\r\n        background: rgba(30, 60, 114, 1) !important;\r\n        transform: scale(1.05);\r\n    }\r\n    \r\n    .play-overlay {\r\n        pointer-events: auto;\r\n        z-index: 5;\r\n    }\r\n    \r\n    .play-overlay-button {\r\n        background-image: url(\"https:\/\/static.xx.fbcdn.net\/rsrc.php\/v4\/y6\/r\/WEXl7U8fX95.png\");\r\n        background-repeat: no-repeat;\r\n        background-size: 81px 245px;\r\n        background-position: 0px 0px;\r\n        background-color: transparent;\r\n        border: none;\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        height: 80px;\r\n        width: 80px;\r\n        outline: none;\r\n        padding: 0;\r\n        margin: 0;\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        transition: transform 0.3s ease;\r\n    }\r\n    \r\n    .play-overlay:hover .play-overlay-button {\r\n        transform: translate(-50%, -50%) scale(1.1);\r\n    }\r\n    \r\n    video {\r\n        z-index: 1;\r\n    }\r\n    \r\n    .video-cover {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-size: cover;\r\n        background-position: center;\r\n        cursor: pointer;\r\n        z-index: 10;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n    \r\n    .play-button-overlay {\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        width: 80px;\r\n        height: 80px;\r\n        background: rgba(30, 60, 114, 0.9);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: transform 0.3s ease, background 0.3s ease;\r\n    }\r\n    \r\n    .play-button-overlay::after {\r\n        content: \"\";\r\n        width: 0;\r\n        height: 0;\r\n        border-left: 25px solid #fff;\r\n        border-top: 15px solid transparent;\r\n        border-bottom: 15px solid transparent;\r\n        margin-left: 5px;\r\n    }\r\n    \r\n    .play-button-overlay:hover {\r\n        transform: translate(-50%, -50%) scale(1.1);\r\n        background: rgba(30, 60, 114, 1);\r\n    }\r\n    \r\n    <blade media|%20(max-width%3A%20768px)%20%7B>.play-button-overlay {\r\n        width: 48px;\r\n        height: 48px;\r\n    }\r\n    \r\n    .play-button-overlay::after {\r\n        border-left-width: 15px;\r\n        border-top-width: 9px;\r\n        border-bottom-width: 9px;\r\n        margin-left: 3px;\r\n    }\r\n    \r\n    .play-fullscreen-btn {\r\n        display: none !important;\r\n    }\r\n}\r\n\r\n\/* \u2500\u2500 Category section scroll offset (overridden by JS after nav renders) \u2500\u2500 *\/\r\n[id^=\"legco-cat-\"] {\r\n    scroll-margin-top: 100px;\r\n}\r\n\r\n\/* \u2500\u2500 Category Tabs \u2500\u2500 *\/\r\n#legco-tabs-nav {\r\n    position: sticky;\r\n    top: 0;\r\n    z-index: 50;\r\n    background: rgba(255, 255, 255, 0.95);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    padding: 14px 0;\r\n    margin-bottom: 48px;\r\n    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);\r\n    border-radius: 0 0 12px 12px;\r\n}\r\n.legco-tabs-wrapper {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 12px;\r\n    flex-wrap: wrap;\r\n}\r\n.legco-tab-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    padding: 9px 22px;\r\n    border-radius: 40px;\r\n    border: 2px solid;\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n    cursor: pointer;\r\n    background: transparent;\r\n    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;\r\n}\r\n.legco-tab-btn:hover {\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n}\r\n.legco-tab-btn.is-active {\r\n    color: #fff !important;\r\n    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);\r\n}\r\n.legco-tab-dot {\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 50%;\r\n    flex-shrink: 0;\r\n    transition: background 0.2s ease;\r\n}\r\n@media (max-width: 600px) {\r\n    .legco-tab-btn {\r\n        font-size: 13px;\r\n        padding: 7px 16px;\r\n        letter-spacing: 1px;\r\n    }\r\n    \r\n    .video-grid {\r\n        grid-template-columns: 1fr !important;\r\n        gap: 20px !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<!-- Main Content Section -->\r\n<div class=\"ebook-page intro-page\" style=\"text-align: center; padding: 80px 20px; border-left: none !important;\">\r\n    <div style=\"max-width: 1200px; margin: 0 auto;\">\r\n\r\n        <!-- Header Section -->\r\n        <div style=\"margin-bottom: 60px;\">\r\n            <h2 style=\"font-size: 36px; font-weight: bold; color: #2c3e50; margin-bottom: 20px; text-align: center;\">\r\n                \u7acb\u6cd5\u6703\u767c\u8a00<\/h2>\r\n        <\/div>\r\n\r\n        <!-- Speech Videos Section \u2014 rendered by JS below -->\r\n        <div style=\"margin: 60px 0;\">\r\n            <!-- Category Tabs Navigation -->\r\n            <nav id=\"legco-tabs-nav\" aria-label=\"\u5f71\u7247\u5206\u985e\u5c0e\u822a\">\r\n                <div class=\"legco-tabs-wrapper\" id=\"legco-tabs-wrapper\"><\/div>\r\n            <\/nav>\r\n\r\n            <div id=\"legco-video-sections\"><\/div>\r\n\r\n            <!-- Video Modal -->\r\n            <div id=\"videoModal\" style=\"display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; align-items: center; justify-content: center;\">\r\n                <div id=\"modalContainer\" style=\"position: relative; width: 90%; max-width: 1200px; max-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center;\">\r\n                    <div style=\"position: absolute; top: -44px; right: 0; display: flex; gap: 8px; z-index: 10001;\">\r\n                        <button id=\"modalFullscreenBtn\" style=\"background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); color: #fff; font-size: 14px; cursor: pointer; padding: 6px 12px; border-radius: 6px;\">\u5168\u5c4f<\/button>\r\n                        <button id=\"closeModal\" style=\"background: transparent; border: none; color: #fff; font-size: 32px; cursor: pointer; padding: 0 8px; line-height: 1;\">\u00d7<\/button>\r\n                    <\/div>\r\n                    <div id=\"modalVideoContainer\" style=\"position: relative; background: #000; display: flex; align-items: center; justify-content: center;\">\r\n                        <iframe id=\"modalVideo\" style=\"width: 100%; height: 100%; border: none; display: block; position: absolute; top: 0; left: 0;\" src=\"about:blank\" frameborder=\"0\" allowfullscreen allow=\"fullscreen; autoplay; encrypted-media\"><\/iframe>\r\n                        <video id=\"modalVideoMP4\" style=\"width: 100%; height: 100%; display: none; position: absolute; top: 0; left: 0; object-fit: contain;\" autoplay=\"autoplay\" controls=\"controls\" width=\"300\" height=\"150\"><\/video>\r\n                    <\/div>\r\n                    <p id=\"modalHint\" style=\"margin-top: 12px; font-size: 14px; color: rgba(255,255,255,0.85); text-align: center; display: none;\">\r\n                        \u70ba\u907f\u514d\u81ea\u52d5\u64ad\u653e\u975c\u97f3\uff0c\u8acb\u9ede\u64ca\u5f71\u7247\u5167\u64ad\u653e\u9375\u958b\u59cb\u64ad\u653e\uff08\u901a\u5e38\u6703\u6709\u8072\uff09\u3002\u6216\r\n                        <a id=\"modalOpenNewTab\" href=\"#\" target=\"_blank\" rel=\"noopener\" style=\"color: #7eb8ff;\">\u5728\u65b0\u5206\u9801\u958b\u555f<\/a>\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <script>\r\n                \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n                \/\/ \u5f71\u7247\u8cc7\u6599 \u2014 \u53ea\u9700\u7de8\u8f2f\u6b64 array \u5373\u53ef\u65b0\u589e \/ \u4fee\u6539 \/ \u522a\u9664\u5f71\u7247\r\n                \/\/\r\n                \/\/ \u6b04\u4f4d\u8aaa\u660e\uff1a\r\n                \/\/   reel   \u2014 Facebook Reel ID\r\n                \/\/   h      \u2014 iframe height \u53c3\u6578\uff08312 \/ 314 \/ 316\uff09\r\n                \/\/   ratio  \u2014 \u5bec\u00f7\u9ad8\uff1a\u6a6b\u5411\u7d04 1.78 \/ 1.79\uff1b\u76f4\u5411 Reel\uff089:16\uff09\u7528 0.5625\r\n                \/\/   cover  \u2014 \u5c01\u9762\u5716 URL\r\n                \/\/\r\n                \/\/ layout \u53ef\u9078\u503c\uff1a\r\n                \/\/   'single' \u2014 \u5c45\u4e2d\u55ae\u5f71\u7247\uff08\u6700\u5bec 620px\uff09\r\n                \/\/   'grid'   \u2014 \u81ea\u52d5\u591a\u5217\u7db2\u683c\r\n                \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n                var VIDEO_CATEGORIES = [{\r\n                    title: '\u7acb\u6cd5\u6703\u5de5\u4f5c\u5831\u544a',\r\n                    colorBar: ['#7c3aed', '#a78bfa'],\r\n                    colorBadge: '#7c3aed',\r\n                    subtitle: '',\r\n                    layout: 'single',\r\n                    videos: [{\r\n                        reel: '26428291096839707',\r\n                        h: 312,\r\n                        ratio: 0.5625,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/04\/2026\u9ec3\u9326\u826f-\u7acb\u6cd5\u6703\u5de5\u4f5c\u5831\u544a-1.jpg'\r\n                    }]\r\n                }, {\r\n                    title: '\u5927\u6703\u8cea\u8a62',\r\n                    colorBar: ['#b91c1c', '#ef4444'],\r\n                    colorBadge: '#b91c1c',\r\n                    subtitle: '',\r\n                    layout: 'single',\r\n                    videos: [{\r\n                        reel: '873336802218570',\r\n                        h: 314,\r\n                        ratio: 1.78,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-9.jpg'\r\n                    }]\r\n                }, {\r\n                    title: '\u8b70\u54e1\u8b70\u6848',\r\n                    colorBar: ['#1e3c72', '#2980b9'],\r\n                    colorBadge: '#1e3c72',\r\n                    subtitle: null,\r\n                    layout: 'grid',\r\n                    videos: [{\r\n                            reel: '1916258625667074',\r\n                            h: 312,\r\n                            ratio: 1.79,\r\n                            cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/04\/1916258625667074.jpg'\r\n                        }, {\r\n                            reel: '2228751441229500',\r\n                            h: 312,\r\n                            ratio: 1.79,\r\n                            cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/04\/2228751441229500.jpg'\r\n                        }, {\r\n                            reel: '1082192060659555',\r\n                            h: 314,\r\n                            ratio: 1.78,\r\n                            cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-10.jpg'\r\n                        }, {\r\n                            reel: '1451279003093567',\r\n                            h: 314,\r\n                            ratio: 1.78,\r\n                            cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-8.jpg'\r\n                        }, {\r\n                            reel: '876278235300254',\r\n                            h: 316,\r\n                            ratio: 1.78,\r\n                            cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-5.jpg'\r\n                        }, {\r\n                            reel: '876714981800190',\r\n                            h: 316,\r\n                            ratio: 1.78,\r\n                            cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-4.jpg'\r\n                        }, {\r\n                            reel: '1234740468629654',\r\n                            h: 312,\r\n                            ratio: 1.79,\r\n                            cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f.jpg'\r\n                        }, {\r\n                            reel: '848971554805934',\r\n                            h: 314,\r\n                            ratio: 1.78,\r\n                            cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-3.jpg'\r\n                        }\r\n\r\n                    ]\r\n                }, {\r\n                    title: '\u4e8b\u52d9\u59d4\u54e1\u6703',\r\n                    colorBar: ['#15803d', '#22c55e'],\r\n                    colorBadge: '#15803d',\r\n                    subtitle: '',\r\n                    layout: 'grid',\r\n                    videos: [{\r\n                        reel: '2371900316632774',\r\n                        h: 312,\r\n                        ratio: 1.79,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/04\/2371900316632774.jpg'\r\n                    }, {\r\n                        reel: '1688887438929566',\r\n                        h: 312,\r\n                        ratio: 1.79,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/04\/1688887438929566.jpg'\r\n                    }, {\r\n                        reel: '1276816291185291',\r\n                        h: 312,\r\n                        ratio: 1.79,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/04\/1276816291185291.jpg'\r\n                    }, {\r\n                        reel: '1494054159041715',\r\n                        h: 312,\r\n                        ratio: 1.79,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/04\/1494054159041715.jpg'\r\n                    }, {\r\n                        reel: '4425530594358724',\r\n                        h: 312,\r\n                        ratio: 1.79,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/04\/4425530594358724.jpg'\r\n                    }, {\r\n                        reel: '1288903783177990',\r\n                        h: 312,\r\n                        ratio: 1.79,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/04\/1288903783177990.jpg'\r\n                    }, {\r\n                        reel: '935048196179976',\r\n                        h: 312,\r\n                        ratio: 1.79,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/04\/935048196179976.jpg'\r\n                    }, {\r\n                        reel: '1974457870111651',\r\n                        h: 312,\r\n                        ratio: 1.79,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-15.jpg'\r\n                    }, {\r\n                        reel: '776498795503029',\r\n                        h: 312,\r\n                        ratio: 1.79,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-14.jpg'\r\n                    }, {\r\n                        reel: '3113449552376787',\r\n                        h: 312,\r\n                        ratio: 1.79,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-12.jpg'\r\n                    }, {\r\n                        reel: '922773576760524',\r\n                        h: 312,\r\n                        ratio: 1.79,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-13.jpg'\r\n                    }, {\r\n                        reel: '848971554805934',\r\n                        h: 314,\r\n                        ratio: 1.78,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-11.jpg'\r\n                    }, {\r\n                        reel: '896555420032052',\r\n                        h: 316,\r\n                        ratio: 1.78,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-7.jpg'\r\n                    }, {\r\n                        reel: '1166194401995699',\r\n                        h: 316,\r\n                        ratio: 1.78,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/02\/\u9ec3\u9326\u826f-6.jpg'\r\n                    }]\r\n                }];\r\n\r\n                \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n                \/\/ DOM helpers \u2014 no innerHTML used\r\n                \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n                function el(tag, styles, attrs) {\r\n                    var node = document.createElement(tag);\r\n                    if (styles) node.style.cssText = styles;\r\n                    if (attrs) Object.keys(attrs).forEach(function(k) {\r\n                        node.setAttribute(k, attrs[k]);\r\n                    });\r\n                    return node;\r\n                }\r\n\r\n                function fbUrl(reel, h, ratio) {\r\n                    ratio = (typeof ratio === 'number' && ratio > 0) ? ratio : 1.78;\r\n                    var isPortrait = (1 \/ ratio) > 1;\r\n                    var pw;\r\n                    var ph;\r\n                    if (isPortrait) {\r\n                        pw = 314;\r\n                        ph = Math.round(pw \/ ratio);\r\n                    } else {\r\n                        pw = 560;\r\n                        ph = h;\r\n                    }\r\n                    return 'https:\/\/www.facebook.com\/plugins\/video.php?height=' + ph +\r\n                        '&href=https%3A%2F%2Fwww.facebook.com%2Freel%2F' + reel +\r\n                        '%2F&show_text=false&width=' + pw + '&t=0';\r\n                }\r\n\r\n                function buildVideoCard(v, isSingle) {\r\n                    var url = fbUrl(v.reel, v.h, v.ratio);\r\n                    var isPortrait = v.ratio > 0 && (1 \/ v.ratio) > 1;\r\n\r\n                    var wrapper = el('div', null, {\r\n                        class: 'video-wrapper'\r\n                    });\r\n                    wrapper.style.cssText = 'background:#000;border-radius:16px;padding:0;' +\r\n                        'box-shadow:0 8px 24px rgba(0,0,0,0.12);' +\r\n                        'transition:transform 0.3s ease,box-shadow 0.3s ease;' +\r\n                        'overflow:hidden;position:relative;width:100%;' +\r\n                        (isSingle ? (isPortrait ? 'max-width:420px;' : 'max-width:620px;') : '');\r\n\r\n                    var aspectBox = el('div',\r\n                        'position:relative;padding-bottom:' + (1 \/ v.ratio * 100).toFixed(4) + '%;height:0;overflow:hidden;border-radius:16px;background:#000;'\r\n                    );\r\n\r\n                    var iframe = el('iframe',\r\n                        'border:none;overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;', {\r\n                            class: 'lazy-iframe',\r\n                            'data-src': url,\r\n                            src: 'about:blank',\r\n                            frameborder: '0',\r\n                            scrolling: 'no',\r\n                            allowfullscreen: 'allowfullscreen'\r\n                        });\r\n\r\n                    var cover = el('div', null, {\r\n                        class: 'video-cover',\r\n                        'data-video-src': url,\r\n                        'data-aspect-ratio': String(v.ratio),\r\n                        'data-cover-image': v.cover\r\n                    });\r\n                    cover.style.backgroundImage = 'url(' + v.cover + ')';\r\n\r\n                    var playIcon = el('div', null, {\r\n                        class: 'play-button-overlay'\r\n                    });\r\n                    cover.appendChild(playIcon);\r\n\r\n                    aspectBox.appendChild(iframe);\r\n                    aspectBox.appendChild(cover);\r\n                    wrapper.appendChild(aspectBox);\r\n\r\n                    var btn = el('button', 'position:absolute;bottom:20px;right:20px;' +\r\n                        'background:rgba(30,60,114,0.9);color:#fff;border:none;' +\r\n                        'padding:12px 24px;border-radius:8px;font-size:16px;font-weight:bold;' +\r\n                        'cursor:pointer;z-index:10;transition:all 0.3s ease;', {\r\n                            class: 'play-fullscreen-btn',\r\n                            'data-video-src': url,\r\n                            'data-aspect-ratio': String(v.ratio)\r\n                        });\r\n                    btn.textContent = '\u5168\u5c4f\u64ad\u653e';\r\n                    wrapper.appendChild(btn);\r\n\r\n                    return wrapper;\r\n                }\r\n\r\n                function buildCategorySection(cat, isLast, index) {\r\n                    var section = el('div', 'margin-bottom:' + (isLast ? '60' : '80') + 'px;');\r\n                    section.id = 'legco-cat-' + index;\r\n\r\n                    \/* \u2500\u2500 header \u2500\u2500 *\/\r\n                    var header = el('div', 'display:flex;align-items:center;gap:16px;margin-bottom:40px;');\r\n\r\n                    var bar = el('span', 'display:block;width:5px;height:52px;' +\r\n                        'background:linear-gradient(to bottom,' + cat.colorBar[0] + ',' + cat.colorBar[1] + ');' +\r\n                        'border-radius:3px;flex-shrink:0;');\r\n\r\n                    var titleGroup = el('div', 'text-align:left;');\r\n\r\n                    var titleRow = el('div', 'display:flex;align-items:center;gap:12px;flex-wrap:wrap;');\r\n\r\n                    var h3 = el('h3', 'font-size:26px;font-weight:800;color:#1a1a2e;margin:0;letter-spacing:3px;');\r\n                    h3.textContent = cat.title;\r\n\r\n                    var badge = el('span', 'font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px;' +\r\n                        'white-space:nowrap;letter-spacing:0;color:#fff;background:' + cat.colorBadge + ';');\r\n                    badge.textContent = cat.videos.length + ' \u5f71\u7247';\r\n\r\n                    titleRow.appendChild(h3);\r\n                    titleRow.appendChild(badge);\r\n                    titleGroup.appendChild(titleRow);\r\n\r\n                    if (cat.subtitle) {\r\n                        var sub = el('p',\r\n                            'font-size:12px;color:#aaa;margin:6px 0 0;letter-spacing:1.5px;text-transform:uppercase;'\r\n                        );\r\n                        sub.textContent = cat.subtitle;\r\n                        titleGroup.appendChild(sub);\r\n                    }\r\n\r\n                    var rule = el('div', 'flex:1;height:1px;background:linear-gradient(to right,#e0e0e0,transparent);');\r\n\r\n                    header.appendChild(bar);\r\n                    header.appendChild(titleGroup);\r\n                    header.appendChild(rule);\r\n                    section.appendChild(header);\r\n\r\n                    \/* \u2500\u2500 videos \u2500\u2500 *\/\r\n                    if (cat.layout === 'single') {\r\n                        var center = el('div', 'display:flex;justify-content:center;');\r\n                        center.appendChild(buildVideoCard(cat.videos[0], true));\r\n                        section.appendChild(center);\r\n                    } else {\r\n                        var grid = el('div', null, {\r\n                            class: 'video-grid'\r\n                        });\r\n                        grid.style.cssText = 'display:grid;grid-template-columns:repeat(2,1fr);gap:40px;max-width:100%;';\r\n                        cat.videos.forEach(function(v) {\r\n                            grid.appendChild(buildVideoCard(v, false));\r\n                        });\r\n                        section.appendChild(grid);\r\n                    }\r\n\r\n                    return section;\r\n                }\r\n\r\n                \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n                \/\/ Tabs nav\r\n                \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n                function buildTabsNav() {\r\n                    var wrapper = document.getElementById('legco-tabs-wrapper');\r\n                    VIDEO_CATEGORIES.forEach(function(cat, i) {\r\n                        var btn = el('button', null, {\r\n                            class: 'legco-tab-btn',\r\n                            'data-cat-index': String(i)\r\n                        });\r\n                        btn.style.borderColor = cat.colorBadge;\r\n                        btn.style.color = cat.colorBadge;\r\n\r\n                        var dot = el('span', null, {\r\n                            class: 'legco-tab-dot'\r\n                        });\r\n                        dot.style.background = cat.colorBadge;\r\n                        btn.appendChild(dot);\r\n                        btn.appendChild(document.createTextNode(cat.title));\r\n\r\n                        btn.addEventListener('click', function() {\r\n                            var target = document.getElementById('legco-cat-' + i);\r\n                            if (target) target.scrollIntoView({\r\n                                behavior: 'smooth',\r\n                                block: 'start'\r\n                            });\r\n                        });\r\n\r\n                        wrapper.appendChild(btn);\r\n                    });\r\n                }\r\n\r\n                function setActiveTab(index) {\r\n                    document.querySelectorAll('.legco-tab-btn').forEach(function(btn, i) {\r\n                        var cat = VIDEO_CATEGORIES[i];\r\n                        if (i === index) {\r\n                            btn.classList.add('is-active');\r\n                            btn.style.background = cat.colorBadge;\r\n                            btn.style.borderColor = cat.colorBadge;\r\n                            btn.style.color = '#fff';\r\n                            btn.querySelector('.legco-tab-dot').style.background = 'rgba(255,255,255,0.7)';\r\n                        } else {\r\n                            btn.classList.remove('is-active');\r\n                            btn.style.background = 'transparent';\r\n                            btn.style.borderColor = cat.colorBadge;\r\n                            btn.style.color = cat.colorBadge;\r\n                            btn.querySelector('.legco-tab-dot').style.background = cat.colorBadge;\r\n                        }\r\n                    });\r\n                }\r\n\r\n                function initActiveTabTracking() {\r\n                    var navH = document.getElementById('legco-tabs-nav').offsetHeight;\r\n                    var observer = new IntersectionObserver(function(entries) {\r\n                        entries.forEach(function(entry) {\r\n                            if (entry.isIntersecting) {\r\n                                setActiveTab(parseInt(entry.target.id.replace('legco-cat-', ''), 10));\r\n                            }\r\n                        });\r\n                    }, {\r\n                        rootMargin: '-' + (navH + 10) + 'px 0px -55% 0px',\r\n                        threshold: 0\r\n                    });\r\n\r\n                    VIDEO_CATEGORIES.forEach(function(_, i) {\r\n                        var sec = document.getElementById('legco-cat-' + i);\r\n                        if (sec) observer.observe(sec);\r\n                    });\r\n                }\r\n\r\n                \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n                \/\/ Boot\r\n                \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n                document.addEventListener('DOMContentLoaded', function() {\r\n                    var container = document.getElementById('legco-video-sections');\r\n\r\n                    VIDEO_CATEGORIES.forEach(function(cat, i) {\r\n                        container.appendChild(buildCategorySection(cat, i === VIDEO_CATEGORIES.length -\r\n                            1, i));\r\n                    });\r\n\r\n                    buildTabsNav();\r\n                    setActiveTab(0);\r\n\r\n                    \/\/ Sync scroll-margin-top to actual rendered nav height + breathing room\r\n                    var navH = document.getElementById('legco-tabs-nav').offsetHeight;\r\n                    VIDEO_CATEGORIES.forEach(function(_, i) {\r\n                        var sec = document.getElementById('legco-cat-' + i);\r\n                        if (sec) sec.style.scrollMarginTop = (navH + 32) + 'px';\r\n                    });\r\n\r\n                    initActiveTabTracking();\r\n\r\n                    \/* \u2500\u2500 Modal \u2500\u2500 *\/\r\n                    var modal = document.getElementById('videoModal');\r\n                    var modalVideo = document.getElementById('modalVideo');\r\n                    var modalVideoMP4 = document.getElementById('modalVideoMP4');\r\n                    var modalVideoContainer = document.getElementById('modalVideoContainer');\r\n                    var modalContainer = document.getElementById('modalContainer');\r\n                    var closeModalBtn = document.getElementById('closeModal');\r\n                    var modalFullscreenBtn = document.getElementById('modalFullscreenBtn');\r\n                    var modalContainerStyleLandscape =\r\n                        'position:relative;width:90%;max-width:1200px;max-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;';\r\n                    var modalContainerStylePortrait =\r\n                        'position:relative;width:auto;max-width:100%;max-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 12px;box-sizing:border-box;';\r\n\r\n                    function parseReelUrl(embedUrl) {\r\n                        var m = embedUrl.match(\/href=([^&]+)\/);\r\n                        if (m) try {\r\n                            return decodeURIComponent(m[1]);\r\n                        } catch (e) {}\r\n                        return null;\r\n                    }\r\n\r\n                    function openVideoModal(videoSrc, aspectRatio, isMP4) {\r\n                        isMP4 = isMP4 || false;\r\n                        var reelUrl = parseReelUrl(videoSrc);\r\n                        var hintEl = document.getElementById('modalHint');\r\n                        var newTabEl = document.getElementById('modalOpenNewTab');\r\n                        if (reelUrl && newTabEl) {\r\n                            newTabEl.href = reelUrl;\r\n                            hintEl.style.display = 'block';\r\n                        } else {\r\n                            hintEl.style.display = 'none';\r\n                        }\r\n\r\n                        var maxH = window.innerHeight * 0.9;\r\n                        var maxW = window.innerWidth * 0.9;\r\n                        var h;\r\n                        var w;\r\n                        if (aspectRatio > 0 && (1 \/ aspectRatio) > 1) {\r\n                            \/\/ Portrait (\u76f4\u5411): fill by height first\r\n                            h = maxH;\r\n                            w = h * aspectRatio;\r\n                            if (w > maxW) {\r\n                                w = maxW;\r\n                                h = w \/ aspectRatio;\r\n                            }\r\n                        } else {\r\n                            \/\/ Landscape (\u6a6b\u5411): fill by width first\r\n                            w = Math.min(maxW, 1200);\r\n                            h = w \/ aspectRatio;\r\n                            if (h > maxH) {\r\n                                h = maxH;\r\n                                w = h * aspectRatio;\r\n                            }\r\n                        }\r\n\r\n                        modalVideoContainer.style.cssText =\r\n                            'position:relative;background:#000;display:flex;align-items:center;justify-content:center;' +\r\n                            'width:' + w + 'px;height:' + h +\r\n                            'px;max-width:100%;max-height:90vh;border-radius:8px;overflow:hidden;';\r\n\r\n                        if (modalContainer) {\r\n                            modalContainer.style.cssText = (aspectRatio > 0 && (1 \/ aspectRatio) > 1) ?\r\n                                modalContainerStylePortrait : modalContainerStyleLandscape;\r\n                        }\r\n\r\n                        modal.style.display = 'flex';\r\n                        document.body.style.overflow = 'hidden';\r\n                        if (modalFullscreenBtn) modalFullscreenBtn.textContent = '\u5168\u5c4f';\r\n\r\n                        if (isMP4) {\r\n                            modalVideo.style.display = 'none';\r\n                            modalVideoMP4.style.display = 'block';\r\n                            modalVideoMP4.src = videoSrc;\r\n                            modalVideoMP4.play().catch(function(e) {\r\n                                console.log('MP4 autoplay failed:', e);\r\n                            });\r\n                        } else {\r\n                            modalVideoMP4.style.display = 'none';\r\n                            modalVideo.style.display = 'block';\r\n                            \/\/ No forced autoplay \u2014 user clicks play inside FB player to avoid muted playback\r\n                            modalVideo.src = videoSrc;\r\n                        }\r\n                    }\r\n\r\n                    function closeVideoModal() {\r\n                        if (document.fullscreenElement) document.exitFullscreen();\r\n                        modal.style.display = 'none';\r\n                        modalVideo.src = 'about:blank';\r\n                        modalVideoMP4.src = '';\r\n                        modalVideoMP4.pause();\r\n                        document.body.style.overflow = '';\r\n                        if (modalContainer) modalContainer.style.cssText = modalContainerStyleLandscape;\r\n                    }\r\n\r\n                    container.addEventListener('click', function(e) {\r\n                        var btn = e.target.closest('.play-fullscreen-btn');\r\n                        if (btn) {\r\n                            e.stopPropagation();\r\n                            openVideoModal(btn.getAttribute('data-video-src'), parseFloat(btn\r\n                                .getAttribute('data-aspect-ratio')) || 1.78, btn.getAttribute(\r\n                                'data-is-mp4') === 'true');\r\n                            return;\r\n                        }\r\n                        var cover = e.target.closest('.video-cover');\r\n                        if (cover) {\r\n                            e.stopPropagation();\r\n                            openVideoModal(cover.getAttribute('data-video-src'), parseFloat(cover\r\n                                .getAttribute('data-aspect-ratio')) || 1.78, false);\r\n                        }\r\n                    });\r\n\r\n                    modalFullscreenBtn.addEventListener('click', function() {\r\n                        if (!document.fullscreenElement) {\r\n                            modalVideoContainer.requestFullscreen()\r\n                                .then(function() {\r\n                                    modalFullscreenBtn.textContent = '\u9000\u51fa\u5168\u5c4f';\r\n                                })\r\n                                .catch(function() {\r\n                                    modalFullscreenBtn.textContent = '\u5168\u5c4f';\r\n                                });\r\n                        } else {\r\n                            document.exitFullscreen();\r\n                            modalFullscreenBtn.textContent = '\u5168\u5c4f';\r\n                        }\r\n                    });\r\n                    document.addEventListener('fullscreenchange', function() {\r\n                        if (!document.fullscreenElement) modalFullscreenBtn.textContent = '\u5168\u5c4f';\r\n                    });\r\n\r\n                    closeModalBtn.addEventListener('click', closeVideoModal);\r\n                    modal.addEventListener('click', function(e) {\r\n                        if (e.target === modal) closeVideoModal();\r\n                    });\r\n                    document.addEventListener('keydown', function(e) {\r\n                        if (e.key === 'Escape') {\r\n                            if (document.fullscreenElement) document.exitFullscreen();\r\n                            else if (modal.style.display === 'flex') closeVideoModal();\r\n                        }\r\n                    });\r\n                });\r\n            <\/script>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u7acb\u6cd5\u6703\u767c\u8a00 \u5168\u5c4f \u00d7 \u70ba\u907f\u514d\u81ea\u52d5\u64ad\u653e\u975c\u97f3\uff0c\u8acb\u9ede\u64ca\u5f71\u7247\u5167\u64ad\u653e\u9375\u958b\u59cb\u64ad\u653e\uff08\u901a\u5e38\u6703\u6709\u8072\uff09\u3002\u6216 \u5728\u65b0\u5206\u9801\u958b\u555f<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/election-home.php","meta":{"footnotes":""},"class_list":["post-2836","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.klwong.hk\/index.php?rest_route=\/wp\/v2\/pages\/2836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.klwong.hk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.klwong.hk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.klwong.hk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.klwong.hk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2836"}],"version-history":[{"count":30,"href":"https:\/\/www.klwong.hk\/index.php?rest_route=\/wp\/v2\/pages\/2836\/revisions"}],"predecessor-version":[{"id":2946,"href":"https:\/\/www.klwong.hk\/index.php?rest_route=\/wp\/v2\/pages\/2836\/revisions\/2946"}],"wp:attachment":[{"href":"https:\/\/www.klwong.hk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}