{"id":4208,"date":"2025-03-31T14:45:28","date_gmt":"2025-03-31T06:45:28","guid":{"rendered":"https:\/\/www.hendricksin.hk\/?page_id=4208"},"modified":"2026-08-24T10:50:08","modified_gmt":"2026-08-24T02:50:08","slug":"4208-2","status":"publish","type":"page","link":"https:\/\/www.hendricksin.hk\/","title":{"rendered":"\u9996\u9801"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u51bc\u6f22\u5ef8 Hendrick Sin - \u8f6e\u64ad\u7ec4\u4ef6\uff08\u6d45\u8272\u73bb\u7483\u98ce\u683c\uff09<\/title>\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", \"Segoe UI\", Roboto, sans-serif;\r\n background-color: #f3f4f6;\r\n color: #111827;\r\n overflow-x: hidden;\r\n }\r\n\r\n .hero-container {\r\n position: relative;\r\n width: 100%;\r\n height: 580px;\r\n overflow: hidden;\r\n background: transparent;\r\n border-radius: 20px;\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);\r\n }\r\n\r\n .hero-bg-slider {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n }\r\n\r\n .bg-item {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n visibility: hidden;\r\n pointer-events: none;\r\n transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n backface-visibility: hidden;\r\n -webkit-backface-visibility: hidden;\r\n will-change: opacity, visibility;\r\n }\r\n\r\n .bg-item.active {\r\n opacity: 1;\r\n visibility: visible;\r\n pointer-events: auto;\r\n }\r\n\r\n .bg-blur-layer {\r\n position: absolute;\r\n inset: -10px;\r\n background-size: cover;\r\n background-position: center;\r\n filter: blur(25px) brightness(1.1);\r\n transform: scale(1.05);\r\n z-index: 1;\r\n }\r\n\r\n .bg-full-layer {\r\n position: absolute;\r\n inset: 0;\r\n background-size: contain;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n z-index: 2;\r\n image-rendering: -webkit-optimize-contrast;\r\n image-rendering: high-quality;\r\n animation: kenburnsZoom 16s ease-in-out infinite alternate;\r\n will-change: transform;\r\n }\r\n\r\n .bg-item::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: 3;\r\n background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.15) 100%);\r\n pointer-events: none;\r\n }\r\n\r\n .bg-item:not(.active) .bg-full-layer {\r\n animation-play-state: paused;\r\n }\r\n\r\n @keyframes kenburnsZoom {\r\n 0% { transform: scale(1) translateZ(0); }\r\n 100% { transform: scale(1.12) translateZ(0); }\r\n }\r\n\r\n .hero-main-content {\r\n position: absolute;\r\n bottom: 35px;\r\n left: 5%;\r\n width: 480px;\r\n max-width: 90%;\r\n z-index: 5;\r\n padding: 14px 20px;\r\n background: rgba(255, 255, 255, 0.75);\r\n backdrop-filter: blur(20px) saturate(180%);\r\n -webkit-backdrop-filter: blur(20px) saturate(180%);\r\n border-radius: 18px;\r\n border: 1px solid rgba(255, 255, 255, 0.9);\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 14px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .main-text-group {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n .main-tag-wrapper {\r\n display: inline-block;\r\n margin-bottom: 6px;\r\n }\r\n\r\n .main-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 2px 10px;\r\n background: #2563eb;\r\n border: none;\r\n color: #ffffff;\r\n border-radius: 20px;\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 0.3px;\r\n box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);\r\n }\r\n\r\n .main-title-wrapper {\r\n width: 100%;\r\n overflow: hidden;\r\n }\r\n\r\n .main-title {\r\n font-size: 18px;\r\n line-height: 1.3;\r\n font-weight: 700;\r\n margin-bottom: 4px;\r\n color: #111827;\r\n text-shadow: none;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .main-desc {\r\n font-size: 12px;\r\n line-height: 1.4;\r\n color: #4b5563;\r\n text-shadow: none;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .btn-watch {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 8px 16px;\r\n background: #2563eb;\r\n color: #ffffff;\r\n text-decoration: none;\r\n border-radius: 24px;\r\n font-weight: 600;\r\n font-size: 12px;\r\n white-space: nowrap;\r\n flex-shrink: 0;\r\n transition: all 0.2s ease;\r\n box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);\r\n border: none;\r\n cursor: pointer;\r\n -webkit-tap-highlight-color: transparent;\r\n user-select: none;\r\n }\r\n\r\n .btn-watch:hover,\r\n .btn-watch:focus,\r\n .btn-watch:active {\r\n background: #1d4ed8;\r\n color: #ffffff;\r\n transform: translateY(-1px);\r\n box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45);\r\n }\r\n\r\n .hero-thumbnails {\r\n position: absolute;\r\n bottom: 20px;\r\n right: 4%;\r\n display: flex;\r\n gap: 14px;\r\n max-width: 52%;\r\n overflow-x: auto;\r\n overflow-y: visible;\r\n padding: 18px 16px 14px 16px;\r\n z-index: 5;\r\n scrollbar-width: none;\r\n scroll-behavior: smooth;\r\n mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);\r\n -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);\r\n }\r\n\r\n .hero-thumbnails::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .thumb-card {\r\n position: relative;\r\n min-width: 124px;\r\n height: 150px;\r\n border-radius: 14px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n border: 1px solid rgba(0, 0, 0, 0.06);\r\n background-color: #ffffff;\r\n transform: translateY(0);\r\n transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),\r\n opacity 0.35s ease,\r\n border-color 0.35s ease,\r\n box-shadow 0.35s ease;\r\n opacity: 0.85;\r\n box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);\r\n flex-shrink: 0;\r\n will-change: transform, box-shadow;\r\n }\r\n\r\n .thumb-bg {\r\n position: absolute;\r\n inset: 0;\r\n background-size: cover;\r\n background-position: center;\r\n transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);\r\n z-index: 1;\r\n }\r\n\r\n .thumb-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.45) 100%);\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n\r\n .thumb-card:hover {\r\n opacity: 0.95;\r\n transform: translateY(-4px);\r\n border-color: rgba(0, 0, 0, 0.12);\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);\r\n }\r\n\r\n .thumb-card:hover .thumb-bg {\r\n transform: scale(1.08);\r\n }\r\n\r\n .thumb-card.active {\r\n opacity: 1;\r\n transform: translateY(-6px);\r\n border: 1px solid #2563eb;\r\n box-shadow:\r\n 0 10px 24px rgba(0, 0, 0, 0.08),\r\n 0 0 16px rgba(37, 99, 235, 0.2);\r\n }\r\n\r\n .thumb-content {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 10px;\r\n z-index: 4;\r\n pointer-events: none;\r\n }\r\n\r\n .thumb-tag {\r\n font-size: 9.5px;\r\n color: #64d2ff;\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n display: block;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n .thumb-card.active .thumb-tag {\r\n color: #ffffff;\r\n }\r\n\r\n .thumb-title {\r\n font-size: 10.5px;\r\n line-height: 1.3;\r\n color: #ffffff;\r\n font-weight: 500;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .thumb-progress {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 0%;\r\n height: 3px;\r\n background: linear-gradient(90deg, #2563eb 0%, #5ac8fa 100%);\r\n z-index: 5;\r\n box-shadow: 0 1px 6px rgba(37, 99, 235, 0.5);\r\n }\r\n\r\n \/* ========== \u79fb\u52a8\u7aef\u6837\u5f0f ========== *\/\r\n @media (max-width: 768px) {\r\n .hero-container {\r\n height: auto;\r\n aspect-ratio: 16 \/ 10;\r\n border-radius: 16px;\r\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n .bg-blur-layer {\r\n display: none !important;\r\n }\r\n\r\n .bg-full-layer {\r\n background-size: cover;\r\n background-position: center;\r\n animation: mobileZoom 12s ease-in-out infinite alternate;\r\n }\r\n\r\n .bg-item::after {\r\n background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);\r\n }\r\n\r\n .bg-item:not(.active) .bg-full-layer {\r\n animation-play-state: paused;\r\n }\r\n\r\n @keyframes mobileZoom {\r\n 0% { transform: scale(1); }\r\n 100% { transform: scale(1.08); }\r\n }\r\n\r\n \/* \u4ecb\u7ecd\u5361\u7247\uff1a\u56fa\u5b9a\u5bbd\u5ea6\uff0c\u6c34\u5e73\u5c45\u4e2d *\/\r\n .hero-main-content {\r\n position: absolute;\r\n bottom: 12px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 340px;\r\n max-width: calc(100% - 20px);\r\n padding: 10px 14px;\r\n background: rgba(255, 255, 255, 0.82);\r\n backdrop-filter: blur(16px) saturate(160%);\r\n -webkit-backdrop-filter: blur(16px) saturate(160%);\r\n border-radius: 14px;\r\n border: 1px solid rgba(255, 255, 255, 0.95);\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .main-text-group {\r\n flex: 1;\r\n min-width: 0;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .main-tag-wrapper {\r\n margin: 0 0 2px 0;\r\n padding: 0;\r\n line-height: 1;\r\n display: flex;\r\n }\r\n\r\n .main-tag {\r\n font-size: 8px;\r\n padding: 2px 6px;\r\n line-height: 1.1;\r\n background: #2563eb;\r\n border-radius: 10px;\r\n color: #ffffff;\r\n box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);\r\n }\r\n\r\n .main-title-wrapper {\r\n width: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n line-height: 1.1 !important;\r\n }\r\n\r\n .main-title-wrapper.has-marquee {\r\n mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);\r\n -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);\r\n }\r\n\r\n .main-title {\r\n font-size: 11px;\r\n line-height: 1.15 !important;\r\n margin: 0;\r\n padding: 0;\r\n display: inline-block;\r\n white-space: nowrap;\r\n text-overflow: clip;\r\n overflow: visible;\r\n text-shadow: none;\r\n color: #111827;\r\n }\r\n\r\n .marquee-active {\r\n display: inline-flex !important;\r\n will-change: transform;\r\n animation: marqueeScroll 12s linear infinite;\r\n }\r\n\r\n .marquee-active span {\r\n margin-right: 28px;\r\n }\r\n\r\n .hero-main-content:active .marquee-active {\r\n animation-play-state: paused;\r\n }\r\n\r\n @keyframes marqueeScroll {\r\n 0% { transform: translateX(0%); }\r\n 100% { transform: translateX(-50%); }\r\n }\r\n\r\n .main-desc {\r\n display: none !important;\r\n }\r\n\r\n .btn-watch {\r\n padding: 5px 10px;\r\n font-size: 9px;\r\n border-radius: 14px;\r\n background: #2563eb;\r\n box-shadow: 0 3px 8px rgba(37, 99, 235, 0.4);\r\n border: none;\r\n color: #ffffff;\r\n }\r\n\r\n .btn-watch svg {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n\r\n .btn-watch:hover,\r\n .btn-watch:focus,\r\n .btn-watch:active {\r\n background: #1d4ed8;\r\n color: #ffffff;\r\n transform: translateY(-1px);\r\n }\r\n\r\n \/* \u7f29\u7565\u56fe\u5bb9\u5668\uff1a\u4e0e\u5927\u56fe\u8ddd\u79bb\u7f29\u5c0f *\/\r\n .hero-thumbnails {\r\n position: static;\r\n width: 100%;\r\n max-width: none;\r\n margin: 6px 0 0 0;\r\n padding: 6px 12px 8px;\r\n gap: 8px;\r\n mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);\r\n -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);\r\n overflow-x: auto;\r\n overflow-y: visible;\r\n z-index: auto;\r\n }\r\n\r\n \/* \u5c0f\u5361\u7247\u6d6e\u73b0\u52a8\u753b *\/\r\n .thumb-card {\r\n min-width: 84px;\r\n height: 56px;\r\n border-radius: 10px;\r\n border: 1px solid rgba(0, 0, 0, 0.06);\r\n opacity: 0.85;\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);\r\n transform: translateY(0);\r\n transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),\r\n opacity 0.3s ease,\r\n border-color 0.3s ease,\r\n box-shadow 0.3s ease;\r\n will-change: transform;\r\n background-color: #ffffff;\r\n animation: thumbFloatIn 0.4s ease-out backwards;\r\n }\r\n\r\n @keyframes thumbFloatIn {\r\n 0% { opacity: 0; transform: translateY(15px); }\r\n 100% { opacity: 0.85; transform: translateY(0); }\r\n }\r\n\r\n .thumb-card.active {\r\n opacity: 1;\r\n transform: translateY(-2px);\r\n border: 1px solid #2563eb;\r\n box-shadow:\r\n 0 4px 12px rgba(0, 0, 0, 0.06),\r\n 0 0 10px rgba(37, 99, 235, 0.25);\r\n }\r\n\r\n .thumb-content {\r\n padding: 0 4px 4px 4px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n }\r\n\r\n .thumb-tag {\r\n display: none !important;\r\n }\r\n\r\n .thumb-title {\r\n font-size: 9.5px;\r\n line-height: 1.2;\r\n display: block;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n margin: 0;\r\n color: #ffffff;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);\r\n }\r\n\r\n .thumb-progress {\r\n height: 2px;\r\n background: linear-gradient(90deg, #2563eb 0%, #5ac8fa 100%);\r\n box-shadow: 0 1px 4px rgba(37, 99, 235, 0.5);\r\n }\r\n }\r\n\r\n @media (min-width: 769px) and (max-width: 1024px) {\r\n .hero-main-content {\r\n width: 360px;\r\n left: 3%;\r\n bottom: 100px;\r\n }\r\n\r\n .hero-thumbnails {\r\n max-width: 55%;\r\n right: 3%;\r\n bottom: 15px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"hero-container\" id=\"heroContainer\">\r\n <div class=\"hero-bg-slider\" id=\"bgSlider\"><\/div>\r\n\r\n <div class=\"hero-main-content\">\r\n <div class=\"main-text-group\">\r\n <div class=\"main-tag-wrapper\">\r\n <span class=\"main-tag\" id=\"mainTag\">--<\/span>\r\n <\/div>\r\n <div class=\"main-title-wrapper\" id=\"titleWrapper\">\r\n <h1 class=\"main-title\" id=\"mainTitle\">--<\/h1>\r\n <\/div>\r\n <p class=\"main-desc\" id=\"mainDesc\">--<\/p>\r\n <\/div>\r\n <a href=\"#\" class=\"btn-watch\" id=\"mainBtn\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\r\n \u9ede\u64ca\u89c0\u770b\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"hero-thumbnails\" id=\"thumbContainer\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n const slidesData = [\r\n {\r\n tag: \"TVB \u8a2a\u8ac7\",\r\n title: \"\u300a\u5927\u7063\u5340\u5927\u672a\u4f86\u300b\u8a2a\u554f\uff1a\u6df1\u6e2f\u5275\u79d1\u878d\u5408\u8207\u9752\u5e74\u5275\u696d\",\r\n desc: \"\u5c08\u8a2a\u6e2f\u5340\u4eba\u5927\u4ee3\u8868\u51bc\u6f22\u5ef8\uff0c\u63a2\u8a0e\u7cb5\u6e2f\u6fb3\u5927\u7063\u5340\u79d1\u6280\u5275\u65b0\u5408\u4f5c\u8207\u6df1\u6e2f\u9752\u5e74\u5275\u696d\u65b0\u6a5f\u9047\u3002\",\r\n bgImage: \"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2025\/05\/wechat_2025-05-01_144807_378-e1753242579634.png\",\r\n link: \"https:\/\/www.bilibili.com\/video\/BV1z8411i73E\/?vd_source=d657d4b07b71a890e3ee44fa9b8b576e\"\r\n },\r\n {\r\n tag: \"\u93e1\u5831\u5c08\u8a2a\",\r\n title: \"\u51bc\u6f22\u8fea\uff1a\u9999\u6e2f AI \u7522\u696d\u7684\u63a8\u52d5\u8005\",\r\n desc: \"\u805a\u7126\u9999\u6e2f\u4eba\u5de5\u667a\u80fd\u751f\u614b\u5efa\u8a2d\uff0c\u52a0\u901f\u5efa\u8a2d\u6578\u78bc\u6e2f\u8d85\u7b97\u4e2d\u5fc3\u8207\u63a8\u52d5\u300c\u4eba\u5de5\u667a\u80fd+\u300d\u7522\u696d\u843d\u5730\u3002\",\r\n bgImage: \"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/640-e1776671683527.png\",\r\n link: \"https:\/\/mp.weixin.qq.com\/s\/WuA6VCftbbTsgzzTpcADNQ\"\r\n },\r\n {\r\n tag: \"\u5357\u65b9\u8ca1\u7d93\",\r\n title: \"\u5c08\u8a2a\u6e2f\u5340\u5168\u570b\u4eba\u5927\u4ee3\u8868\u51bc\u6f22\u5ef8\uff1a\u9999\u6e2f\u61c9\u4e3b\u52d5\u5c0d\u63a5\u570b\u5bb6\u300c\u5341\u4e94\u4e94\u300d\u898f\u5283\",\r\n desc: \"\u6df1\u5316\u6cb3\u5957\u5408\u4f5c\u5340\u7acb\u6cd5\u8207\u6df1\u6e2f\u79d1\u6280\u5275\u65b0\u5408\u4f5c\uff0c\u63a8\u52d5\u300c\u4e00\u7dda\u653e\u958b\u3001\u4e8c\u7dda\u7ba1\u4f4f\u300d\u9ad8\u6548\u76e3\u7ba1\u6a21\u5f0f\u3002\",\r\n bgImage: \"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-04-20_154444_693-e1776671751427.png\",\r\n link: \"https:\/\/baijiahao.baidu.com\/s?id=1858639502214334332&wfr=spider&for=pc\"\r\n },\r\n {\r\n tag: \"\u5927\u516c\u6587\u532f\",\r\n title: \"\u5927\u6587\u6703\u5ba2\u5ef3\uff5c\u9999\u6e2f\u5982\u4f55\u767c\u5c55\u300c\u4eba\u5de5\u667a\u80fd+\u300d\uff1f\u5c0b\u6c42\u8207\u570b\u5bb6\u9577\u9060\u898f\u5283\u7d50\u5408\u9ede\",\r\n desc: \"\u63d0\u51fa\u6d59\u6e2f\u5408\u4f5c\u7d44\u300c\u806f\u5408\u7403\u968a\u300d\uff0c\u767c\u63ee\u9999\u6e2f\u570b\u969b\u5316\u512a\u52e2\uff0c\u4fc3\u9032\u4e2d\u570b\u786c\u79d1\u6280\u4f01\u696d\u9ad8\u8cea\u91cf\u300c\u8d70\u51fa\u53bb\u300d\u3002\",\r\n bgImage: \"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2025\/03\/wechat_2025-03-31_102956_215-e1786604555402.png\",\r\n link: \"https:\/\/www.tkww.hk\/a\/202503\/12\/AP67d17287e4b04111a4af307b.html\"\r\n },\r\n {\r\n tag: \"\u6df1\u5733\u885b\u8996\",\r\n title: \"\u300a\u904e\u6cb3\u8a18\u300b\u7b2c\u4e03\u96c6\uff1a\u5728\u7f8e\u570b\u4e0a\u5e02\u7684\u4e2d\u6982\u80a1\u70ba\u4f55\u9078\u64c7\u56de\u6d41\u6e2f\u80a1\uff1f\",\r\n desc: \"\u4ee5\u4e2d\u624b\u6e38\u7b49\u4f01\u696d\u79c1\u6709\u5316\u53ca\u6e2f\u80a1\u4e0a\u5e02\u70ba\u4f8b\uff0c\u89e3\u6790\u7f8e\u80a1\u56de\u6d41\u6e2f\u80a1\u5148\u92d2\u80cc\u5f8c\u7684\u6df1\u6e2f\u8cc7\u672c\u52d5\u5411\u3002\",\r\n bgImage: \"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2025\/07\/\u5fae\u4fe1\u56fe\u7247_2025-03-31_120246_721-e1753239706408.png\",\r\n link: \"https:\/\/mp.weixin.qq.com\/s\/7iRC4qs_mhpHVy5E6by_RQ\"\r\n },\r\n {\r\n tag: \"\u5ee3\u5dde\u96fb\u8996\u53f0\",\r\n title: \"25\u5e74\u00b725\u4eba\uff5c\u51bc\u6f22\u5ef8\uff1a\u5728\u7063\u5340\u878d\u5408\u9ad4\u73fe\u7345\u5b50\u5c71\u7cbe\u795e\",\r\n desc: \"\u5f9e\u6295\u884c\u7cbe\u82f1\u5230\u5927\u7063\u5340\u5275\u79d1\u5f15\u9818\u8005\uff0c\u8b1b\u8ff0\u5728\u5927\u7063\u5340\u6f6e\u982d\u6d6a\u5c16\u62fc\u640f\u5275\u696d\u7684\u7345\u5b50\u5c71\u7cbe\u795e\u6545\u4e8b\u3002\",\r\n bgImage: \"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2025\/07\/\u5fae\u4fe1\u56fe\u7247_2025-07-23_111054_722-1-e1753241650929.png\",\r\n link: \"https:\/\/w.yangshipin.cn\/video?type=0&vid=j000092ve4k\"\r\n },\r\n {\r\n tag: \"\u6df1\u5733\u5831\u696d\",\r\n title: \"\u51bc\u6f22\u5ef8\uff1a\u7063\u5340\u904a\u6232\u738b\uff0c\u6253\u9020\u624b\u904a\u9818\u8ecd\u4f01\u696d\",\r\n desc: \"\u5275\u7acb\u4e2d\u570b\u9996\u5bb6\u5883\u5916\u4e0a\u5e02\u624b\u904a\u516c\u53f8\u4e2d\u624b\u6e38\uff0c\u63a8\u52d5\u904a\u6232\u79d1\u6280\u8207\u6587\u5316\u51fa\u6d77\u767c\u5c55\u3002\",\r\n bgImage: \"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2025\/07\/wechat_2025-03-31_105721_658-1.png\",\r\n link: \"https:\/\/mp.weixin.qq.com\/s\/1x7WYumYykIO7wVreYfIEw\"\r\n },\r\n {\r\n tag: \"\u5927\u516c\u6587\u532f\",\r\n title: \"\u5927\u6587\u6703\u5ba2\u5ef3\uff5c\u6d59\u6e2f\u5408\u4f5c\u6709\u672a\u4f86\uff0c\u53ef\u7d44\u300c\u806f\u5408\u7403\u968a\u300d\u4fc3\u4e2d\u570b\u5275\u79d1\u300c\u8d70\u51fa\u53bb\u300d\",\r\n desc: \"\u4fc3\u9032\u6d59\u6c5f\u5f37\u52c1\u7684\u786c\u79d1\u6280\u88fd\u9020\u529b\u8207\u9999\u6e2f\u570b\u969b\u91d1\u878d\u53ca\u5c08\u696d\u670d\u52d9\u7d50\u5408\uff0c\u5171\u62d3\u6d77\u5916\u65b0\u5e02\u5834\u3002\",\r\n bgImage: \"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/03\/ScreenShot_2026-03-20_165826_903-e1776669516449.png\",\r\n link: \"https:\/\/www.tkww.hk\/a\/202603\/10\/AP69afa0cde4b04773b06a0cd6.html\"\r\n },\r\n {\r\n tag: \"TVB \u5c08\u8a2a\",\r\n title: \"\u96d9\u57ce\u8a18\u00b7\u6211\u54cb\u5728\u6df1\u5733\u2460\uff5c\u51bc\u6f22\u5ef8\uff1a\u653e\u68c4\u5343\u842c\u5e74\u85aa\u7684\u6df1\u5733\u8ffd\u5922\u4eba\",\r\n desc: \"1997\u5e74\u56de\u6b78\u7956\u570b\uff0c\u653e\u68c4\u6295\u884c\u5343\u842c\u9ad8\u85aa\u8d74\u6df1\u5733\u5275\u696d\uff0c\u6210\u70ba\u6df1\u6e2f\u5408\u4f5c\u5275\u696d\u7684\u5148\u884c\u4ee3\u8868\u3002\",\r\n bgImage: \"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2025\/07\/wechat_2025-03-31_104448_412-1.png\",\r\n link: \"https:\/\/mp.weixin.qq.com\/s\/s6rsdo-cfhkH1KCTnfEOTQ\"\r\n }\r\n ];\r\n\r\n let currentIndex = 0;\r\n const duration = 5000;\r\n let progressAnim = null;\r\n let isHovering = false;\r\n let progressStartTime = null;\r\n let pausedElapsed = 0;\r\n let resizeDebounceTimer = null;\r\n\r\n const bgSlider = document.getElementById('bgSlider');\r\n const thumbContainer = document.getElementById('thumbContainer');\r\n const mainTag = document.getElementById('mainTag');\r\n const titleWrapper = document.getElementById('titleWrapper');\r\n const mainDesc = document.getElementById('mainDesc');\r\n const mainBtn = document.getElementById('mainBtn');\r\n const heroContainer = document.getElementById('heroContainer');\r\n let mainTitle = document.getElementById('mainTitle');\r\n\r\n function applyResponsiveLayout() {\r\n const isMobile = window.innerWidth <= 768;\r\n const thumbnails = document.querySelector('.hero-thumbnails');\r\n\r\n if (isMobile && !heroContainer.classList.contains('mobile-layout')) {\r\n heroContainer.after(thumbnails);\r\n heroContainer.classList.add('mobile-layout');\r\n } else if (!isMobile && heroContainer.classList.contains('mobile-layout')) {\r\n heroContainer.appendChild(thumbnails);\r\n heroContainer.classList.remove('mobile-layout');\r\n }\r\n }\r\n\r\n function init() {\r\n applyResponsiveLayout();\r\n\r\n slidesData.forEach((item, index) => {\r\n const bgImg = item.bgImage;\r\n\r\n const bg = document.createElement('div');\r\n bg.classList.add('bg-item');\r\n\r\n const blurLayer = document.createElement('div');\r\n blurLayer.classList.add('bg-blur-layer');\r\n blurLayer.style.backgroundImage = `url('${bgImg}')`;\r\n\r\n const fullLayer = document.createElement('div');\r\n fullLayer.classList.add('bg-full-layer');\r\n fullLayer.style.backgroundImage = `url('${bgImg}')`;\r\n\r\n bg.appendChild(blurLayer);\r\n bg.appendChild(fullLayer);\r\n bgSlider.appendChild(bg);\r\n\r\n const thumb = document.createElement('div');\r\n thumb.classList.add('thumb-card');\r\n thumb.style.animationDelay = `${index * 0.05}s`;\r\n thumb.innerHTML = `\r\n <div class=\"thumb-bg\" style=\"background-image: url('${bgImg}');\"><\/div>\r\n <div class=\"thumb-overlay\"><\/div>\r\n <div class=\"thumb-progress\"><\/div>\r\n <div class=\"thumb-content\">\r\n <span class=\"thumb-tag\">${item.tag}<\/span>\r\n <h4 class=\"thumb-title\">${item.title}<\/h4>\r\n <\/div>\r\n `;\r\n\r\n thumb.addEventListener('click', () => switchSlide(index));\r\n thumbContainer.appendChild(thumb);\r\n });\r\n\r\n switchSlide(0);\r\n }\r\n\r\n function switchSlide(index) {\r\n currentIndex = index;\r\n const data = slidesData[index];\r\n\r\n mainTag.innerText = data.tag;\r\n mainDesc.innerText = data.desc;\r\n mainBtn.href = data.link;\r\n\r\n renderMarqueeTitle(data.title);\r\n\r\n const bgs = document.querySelectorAll('.bg-item');\r\n bgs.forEach((bg, idx) => {\r\n bg.classList.toggle('active', idx === index);\r\n });\r\n\r\n const thumbs = document.querySelectorAll('.thumb-card');\r\n thumbs.forEach((thumb, idx) => {\r\n const isActive = idx === index;\r\n thumb.classList.toggle('active', isActive);\r\n if (isActive) {\r\n const containerStyle = getComputedStyle(thumbContainer);\r\n const containerPaddingLeft = parseFloat(containerStyle.paddingLeft) || 0;\r\n const containerLeft = thumbContainer.getBoundingClientRect().left + containerPaddingLeft;\r\n const thumbLeft = thumb.getBoundingClientRect().left;\r\n const scrollOffset = thumbLeft - containerLeft - (thumbContainer.clientWidth \/ 2) + (thumb.clientWidth \/ 2);\r\n\r\n thumbContainer.scrollBy({\r\n left: scrollOffset,\r\n behavior: 'smooth'\r\n });\r\n }\r\n });\r\n\r\n thumbs.forEach((t, i) => {\r\n const bar = t.querySelector('.thumb-progress');\r\n if (i !== currentIndex) {\r\n bar.style.width = '0%';\r\n }\r\n });\r\n\r\n pausedElapsed = 0;\r\n\r\n if (!isHovering) {\r\n startProgress();\r\n } else {\r\n if (progressAnim) cancelAnimationFrame(progressAnim);\r\n }\r\n }\r\n\r\n function renderMarqueeTitle(text) {\r\n titleWrapper.innerHTML = '';\r\n titleWrapper.classList.remove('has-marquee');\r\n\r\n const titleEl = document.createElement('h1');\r\n titleEl.className = 'main-title';\r\n titleEl.id = 'mainTitle';\r\n titleEl.innerText = text;\r\n titleWrapper.appendChild(titleEl);\r\n\r\n mainTitle = titleEl;\r\n\r\n if (window.innerWidth <= 768) {\r\n const containerWidth = titleWrapper.clientWidth;\r\n const textWidth = titleEl.scrollWidth;\r\n\r\n if (textWidth > containerWidth) {\r\n titleEl.classList.add('marquee-active');\r\n titleEl.innerHTML = `<span>${text}<\/span><span>${text}<\/span>`;\r\n titleWrapper.classList.add('has-marquee');\r\n\r\n const speed = 18;\r\n const singleUnitWidth = textWidth + 28;\r\n const maxDuration = 6;\r\n const rawDuration = singleUnitWidth \/ speed;\r\n const animDuration = Math.min(Math.max(4, rawDuration), maxDuration);\r\n titleEl.style.animationDuration = `${animDuration}s`;\r\n }\r\n }\r\n }\r\n\r\n function startProgress() {\r\n if (isHovering) return;\r\n\r\n if (progressAnim) cancelAnimationFrame(progressAnim);\r\n\r\n const now = performance.now();\r\n progressStartTime = now - pausedElapsed;\r\n pausedElapsed = 0;\r\n\r\n const thumbs = document.querySelectorAll('.thumb-card');\r\n const currentBar = thumbs[currentIndex].querySelector('.thumb-progress');\r\n\r\n function step(timestamp) {\r\n const elapsed = timestamp - progressStartTime;\r\n const pct = Math.min((elapsed \/ duration) * 100, 100);\r\n currentBar.style.width = pct + '%';\r\n\r\n if (elapsed < duration) {\r\n progressAnim = requestAnimationFrame(step);\r\n } else {\r\n nextSlide();\r\n }\r\n }\r\n\r\n progressAnim = requestAnimationFrame(step);\r\n }\r\n\r\n function nextSlide() {\r\n let next = (currentIndex + 1) % slidesData.length;\r\n switchSlide(next);\r\n }\r\n\r\n heroContainer.addEventListener('mouseenter', () => {\r\n isHovering = true;\r\n if (progressStartTime !== null && progressAnim !== null) {\r\n pausedElapsed = performance.now() - progressStartTime;\r\n }\r\n if (progressAnim) cancelAnimationFrame(progressAnim);\r\n });\r\n\r\n heroContainer.addEventListener('mouseleave', () => {\r\n isHovering = false;\r\n startProgress();\r\n });\r\n\r\n window.addEventListener('resize', () => {\r\n clearTimeout(resizeDebounceTimer);\r\n resizeDebounceTimer = setTimeout(() => {\r\n applyResponsiveLayout();\r\n renderMarqueeTitle(slidesData[currentIndex].title);\r\n }, 150);\r\n });\r\n\r\n init();\r\n <\/script>\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-b97378d e-con-full e-flex e-con e-parent\" data-id=\"b97378d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37c1771 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"37c1771\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Apple \u98a8\u683c\u591a\u5361\u7247\u5c55\u793a\u5340\uff08\u6d45\u8272\u73bb\u7483\u98ce\u683c\u4f18\u5316\u7248\uff09 -->\r\n<style>\r\n :root {\r\n \/* --- \u96fb\u8166\u7aef (Desktop) --- *\/\r\n --dt-tag-size: 11px;\r\n --dt-title-size: 20px;\r\n --dt-desc-size: 13px;\r\n --dt-desc-line-height: 1.5;\r\n\r\n \/* --- \u79fb\u52d5\u7aef (Mobile) --- *\/\r\n --mb-tag-size: 10px;\r\n --mb-title-size: 17px;\r\n --mb-desc-size: 12px;\r\n --mb-desc-line-height: 1.45;\r\n }\r\n\r\n \/* \u9632\u6b62\u9801\u9762\u56e0 100vw \u7522\u751f\u6a6b\u5411\u6ea2\u51fa *\/\r\n body {\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* 1. \u5168\u5c40\u5bb9\u5668 *\/\r\n .apple-multi-section {\r\n width: 100vw;\r\n margin-left: calc(50% - 50vw);\r\n margin-right: calc(50% - 50vw);\r\n position: relative;\r\n left: auto;\r\n right: auto;\r\n margin-top: 30px;\r\n margin-bottom: 30px;\r\n box-sizing: border-box;\r\n font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n overflow: hidden;\r\n }\r\n\r\n \/* 2. \u96fb\u8166\u7aef\u5de6\u53f3\u61f8\u6d6e\u6309\u9215\uff08\u6d45\u8272\u73bb\u7483\u98ce\u683c\uff09 *\/\r\n .apple-nav-btn {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n z-index: 25;\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.75) !important;\r\n backdrop-filter: blur(20px) saturate(180%);\r\n -webkit-backdrop-filter: blur(20px) saturate(180%);\r\n border: 1px solid rgba(255, 255, 255, 0.95) !important;\r\n color: #111827 !important;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\r\n transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\r\n \r\n outline: none !important;\r\n -webkit-tap-highlight-color: transparent !important;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n padding: 0;\r\n }\r\n\r\n .apple-nav-btn svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: none;\r\n stroke: #111827;\r\n stroke-width: 2.5;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n transition: transform 0.2s ease;\r\n }\r\n\r\n .apple-nav-btn:hover {\r\n background: #ffffff !important;\r\n transform: translateY(-50%) scale(1.08);\r\n border-color: rgba(255, 255, 255, 1) !important;\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .apple-nav-btn:hover svg {\r\n stroke: #2563eb;\r\n }\r\n\r\n .apple-nav-btn:focus,\r\n .apple-nav-btn:active,\r\n .apple-nav-btn:focus-visible {\r\n outline: none !important;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;\r\n background: rgba(255, 255, 255, 0.9) !important;\r\n }\r\n\r\n .apple-nav-btn.prev:hover svg {\r\n transform: translateX(-2px);\r\n }\r\n\r\n .apple-nav-btn.next:hover svg {\r\n transform: translateX(2px);\r\n }\r\n\r\n .apple-nav-btn.prev {\r\n left: max(20px, calc((100vw - 1200px) \/ 2 - 24px));\r\n opacity: 0;\r\n visibility: hidden;\r\n pointer-events: none;\r\n }\r\n\r\n .apple-nav-btn.next {\r\n right: max(20px, calc((100vw - 1200px) \/ 2 - 24px));\r\n }\r\n\r\n .apple-nav-btn.is-active {\r\n opacity: 1;\r\n visibility: visible;\r\n pointer-events: auto;\r\n }\r\n\r\n \/* 3. \u591a\u5361\u7247\u6a6b\u5411\u6efe\u52d5\u8ecc\u9053 *\/\r\n .apple-card-track {\r\n display: flex;\r\n gap: 20px;\r\n overflow-x: auto;\r\n scroll-behavior: smooth;\r\n padding-top: 10px;\r\n padding-bottom: 20px;\r\n padding-left: max(22px, calc((100vw - 1200px) \/ 2));\r\n padding-right: max(22px, calc((100vw - 1200px) \/ 2));\r\n \r\n -webkit-overflow-scrolling: touch;\r\n scrollbar-width: none;\r\n -ms-overflow-style: none;\r\n \r\n will-change: scroll-position;\r\n transform: translateZ(0);\r\n }\r\n\r\n .apple-card-track::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n \/* 4. \u55ae\u5f35\u5927\u5361\u7247\uff08\u80cc\u666f\u56fe\u4fdd\u7559\uff0c\u65e0\u906e\u7f69\uff09 *\/\r\n .apple-card-item {\r\n flex: 0 0 380px;\r\n height: 480px;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n position: relative;\r\n background-size: cover !important;\r\n background-position: center center !important;\r\n background-repeat: no-repeat !important;\r\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);\r\n box-sizing: border-box;\r\n padding: 24px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n \r\n -webkit-backface-visibility: hidden;\r\n backface-visibility: hidden;\r\n transform: translateZ(0);\r\n }\r\n\r\n \/* 5. \u5361\u7247\u5167\u7684\u767d\u8272\u6bdb\u73bb\u7483\u6587\u5b57\u6846\uff08\u5de6\u53f3\u5c0d\u9f4a\uff09 *\/\r\n .apple-card-glass {\r\n background: rgba(255, 255, 255, 0.75);\r\n backdrop-filter: blur(20px) saturate(180%);\r\n -webkit-backdrop-filter: blur(20px) saturate(180%);\r\n border: 1px solid rgba(255, 255, 255, 0.95);\r\n border-radius: 18px;\r\n padding: 18px;\r\n color: #111827;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\r\n text-align: justify;\r\n text-justify: inter-ideograph;\r\n max-height: 100%;\r\n overflow-y: auto;\r\n min-height: 0;\r\n }\r\n\r\n .apple-card-tag {\r\n font-size: var(--dt-tag-size);\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: #2563eb;\r\n margin-bottom: 6px;\r\n text-align: left;\r\n }\r\n\r\n .apple-card-title {\r\n font-size: var(--dt-title-size);\r\n font-weight: 600;\r\n line-height: 1.25;\r\n color: #111827;\r\n margin-bottom: 8px;\r\n text-align: left;\r\n }\r\n\r\n .apple-card-desc {\r\n font-size: var(--dt-desc-size);\r\n line-height: var(--dt-desc-line-height);\r\n color: #4b5563;\r\n text-align: justify;\r\n text-justify: inter-ideograph;\r\n }\r\n\r\n .apple-card-desc p {\r\n margin: 0 0 6px 0;\r\n text-align: justify;\r\n text-justify: inter-ideograph;\r\n }\r\n\r\n .apple-card-desc p:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* 6. Apple \u98a8\u683c\u300c\u81a0\u56ca\u578b\u300d\u6ed1\u52d5\u5f15\u5c0e\u6a19\u7c64\uff08\u6d45\u8272\u73bb\u7483\uff09 *\/\r\n .apple-swipe-pill {\r\n display: none;\r\n position: absolute;\r\n top: 10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 10;\r\n background: rgba(255, 255, 255, 0.85);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.95);\r\n border-radius: 30px;\r\n padding: 6px 16px;\r\n color: #111827;\r\n font-size: 12px;\r\n font-weight: 500;\r\n letter-spacing: 0.3px;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\r\n pointer-events: none;\r\n transition: opacity 0.4s ease, transform 0.4s ease;\r\n animation: pillPulse 2s infinite ease-in-out;\r\n }\r\n\r\n .apple-pill-arrow {\r\n display: inline-block;\r\n margin: 0 2px;\r\n opacity: 0.7;\r\n color: #2563eb;\r\n }\r\n\r\n @keyframes pillPulse {\r\n 0%, 100% { opacity: 0.9; transform: translateX(-50%) scale(1); }\r\n 50% { opacity: 1; transform: translateX(-50%) scale(1.03); }\r\n }\r\n\r\n \/* 7. \u79fb\u52d5\u7aef\u9069\u61c9 *\/\r\n @media (max-width: 768px) {\r\n .apple-multi-section {\r\n width: 100% !important;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n left: 0 !important;\r\n right: 0 !important;\r\n margin-top: 15px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .apple-swipe-pill {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n\r\n .apple-card-track {\r\n gap: 12px;\r\n padding: 0 16px 16px 16px;\r\n scroll-behavior: auto;\r\n }\r\n\r\n .apple-card-item {\r\n flex: 0 0 84vw;\r\n height: 400px;\r\n border-radius: 20px;\r\n padding: 16px;\r\n }\r\n\r\n .apple-card-tag {\r\n font-size: var(--mb-tag-size);\r\n }\r\n\r\n .apple-card-title {\r\n font-size: var(--mb-title-size);\r\n }\r\n\r\n .apple-card-desc {\r\n font-size: var(--mb-desc-size);\r\n line-height: var(--mb-desc-line-height);\r\n }\r\n \r\n .apple-nav-btn {\r\n display: none !important;\r\n }\r\n }\r\n<\/style>\r\n\r\n<div class=\"apple-multi-section\">\r\n <!-- \u79fb\u52d5\u7aef\u81a0\u56ca\u6ed1\u52d5\u63d0\u793a -->\r\n <div class=\"apple-swipe-pill\" id=\"swipePill\">\r\n <span class=\"apple-pill-arrow\">\u2039<\/span>\r\n <span>\u6ed1\u52d5\u4e86\u89e3\u66f4\u591a<\/span>\r\n <span class=\"apple-pill-arrow\">\u203a<\/span>\r\n <\/div>\r\n\r\n <!-- \u96fb\u8166\u7aef\u5de6\u53f3\u61f8\u6d6e\u5207\u63db\u6309\u9215 -->\r\n <button type=\"button\" class=\"apple-nav-btn prev\" id=\"prevBtn\" onclick=\"scrollTrack(-1)\" aria-label=\"\u4e0a\u4e00\u9801\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\r\n <\/button>\r\n <button type=\"button\" class=\"apple-nav-btn next is-active\" id=\"nextBtn\" onclick=\"scrollTrack(1)\" aria-label=\"\u4e0b\u4e00\u9801\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n <\/button>\r\n\r\n <!-- \u591a\u5361\u7247\u6a6b\u5411\u6efe\u52d5\u8ecc\u9053 -->\r\n <div class=\"apple-card-track\" id=\"appleTrack\">\r\n \r\n <!-- \u5361\u7247 1 -->\r\n <div class=\"apple-card-item\" style=\"background-image: url('https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/08\/bjt.png');\">\r\n <div class=\"apple-card-glass\">\r\n <div class=\"apple-card-tag\">PROFILE<\/div>\r\n <div class=\"apple-card-title\">\u6d17\u6f22\u8fea, MH, JP<\/div>\r\n <div class=\"apple-card-desc\">\r\n <p><strong>\u6e2f\u5340\u5168\u570b\u4eba\u5927\u4ee3\u8868<\/strong><br>\u7cb5\u6e2f\u6fb3\u5927\u7063\u5340\u4f01\u696d\u5bb6\u53ca\u5929\u4f7f\u6295\u8cc7\u4eba<\/p>\r\n <p>\u65af\u5766\u798f\u5927\u5b78\u5de5\u7a0b\u7d93\u6fdf\u53ca\u904b\u7c4c\u5b78\u78a9\u58eb\u5b78\u4f4d\uff1b\u5361\u5167\u57fa\u6885\u9686\u5927\u5b78\u8a08\u7b97\u6a5f\u79d1\u5b78 \/ \u6578\u5b78\u3001\u7d93\u6fdf\u5b78\u3001\u5de5\u5546\u7ba1\u7406\u5c08\u696d\u4e09\u500b\u5b78\u58eb\u5b78\u4f4d\u3002<\/p>\r\n <p>1997 \u5e74\u9999\u6e2f\u56de\u6b78\u7956\u570b\u6642\u6b78\u6e2f\uff0c\u5728\u8457\u540d\u570b\u969b\u6295\u8cc7\u9280\u884c\u5de5\u4f5c 12 \u5e74\uff0c\u5354\u52a9\u591a\u5bb6\u570b\u4f01\u53ca\u5927\u578b\u6c11\u4f01\u5728\u6e2f\u4e0a\u5e02\u30022009 \u5e74\u5275\u696d\uff0c\u5275\u7acb\u4e2d\u570b\u9996\u5bb6\u5883\u5916\u4e0a\u5e02\u7684\u624b\u6a5f\u904a\u6232\u516c\u53f8\u53ca\u7f8e\u80a1\u56de\u6b78\u6e2f\u80a1\u5148\u92d2\u4e2d\u624b\u6e38\uff08302.HK\uff09\uff1b\u5c08\u6ce8\u6295\u65e9\u3001\u6295\u5c0f\u3001\u6295\u9577\u671f\u3001\u6295\u786c\u79d1\u6280\u3001\u652f\u6301\u6df1\u6e2f\u9752\u5e74\u5275\u696d\u7684\u4e2d\u570b Top100 \u6295\u8cc7\u6a5f\u69cb\u570b\u5b8f\u5609\u4fe1\u8cc7\u672c\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u5361\u7247 2 -->\r\n <div class=\"apple-card-item\" style=\"background-image: url('https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2025\/09\/\u5fae\u4fe1\u56fe\u7247_202503071540461-scaled.jpg');\">\r\n <div class=\"apple-card-glass\">\r\n <div class=\"apple-card-tag\">NPC DELEGATE<\/div>\r\n <div class=\"apple-card-title\">\u6e2f\u5340\u5168\u570b\u4eba\u5927\u4ee3\u8868<\/div>\r\n <div class=\"apple-card-desc\">\r\n <p>\u5c65\u8077\u4ee5\u4f86\u5171\u63d0\u4ea4\u5efa\u8b7030\u4ef6\uff0c\u6db5\u84cb\u6559\u80b2\u3001\u79d1\u6280\u3001\u4eba\u624d\u3001\u6587\u65c5\u7b49\u9818\u57df\uff0c\u57fa\u672c\u90fd\u7372\u5f97\u652f\u6301\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u5361\u7247 3 -->\r\n <div class=\"apple-card-item\" style=\"background-image: url('https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2025\/09\/2019\u5e74\u9999\u6e2f\u4e0a\u5e02\u65e5\u6572\u949f-scaled.jpg');\">\r\n <div class=\"apple-card-glass\">\r\n <div class=\"apple-card-tag\">CO-FOUNDER<\/div>\r\n <div class=\"apple-card-title\">\u4e2d\u624b\u6e38\uff08302.HK\uff09\u806f\u5408\u5275\u59cb\u4eba<\/div>\r\n <div class=\"apple-card-desc\">\r\n <p>2009\u5e74\u5275\u7acb\u4e2d\u624b\u6e38\uff0c2012\u5e74\u7d0d\u65af\u9054\u514b\u4e0a\u5e02\uff1b\u9996\u5bb6\u6d77\u5916\u4e0a\u5e02\u624b\u904a\u516c\u53f8\uff0c2014\u5e74\u5e02\u503c\u9054\u7368\u89d2\u7378\u30022015\u5e74\u79c1\u6709\u5316\uff0c2019\u5e74\u6e2f\u80a1\u4e3b\u677f\u4e0a\u5e02\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u5361\u7247 4 -->\r\n <div class=\"apple-card-item\" style=\"background-image: url('https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/08\/ScreenShot_2026-08-12_171728_295.png');\">\r\n <div class=\"apple-card-glass\">\r\n <div class=\"apple-card-tag\">CHAIRMAN<\/div>\r\n <div class=\"apple-card-title\">\u570b\u5b8f\u5609\u4fe1\u8463\u4e8b\u9577<\/div>\r\n <div class=\"apple-card-desc\">\r\n <p>2015\u5e74\u5275\u7acb\u570b\u5b8f\u5609\u4fe1\uff0810\u5104\u898f\u6a21\u98a8\u6295\u57fa\u91d1\uff09\u30022019\u5e74\u5408\u4f5c\u6210\u7acb5\u5104\u898f\u6a21\u300c\u570b\u5b8f\u5609\u4fe1\uff08\u6df1\u5733\uff09\u5929\u4f7f\u5275\u696d\u6295\u8cc7\u57fa\u91d1\u300d\uff0c\u5c08\u6ce8\u6df1\u6e2f\u5408\u4f5c\u9805\u76ee\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u5361\u7247 5 -->\r\n <div class=\"apple-card-item\" style=\"background-image: url('https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2025\/09\/\u5fae\u4fe1\u56fe\u7247_20250911121222_1196_807.png');\">\r\n <div class=\"apple-card-glass\">\r\n <div class=\"apple-card-tag\">IPROA PRESIDENT<\/div>\r\n <div class=\"apple-card-title\">\u4e92\u806f\u7db2\u5c08\u696d\u5354\u6703\u6703\u9577<\/div>\r\n <div class=\"apple-card-desc\">\r\n <p>\u4e92\u806f\u7db2\u5c08\u696d\u5354\u6703(iProA)1999\u5e74\u6210\u7acb\uff0c8000\u4f59\u540d\u6703\u54e1\u3002\u81f4\u529b\u63a8\u52d5\u79d1\u6280\u666e\u53ca\u5316\uff0c\u7e2e\u7a84\u6578\u78bc\u9694\u819c\uff0c\u4fc3\u9032\u9999\u6e2f\u79d1\u6280\u767c\u5c55\u548c\u61c9\u7528\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n function scrollTrack(direction) {\r\n const track = document.getElementById('appleTrack');\r\n if (!track) return;\r\n\r\n const firstCard = track.querySelector('.apple-card-item');\r\n const gap = parseFloat(getComputedStyle(track).columnGap) || 20;\r\n const cardWidth = firstCard ? firstCard.getBoundingClientRect().width + gap : 400;\r\n\r\n track.scrollBy({\r\n left: cardWidth * direction,\r\n behavior: 'smooth'\r\n });\r\n }\r\n\r\n (function() {\r\n const track = document.getElementById('appleTrack');\r\n const pill = document.getElementById('swipePill');\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n let pillHidden = false;\r\n\r\n function handleScroll() {\r\n if (!track) return;\r\n \r\n const scrollLeft = track.scrollLeft;\r\n const maxScrollLeft = track.scrollWidth - track.clientWidth;\r\n\r\n if (scrollLeft > 10) {\r\n prevBtn.classList.add('is-active');\r\n } else {\r\n prevBtn.classList.remove('is-active');\r\n }\r\n\r\n if (scrollLeft < maxScrollLeft - 10) {\r\n nextBtn.classList.add('is-active');\r\n } else {\r\n nextBtn.classList.remove('is-active');\r\n }\r\n\r\n if (pill && !pillHidden && scrollLeft > 10) {\r\n pillHidden = true;\r\n pill.style.animation = 'none';\r\n pill.style.opacity = '0';\r\n pill.style.transform = 'translateX(-50%) translateY(-10px)';\r\n setTimeout(() => {\r\n pill.style.display = 'none';\r\n }, 400);\r\n }\r\n }\r\n\r\n if (track) {\r\n track.addEventListener('scroll', handleScroll, { passive: true });\r\n window.addEventListener('resize', handleScroll);\r\n handleScroll();\r\n }\r\n })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1ef1a8e e-con-full e-flex e-con e-parent\" data-id=\"1ef1a8e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b8175d elementor-widget elementor-widget-shortcode\" data-id=\"3b8175d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"> <!-- \u9632\u95ea\u70c1\u6837\u5f0f -->\r\n <style id=\"glass-instance-1-prevent-fouc\">\r\n #glass-instance-1.glass-container {\r\n opacity: 0 !important;\r\n visibility: hidden !important;\r\n max-height: 0px !important;\r\n overflow: hidden !important;\r\n transition: none !important;\r\n }\r\n <\/style>\r\n\r\n <div id=\"glass-instance-1\"\r\n class=\"glass-container\" \r\n data-taxonomy=\"post_tag\" \r\n data-is-multi=\"0\"\r\n data-enable-infinite=\"0\"\r\n data-posts-per-page=\"3\"\r\n data-current-slug=\"%e6%96%87%e7%ab%a0\"\r\n data-page=\"1\"\r\n data-max-pages=\"91\"\r\n data-nonce=\"512b99672c\">\r\n \r\n <div class=\"glass-header is-single-header\">\r\n <div class=\"header-left\">\r\n <h2 class=\"glass-title\">\u6587\u7ae0<\/h2>\r\n \r\n \r\n <div class=\"glass-stats\">\r\n \u5171 <span class=\"total-count-num\">273<\/span> \u7bc7\u5185\u5bb9\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"https:\/\/www.hendricksin.hk\/index.php\/%e6%96%87%e7%ab%a0\/\" class=\"glass-action-btn\" target=\"_blank\" rel=\"noopener\">\r\n <span>\u67e5\u770b\u66f4\u591a\u6587\u7ae0<\/span>\r\n <svg class=\"btn-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\r\n <polyline points=\"12 5 19 12 12 19\"><\/polyline>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"glass-grid posts-grid\">\r\n <a href=\"https:\/\/mp.weixin.qq.com\/s\/OJ5a1fGYMMF0_P0D2wt9OA\" class=\"post-card\" style=\"animation-delay: 0.00s !important;\">\r\n <div class=\"card-header-row\">\r\n <div class=\"card-date inline-date\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\r\n <span>2026-09-04<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h3 class=\"card-title\">\u51fa\u5e2d\u9999\u6e2f\u5f8b\u5e08\u4f1a2026\u5e74\u4f01\u4e1a\u5f8b\u5e08\u5e74\u4f1a\u4f5c\u5206\u4eab<\/h3>\r\n <p class=\"card-excerpt\"><\/p>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/mp.weixin.qq.com\/s\/JK6YnAzkWkJWLkUk6Zfe5A\" class=\"post-card\" style=\"animation-delay: 0.08s !important;\">\r\n <div class=\"card-header-row\">\r\n <div class=\"card-date inline-date\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\r\n <span>2026-08-31<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h3 class=\"card-title\">AI\u7ade\u8dd1\u5df2\u5f00\u542f \u6cbb\u7406\u8f68\u9053\u4ea6\u987b\u5b8c\u5584<\/h3>\r\n <p class=\"card-excerpt\"><\/p>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/mp.weixin.qq.com\/s\/RoEt_tZ38q41lY6dm6CEow\" class=\"post-card\" style=\"animation-delay: 0.16s !important;\">\r\n <div class=\"card-header-row\">\r\n <div class=\"card-date inline-date\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\r\n <span>2026-08-25<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h3 class=\"card-title\">\u5728\u9999\u6e2f\u5927\u5b66\u5de5\u7a0b\u5b66\u9662\u201c\u672a\u6765\u7814\u521b\u5bf9\u8bdd\u201d\u8bba\u575b\u6d3b\u52a8\uff0c\u6211\u8c08\u4e86\u8c08\u9999\u6e2f\u79d1\u7814\u6210\u679c\u8f6c\u5316<\/h3>\r\n <p class=\"card-excerpt\"><\/p>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <style>\r\n \/* ========== \u2728 \u65b0\u6837\u5f0f\uff1a\u900f\u660e\u80cc\u666f + \u60ac\u6d6e\u5361\u7247 ========== *\/\r\n \r\n \/* \u5bb9\u5668\u663e\u73b0\u52a8\u753b *\/\r\n .glass-container.glass-ready {\r\n opacity: 1 !important;\r\n visibility: visible !important;\r\n max-height: none !important;\r\n overflow: visible !important;\r\n transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;\r\n }\r\n \r\n \/* \r\n \u4e3b\u5bb9\u5668\uff1a\u5b8c\u5168\u900f\u660e \r\n *\/\r\n .glass-container {\r\n max-width: 1080px !important;\r\n margin: 0 auto !important;\r\n padding: 32px 0 !important;\r\n border-radius: 0 !important;\r\n background: transparent !important;\r\n backdrop-filter: none !important;\r\n -webkit-backdrop-filter: none !important;\r\n border: none !important;\r\n box-shadow: none !important;\r\n font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif !important;\r\n box-sizing: border-box !important;\r\n float: none !important;\r\n position: relative !important;\r\n clear: both !important;\r\n }\r\n\r\n .glass-container *, .glass-container *::before, .glass-container *::after { box-sizing: border-box !important; }\r\n \r\n .glass-container a, \r\n .glass-container a:hover, \r\n .glass-container a:focus, \r\n .glass-container a:focus-visible, \r\n .glass-container a:active { \r\n text-decoration: none !important; \r\n outline: none !important; \r\n outline-offset: 0 !important;\r\n -webkit-tap-highlight-color: transparent !important;\r\n }\r\n\r\n \/* \u5934\u90e8\u5e03\u5c40 *\/\r\n .glass-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 28px !important; flex-wrap: wrap !important; gap: 14px !important; border: none !important; background: none !important; padding: 0 16px !important; }\r\n .header-left { display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }\r\n .glass-title { margin: 0 !important; padding: 0 !important; font-size: 21px !important; font-weight: 700 !important; color: #111827 !important; letter-spacing: -0.025em !important; white-space: nowrap !important; line-height: 1.2 !important; border: none !important; background: none !important; }\r\n \r\n \/* Tabs \u6837\u5f0f\u5fae\u8c03 - \u4fdd\u6301\u8f7b\u5fae\u73bb\u7483\u611f\u4ee5\u533a\u5206\u5c42\u7ea7 *\/\r\n .glass-tabs-wrapper { \r\n max-width: 100% !important; \r\n margin: 0 !important; \r\n padding: 0 !important; \r\n flex: 1 1 auto !important; \/* \u5141\u8bb8\u5360\u636e\u5269\u4f59\u7a7a\u95f4 *\/\r\n min-width: 0 !important;\r\n }\r\n \r\n \/* \u65b0\u589e\uff1a\u79fb\u52a8\u7aef\u6eda\u52a8\u5bb9\u5668 *\/\r\n .glass-tabs-scroll-container {\r\n width: 100% !important;\r\n overflow-x: auto !important;\r\n -webkit-overflow-scrolling: touch !important; \/* iOS \u5e73\u6ed1\u6eda\u52a8 *\/\r\n scrollbar-width: none !important; \/* Firefox \u9690\u85cf\u6eda\u52a8\u6761 *\/\r\n -ms-overflow-style: none !important; \/* IE \u9690\u85cf\u6eda\u52a8\u6761 *\/\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n \r\n \/* \u9690\u85cf Webkit \u6d4f\u89c8\u5668\u7684\u6eda\u52a8\u6761 *\/\r\n .glass-tabs-scroll-container::-webkit-scrollbar {\r\n display: none !important;\r\n width: 0 !important;\r\n height: 0 !important;\r\n }\r\n\r\n .glass-tabs { \r\n display: flex !important; \r\n flex-wrap: nowrap !important; \/* \u5f3a\u5236\u4e0d\u6362\u884c *\/\r\n gap: 6px !important; \r\n background: rgba(255, 255, 255, 0.5) !important; \r\n padding: 4px !important; \r\n border-radius: 14px !important; \r\n border: 1px solid rgba(255, 255, 255, 0.8) !important; \r\n margin: 0 !important; \r\n backdrop-filter: blur(10px); \r\n width: fit-content !important; \/* \u5bbd\u5ea6\u9002\u5e94\u5185\u5bb9 *\/\r\n min-width: 100% !important; \/* \u81f3\u5c11\u5360\u6ee1\u5bb9\u5668 *\/\r\n }\r\n \r\n .glass-tab-btn { \r\n border: none !important; \r\n outline: none !important; \r\n background: transparent !important; \r\n padding: 7px 14px !important; \/* \u7a0d\u5fae\u589e\u5927\u70b9\u51fb\u533a *\/\r\n border-radius: 10px !important; \r\n font-size: 13px !important; \r\n font-weight: 600 !important; \r\n color: #6b7280 !important; \r\n cursor: pointer !important; \r\n transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important; \r\n line-height: 1.4 !important; \r\n margin: 0 !important; \r\n box-shadow: none !important; \r\n white-space: nowrap !important; \/* \u6587\u5b57\u4e0d\u6362\u884c *\/\r\n flex-shrink: 0 !important; \/* \u9632\u6b62\u6309\u94ae\u88ab\u538b\u7f29 *\/\r\n }\r\n \r\n .glass-tab-btn:hover { color: #111827 !important; background: rgba(255,255,255,0.8); }\r\n .glass-tab-btn.active { background: #ffffff !important; color: #2563eb !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03) !important; }\r\n\r\n \/* \u7edf\u8ba1\u6570\u5b57 *\/\r\n .glass-stats { padding: 5px 14px !important; border-radius: 20px !important; background: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.8) !important; font-size: 11px !important; color: #4b5563 !important; font-weight: 500 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important; white-space: nowrap !important; margin: 0 !important; flex-shrink: 0 !important; }\r\n .total-count-num { font-weight: 700 !important; color: #2563eb !important; }\r\n \r\n \/* \u6309\u94ae\u6837\u5f0f *\/\r\n .glass-action-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 18px !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.9) !important; background: #ffffff !important; color: #1f2937 !important; font-size: 12px !important; font-weight: 600 !important; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important; white-space: nowrap !important; margin: 0 !important; flex-shrink: 0 !important; }\r\n .glass-action-btn .btn-icon { transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; stroke: currentColor !important; }\r\n\r\n @media (hover: hover) and (pointer: fine) {\r\n .glass-action-btn:hover { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25) !important; transform: translateY(-1px) !important; }\r\n .glass-action-btn:hover .btn-icon { transform: translateX(3px) !important; }\r\n }\r\n\r\n \/* \u7f51\u683c\u5e03\u5c40 *\/\r\n .glass-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 24px !important; transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important; margin: 0 !important; padding: 0 16px !important; border: none !important; background: none !important; }\r\n .glass-grid.loading { opacity: 0.4 !important; filter: blur(2px) !important; transform: scale(0.995) !important; pointer-events: none !important; }\r\n \r\n \/* ========== \u2728 \u6838\u5fc3\uff1a\u60ac\u6d6e\u5361\u7247\u6837\u5f0f ========== *\/\r\n .glass-container .post-card { \r\n display: flex !important; \r\n flex-direction: column !important; \r\n border-radius: 16px !important; \r\n background: #ffffff !important; \r\n border: 1px solid rgba(255, 255, 255, 0.5) !important; \r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important; \r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease !important; \r\n box-sizing: border-box !important; \r\n overflow: hidden !important; \r\n padding: 0 !important; \r\n margin: 0 !important; \r\n width: 100% !important; \r\n float: none !important; \r\n user-select: none !important;\r\n outline: none !important;\r\n will-change: transform, box-shadow;\r\n position: relative !important;\r\n animation: cardFloatIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;\r\n }\r\n\r\n @keyframes cardFloatIn {\r\n 0% { opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(5px); }\r\n 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }\r\n }\r\n\r\n @media (hover: hover) and (pointer: fine) {\r\n .glass-container .post-card:hover { \r\n transform: translateY(-8px) scale(1.02) !important; \r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; \r\n border-color: rgba(255, 255, 255, 1) !important; \r\n z-index: 10 !important;\r\n }\r\n .post-card:hover .card-thumbnail img { transform: scale(1.08) !important; }\r\n .post-card:hover .card-title { color: #2563eb !important; }\r\n }\r\n\r\n .glass-container .post-card:active { \r\n transform: scale(0.98) !important; \r\n transition: transform 0.1s ease !important; \r\n box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;\r\n }\r\n \r\n .card-thumbnail { position: relative !important; width: 100% !important; height: 180px !important; overflow: hidden !important; background: #f3f4f6 !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; }\r\n .card-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; }\r\n \r\n .card-date { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; margin: 0 !important; }\r\n .overlay-date { position: absolute !important; top: 10px !important; left: 10px !important; padding: 5px 9px !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: #1f2937 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; z-index: 2 !important; }\r\n .card-header-row { display: flex !important; justify-content: flex-start !important; margin-bottom: 12px !important; padding: 14px 14px 0 14px !important; border: none !important; }\r\n .inline-date { color: #6b7280 !important; background: rgba(0,0,0,0.04) !important; padding: 4px 8px !important; border-radius: 6px !important; }\r\n \r\n .card-body { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; padding: 14px !important; margin: 0 !important; border: none !important; background: none !important; }\r\n .card-title { margin: 0 0 8px 0 !important; font-size: 15px !important; font-weight: 700 !important; color: #111827 !important; line-height: 1.4 !important; transition: color 0.2s ease !important; border: none !important; padding: 0 !important; background: none !important; letter-spacing: -0.01em !important; }\r\n .card-excerpt { margin: 0 !important; font-size: 13px !important; color: #6b7280 !important; line-height: 1.6 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; border: none !important; padding: 0 !important; background: none !important; }\r\n \r\n .no-posts-msg { color: #6b7280 !important; grid-column: 1\/-1 !important; text-align: center !important; padding: 32px 0 !important; margin: 0 !important; animation: cardFloatIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important; }\r\n \r\n .glass-infinite-status { margin-top: 28px !important; text-align: center !important; font-size: 12px !important; color: #9ca3af !important; font-weight: 500 !important; }\r\n .glass-spinner { display: flex; align-items: center !important; justify-content: center !important; gap: 10px !important; animation: cardFloatIn 0.3s ease !important; }\r\n \r\n .apple-spinner { position: relative !important; width: 20px !important; height: 20px !important; display: inline-block !important; }\r\n .apple-spinner div { width: 6% !important; height: 22% !important; background: #9ca3af !important; position: absolute !important; left: 47% !important; top: 39% !important; opacity: 0 !important; border-radius: 50px !important; animation: appleSpinnerFade 1s linear infinite !important; }\r\n .apple-spinner div:nth-child(1) { transform: rotate(0deg) translate(0, -142%); animation-delay: 0s !important; }\r\n .apple-spinner div:nth-child(2) { transform: rotate(30deg) translate(0, -142%); animation-delay: -0.9167s !important; }\r\n .apple-spinner div:nth-child(3) { transform: rotate(60deg) translate(0, -142%); animation-delay: -0.8333s !important; }\r\n .apple-spinner div:nth-child(4) { transform: rotate(90deg) translate(0, -142%); animation-delay: -0.75s !important; }\r\n .apple-spinner div:nth-child(5) { transform: rotate(120deg) translate(0, -142%); animation-delay: -0.6667s !important; }\r\n .apple-spinner div:nth-child(6) { transform: rotate(150deg) translate(0, -142%); animation-delay: -0.5833s !important; }\r\n .apple-spinner div:nth-child(7) { transform: rotate(180deg) translate(0, -142%); animation-delay: -0.5s !important; }\r\n .apple-spinner div:nth-child(8) { transform: rotate(210deg) translate(0, -142%); animation-delay: -0.4167s !important; }\r\n .apple-spinner div:nth-child(9) { transform: rotate(240deg) translate(0, -142%); animation-delay: -0.3333s !important; }\r\n .apple-spinner div:nth-child(10) { transform: rotate(270deg) translate(0, -142%); animation-delay: -0.25s !important; }\r\n .apple-spinner div:nth-child(11) { transform: rotate(300deg) translate(0, -142%); animation-delay: -0.1667s !important; }\r\n .apple-spinner div:nth-child(12) { transform: rotate(330deg) translate(0, -142%); animation-delay: -0.0833s !important; }\r\n\r\n @keyframes appleSpinnerFade { 0% { opacity: 1; } 100% { opacity: 0.15; } }\r\n\r\n .glass-no-more { color: #9ca3af !important; font-size: 11px !important; padding: 10px 0 !important; animation: cardFloatIn 0.4s ease !important; }\r\n .glass-infinite-sentinel { height: 20px !important; margin-top: 10px !important; }\r\n\r\n \/* ========== \ud83d\udcf1 \u79fb\u52a8\u7aef\u9002\u914d\u4f18\u5316 ========== *\/\r\n @media (max-width: 768px) {\r\n .glass-container { padding: 20px 0 !important; border-radius: 0 !important; }\r\n \r\n \/* \u5934\u90e8\u5728\u79fb\u52a8\u7aef\u6539\u4e3a\u5782\u76f4\u6392\u5217\uff0c\u7ed9 Tabs \u66f4\u591a\u7a7a\u95f4 *\/\r\n .glass-header.is-multi-header { \r\n flex-direction: column !important; \r\n align-items: stretch !important; \r\n gap: 14px !important; \r\n margin-bottom: 20px !important; \r\n padding: 0 16px !important; \r\n }\r\n \r\n .glass-header.is-multi-header .header-left { \r\n width: 100% !important; \r\n flex-direction: column !important; \r\n align-items: flex-start !important; \r\n gap: 10px !important; \r\n }\r\n \r\n .glass-header.is-multi-header .glass-title { \r\n font-size: 19px !important; \r\n }\r\n \r\n \/* \u5173\u952e\u4f18\u5316\uff1aTabs \u533a\u57df *\/\r\n .glass-header.is-multi-header .glass-tabs-wrapper { \r\n width: 100% !important; \r\n margin: 0 !important;\r\n }\r\n \r\n .glass-header.is-multi-header .glass-tabs-scroll-container {\r\n \/* \u786e\u4fdd\u53ef\u4ee5\u6a2a\u5411\u6eda\u52a8 *\/\r\n overflow-x: auto !important;\r\n -webkit-overflow-scrolling: touch !important;\r\n }\r\n \r\n .glass-header.is-multi-header .glass-tabs { \r\n \/* \u79fb\u9664\u6700\u5c0f\u5bbd\u5ea6\u9650\u5236\uff0c\u8ba9\u5185\u5bb9\u81ea\u7136\u6491\u5f00\u4ee5\u4fbf\u6eda\u52a8 *\/\r\n min-width: auto !important; \r\n width: auto !important;\r\n padding: 4px 6px !important; \/* \u7a0d\u5fae\u51cf\u5c0f\u5185\u8fb9\u8ddd *\/\r\n }\r\n \r\n .glass-header.is-multi-header .glass-tab-btn { \r\n padding: 6px 12px !important; \/* \u9002\u5408\u624b\u6307\u70b9\u51fb\u7684\u5927\u5c0f *\/\r\n font-size: 12px !important; \r\n }\r\n\r\n \/* \u5355\u5206\u7c7b\u5934\u90e8\u4fdd\u6301\u6a2a\u5411 *\/\r\n .glass-header.is-single-header { \r\n flex-direction: row !important; \r\n flex-wrap: nowrap !important; \r\n align-items: center !important; \r\n justify-content: space-between !important; \r\n gap: 8px !important; \r\n margin-bottom: 20px !important; \r\n padding: 0 16px !important; \r\n }\r\n \r\n .glass-header.is-single-header .header-left { \r\n width: auto !important; \r\n flex-direction: row !important; \r\n align-items: center !important; \r\n flex-wrap: nowrap !important; \r\n gap: 8px !important; \r\n flex: 1 1 auto !important; \r\n min-width: 0 !important; \r\n }\r\n \r\n .glass-header.is-single-header .glass-title { \r\n font-size: 17px !important; \r\n overflow: hidden !important; \r\n text-overflow: ellipsis !important; \r\n }\r\n \r\n .glass-header.is-single-header .glass-stats { \r\n padding: 4px 10px !important; \r\n font-size: 10px !important; \r\n flex-shrink: 0 !important; \r\n }\r\n \r\n .glass-header.is-single-header .glass-action-btn { \r\n padding: 6px 12px !important; \r\n font-size: 11px !important; \r\n flex-shrink: 0 !important; \r\n }\r\n\r\n \/* \u7f51\u683c\u53d8\u4e3a\u5355\u5217 *\/\r\n .glass-grid { \r\n grid-template-columns: 1fr !important; \r\n gap: 16px !important; \r\n padding: 0 16px !important; \r\n }\r\n \r\n .card-thumbnail { height: 200px !important; }\r\n .card-date { font-size: 9px !important; }\r\n .overlay-date { padding: 4px 8px !important; }\r\n .card-title { font-size: 14px !important; }\r\n .card-excerpt { font-size: 12px !important; }\r\n }\r\n <\/style>\r\n\r\n <script>\r\n (function() {\r\n function revealAndInit() {\r\n const container = document.getElementById('glass-instance-1');\r\n if (!container || container.dataset.initialized) return;\r\n container.dataset.initialized = '1';\r\n\r\n const styleNode = document.getElementById('glass-instance-1-prevent-fouc');\r\n if (styleNode) styleNode.remove();\r\n\r\n container.classList.add('glass-ready');\r\n\r\n const isInfiniteEnabled = container.dataset.enableInfinite === '1';\r\n const ajaxUrl = 'https:\/\/www.hendricksin.hk\/wp-admin\/admin-ajax.php';\r\n const tabs = container.querySelectorAll('.glass-tab-btn');\r\n const grid = container.querySelector('.posts-grid');\r\n const spinner = container.querySelector('.glass-spinner');\r\n const noMore = container.querySelector('.glass-no-more');\r\n const sentinel = container.querySelector('.glass-infinite-sentinel');\r\n const nonce = container.dataset.nonce;\r\n\r\n let isLoading = false;\r\n let observer = null;\r\n\r\n function syncUIState() {\r\n if (!isInfiniteEnabled || !spinner || !noMore) return;\r\n const currentPage = parseInt(container.dataset.page);\r\n const maxPages = parseInt(container.dataset.maxPages);\r\n\r\n spinner.style.display = 'none';\r\n if (currentPage >= maxPages && maxPages > 0) {\r\n noMore.style.display = 'block';\r\n } else {\r\n noMore.style.display = 'none';\r\n }\r\n if (observer && sentinel) {\r\n if (currentPage >= maxPages) {\r\n observer.unobserve(sentinel);\r\n } else {\r\n observer.observe(sentinel);\r\n }\r\n }\r\n }\r\n\r\n function loadNextPage() {\r\n let currentPage = parseInt(container.dataset.page);\r\n const maxPages = parseInt(container.dataset.maxPages);\r\n\r\n if (isLoading || currentPage >= maxPages) return;\r\n\r\n isLoading = true;\r\n if (observer && sentinel) observer.unobserve(sentinel);\r\n\r\n if (spinner) spinner.style.display = 'flex';\r\n if (noMore) noMore.style.display = 'none';\r\n\r\n const nextPage = currentPage + 1;\r\n const slug = container.dataset.currentSlug;\r\n const taxonomy = container.dataset.taxonomy;\r\n const postsPerPage = container.dataset.postsPerPage;\r\n const startIndex = grid ? grid.children.length : 0;\r\n\r\n const formData = new FormData();\r\n formData.append('action', 'fetch_glass_posts');\r\n formData.append('nonce', nonce);\r\n formData.append('slug', slug);\r\n formData.append('taxonomy', taxonomy);\r\n formData.append('paged', nextPage);\r\n formData.append('posts_per_page', postsPerPage);\r\n formData.append('start_index', startIndex);\r\n\r\n fetch(ajaxUrl, { method: 'POST', body: formData })\r\n .then(res => {\r\n if (!res.ok) throw new Error('Network response was not ok');\r\n return res.json();\r\n })\r\n .then(res => {\r\n if (res.success && res.data.html) {\r\n grid.insertAdjacentHTML('beforeend', res.data.html);\r\n container.dataset.page = nextPage;\r\n container.dataset.maxPages = res.data.max_pages;\r\n if (res.data.total_count !== undefined) {\r\n const totalEl = container.querySelector('.total-count-num');\r\n if (totalEl) totalEl.textContent = res.data.total_count;\r\n }\r\n } else {\r\n if (res.data && res.data.message) {\r\n console.warn(res.data.message);\r\n }\r\n if (noMore) noMore.style.display = 'block';\r\n if (spinner) spinner.style.display = 'none';\r\n container.dataset.maxPages = currentPage;\r\n }\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n isLoading = false;\r\n syncUIState();\r\n if (noMore) {\r\n noMore.textContent = '\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5';\r\n noMore.style.display = 'block';\r\n }\r\n })\r\n .finally(() => {\r\n isLoading = false;\r\n syncUIState();\r\n\r\n const updatedPage = parseInt(container.dataset.page);\r\n const updatedMax = parseInt(container.dataset.maxPages);\r\n\r\n if (updatedPage < updatedMax && observer && sentinel) {\r\n observer.observe(sentinel);\r\n requestAnimationFrame(() => {\r\n setTimeout(checkAndAutoLoad, 100);\r\n });\r\n }\r\n });\r\n }\r\n\r\n function checkAndAutoLoad() {\r\n if (!sentinel || isLoading) return;\r\n const currentPage = parseInt(container.dataset.page);\r\n const maxPages = parseInt(container.dataset.maxPages);\r\n if (currentPage >= maxPages) return;\r\n\r\n const rect = sentinel.getBoundingClientRect();\r\n const windowHeight = window.innerHeight || document.documentElement.clientHeight;\r\n \r\n if (rect.top <= windowHeight + 250) {\r\n loadNextPage();\r\n }\r\n }\r\n\r\n if (isInfiniteEnabled && sentinel) {\r\n syncUIState();\r\n\r\n observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting && !isLoading) {\r\n loadNextPage();\r\n }\r\n });\r\n }, { rootMargin: '250px' });\r\n\r\n const initPage = parseInt(container.dataset.page);\r\n const initMax = parseInt(container.dataset.maxPages);\r\n if (initPage < initMax) {\r\n observer.observe(sentinel);\r\n }\r\n }\r\n\r\n \/\/ Tab \u5207\u6362\u903b\u8f91\r\n tabs.forEach(tab => {\r\n tab.addEventListener('click', function() {\r\n if (this.classList.contains('active')) return;\r\n \r\n tabs.forEach(t => t.classList.remove('active'));\r\n this.classList.add('active');\r\n \r\n const slug = this.dataset.slug;\r\n const taxonomy = container.dataset.taxonomy;\r\n const postsPerPage = container.dataset.postsPerPage;\r\n\r\n if (observer && sentinel) observer.unobserve(sentinel);\r\n\r\n isLoading = true;\r\n grid.classList.add('loading');\r\n if (spinner) spinner.style.display = 'flex';\r\n if (noMore) noMore.style.display = 'none';\r\n\r\n const formData = new FormData();\r\n formData.append('action', 'fetch_glass_posts');\r\n formData.append('nonce', nonce);\r\n formData.append('slug', slug);\r\n formData.append('taxonomy', taxonomy);\r\n formData.append('paged', 1);\r\n formData.append('posts_per_page', postsPerPage);\r\n formData.append('start_index', 0);\r\n\r\n fetch(ajaxUrl, { method: 'POST', body: formData })\r\n .then(res => {\r\n if (!res.ok) throw new Error('Network response was not ok');\r\n return res.json();\r\n })\r\n .then(res => {\r\n if (res.success) {\r\n grid.innerHTML = res.data.html;\r\n container.dataset.currentSlug = slug;\r\n container.dataset.page = 1;\r\n container.dataset.maxPages = res.data.max_pages;\r\n if (res.data.total_count !== undefined) {\r\n const totalEl = container.querySelector('.total-count-num');\r\n if (totalEl) totalEl.textContent = res.data.total_count;\r\n }\r\n } else {\r\n if (res.data && res.data.message) {\r\n console.warn(res.data.message);\r\n }\r\n grid.innerHTML = '<p class=\"no-posts-msg\">\u8be5\u5206\u7c7b\u4e0b\u6682\u65e0\u6587\u7ae0\u3002<\/p>';\r\n }\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n grid.innerHTML = '<p class=\"no-posts-msg\">\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5\u3002<\/p>';\r\n })\r\n .finally(() => {\r\n isLoading = false;\r\n grid.classList.remove('loading');\r\n syncUIState();\r\n\r\n const curMax = parseInt(container.dataset.maxPages);\r\n if (isInfiniteEnabled && curMax > 1 && observer && sentinel) {\r\n observer.observe(sentinel);\r\n requestAnimationFrame(() => {\r\n setTimeout(checkAndAutoLoad, 100);\r\n });\r\n }\r\n });\r\n });\r\n });\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', revealAndInit);\r\n } else {\r\n revealAndInit();\r\n }\r\n })();\r\n <\/script>\r\n <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0196566 elementor-widget elementor-widget-shortcode\" data-id=\"0196566\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"> <!-- \u9632\u95ea\u70c1\u6837\u5f0f -->\r\n <style id=\"glass-instance-2-prevent-fouc\">\r\n #glass-instance-2.glass-container {\r\n opacity: 0 !important;\r\n visibility: hidden !important;\r\n max-height: 0px !important;\r\n overflow: hidden !important;\r\n transition: none !important;\r\n }\r\n <\/style>\r\n\r\n <div id=\"glass-instance-2\"\r\n class=\"glass-container\" \r\n data-taxonomy=\"post_tag\" \r\n data-is-multi=\"0\"\r\n data-enable-infinite=\"0\"\r\n data-posts-per-page=\"3\"\r\n data-current-slug=\"%e6%96%b0%e9%97%bb\"\r\n data-page=\"1\"\r\n data-max-pages=\"332\"\r\n data-nonce=\"512b99672c\">\r\n \r\n <div class=\"glass-header is-single-header\">\r\n <div class=\"header-left\">\r\n <h2 class=\"glass-title\">\u65b0\u95fb<\/h2>\r\n \r\n \r\n <div class=\"glass-stats\">\r\n \u5171 <span class=\"total-count-num\">996<\/span> \u7bc7\u5185\u5bb9\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"https:\/\/www.hendricksin.hk\/index.php\/%e6%96%b0%e8%81%9e\/\" class=\"glass-action-btn\" target=\"_blank\" rel=\"noopener\">\r\n <span>\u67e5\u770b\u66f4\u591a\u65b0\u95fb<\/span>\r\n <svg class=\"btn-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\r\n <polyline points=\"12 5 19 12 12 19\"><\/polyline>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"glass-grid posts-grid\">\r\n <a href=\"https:\/\/www.tkww.hk\/epaper\/view\/newsDetail\/2094492233473593344.html\" class=\"post-card\" style=\"animation-delay: 0.00s !important;\">\r\n <div class=\"card-header-row\">\r\n <div class=\"card-date inline-date\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\r\n <span>2026-09-01<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h3 class=\"card-title\">\u6cb3\u5957\u6e2f\u5712\u5340\u7b2c\u4e00\u671f\u5169\u7d44\u5730\u63a56\u6a19\u66f8 \u6db5\u84cb\u4f01\u696d\u591a\u5143 \u5275\u79d1\u5c40\uff1a\u5e02\u5834\u5c0d\u767c\u5c55\u524d\u666f\u5177\u4fe1\u5fc3 – \u5927\u516c\u5831<\/h3>\r\n <p class=\"card-excerpt\"><\/p>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/news.rthk.hk\/rthk\/ch\/component\/k2\/1867895-20260828.htm\" class=\"post-card\" style=\"animation-delay: 0.08s !important;\">\r\n <div class=\"card-header-row\">\r\n <div class=\"card-date inline-date\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\r\n <span>2026-08-28<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h3 class=\"card-title\">\u5f6d\u97fb\u50d6\u7372\u59d4\u4efb\u70ba\u9999\u6e2f\u96fb\u53f0\u9867\u554f\u59d4\u54e1\u6703\u4e3b\u5e2d\u30009\u67081\u65e5\u751f\u6548\u4efb\u671f\u5169\u5e74 – RTHK \uff08\u672c\u4eba\u518d\u5ea6\u83b7\u4efb\u6210\u5458\uff09<\/h3>\r\n <p class=\"card-excerpt\"><\/p>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/www.hendricksin.hk\/index.php\/2026\/08\/24\/%e7%b5%b1%e7%b1%8c%e7%99%bc%e5%b1%95%e5%92%8c%e5%ae%89%e5%85%a8%e5%a4%a7%e5%ae%b6%e8%ab%87-%e9%be%94%e4%b9%8b%e5%b9%b3%e6%96%87%e7%ab%a0%e5%bc%95%e7%99%bc%e7%86%b1%e7%83%88%e5%8f%8d%e9%9f%bf-%e6%b8%af\/\" class=\"post-card\" style=\"animation-delay: 0.16s !important;\">\r\n <div class=\"card-header-row\">\r\n <div class=\"card-date inline-date\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\r\n <span>2026-08-24<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h3 class=\"card-title\">\u7d71\u7c4c\u767c\u5c55\u548c\u5b89\u5168\u5927\u5bb6\u8ac7\/\u9f94\u4e4b\u5e73\u6587\u7ae0\u5f15\u767c\u71b1\u70c8\u53cd\u97ff \u6e2f\u653f\u754c\u9ad8\u5ea6\u95dc\u6ce8 \u7dad\u8b77\u570b\u5bb6\u5b89\u5168\u4e0d\u80fd\u300c\u653e\u4e00\u653e\u300d \u9808\u81fe\u4e0d\u53ef\u96e2 – \u6e2f\u805e – \u4eca\u65e5\u5927\u516c<\/h3>\r\n <p class=\"card-excerpt\"><\/p>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <style>\r\n \/* ========== \u2728 \u65b0\u6837\u5f0f\uff1a\u900f\u660e\u80cc\u666f + \u60ac\u6d6e\u5361\u7247 ========== *\/\r\n \r\n \/* \u5bb9\u5668\u663e\u73b0\u52a8\u753b *\/\r\n .glass-container.glass-ready {\r\n opacity: 1 !important;\r\n visibility: visible !important;\r\n max-height: none !important;\r\n overflow: visible !important;\r\n transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;\r\n }\r\n \r\n \/* \r\n \u4e3b\u5bb9\u5668\uff1a\u5b8c\u5168\u900f\u660e \r\n *\/\r\n .glass-container {\r\n max-width: 1080px !important;\r\n margin: 0 auto !important;\r\n padding: 32px 0 !important;\r\n border-radius: 0 !important;\r\n background: transparent !important;\r\n backdrop-filter: none !important;\r\n -webkit-backdrop-filter: none !important;\r\n border: none !important;\r\n box-shadow: none !important;\r\n font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif !important;\r\n box-sizing: border-box !important;\r\n float: none !important;\r\n position: relative !important;\r\n clear: both !important;\r\n }\r\n\r\n .glass-container *, .glass-container *::before, .glass-container *::after { box-sizing: border-box !important; }\r\n \r\n .glass-container a, \r\n .glass-container a:hover, \r\n .glass-container a:focus, \r\n .glass-container a:focus-visible, \r\n .glass-container a:active { \r\n text-decoration: none !important; \r\n outline: none !important; \r\n outline-offset: 0 !important;\r\n -webkit-tap-highlight-color: transparent !important;\r\n }\r\n\r\n \/* \u5934\u90e8\u5e03\u5c40 *\/\r\n .glass-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 28px !important; flex-wrap: wrap !important; gap: 14px !important; border: none !important; background: none !important; padding: 0 16px !important; }\r\n .header-left { display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }\r\n .glass-title { margin: 0 !important; padding: 0 !important; font-size: 21px !important; font-weight: 700 !important; color: #111827 !important; letter-spacing: -0.025em !important; white-space: nowrap !important; line-height: 1.2 !important; border: none !important; background: none !important; }\r\n \r\n \/* Tabs \u6837\u5f0f\u5fae\u8c03 - \u4fdd\u6301\u8f7b\u5fae\u73bb\u7483\u611f\u4ee5\u533a\u5206\u5c42\u7ea7 *\/\r\n .glass-tabs-wrapper { \r\n max-width: 100% !important; \r\n margin: 0 !important; \r\n padding: 0 !important; \r\n flex: 1 1 auto !important; \/* \u5141\u8bb8\u5360\u636e\u5269\u4f59\u7a7a\u95f4 *\/\r\n min-width: 0 !important;\r\n }\r\n \r\n \/* \u65b0\u589e\uff1a\u79fb\u52a8\u7aef\u6eda\u52a8\u5bb9\u5668 *\/\r\n .glass-tabs-scroll-container {\r\n width: 100% !important;\r\n overflow-x: auto !important;\r\n -webkit-overflow-scrolling: touch !important; \/* iOS \u5e73\u6ed1\u6eda\u52a8 *\/\r\n scrollbar-width: none !important; \/* Firefox \u9690\u85cf\u6eda\u52a8\u6761 *\/\r\n -ms-overflow-style: none !important; \/* IE \u9690\u85cf\u6eda\u52a8\u6761 *\/\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n \r\n \/* \u9690\u85cf Webkit \u6d4f\u89c8\u5668\u7684\u6eda\u52a8\u6761 *\/\r\n .glass-tabs-scroll-container::-webkit-scrollbar {\r\n display: none !important;\r\n width: 0 !important;\r\n height: 0 !important;\r\n }\r\n\r\n .glass-tabs { \r\n display: flex !important; \r\n flex-wrap: nowrap !important; \/* \u5f3a\u5236\u4e0d\u6362\u884c *\/\r\n gap: 6px !important; \r\n background: rgba(255, 255, 255, 0.5) !important; \r\n padding: 4px !important; \r\n border-radius: 14px !important; \r\n border: 1px solid rgba(255, 255, 255, 0.8) !important; \r\n margin: 0 !important; \r\n backdrop-filter: blur(10px); \r\n width: fit-content !important; \/* \u5bbd\u5ea6\u9002\u5e94\u5185\u5bb9 *\/\r\n min-width: 100% !important; \/* \u81f3\u5c11\u5360\u6ee1\u5bb9\u5668 *\/\r\n }\r\n \r\n .glass-tab-btn { \r\n border: none !important; \r\n outline: none !important; \r\n background: transparent !important; \r\n padding: 7px 14px !important; \/* \u7a0d\u5fae\u589e\u5927\u70b9\u51fb\u533a *\/\r\n border-radius: 10px !important; \r\n font-size: 13px !important; \r\n font-weight: 600 !important; \r\n color: #6b7280 !important; \r\n cursor: pointer !important; \r\n transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important; \r\n line-height: 1.4 !important; \r\n margin: 0 !important; \r\n box-shadow: none !important; \r\n white-space: nowrap !important; \/* \u6587\u5b57\u4e0d\u6362\u884c *\/\r\n flex-shrink: 0 !important; \/* \u9632\u6b62\u6309\u94ae\u88ab\u538b\u7f29 *\/\r\n }\r\n \r\n .glass-tab-btn:hover { color: #111827 !important; background: rgba(255,255,255,0.8); }\r\n .glass-tab-btn.active { background: #ffffff !important; color: #2563eb !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03) !important; }\r\n\r\n \/* \u7edf\u8ba1\u6570\u5b57 *\/\r\n .glass-stats { padding: 5px 14px !important; border-radius: 20px !important; background: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.8) !important; font-size: 11px !important; color: #4b5563 !important; font-weight: 500 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important; white-space: nowrap !important; margin: 0 !important; flex-shrink: 0 !important; }\r\n .total-count-num { font-weight: 700 !important; color: #2563eb !important; }\r\n \r\n \/* \u6309\u94ae\u6837\u5f0f *\/\r\n .glass-action-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 18px !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.9) !important; background: #ffffff !important; color: #1f2937 !important; font-size: 12px !important; font-weight: 600 !important; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important; white-space: nowrap !important; margin: 0 !important; flex-shrink: 0 !important; }\r\n .glass-action-btn .btn-icon { transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; stroke: currentColor !important; }\r\n\r\n @media (hover: hover) and (pointer: fine) {\r\n .glass-action-btn:hover { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25) !important; transform: translateY(-1px) !important; }\r\n .glass-action-btn:hover .btn-icon { transform: translateX(3px) !important; }\r\n }\r\n\r\n \/* \u7f51\u683c\u5e03\u5c40 *\/\r\n .glass-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 24px !important; transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important; margin: 0 !important; padding: 0 16px !important; border: none !important; background: none !important; }\r\n .glass-grid.loading { opacity: 0.4 !important; filter: blur(2px) !important; transform: scale(0.995) !important; pointer-events: none !important; }\r\n \r\n \/* ========== \u2728 \u6838\u5fc3\uff1a\u60ac\u6d6e\u5361\u7247\u6837\u5f0f ========== *\/\r\n .glass-container .post-card { \r\n display: flex !important; \r\n flex-direction: column !important; \r\n border-radius: 16px !important; \r\n background: #ffffff !important; \r\n border: 1px solid rgba(255, 255, 255, 0.5) !important; \r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important; \r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease !important; \r\n box-sizing: border-box !important; \r\n overflow: hidden !important; \r\n padding: 0 !important; \r\n margin: 0 !important; \r\n width: 100% !important; \r\n float: none !important; \r\n user-select: none !important;\r\n outline: none !important;\r\n will-change: transform, box-shadow;\r\n position: relative !important;\r\n animation: cardFloatIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;\r\n }\r\n\r\n @keyframes cardFloatIn {\r\n 0% { opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(5px); }\r\n 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }\r\n }\r\n\r\n @media (hover: hover) and (pointer: fine) {\r\n .glass-container .post-card:hover { \r\n transform: translateY(-8px) scale(1.02) !important; \r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; \r\n border-color: rgba(255, 255, 255, 1) !important; \r\n z-index: 10 !important;\r\n }\r\n .post-card:hover .card-thumbnail img { transform: scale(1.08) !important; }\r\n .post-card:hover .card-title { color: #2563eb !important; }\r\n }\r\n\r\n .glass-container .post-card:active { \r\n transform: scale(0.98) !important; \r\n transition: transform 0.1s ease !important; \r\n box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;\r\n }\r\n \r\n .card-thumbnail { position: relative !important; width: 100% !important; height: 180px !important; overflow: hidden !important; background: #f3f4f6 !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; }\r\n .card-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; }\r\n \r\n .card-date { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; margin: 0 !important; }\r\n .overlay-date { position: absolute !important; top: 10px !important; left: 10px !important; padding: 5px 9px !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: #1f2937 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; z-index: 2 !important; }\r\n .card-header-row { display: flex !important; justify-content: flex-start !important; margin-bottom: 12px !important; padding: 14px 14px 0 14px !important; border: none !important; }\r\n .inline-date { color: #6b7280 !important; background: rgba(0,0,0,0.04) !important; padding: 4px 8px !important; border-radius: 6px !important; }\r\n \r\n .card-body { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; padding: 14px !important; margin: 0 !important; border: none !important; background: none !important; }\r\n .card-title { margin: 0 0 8px 0 !important; font-size: 15px !important; font-weight: 700 !important; color: #111827 !important; line-height: 1.4 !important; transition: color 0.2s ease !important; border: none !important; padding: 0 !important; background: none !important; letter-spacing: -0.01em !important; }\r\n .card-excerpt { margin: 0 !important; font-size: 13px !important; color: #6b7280 !important; line-height: 1.6 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; border: none !important; padding: 0 !important; background: none !important; }\r\n \r\n .no-posts-msg { color: #6b7280 !important; grid-column: 1\/-1 !important; text-align: center !important; padding: 32px 0 !important; margin: 0 !important; animation: cardFloatIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important; }\r\n \r\n .glass-infinite-status { margin-top: 28px !important; text-align: center !important; font-size: 12px !important; color: #9ca3af !important; font-weight: 500 !important; }\r\n .glass-spinner { display: flex; align-items: center !important; justify-content: center !important; gap: 10px !important; animation: cardFloatIn 0.3s ease !important; }\r\n \r\n .apple-spinner { position: relative !important; width: 20px !important; height: 20px !important; display: inline-block !important; }\r\n .apple-spinner div { width: 6% !important; height: 22% !important; background: #9ca3af !important; position: absolute !important; left: 47% !important; top: 39% !important; opacity: 0 !important; border-radius: 50px !important; animation: appleSpinnerFade 1s linear infinite !important; }\r\n .apple-spinner div:nth-child(1) { transform: rotate(0deg) translate(0, -142%); animation-delay: 0s !important; }\r\n .apple-spinner div:nth-child(2) { transform: rotate(30deg) translate(0, -142%); animation-delay: -0.9167s !important; }\r\n .apple-spinner div:nth-child(3) { transform: rotate(60deg) translate(0, -142%); animation-delay: -0.8333s !important; }\r\n .apple-spinner div:nth-child(4) { transform: rotate(90deg) translate(0, -142%); animation-delay: -0.75s !important; }\r\n .apple-spinner div:nth-child(5) { transform: rotate(120deg) translate(0, -142%); animation-delay: -0.6667s !important; }\r\n .apple-spinner div:nth-child(6) { transform: rotate(150deg) translate(0, -142%); animation-delay: -0.5833s !important; }\r\n .apple-spinner div:nth-child(7) { transform: rotate(180deg) translate(0, -142%); animation-delay: -0.5s !important; }\r\n .apple-spinner div:nth-child(8) { transform: rotate(210deg) translate(0, -142%); animation-delay: -0.4167s !important; }\r\n .apple-spinner div:nth-child(9) { transform: rotate(240deg) translate(0, -142%); animation-delay: -0.3333s !important; }\r\n .apple-spinner div:nth-child(10) { transform: rotate(270deg) translate(0, -142%); animation-delay: -0.25s !important; }\r\n .apple-spinner div:nth-child(11) { transform: rotate(300deg) translate(0, -142%); animation-delay: -0.1667s !important; }\r\n .apple-spinner div:nth-child(12) { transform: rotate(330deg) translate(0, -142%); animation-delay: -0.0833s !important; }\r\n\r\n @keyframes appleSpinnerFade { 0% { opacity: 1; } 100% { opacity: 0.15; } }\r\n\r\n .glass-no-more { color: #9ca3af !important; font-size: 11px !important; padding: 10px 0 !important; animation: cardFloatIn 0.4s ease !important; }\r\n .glass-infinite-sentinel { height: 20px !important; margin-top: 10px !important; }\r\n\r\n \/* ========== \ud83d\udcf1 \u79fb\u52a8\u7aef\u9002\u914d\u4f18\u5316 ========== *\/\r\n @media (max-width: 768px) {\r\n .glass-container { padding: 20px 0 !important; border-radius: 0 !important; }\r\n \r\n \/* \u5934\u90e8\u5728\u79fb\u52a8\u7aef\u6539\u4e3a\u5782\u76f4\u6392\u5217\uff0c\u7ed9 Tabs \u66f4\u591a\u7a7a\u95f4 *\/\r\n .glass-header.is-multi-header { \r\n flex-direction: column !important; \r\n align-items: stretch !important; \r\n gap: 14px !important; \r\n margin-bottom: 20px !important; \r\n padding: 0 16px !important; \r\n }\r\n \r\n .glass-header.is-multi-header .header-left { \r\n width: 100% !important; \r\n flex-direction: column !important; \r\n align-items: flex-start !important; \r\n gap: 10px !important; \r\n }\r\n \r\n .glass-header.is-multi-header .glass-title { \r\n font-size: 19px !important; \r\n }\r\n \r\n \/* \u5173\u952e\u4f18\u5316\uff1aTabs \u533a\u57df *\/\r\n .glass-header.is-multi-header .glass-tabs-wrapper { \r\n width: 100% !important; \r\n margin: 0 !important;\r\n }\r\n \r\n .glass-header.is-multi-header .glass-tabs-scroll-container {\r\n \/* \u786e\u4fdd\u53ef\u4ee5\u6a2a\u5411\u6eda\u52a8 *\/\r\n overflow-x: auto !important;\r\n -webkit-overflow-scrolling: touch !important;\r\n }\r\n \r\n .glass-header.is-multi-header .glass-tabs { \r\n \/* \u79fb\u9664\u6700\u5c0f\u5bbd\u5ea6\u9650\u5236\uff0c\u8ba9\u5185\u5bb9\u81ea\u7136\u6491\u5f00\u4ee5\u4fbf\u6eda\u52a8 *\/\r\n min-width: auto !important; \r\n width: auto !important;\r\n padding: 4px 6px !important; \/* \u7a0d\u5fae\u51cf\u5c0f\u5185\u8fb9\u8ddd *\/\r\n }\r\n \r\n .glass-header.is-multi-header .glass-tab-btn { \r\n padding: 6px 12px !important; \/* \u9002\u5408\u624b\u6307\u70b9\u51fb\u7684\u5927\u5c0f *\/\r\n font-size: 12px !important; \r\n }\r\n\r\n \/* \u5355\u5206\u7c7b\u5934\u90e8\u4fdd\u6301\u6a2a\u5411 *\/\r\n .glass-header.is-single-header { \r\n flex-direction: row !important; \r\n flex-wrap: nowrap !important; \r\n align-items: center !important; \r\n justify-content: space-between !important; \r\n gap: 8px !important; \r\n margin-bottom: 20px !important; \r\n padding: 0 16px !important; \r\n }\r\n \r\n .glass-header.is-single-header .header-left { \r\n width: auto !important; \r\n flex-direction: row !important; \r\n align-items: center !important; \r\n flex-wrap: nowrap !important; \r\n gap: 8px !important; \r\n flex: 1 1 auto !important; \r\n min-width: 0 !important; \r\n }\r\n \r\n .glass-header.is-single-header .glass-title { \r\n font-size: 17px !important; \r\n overflow: hidden !important; \r\n text-overflow: ellipsis !important; \r\n }\r\n \r\n .glass-header.is-single-header .glass-stats { \r\n padding: 4px 10px !important; \r\n font-size: 10px !important; \r\n flex-shrink: 0 !important; \r\n }\r\n \r\n .glass-header.is-single-header .glass-action-btn { \r\n padding: 6px 12px !important; \r\n font-size: 11px !important; \r\n flex-shrink: 0 !important; \r\n }\r\n\r\n \/* \u7f51\u683c\u53d8\u4e3a\u5355\u5217 *\/\r\n .glass-grid { \r\n grid-template-columns: 1fr !important; \r\n gap: 16px !important; \r\n padding: 0 16px !important; \r\n }\r\n \r\n .card-thumbnail { height: 200px !important; }\r\n .card-date { font-size: 9px !important; }\r\n .overlay-date { padding: 4px 8px !important; }\r\n .card-title { font-size: 14px !important; }\r\n .card-excerpt { font-size: 12px !important; }\r\n }\r\n <\/style>\r\n\r\n <script>\r\n (function() {\r\n function revealAndInit() {\r\n const container = document.getElementById('glass-instance-2');\r\n if (!container || container.dataset.initialized) return;\r\n container.dataset.initialized = '1';\r\n\r\n const styleNode = document.getElementById('glass-instance-2-prevent-fouc');\r\n if (styleNode) styleNode.remove();\r\n\r\n container.classList.add('glass-ready');\r\n\r\n const isInfiniteEnabled = container.dataset.enableInfinite === '1';\r\n const ajaxUrl = 'https:\/\/www.hendricksin.hk\/wp-admin\/admin-ajax.php';\r\n const tabs = container.querySelectorAll('.glass-tab-btn');\r\n const grid = container.querySelector('.posts-grid');\r\n const spinner = container.querySelector('.glass-spinner');\r\n const noMore = container.querySelector('.glass-no-more');\r\n const sentinel = container.querySelector('.glass-infinite-sentinel');\r\n const nonce = container.dataset.nonce;\r\n\r\n let isLoading = false;\r\n let observer = null;\r\n\r\n function syncUIState() {\r\n if (!isInfiniteEnabled || !spinner || !noMore) return;\r\n const currentPage = parseInt(container.dataset.page);\r\n const maxPages = parseInt(container.dataset.maxPages);\r\n\r\n spinner.style.display = 'none';\r\n if (currentPage >= maxPages && maxPages > 0) {\r\n noMore.style.display = 'block';\r\n } else {\r\n noMore.style.display = 'none';\r\n }\r\n if (observer && sentinel) {\r\n if (currentPage >= maxPages) {\r\n observer.unobserve(sentinel);\r\n } else {\r\n observer.observe(sentinel);\r\n }\r\n }\r\n }\r\n\r\n function loadNextPage() {\r\n let currentPage = parseInt(container.dataset.page);\r\n const maxPages = parseInt(container.dataset.maxPages);\r\n\r\n if (isLoading || currentPage >= maxPages) return;\r\n\r\n isLoading = true;\r\n if (observer && sentinel) observer.unobserve(sentinel);\r\n\r\n if (spinner) spinner.style.display = 'flex';\r\n if (noMore) noMore.style.display = 'none';\r\n\r\n const nextPage = currentPage + 1;\r\n const slug = container.dataset.currentSlug;\r\n const taxonomy = container.dataset.taxonomy;\r\n const postsPerPage = container.dataset.postsPerPage;\r\n const startIndex = grid ? grid.children.length : 0;\r\n\r\n const formData = new FormData();\r\n formData.append('action', 'fetch_glass_posts');\r\n formData.append('nonce', nonce);\r\n formData.append('slug', slug);\r\n formData.append('taxonomy', taxonomy);\r\n formData.append('paged', nextPage);\r\n formData.append('posts_per_page', postsPerPage);\r\n formData.append('start_index', startIndex);\r\n\r\n fetch(ajaxUrl, { method: 'POST', body: formData })\r\n .then(res => {\r\n if (!res.ok) throw new Error('Network response was not ok');\r\n return res.json();\r\n })\r\n .then(res => {\r\n if (res.success && res.data.html) {\r\n grid.insertAdjacentHTML('beforeend', res.data.html);\r\n container.dataset.page = nextPage;\r\n container.dataset.maxPages = res.data.max_pages;\r\n if (res.data.total_count !== undefined) {\r\n const totalEl = container.querySelector('.total-count-num');\r\n if (totalEl) totalEl.textContent = res.data.total_count;\r\n }\r\n } else {\r\n if (res.data && res.data.message) {\r\n console.warn(res.data.message);\r\n }\r\n if (noMore) noMore.style.display = 'block';\r\n if (spinner) spinner.style.display = 'none';\r\n container.dataset.maxPages = currentPage;\r\n }\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n isLoading = false;\r\n syncUIState();\r\n if (noMore) {\r\n noMore.textContent = '\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5';\r\n noMore.style.display = 'block';\r\n }\r\n })\r\n .finally(() => {\r\n isLoading = false;\r\n syncUIState();\r\n\r\n const updatedPage = parseInt(container.dataset.page);\r\n const updatedMax = parseInt(container.dataset.maxPages);\r\n\r\n if (updatedPage < updatedMax && observer && sentinel) {\r\n observer.observe(sentinel);\r\n requestAnimationFrame(() => {\r\n setTimeout(checkAndAutoLoad, 100);\r\n });\r\n }\r\n });\r\n }\r\n\r\n function checkAndAutoLoad() {\r\n if (!sentinel || isLoading) return;\r\n const currentPage = parseInt(container.dataset.page);\r\n const maxPages = parseInt(container.dataset.maxPages);\r\n if (currentPage >= maxPages) return;\r\n\r\n const rect = sentinel.getBoundingClientRect();\r\n const windowHeight = window.innerHeight || document.documentElement.clientHeight;\r\n \r\n if (rect.top <= windowHeight + 250) {\r\n loadNextPage();\r\n }\r\n }\r\n\r\n if (isInfiniteEnabled && sentinel) {\r\n syncUIState();\r\n\r\n observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting && !isLoading) {\r\n loadNextPage();\r\n }\r\n });\r\n }, { rootMargin: '250px' });\r\n\r\n const initPage = parseInt(container.dataset.page);\r\n const initMax = parseInt(container.dataset.maxPages);\r\n if (initPage < initMax) {\r\n observer.observe(sentinel);\r\n }\r\n }\r\n\r\n \/\/ Tab \u5207\u6362\u903b\u8f91\r\n tabs.forEach(tab => {\r\n tab.addEventListener('click', function() {\r\n if (this.classList.contains('active')) return;\r\n \r\n tabs.forEach(t => t.classList.remove('active'));\r\n this.classList.add('active');\r\n \r\n const slug = this.dataset.slug;\r\n const taxonomy = container.dataset.taxonomy;\r\n const postsPerPage = container.dataset.postsPerPage;\r\n\r\n if (observer && sentinel) observer.unobserve(sentinel);\r\n\r\n isLoading = true;\r\n grid.classList.add('loading');\r\n if (spinner) spinner.style.display = 'flex';\r\n if (noMore) noMore.style.display = 'none';\r\n\r\n const formData = new FormData();\r\n formData.append('action', 'fetch_glass_posts');\r\n formData.append('nonce', nonce);\r\n formData.append('slug', slug);\r\n formData.append('taxonomy', taxonomy);\r\n formData.append('paged', 1);\r\n formData.append('posts_per_page', postsPerPage);\r\n formData.append('start_index', 0);\r\n\r\n fetch(ajaxUrl, { method: 'POST', body: formData })\r\n .then(res => {\r\n if (!res.ok) throw new Error('Network response was not ok');\r\n return res.json();\r\n })\r\n .then(res => {\r\n if (res.success) {\r\n grid.innerHTML = res.data.html;\r\n container.dataset.currentSlug = slug;\r\n container.dataset.page = 1;\r\n container.dataset.maxPages = res.data.max_pages;\r\n if (res.data.total_count !== undefined) {\r\n const totalEl = container.querySelector('.total-count-num');\r\n if (totalEl) totalEl.textContent = res.data.total_count;\r\n }\r\n } else {\r\n if (res.data && res.data.message) {\r\n console.warn(res.data.message);\r\n }\r\n grid.innerHTML = '<p class=\"no-posts-msg\">\u8be5\u5206\u7c7b\u4e0b\u6682\u65e0\u6587\u7ae0\u3002<\/p>';\r\n }\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n grid.innerHTML = '<p class=\"no-posts-msg\">\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5\u3002<\/p>';\r\n })\r\n .finally(() => {\r\n isLoading = false;\r\n grid.classList.remove('loading');\r\n syncUIState();\r\n\r\n const curMax = parseInt(container.dataset.maxPages);\r\n if (isInfiniteEnabled && curMax > 1 && observer && sentinel) {\r\n observer.observe(sentinel);\r\n requestAnimationFrame(() => {\r\n setTimeout(checkAndAutoLoad, 100);\r\n });\r\n }\r\n });\r\n });\r\n });\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', revealAndInit);\r\n } else {\r\n revealAndInit();\r\n }\r\n })();\r\n <\/script>\r\n <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6f65ed4 elementor-widget elementor-widget-shortcode\" data-id=\"6f65ed4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"> <!-- \u9632\u95ea\u70c1\u6837\u5f0f -->\r\n <style id=\"glass-instance-3-prevent-fouc\">\r\n #glass-instance-3.glass-container {\r\n opacity: 0 !important;\r\n visibility: hidden !important;\r\n max-height: 0px !important;\r\n overflow: hidden !important;\r\n transition: none !important;\r\n }\r\n <\/style>\r\n\r\n <div id=\"glass-instance-3\"\r\n class=\"glass-container\" \r\n data-taxonomy=\"category\" \r\n data-is-multi=\"0\"\r\n data-enable-infinite=\"0\"\r\n data-posts-per-page=\"3\"\r\n data-current-slug=\"%e8%a6%96%e9%a0%bb\"\r\n data-page=\"1\"\r\n data-max-pages=\"40\"\r\n data-nonce=\"512b99672c\">\r\n \r\n <div class=\"glass-header is-single-header\">\r\n <div class=\"header-left\">\r\n <h2 class=\"glass-title\">\u89c6\u9891<\/h2>\r\n \r\n \r\n <div class=\"glass-stats\">\r\n \u5171 <span class=\"total-count-num\">118<\/span> \u7bc7\u5185\u5bb9\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"https:\/\/www.hendricksin.hk\/index.php\/%e6%96%b0%e8%81%9e\/\" class=\"glass-action-btn\" target=\"_blank\" rel=\"noopener\">\r\n <span>\u67e5\u770b\u66f4\u591a\u89c6\u9891<\/span>\r\n <svg class=\"btn-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\r\n <polyline points=\"12 5 19 12 12 19\"><\/polyline>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"glass-grid posts-grid\">\r\n <a href=\"https:\/\/www.dotdotnews.com\/a\/202607\/02\/AP6a460511e4b04b6c5d3224e5.html\" class=\"post-card\" style=\"animation-delay: 0.00s !important;\">\r\n <div class=\"card-thumbnail\">\r\n <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"162\" src=\"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/07\/ScreenShot_2026-07-02_170235_187-300x162.png\" class=\"attachment-medium size-medium wp-post-image\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/07\/ScreenShot_2026-07-02_170235_187-300x162.png 300w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/07\/ScreenShot_2026-07-02_170235_187-1024x554.png 1024w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/07\/ScreenShot_2026-07-02_170235_187-768x416.png 768w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/07\/ScreenShot_2026-07-02_170235_187-1536x832.png 1536w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/07\/ScreenShot_2026-07-02_170235_187-200x108.png 200w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/07\/ScreenShot_2026-07-02_170235_187.png 1917w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/> <div class=\"card-date overlay-date\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\r\n <span>2026-07-02<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h3 class=\"card-title\">\u6559\u80b2\u5efa\u8a00\uff5c\u51bc\u6f22\u5ef8\uff1a\u63a8\u52d5\u6e2f\u7522\u79d1\u4f01\u300c\u5f9e\u4e00\u5230\u5341\u300d\u3000\u5b55\u80b2\u66f4\u591a\u5927\u7586\u5546\u6e6f<\/h3>\r\n <p class=\"card-excerpt\"><\/p>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/www.youtube.com\/watch?v=rgOFCPYnGBU\" class=\"post-card\" style=\"animation-delay: 0.08s !important;\">\r\n <div class=\"card-thumbnail\">\r\n <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"166\" src=\"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-06-04_114121_893-300x166.png\" class=\"attachment-medium size-medium wp-post-image\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-06-04_114121_893-300x166.png 300w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-06-04_114121_893-1024x568.png 1024w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-06-04_114121_893-768x426.png 768w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-06-04_114121_893-200x111.png 200w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-06-04_114121_893.png 1406w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/> <div class=\"card-date overlay-date\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\r\n <span>2026-04-30<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h3 class=\"card-title\">\u3010HK01\u3011Talk-Talk \u7db2\u4e0a\u8b1b\u5ea7\uff5c\u6e2f\u5546\u9032\u8ecd\u524d\u6d77\u653b\u7b56\u5168\u653b\u7565\uff1a\u5982\u4f55\u5584\u7528\u512a\u8cea\u8cc7\u6e90\u7a81\u7834\u74f6\u9838\uff1f<\/h3>\r\n <p class=\"card-excerpt\"><\/p>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/www.facebook.com\/reel\/899458436459660\" class=\"post-card\" style=\"animation-delay: 0.16s !important;\">\r\n <div class=\"card-thumbnail\">\r\n <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"165\" src=\"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-04-14_104319_711-300x165.png\" class=\"attachment-medium size-medium wp-post-image\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-04-14_104319_711-300x165.png 300w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-04-14_104319_711-1024x564.png 1024w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-04-14_104319_711-768x423.png 768w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-04-14_104319_711-1536x846.png 1536w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-04-14_104319_711-200x110.png 200w, https:\/\/www.hendricksin.hk\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-04-14_104319_711.png 1542w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/> <div class=\"card-date overlay-date\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\r\n <span>2026-04-14<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h3 class=\"card-title\">2026\u5e74\u4e16\u754c\u4e92\u806f\u7db2\u5927\u6703\u4e9e\u592a\u5cf0\u6703\u8a2a\u8ac7\u7cbe\u83ef-\u6578\u5b57\u653f\u7b56\u8fa6\u516c\u5ba4<\/h3>\r\n <p class=\"card-excerpt\"><\/p>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <style>\r\n \/* ========== \u2728 \u65b0\u6837\u5f0f\uff1a\u900f\u660e\u80cc\u666f + \u60ac\u6d6e\u5361\u7247 ========== *\/\r\n \r\n \/* \u5bb9\u5668\u663e\u73b0\u52a8\u753b *\/\r\n .glass-container.glass-ready {\r\n opacity: 1 !important;\r\n visibility: visible !important;\r\n max-height: none !important;\r\n overflow: visible !important;\r\n transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;\r\n }\r\n \r\n \/* \r\n \u4e3b\u5bb9\u5668\uff1a\u5b8c\u5168\u900f\u660e \r\n *\/\r\n .glass-container {\r\n max-width: 1080px !important;\r\n margin: 0 auto !important;\r\n padding: 32px 0 !important;\r\n border-radius: 0 !important;\r\n background: transparent !important;\r\n backdrop-filter: none !important;\r\n -webkit-backdrop-filter: none !important;\r\n border: none !important;\r\n box-shadow: none !important;\r\n font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif !important;\r\n box-sizing: border-box !important;\r\n float: none !important;\r\n position: relative !important;\r\n clear: both !important;\r\n }\r\n\r\n .glass-container *, .glass-container *::before, .glass-container *::after { box-sizing: border-box !important; }\r\n \r\n .glass-container a, \r\n .glass-container a:hover, \r\n .glass-container a:focus, \r\n .glass-container a:focus-visible, \r\n .glass-container a:active { \r\n text-decoration: none !important; \r\n outline: none !important; \r\n outline-offset: 0 !important;\r\n -webkit-tap-highlight-color: transparent !important;\r\n }\r\n\r\n \/* \u5934\u90e8\u5e03\u5c40 *\/\r\n .glass-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 28px !important; flex-wrap: wrap !important; gap: 14px !important; border: none !important; background: none !important; padding: 0 16px !important; }\r\n .header-left { display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }\r\n .glass-title { margin: 0 !important; padding: 0 !important; font-size: 21px !important; font-weight: 700 !important; color: #111827 !important; letter-spacing: -0.025em !important; white-space: nowrap !important; line-height: 1.2 !important; border: none !important; background: none !important; }\r\n \r\n \/* Tabs \u6837\u5f0f\u5fae\u8c03 - \u4fdd\u6301\u8f7b\u5fae\u73bb\u7483\u611f\u4ee5\u533a\u5206\u5c42\u7ea7 *\/\r\n .glass-tabs-wrapper { \r\n max-width: 100% !important; \r\n margin: 0 !important; \r\n padding: 0 !important; \r\n flex: 1 1 auto !important; \/* \u5141\u8bb8\u5360\u636e\u5269\u4f59\u7a7a\u95f4 *\/\r\n min-width: 0 !important;\r\n }\r\n \r\n \/* \u65b0\u589e\uff1a\u79fb\u52a8\u7aef\u6eda\u52a8\u5bb9\u5668 *\/\r\n .glass-tabs-scroll-container {\r\n width: 100% !important;\r\n overflow-x: auto !important;\r\n -webkit-overflow-scrolling: touch !important; \/* iOS \u5e73\u6ed1\u6eda\u52a8 *\/\r\n scrollbar-width: none !important; \/* Firefox \u9690\u85cf\u6eda\u52a8\u6761 *\/\r\n -ms-overflow-style: none !important; \/* IE \u9690\u85cf\u6eda\u52a8\u6761 *\/\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n \r\n \/* \u9690\u85cf Webkit \u6d4f\u89c8\u5668\u7684\u6eda\u52a8\u6761 *\/\r\n .glass-tabs-scroll-container::-webkit-scrollbar {\r\n display: none !important;\r\n width: 0 !important;\r\n height: 0 !important;\r\n }\r\n\r\n .glass-tabs { \r\n display: flex !important; \r\n flex-wrap: nowrap !important; \/* \u5f3a\u5236\u4e0d\u6362\u884c *\/\r\n gap: 6px !important; \r\n background: rgba(255, 255, 255, 0.5) !important; \r\n padding: 4px !important; \r\n border-radius: 14px !important; \r\n border: 1px solid rgba(255, 255, 255, 0.8) !important; \r\n margin: 0 !important; \r\n backdrop-filter: blur(10px); \r\n width: fit-content !important; \/* \u5bbd\u5ea6\u9002\u5e94\u5185\u5bb9 *\/\r\n min-width: 100% !important; \/* \u81f3\u5c11\u5360\u6ee1\u5bb9\u5668 *\/\r\n }\r\n \r\n .glass-tab-btn { \r\n border: none !important; \r\n outline: none !important; \r\n background: transparent !important; \r\n padding: 7px 14px !important; \/* \u7a0d\u5fae\u589e\u5927\u70b9\u51fb\u533a *\/\r\n border-radius: 10px !important; \r\n font-size: 13px !important; \r\n font-weight: 600 !important; \r\n color: #6b7280 !important; \r\n cursor: pointer !important; \r\n transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important; \r\n line-height: 1.4 !important; \r\n margin: 0 !important; \r\n box-shadow: none !important; \r\n white-space: nowrap !important; \/* \u6587\u5b57\u4e0d\u6362\u884c *\/\r\n flex-shrink: 0 !important; \/* \u9632\u6b62\u6309\u94ae\u88ab\u538b\u7f29 *\/\r\n }\r\n \r\n .glass-tab-btn:hover { color: #111827 !important; background: rgba(255,255,255,0.8); }\r\n .glass-tab-btn.active { background: #ffffff !important; color: #2563eb !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03) !important; }\r\n\r\n \/* \u7edf\u8ba1\u6570\u5b57 *\/\r\n .glass-stats { padding: 5px 14px !important; border-radius: 20px !important; background: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.8) !important; font-size: 11px !important; color: #4b5563 !important; font-weight: 500 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important; white-space: nowrap !important; margin: 0 !important; flex-shrink: 0 !important; }\r\n .total-count-num { font-weight: 700 !important; color: #2563eb !important; }\r\n \r\n \/* \u6309\u94ae\u6837\u5f0f *\/\r\n .glass-action-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 18px !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.9) !important; background: #ffffff !important; color: #1f2937 !important; font-size: 12px !important; font-weight: 600 !important; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important; white-space: nowrap !important; margin: 0 !important; flex-shrink: 0 !important; }\r\n .glass-action-btn .btn-icon { transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; stroke: currentColor !important; }\r\n\r\n @media (hover: hover) and (pointer: fine) {\r\n .glass-action-btn:hover { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25) !important; transform: translateY(-1px) !important; }\r\n .glass-action-btn:hover .btn-icon { transform: translateX(3px) !important; }\r\n }\r\n\r\n \/* \u7f51\u683c\u5e03\u5c40 *\/\r\n .glass-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 24px !important; transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important; margin: 0 !important; padding: 0 16px !important; border: none !important; background: none !important; }\r\n .glass-grid.loading { opacity: 0.4 !important; filter: blur(2px) !important; transform: scale(0.995) !important; pointer-events: none !important; }\r\n \r\n \/* ========== \u2728 \u6838\u5fc3\uff1a\u60ac\u6d6e\u5361\u7247\u6837\u5f0f ========== *\/\r\n .glass-container .post-card { \r\n display: flex !important; \r\n flex-direction: column !important; \r\n border-radius: 16px !important; \r\n background: #ffffff !important; \r\n border: 1px solid rgba(255, 255, 255, 0.5) !important; \r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important; \r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease !important; \r\n box-sizing: border-box !important; \r\n overflow: hidden !important; \r\n padding: 0 !important; \r\n margin: 0 !important; \r\n width: 100% !important; \r\n float: none !important; \r\n user-select: none !important;\r\n outline: none !important;\r\n will-change: transform, box-shadow;\r\n position: relative !important;\r\n animation: cardFloatIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;\r\n }\r\n\r\n @keyframes cardFloatIn {\r\n 0% { opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(5px); }\r\n 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }\r\n }\r\n\r\n @media (hover: hover) and (pointer: fine) {\r\n .glass-container .post-card:hover { \r\n transform: translateY(-8px) scale(1.02) !important; \r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; \r\n border-color: rgba(255, 255, 255, 1) !important; \r\n z-index: 10 !important;\r\n }\r\n .post-card:hover .card-thumbnail img { transform: scale(1.08) !important; }\r\n .post-card:hover .card-title { color: #2563eb !important; }\r\n }\r\n\r\n .glass-container .post-card:active { \r\n transform: scale(0.98) !important; \r\n transition: transform 0.1s ease !important; \r\n box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;\r\n }\r\n \r\n .card-thumbnail { position: relative !important; width: 100% !important; height: 180px !important; overflow: hidden !important; background: #f3f4f6 !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; }\r\n .card-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; }\r\n \r\n .card-date { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; margin: 0 !important; }\r\n .overlay-date { position: absolute !important; top: 10px !important; left: 10px !important; padding: 5px 9px !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: #1f2937 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; z-index: 2 !important; }\r\n .card-header-row { display: flex !important; justify-content: flex-start !important; margin-bottom: 12px !important; padding: 14px 14px 0 14px !important; border: none !important; }\r\n .inline-date { color: #6b7280 !important; background: rgba(0,0,0,0.04) !important; padding: 4px 8px !important; border-radius: 6px !important; }\r\n \r\n .card-body { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; padding: 14px !important; margin: 0 !important; border: none !important; background: none !important; }\r\n .card-title { margin: 0 0 8px 0 !important; font-size: 15px !important; font-weight: 700 !important; color: #111827 !important; line-height: 1.4 !important; transition: color 0.2s ease !important; border: none !important; padding: 0 !important; background: none !important; letter-spacing: -0.01em !important; }\r\n .card-excerpt { margin: 0 !important; font-size: 13px !important; color: #6b7280 !important; line-height: 1.6 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; border: none !important; padding: 0 !important; background: none !important; }\r\n \r\n .no-posts-msg { color: #6b7280 !important; grid-column: 1\/-1 !important; text-align: center !important; padding: 32px 0 !important; margin: 0 !important; animation: cardFloatIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important; }\r\n \r\n .glass-infinite-status { margin-top: 28px !important; text-align: center !important; font-size: 12px !important; color: #9ca3af !important; font-weight: 500 !important; }\r\n .glass-spinner { display: flex; align-items: center !important; justify-content: center !important; gap: 10px !important; animation: cardFloatIn 0.3s ease !important; }\r\n \r\n .apple-spinner { position: relative !important; width: 20px !important; height: 20px !important; display: inline-block !important; }\r\n .apple-spinner div { width: 6% !important; height: 22% !important; background: #9ca3af !important; position: absolute !important; left: 47% !important; top: 39% !important; opacity: 0 !important; border-radius: 50px !important; animation: appleSpinnerFade 1s linear infinite !important; }\r\n .apple-spinner div:nth-child(1) { transform: rotate(0deg) translate(0, -142%); animation-delay: 0s !important; }\r\n .apple-spinner div:nth-child(2) { transform: rotate(30deg) translate(0, -142%); animation-delay: -0.9167s !important; }\r\n .apple-spinner div:nth-child(3) { transform: rotate(60deg) translate(0, -142%); animation-delay: -0.8333s !important; }\r\n .apple-spinner div:nth-child(4) { transform: rotate(90deg) translate(0, -142%); animation-delay: -0.75s !important; }\r\n .apple-spinner div:nth-child(5) { transform: rotate(120deg) translate(0, -142%); animation-delay: -0.6667s !important; }\r\n .apple-spinner div:nth-child(6) { transform: rotate(150deg) translate(0, -142%); animation-delay: -0.5833s !important; }\r\n .apple-spinner div:nth-child(7) { transform: rotate(180deg) translate(0, -142%); animation-delay: -0.5s !important; }\r\n .apple-spinner div:nth-child(8) { transform: rotate(210deg) translate(0, -142%); animation-delay: -0.4167s !important; }\r\n .apple-spinner div:nth-child(9) { transform: rotate(240deg) translate(0, -142%); animation-delay: -0.3333s !important; }\r\n .apple-spinner div:nth-child(10) { transform: rotate(270deg) translate(0, -142%); animation-delay: -0.25s !important; }\r\n .apple-spinner div:nth-child(11) { transform: rotate(300deg) translate(0, -142%); animation-delay: -0.1667s !important; }\r\n .apple-spinner div:nth-child(12) { transform: rotate(330deg) translate(0, -142%); animation-delay: -0.0833s !important; }\r\n\r\n @keyframes appleSpinnerFade { 0% { opacity: 1; } 100% { opacity: 0.15; } }\r\n\r\n .glass-no-more { color: #9ca3af !important; font-size: 11px !important; padding: 10px 0 !important; animation: cardFloatIn 0.4s ease !important; }\r\n .glass-infinite-sentinel { height: 20px !important; margin-top: 10px !important; }\r\n\r\n \/* ========== \ud83d\udcf1 \u79fb\u52a8\u7aef\u9002\u914d\u4f18\u5316 ========== *\/\r\n @media (max-width: 768px) {\r\n .glass-container { padding: 20px 0 !important; border-radius: 0 !important; }\r\n \r\n \/* \u5934\u90e8\u5728\u79fb\u52a8\u7aef\u6539\u4e3a\u5782\u76f4\u6392\u5217\uff0c\u7ed9 Tabs \u66f4\u591a\u7a7a\u95f4 *\/\r\n .glass-header.is-multi-header { \r\n flex-direction: column !important; \r\n align-items: stretch !important; \r\n gap: 14px !important; \r\n margin-bottom: 20px !important; \r\n padding: 0 16px !important; \r\n }\r\n \r\n .glass-header.is-multi-header .header-left { \r\n width: 100% !important; \r\n flex-direction: column !important; \r\n align-items: flex-start !important; \r\n gap: 10px !important; \r\n }\r\n \r\n .glass-header.is-multi-header .glass-title { \r\n font-size: 19px !important; \r\n }\r\n \r\n \/* \u5173\u952e\u4f18\u5316\uff1aTabs \u533a\u57df *\/\r\n .glass-header.is-multi-header .glass-tabs-wrapper { \r\n width: 100% !important; \r\n margin: 0 !important;\r\n }\r\n \r\n .glass-header.is-multi-header .glass-tabs-scroll-container {\r\n \/* \u786e\u4fdd\u53ef\u4ee5\u6a2a\u5411\u6eda\u52a8 *\/\r\n overflow-x: auto !important;\r\n -webkit-overflow-scrolling: touch !important;\r\n }\r\n \r\n .glass-header.is-multi-header .glass-tabs { \r\n \/* \u79fb\u9664\u6700\u5c0f\u5bbd\u5ea6\u9650\u5236\uff0c\u8ba9\u5185\u5bb9\u81ea\u7136\u6491\u5f00\u4ee5\u4fbf\u6eda\u52a8 *\/\r\n min-width: auto !important; \r\n width: auto !important;\r\n padding: 4px 6px !important; \/* \u7a0d\u5fae\u51cf\u5c0f\u5185\u8fb9\u8ddd *\/\r\n }\r\n \r\n .glass-header.is-multi-header .glass-tab-btn { \r\n padding: 6px 12px !important; \/* \u9002\u5408\u624b\u6307\u70b9\u51fb\u7684\u5927\u5c0f *\/\r\n font-size: 12px !important; \r\n }\r\n\r\n \/* \u5355\u5206\u7c7b\u5934\u90e8\u4fdd\u6301\u6a2a\u5411 *\/\r\n .glass-header.is-single-header { \r\n flex-direction: row !important; \r\n flex-wrap: nowrap !important; \r\n align-items: center !important; \r\n justify-content: space-between !important; \r\n gap: 8px !important; \r\n margin-bottom: 20px !important; \r\n padding: 0 16px !important; \r\n }\r\n \r\n .glass-header.is-single-header .header-left { \r\n width: auto !important; \r\n flex-direction: row !important; \r\n align-items: center !important; \r\n flex-wrap: nowrap !important; \r\n gap: 8px !important; \r\n flex: 1 1 auto !important; \r\n min-width: 0 !important; \r\n }\r\n \r\n .glass-header.is-single-header .glass-title { \r\n font-size: 17px !important; \r\n overflow: hidden !important; \r\n text-overflow: ellipsis !important; \r\n }\r\n \r\n .glass-header.is-single-header .glass-stats { \r\n padding: 4px 10px !important; \r\n font-size: 10px !important; \r\n flex-shrink: 0 !important; \r\n }\r\n \r\n .glass-header.is-single-header .glass-action-btn { \r\n padding: 6px 12px !important; \r\n font-size: 11px !important; \r\n flex-shrink: 0 !important; \r\n }\r\n\r\n \/* \u7f51\u683c\u53d8\u4e3a\u5355\u5217 *\/\r\n .glass-grid { \r\n grid-template-columns: 1fr !important; \r\n gap: 16px !important; \r\n padding: 0 16px !important; \r\n }\r\n \r\n .card-thumbnail { height: 200px !important; }\r\n .card-date { font-size: 9px !important; }\r\n .overlay-date { padding: 4px 8px !important; }\r\n .card-title { font-size: 14px !important; }\r\n .card-excerpt { font-size: 12px !important; }\r\n }\r\n <\/style>\r\n\r\n <script>\r\n (function() {\r\n function revealAndInit() {\r\n const container = document.getElementById('glass-instance-3');\r\n if (!container || container.dataset.initialized) return;\r\n container.dataset.initialized = '1';\r\n\r\n const styleNode = document.getElementById('glass-instance-3-prevent-fouc');\r\n if (styleNode) styleNode.remove();\r\n\r\n container.classList.add('glass-ready');\r\n\r\n const isInfiniteEnabled = container.dataset.enableInfinite === '1';\r\n const ajaxUrl = 'https:\/\/www.hendricksin.hk\/wp-admin\/admin-ajax.php';\r\n const tabs = container.querySelectorAll('.glass-tab-btn');\r\n const grid = container.querySelector('.posts-grid');\r\n const spinner = container.querySelector('.glass-spinner');\r\n const noMore = container.querySelector('.glass-no-more');\r\n const sentinel = container.querySelector('.glass-infinite-sentinel');\r\n const nonce = container.dataset.nonce;\r\n\r\n let isLoading = false;\r\n let observer = null;\r\n\r\n function syncUIState() {\r\n if (!isInfiniteEnabled || !spinner || !noMore) return;\r\n const currentPage = parseInt(container.dataset.page);\r\n const maxPages = parseInt(container.dataset.maxPages);\r\n\r\n spinner.style.display = 'none';\r\n if (currentPage >= maxPages && maxPages > 0) {\r\n noMore.style.display = 'block';\r\n } else {\r\n noMore.style.display = 'none';\r\n }\r\n if (observer && sentinel) {\r\n if (currentPage >= maxPages) {\r\n observer.unobserve(sentinel);\r\n } else {\r\n observer.observe(sentinel);\r\n }\r\n }\r\n }\r\n\r\n function loadNextPage() {\r\n let currentPage = parseInt(container.dataset.page);\r\n const maxPages = parseInt(container.dataset.maxPages);\r\n\r\n if (isLoading || currentPage >= maxPages) return;\r\n\r\n isLoading = true;\r\n if (observer && sentinel) observer.unobserve(sentinel);\r\n\r\n if (spinner) spinner.style.display = 'flex';\r\n if (noMore) noMore.style.display = 'none';\r\n\r\n const nextPage = currentPage + 1;\r\n const slug = container.dataset.currentSlug;\r\n const taxonomy = container.dataset.taxonomy;\r\n const postsPerPage = container.dataset.postsPerPage;\r\n const startIndex = grid ? grid.children.length : 0;\r\n\r\n const formData = new FormData();\r\n formData.append('action', 'fetch_glass_posts');\r\n formData.append('nonce', nonce);\r\n formData.append('slug', slug);\r\n formData.append('taxonomy', taxonomy);\r\n formData.append('paged', nextPage);\r\n formData.append('posts_per_page', postsPerPage);\r\n formData.append('start_index', startIndex);\r\n\r\n fetch(ajaxUrl, { method: 'POST', body: formData })\r\n .then(res => {\r\n if (!res.ok) throw new Error('Network response was not ok');\r\n return res.json();\r\n })\r\n .then(res => {\r\n if (res.success && res.data.html) {\r\n grid.insertAdjacentHTML('beforeend', res.data.html);\r\n container.dataset.page = nextPage;\r\n container.dataset.maxPages = res.data.max_pages;\r\n if (res.data.total_count !== undefined) {\r\n const totalEl = container.querySelector('.total-count-num');\r\n if (totalEl) totalEl.textContent = res.data.total_count;\r\n }\r\n } else {\r\n if (res.data && res.data.message) {\r\n console.warn(res.data.message);\r\n }\r\n if (noMore) noMore.style.display = 'block';\r\n if (spinner) spinner.style.display = 'none';\r\n container.dataset.maxPages = currentPage;\r\n }\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n isLoading = false;\r\n syncUIState();\r\n if (noMore) {\r\n noMore.textContent = '\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5';\r\n noMore.style.display = 'block';\r\n }\r\n })\r\n .finally(() => {\r\n isLoading = false;\r\n syncUIState();\r\n\r\n const updatedPage = parseInt(container.dataset.page);\r\n const updatedMax = parseInt(container.dataset.maxPages);\r\n\r\n if (updatedPage < updatedMax && observer && sentinel) {\r\n observer.observe(sentinel);\r\n requestAnimationFrame(() => {\r\n setTimeout(checkAndAutoLoad, 100);\r\n });\r\n }\r\n });\r\n }\r\n\r\n function checkAndAutoLoad() {\r\n if (!sentinel || isLoading) return;\r\n const currentPage = parseInt(container.dataset.page);\r\n const maxPages = parseInt(container.dataset.maxPages);\r\n if (currentPage >= maxPages) return;\r\n\r\n const rect = sentinel.getBoundingClientRect();\r\n const windowHeight = window.innerHeight || document.documentElement.clientHeight;\r\n \r\n if (rect.top <= windowHeight + 250) {\r\n loadNextPage();\r\n }\r\n }\r\n\r\n if (isInfiniteEnabled && sentinel) {\r\n syncUIState();\r\n\r\n observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting && !isLoading) {\r\n loadNextPage();\r\n }\r\n });\r\n }, { rootMargin: '250px' });\r\n\r\n const initPage = parseInt(container.dataset.page);\r\n const initMax = parseInt(container.dataset.maxPages);\r\n if (initPage < initMax) {\r\n observer.observe(sentinel);\r\n }\r\n }\r\n\r\n \/\/ Tab \u5207\u6362\u903b\u8f91\r\n tabs.forEach(tab => {\r\n tab.addEventListener('click', function() {\r\n if (this.classList.contains('active')) return;\r\n \r\n tabs.forEach(t => t.classList.remove('active'));\r\n this.classList.add('active');\r\n \r\n const slug = this.dataset.slug;\r\n const taxonomy = container.dataset.taxonomy;\r\n const postsPerPage = container.dataset.postsPerPage;\r\n\r\n if (observer && sentinel) observer.unobserve(sentinel);\r\n\r\n isLoading = true;\r\n grid.classList.add('loading');\r\n if (spinner) spinner.style.display = 'flex';\r\n if (noMore) noMore.style.display = 'none';\r\n\r\n const formData = new FormData();\r\n formData.append('action', 'fetch_glass_posts');\r\n formData.append('nonce', nonce);\r\n formData.append('slug', slug);\r\n formData.append('taxonomy', taxonomy);\r\n formData.append('paged', 1);\r\n formData.append('posts_per_page', postsPerPage);\r\n formData.append('start_index', 0);\r\n\r\n fetch(ajaxUrl, { method: 'POST', body: formData })\r\n .then(res => {\r\n if (!res.ok) throw new Error('Network response was not ok');\r\n return res.json();\r\n })\r\n .then(res => {\r\n if (res.success) {\r\n grid.innerHTML = res.data.html;\r\n container.dataset.currentSlug = slug;\r\n container.dataset.page = 1;\r\n container.dataset.maxPages = res.data.max_pages;\r\n if (res.data.total_count !== undefined) {\r\n const totalEl = container.querySelector('.total-count-num');\r\n if (totalEl) totalEl.textContent = res.data.total_count;\r\n }\r\n } else {\r\n if (res.data && res.data.message) {\r\n console.warn(res.data.message);\r\n }\r\n grid.innerHTML = '<p class=\"no-posts-msg\">\u8be5\u5206\u7c7b\u4e0b\u6682\u65e0\u6587\u7ae0\u3002<\/p>';\r\n }\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n grid.innerHTML = '<p class=\"no-posts-msg\">\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5\u3002<\/p>';\r\n })\r\n .finally(() => {\r\n isLoading = false;\r\n grid.classList.remove('loading');\r\n syncUIState();\r\n\r\n const curMax = parseInt(container.dataset.maxPages);\r\n if (isInfiniteEnabled && curMax > 1 && observer && sentinel) {\r\n observer.observe(sentinel);\r\n requestAnimationFrame(() => {\r\n setTimeout(checkAndAutoLoad, 100);\r\n });\r\n }\r\n });\r\n });\r\n });\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', revealAndInit);\r\n } else {\r\n revealAndInit();\r\n }\r\n })();\r\n <\/script>\r\n <\/div>\n\t\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>\u51bc\u6f22\u5ef8 Hendrick Sin – \u8f6e\u64ad\u7ec4\u4ef6\uff08\u6d45\u8272\u73bb\u7483\u98ce\u683c\uff09 — — & […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-4208","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.hendricksin.hk\/index.php\/wp-json\/wp\/v2\/pages\/4208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hendricksin.hk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hendricksin.hk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hendricksin.hk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hendricksin.hk\/index.php\/wp-json\/wp\/v2\/comments?post=4208"}],"version-history":[{"count":1528,"href":"https:\/\/www.hendricksin.hk\/index.php\/wp-json\/wp\/v2\/pages\/4208\/revisions"}],"predecessor-version":[{"id":9205,"href":"https:\/\/www.hendricksin.hk\/index.php\/wp-json\/wp\/v2\/pages\/4208\/revisions\/9205"}],"wp:attachment":[{"href":"https:\/\/www.hendricksin.hk\/index.php\/wp-json\/wp\/v2\/media?parent=4208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}